Contributing design tokens
Creating design tokens for CedarTo get started:
- Get familiar with design token concepts .
- Check the token contribution requirements on this page for guidance on reusability, naming structure and more.
- Reach out to the team on the #cedar-user-support Slack channel, or come talk to us during our weekly office hours to discuss your idea.
Make sure your token meets the following requirements:
- It’s used in several components or layouts
- It’s used for multiple elements and is not specific to one element
- The token name will continue to have the same semantic meaning in future releases
- Token name uses the following platform requirements:
- Web: Uses Kebab case. For example, cdr-color-background-primary
- iOS: Uses Pascal case. For example, CdrColorBackgroundPrimary
- Android: Uses Snake case. For example, cdr_color_background_primary
What qualifies as a design token?
Is “cdr-color-text-primary a design token?
| Criteria | Answer |
|---|---|
| Used in several components or layouts | Yes |
| Token name makes its use or intent clear | Yes |
| If applied, token can still be used in future design updates without changing its intent, even if the value changes | Yes |
| Is not specific to one element, but can be used in multiple | Yes |
Result: All of the criteria are met so “cdr-color-text-primary qualifies as a design token.
Is “easily-excited” a design token?
| Criteria | Answer |
|---|---|
| Used in several components or layouts | Yes |
| Token name makes its use or intent clear | No |
| If applied, token can still be used in future design updates without changing its intent, even if the value changes | Yes |
| Is not specific to one element, but can be used in multiple | Perhaps but it is not used consistently |
Result: Only two criteria are met so “easily-excited” does not qualify as a design token.
Naming structure
- Category: Top level that contains foundational elements such as text, color, spacing
- Sub-Category: Describes and narrows a token’s category. For instance, color-text will define a color for text and can be used for icons
- Item: Refers to a token’s usage. For example, if text is a property, the item could be form to indicate text used in a form control
- Sub-Item: Describes and narrows a token’s usage further. For instance, form could be modified by input
- Variant: Describes prominence or state for a token
- Size: Describes size for a token, if applicable
This naming structure table shows how levels will be skipped when not used.
| Category | Sub-Category | Item | Sub-Item | Variant | Size |
|---|---|---|---|---|---|
color | text | input | label | ||
color | background | primary | |||
text | heading | serif | 800 |
- CSS animation frame rate for interface elements is dependent on the speed of the browser and computer:
- For animations running at less than 15fps, users will not be able to see continuous motion
- Most devices refresh their screen at 60 times a second
- For smooth and responsive animation, use CSS attributes for:
- Position: Use transform property for
translate()to reposition an element in the horizontal or vertical directions - Scale: Use transform property for
scale()to resize an element on 2D plane - Rotation: Use transform property for
rotate()to rotate an element on x, y, or z axis - Skew: Use transform property for
skew()to distort an element on the 2D plane - Opacity: Specify the opacity or transparency of an element with values from 0.0 - 1.0. Lower values cause the element to be more transparent