procode-vs-theme 2.1.0 → 2.4.0

package/dist/src/base/_color.scss

@@ -1,47 +1,106 @@
-@use "sass:color";
-
-$text-primary: #2666e3 !default;
-$text-secondary: #595959 !default;
-$text-success: #5ca224 !default;
-$text-warning: #f39c12 !default;
-$text-danger: #f90b0b !default;
-$text-info: #17baff !default;
-$text-default: #808080 !default;
-$text-dark: #464646 !default;
-// One step below $text-dark, for dialog and section headings.
-$text-darker: #333333 !default;
-$text-light: #ffffff !default;
-$text-tertiary: #ed5085 !default;
-$text-placeholder: #808080 !default;
-
-$text-primary-hover: #1c428d !default;
-$text-danger-hover: #af251c !default;
-
-$background-primary: #2666e3 !default;
-$background-secondary: #f4f4f4 !default;
-$background-success: #67b926 !default;
-$background-warning: #f97d0b !default;
-$background-danger: #e74c3c !default;
-$background-info: #17baff !default;
-$background-default: #ffffff !default;
-$background-medium: #29466e !default;
-$background-dark: #0f233d !default;
-$background-dark-a: #0f233d33 !default;
-$background-light: #f7f7f7 !default;
-$background-tertiary: #ed5085 !default;
-$background-lime: #f3de1d !default;
-$background-transparent: color.change(#000000, $alpha: 0.1) !default;
-
-$background-disabled: #d9d9d9 !default;
-
-$border-primary: #2666e3 !default;
-$border-secondary: #c6c6c6 !default;
-$border-success: #67b926 !default;
-$border-warning: #f97d0b !default;
-$border-danger: #e74c3c !default;
-$border-info: #17baff !default;
-$border-light: #e3e3e3 !default;
-$border-dark: #0f233d !default;
-$border-default: #d9d9d9 !default;
-
-$boxshadow-primary: #ababab40 !default;
+@use "sass:color";
+
+// Colour
+//
+// Values are the VARStreet listing-page specification. Names and the
+// $text- / $background- / $border- pattern are unchanged.
+//
+// The spec's neutral ramp is cool (blue-tinted) where the previous one was
+// flat grey, so the greys are restructured as a set rather than individually —
+// mixing the two ramps is what makes a half-rebranded screen look dirty:
+//
+//   #f7f7f7 → #f7f9fc   #f4f4f4 → #f8fafc   #e3e3e3 → #e9edf2
+//   #d9d9d9 → #d9e0e7   #808080 → #7b8492   #595959 → #667085
+//   #464646 → #273142   #333333 → #111827
+//
+// A value marked (derived) has no literal in the spec and is interpolated to
+// keep its group complete; everything else is taken from the spec verbatim.
+
+// ---------- Text ----------
+$text-primary: #1261e8 !default;
+$text-secondary: #667085 !default;
+$text-success: #49a51a !default;
+$text-warning: #ef8a00 !default;
+$text-danger: #ef4444 !default;
+$text-info: #164ea3 !default;
+$text-default: #7b8492 !default;
+$text-dark: #273142 !default;
+// One step below $text-dark, for dialog and section headings.
+$text-darker: #111827 !default;
+$text-light: #ffffff !default;
+$text-tertiary: #ed5085 !default;
+$text-placeholder: #8a94a6 !default;
+
+// Badge / status text. The spec's listing page distinguishes a user tier
+// (lite) and a role origin (system, custom); each pairs with the matching
+// -soft background below.
+$text-lite: #3f8f18 !default;
+$text-system: #7a35d8 !default;
+$text-custom: #0867c9 !default;
+
+$text-primary-hover: #0d4fc4 !default;
+$text-danger-hover: #dc2626 !default; // (derived) darker step of $text-danger
+
+// ---------- Background ----------
+$background-primary: #1261e8 !default;
+$background-secondary: #f8fafc !default;
+$background-success: #49a51a !default;
+$background-warning: #ef8a00 !default;
+$background-danger: #ef4444 !default;
+$background-info: #164ea3 !default;
+$background-default: #ffffff !default;
+$background-medium: #29466e !default;
+$background-dark: #0f233d !default;
+$background-dark-a: #0f233d33 !default;
+$background-light: #f7f9fc !default;
+$background-tertiary: #ed5085 !default;
+$background-lime: #f3de1d !default;
+$background-transparent: color.change(#000000, $alpha: 0.1) !default;
+
+$background-disabled: #d9e0e7 !default;
+
+// Interaction surfaces
+$background-hover: #f8fbff !default; // table row hover
+$background-header: #fbfcfe !default; // grid header row
+
+// ---------- Soft / tint backgrounds ----------
+// Pale fills for badges, banners and icon chips. Each is the low-saturation
+// partner of the solid of the same name.
+$background-primary-soft: #e8f0ff !default;
+$background-success-soft: #ddf2cf !default;
+$background-warning-soft: #fff2df !default;
+$background-danger-soft: #fdecec !default; // (derived) tint of $background-danger
+$background-info-soft: #edf4ff !default;
+$background-lite-soft: #e6f6da !default;
+$background-system-soft: #f0e5ff !default;
+$background-custom-soft: #e3f2ff !default;
+
+// ---------- Border ----------
+$border-primary: #1261e8 !default;
+$border-secondary: #c3ccd6 !default; // (derived) cool equivalent of #c6c6c6
+$border-success: #49a51a !default;
+$border-warning: #ef8a00 !default;
+$border-danger: #ef4444 !default;
+$border-info: #164ea3 !default;
+$border-light: #e9edf2 !default;
+$border-dark: #0f233d !default;
+$border-default: #d9e0e7 !default;
+$border-primary-soft: #d8e5ff !default;
+
+// ---------- Elevation & focus ----------
+// The spec's shadow is a single cool-neutral hue at low alpha. `sm` is the
+// spec value verbatim; the heavier steps are (derived) on the same hue, with
+// alpha and blur rising together so the set reads as one light source.
+$shadow-color: #101828 !default;
+$shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05) !default;
+$shadow-md: 0 4px 8px rgba(16, 24, 40, 0.08) !default;
+$shadow-lg: 0 8px 16px rgba(16, 24, 40, 0.1) !default;
+$shadow-xl: 0 12px 24px rgba(16, 24, 40, 0.12) !default;
+
+// Retained as the shadow *colour* token the box-shadow utilities were built
+// on, so anything referencing it keeps working.
+$boxshadow-primary: rgba(16, 24, 40, 0.05) !default;
+
+// Focus ring — 3px halo in $background-primary at 16%. The stack had no focus
+// token at all before; several screens hand-rolled one.
+$focus-ring: 0 0 0 3px rgba(18, 97, 232, 0.16) !default;

package/dist/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/dist/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/dist/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