Tokens & Theming for Web

Using Design Tokens on Web

Tokens are automatically available as CSS variables on every Company-Cam-API page. (If you look in DevTools, you can see them at the bottom of styles tab.)

To use a token in your code, search for the token you need here. If you're not sure, ask the designer you're working with.

Once you've found the token, you can paste it into your code:

const Container = styled.div`
  background-color: var(--cc_color_background_2);
  color: var(--cc_color_text_subtle);
  font-size: var(--cc_size_text_m);
  padding: var(--cc_size_spacing_m);
  border-radius: var(--cc_size_border_radius_l);
`;

Using Tokens Outside Company-Cam-API

You can import the tokens from slab-tokens:

// Design token CSS variables from Slab
@import '@companycam/slab-tokens/css/base.css';
@import '@companycam/slab-tokens/css/light_environment.css';
@import '@companycam/slab-tokens/css/dark_environment.css';

If you can't use slab-tokens, they're also available from S3:

https://companycam-public-designassets.s3.us-west-2.amazonaws.com/design-tokens/base.css
https://companycam-public-designassets.s3.us-west-2.amazonaws.com/design-tokens/light_environment.css
https://companycam-public-designassets.s3.us-west-2.amazonaws.com/design-tokens/dark_environment.css

Theming on Web

Our themed color tokens will switch to dark mode if they are used inside a parent element with the dark-environment class.

<div className="dark-environment">
  <h1 style={{ color: "var(--cc_color_text_default)" }}>
    I will render in dark mode!
  </h1>
</div>

Why Don't We Have Global Dark Mode on the Web App?

If you go into DevTools and toggle the dark-environment class on the body element, you'll see why. There are still a lot of old color styles that need to be updated to use design tokens.

However, it is totally possible to use dark mode locally.

The main navigation on Company-Cam-API is a good example. It's wrapped with the dark-environment class to switch our color tokens to dark mode; but it doesn't affect the rest of the page.