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. You can see an example of that here .

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