@vegastack/design-tokens 0.1.0 → 0.2.0

package/dist/tokens.d.ts

@@ -22,6 +22,7 @@ declare const tokens: {
         readonly "destructive-foreground": "oklch(0.985 0.003 75)";
         readonly "destructive-subtle": "oklch(0.949 0.022 24)";
         readonly "destructive-text": "oklch(0.521 0.2 25)";
+        readonly "destructive-border": "oklch(0.505 0.213 27.52)";
         readonly success: "oklch(0.5 0.16 150)";
         readonly "success-foreground": "oklch(0.985 0.003 75)";
         readonly "success-subtle": "oklch(0.951 0.051 150)";
@@ -47,6 +48,36 @@ declare const tokens: {
         readonly "chart-7": "oklch(0.6 0.127 104.2)";
         readonly "chart-8": "oklch(0.531 0.182 256)";
         readonly brand: "oklch(0.6 0.17 148)";
+        readonly "tag-blue": "oklch(0.6 0.16 256)";
+        readonly "tag-blue-subtle": "oklch(0.955 0.02 256)";
+        readonly "tag-blue-text": "oklch(0.51 0.15 256)";
+        readonly "tag-cyan": "oklch(0.6 0.11 226)";
+        readonly "tag-cyan-subtle": "oklch(0.955 0.028 226)";
+        readonly "tag-cyan-text": "oklch(0.51 0.09 226)";
+        readonly "tag-green": "oklch(0.6 0.16 150)";
+        readonly "tag-green-subtle": "oklch(0.955 0.028 150)";
+        readonly "tag-green-text": "oklch(0.51 0.14 150)";
+        readonly "tag-lime": "oklch(0.6 0.13 117)";
+        readonly "tag-lime-subtle": "oklch(0.955 0.028 117)";
+        readonly "tag-lime-text": "oklch(0.51 0.11 117)";
+        readonly "tag-yellow": "oklch(0.6 0.12 86)";
+        readonly "tag-yellow-subtle": "oklch(0.955 0.028 86)";
+        readonly "tag-yellow-text": "oklch(0.51 0.1 86)";
+        readonly "tag-orange": "oklch(0.6 0.15 52)";
+        readonly "tag-orange-subtle": "oklch(0.955 0.02 52)";
+        readonly "tag-orange-text": "oklch(0.51 0.13 52)";
+        readonly "tag-red": "oklch(0.6 0.16 25)";
+        readonly "tag-red-subtle": "oklch(0.955 0.02 25)";
+        readonly "tag-red-text": "oklch(0.51 0.15 25)";
+        readonly "tag-pink": "oklch(0.6 0.16 356)";
+        readonly "tag-pink-subtle": "oklch(0.955 0.02 356)";
+        readonly "tag-pink-text": "oklch(0.51 0.15 356)";
+        readonly "tag-magenta": "oklch(0.6 0.16 323)";
+        readonly "tag-magenta-subtle": "oklch(0.955 0.028 323)";
+        readonly "tag-magenta-text": "oklch(0.51 0.15 323)";
+        readonly "tag-purple": "oklch(0.6 0.16 295)";
+        readonly "tag-purple-subtle": "oklch(0.955 0.02 295)";
+        readonly "tag-purple-text": "oklch(0.51 0.15 295)";
         readonly sidebar: "oklch(0.985 0.003 75)";
         readonly "sidebar-foreground": "oklch(0.269 0.003 75)";
         readonly "sidebar-primary": "oklch(0.145 0.003 75)";
@@ -73,6 +104,8 @@ declare const tokens: {
         readonly "sidebar-width": "15rem";
         readonly "sidebar-width-icon": "3rem";
         readonly "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)";
+        readonly "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)";
+        readonly "effect-blur-glass": "8px";
         readonly "z-raised": 10;
         readonly "z-overlay": 50;
         readonly "opacity-dim": "50%";
@@ -208,13 +241,19 @@ declare const tokens: {
             readonly fontSize: "0.875rem";
             readonly lineHeight: "1.25rem";
             readonly fontWeight: "500";
-            readonly letterSpacing: "0em";
+            readonly letterSpacing: "-0.01em";
+        };
+        readonly "text-strong": {
+            readonly fontSize: "0.875rem";
+            readonly lineHeight: "1.25rem";
+            readonly fontWeight: "600";
+            readonly letterSpacing: "-0.01em";
         };
         readonly "text-label-sm": {
             readonly fontSize: "0.75rem";
             readonly lineHeight: "1rem";
             readonly fontWeight: "500";
-            readonly letterSpacing: "0em";
+            readonly letterSpacing: "-0.01em";
         };
         readonly "text-code": {
             readonly fontSize: "0.8125rem";
@@ -283,6 +322,7 @@ declare const tokens: {
         readonly "destructive-foreground": "oklch(0.985 0.003 75)";
         readonly "destructive-subtle": "oklch(0.275 0.07 25)";
         readonly "destructive-text": "oklch(0.72 0.16 25)";
+        readonly "destructive-border": "oklch(0.72 0.16 25)";
         readonly success: "oklch(0.5 0.16 150)";
         readonly "success-foreground": "oklch(0.985 0.003 75)";
         readonly "success-subtle": "oklch(0.276 0.061 150)";
@@ -308,6 +348,36 @@ declare const tokens: {
         readonly "chart-7": "oklch(0.72 0.15 103.9)";
         readonly "chart-8": "oklch(0.72 0.13 256)";
         readonly brand: "oklch(0.86 0.21 148)";
+        readonly "tag-blue": "oklch(0.72 0.14 256)";
+        readonly "tag-blue-subtle": "oklch(0.275 0.05 256)";
+        readonly "tag-blue-text": "oklch(0.75 0.13 256)";
+        readonly "tag-cyan": "oklch(0.72 0.13 226)";
+        readonly "tag-cyan-subtle": "oklch(0.275 0.05 226)";
+        readonly "tag-cyan-text": "oklch(0.75 0.13 226)";
+        readonly "tag-green": "oklch(0.72 0.15 150)";
+        readonly "tag-green-subtle": "oklch(0.275 0.05 150)";
+        readonly "tag-green-text": "oklch(0.75 0.13 150)";
+        readonly "tag-lime": "oklch(0.72 0.15 117)";
+        readonly "tag-lime-subtle": "oklch(0.275 0.05 117)";
+        readonly "tag-lime-text": "oklch(0.75 0.13 117)";
+        readonly "tag-yellow": "oklch(0.72 0.14 86)";
+        readonly "tag-yellow-subtle": "oklch(0.275 0.05 86)";
+        readonly "tag-yellow-text": "oklch(0.75 0.13 86)";
+        readonly "tag-orange": "oklch(0.72 0.15 52)";
+        readonly "tag-orange-subtle": "oklch(0.275 0.05 52)";
+        readonly "tag-orange-text": "oklch(0.75 0.13 52)";
+        readonly "tag-red": "oklch(0.72 0.15 25)";
+        readonly "tag-red-subtle": "oklch(0.275 0.05 25)";
+        readonly "tag-red-text": "oklch(0.75 0.13 25)";
+        readonly "tag-pink": "oklch(0.72 0.15 356)";
+        readonly "tag-pink-subtle": "oklch(0.275 0.05 356)";
+        readonly "tag-pink-text": "oklch(0.75 0.13 356)";
+        readonly "tag-magenta": "oklch(0.72 0.15 323)";
+        readonly "tag-magenta-subtle": "oklch(0.275 0.05 323)";
+        readonly "tag-magenta-text": "oklch(0.75 0.13 323)";
+        readonly "tag-purple": "oklch(0.72 0.15 295)";
+        readonly "tag-purple-subtle": "oklch(0.275 0.05 295)";
+        readonly "tag-purple-text": "oklch(0.75 0.13 295)";
         readonly sidebar: "oklch(0.145 0.003 75)";
         readonly "sidebar-foreground": "oklch(0.87 0.003 75)";
         readonly "sidebar-primary": "oklch(0.922 0.003 75)";
@@ -333,7 +403,9 @@ declare const tokens: {
         readonly "icon-feature": "1.5rem";
         readonly "sidebar-width": "15rem";
         readonly "sidebar-width-icon": "3rem";
-        readonly "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)";
+        readonly "shadow-overlay": "0 8px 28px -6px oklch(0 0 0 / 0.48), 0 2px 8px -2px oklch(0 0 0 / 0.4)";
+        readonly "shadow-lit": "inset 0 1px 0 0 oklch(1 0 0 / 0.35), 0 2px 6px -2px oklch(0 0 0 / 0.5)";
+        readonly "effect-blur-glass": "8px";
         readonly "z-raised": 10;
         readonly "z-overlay": 50;
         readonly "opacity-dim": "50%";
@@ -469,13 +541,19 @@ declare const tokens: {
             readonly fontSize: "0.875rem";
             readonly lineHeight: "1.25rem";
             readonly fontWeight: "500";
-            readonly letterSpacing: "0em";
+            readonly letterSpacing: "-0.01em";
+        };
+        readonly "text-strong": {
+            readonly fontSize: "0.875rem";
+            readonly lineHeight: "1.25rem";
+            readonly fontWeight: "600";
+            readonly letterSpacing: "-0.01em";
         };
         readonly "text-label-sm": {
             readonly fontSize: "0.75rem";
             readonly lineHeight: "1rem";
             readonly fontWeight: "500";
-            readonly letterSpacing: "0em";
+            readonly letterSpacing: "-0.01em";
         };
         readonly "text-code": {
             readonly fontSize: "0.8125rem";

package/dist/tokens.js

@@ -23,6 +23,7 @@ var tokens = {
     "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)",
     "success": "oklch(0.5 0.16 150)",
     "success-foreground": "oklch(0.985 0.003 75)",
     "success-subtle": "oklch(0.951 0.051 150)",
@@ -48,6 +49,36 @@ var tokens = {
     "chart-7": "oklch(0.6 0.127 104.2)",
     "chart-8": "oklch(0.531 0.182 256)",
     "brand": "oklch(0.6 0.17 148)",
+    "tag-blue": "oklch(0.6 0.16 256)",
+    "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)",
@@ -74,6 +105,8 @@ var tokens = {
     "sidebar-width": "15rem",
     "sidebar-width-icon": "3rem",
     "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)",
+    "effect-blur-glass": "8px",
     "z-raised": 10,
     "z-overlay": 50,
     "opacity-dim": "50%",
@@ -209,13 +242,19 @@ var tokens = {
       "fontSize": "0.875rem",
       "lineHeight": "1.25rem",
       "fontWeight": "500",
-      "letterSpacing": "0em"
+      "letterSpacing": "-0.01em"
+    },
+    "text-strong": {
+      "fontSize": "0.875rem",
+      "lineHeight": "1.25rem",
+      "fontWeight": "600",
+      "letterSpacing": "-0.01em"
     },
     "text-label-sm": {
       "fontSize": "0.75rem",
       "lineHeight": "1rem",
       "fontWeight": "500",
-      "letterSpacing": "0em"
+      "letterSpacing": "-0.01em"
     },
     "text-code": {
       "fontSize": "0.8125rem",
@@ -284,6 +323,7 @@ var tokens = {
     "destructive-foreground": "oklch(0.985 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)",
     "success": "oklch(0.5 0.16 150)",
     "success-foreground": "oklch(0.985 0.003 75)",
     "success-subtle": "oklch(0.276 0.061 150)",
@@ -309,6 +349,36 @@ var tokens = {
     "chart-7": "oklch(0.72 0.15 103.9)",
     "chart-8": "oklch(0.72 0.13 256)",
     "brand": "oklch(0.86 0.21 148)",
+    "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)",
@@ -334,7 +404,9 @@ var tokens = {
     "icon-feature": "1.5rem",
     "sidebar-width": "15rem",
     "sidebar-width-icon": "3rem",
-    "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-overlay": "0 8px 28px -6px oklch(0 0 0 / 0.48), 0 2px 8px -2px oklch(0 0 0 / 0.4)",
+    "shadow-lit": "inset 0 1px 0 0 oklch(1 0 0 / 0.35), 0 2px 6px -2px oklch(0 0 0 / 0.5)",
+    "effect-blur-glass": "8px",
     "z-raised": 10,
     "z-overlay": 50,
     "opacity-dim": "50%",
@@ -470,13 +542,19 @@ var tokens = {
       "fontSize": "0.875rem",
       "lineHeight": "1.25rem",
       "fontWeight": "500",
-      "letterSpacing": "0em"
+      "letterSpacing": "-0.01em"
+    },
+    "text-strong": {
+      "fontSize": "0.875rem",
+      "lineHeight": "1.25rem",
+      "fontWeight": "600",
+      "letterSpacing": "-0.01em"
     },
     "text-label-sm": {
       "fontSize": "0.75rem",
       "lineHeight": "1rem",
       "fontWeight": "500",
-      "letterSpacing": "0em"
+      "letterSpacing": "-0.01em"
     },
     "text-code": {
       "fontSize": "0.8125rem",

package/dist/tokens.json

@@ -22,6 +22,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)",
     "success": "oklch(0.5 0.16 150)",
     "success-foreground": "oklch(0.985 0.003 75)",
     "success-subtle": "oklch(0.951 0.051 150)",
@@ -47,6 +48,36 @@
     "chart-7": "oklch(0.6 0.127 104.2)",
     "chart-8": "oklch(0.531 0.182 256)",
     "brand": "oklch(0.6 0.17 148)",
+    "tag-blue": "oklch(0.6 0.16 256)",
+    "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)",
@@ -73,6 +104,8 @@
     "sidebar-width": "15rem",
     "sidebar-width-icon": "3rem",
     "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)",
+    "effect-blur-glass": "8px",
     "z-raised": 10,
     "z-overlay": 50,
     "opacity-dim": "50%",
@@ -208,13 +241,19 @@
       "fontSize": "0.875rem",
       "lineHeight": "1.25rem",
       "fontWeight": "500",
-      "letterSpacing": "0em"
+      "letterSpacing": "-0.01em"
+    },
+    "text-strong": {
+      "fontSize": "0.875rem",
+      "lineHeight": "1.25rem",
+      "fontWeight": "600",
+      "letterSpacing": "-0.01em"
     },
     "text-label-sm": {
       "fontSize": "0.75rem",
       "lineHeight": "1rem",
       "fontWeight": "500",
-      "letterSpacing": "0em"
+      "letterSpacing": "-0.01em"
     },
     "text-code": {
       "fontSize": "0.8125rem",
@@ -283,6 +322,7 @@
     "destructive-foreground": "oklch(0.985 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)",
     "success": "oklch(0.5 0.16 150)",
     "success-foreground": "oklch(0.985 0.003 75)",
     "success-subtle": "oklch(0.276 0.061 150)",
@@ -308,6 +348,36 @@
     "chart-7": "oklch(0.72 0.15 103.9)",
     "chart-8": "oklch(0.72 0.13 256)",
     "brand": "oklch(0.86 0.21 148)",
+    "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)",
@@ -333,7 +403,9 @@
     "icon-feature": "1.5rem",
     "sidebar-width": "15rem",
     "sidebar-width-icon": "3rem",
-    "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-overlay": "0 8px 28px -6px oklch(0 0 0 / 0.48), 0 2px 8px -2px oklch(0 0 0 / 0.4)",
+    "shadow-lit": "inset 0 1px 0 0 oklch(1 0 0 / 0.35), 0 2px 6px -2px oklch(0 0 0 / 0.5)",
+    "effect-blur-glass": "8px",
     "z-raised": 10,
     "z-overlay": 50,
     "opacity-dim": "50%",
@@ -469,13 +541,19 @@
       "fontSize": "0.875rem",
       "lineHeight": "1.25rem",
       "fontWeight": "500",
-      "letterSpacing": "0em"
+      "letterSpacing": "-0.01em"
+    },
+    "text-strong": {
+      "fontSize": "0.875rem",
+      "lineHeight": "1.25rem",
+      "fontWeight": "600",
+      "letterSpacing": "-0.01em"
     },
     "text-label-sm": {
       "fontSize": "0.75rem",
       "lineHeight": "1rem",
       "fontWeight": "500",
-      "letterSpacing": "0em"
+      "letterSpacing": "-0.01em"
     },
     "text-code": {
       "fontSize": "0.8125rem",

package/dist/utilities.css

@@ -51,12 +51,18 @@
       --scroll-fade-t: 0px;
     }
     to {
-      --scroll-fade-t: var(--_scroll-fade-size-t, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+      --scroll-fade-t: var(
+        --_scroll-fade-size-t,
+        var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+      );
     }
   }
   @keyframes scroll-fade-reveal-b {
     from {
-      --scroll-fade-b: var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+      --scroll-fade-b: var(
+        --_scroll-fade-size-b,
+        var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+      );
     }
     to {
       --scroll-fade-b: 0px;
@@ -67,12 +73,18 @@
       --scroll-fade-s: 0px;
     }
     to {
-      --scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+      --scroll-fade-s: var(
+        --_scroll-fade-size-s,
+        var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+      );
     }
   }
   @keyframes scroll-fade-reveal-e {
     from {
-      --scroll-fade-e: var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+      --scroll-fade-e: var(
+        --_scroll-fade-size-e,
+        var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+      );
     }
     to {
       --scroll-fade-e: 0px;
@@ -553,7 +565,6 @@
   }
 }
 
-
 /* ---------------------------------------------------------------------------
  * scrollbar-* — minimal native scrollbar helpers (VegaStack addition; not in
  * upstream shadcn tailwind.css). Used by message-scroller's viewport.
@@ -573,7 +584,6 @@
   scrollbar-gutter: stable;
 }
 
-
 /* ---------------------------------------------------------------------------
  * motion-* — the state-feedback animation vocabulary (VegaStack addition,
  * Phase M). Mount-triggered CSS animations for the "keyed presence" mechanism:
@@ -586,6 +596,8 @@
  *                         (the "success bounce" — spring ease, tiny overshoot).
  *   - motion-enter-up   : fade+rise arrival for content (chat messages,
  *                         skeleton→content reveal).
+ *   - motion-flash      : highlight-on-change ring pulse (live updates); color
+ *                         via --vs-flash-color, defaults to `ring`.
  *   - motion-shake      : horizontal error jiggle. Replayable: re-trigger by
  *                         remounting (key bump) or toggling the class after
  *                         `animationend`.
@@ -643,70 +655,62 @@
   animation: vs-shake var(--duration-slow) var(--motion-ease-standard);
 }
 
+@keyframes vs-flash {
+  /* Highlight-on-change ring pulse (Wave 1, Attio record-flash adaptation):
+   * a 2px ring in the component's own accent (defaults to `ring`) swells and
+   * settles. End state = rest, so the base.css reduced-motion collapse renders
+   * it invisible. Override the color per call-site via `--vs-flash-color`
+   * (e.g. `[--vs-flash-color:var(--info)]` on a live-updating row). */
+  0% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+  50% {
+    box-shadow: 0 0 0 2px var(--vs-flash-color, var(--ring));
+  }
+  to {
+    box-shadow: 0 0 0 0 transparent;
+  }
+}
+
+@utility motion-flash {
+  animation: vs-flash var(--duration-slow) var(--motion-ease-standard);
+}
+
 /* ---------------------------------------------------------------------------
- * .vs-marketing — the marketing dark-ground SCOPE MECHANISM (Phase B, audit
- * 17-brand-direction §Color & surface, CX-10). Marketing surfaces (hero,
- * section bands, the Terminal primitive) render the warm ramp's DARK end
- * regardless of the page/product theme — `.dark` alone can't express "product
- * light + marketing dark on the SAME page," which is exactly the co-existing
- * case this class exists for (docs-home is light by default but its hero is
- * dark-first). Any subtree wrapped in `.vs-marketing` (see the
- * `MarketingSurface` primitive, and `Terminal`, which self-scopes) gets the
- * same semantic custom properties `.dark` sets, scoped LOCALLY instead of
- * gated on the page-root class — every `bg-background` / `text-foreground` /
- * `border-border` / `bg-brand` utility inside it resolves through these, with
- * NO component code changes (any existing token-built component composes
- * correctly, since only the custom-property VALUES change, never the
- * utility-to-var wiring).
+ * BrandIcon theme-aware artwork swap (`<BrandIcon variant="auto">`).
  *
- * Values are a RATIONED, MANUALLY-SYNCED duplicate of the resolved oklch()
- * output of `packages/design-tokens/tokens/semantic.dark.tokens.json` (the same
- * values `.dark` sets) — the same "one sanctioned literal duplication"
- * precedent as the `overlay` scrim token in that file. The principled fix is
- * a THIRD generated Style Dictionary platform run in `build-tokens.mjs`
- * (source `semantic.dark.tokens.json`, selector `.vs-marketing` instead of
- * `.dark`) so this can never drift silently — that's a tokens-BUILD-PIPELINE
- * change outside this component-level addition; flagged for whoever owns
- * `packages/design-tokens/build-tokens.mjs` next. If `semantic.dark.tokens.json`
- * changes, update this block to match (or land the generated version).
+ * Single-colour brands ship artwork that only reads on ONE surface — GitHub's
+ * brand mark is #181717, invisible on a dark canvas. `thesvg` therefore ships
+ * `light` (dark ink, FOR light surfaces) and `dark` (white ink, FOR dark
+ * surfaces) variants; `auto` renders both and lets CSS reveal the right one.
  *
- * LIMITATION (documented, not fixed here): Base UI floating surfaces portal
- * to `<body>`, OUTSIDE this scoped subtree — a popover/tooltip/menu/dialog
- * opened from inside a `.vs-marketing` surface renders with the PAGE theme,
- * not the marketing dark ground. Marketing surfaces rarely need portals (a
- * hero/section band is not app chrome); the docs-home dogfood doesn't use one.
+ * These are plain attribute selectors, NOT Tailwind utilities, on purpose:
+ * `@vegastack/design` is a published package, and a consumer's Tailwind build
+ * does not scan our `src`. A `dark:` utility authored inside the package would
+ * 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.
  * ------------------------------------------------------------------------- */
-.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);
-
-  --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);
-
-  --border: oklch(0.269 0.003 75);
-  --input: var(--border);
-  --ring: var(--primary);
-  --overlay: oklch(0 0 0 / 0.55);
-
-  /* Brand phosphor — DARK half (13.3:1 on this ground, MK's pick), independent
-     of whether `.dark` is present anywhere in the ancestor chain. Marker roles
-     only (live-state dot, sparkline endpoint, eyebrow highlight, terminal
-     prompt glyph) — see design.md §Brand & Marketing. */
-  --brand: oklch(0.86 0.21 148);
+[data-brand-artwork="light"] {
+  display: contents;
+}
+[data-brand-artwork="dark"] {
+  display: none;
 }
+.dark [data-brand-artwork="light"],
+.vs-marketing [data-brand-artwork="light"] {
+  display: none;
+}
+.dark [data-brand-artwork="dark"],
+.vs-marketing [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. */