Tokens

Loading...

See below for the tokens or view in Storybook .

Usage

To leverage the tokens, you have to be in a section of the app wrapped in a styled-components ThemeProvider. See the Styled Components & ThemeProvider guide for more details on setting up the ThemeProvider.

Once you have the ThemeProvider, you can use the tokens like this:

import styled from 'styled-components';
 
const StyledComponent = styled.div`
  background-color: ${({ theme }) => theme.colors.background.default};
  color: ${({ theme }) => theme.colors.text.default};
`;
 
<StyledComponent>Hello</StyledComponent>;

This allows you to use tokens in your components that contain light and dark mode. You can see more robust examples of this in our ai-camp components .

Tokens Table