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...

• colors
• font families - PR
• font sizes and weights
• line heights - PR
• border radius - PR
• spacing
• borders - PR

Utilize tokens in existing LESS files...

• colors
• font families - PR
• font sizes and weights
• line heights
• border radius - PR
• spacing
• borders

Create individual PRs for each task.

Stakeholders

@lokesh
@cdrini @mekarpeles @jimchamp @RayBB

Instructions for Contributors

• Before creating a new branch or pushing up changes to a PR, please first run these commands to ensure your repository is up to date, as the pre-commit bot may add commits to your PRs upstream.