Problem / Opportunity
DRY up our design variables and reduce magic numbers for values. This will help with consistency and make design updates much simpler.
Proposal
Use a common design tokens pattern, which uses two-layers for organizing variables.
Primitives (raw values)
A small, curated set of base values that work well together. Constraining the palette ensures visual harmony and prevents arbitrary values from creeping into the system.
↓
Semantic Tokens (design intent)
These map design intent to specific primitives. They’re referenced throughout the app, and their names communicate where they should be used. This provides a single point of control for updating categories of components.
As an example, if we wanted to increased the border radius of larger components, this becomes trivial: change @radius-card from @radius-lg to @radius-xl, and all card-like components update consistently. Do the same for @radius-container etc.
// PRIMITIVES FOR RADIUS
// Border radius design tokens
@radius-sm: 2px;
@radius-md: 4px;
@radius-lg: 8px;
@radius-xl: 16px;
@radius-xxl: 32px;
@radius-full: 100%;
// SEMANTIC RADIUS VARIABLES
@radius-button: @radius-md; // buttons, tabs, pills
@radius-input: @radius-md; // inputs, textareas
@radius-card: @radius-lg; // cards, panels
@radius-container: @radius-lg; // containers, wrappers
@radius-overlay: @radius-xl; // dialogs, modals
Breakdown
Requirements Checklist
Create tokens for...
Utilize tokens in existing LESS files...
Create individual PRs for each task.
Stakeholders
@lokesh
@cdrini @mekarpeles @jimchamp @RayBB
Instructions for Contributors
Problem / Opportunity
DRY up our design variables and reduce magic numbers for values. This will help with consistency and make design updates much simpler.
Proposal
Use a common design tokens pattern, which uses two-layers for organizing variables.
Primitives (raw values)
A small, curated set of base values that work well together. Constraining the palette ensures visual harmony and prevents arbitrary values from creeping into the system.
↓
Semantic Tokens (design intent)
These map design intent to specific primitives. They’re referenced throughout the app, and their names communicate where they should be used. This provides a single point of control for updating categories of components.
As an example, if we wanted to increased the border radius of larger components, this becomes trivial: change
@radius-cardfrom@radius-lgto@radius-xl, and all card-like components update consistently. Do the same for@radius-containeretc.Breakdown
Requirements Checklist
Create tokens for...
Utilize tokens in existing LESS files...
Create individual PRs for each task.
Stakeholders
@lokesh
@cdrini @mekarpeles @jimchamp @RayBB
Instructions for Contributors