@vegastack/design-tokens 0.2.0 → 0.5.0

package/dist/utilities.css

@@ -19,6 +19,91 @@
  * priority-flag ban, which this file does not trip.
  */
 
+/* ---------------------------------------------------------------------------------------------
+ * Upstream's CUSTOM VARIANTS, verbatim from `shadcn/tailwind.css` (4.21.0).
+ *
+ * Upstream's own app imports `shadcn/tailwind.css`, which redefines nine `data-*` variants so they
+ * match the attribute shape Base UI actually emits. Without them Tailwind falls back to its default
+ * `data-<name>:` rule — a bare `[data-<name>]` attribute — and the ones keyed on `data-orientation`
+ * or `data-state` silently stop matching. Measured 2026-09-18 in the Batch 2 review artifact:
+ * `<ToggleGroup orientation="vertical">` laid out HORIZONTALLY here and vertically upstream, from
+ * the same source file, because `data-vertical:flex-col` compiled to `[data-vertical]` instead of
+ * `[data-orientation="vertical"]`. `Separator`'s vertical rule failed the same way.
+ *
+ * Shipping them here rather than per app is what keeps a copied-in component behaving the same in
+ * a consumer's project as it does in ours.
+ * ------------------------------------------------------------------------------------------- */
+
+@custom-variant data-open {
+  &:where([data-state="open"]),
+  &:where([data-open]:not([data-open="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-closed {
+  &:where([data-state="closed"]),
+  &:where([data-closed]:not([data-closed="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-checked {
+  &:where([data-state="checked"]),
+  &:where([data-checked]:not([data-checked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-unchecked {
+  &:where([data-state="unchecked"]),
+  &:where([data-unchecked]:not([data-unchecked="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-selected {
+  &:where([data-selected="true"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-disabled {
+  &:where([data-disabled="true"]),
+  &:where([data-disabled]:not([data-disabled="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-active {
+  &:where([data-state="active"]),
+  &:where([data-active]:not([data-active="false"])) {
+    @slot;
+  }
+}
+
+@custom-variant data-horizontal {
+  &:where([data-orientation="horizontal"]) {
+    @slot;
+  }
+}
+
+@custom-variant data-vertical {
+  &:where([data-orientation="vertical"]) {
+    @slot;
+  }
+}
+
+/* Upstream's one scrollbar utility, which `sidebar` and `command` reach for. */
+@utility no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
 /* scroll-fade */
 @property --scroll-fade-t {
   syntax: "<length-percentage>";
@@ -601,6 +686,13 @@
  *   - motion-shake      : horizontal error jiggle. Replayable: re-trigger by
  *                         remounting (key bump) or toggling the class after
  *                         `animationend`.
+ *   - motion-indeterminate : the ONE sanctioned looping utility — the sweeping
+ *                         segment of an indeterminate Progress. Looping motion is
+ *                         otherwise banned; an indeterminate bar has no other way
+ *                         to say "still working" (audit M-06).
+ *
+ * `motion-dock-in` / `motion-dock-out` below are the one PAIR in this family and
+ * the one that is not keyed presence — see their own header.
  * ------------------------------------------------------------------------- */
 @keyframes vs-pop-in {
   from {
@@ -676,6 +768,79 @@
   animation: vs-flash var(--duration-slow) var(--motion-ease-standard);
 }
 
+@keyframes vs-indeterminate {
+  /* Indeterminate progress (audit M-06, 2026-09-07): a 35%-wide segment sweeps the
+   * track and returns. The 0% and 100% stops are IDENTICAL on purpose — the global
+   * prefers-reduced-motion reset in base.css collapses every animation to its `to`
+   * state, so a reduced-motion user sees a static 35% segment resting at the start
+   * of the track instead of a bar that reads as 100% complete. */
+  0% {
+    inset-inline-start: 0%;
+  }
+  50% {
+    inset-inline-start: 65%;
+  }
+  100% {
+    inset-inline-start: 0%;
+  }
+}
+
+@utility motion-indeterminate {
+  animation: vs-indeterminate var(--duration-indeterminate)
+    var(--motion-ease-standard) infinite;
+}
+
+/* ---------------------------------------------------------------------------
+ * motion-dock-in / motion-dock-out — the docked-control enter/exit pair
+ * (audit D11 amendment #7, 2026-09-07).
+ *
+ * A docked control — a bottom action bar, a floating scroll-to-end button —
+ * stays MOUNTED and flips a `data-active` attribute, so its motion is a
+ * transition, not a keyed animation. That is why this is a pair rather than one
+ * `@utility`: the two states carry different timing, which is the whole point.
+ *
+ * The doctrine these encode: **an exit is never slower than its enter.** Both
+ * bars previously entered at `duration-base` and left at `duration-slow` with a
+ * `scale-95`, so dismissing one took half again as long as summoning it and the
+ * bar shrank as it went. Vercel, Linear and Base UI's own defaults all leave at
+ * or faster than they arrive. Enter is 150ms `emphasized`; exit is 100ms `exit`;
+ * a docked bar translates and fades and does not scale — scale reads as a popup,
+ * and a bar sliding off its own edge does not need it.
+ *
+ * 100ms has exactly one role in the system — this exit — so it lives here, in
+ * the utility that names it, rather than becoming a fifth global duration token
+ * that would invite reuse D11 did not sanction.
+ *
+ * These own the timing, the fade and the inert-while-hidden guard. The DISTANCE
+ * stays at the call site as ordinary `translate-*` utilities, because it is
+ * per-dock geometry (a bottom bar clears its own height plus the safe-area
+ * inset; an edge button clears 100%) and because Tailwind composes `translate-x`
+ * and `translate-y` through custom properties that a `translate:` declaration
+ * here would clobber — a horizontally-centred bar would lose its centring.
+ *
+ * The global prefers-reduced-motion reset in base.css collapses both to 0.01ms.
+ *
+ *   <div data-active={open}
+ *        className="data-[active=true]:motion-dock-in  data-[active=true]:translate-y-0
+ *                   data-[active=false]:motion-dock-out data-[active=false]:translate-y-full" />
+ * ------------------------------------------------------------------------- */
+@utility motion-dock-in {
+  transition-property: translate, opacity;
+  transition-duration: var(--duration-fast);
+  transition-timing-function: var(--motion-ease-emphasized);
+  opacity: 1;
+}
+
+@utility motion-dock-out {
+  transition-property: translate, opacity;
+  transition-duration: 100ms;
+  transition-timing-function: var(--motion-ease-exit);
+  opacity: 0;
+  /* A docked-out control is off-screen: it must not swallow clicks on the way
+     out, and it must not be a hit target while parked. */
+  pointer-events: none;
+}
+
 /* ---------------------------------------------------------------------------
  * BrandIcon theme-aware artwork swap (`<BrandIcon variant="auto">`).
  *
@@ -690,9 +855,6 @@
  * silently never be generated downstream (it wasn't generated in our own docs
  * either — see the dead `packages/icons` @source). Shipping the rules in the
  * stylesheet consumers already import makes the swap work everywhere.
- *
- * `.vs-marketing` is included so a brand mark inside the marketing dark ground
- * picks the dark artwork even while the page theme is light.
  * ------------------------------------------------------------------------- */
 [data-brand-artwork="light"] {
   display: contents;
@@ -700,17 +862,9 @@
 [data-brand-artwork="dark"] {
   display: none;
 }
-.dark [data-brand-artwork="light"],
-.vs-marketing [data-brand-artwork="light"] {
+.dark [data-brand-artwork="light"] {
   display: none;
 }
-.dark [data-brand-artwork="dark"],
-.vs-marketing [data-brand-artwork="dark"] {
+.dark [data-brand-artwork="dark"] {
   display: contents;
 }
-
-/* `.vs-marketing`'s semantic variables and `color-scheme: dark` now live in
- * generated theme.css. build-tokens.mjs emits the scope from the SAME resolved
- * Style Dictionary dark run as `.dark`, and verify-theme-parity.mjs rejects any
- * variable-set or value drift. The artwork selectors above remain here because
- * they are presentation behavior, not token data. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegastack/design-tokens",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "description": "VegaStack design tokens (DTCG → Tailwind v4 theme + TS)",
   "license": "MIT",
   "repository": {
@@ -31,17 +31,17 @@
     "./tokens.json": "./dist/tokens.json",
     "./package.json": "./package.json"
   },
-  "devDependencies": {
-    "style-dictionary": "5.5.0",
-    "typescript": "^6.0.3",
-    "@vegastack/typescript-config": "0.0.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
     "build": "node build-tokens.mjs && node ../../tooling/contrast-check.mjs dist/theme.css && tsup src/tokens.ts --format esm,cjs --dts --out-dir dist",
     "lint": "node ../../tooling/verify-theme-parity.mjs dist/theme.css && node ../../tooling/contrast-check.mjs dist/theme.css && node ../../tooling/design-lint.mjs --token-css src",
     "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@vegastack/typescript-config": "workspace:*",
+    "style-dictionary": "5.5.2",
+    "typescript": "catalog:"
+  },
+  "publishConfig": {
+    "access": "public"
   }
-}
+}