• Tokens & Theming for Web

  Company-Cam-API and other web apps

• Tokens & Theming for Mobile

  companycam-mobile and other React Native apps

• Search Design Tokens

  Copy-and-paste right into your code.

Design Tokens

Design tokens are just values for color and size we share between our apps and our Figma libraries.

If you receive a Figma prototype from a product designer that requires styling, you'll need to use the design tokens to style the component. (But hopefully less and less, as we add more components to our design system.)

Our tokens live in their own slab-tokens package (code) and Figma library (design). The slab-tokens package uses Style Dictionary to generate different builds of the tokens (CSS, Sass, JSON, etc.).

We use design tokens to:

• Keep our UIs consistent. For example, instead of letting designers choose whatever border thickness they think looks good on a given day, they're required to select from a set we've all agreed to use.
• Enable us to make global branding changes. What if CompanyCam decides to change its brand blue to hot pink? Easy. We can update slab-tokens, and the updated color will appear in our apps when they update the package version.

Size Tokens

We use t-shirt sizing to name our size tokens.

tokens.size_spacing_m // js
var(--cc_size_spacing_m) // css

Important Note

Each category of tokens is sized relative to itself. For example, size_border_width_m returns 2px, while size_spacing_m returns 16px.

In other words, there is no universal m for the entire design system. Just FYI.

Color Tokens

Color tokens belong to one of the following categories:

• brand: Should only be used to express CompanyCam branding (and not in UI elements). Brand colors are not themed.
• utility: Used to express some form of status (success or error, for example).
• background: Our neutral background colors. Guaranteed to meet WCAG AA contrast requirements with our "text" colors.
• text: Our neutral text colors. Guaranteed to meet WCAG AA contrast requirements with our "background" colors.
• button: Text and background pairings for our buttons.
• link: Clickable/tappable text.
• border: Border colors for separating content and for use in inputs.
• depth: Colors for our depth shadows.
• label: Colors only for use in project labels.
• collab: Colors only for use in our collaboration feature.

Theming

You can switch this site back and forth between light and dark mode in the top nav. This is possible because Slab has light-environment and dark-environment themes that serve up different values for many of our color tokens.

But the fun doesn't have to stop at dark mode. Theming makes it possible to add any number of environments to either web or mobile. For example, we could add a "pumpkin-spice-environment" to celebrate fall. Should we? Nah. But it opens the door to maybe offering custom branding in the future, and stuff like that.

How Do I Use Tokens and Themes?

Theming works differently on web and mobile; but the end result is the same.

• On the web, we use the CSS variables build of our tokens. CSS variables work in both React and Rails, and are HTML's native solution for theming. Learn more
• On mobile, we import the JSON build of our tokens into our React Native app. We use styled-components' ThemeProvider to "tell" our components what theme is active. Learn more