@volvo-cars/ui-design-tokens
v2.17.0
Published
_Questions? Ask in [Slack #design-system-web](https://vcc-consumer-digital.slack.com/archives/C041K092P4P)_
Downloads
6,898
Maintainers
sylvainestevezvolvocars
allenbargi-vcc
jacobrask
glenashley
volvocars-uip-bot
alizeait
kristiankalb
samny_volvocarsKeywords
Readme
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-tokensThe following CSS files are available from the package:
- ./css/tokens.css - CSS custom properties / variables with design tokens
- ./css/volvo-broad.css -
@font-facerules for Volvo Broad - ./css/volvo-novum.css -
@font-facerules 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-darkDevelopment
To build the design tokens locally run yarn build