@vegastack/design-tokens 0.1.0 → 0.2.0

package/dist/base.css

@@ -23,28 +23,51 @@
      clickables (a clickable table row, a label tied to a control) or non-pointer cursors
      (`cursor-text`, the select scroll-arrows) set a cursor of their own. */
   button,
-  [role='button'],
-  [role='tab'],
-  [role='switch'],
-  [role='checkbox'],
-  [role='radio'],
-  [role='menuitem'],
-  [role='menuitemcheckbox'],
-  [role='menuitemradio'],
-  [role='option'],
+  [role="button"],
+  [role="tab"],
+  [role="switch"],
+  [role="checkbox"],
+  [role="radio"],
+  [role="menuitem"],
+  [role="menuitemcheckbox"],
+  [role="menuitemradio"],
+  [role="option"],
   summary {
     cursor: pointer;
+    /* Keep touch controls responsive without disabling page pan/pinch zoom.
+       Text-entry fields and document links stay untouched. */
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
   }
   /* Disabled controls opt out (those that don't already set `pointer-events-none` /
      `cursor-not-allowed`). Higher specificity than the element/role selectors above, so it wins;
      a component's own `disabled:cursor-not-allowed` lives in the later utilities layer and still wins. */
   :disabled,
-  [aria-disabled='true'],
+  [aria-disabled="true"],
   [data-disabled] {
     cursor: default;
   }
 }
 
+/* Preserve the focus contract when authored colors are replaced by a forced-colors palette. */
+@media (forced-colors: active) {
+  :focus-visible {
+    outline-color: Highlight;
+  }
+
+  /* Composite text-entry surfaces (TextEdit) put their focus affordance on a WRAPPER via
+     `focus-within:border-ring/…` — a border TINT. The wrapper itself never matches
+     `:focus-visible` (the contenteditable inside it does), and forced-colors replaces
+     border-color outright, so in forced-colors mode that surface had NO visible focus indicator
+     at all. A real outline is the only affordance the forced palette preserves.
+     Simple fields (Input/Textarea/Select) need no equivalent: there the focused element IS the
+     control, so the `:focus-visible` rule above already covers them. */
+  [data-slot="text-edit"]:focus-within {
+    outline: 2px solid Highlight;
+    outline-offset: 1px;
+  }
+}
+
 /* ───────────────────────────────────────────────────────────────────────────────────────────────
  * THE ONE SANCTIONED `!important` EXCEPTION (WCAG 2.1 — reduced-motion accessibility override).
  * Users who set `prefers-reduced-motion: reduce` MUST have animations/transitions neutralized even

package/dist/theme.css

@@ -5,6 +5,7 @@
  */
 
 :root {
+  color-scheme: light;
   --background: oklch(0.994 0.002 75);
   --foreground: oklch(0.145 0.003 75);
   --card: oklch(0.985 0.003 75);
@@ -27,6 +28,7 @@
   --destructive-foreground: oklch(0.985 0.003 75);
   --destructive-subtle: oklch(0.949 0.022 24);
   --destructive-text: oklch(0.521 0.2 25);
+  --destructive-border: oklch(0.505 0.213 27.52); /** Invalid-state border ink, composited at --alpha-tint-border. A DEDICATED role because the fill hue cannot serve both: on the dark ground, destructive at 70% measures 1.92:1, far under the 3:1 WCAG 1.4.11 floor for a non-text UI indicator, and lightening `destructive` itself would drop destructive-foreground on the solid button below 4.5:1. Light keeps the fill hue (4.24:1); dark re-grounds to red.400 (4.00:1). */
   --success: oklch(0.5 0.16 150);
   --success-foreground: oklch(0.985 0.003 75);
   --success-subtle: oklch(0.951 0.051 150);
@@ -52,6 +54,36 @@
   --chart-7: oklch(0.6 0.127 104.2); /** Olive (hue 104) — reassigned from green.600, which collided with the brand phosphor hue (CX-9). */
   --chart-8: oklch(0.531 0.182 256);
   --brand: oklch(0.6 0.17 148); /** The phosphor-green brand accent, LIGHT half (theme-split per CX-9): marker roles ONLY (live/AI-state dot, sparkline endpoint, eyebrow highlight, terminal prompt glyph). 3.5:1 on card/background — meaningful glyphs pass WCAG 1.4.11. Never fills, borders-at-rest, headlines, or buttons. */
+  --tag-blue: oklch(0.6 0.16 256); /** Tag palette (Attio-teardown Wave 1): 10 chromatic hues x base/subtle/text mirroring the family/family-subtle/family-text shape. base = dots/accents (>=3:1 non-text vs background), subtle = chip fill, text = chip text (>=4.5:1 on subtle AND page). Neutral tags use muted/muted-foreground. AA-validated fail-closed in contrast-check.mjs. */
+  --tag-blue-subtle: oklch(0.955 0.02 256);
+  --tag-blue-text: oklch(0.51 0.15 256);
+  --tag-cyan: oklch(0.6 0.11 226);
+  --tag-cyan-subtle: oklch(0.955 0.028 226);
+  --tag-cyan-text: oklch(0.51 0.09 226);
+  --tag-green: oklch(0.6 0.16 150);
+  --tag-green-subtle: oklch(0.955 0.028 150);
+  --tag-green-text: oklch(0.51 0.14 150);
+  --tag-lime: oklch(0.6 0.13 117);
+  --tag-lime-subtle: oklch(0.955 0.028 117);
+  --tag-lime-text: oklch(0.51 0.11 117);
+  --tag-yellow: oklch(0.6 0.12 86);
+  --tag-yellow-subtle: oklch(0.955 0.028 86);
+  --tag-yellow-text: oklch(0.51 0.1 86);
+  --tag-orange: oklch(0.6 0.15 52);
+  --tag-orange-subtle: oklch(0.955 0.02 52);
+  --tag-orange-text: oklch(0.51 0.13 52);
+  --tag-red: oklch(0.6 0.16 25);
+  --tag-red-subtle: oklch(0.955 0.02 25);
+  --tag-red-text: oklch(0.51 0.15 25);
+  --tag-pink: oklch(0.6 0.16 356);
+  --tag-pink-subtle: oklch(0.955 0.02 356);
+  --tag-pink-text: oklch(0.51 0.15 356);
+  --tag-magenta: oklch(0.6 0.16 323);
+  --tag-magenta-subtle: oklch(0.955 0.028 323);
+  --tag-magenta-text: oklch(0.51 0.15 323);
+  --tag-purple: oklch(0.6 0.16 295);
+  --tag-purple-subtle: oklch(0.955 0.02 295);
+  --tag-purple-text: oklch(0.51 0.15 295);
   --sidebar: oklch(0.985 0.003 75);
   --sidebar-foreground: oklch(0.269 0.003 75);
   --sidebar-primary: oklch(0.145 0.003 75);
@@ -78,6 +110,8 @@
   --sidebar-width: 15rem; /** Expanded sidebar rail width (was a JS constant invisible to design-lint, register P2-13). */
   --sidebar-width-icon: 3rem; /** Collapsed icon-only rail width. */
   --shadow-overlay: 0 4px 14px -4px oklch(0.13 0.002 75 / 0.1), 0 2px 4px -2px oklch(0.13 0.002 75 / 0.06);
+  --shadow-lit: inset 0 1px 0 0 oklch(1 0 0 / 0.12), 0 1px 2px 0 oklch(0.13 0.002 75 / 0.18), 0 2px 6px -2px oklch(0.13 0.002 75 / 0.14); /** Wave 2 'lit' action finish (MK-approved amendment to flat-by-default): a 1px on-fill top-light + warm-ink ambient pair for PRIMARY actions only. Attio-calibrated, warm-adapted. Never on cards/surfaces — the flat elevation model stands everywhere else. */
+  --effect-blur-glass: 8px; /** Backdrop blur for the existing glass Button finish. Matches Tailwind v4's shipped blur-sm value while exposing the effect through a semantic contract. */
   --z-raised: 10; /** Local raise WITHIN a component's own stacking context (focused OTP slot / segmented item, floating label, bubble reactions, select scroll arrows). Never for portaled surfaces. */
   --z-overlay: 50; /** The single portal band: every portaled floating surface (dialog, sheet, popover, menu, select, tooltip, hover-card). Nesting resolves by DOM order — Base UI appends portals to <body>, so a Select inside a Dialog mounts later and stacks above within the same band. Toasts (sonner) are the documented exemption ABOVE this band (library-managed z; a toast must outrank a modal regardless of mount order). */
   --opacity-dim: 50%; /** Element opacity for disabled controls and dimmed affordances (outside-month days, decorative chevrons). */
@@ -137,6 +171,7 @@
  */
 
 .dark {
+  color-scheme: dark;
   --background: oklch(0.175 0.003 75);
   --foreground: oklch(0.922 0.003 75);
   --card: oklch(0.205 0.003 75);
@@ -157,6 +192,7 @@
   --accent-foreground: oklch(0.967 0.003 75);
   --destructive-subtle: oklch(0.275 0.07 25);
   --destructive-text: oklch(0.72 0.16 25);
+  --destructive-border: oklch(0.72 0.16 25); /** Dark-ground invalid-state border ink. red.400 at --alpha-tint-border measures 4.00:1 on background and 3.86:1 on card, clearing the 3:1 WCAG 1.4.11 floor the shared destructive fill misses (1.92:1). */
   --success-subtle: oklch(0.276 0.061 150);
   --success-text: oklch(0.72 0.17 150);
   --warning-subtle: oklch(0.28 0.069 42);
@@ -175,6 +211,36 @@
   --chart-6: oklch(0.69 0.21 25);
   --chart-7: oklch(0.72 0.15 103.9);
   --chart-8: oklch(0.72 0.13 256);
+  --tag-blue: oklch(0.72 0.14 256);
+  --tag-blue-subtle: oklch(0.275 0.05 256);
+  --tag-blue-text: oklch(0.75 0.13 256);
+  --tag-cyan: oklch(0.72 0.13 226);
+  --tag-cyan-subtle: oklch(0.275 0.05 226);
+  --tag-cyan-text: oklch(0.75 0.13 226);
+  --tag-green: oklch(0.72 0.15 150);
+  --tag-green-subtle: oklch(0.275 0.05 150);
+  --tag-green-text: oklch(0.75 0.13 150);
+  --tag-lime: oklch(0.72 0.15 117);
+  --tag-lime-subtle: oklch(0.275 0.05 117);
+  --tag-lime-text: oklch(0.75 0.13 117);
+  --tag-yellow: oklch(0.72 0.14 86);
+  --tag-yellow-subtle: oklch(0.275 0.05 86);
+  --tag-yellow-text: oklch(0.75 0.13 86);
+  --tag-orange: oklch(0.72 0.15 52);
+  --tag-orange-subtle: oklch(0.275 0.05 52);
+  --tag-orange-text: oklch(0.75 0.13 52);
+  --tag-red: oklch(0.72 0.15 25);
+  --tag-red-subtle: oklch(0.275 0.05 25);
+  --tag-red-text: oklch(0.75 0.13 25);
+  --tag-pink: oklch(0.72 0.15 356);
+  --tag-pink-subtle: oklch(0.275 0.05 356);
+  --tag-pink-text: oklch(0.75 0.13 356);
+  --tag-magenta: oklch(0.72 0.15 323);
+  --tag-magenta-subtle: oklch(0.275 0.05 323);
+  --tag-magenta-text: oklch(0.75 0.13 323);
+  --tag-purple: oklch(0.72 0.15 295);
+  --tag-purple-subtle: oklch(0.275 0.05 295);
+  --tag-purple-text: oklch(0.75 0.13 295);
   --sidebar: oklch(0.145 0.003 75);
   --sidebar-foreground: oklch(0.87 0.003 75);
   --sidebar-primary: oklch(0.922 0.003 75);
@@ -186,6 +252,102 @@
   --brand: oklch(0.86 0.21 148); /** The phosphor-green brand accent, DARK half — MK's pick (13.3:1 on the dark canvas). Marker roles only. */
   --alpha-soft-hover: 30%; /** Dark half of the theme-split soft-surface hover wash. */
   --alpha-soft-surface: 20%; /** Dark half of the theme-split soft-surface resting wash. */
+  --shadow-overlay: 0 8px 28px -6px oklch(0 0 0 / 0.48), 0 2px 8px -2px oklch(0 0 0 / 0.4); /** DARK overlay shadow, strengthened (Wave 1 — Attio-calibrated): the old single 24px layer was near-invisible on the dark canvas; this two-layer ramp restores the floating cue while staying below Attio's 88px maximal ramp. */
+  --shadow-lit: inset 0 1px 0 0 oklch(1 0 0 / 0.35), 0 2px 6px -2px oklch(0 0 0 / 0.5);
+  --destructive-subtle-hover: oklch(0.34 0.123 26.3); /** DERIVED: destructive fill @30% composited over destructive-subtle (soft-hover surface, AA-gated against destructive-text). */
+  --success-subtle-hover: oklch(0.348 0.092 148.9); /** DERIVED: success fill @30% composited over success-subtle (soft-hover surface, AA-gated against success-text). */
+  --warning-subtle-hover: oklch(0.356 0.093 46.6); /** DERIVED: warning fill @30% composited over warning-subtle (soft-hover surface, AA-gated against warning-text). */
+  --info-subtle-hover: oklch(0.354 0.101 254.3); /** DERIVED: info fill @30% composited over info-subtle (soft-hover surface, AA-gated against info-text). */
+}
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.vs-marketing {
+  color-scheme: dark;
+  --background: oklch(0.175 0.003 75);
+  --foreground: oklch(0.922 0.003 75);
+  --card: oklch(0.205 0.003 75);
+  --card-foreground: oklch(0.922 0.003 75);
+  --popover: oklch(0.205 0.003 75);
+  --popover-foreground: oklch(0.922 0.003 75);
+  --primary: oklch(0.922 0.003 75);
+  --primary-foreground: oklch(0.145 0.003 75);
+  --primary-hover: oklch(0.97 0.003 75);
+  --primary-active: oklch(0.994 0.002 75);
+  --track: oklch(0.439 0.003 75);
+  --secondary: oklch(0.269 0.003 75);
+  --secondary-foreground: oklch(0.922 0.003 75);
+  --muted: oklch(0.269 0.003 75);
+  --muted-foreground: oklch(0.66 0.003 75);
+  --muted-foreground-faint: oklch(0.559 0.003 75);
+  --accent: oklch(0.269 0.003 75);
+  --accent-foreground: oklch(0.967 0.003 75);
+  --destructive-subtle: oklch(0.275 0.07 25);
+  --destructive-text: oklch(0.72 0.16 25);
+  --destructive-border: oklch(0.72 0.16 25); /** Dark-ground invalid-state border ink. red.400 at --alpha-tint-border measures 4.00:1 on background and 3.86:1 on card, clearing the 3:1 WCAG 1.4.11 floor the shared destructive fill misses (1.92:1). */
+  --success-subtle: oklch(0.276 0.061 150);
+  --success-text: oklch(0.72 0.17 150);
+  --warning-subtle: oklch(0.28 0.069 42);
+  --warning-text: oklch(0.769 0.188 70.08);
+  --info-subtle: oklch(0.275 0.059 255);
+  --info-text: oklch(0.72 0.13 256);
+  --overlay: oklch(0 0 0 / 0.55);
+  --border: oklch(0.269 0.003 75);
+  --input: oklch(0.269 0.003 75);
+  --ring: oklch(0.922 0.003 75);
+  --chart-1: oklch(0.623 0.214 259.81);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.75 0.183 55.93);
+  --chart-5: oklch(0.645 0.246 16.44);
+  --chart-6: oklch(0.69 0.21 25);
+  --chart-7: oklch(0.72 0.15 103.9);
+  --chart-8: oklch(0.72 0.13 256);
+  --tag-blue: oklch(0.72 0.14 256);
+  --tag-blue-subtle: oklch(0.275 0.05 256);
+  --tag-blue-text: oklch(0.75 0.13 256);
+  --tag-cyan: oklch(0.72 0.13 226);
+  --tag-cyan-subtle: oklch(0.275 0.05 226);
+  --tag-cyan-text: oklch(0.75 0.13 226);
+  --tag-green: oklch(0.72 0.15 150);
+  --tag-green-subtle: oklch(0.275 0.05 150);
+  --tag-green-text: oklch(0.75 0.13 150);
+  --tag-lime: oklch(0.72 0.15 117);
+  --tag-lime-subtle: oklch(0.275 0.05 117);
+  --tag-lime-text: oklch(0.75 0.13 117);
+  --tag-yellow: oklch(0.72 0.14 86);
+  --tag-yellow-subtle: oklch(0.275 0.05 86);
+  --tag-yellow-text: oklch(0.75 0.13 86);
+  --tag-orange: oklch(0.72 0.15 52);
+  --tag-orange-subtle: oklch(0.275 0.05 52);
+  --tag-orange-text: oklch(0.75 0.13 52);
+  --tag-red: oklch(0.72 0.15 25);
+  --tag-red-subtle: oklch(0.275 0.05 25);
+  --tag-red-text: oklch(0.75 0.13 25);
+  --tag-pink: oklch(0.72 0.15 356);
+  --tag-pink-subtle: oklch(0.275 0.05 356);
+  --tag-pink-text: oklch(0.75 0.13 356);
+  --tag-magenta: oklch(0.72 0.15 323);
+  --tag-magenta-subtle: oklch(0.275 0.05 323);
+  --tag-magenta-text: oklch(0.75 0.13 323);
+  --tag-purple: oklch(0.72 0.15 295);
+  --tag-purple-subtle: oklch(0.275 0.05 295);
+  --tag-purple-text: oklch(0.75 0.13 295);
+  --sidebar: oklch(0.145 0.003 75);
+  --sidebar-foreground: oklch(0.87 0.003 75);
+  --sidebar-primary: oklch(0.922 0.003 75);
+  --sidebar-primary-foreground: oklch(0.145 0.003 75);
+  --sidebar-accent: oklch(0.205 0.003 75);
+  --sidebar-accent-foreground: oklch(0.922 0.003 75);
+  --sidebar-border: oklch(0.269 0.003 75);
+  --sidebar-ring: oklch(0.922 0.003 75);
+  --brand: oklch(0.86 0.21 148); /** The phosphor-green brand accent, DARK half — MK's pick (13.3:1 on the dark canvas). Marker roles only. */
+  --alpha-soft-hover: 30%; /** Dark half of the theme-split soft-surface hover wash. */
+  --alpha-soft-surface: 20%; /** Dark half of the theme-split soft-surface resting wash. */
+  --shadow-overlay: 0 8px 28px -6px oklch(0 0 0 / 0.48), 0 2px 8px -2px oklch(0 0 0 / 0.4); /** DARK overlay shadow, strengthened (Wave 1 — Attio-calibrated): the old single 24px layer was near-invisible on the dark canvas; this two-layer ramp restores the floating cue while staying below Attio's 88px maximal ramp. */
+  --shadow-lit: inset 0 1px 0 0 oklch(1 0 0 / 0.35), 0 2px 6px -2px oklch(0 0 0 / 0.5);
   --destructive-subtle-hover: oklch(0.34 0.123 26.3); /** DERIVED: destructive fill @30% composited over destructive-subtle (soft-hover surface, AA-gated against destructive-text). */
   --success-subtle-hover: oklch(0.348 0.092 148.9); /** DERIVED: success fill @30% composited over success-subtle (soft-hover surface, AA-gated against success-text). */
   --warning-subtle-hover: oklch(0.356 0.093 46.6); /** DERIVED: warning fill @30% composited over warning-subtle (soft-hover surface, AA-gated against warning-text). */
@@ -261,6 +423,7 @@
   --color-destructive-foreground: var(--destructive-foreground);
   --color-destructive-subtle: var(--destructive-subtle);
   --color-destructive-text: var(--destructive-text);
+  --color-destructive-border: var(--destructive-border);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
   --color-success-subtle: var(--success-subtle);
@@ -286,6 +449,36 @@
   --color-chart-7: var(--chart-7);
   --color-chart-8: var(--chart-8);
   --color-brand: var(--brand);
+  --color-tag-blue: var(--tag-blue);
+  --color-tag-blue-subtle: var(--tag-blue-subtle);
+  --color-tag-blue-text: var(--tag-blue-text);
+  --color-tag-cyan: var(--tag-cyan);
+  --color-tag-cyan-subtle: var(--tag-cyan-subtle);
+  --color-tag-cyan-text: var(--tag-cyan-text);
+  --color-tag-green: var(--tag-green);
+  --color-tag-green-subtle: var(--tag-green-subtle);
+  --color-tag-green-text: var(--tag-green-text);
+  --color-tag-lime: var(--tag-lime);
+  --color-tag-lime-subtle: var(--tag-lime-subtle);
+  --color-tag-lime-text: var(--tag-lime-text);
+  --color-tag-yellow: var(--tag-yellow);
+  --color-tag-yellow-subtle: var(--tag-yellow-subtle);
+  --color-tag-yellow-text: var(--tag-yellow-text);
+  --color-tag-orange: var(--tag-orange);
+  --color-tag-orange-subtle: var(--tag-orange-subtle);
+  --color-tag-orange-text: var(--tag-orange-text);
+  --color-tag-red: var(--tag-red);
+  --color-tag-red-subtle: var(--tag-red-subtle);
+  --color-tag-red-text: var(--tag-red-text);
+  --color-tag-pink: var(--tag-pink);
+  --color-tag-pink-subtle: var(--tag-pink-subtle);
+  --color-tag-pink-text: var(--tag-pink-text);
+  --color-tag-magenta: var(--tag-magenta);
+  --color-tag-magenta-subtle: var(--tag-magenta-subtle);
+  --color-tag-magenta-text: var(--tag-magenta-text);
+  --color-tag-purple: var(--tag-purple);
+  --color-tag-purple-subtle: var(--tag-purple-subtle);
+  --color-tag-purple-text: var(--tag-purple-text);
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -327,6 +520,7 @@
   --radius-md: var(--radius-md);
   --radius-lg: var(--radius-lg);
   --shadow-overlay: var(--shadow-overlay);
+  --blur-glass: var(--effect-blur-glass);
   --text-display-sm: 2rem;
   --text-display-sm--line-height: 2.25rem;
   --text-display-sm--font-weight: 400;
@@ -361,9 +555,15 @@
   --text-label: 0.875rem;
   --text-label--line-height: 1.25rem;
   --text-label--font-weight: 500;
+  --text-label--letter-spacing: -0.01em;
+  --text-strong: 0.875rem;
+  --text-strong--line-height: 1.25rem;
+  --text-strong--font-weight: 600;
+  --text-strong--letter-spacing: -0.01em;
   --text-label-sm: 0.75rem;
   --text-label-sm--line-height: 1rem;
   --text-label-sm--font-weight: 500;
+  --text-label-sm--letter-spacing: -0.01em;
   --text-code: 0.8125rem;
   --text-code--line-height: 1.25rem;
   --text-code--font-weight: 400;