procode-vs-theme 2.2.0 → 2.4.0

package/src/base/_custom-properties.scss

@@ -1,111 +1,166 @@
-@use "color" as cl;
-@use "font" as ft;
-@use "space" as sp;
-@use "border" as bo;
-@use "size" as sz;
-
-:root {
-  // Text colors
-  --qo-text-primary: #{cl.$text-primary};
-  --qo-text-secondary: #{cl.$text-secondary};
-  --qo-text-success: #{cl.$text-success};
-  --qo-text-warning: #{cl.$text-warning};
-  --qo-text-danger: #{cl.$text-danger};
-  --qo-text-info: #{cl.$text-info};
-  --qo-text-default: #{cl.$text-default};
-  --qo-text-dark: #{cl.$text-dark};
-  --qo-text-darker: #{cl.$text-darker};
-  --qo-text-light: #{cl.$text-light};
-  --qo-text-tertiary: #{cl.$text-tertiary};
-  --qo-text-placeholder: #{cl.$text-placeholder};
-
-  // Background colors
-  --qo-bg-primary: #{cl.$background-primary};
-  --qo-bg-secondary: #{cl.$background-secondary};
-  --qo-bg-success: #{cl.$background-success};
-  --qo-bg-warning: #{cl.$background-warning};
-  --qo-bg-danger: #{cl.$background-danger};
-  --qo-bg-info: #{cl.$background-info};
-  --qo-bg-default: #{cl.$background-default};
-  --qo-bg-dark: #{cl.$background-dark};
-  --qo-bg-dark-a: #{cl.$background-dark-a};
-  --qo-bg-medium: #{cl.$background-medium};
-  --qo-bg-light: #{cl.$background-light};
-  --qo-bg-tertiary: #{cl.$background-tertiary};
-  --qo-bg-disabled: #{cl.$background-disabled};
-
-  // Border colors
-  --qo-border-primary: #{cl.$border-primary};
-  --qo-border-secondary: #{cl.$border-secondary};
-  --qo-border-success: #{cl.$border-success};
-  --qo-border-warning: #{cl.$border-warning};
-  --qo-border-danger: #{cl.$border-danger};
-  --qo-border-info: #{cl.$border-info};
-  --qo-border-light: #{cl.$border-light};
-  --qo-border-dark: #{cl.$border-dark};
-  --qo-border-default: #{cl.$border-default};
-
-  // Font families
-  --qo-font-family-primary: #{ft.$font-family-primary};
-  --qo-font-family-secondary: #{ft.$font-family-secondary};
-
-  // Font sizes
-  --qo-font-size-xxs: #{ft.$font-size-xxs};
-  --qo-font-size-xs: #{ft.$font-size-xs};
-  --qo-font-size-sm: #{ft.$font-size-sm};
-  --qo-font-size-md: #{ft.$font-size-md};
-  --qo-font-size-lg: #{ft.$font-size-lg};
-  --qo-font-size-xl: #{ft.$font-size-xl};
-  --qo-font-size-xxl: #{ft.$font-size-xxl};
-  --qo-font-size-h1: #{ft.$font-size-h1};
-  --qo-font-size-h2: #{ft.$font-size-h2};
-  --qo-font-size-h3: #{ft.$font-size-h3};
-  --qo-font-size-h4: #{ft.$font-size-h4};
-  --qo-font-size-h5: #{ft.$font-size-h5};
-  --qo-font-size-h6: #{ft.$font-size-h6};
-
-  // Font weights
-  --qo-font-weight-light: #{ft.$font-weight-light};
-  --qo-font-weight-regular: #{ft.$font-weight-regular};
-  --qo-font-weight-medium: #{ft.$font-weight-medium};
-  --qo-font-weight-semibold: #{ft.$font-weight-semibold};
-  --qo-font-weight-bold: #{ft.$font-weight-bold};
-  --qo-font-weight-extrabold: #{ft.$font-weight-extrabold};
-
-  // Spacing
-  --qo-space-0: #{sp.$space-0};
-  --qo-space-1: #{sp.$space-1};
-  --qo-space-2: #{sp.$space-2};
-  --qo-space-3: #{sp.$space-3};
-  --qo-space-4: #{sp.$space-4};
-  --qo-space-5: #{sp.$space-5};
-  --qo-space-sm: #{sp.$space-sm};
-  --qo-space-md: #{sp.$space-md};
-  --qo-space-lg: #{sp.$space-lg};
-  --qo-space-xl: #{sp.$space-xl};
-  --qo-space-xxl: #{sp.$space-xxl};
-  --qo-space-xxxl: #{sp.$space-xxxl};
-
-  // Border radius
-  --qo-border-radius-0: #{bo.$border-radius-0};
-  --qo-border-radius-sm: #{bo.$border-radius-sm};
-  --qo-border-radius-md: #{bo.$border-radius-md};
-  --qo-border-radius-lg: #{bo.$border-radius-lg};
-  --qo-border-radius-xl: #{bo.$border-radius-xl};
-  --qo-border-radius-pill: #{bo.$border-radius-pill};
-  --qo-border-radius-full: #{bo.$border-radius-full};
-
-  // Border widths
-  --qo-border-width-none: #{bo.$border-width-none};
-  --qo-border-width-sm: #{bo.$border-width-sm};
-  --qo-border-width-md: #{bo.$border-width-md};
-  --qo-border-width-lg: #{bo.$border-width-lg};
-
-  // Sizes
-  --qo-size-xs: #{sz.$size-xs};
-  --qo-size-sm: #{sz.$size-sm};
-  --qo-size-md: #{sz.$size-md};
-  --qo-size-lg: #{sz.$size-lg};
-  --qo-size-xl: #{sz.$size-xl};
-  --qo-size-xxl: #{sz.$size-xxl};
-}
+@use "color" as cl;
+@use "font" as ft;
+@use "space" as sp;
+@use "border" as bo;
+@use "size" as sz;
+
+:root {
+  // Text colors
+  --qo-text-primary: #{cl.$text-primary};
+  --qo-text-primary-hover: #{cl.$text-primary-hover};
+  --qo-text-secondary: #{cl.$text-secondary};
+  --qo-text-success: #{cl.$text-success};
+  --qo-text-warning: #{cl.$text-warning};
+  --qo-text-danger: #{cl.$text-danger};
+  --qo-text-danger-hover: #{cl.$text-danger-hover};
+  --qo-text-info: #{cl.$text-info};
+  --qo-text-default: #{cl.$text-default};
+  --qo-text-dark: #{cl.$text-dark};
+  --qo-text-darker: #{cl.$text-darker};
+  --qo-text-light: #{cl.$text-light};
+  --qo-text-tertiary: #{cl.$text-tertiary};
+  --qo-text-placeholder: #{cl.$text-placeholder};
+  --qo-text-lite: #{cl.$text-lite};
+  --qo-text-system: #{cl.$text-system};
+  --qo-text-custom: #{cl.$text-custom};
+  // Alias of --qo-text-secondary. The spec calls this colour "text-muted" and
+  // the consuming app already references that name in 6 places; without the
+  // alias those declarations resolve to nothing and fall back silently.
+  --qo-text-muted: #{cl.$text-secondary};
+
+  // Background colors
+  --qo-bg-primary: #{cl.$background-primary};
+  --qo-bg-secondary: #{cl.$background-secondary};
+  --qo-bg-success: #{cl.$background-success};
+  --qo-bg-warning: #{cl.$background-warning};
+  --qo-bg-danger: #{cl.$background-danger};
+  --qo-bg-info: #{cl.$background-info};
+  --qo-bg-default: #{cl.$background-default};
+  --qo-bg-dark: #{cl.$background-dark};
+  --qo-bg-dark-a: #{cl.$background-dark-a};
+  --qo-bg-medium: #{cl.$background-medium};
+  --qo-bg-light: #{cl.$background-light};
+  --qo-bg-tertiary: #{cl.$background-tertiary};
+  --qo-bg-lime: #{cl.$background-lime};
+  --qo-bg-transparent: #{cl.$background-transparent};
+  --qo-bg-disabled: #{cl.$background-disabled};
+  --qo-bg-hover: #{cl.$background-hover};
+  --qo-bg-header: #{cl.$background-header};
+
+  // Soft / tint backgrounds
+  --qo-bg-primary-soft: #{cl.$background-primary-soft};
+  --qo-bg-success-soft: #{cl.$background-success-soft};
+  --qo-bg-warning-soft: #{cl.$background-warning-soft};
+  --qo-bg-danger-soft: #{cl.$background-danger-soft};
+  --qo-bg-info-soft: #{cl.$background-info-soft};
+  --qo-bg-lite-soft: #{cl.$background-lite-soft};
+  --qo-bg-system-soft: #{cl.$background-system-soft};
+  --qo-bg-custom-soft: #{cl.$background-custom-soft};
+
+  // Border colors
+  --qo-border-primary: #{cl.$border-primary};
+  --qo-border-primary-soft: #{cl.$border-primary-soft};
+  --qo-border-secondary: #{cl.$border-secondary};
+  --qo-border-success: #{cl.$border-success};
+  --qo-border-warning: #{cl.$border-warning};
+  --qo-border-danger: #{cl.$border-danger};
+  --qo-border-info: #{cl.$border-info};
+  --qo-border-light: #{cl.$border-light};
+  --qo-border-dark: #{cl.$border-dark};
+  --qo-border-default: #{cl.$border-default};
+
+  // Elevation & focus
+  --qo-shadow-sm: #{cl.$shadow-sm};
+  --qo-shadow-md: #{cl.$shadow-md};
+  --qo-shadow-lg: #{cl.$shadow-lg};
+  --qo-shadow-xl: #{cl.$shadow-xl};
+  --qo-shadow-color: #{cl.$shadow-color};
+  --qo-focus-ring: #{cl.$focus-ring};
+
+  // Font families
+  --qo-font-family-primary: #{ft.$font-family-primary};
+  --qo-font-family-secondary: #{ft.$font-family-secondary};
+
+  // Font sizes
+  --qo-font-size-xxs: #{ft.$font-size-xxs};
+  --qo-font-size-xs: #{ft.$font-size-xs};
+  --qo-font-size-sm: #{ft.$font-size-sm};
+  --qo-font-size-md: #{ft.$font-size-md};
+  --qo-font-size-lg: #{ft.$font-size-lg};
+  --qo-font-size-xl: #{ft.$font-size-xl};
+  --qo-font-size-xxl: #{ft.$font-size-xxl};
+  --qo-font-size-base: #{ft.$font-size-base};
+  --qo-font-size-h1: #{ft.$font-size-h1};
+  --qo-font-size-h2: #{ft.$font-size-h2};
+  --qo-font-size-h3: #{ft.$font-size-h3};
+  --qo-font-size-h4: #{ft.$font-size-h4};
+  --qo-font-size-h5: #{ft.$font-size-h5};
+  --qo-font-size-h6: #{ft.$font-size-h6};
+
+  // Line heights
+  --qo-line-height-xxs: #{ft.$line-height-xxs};
+  --qo-line-height-xs: #{ft.$line-height-xs};
+  --qo-line-height-sm: #{ft.$line-height-sm};
+  --qo-line-height-md: #{ft.$line-height-md};
+  --qo-line-height-lg: #{ft.$line-height-lg};
+  --qo-line-height-xl: #{ft.$line-height-xl};
+  --qo-line-height-xxl: #{ft.$line-height-xxl};
+  --qo-line-height-base: #{ft.$line-height-base};
+
+  // Font weights
+  --qo-font-weight-light: #{ft.$font-weight-light};
+  --qo-font-weight-regular: #{ft.$font-weight-regular};
+  --qo-font-weight-medium: #{ft.$font-weight-medium};
+  --qo-font-weight-semibold: #{ft.$font-weight-semibold};
+  --qo-font-weight-bold: #{ft.$font-weight-bold};
+  --qo-font-weight-extrabold: #{ft.$font-weight-extrabold};
+
+  // Spacing
+  --qo-space-0: #{sp.$space-0};
+  --qo-space-1: #{sp.$space-1};
+  --qo-space-2: #{sp.$space-2};
+  --qo-space-3: #{sp.$space-3};
+  --qo-space-4: #{sp.$space-4};
+  --qo-space-5: #{sp.$space-5};
+  --qo-space-6: #{sp.$space-6};
+  --qo-space-8: #{sp.$space-8};
+  --qo-space-xs: #{sp.$space-xs};
+  --qo-space-sm: #{sp.$space-sm};
+  --qo-space-md: #{sp.$space-md};
+  --qo-space-lg: #{sp.$space-lg};
+  --qo-space-xl: #{sp.$space-xl};
+  --qo-space-xxl: #{sp.$space-xxl};
+  --qo-space-xxxl: #{sp.$space-xxxl};
+
+  // Border radius
+  --qo-border-radius-0: #{bo.$border-radius-0};
+  --qo-border-radius-sm: #{bo.$border-radius-sm};
+  --qo-border-radius-md: #{bo.$border-radius-md};
+  --qo-border-radius-lg: #{bo.$border-radius-lg};
+  --qo-border-radius-xl: #{bo.$border-radius-xl};
+  --qo-border-radius-pill: #{bo.$border-radius-pill};
+  --qo-border-radius-full: #{bo.$border-radius-full};
+
+  // Border widths
+  --qo-border-width-none: #{bo.$border-width-none};
+  --qo-border-width-sm: #{bo.$border-width-sm};
+  --qo-border-width-md: #{bo.$border-width-md};
+  --qo-border-width-lg: #{bo.$border-width-lg};
+
+  // Sizes
+  --qo-size-xs: #{sz.$size-xs};
+  --qo-size-sm: #{sz.$size-sm};
+  --qo-size-md: #{sz.$size-md};
+  --qo-size-lg: #{sz.$size-lg};
+  --qo-size-xl: #{sz.$size-xl};
+  --qo-size-xxl: #{sz.$size-xxl};
+  --qo-menu-size: #{sz.$menu-size};
+
+  // Component heights
+  --qo-control-height: #{sz.$control-height};
+  --qo-control-height-sm: #{sz.$control-height-sm};
+  --qo-grid-header-height: #{sz.$grid-header-height};
+  --qo-grid-filter-height: #{sz.$grid-filter-height};
+  --qo-grid-row-height: #{sz.$grid-row-height};
+  --qo-badge-height: #{sz.$badge-height};
+}

package/src/base/_font.scss

@@ -1,37 +1,61 @@
-$font-family-primary: "IBM Plex Sans", sans-serif !default;
-$font-family-secondary: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono",
-  "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
-
-// Base font sizes
-$font-size-xxs: 8px !default;
-$font-size-xs: 10px !default;
-$font-size-sm: 11px !default;
-$font-size-md: 12px !default;
-$font-size-lg: 14px !default;
-$font-size-xl: 16px !default;
-$font-size-xxl: 18px !default;
-
-// Heading font sizes
-$font-size-h6: 1rem !default;
-$font-size-h5: 1.25rem !default;
-$font-size-h4: 1.5rem !default;
-$font-size-h3: 1.75rem !default;
-$font-size-h2: 2rem !default;
-$font-size-h1: 2.5rem !default;
-
-// Line heights
-$line-height-xxs: 1.25 !default;
-$line-height-xs: 1.3 !default;
-$line-height-sm: 1.27 !default;
-$line-height-md: 1.33 !default;
-$line-height-lg: 1.29 !default;
-$line-height-xl: 1.31 !default;
-$line-height-xxl: 1.28 !default;
-
-// Font weights
-$font-weight-light: 300 !default;
-$font-weight-regular: 400 !default;
-$font-weight-medium: 500 !default;
-$font-weight-semibold: 600 !default;
-$font-weight-bold: 700 !default;
-$font-weight-extrabold: 800 !default;
+$font-family-primary: "IBM Plex Sans", sans-serif !default;
+$font-family-secondary: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono",
+  "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
+
+// Base font sizes
+//
+// Restructured to the VARStreet listing-page scale. The spec supplies six
+// steps (11/12/13/14/18/22) and the ladder has six slots above `xxs`, so each
+// spec value lands on exactly one existing name and the scale stays monotonic:
+//
+//   xxs  10px  — was 8px; raised so the 1px cadence holds at the bottom
+//   xs   11px  — was 10px  (--vs-font-size-xs)   badges, helper text
+//   sm   12px  — was 11px  (--vs-font-size-sm)   labels, column headers
+//   md   13px  — was 12px  (--vs-font-size-md)   grid body, controls
+//   lg   14px  — unchanged (--vs-font-size-base) page/body default
+//   xl   18px  — was 16px  (--vs-font-size-lg)   section headings
+//   xxl  22px  — was 18px  (--vs-font-size-xl)   page title
+//
+// `lg` keeping its 14px is what makes this safe: it is the most-used step in
+// the consuming app, and it is also the spec's body size.
+$font-size-xxs: 10px !default;
+$font-size-xs: 11px !default;
+$font-size-sm: 12px !default;
+$font-size-md: 13px !default;
+$font-size-lg: 14px !default;
+$font-size-xl: 18px !default;
+$font-size-xxl: 22px !default;
+
+// The spec's `--vs-font-size-base`: the page default, which is `lg` on this
+// ladder. Declared as an alias rather than a new step so there is one 14px.
+$font-size-base: $font-size-lg !default;
+
+// Heading font sizes
+$font-size-h6: 1rem !default;
+$font-size-h5: 1.25rem !default;
+$font-size-h4: 1.5rem !default;
+$font-size-h3: 1.75rem !default;
+$font-size-h2: 2rem !default;
+$font-size-h1: 2.5rem !default;
+
+// Line heights
+//
+// Paired with the size of the same name. Values are unchanged — the spec does
+// not declare line height as a variable — with `base` added from the listing
+// page's body rule (line-height: 1.4).
+$line-height-xxs: 1.25 !default;
+$line-height-xs: 1.3 !default;
+$line-height-sm: 1.27 !default;
+$line-height-md: 1.33 !default;
+$line-height-lg: 1.29 !default;
+$line-height-xl: 1.31 !default;
+$line-height-xxl: 1.28 !default;
+$line-height-base: 1.4 !default;
+
+// Font weights
+$font-weight-light: 300 !default;
+$font-weight-regular: 400 !default;
+$font-weight-medium: 500 !default;
+$font-weight-semibold: 600 !default;
+$font-weight-bold: 700 !default;
+$font-weight-extrabold: 800 !default;

package/src/base/_size.scss

@@ -1,17 +1,30 @@
-$menu-size: 32px !default;
-
-$size-xs: 8px !default;
-$size-sm: 16px !default;
-$size-md: 20px !default;
-$size-lg: 32px !default;
-$size-xl: 48px !default;
-$size-xxl: 64px !default;
-
-$sizing-values: (
-  xs: $size-xs,
-  sm: $size-sm,
-  md: $size-md,
-  lg: $size-lg,
-  xl: $size-xl,
-  xxl: $size-xxl,
-) !default;
+$menu-size: 32px !default;
+
+// Generic size scale. The spec declares no equivalent, so these are unchanged.
+$size-xs: 8px !default;
+$size-sm: 16px !default;
+$size-md: 20px !default;
+$size-lg: 32px !default;
+$size-xl: 48px !default;
+$size-xxl: 64px !default;
+
+$sizing-values: (
+  xs: $size-xs,
+  sm: $size-sm,
+  md: $size-md,
+  lg: $size-lg,
+  xl: $size-xl,
+  xxl: $size-xxl,
+) !default;
+
+// Component heights
+//
+// From the spec's "Component sizing" block. These fix the height of an
+// interactive row or control so a toolbar, a filter row and a grid line up
+// without each screen re-deciding.
+$control-height: 40px !default;     // inputs, selects, buttons
+$control-height-sm: $menu-size !default; // 32px — compact filter controls, pager buttons
+$grid-header-height: 44px !default; // column-header row
+$grid-filter-height: 48px !default; // in-grid filter row
+$grid-row-height: 58px !default;    // data row
+$badge-height: 24px !default;       // status / type pill

package/src/base/_space.scss

@@ -1,35 +1,55 @@
-// Bootstrap-compatible spacing scale (rem-based)
-$space-0: 0 !default;
-$space-1: 0.25rem !default;
-$space-2: 0.5rem !default;
-$space-3: 1rem !default;
-$space-4: 1.5rem !default;
-$space-5: 3rem !default;
-
-// Legacy spacing aliases
-$space-xs: 2.5px !default;
-$space-sm: 5px !default;
-$space-md: 12.5px !default;
-$space-lg: 16.5px !default;
-$space-xl: 21px !default;
-// Dialog-scale spacing: the outer padding of the larger modals (the column
-// chooser and its siblings), which the xs-xl steps were all too tight for.
-$space-xxl: 28px !default;
-$space-xxxl: 30px !default;
-
-// Spacers map for loop-based utility generation
-$spacers: (
-  0: $space-0,
-  1: $space-1,
-  2: $space-2,
-  3: $space-3,
-  4: $space-4,
-  5: $space-5,
-  xs: $space-xs,
-  sm: $space-sm,
-  md: $space-md,
-  lg: $space-lg,
+// Spacing
+//
+// Restructured to the VARStreet listing-page scale: a strict 4px grid where
+// the index is the multiplier (n × 4px). This replaces the Bootstrap rem
+// ladder, which was non-linear (1rem, 1.5rem, 3rem) and disagreed with the
+// spec from step 3 upward.
+//
+//   0 → 0      1 → 4px    2 → 8px    3 → 12px
+//   4 → 16px   5 → 20px   6 → 24px   8 → 32px
+//
+// Steps 1 and 2 already matched the spec, so the two most-used numeric steps
+// in the consuming app do not move. Steps 6 and 8 are new (--vs-space-6/-8).
+$space-0: 0 !default;
+$space-1: 4px !default;
+$space-2: 10px !default;
+$space-3: 12px !default;
+$space-4: 14px !default;
+$space-5: 16px !default;
+$space-6: 24px !default;
+$space-8: 32px !default;
+
+// T-shirt aliases
+//
+// The same ladder under the names the app already uses. These were previously
+// off-grid half-pixel values (2.5 / 5 / 12.5 / 16.5 / 21 / 28 / 30); each is
+// now the nearest 4px step, so every one moves by 3px or less and the two
+// ladders can no longer drift apart.
+$space-xs: $space-1 !default;    // 2.5px → 4px
+$space-sm: $space-2 !default;    // 5px   → 8px
+$space-md: $space-3 !default;    // 12.5px → 12px
+$space-lg: $space-4 !default;    // 16.5px → 16px
+$space-xl: $space-5 !default;    // 21px  → 20px
+$space-xxl: $space-6 !default;   // 28px  → 24px
+$space-xxxl: $space-8 !default;  // 30px  → 32px
+
+// Spacers map for loop-based utility generation.
+// Keys are the generated class suffixes (qo-gap-*, qo-padding-*, qo-margin-*)
+// and must stay exactly as they are — 6 and 8 are additive.
+$spacers: (
+  0: $space-0,
+  1: $space-1,
+  2: $space-2,
+  3: $space-3,
+  4: $space-4,
+  5: $space-5,
+  6: $space-6,
+  8: $space-8,
+  xs: $space-xs,
+  sm: $space-sm,
+  md: $space-md,
+  lg: $space-lg,
   xl: $space-xl,
   xxl: $space-xxl,
-  xxxl: $space-xxxl,
-) !default;
+  xxxl: $space-xxxl,
+) !default;

package/src/base/_variants.scss

@@ -0,0 +1,128 @@
+@use "sass:color";
+@use "sass:map";
+@use "color" as cl;
+
+// Semantic variants — the single source of truth for every component.
+//
+// Buttons, badges, alerts, inputs and links all loop over this map, so a new
+// semantic colour is added in exactly one place and every component picks it
+// up. Each entry carries the full state set a component needs:
+//
+//   base   fill / border colour at rest
+//   hover  fill at :hover        (−8% lightness unless a token exists)
+//   active fill at :active       (−12% lightness unless a token exists)
+//   on     text colour that sits legibly on `base`
+//   soft   pale tint fill
+//   ink    text colour that sits legibly on `soft`
+//
+// `hover`/`active` are pre-computed here rather than in each component so the
+// two never drift apart, and so a design token (`$text-primary-hover`,
+// `$text-danger-hover`) wins over the computed step wherever one exists.
+
+@function _darken($c, $amount) {
+  @return color.adjust($c, $lightness: -$amount);
+}
+
+$variants: (
+  primary: (
+    base: cl.$background-primary,
+    hover: cl.$text-primary-hover,
+    active: _darken(cl.$background-primary, 12%),
+    on: cl.$text-light,
+    soft: cl.$background-primary-soft,
+    ink: cl.$text-primary,
+  ),
+  secondary: (
+    base: cl.$background-secondary,
+    hover: _darken(cl.$background-secondary, 4%),
+    active: _darken(cl.$background-secondary, 8%),
+    on: cl.$text-dark,
+    soft: cl.$background-secondary,
+    ink: cl.$text-secondary,
+  ),
+  success: (
+    base: cl.$background-success,
+    hover: _darken(cl.$background-success, 8%),
+    active: _darken(cl.$background-success, 12%),
+    on: cl.$text-light,
+    soft: cl.$background-success-soft,
+    ink: cl.$text-success,
+  ),
+  warning: (
+    base: cl.$background-warning,
+    hover: _darken(cl.$background-warning, 8%),
+    active: _darken(cl.$background-warning, 12%),
+    on: cl.$text-light,
+    soft: cl.$background-warning-soft,
+    ink: cl.$text-warning,
+  ),
+  danger: (
+    base: cl.$background-danger,
+    hover: cl.$text-danger-hover,
+    active: _darken(cl.$background-danger, 12%),
+    on: cl.$text-light,
+    soft: cl.$background-danger-soft,
+    ink: cl.$text-danger,
+  ),
+  info: (
+    base: cl.$background-info,
+    hover: _darken(cl.$background-info, 8%),
+    active: _darken(cl.$background-info, 12%),
+    on: cl.$text-light,
+    soft: cl.$background-info-soft,
+    ink: cl.$text-info,
+  ),
+  dark: (
+    base: cl.$background-dark,
+    hover: _darken(cl.$background-dark, 6%),
+    active: _darken(cl.$background-dark, 10%),
+    on: cl.$text-light,
+    soft: cl.$background-secondary,
+    ink: cl.$text-darker,
+  ),
+  light: (
+    base: cl.$background-light,
+    hover: _darken(cl.$background-light, 4%),
+    active: _darken(cl.$background-light, 8%),
+    on: cl.$text-dark,
+    soft: cl.$background-light,
+    ink: cl.$text-dark,
+  ),
+  default: (
+    base: cl.$background-default,
+    hover: cl.$background-secondary,
+    active: _darken(cl.$background-secondary, 4%),
+    on: cl.$text-dark,
+    soft: cl.$background-default,
+    ink: cl.$text-dark,
+  ),
+  tertiary: (
+    base: cl.$background-tertiary,
+    hover: _darken(cl.$background-tertiary, 8%),
+    active: _darken(cl.$background-tertiary, 12%),
+    on: cl.$text-light,
+    soft: cl.$background-tertiary,
+    ink: cl.$text-tertiary,
+  ),
+) !default;
+
+// Status variants — tint-only. These name a *state of a record*, not a
+// component colour, so they get `soft`/`ink` and nothing else: there is no
+// such thing as a solid "system role" button.
+$status-variants: (
+  standard: (soft: cl.$background-primary-soft, ink: cl.$text-custom),
+  lite: (soft: cl.$background-lite-soft, ink: cl.$text-lite),
+  system: (soft: cl.$background-system-soft, ink: cl.$text-system),
+  custom: (soft: cl.$background-custom-soft, ink: cl.$text-custom),
+  active: (soft: cl.$background-success-soft, ink: cl.$text-success),
+) !default;
+
+// Every variant that has a tint, solid or not — what badges and alerts loop.
+$tint-variants: map.merge($variants, $status-variants) !default;
+
+@function v($name, $key) {
+  @return map.get(map.get($variants, $name), $key);
+}
+@function tint($name, $key) {
+  @return map.get(map.get($tint-variants, $name), $key);
+}