The design system includes primitive and semantic tokens. Utilize semantic tokens whenever possible. Primitive vars are the building blocks for semantic vars, allowing for cleaner abstraction.
Recognizable by the following naming conventions, which correlate to variable names in Figma:
--text-font-size-<size>
--text-weight-string-<style>
--font-text-<style>
--font-size-headline-<size>
--font-size-body-<size>
--font-size-caption
--font-familiy-<type>
--radius-<style>
--spacing-<size>
Variables for generic colors (like dialogs and errors):
--colors-accent-1-<num>
--colors-accent-2-<num>
--colors-error-<num>
--colors-warning-<num>
--colors-info-<num>
--colors-success-<num>
--colors-surface-error
--colors-surface-toggle-disabled
Brand-specific colors (Ops):
--colors-border-primary
--colors-overlay-default
--colors-primary-<num>
--colors-focus-ring-<style>
--colors-surface-<type>
--colors-surface-<type>-<style>
--colors-border-<style>
--colors-border-<type>-<style>
--font-text-<type>
--font-text-<type>-<style>
Do not use outside of the design_system/assets/css/design_system/variables.css file.
Recognizable by the following naming conventions:
--size-<num>
--size-full
These variables all start with --color (singular).
--color-<type>-<color>-<num>
--text-font-family-<name>
--text-line-height-<num>
--text-weight-number-<num>
--shadow-<size>