@vegastack/design-tokens 0.4.0 → 0.7.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>";
@@ -770,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;
@@ -780,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.4.0",
+  "version": "0.7.0",
   "description": "VegaStack design tokens (DTCG → Tailwind v4 theme + TS)",
   "license": "MIT",
   "repository": {