POC: Semantic token layer (Less variables)

[lokesh]

Example of two-tier design token system.

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
@radius-badge: @radius-sm;        // badges, tags
@radius-notification: @radius-lg; // notifications, alerts
@radius-pill: @radius-full;       // pills, tags
@radius-avatar: @radius-full;     // avatars, profile pictures

Note: This reorganization works before or after a LESS → CSS custom-property migration. We can promote the tokens to CSS variables with minimal effort.

Stakeholders

@mekarpeles cc: @cdrini

[mekarpeles]

I really like this direction

[lokesh]

Closing as this is a PoC and not intended for merging.