@vegastack/design-tokens 0.7.79 → 0.8.0

package/dist/base.css

@@ -74,7 +74,7 @@
 
      Text entry (FOC-3) — text inputs, textarea, and the bordered field GROUPS that frame one
      (InputGroup, NumberField, ChipInput, the combobox chips, the panel search row) — takes NO fill
-     at all: it is excluded below, and its focus cue is a subtle darker border (`border-ring/40`)
+     at all: it is excluded below, and its focus cue is a subtle darker border (`border-ring/50`)
      that eases in over 150ms, written on the component that draws the border (the group, not the
      control inside it, which has no border and no fill). An invalid field keeps its destructive
      border in every state; focus never replaces it. The one caret-only surface is a contenteditable

package/dist/utilities.css

@@ -768,6 +768,68 @@
   animation: vs-flash var(--duration-slow) var(--motion-ease-standard);
 }
 
+/* ---------------------------------------------------------------------------
+ * motion-stagger — staggered fade+rise for the children of a container
+ * (content replacing a skeleton: rows, cards, a feed).
+ *
+ * Put it on the PARENT; each direct child plays `vs-enter-up` (the same keyframes
+ * and timing as `motion-enter-up`) a step after the one before. The step is a
+ * quarter of `--duration-fast` (~37ms), overridable per call-site with
+ * `[--vs-stagger-step:60ms]`; children past the twelfth share the twelfth's
+ * delay, so a long list never waits more than ~0.4s for its tail. `both` fill
+ * keeps a waiting child hidden until its turn. Remount (a changing `key`) to
+ * replay. Reduced motion: base.css zeroes the delays as well as the durations,
+ * so the content appears at once, in its resting state.
+ * ------------------------------------------------------------------------- */
+@utility motion-stagger {
+  & > * {
+    animation: vs-enter-up var(--duration-fast) var(--motion-ease-standard) both;
+    animation-delay: calc(
+      var(--vs-stagger-step, var(--duration-fast) / 4) * 11
+    );
+  }
+  & > :first-child {
+    animation-delay: 0s;
+  }
+  & > :nth-child(2) {
+    animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 1);
+  }
+  & > :nth-child(3) {
+    animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 2);
+  }
+  & > :nth-child(4) {
+    animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 3);
+  }
+  & > :nth-child(5) {
+    animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 4);
+  }
+  & > :nth-child(6) {
+    animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 5);
+  }
+  & > :nth-child(7) {
+    animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 6);
+  }
+  & > :nth-child(8) {
+    animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 7);
+  }
+  & > :nth-child(9) {
+    animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 8);
+  }
+  & > :nth-child(10) {
+    animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 9);
+  }
+  & > :nth-child(11) {
+    animation-delay: calc(
+      var(--vs-stagger-step, var(--duration-fast) / 4) * 10
+    );
+  }
+  & > :nth-child(12) {
+    animation-delay: calc(
+      var(--vs-stagger-step, var(--duration-fast) / 4) * 11
+    );
+  }
+}
+
 @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
@@ -868,3 +930,89 @@
 .dark [data-brand-artwork="dark"] {
   display: contents;
 }
+
+/* ---------------------------------------------------------------------------
+ * Syntax highlighting — `CodeBlock` and `TextEdit`'s code block.
+ *
+ * lowlight (highlight.js grammars) marks tokens with `.hljs-*` classes; these
+ * map them onto the semantic palette, so code reads in both themes with no
+ * theme of its own: plain ink, keywords in `tag-pink-text`, names in
+ * `info-text`, strings in `brand-text`, numbers and literals in
+ * `tag-orange-text`, attributes and variables in `tag-cyan-text`, types in
+ * `tag-lime-text`, comments muted. Only AA text tokens: each clears 4.5:1 on
+ * full `muted` (the darkest code ground in light, lightest in dark) in both
+ * themes. Every value is a theme-split token, so the dark half follows `.dark`
+ * through the cascade.
+ * Plain selectors (not utilities), for the same reason as the BrandIcon swap
+ * above: a consumer's Tailwind build never scans the component source.
+ * ------------------------------------------------------------------------- */
+.hljs {
+  color: var(--foreground);
+}
+/* 13px code with relaxed leading — below the ramp's `text-sm`, on purpose, as Notion's code. */
+.hljs,
+.hljs code {
+  font-size: 0.8125rem;
+  line-height: 1.625;
+}
+.hljs-comment,
+.hljs-quote {
+  color: var(--muted-foreground);
+  font-style: italic;
+}
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-doctag,
+.hljs-meta .hljs-keyword,
+.hljs-name {
+  color: var(--tag-pink-text);
+}
+.hljs-title,
+.hljs-title.function_,
+.hljs-title.class_,
+.hljs-section,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: var(--info-text);
+}
+.hljs-string,
+.hljs-regexp,
+.hljs-char.escape_,
+.hljs-meta .hljs-string {
+  color: var(--brand-text);
+}
+.hljs-number,
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-link {
+  color: var(--tag-orange-text);
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-property,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-params,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: var(--tag-cyan-text);
+}
+.hljs-type,
+.hljs-title.class_.inherited__,
+.hljs-meta {
+  color: var(--tag-lime-text);
+}
+.hljs-addition {
+  color: var(--success-text);
+}
+.hljs-deletion {
+  color: var(--destructive-text);
+}
+.hljs-emphasis {
+  font-style: italic;
+}
+.hljs-strong {
+  font-weight: 600;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegastack/design-tokens",
-  "version": "0.7.79",
+  "version": "0.8.0",
   "description": "VegaStack design tokens (DTCG → Tailwind v4 theme + TS)",
   "license": "MIT",
   "repository": {