Oombla DocsMenuoombla.com

CSS platform

Design tokens transformed to native CSS

Design tokens for CSS are exported as native CSS files with the tokens assigned to CSS variables wrapped in a :root pseudo-class.

:root {
  --variable-name: <value>;
}

There is a CSS file for each token category and an extra file that collates the typography tokens under a single classname for each text style. These files can be integrated into any modern web development system or simply referenced it their own <link> tag.

Explore a working demo of the design tokens exported for the CSS platform.

Colors

Color variable names are converted from their Figma style names into kebab-case (any hierarchy present is included in the variable name). The double hyphen prefix is added to the name as well.

For example, a Figma color style with the name Dark / Identity / Primary would be transformed and stored in the file color.css:

/* color.css */

:root {
  --dark-identity-primary: #7bb37c;
  ...
}

The color tokens are stored in a color.css file. For more information on how color values are handled see the Color tokens section.

Spacing

Spacing variable names are created from the node names as described on the Spacing category page. The variable names are transformed to kebab case. E.g. s2 = s-2. See the note about preserving variable names if you don’t want to kebab case shorter spacing names. The spacing tokens are stored in the file spacing.css.

Typography

The typography tokens are exported to two files: typography-tokens.css and typography-styles.css.

tokens

The typography-tokens.css file contains all of the typography tokens grouped by font property:

:root {
  …
  --font-size-body-1: 1.0625rem;
  --font-size-body-1-bold: 1.0625rem;
  --font-size-body-1-italic: 1.0625rem;
  --font-size-header-1: 2.5rem;
  --font-size-header-2: 1.875rem;
  --font-size-header-3: 1.375rem;
  --font-size-header-4: 1.125rem;
  --font-size-meta-1: 0.9375rem;
  --font-size-meta-1-bold: 0.9375rem;
  --font-size-meta-1-italic: 0.9375rem;
  …
}

The token names are based on the style name and prepended with the CSS typopgraphy property (see example in the styles section below).

styles

The typography-styles.css file is a platform helper file that collects all of the style tokens and assigns them to a classname that is generated from the style name. So if there’s a Text Style with the name of Body 1, a classname of body-1 will be generated with all of the associated design tokens from the typography-tokens.css file.

.body-1 {
  font-family: var(--font-family-body-1);
  font-size: var(--font-size-body-1);
  font-style: var(--font-style-body-1);
  font-weight: var(--font-weight-body-1);
  line-height: var(--line-height-body-1);
  letter-spacing: var(--letter-spacing-body-1);
  text-transform: var(--text-transform-body-1);
  text-decoration: var(--text-decoration-body-1);
}

Sample repository

Go to the CSS platform sample repository to view a working demo of the design tokens exported for the CSS platform.