Developer mode
Opens components on the React tab by default.
Your bookmarks

Colors / Theming

Color is used to signal structure on a page, to highlight or emphasize important information or elements, and to display different states of an interface.

Theming in React

You can create your own design tokens for themes and use them in your components.

import getTokens from "@kiwicom/orbit-components/lib/getTokens"; 
import ThemeProvider from "@kiwicom/orbit-components/lib/ThemeProvider";
() => {

const customTokens = getTokens({
  palette: {
    product: {
      light: "#fdf0ff",
      lightHover: "#fbdfff",
      lightActive: "#f9ceff",
      normal: "#5b0068",
      normalHover: "#4c0057",
      normalActive: "#3d0046",
      dark: "#110013",
    },
  },
})

return <Stack>
  <Button type="primary">Primary Button</Button>
  <ThemeProvider theme={{orbit: customTokens}}>
    <Button type="primary">Primary Button (themed)</Button>
  </ThemeProvider>
</Stack>

}

Styled components

For custom usage in styled-components, you should always depend on the actual theme property stored inside your context:

import React from "react";
import styled from "styled-components";

const StyledDiv = styled.div`
   margin: ${({ theme }) => theme.orbit.spaceLarge};
`;

If you don’t use a theming context in your application and you still want to use context, declare defaultProps for your styled component:

import React from "react";
import styled from "styled-components";
import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";

const StyledDiv = styled.div`
   margin: ${({ theme }) => theme.orbit.spaceLarge};
`;

StyledDiv.defaultProps = {
  theme: defaultTheme
};