Tokens

See below for all color tokens or view in Storybook .

Overview

Resources

Install


yarn add @camp/tokens

Upgrading to Next Gen

🎨 Updated color palette with an eye toward accessibility

🔄 New semantic naming, making it easier to apply tokens across the platform

🧩 More streamlined code offering dark mode support and theme object tokens for CSS-in-JS.

Usage

To leverage the new 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 .