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' },
text: {
Heading: {
fontSize: '32px',
fontWeight: '600',
lineHeight: '1.25',
case: 'capitalize',
color: '#94a3b8',
},
Body: {
fontSize: '16px',
lineHeight: '1.5',
color: '#1a1a1a',
},
},
});Design tokens definition schema
In the Experiences design sidebar, specific design tokens such as spacing, sizing, color, border, fontSize, lineHeight, letterSpacing, textColor, and text 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 and text design tokens are unique. They are defined as objects with distinct parts, in contrast to other design tokens which are typically defined as straightforward key-value objects.
Design token: spacing
Affects the Padding, Margin, and Gaps input controls in the Design sidebar.
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 Color input control in the Background color 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 Style input control in 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
Affects the Color 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 color value like hexcode, RGBA, RGB, and named colors. Note that css variables are not officially supported for this field.
Design token: text
Affects the Style input control in the Text section of the Design sidebar.
Description:
The text design token allows you to define various text styles for your components. Each text style can be customized with properties such as emphasis, font size, case, font weight, line height, letter spacing, and color.
Type definition:
[key: string]: {
emphasis?: 'bold' | 'italic' | 'underline' | 'bold italic' | 'bold underline' |
'italic underline' | 'bold italic underline' | 'none';
fontSize?: string;
case?: 'capitalize' | 'uppercase' | 'lowercase' | 'normal';
fontWeight?: string;
lineHeight?: string;
letterSpacing?: string;
color?: string;
}Properties:
emphasis(optional): Specifies the emphasis style for the text. This can be used to apply different levels of emphasis, such as bold or italic.fontSize(optional): Defines the size of the font. This should be a string representing a valid CSS font-size value (e.g.,16px,1em).case(optional): Specifies the text transformation case. This can be used to apply uppercase, lowercase, or capitalize transformations.fontWeight(optional): Defines the weight of the font. This should be a string representing a font-weight value (e.g.,400,600).lineHeight(optional): Specifies the line height for the text. This should be a string representing a valid CSS line-height value (e.g.,1.5,20px).letterSpacing(optional): Defines the spacing between letters. This should be a string representing a valid CSS letter-spacing value (e.g.,0.1em,1px).color(optional): Specifies the color of the text. This should be a string representing a valid CSS color value (e.g.,#000000,rgb(255, 255, 255)).
