Design tokens
Table of contents
Experiences design tokens
Design tokens allow you to easily manage and use consistent design values throughout Experiences.
To register design tokens, import the defineDesignTokens function and provide your design tokens definition.
Below you can see an example of design tokens definition:
import { defineDesignTokens } from '@contentful/experiences-sdk-react';
// register design tokens
defineDesignTokens({
spacing: { XS: '4px', S: '16px', M: '32px', L: '64px', XL: '128px' },
sizing: { XS: '16px', S: '100px', M: '300px', L: '600px', XL: '1024px' },
color: { Slate: '#94a3b8', Azure: 'azure', Orange: '#fdba74', Blue: '#0000ff' },
border: {
Azure: { width: '1px', style: 'solid', color: 'azure' },
Hero: { width: '2px', style: 'dashed', color: '#ffaabb' },
Card: { width: '1px', style: 'solid', color: '#ffccbb' },
Carousel: { width: '2px', style: 'dotted', color: 'rgba(30, 25, 25, 0.75)' },
},
fontSize: { XS: '12px', SM: '14px', MD: '16px', LG: '24px', XL: '32px' },
lineHeight: { XS: '1', SM: '1.25', MD: '1.5', LG: '200%' },
letterSpacing: { None: '0', XS: '0.05em', SM: '0.1em', MD: '0.15em', LG: '0.2em' },
textColor: { Dark: '#1a1a1a', Light: '#efefef', Slate: '#94a3b8' },
});Design tokens definition schema
In the Experiences design sidebar, specific design tokens such as spacing, sizing, color, border, fontSize, lineHeight, letterSpacing, and textColor are used by input elements. These design tokens directly influence the design attributes within the sidebar. Additionally, you have the flexibility to define your own custom key-value pairings.
Among these, the border design tokens are unique. They are defined as an object with three distinct parts, in contrast to other design tokens which are typically defined as straightforward key-value objects.
Design token: spacing
Affects the Layout section of the Design sidebar for both Margin and Direction sections.
Type definition:
spacing: { [key: string]: string }
Properties:
key: Name of the design token.value: Any valid css value for margin and padding (px, %, em, and rem are supported).
Design token: sizing
Affects the Size section of the Design sidebar for both Height and Width when the fixed option is selected.
Type definition:
[key: string]: string
Properties:
key: Name of the design token.value: Any valid css value for margin and padding (px, %, em, and rem are supported).
Design token: color
Affects the Background section of the Design sidebar.
Type definition:
[key: string]: string
Properties:
key: Name of the design token.value: Any valid color value like hexcode, RGBA, RGB, and named colors. Note that css variables are not officially supported for this field.
Design token: border
Affects the Border section of the Design sidebar.
Type definition:
[key: string]: { width: string, style: 'solid' | 'dashed' | 'dotted', color: string }
Properties:
key: Name of the design token.value.width: Any valid css value for margin and padding (px, %, em, and rem are supported).value.style: Must be one of 'solid', 'dashed', or 'dotted'.value.color: Any valid color value like hexcode, RGBA, RGB, and named colors. Note that css variables are not officially supported for this field.
Design token: fontSize
Affects the Font size input control in the Text section of the Design sidebar.
Type definition:
[key: string]: string
Properties:
key: Name of the design token.value: Any valid css value for margin and padding (px, %, em, and rem are supported).
Design token: lineHeight
Affects the Line height input control in the Text section of the Design sidebar.
Type definition:
[key: string]: string
Properties:
key: Name of the design token.value: Any valid css value for margin and padding (px, %, em, and rem are supported).
Design token: letterSpacing
Affects the Letter spacing input control in the Text section of the Design sidebar.
Type definition:
[key: string]: string
Properties:
key: Name of the design token.value: Any valid css value for margin and padding (px, %, em, and rem are supported).
Design token: textColor
Type definition:
[key: string]: string
Properties:
key: Name of the design token.value: Any valid color value like hexcode, RGBA, RGB, and named colors. Note that css variables are not officially supported for this field.
