Your bookmarks

Colors / Theming

Colos 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

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>

}