@ids-group-ltd/ids-design-system 0.1.0

package/styles/_tokens.scss

@@ -0,0 +1,614 @@
+/* ============================================================
+   Design Tokens — Tier 3 component + scale layer.
+
+   Tier 1 colour primitives (ramps + HSL channels) live in
+   ../themes/default/_palette.scss. Tier 2 semantic role assignments
+   (surface, border, text, primary/secondary/tertiary, status, focus)
+   live in ../themes/default/_theme.scss.
+
+   THIS file owns the theme-INDEPENDENT layer:
+     · scales      — spacing, radius, sizes, hit targets, breakpoints
+     · typography  — families, sizes, weights, line-height, tracking
+     · motion      — durations, easings
+     · elevation   — shadows, blur, z-index layers
+     · opacity     — state-overlay alphas
+     · component   — Tier 3 --ds-*-* tokens (per-component geometry)
+
+   Components consume only Tier 2/3 tokens. Direct use of palette
+   primitives (--blue-600, --neutral-200, …) inside component
+   styles is a violation — fix by introducing or reusing a role.
+   ============================================================ */
+
+:root {
+  /* ============================================================
+     Spacing — 4 px base, with named half-steps where atoms need them
+     ============================================================ */
+  --space-0:    0;
+  --space-px:   1px;
+  --space-0-5:  2px;     /* hairline insets, icon close button pad */
+  --space-1:    4px;
+  --space-1-5:  6px;     /* badge gap, tag gap, field-label gap */
+  --space-2:    8px;
+  --space-2-5: 10px;     /* tooltip pad-x, badge pad-x */
+  --space-3:   12px;
+  --space-4:   16px;
+  --space-5:   20px;
+  --space-6:   24px;
+  --space-8:   32px;
+  --space-10:  40px;
+  --space-12:  48px;
+  --space-14:  56px;
+  --space-16:  64px;
+  --space-20:  80px;
+  --space-24:  96px;
+  --space-32: 128px;
+
+  /* ============================================================
+     Radius — six-stop scale.
+     Each step is functionally distinct; adjacent steps are
+     visually distinguishable at standard zoom.
+     ============================================================ */
+  --radius-0:        0;
+  --radius-sm:       4px;   /* kbd, indeterminate-checkbox tick, link focus halo */
+  --radius-md:       8px;   /* buttons, fields, tooltips, search, segmented, tags */
+  --radius-lg:      12px;   /* menus, popovers, dropdowns, cards, modals, drawers, empty-state icons, toasts */
+  --radius-xl:      16px;   /* large containers — viewport/scanner frames, hero cards */
+  --radius-2xl:     24px;   /* heroic surfaces — reserved, no current consumer */
+
+  /* --radius-pill is configurable so themes can override pill-shaped surfaces
+     (switches, status chips, avatars, segmented thumb) without forking the
+     full radius scale. A spreadsheet-style client can square pills with:
+       :root[data-theme="spreadsheet"] { --radius-pill-value: var(--radius-sm); } */
+  --radius-pill-value: 999px;
+  --radius-pill: var(--radius-pill-value);
+
+  /* Component-scoped radius — kept only when the semantic intent matters
+     beyond the value itself, OR when the global scale doesn't fit. */
+  --radius-flat:         var(--radius-0);    /* explicit "intentionally squared" — middle of btn-group, in-range datepicker */
+
+  /* ============================================================
+     Border widths — two-stop scale.
+     Adjacent widths must be visually distinguishable; 1.5/2.5
+     mid-stops were dropped because they read identically to
+     1/2 on standard displays.
+     ============================================================ */
+  --border-width-default: 1px;   /* every border, divider, field outline */
+  --border-width-strong:  2px;   /* radio dot, slider thumb, tabs underline, focus ring inner band, dropzone dash */
+
+  /* ============================================================
+     Elevation
+     Channel-split substrate so a re-skin can re-tint shadows.
+     Light theme: cool near-black slate (225 / 39% / 7%).
+     Dark  theme: override --shadow-tint-l to ~95% so the same
+     alphas render as soft light glows over dark surfaces.
+     The alpha values stay constant across themes — only the
+     hue/saturation/lightness become configurable.
+     ============================================================ */
+  /* --shadow-tint-h/s/l live in themes/default/_palette.scss — palette-level
+     so dark palettes can override --shadow-tint-l → ~95% for soft light glows. */
+
+  --shadow-1: 0 1px 2px  hsla(var(--shadow-tint-h), var(--shadow-tint-s), var(--shadow-tint-l), .06),
+              0 1px 3px  hsla(var(--shadow-tint-h), var(--shadow-tint-s), var(--shadow-tint-l), .08);
+  --shadow-2: 0 4px 8px  hsla(var(--shadow-tint-h), var(--shadow-tint-s), var(--shadow-tint-l), .06),
+              0 4px 16px hsla(var(--shadow-tint-h), var(--shadow-tint-s), var(--shadow-tint-l), .10);
+  --shadow-3: 0 8px 16px hsla(var(--shadow-tint-h), var(--shadow-tint-s), var(--shadow-tint-l), .08),
+              0 16px 32px hsla(var(--shadow-tint-h), var(--shadow-tint-s), var(--shadow-tint-l), .14);
+  --shadow-4: 0 16px 32px hsla(var(--shadow-tint-h), var(--shadow-tint-s), var(--shadow-tint-l), .12),
+              0 24px 48px hsla(var(--shadow-tint-h), var(--shadow-tint-s), var(--shadow-tint-l), .18);
+  --shadow-popover: var(--shadow-2);
+  --shadow-modal:   var(--shadow-4);
+  --shadow-toast:   var(--shadow-3);
+  --shadow-card:    var(--shadow-1);
+
+  /* Backdrop blur */
+  --blur-sm: 4px;
+  --blur-md: 8px;
+
+  /* ============================================================
+     Z-index — global stacking scale.
+     Component-internal stacking (e.g. sticky headers within a
+     scroll container) uses component-scoped tokens derived from
+     the global scale so refactors stay local. */
+  --layer-base:      0;
+  --layer-raised:    1;
+  --layer-sticky:    100;
+  --layer-dropdown:  1000;
+  --layer-overlay:   1100;
+  --layer-drawer:    1200;
+  --layer-modal:     1300;
+  --layer-popover:   1400;
+  --layer-toast:     1500;
+  --layer-tooltip:   1600;
+
+  /* Component-scoped stacking */
+  --table-sticky-header-z: var(--layer-raised);
+  --table-sticky-col-z:    var(--layer-raised);
+  --table-sticky-corner-z: 2;          /* sticky col header sits over both axes */
+  --btn-focus-z:           var(--layer-raised);
+  --btn-group-focus-z:     2;          /* focused button rises above its neighbour */
+
+  /* ============================================================
+     Motion
+     ============================================================ */
+  --duration-instant: 80ms;
+  --duration-fast:    120ms;
+  --duration-base:    180ms;
+  --duration-slow:    260ms;
+  --duration-slower:  400ms;
+
+  /* Loop durations — for indeterminate spinners, skeletons, progress.
+     These deliberately sit outside the transition scale because
+     they describe rhythm, not response. */
+  --duration-loop-fast: 700ms;
+  --duration-loop-slow: 1400ms;
+
+  /* Easing.
+     - standard:   default for transitions; decelerates into rest.
+                   Use for state changes (hover, focus, toggle).
+     - emphasized: accelerate-decelerate; bigger movements that
+                   "pick up and put down". Use for entries/exits
+                   of overlays, modals, drawers.
+     - decelerate: incoming-only (out → in). Use when something
+                   appears (toast, tooltip, popover open).
+     - accelerate: outgoing-only (in → out). Use when something
+                   leaves (toast dismiss, modal close).
+     - spring:     playful overshoot; sparingly. Reserved for
+                   small celebratory feedback. */
+  --ease-standard:   cubic-bezier(.2,  0,    0,   1);
+  --ease-emphasized: cubic-bezier(.3,  0,    .1,  1.4);
+  --ease-decelerate: cubic-bezier(0,   0,    0,   1);
+  --ease-accelerate: cubic-bezier(.3,  0,    1,   1);
+  --ease-spring:     cubic-bezier(.5,  1.5, .5,   1);
+
+  /* Opacity — semantic, purpose-named (Material/Carbon/Polaris convention).
+     Each token has a real consumer in the codebase; symmetric "unused"
+     numeric stops are deliberately omitted. */
+  --opacity-disabled:        0.5;   /* full disabled state on interactive components */
+  --opacity-muted:           0.6;   /* legacy alias — being phased out in favour of --text-* roles */
+  --opacity-text-disabled:   0.38;  /* disabled text alpha (WCAG-derived) */
+  --opacity-scrim:           0.55;  /* modal/drawer backdrop overlay (light theme) */
+  --opacity-state-hover:     0.08;  /* hover layer over surface (overlay vs surface swap) */
+  --opacity-state-pressed:   0.16;  /* active/pressed layer */
+
+  /* ============================================================
+     Breakpoints
+     ============================================================ */
+  --bp-xs:  480px;
+  --bp-sm:  640px;
+  --bp-md:  768px;
+  --bp-lg: 1024px;
+  --bp-xl: 1441px;   /* Page-grid wide-tier threshold (12 cols, container caps at --col-cap-content). */
+  --bp-2xl:1536px;
+
+  /* ============================================================
+     Page grid — tier-specific gutters + margins.
+     Consumed by `.page-grid` in _page-grid.scss; one column-count
+     per tier (4 / 8 / 12 / 12) with `--page-gutter` and
+     `--page-margin` swapping at the matching min-width breakpoint.
+     ============================================================ */
+  --page-gutter-mobile:  var(--space-3);   /* 12px — <= 640px, 4-col tier */
+  --page-gutter-tablet:  var(--space-4);   /* 16px — 641–1024px, 8-col tier */
+  --page-gutter-desktop: var(--space-5);   /* 20px — 1025–1440px, 12-col tier */
+  --page-gutter-wide:    var(--space-6);   /* 24px — >= 1441px, 12-col tier, container caps */
+  --page-margin-mobile:  var(--space-4);   /* 16px */
+  --page-margin-tablet:  var(--space-6);   /* 24px */
+  --page-margin-desktop: var(--space-8);   /* 32px */
+  --page-margin-wide:    var(--space-10);  /* 40px */
+
+  /* ============================================================
+     System chrome
+     ============================================================ */
+  --scrollbar-w: 10px;
+  --scrollbar-thumb:        var(--neutral-300);
+  --scrollbar-thumb-hover:  var(--neutral-400);
+  --scrollbar-thumb-active: var(--neutral-500);
+  --select-bg: color-mix(in srgb, var(--primary) 22%, transparent);
+  --col-cap-text:    720px;
+  --col-cap-content: 1280px;
+
+  /* ============================================================
+     Typography scale (theme-independent). Font FAMILIES are a theme
+     choice and live in themes/default/_theme.scss (--font-sans/mono/
+     display/heading); the size/weight/leading/tracking scale below is
+     constant across themes.
+     ============================================================ */
+  --font-weight-regular:  400;
+  --font-weight-medium:   500;
+  --font-weight-semibold: 600;
+  --font-weight-bold:     700;
+  --font-weight-extrabold:800;
+
+  --font-size-display: 64px;
+  --font-size-h1:      48px;
+  --font-size-h2:      36px;
+  --font-size-h3:      28px;
+  --font-size-h4:      22px;
+  --font-size-h5:      18px;
+  --font-size-h5-strong: 20px;   /* modal titles, condensed headers */
+  --font-size-l:       18px;
+  --font-size-m:       16px;
+  --font-size-s:       14px;
+  --font-size-xs:      12px;
+  --font-size-2xs:     11px;
+  --font-size-3xs:     10px;     /* avatar-sm font */
+  --font-size-4xs:      9px;     /* avatar-xs font */
+  --font-size-mono:    13px;
+
+  --line-height-tight: 1.1;
+  --line-height-snug:  1.25;
+  --line-height-base:  1.4;
+  --line-height-loose: 1.6;
+  --line-height-flat:  1;          /* button labels, single-line UI */
+
+  --letter-spacing-tight: -.02em;
+  --letter-spacing-snug:  -.01em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide:   .02em;
+  --letter-spacing-wider:  .08em;
+
+  /* ============================================================
+     Hit targets — the canonical size scale for interactive height
+     ============================================================ */
+  --hit-xs:    24px;   /* btn-s, datepicker nav, modal close */
+  --hit-sm:    28px;   /* segmented btn, stepper node */
+  --hit-md:    36px;   /* search, pagination, tag-input rows */
+  --hit-min:   32px;   /* dense desktop default (alias of --hit-cozy-tier-0) */
+  --hit-cozy:  40px;   /* default control height */
+  --hit-comfy: 44px;   /* WCAG min for touch */
+  --hit-touch: 48px;   /* mobile-friendly — also used by floating-label fields */
+
+  /* ============================================================
+     Iconography
+     ============================================================ */
+  --icon-2xs: 10px;
+  --icon-xs:  12px;
+  --icon-sm:  14px;
+  --icon-md:  16px;
+  --icon-lg:  20px;
+
+  /* ============================================================
+     3 · COMPONENT-SCOPED dimensions
+     Atom-level geometry that doesn't fit cleanly in a global
+     scale. Density Tweaks override these at :root.
+     ============================================================ */
+
+  /* Field padding — density-aware, consumed by input, search and
+     textarea controls. Tokenised so the ultra-compact tier can
+     compress without component edits. */
+  --field-pad-x:       var(--space-3);
+  --field-pad-y:       0;
+
+  /* Shared inner padding for surface containers (card, stat, …). Components
+     default their own --ds-*-pad to this, so a consumer retunes all at once. */
+  --ds-container-pad:  var(--space-6);
+
+  /* Table cell padding — density-aware, consumed by .tbl td/th. */
+  --table-cell-pad-x:  var(--space-4);
+  --table-cell-pad-y:  var(--space-3);
+  --table-head-pad-y:  var(--space-3);
+  --check-size:        20px;
+  --check-bw:          var(--border-width-default);
+  --check-tick-size:   12px;
+  --check-indet-w:     10px;
+  --check-indet-h:     2px;
+  --radio-dot-size:    10px;
+  --radio-bw-checked:  var(--border-width-strong);
+
+  /* Switch */
+  --switch-track-w:    36px;
+  --switch-track-h:    20px;
+  --switch-thumb-size: 16px;
+  --switch-thumb-pad:  2px;
+  --switch-thumb-travel: 16px;   /* track-w − thumb − 2*pad */
+
+  /* Slider */
+  --slider-track-h:    4px;
+  --slider-thumb-size: 18px;
+  --slider-thumb-bw:   var(--border-width-strong);
+
+  /* Status dot, badge dot */
+  --status-dot-size:   8px;
+  --badge-dot-size:    6px;
+
+  /* Badge */
+  --badge-pad-y:       4px;
+  --badge-pad-x:       10px;
+  --badge-gap:         var(--space-1-5);
+  --badge-count-size:  20px;
+
+  /* Tag */
+  --tag-pad-y:         6px;
+  --tag-pad-x:         10px;
+  --tag-pad-x-close:   6px;
+  --tag-gap:           var(--space-1-5);
+  --tag-close-size:    14px;
+  --tag-close-pad:     2px;
+
+  /* Avatar */
+  --avatar-xs:  20px;
+  --avatar-sm:  24px;
+  --avatar-md:  32px;
+  --avatar-lg:  40px;
+  --avatar-bw-group: var(--border-width-strong);
+
+  /* Spinner */
+  --spinner-sm: 12px;
+  --spinner-md: 16px;
+  --spinner-lg: 24px;
+  --spinner-bw: var(--border-width-strong);
+
+  /* Progress */
+  --progress-h: 6px;
+
+  /* Stepper */
+  --stepper-node-size: 28px;   /* === --hit-sm */
+  --stepper-bar-w:     56px;
+  --stepper-bar-h:     2px;
+
+  /* Segmented control */
+  --segmented-btn-h:   var(--hit-sm);
+  --segmented-r-inner: var(--radius-md);
+  --segmented-pad:     2px;
+
+  /* Sidenav */
+  --sidenav-w:           240px;
+  --sidenav-w-collapsed: 64px;
+
+  /* Modal */
+  --modal-w-sm: 480px;
+  --modal-w-md: 640px;
+  --modal-w-lg: 800px;
+
+  /* Drawer */
+  --drawer-w-md: 480px;
+  --drawer-w-lg: 640px;
+
+  /* Popover / cmdk */
+  --popover-maxh: 360px;
+
+  /* Field */
+  --field-gap-label:   var(--space-1-5);   /* label↔control */
+  --field-gap-req:     var(--space-1);     /* label↔asterisk */
+  --field-h-sm:        var(--hit-min);
+  --field-h-md:        var(--hit-cozy);
+  --field-h-lg:        var(--hit-touch);
+  --field-h-floating:  var(--hit-touch);
+  --field-textarea-min: 96px;
+  --field-floating-label-fs: var(--font-size-2xs);
+  --field-floating-label-lh: 14px;
+  --field-floating-label-top: 8px;
+  --field-num-stepper-w: var(--space-8);
+
+  /* Search */
+  --search-h: var(--hit-md);
+  --search-maxw: 320px;
+
+  /* ============================================================
+     3b · COMPONENT-SCOPED dimensions (Phase 4 additions)
+     Tokens for atom geometries that previously lived as literals
+     inside component CSS. Grouped by component for readability.
+     ============================================================ */
+
+  /* Top bar / app shell */
+  --topbar-h:                var(--space-14);            /* 56px — global app bar height */
+
+  /* Sidenav internals — w / w-collapsed defined above */
+  --sidenav-pad-brand-y:     var(--space-2);             /* logo top padding */
+  --sidenav-pad-brand-b:     var(--space-6);             /* logo bottom padding */
+  --sidenav-logo-size:       var(--hit-sm);          /* 28px — square brand mark */
+  --sidenav-collapsed-item:  var(--hit-cozy);        /* 40px — collapsed nav-item hit area */
+  --sidenav-section-pad-b:   var(--space-1-5);           /* nav-section bottom padding */
+
+  /* Form section grid */
+  --form-section-label-w:    280px;                  /* labels column width */
+
+  /* Page header */
+  --page-header-sub-mt:      var(--space-1);             /* subtitle top margin */
+
+  /* Field internals */
+  --field-textarea-rows-min: 60px;                   /* min-h for inline textarea inside the field wrapper */
+  --field-floating-pad-t:    18px;                   /* top padding when --floating, leaves room for label */
+  --field-select-pad-r:      var(--space-6);             /* select chevron clearance */
+  --field-affix-overlap:     var(--border-width-default);     /* affix bleed over field border */
+
+  /* Button group */
+  --btn-group-overlap:       calc(var(--border-width-default) * -1); /* -1px — collapses adjacent borders */
+  --btn-link-uloff:          3px;                    /* underline-offset on link buttons */
+
+  /* Card */
+  --card-hover-lift:         1px;                    /* translateY on .card--hover */
+  --card-title-fs:           var(--font-size-h4);
+
+  /* Sort icon (table headers) */
+  --sort-ic-size:            var(--icon-xs);         /* 12px */
+  --sort-ic-gap:             var(--space-1-5);           /* 6px */
+
+  /* Tag close glyph (when literal svg sits inside .tag .x) */
+  --tag-close-glyph:         var(--icon-xs);         /* 12px */
+
+  /* Bulk action toolbar */
+  --bulk-bar-offset:         var(--space-4);             /* sticky offset from container bottom */
+
+  /* Menu */
+  --menu-minw:               200px;                  /* dropdown menu min width */
+  --menu-sep-h:              var(--border-width-default);
+
+  /* Tooltip */
+  --tooltip-maxw:            240px;
+  --tooltip-arrow:           var(--space-2);             /* 8px — caret edge length, halved for offset */
+
+  /* Popover */
+  --popover-maxw:            320px;
+
+  /* Toast */
+  --toast-minw:              320px;
+  --toast-maxw:              480px;
+  --toast-bar-w:             3px;                    /* left accent bar */
+  --toast-enter-y:           var(--space-1);             /* slide-in distance */
+
+  /* Banner / Alert */
+  --banner-bar-w:            4px;                    /* left accent bar */
+  --banner-ic-mt:            var(--border-width-default);     /* optical bump for icon alignment */
+
+  /* Empty state */
+  --empty-icon-size:         var(--space-16);            /* 64px */
+  --empty-body-maxw:         360px;
+
+  /* Combobox */
+  --combobox-offset:         var(--space-1);             /* gap below trigger */
+  --combobox-maxh:           280px;                  /* listbox max height */
+
+  /* Command palette (cmdk) */
+  --cmdk-w:                  560px;
+  --cmdk-list-maxh:          var(--popover-maxh);    /* alias — keeps cmdk + popover synced */
+
+  /* Datepicker */
+  --datepicker-w:            280px;
+  --datepicker-cell-gap:     var(--space-0-5);           /* 2px — grid gap between day cells */
+  --datepicker-nav-size:     var(--hit-xs);          /* 24px — month-step buttons */
+
+  /* Modal close button */
+  --modal-close-size:        var(--hit-xs);          /* 24px */
+  --modal-enter-y:           var(--space-2);             /* 8px slide-in */
+
+  /* Error page */
+  --errorpage-body-maxw:     520px;
+
+  /* Wizard (extras) */
+  --wizard-body-minh:        200px;
+  --wizard-step-bar-w:       var(--space-8);             /* 32px connector */
+
+  /* Inline edit */
+  --inline-edit-input-minw:  var(--space-20);            /* 80px */
+  --inline-edit-btn-size:    var(--hit-xs);          /* 24px */
+
+  /* Settings */
+  --settings-nav-w:          220px;
+  --settings-row-label-w:    240px;
+  --settings-row-label-gap:  var(--space-0-5);           /* 2px between strong + helper */
+
+  /* Matrix */
+  --matrix-maxh:             360px;                  /* shares optical with --popover-maxh by intent */
+  --matrix-cell-pad-y:       var(--space-2);             /* 8px */
+  --matrix-cell-pad-x:       var(--space-2-5);           /* 10px */
+  --matrix-cell-minw:        var(--space-16);            /* 64px */
+  --matrix-rowhdr-minw:      160px;
+
+  /* Calendar / timeline */
+  --calendar-rowlabel-w:     160px;
+  --calendar-row-h:          var(--hit-touch);       /* 48px */
+  --calendar-cell-min:       var(--hit-cozy);        /* 40px minimum column width */
+  --calendar-cell-pad:       var(--space-1);             /* 4px inner padding */
+  --calendar-bar-h:          var(--space-8);             /* 32px */
+  --calendar-bar-inset-y:    var(--space-2);             /* 8px from top of cell */
+
+  /* Bin pack visualisation */
+  --binpack-bay-h:           var(--hit-touch);       /* 48px */
+
+  /* Map placeholder chip */
+  --map-chip-pad-y:          var(--space-1-5);           /* 6px */
+  --map-chip-pad-x:          var(--space-2-5);           /* 10px */
+  --map-chip-inset:          var(--space-3);             /* 12px from top-left */
+
+  /* KBD badge */
+  --kbd-pad-y:               var(--space-0-5);           /* 2px */
+  --kbd-pad-x:               var(--space-1-5);           /* 6px */
+
+  /* Chart */
+  --chart-empty-h:           160px;
+  --chart-skeleton-h:        160px;
+  --chart-legend-dot:        var(--icon-2xs);        /* 10px */
+
+  /* Compare layout */
+  --compare-dt-w:            90px;
+
+  /* Do/Don't stage */
+  --dodont-stage-minh:       100px;
+
+  /* Statemap arrow */
+  --statemap-arrow-w:        var(--space-8);             /* 32px */
+  --statemap-arrow-cap:      var(--space-1);             /* 4px caret border-width */
+
+  /* Page composition (extras) */
+  --grid-table-min:          220px;                  /* auto-fit minmax */
+  --grid-cols-card-minh:     120px;
+  --grid-cols-card-thumb:    80px;
+  --dl-spec-label-w:         120px;
+  --scroll-spec-h:           220px;
+  --tab-spec-maxw:           220px;
+  --tab-spec-dot-offset:     var(--border-width-strong);       /* -2px notification offset (negated inline) */
+}
+
+/* ============================================================
+   Reduced motion
+   ============================================================ */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-instant: 0ms;
+    --duration-fast:    0ms;
+    --duration-base:    0ms;
+    --duration-slow:    0ms;
+    --duration-slower:  0ms;
+    --duration-loop-fast: 0ms;
+    --duration-loop-slow: 0ms;
+  }
+  *, *::before, *::after {
+    transition-duration: 0ms !important;
+    animation-duration:  0ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+/* ============================================================
+   Density tiers — applied by Tweaks panel via [data-density]
+   ============================================================ */
+[data-density="ultra-compact"] {
+  /* Power-user / tradesperson tier: financial dashboards, log viewers,
+     dense data grids. 24px hits sit BELOW WCAG 2.5.5 (44px enhanced)
+     and WCAG 2.5.8 (24px minimum) margins — acceptable only when:
+       (a) the screen is keyboard-first, (b) input is mouse/keys not
+       touch, (c) accidental-tap risk is low, (d) the user opted in.
+     Do not enable for mobile / field-ops layouts. */
+  --hit-cozy:          24px;
+  --hit-min:           24px;
+  --check-size:        14px;
+  --switch-track-w:    24px;
+  --switch-thumb-size: 12px;
+  --segmented-btn-h:   20px;
+  --field-pad-x:       var(--space-2);
+  --field-pad-y:       var(--space-1);
+  --table-cell-pad-x:  var(--space-2);
+  --table-cell-pad-y:  var(--space-1);
+  --table-head-pad-y:  var(--space-1);
+}
+[data-density="compact"] {
+  --hit-cozy:  32px;
+  --check-size: 16px;
+  --switch-track-w: 30px;
+  --switch-track-h: 16px;
+  --switch-thumb-size: 12px;
+  --switch-thumb-travel: 14px;
+  --avatar-md: 24px;
+  --badge-dot-size: 5px;
+  --status-dot-size: 6px;
+  --sidenav-w: 220px;
+  --field-floating-label-top: 6px;
+  --segmented-btn-h: 24px;
+}
+[data-density="cozy"] {
+  --hit-cozy:  40px;
+  /* defaults */
+}
+[data-density="comfy"] {
+  --hit-cozy:  48px;
+  --check-size: 22px;
+  --switch-track-w: 44px;
+  --switch-track-h: 24px;
+  --switch-thumb-size: 20px;
+  --switch-thumb-travel: 20px;
+  --avatar-md: 36px;
+  --badge-dot-size: 8px;
+  --status-dot-size: 10px;
+  --sidenav-w: 264px;
+  --segmented-btn-h: 32px;
+}

package/styles/_typography.scss

@@ -0,0 +1,30 @@
+// Type utility classes — ported from CLAUDE_DESIGN_DS/tokens.css §Type utilities.
+// These are GLOBAL by design — consumers apply them via class.
+
+.t-display    { font: var(--font-weight-extrabold) var(--font-size-display)/var(--line-height-tight) var(--font-display); letter-spacing: var(--letter-spacing-tight); }
+.t-h1         { font: var(--font-weight-extrabold) var(--font-size-h1)/var(--line-height-tight) var(--font-heading); letter-spacing: var(--letter-spacing-tight); }
+.t-h2         { font: var(--font-weight-extrabold) var(--font-size-h2)/var(--line-height-snug) var(--font-heading); letter-spacing: var(--letter-spacing-snug); }
+.t-h3         { font: var(--font-weight-extrabold) var(--font-size-h3)/var(--line-height-snug) var(--font-heading); letter-spacing: var(--letter-spacing-snug); }
+.t-h4         { font: var(--font-weight-bold) var(--font-size-h4)/var(--line-height-snug) var(--font-heading); }
+.t-h5         { font: var(--font-weight-bold) var(--font-size-h5)/var(--line-height-snug) var(--font-heading); }
+.t-card-title { font: var(--font-weight-bold) var(--card-title-fs)/var(--line-height-snug) var(--font-heading); margin: 0; color: var(--text-primary); }
+.t-l          { font: var(--font-weight-regular) var(--font-size-l)/var(--line-height-base) var(--font-sans); }
+.t-l-bold     { font: var(--font-weight-bold) var(--font-size-l)/var(--line-height-base) var(--font-sans); }
+.t-m          { font: var(--font-weight-regular) var(--font-size-m)/var(--line-height-base) var(--font-sans); }
+.t-m-bold     { font: var(--font-weight-bold) var(--font-size-m)/var(--line-height-base) var(--font-sans); }
+.t-s          { font: var(--font-weight-regular) var(--font-size-s)/var(--line-height-base) var(--font-sans); }
+.t-s-bold     { font: var(--font-weight-bold) var(--font-size-s)/var(--line-height-base) var(--font-sans); }
+.t-xs         { font: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans); }
+.t-xs-bold    { font: var(--font-weight-bold) var(--font-size-xs)/var(--line-height-base) var(--font-sans); }
+.t-overline   { font: var(--font-weight-bold) var(--font-size-2xs)/var(--line-height-base) var(--font-sans); letter-spacing: var(--letter-spacing-wider); text-transform: uppercase; color: var(--text-tertiary); }
+.t-caption    { font: var(--font-weight-regular) var(--font-size-xs)/var(--line-height-base) var(--font-sans); color: var(--text-tertiary); }
+.t-mono       { font: var(--font-weight-medium) var(--font-size-mono)/var(--line-height-base) var(--font-mono); }
+.t-mono-block { font: var(--font-weight-regular) var(--font-size-mono)/var(--line-height-loose) var(--font-mono); background: var(--surface-secondary); border: var(--border-width-default) solid var(--border-divider); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
+
+.sr-only {
+  position: absolute !important;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0,0,0,0);
+  white-space: nowrap; border: 0;
+}

package/styles/ds.scss

@@ -0,0 +1,27 @@
+// Public DS stylesheet entry. Consumers import once at the top of their styles.scss:
+//   @use 'styles/ds';
+//
+// Bundles the default palette + theme for out-of-the-box rendering. Layers:
+//   default/palette — Tier 1 concrete colours (ramps + HSL channels)
+//   default/theme   — Tier 2 semantic role → palette assignments + font families
+//   tokens          — Tier 3 geometry / typography scale / motion / component tokens
+// Advanced consumers can swap the palette/theme and keep tokens — global
+// side-effects (fonts, link) are then opt-in:
+//   @use 'themes/X/palette'; @use 'themes/X/theme'; @use 'styles/tokens';
+//   @use 'styles/fonts'; @use 'styles/link'; …
+
+@forward '../themes/default/palette';
+@forward '../themes/default/theme';
+@forward 'tokens';
+@forward 'tokens-charts';
+@forward 'fonts';
+@forward 'reset';
+@forward 'typography';
+@forward 'link';
+@forward 'layout-utils';
+@forward 'page-grid';
+@forward 'scrollbar';
+@forward 'icon-base';
+@forward 'dropdown-overlay';
+@forward 'toast-overlay';
+@forward 'skeleton-shimmer';