@vegastack/design-tokens 0.4.0 → 0.7.0

package/dist/base.css

@@ -1,27 +1,84 @@
-/* @vegastack/design-tokens/base.css — opt-in base reset (kept separate so consumers aren't forced into it). */
+/* @vegastack/design-tokens/base.css — the opt-in base layer (kept separate so consumers aren't
+   forced into it).
+
+   REBUILT BY THE SHADCN RESET (Batch 1, 2026-09-18). This file is now upstream's own base layer
+   plus exactly the decisions `docs/plans/2026-09-18-shadcn-reset/decisions.md` marks **ours**:
+
+     FOC-1   one global :focus-visible outline; components restate nothing
+     FOC-7   the forced-colours fallback for text entry
+     MOT-5   the reduced-motion reset (and the one sanctioned !important)
+     INT-1   the hand cursor, on a wider selector list than shadcn's --pointer rule
+     INT-7   touch-action: manipulation and no tap highlight
+     OVL-13  body { isolation: isolate } for the portal theme scope
+
+   Deleted with the reset: INT-2's `cursor: default` on disabled controls (INT-2 = shadcn, and
+   upstream has no such rule).
+
+   `color-scheme` (COL-22) is not here — it is emitted per theme into `:root` and `.dark` by the
+   token build, because it has to travel with the palette it describes. */
+
 @layer base {
+  /* Upstream's own base layer, with one change. Upstream writes
+     `* { @apply border-border outline-ring/50 }`; the `outline-ring/50` half is a 50%-opacity
+     outline COLOUR on every element, which exists only to soften the focus glow this system
+     removes. FOC-1 below owns focus outright and paints the ring solid, so the `/50` is dropped —
+     keeping it would mean two rules describing the same affordance at two different opacities. */
   * {
-    @apply border-border outline-ring/(--alpha-outline-soft);
+    @apply border-border;
   }
   body {
-    /* `isolate` creates a root stacking context so Base UI portaled popups (Dialog, Popover,
-       Tooltip, Select, menus, Sheet) reliably stack above page content — required by Base UI's
-       Quick Start ("Set up portals"). Consumers importing base.css get this for free; if you don't
-       import base.css, add `isolation: isolate` to your app root yourself. */
+    /* `isolate` (OVL-13) creates a root stacking context so Base UI portaled popups (Dialog,
+       Popover, Tooltip, Select, menus, Sheet) reliably stack above page content — required by Base
+       UI's Quick Start ("Set up portals"). Consumers importing base.css get this for free; if you
+       don't import base.css, add `isolation: isolate` to your app root yourself. */
     @apply bg-background text-foreground isolate;
+
+    /* TYP-17 (ours) — THE DECLARED DEFAULT BODY SIZE, 14px.
+       The component layer is 14px (`text-sm`, the dominant size by a wide margin), but nothing
+       used to declare a page default, so any text WITHOUT an explicit `text-*` class fell back to
+       the browser's 16px and a page mixed two sizes. 14px is the product-UI default Vercel's own
+       Geist copy scale is built around.
+
+       THIS IS DELIBERATELY ON `body`, NEVER ON `html`. `rem` resolves against the ROOT element, so
+       `html { font-size: 14px }` would silently rescale the entire system — `text-sm` (0.875rem)
+       would become 12.25px and every rem-based spacing token would shrink with it — and it would
+       override the reader's own browser font-size preference, which is a WCAG 1.4.4 failure. On
+       `body` the root stays 16px, every explicit `text-*` class is untouched, and only unclassed
+       text moves. */
+    font-size: var(--text-sm, 0.875rem);
+
+    /* TYP-16 (ours) — Geist is drawn for smoothed rendering. Without this the same weight renders
+       heavier and softer on macOS than the identical weight on Vercel's own site, which is a large
+       part of why the weight ladder read as "off" before the ramp existed. Upstream sets neither
+       property; Tailwind's preflight already handles `-webkit-text-size-adjust` and `tab-size`, so
+       those are not restated here. */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  html {
+    @apply font-sans;
   }
-  /* a11y: real focus ring (fixes the platform's outline:none defect — requirements §7.5).
-     2px solid neutral outline, offset 1 (hugs the control — reads as a crisp border, not a halo).
-     Single source of truth: components carry NO focus ring of their own; this re-skins from `ring`. */
+
+  /* FOC-1 — the SINGLE focus affordance in the system. 2px solid, offset 1, in `ring`, which
+     FOC-2 binds to the near-black / near-white ink rather than shadcn's mid-grey. Components carry
+     no focus ring of their own: upstream's `focus-visible:ring-3 focus-visible:ring-ring/50` glow
+     is stripped from every migrated component (FOC-6), and `design-lint`'s `no-focus-ring-glow`
+     rule is what stops it coming back through a later upstream pull. */
   :focus-visible {
     @apply outline-2 outline-offset-1 outline-ring;
   }
-  /* Pointer cursor on every interactive control. Tailwind v4 Preflight no longer sets it and the
-     native <button> cursor is an arrow, so without this every button / icon-button / menu item /
-     select option / tab / toggle would miss the hand cursor. This is the SINGLE global source of
-     truth — components must NOT re-declare `cursor-pointer` locally; only genuinely non-standard
-     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. */
+
+  /* INT-1 — the hand cursor. shadcn's `--pointer` flag writes
+     `button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer }`; ours is the same
+     rule over the full set of things a person clicks, so a menu row, a tab, a switch and a listbox
+     option all read as clickable. This is the SINGLE global source of truth — components must NOT
+     re-declare `cursor-pointer` locally; only genuinely non-standard 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.
+
+     INT-7 rides on the same selector list: keep touch controls responsive without disabling page
+     pan or pinch-zoom, and suppress the grey Android tap flash. Text-entry fields and document
+     links stay untouched. */
   button,
   [role="button"],
   [role="tab"],
@@ -34,34 +91,24 @@
   [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"],
-  [data-disabled] {
-    cursor: default;
-  }
 }
 
-/* Preserve the focus contract when authored colors are replaced by a forced-colors palette. */
+/* FOC-7 — preserve the focus contract when authored colours are replaced by a forced-colours
+   palette. */
 @media (forced-colors: active) {
   :focus-visible {
     outline-color: Highlight;
   }
 
-  /* Text-entry focus (B1-01, 2026-09-07). Every text-entry control signals focus with the
-     border TINT (`focus:border-ring/(--alpha-tint-border)`) and strips the outline
-     (`outline-none`), because a raw text field cannot tell mouse from keyboard. Forced colours
-     replaces `border-color` outright, so the tint vanishes and `outline-style: none` stays in
-     force — a Windows High Contrast user had no caret location at all. This block is UNLAYERED
-     on purpose: it beats the component's `outline-none` (a layered utility) regardless of
-     specificity, so the fallback is written ONCE here, never per component.
+  /* Text-entry focus (FOC-3). Every text-entry control signals focus with a border TINT and strips
+     the outline, because a raw text field cannot tell mouse from keyboard. Forced colours replaces
+     `border-color` outright, so the tint vanishes and `outline-style: none` stays in force — a
+     Windows High Contrast user had no caret location at all. This block is UNLAYERED on purpose:
+     it beats the component's `outline-none` (a layered utility) regardless of specificity, so the
+     fallback is written ONCE here, never per component.
      - `input`/`textarea` at `:focus` (not `:focus-visible`, matching the tint's trigger);
      - composite editors (TextEdit's contenteditable) at `:focus`;
      - wrapper-tinted surfaces (`data-slot="text-edit"`, and every `data-field-group`) at
@@ -75,14 +122,13 @@
     outline-offset: 1px;
   }
 
-  /* …and only ONE of them paints (Fo1, 2026-09-07). A bordered field GROUP — Input's prefix/suffix
-     wrapper, NumberField's stepper group, ChipInput, the Combobox input-group — clips with
-     `overflow-hidden` so its addons follow the rounded corner. The inner input's own outline is
-     offset outward INTO that clip, so it was drawn and then cut, which is how an addon field ended
-     up with no visible focus at all under the forced palette. The group carries the outline (it is
-     the element whose border the tint would have moved); the control inside it stands down, so the
-     two never paint a double ring. `data-field-group` is set by every consumer of
-     `fieldControlGroup` in `@vegastack/design` — the attribute IS the contract. */
+  /* …and only ONE of them paints. A bordered field GROUP — Input's prefix/suffix wrapper,
+     NumberField's stepper group, ChipInput, the Combobox input-group — clips with `overflow-hidden`
+     so its addons follow the rounded corner. The inner input's own outline is offset outward INTO
+     that clip, so it was drawn and then cut, which is how an addon field ended up with no visible
+     focus at all under the forced palette. The group carries the outline (it is the element whose
+     border the tint would have moved); the control inside it stands down, so the two never paint a
+     double ring. */
   [data-field-group] input:focus,
   [data-field-group] textarea:focus {
     outline: none;
@@ -90,15 +136,13 @@
 }
 
 /* ───────────────────────────────────────────────────────────────────────────────────────────────
- * 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
- * over component-authored durations; `!important` is the standard, intentional mechanism for this
- * reset (it has to win against any animated rule, including ones defined later or with higher
- * specificity). This is the SOLE place `!important` is permitted in shipped VegaStack CSS — the
- * design-audit contract bans `!important` everywhere else, and `design-lint` (token-css mode)
- * FAILS on any `!important` that is NOT inside this `prefers-reduced-motion: reduce` block. Do not
- * add `!important` to win a specificity fight elsewhere; restructure the selector or token instead.
- * (requirements §7.5 / skills/design-audit.)
+ * MOT-5 — THE ONE SANCTIONED `!important` EXCEPTION (WCAG 2.1 reduced-motion override).
+ * Users who set `prefers-reduced-motion: reduce` MUST have animations and transitions neutralised
+ * even over component-authored durations; `!important` is the standard, intentional mechanism for
+ * this reset (it has to win against any animated rule, including ones defined later or with higher
+ * specificity). This is the SOLE place `!important` is permitted in shipped VegaStack CSS, and
+ * `design-lint --token-css` FAILS on any `!important` outside this block. Do not add `!important`
+ * to win a specificity fight elsewhere; restructure the selector or token instead.
  * ──────────────────────────────────────────────────────────────────────────────────────────────*/
 @media (prefers-reduced-motion: reduce) {
   *,
@@ -106,22 +150,19 @@
   ::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
-    /* A zeroed DURATION alone is not enough: a staggered entrance schedules its
-     * per-item `animation-delay` in real time, so the items would still appear
-     * one after another (each instantly) over the full stagger window. Zeroing
-     * the delay too is what makes "reduced motion" a static end state — and it
-     * is why no component needs its own `motion-reduce:` restatement (audit
-     * batch Di1 / B2-06). */
+    /* A zeroed DURATION alone is not enough: a staggered entrance schedules its per-item
+     * `animation-delay` in real time, so the items would still appear one after another (each
+     * instantly) over the full stagger window. Zeroing the delay too is what makes "reduced motion"
+     * a static end state — and it is why no component needs its own `motion-reduce:` restatement. */
     animation-delay: 0s !important;
     transition-duration: 0.01ms !important;
     transition-delay: 0s !important;
     scroll-behavior: auto !important;
   }
 
-  /* View Transitions (Phase S): the universal selector above never reaches the
-   * ::view-transition-* pseudo-element tree (it lives on the root's snapshot layer,
-   * outside normal element matching), so route-change cross-fades/morphs need their
-   * own reduced-motion kill switch. */
+  /* View Transitions: the universal selector above never reaches the ::view-transition-* pseudo
+   * element tree (it lives on the root's snapshot layer, outside normal element matching), so
+   * route-change cross-fades and morphs need their own reduced-motion kill switch. */
   ::view-transition-group(*),
   ::view-transition-old(*),
   ::view-transition-new(*) {