@volvo-cars/ui-design-tokens

Volvo Cars UI Design Tokens

Questions? Ask in Slack #design-system-web

Design tokens capture the low-level design properties like colors, grid, spacing and typography. These tokens provide a single source of truth and feed into the different UI components.

Tokens in this repository should be in sync with the design libraries in Figma.

Usage

If you are using VCC UI, design tokens will be made available through built-in features in an upcoming release.

If you want to use the tokens directly outside of VCC UI:

Install the design tokens package by running

yarn add @volvo-cars/ui-design-tokens

The following CSS files are available from the package:

./css/tokens.css - CSS custom properties / variables with design tokens
./css/volvo-broad.css - @font-face rules for Volvo Broad
./css/volvo-novum.css - @font-face rules for Volvo Novum

Include the CSS files in your page, and add the versioned root class name, e.g. <html class="volvo_0_1"> (available as classNames.root).

To switch a section of the page to the dark color scheme, use the scheme-dark (classNames.schemeDark) class name and the scheme-light (classNames.schemeLight) class name to switch back.

Class names and tokens are available as JavaScript exports with TypeScript types for usage with CSS-in-JS or inline styles. The tokens refer to the CSS variables in the static CSS files, and will update dynamically based on the wrapping color scheme class name.

import { classNames, tokens } from '@volvo-cars/ui-design-tokens';

<div
  className={classNames.schemeLight}
  style={{
    background: tokens.colorBackgroundPrimary,
    color: tokens.colorPrimary,
    paddingBlock: tokens.size,
  }}
/>;

Next.js

Import the CSS in your project with the following imports

import '@volvo-cars/ui-design-tokens/css/tokens.css';
import '@volvo-cars/ui-design-tokens/css/volvo-broad.css';
import '@volvo-cars/ui-design-tokens/css/volvo-novum.css';

Add the appropriate class names

import { classNames } from '@volvo-cars/ui-design-tokens';

export default class MyDocument extends Document {
  render() {
    return <Html className={classNames.root}></Html>;
  }
}

Legacy Output

Legacy tokens are still available in 2.x in the following output structure

- build/
  - web
    - volvo
      - tokens.css
      - tokens.json
      - tokens.scss
    - volvo-dark
  - android
    - volvo
    - volvo-dark
  - ios
    - volvo
    - volvo-dark

Development

To build the design tokens locally run yarn build

@volvo-cars/ui-design-tokens