@astryxdesign/theme-neutral 0.7.9-canary.f9281ef → 0.7.9

package/dist/neutral.js

@@ -90,22 +90,23 @@ export const neutralTheme = {
     "--_astryx-pre-tempo-duration-slow-min": "525ms",
     "--_astryx-pre-tempo-duration-slow": "700ms",
     "--_astryx-pre-tempo-duration-slow-max": "935ms",
+    "--_astryx-motion-tempo": "1",
     "--font-family-body": "Figtree, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
     "--font-family-heading": "Figtree, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
     "--font-family-code": "ui-monospace, \"SF Mono\", Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace",
     "--color-syntax-keyword": "light-dark(#6b187c, #efa8ff)",
     "--color-syntax-string": "light-dark(#0b5615, #a4d6a3)",
-    "--color-syntax-comment": "light-dark(#6a6a6a, #9e9e9e)",
+    "--color-syntax-comment": "light-dark(#525252, #b9b9b9)",
     "--color-syntax-number": "light-dark(#733100, #ffb37e)",
     "--color-syntax-function": "light-dark(#00458c, #a1caff)",
     "--color-syntax-type": "light-dark(#6b187c, #efa8ff)",
     "--color-syntax-variable": "light-dark(#111111, #e2e2e2)",
-    "--color-syntax-operator": "light-dark(#6a6a6a, #9e9e9e)",
+    "--color-syntax-operator": "light-dark(#525252, #b9b9b9)",
     "--color-syntax-constant": "light-dark(#733100, #ffb37e)",
     "--color-syntax-tag": "light-dark(#8a0011, #ffaea7)",
     "--color-syntax-attribute": "light-dark(#584400, #eec448)",
     "--color-syntax-property": "light-dark(#005348, #90d7c8)",
-    "--color-syntax-punctuation": "light-dark(#6a6a6a, #9e9e9e)",
+    "--color-syntax-punctuation": "light-dark(#525252, #b9b9b9)",
     "--color-syntax-background": "light-dark(#ffffff, #111111)",
     "--color-syntax-added": "color-mix(in srgb, var(--color-success-muted) 25%, transparent)",
     "--color-syntax-removed": "color-mix(in srgb, var(--color-error-muted) 25%, transparent)",
@@ -118,7 +119,7 @@ export const neutralTheme = {
     "--color-background-popover": "light-dark(#ffffff, #1b1b1b)",
     "--color-background-muted": "light-dark(#f1f1f1, #1b1b1b)",
     "--color-accent": "light-dark(#1b1b1b, #f1f1f1)",
-    "--color-accent-muted": "light-dark(#f1f1f1, #262626)",
+    "--color-accent-muted": "light-dark(#d4d4d4, #474747)",
     "--color-neutral": "light-dark(#0000000F, #ffffff1A)",
     "--color-overlay": "light-dark(#00000080, #000000CC)",
     "--color-overlay-hover": "light-dark(#0000000D, #ffffff0D)",
@@ -317,6 +318,26 @@ export const neutralTheme = {
         "lineHeight": "var(--text-display-3-leading)"
       }
     },
+    "item": {
+      "selected": {
+        "--color-text-secondary": "light-dark(#474747, #c6c6c6)"
+      }
+    },
+    "tree-list-item": {
+      "selected": {
+        "--color-text-secondary": "light-dark(#474747, #c6c6c6)"
+      }
+    },
+    "file-input": {
+      "mode:dropzone": {
+        "--color-text-secondary": "light-dark(#474747, #c6c6c6)"
+      }
+    },
+    "citation": {
+      "variant:number": {
+        "--color-text-secondary": "light-dark(#474747, #c6c6c6)"
+      }
+    },
     "button": {
       "variant:destructive": {
         "backgroundColor": "var(--color-error-muted)",

package/dist/neutralPaletteRefs.generated.d.ts

@@ -35,6 +35,7 @@ export declare const neutralPaletteRefs: {
             readonly 5: "#111111";
             readonly 10: "#1b1b1b";
             readonly 30: "#474747";
+            readonly 35: "#525252";
             readonly 45: "#6a6a6a";
             readonly 60: "#919191";
             readonly 85: "#d4d4d4";
@@ -48,8 +49,11 @@ export declare const neutralPaletteRefs: {
             readonly 10: "#1b1b1b";
             readonly 15: "#262626";
             readonly 20: "#303030";
+            readonly 30: "#474747";
             readonly 35: "#525252";
             readonly 65: "#9e9e9e";
+            readonly 75: "#b9b9b9";
+            readonly 80: "#c6c6c6";
             readonly 85: "#d4d4d4";
             readonly 90: "#e2e2e2";
             readonly 95: "#f1f1f1";

package/dist/neutralPaletteRefs.generated.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"neutralPaletteRefs.generated.d.ts","sourceRoot":"","sources":["../src/neutralPaletteRefs.generated.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCrB,CAAC;AAEX,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"neutralPaletteRefs.generated.d.ts","sourceRoot":"","sources":["../src/neutralPaletteRefs.generated.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCrB,CAAC;AAEX,eAAe,kBAAkB,CAAC"}

package/dist/neutralTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"neutralTheme.d.ts","sourceRoot":"","sources":["../src/neutralTheme.ts"],"names":[],"mappings":"AAyCA,eAAO,MAAM,YAAY,gEAoVvB,CAAC"}
+{"version":3,"file":"neutralTheme.d.ts","sourceRoot":"","sources":["../src/neutralTheme.ts"],"names":[],"mappings":"AAyCA,eAAO,MAAM,YAAY,gEA8WvB,CAAC"}

package/dist/source.js

@@ -79,8 +79,8 @@ var neutralPaletteRefs = {
     dark: { 25: "#2b422b", 80: "#aad4a9", 85: "#bce0bb" }
   },
   neutral: {
-    light: { 0: "#000000", 5: "#111111", 10: "#1b1b1b", 30: "#474747", 45: "#6a6a6a", 60: "#919191", 85: "#d4d4d4", 90: "#e2e2e2", 95: "#f1f1f1", 100: "#ffffff" },
-    dark: { 0: "#000000", 5: "#111111", 10: "#1b1b1b", 15: "#262626", 20: "#303030", 35: "#525252", 65: "#9e9e9e", 85: "#d4d4d4", 90: "#e2e2e2", 95: "#f1f1f1", 100: "#ffffff" }
+    light: { 0: "#000000", 5: "#111111", 10: "#1b1b1b", 30: "#474747", 35: "#525252", 45: "#6a6a6a", 60: "#919191", 85: "#d4d4d4", 90: "#e2e2e2", 95: "#f1f1f1", 100: "#ffffff" },
+    dark: { 0: "#000000", 5: "#111111", 10: "#1b1b1b", 15: "#262626", 20: "#303030", 30: "#474747", 35: "#525252", 65: "#9e9e9e", 75: "#b9b9b9", 80: "#c6c6c6", 85: "#d4d4d4", 90: "#e2e2e2", 95: "#f1f1f1", 100: "#ffffff" }
   },
   orange: {
     light: { 25: "#622700", 30: "#733100", 75: "#ff9e55", 85: "#ffc7a1" },
@@ -120,17 +120,17 @@ var neutralSyntax = (0, import_theme.defineSyntaxTheme)({
   tokens: {
     keyword: [purple.light[30], purple.light[80]],
     string: [green.light[30], green.light[80]],
-    comment: [neutral.light[45], neutral.dark[65]],
+    comment: [neutral.light[35], neutral.dark[75]],
     number: [orange.light[30], orange.dark[80]],
     function: [blue.light[30], blue.dark[80]],
     type: [purple.light[30], purple.light[80]],
     variable: [neutral.light[5], neutral.dark[90]],
-    operator: [neutral.light[45], neutral.dark[65]],
+    operator: [neutral.light[35], neutral.dark[75]],
     constant: [orange.light[30], orange.dark[80]],
     tag: [red.light[30], red.dark[80]],
     attribute: [yellow.light[30], yellow.light[80]],
     property: [teal.light[30], teal.light[80]],
-    punctuation: [neutral.light[45], neutral.dark[65]],
+    punctuation: [neutral.light[35], neutral.dark[75]],
     background: [neutral.light[100], neutral.dark[5]]
   }
 });
@@ -186,7 +186,7 @@ var neutralTheme = (0, import_theme.defineTheme)({
     "--color-background-popover": [neutral.light[100], neutral.dark[10]],
     "--color-background-muted": [neutral.light[95], neutral.dark[10]],
     "--color-accent": [neutral.light[10], neutral.dark[95]],
-    "--color-accent-muted": [neutral.light[95], neutral.dark[15]],
+    "--color-accent-muted": [neutral.light[85], neutral.dark[30]],
     "--color-neutral": [
       withAlpha(neutral.light[0], "0F"),
       withAlpha(neutral.dark[100], "1A")
@@ -334,6 +334,31 @@ var neutralTheme = (0, import_theme.defineTheme)({
     "--shadow-inset-error": `inset 0px 0px 0px 2px ${withAlpha(red.light[55], "4D")}`
   },
   components: {
+    // In dark mode, secondary text falls under 4.5:1 on the selected fill
+    // and under its hover. Selected rows use the next stop that clears both.
+    item: {
+      selected: {
+        "--color-text-secondary": `light-dark(${neutral.light[30]}, ${neutral.dark[80]})`
+      }
+    },
+    "tree-list-item": {
+      selected: {
+        "--color-text-secondary": `light-dark(${neutral.light[30]}, ${neutral.dark[80]})`
+      }
+    },
+    // A dropzone's hint sits on the same fill while a file is dragged over.
+    // That state has no target, so the dropzone takes the lift at rest too.
+    "file-input": {
+      "mode:dropzone": {
+        "--color-text-secondary": `light-dark(${neutral.light[30]}, ${neutral.dark[80]})`
+      }
+    },
+    // A numbered citation is a pill on the same fill.
+    citation: {
+      "variant:number": {
+        "--color-text-secondary": `light-dark(${neutral.light[30]}, ${neutral.dark[80]})`
+      }
+    },
     button: {
       "variant:destructive": {
         backgroundColor: "var(--color-error-muted)",

package/dist/source.mjs

@@ -84,8 +84,8 @@ var neutralPaletteRefs = {
     dark: { 25: "#2b422b", 80: "#aad4a9", 85: "#bce0bb" }
   },
   neutral: {
-    light: { 0: "#000000", 5: "#111111", 10: "#1b1b1b", 30: "#474747", 45: "#6a6a6a", 60: "#919191", 85: "#d4d4d4", 90: "#e2e2e2", 95: "#f1f1f1", 100: "#ffffff" },
-    dark: { 0: "#000000", 5: "#111111", 10: "#1b1b1b", 15: "#262626", 20: "#303030", 35: "#525252", 65: "#9e9e9e", 85: "#d4d4d4", 90: "#e2e2e2", 95: "#f1f1f1", 100: "#ffffff" }
+    light: { 0: "#000000", 5: "#111111", 10: "#1b1b1b", 30: "#474747", 35: "#525252", 45: "#6a6a6a", 60: "#919191", 85: "#d4d4d4", 90: "#e2e2e2", 95: "#f1f1f1", 100: "#ffffff" },
+    dark: { 0: "#000000", 5: "#111111", 10: "#1b1b1b", 15: "#262626", 20: "#303030", 30: "#474747", 35: "#525252", 65: "#9e9e9e", 75: "#b9b9b9", 80: "#c6c6c6", 85: "#d4d4d4", 90: "#e2e2e2", 95: "#f1f1f1", 100: "#ffffff" }
   },
   orange: {
     light: { 25: "#622700", 30: "#733100", 75: "#ff9e55", 85: "#ffc7a1" },
@@ -125,17 +125,17 @@ var neutralSyntax = defineSyntaxTheme({
   tokens: {
     keyword: [purple.light[30], purple.light[80]],
     string: [green.light[30], green.light[80]],
-    comment: [neutral.light[45], neutral.dark[65]],
+    comment: [neutral.light[35], neutral.dark[75]],
     number: [orange.light[30], orange.dark[80]],
     function: [blue.light[30], blue.dark[80]],
     type: [purple.light[30], purple.light[80]],
     variable: [neutral.light[5], neutral.dark[90]],
-    operator: [neutral.light[45], neutral.dark[65]],
+    operator: [neutral.light[35], neutral.dark[75]],
     constant: [orange.light[30], orange.dark[80]],
     tag: [red.light[30], red.dark[80]],
     attribute: [yellow.light[30], yellow.light[80]],
     property: [teal.light[30], teal.light[80]],
-    punctuation: [neutral.light[45], neutral.dark[65]],
+    punctuation: [neutral.light[35], neutral.dark[75]],
     background: [neutral.light[100], neutral.dark[5]]
   }
 });
@@ -191,7 +191,7 @@ var neutralTheme = defineTheme({
     "--color-background-popover": [neutral.light[100], neutral.dark[10]],
     "--color-background-muted": [neutral.light[95], neutral.dark[10]],
     "--color-accent": [neutral.light[10], neutral.dark[95]],
-    "--color-accent-muted": [neutral.light[95], neutral.dark[15]],
+    "--color-accent-muted": [neutral.light[85], neutral.dark[30]],
     "--color-neutral": [
       withAlpha(neutral.light[0], "0F"),
       withAlpha(neutral.dark[100], "1A")
@@ -339,6 +339,31 @@ var neutralTheme = defineTheme({
     "--shadow-inset-error": `inset 0px 0px 0px 2px ${withAlpha(red.light[55], "4D")}`
   },
   components: {
+    // In dark mode, secondary text falls under 4.5:1 on the selected fill
+    // and under its hover. Selected rows use the next stop that clears both.
+    item: {
+      selected: {
+        "--color-text-secondary": `light-dark(${neutral.light[30]}, ${neutral.dark[80]})`
+      }
+    },
+    "tree-list-item": {
+      selected: {
+        "--color-text-secondary": `light-dark(${neutral.light[30]}, ${neutral.dark[80]})`
+      }
+    },
+    // A dropzone's hint sits on the same fill while a file is dragged over.
+    // That state has no target, so the dropzone takes the lift at rest too.
+    "file-input": {
+      "mode:dropzone": {
+        "--color-text-secondary": `light-dark(${neutral.light[30]}, ${neutral.dark[80]})`
+      }
+    },
+    // A numbered citation is a pill on the same fill.
+    citation: {
+      "variant:number": {
+        "--color-text-secondary": `light-dark(${neutral.light[30]}, ${neutral.dark[80]})`
+      }
+    },
     button: {
       "variant:destructive": {
         backgroundColor: "var(--color-error-muted)",

package/dist/theme.css

@@ -158,22 +158,23 @@
     --_astryx-pre-tempo-duration-slow-min: 525ms;
     --_astryx-pre-tempo-duration-slow: 700ms;
     --_astryx-pre-tempo-duration-slow-max: 935ms;
+    --_astryx-motion-tempo: 1;
     --font-family-body: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     --font-family-heading: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     --font-family-code: ui-monospace, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     --color-syntax-keyword: light-dark(#6b187c, #efa8ff);
     --color-syntax-string: light-dark(#0b5615, #a4d6a3);
-    --color-syntax-comment: light-dark(#6a6a6a, #9e9e9e);
+    --color-syntax-comment: light-dark(#525252, #b9b9b9);
     --color-syntax-number: light-dark(#733100, #ffb37e);
     --color-syntax-function: light-dark(#00458c, #a1caff);
     --color-syntax-type: light-dark(#6b187c, #efa8ff);
     --color-syntax-variable: light-dark(#111111, #e2e2e2);
-    --color-syntax-operator: light-dark(#6a6a6a, #9e9e9e);
+    --color-syntax-operator: light-dark(#525252, #b9b9b9);
     --color-syntax-constant: light-dark(#733100, #ffb37e);
     --color-syntax-tag: light-dark(#8a0011, #ffaea7);
     --color-syntax-attribute: light-dark(#584400, #eec448);
     --color-syntax-property: light-dark(#005348, #90d7c8);
-    --color-syntax-punctuation: light-dark(#6a6a6a, #9e9e9e);
+    --color-syntax-punctuation: light-dark(#525252, #b9b9b9);
     --color-syntax-background: light-dark(#ffffff, #111111);
     --color-syntax-added: color-mix(in srgb, var(--color-success-muted) 25%, transparent);
     --color-syntax-removed: color-mix(in srgb, var(--color-error-muted) 25%, transparent);
@@ -186,7 +187,7 @@
     --color-background-popover: light-dark(#ffffff, #1b1b1b);
     --color-background-muted: light-dark(#f1f1f1, #1b1b1b);
     --color-accent: light-dark(#1b1b1b, #f1f1f1);
-    --color-accent-muted: light-dark(#f1f1f1, #262626);
+    --color-accent-muted: light-dark(#d4d4d4, #474747);
     --color-neutral: light-dark(#0000000F, #ffffff1A);
     --color-overlay: light-dark(#00000080, #000000CC);
     --color-overlay-hover: light-dark(#0000000D, #ffffff0D);
@@ -405,6 +406,22 @@
     line-height: var(--text-display-3-leading);
   }
 
+  .astryx-item[data-selected="selected"] {
+    --color-text-secondary: light-dark(#474747, #c6c6c6);
+  }
+
+  .astryx-tree-list-item[data-selected="selected"] {
+    --color-text-secondary: light-dark(#474747, #c6c6c6);
+  }
+
+  .astryx-file-input[data-mode="dropzone"] {
+    --color-text-secondary: light-dark(#474747, #c6c6c6);
+  }
+
+  .astryx-citation[data-variant="number"] {
+    --color-text-secondary: light-dark(#474747, #c6c6c6);
+  }
+
   .astryx-button[data-variant="destructive"] {
     background-color: var(--color-error-muted);
     color: var(--color-on-error-muted);
@@ -522,6 +539,10 @@
 
   .astryx-heading[data-color="accent"] { color: var(--color-text-accent); }
 
+  .astryx-text[data-color="inherit"] { color: inherit; }
+
+  .astryx-heading[data-color="inherit"] { color: inherit; }
+
   .astryx-text[data-size="4xs"] { font-size: var(--font-size-4xs); }
 
   .astryx-text[data-size="3xs"] { font-size: var(--font-size-3xs); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/theme-neutral",
-  "version": "0.7.9-canary.f9281ef",
+  "version": "0.7.9",
   "displayName": "Neutral Theme",
   "private": false,
   "description": "Restrained warm grays. Minimal and quiet, so the content stays the focus.",
@@ -71,11 +71,11 @@
     "lucide-react": "^1.18.0"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.7.9-canary.f9281ef",
+    "@astryxdesign/core": "0.7.9",
     "react": ">=19"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.7.9-canary.f9281ef"
+    "@astryxdesign/cli": "0.7.9"
   },
   "module": "./dist/source.mjs",
   "scripts": {

package/src/neutralPaletteRefs.generated.ts

@@ -15,8 +15,8 @@ export const neutralPaletteRefs = {
     dark: {25: '#2b422b', 80: '#aad4a9', 85: '#bce0bb'},
   },
   neutral: {
-    light: {0: '#000000', 5: '#111111', 10: '#1b1b1b', 30: '#474747', 45: '#6a6a6a', 60: '#919191', 85: '#d4d4d4', 90: '#e2e2e2', 95: '#f1f1f1', 100: '#ffffff'},
-    dark: {0: '#000000', 5: '#111111', 10: '#1b1b1b', 15: '#262626', 20: '#303030', 35: '#525252', 65: '#9e9e9e', 85: '#d4d4d4', 90: '#e2e2e2', 95: '#f1f1f1', 100: '#ffffff'},
+    light: {0: '#000000', 5: '#111111', 10: '#1b1b1b', 30: '#474747', 35: '#525252', 45: '#6a6a6a', 60: '#919191', 85: '#d4d4d4', 90: '#e2e2e2', 95: '#f1f1f1', 100: '#ffffff'},
+    dark: {0: '#000000', 5: '#111111', 10: '#1b1b1b', 15: '#262626', 20: '#303030', 30: '#474747', 35: '#525252', 65: '#9e9e9e', 75: '#b9b9b9', 80: '#c6c6c6', 85: '#d4d4d4', 90: '#e2e2e2', 95: '#f1f1f1', 100: '#ffffff'},
   },
   orange: {
     light: {25: '#622700', 30: '#733100', 75: '#ff9e55', 85: '#ffc7a1'},

package/src/neutralTheme.ts

@@ -17,17 +17,17 @@ const neutralSyntax = defineSyntaxTheme({
   tokens: {
     keyword: [purple.light[30], purple.light[80]],
     string: [green.light[30], green.light[80]],
-    comment: [neutral.light[45], neutral.dark[65]],
+    comment: [neutral.light[35], neutral.dark[75]],
     number: [orange.light[30], orange.dark[80]],
     function: [blue.light[30], blue.dark[80]],
     type: [purple.light[30], purple.light[80]],
     variable: [neutral.light[5], neutral.dark[90]],
-    operator: [neutral.light[45], neutral.dark[65]],
+    operator: [neutral.light[35], neutral.dark[75]],
     constant: [orange.light[30], orange.dark[80]],
     tag: [red.light[30], red.dark[80]],
     attribute: [yellow.light[30], yellow.light[80]],
     property: [teal.light[30], teal.light[80]],
-    punctuation: [neutral.light[45], neutral.dark[65]],
+    punctuation: [neutral.light[35], neutral.dark[75]],
     background: [neutral.light[100], neutral.dark[5]],
   },
 });
@@ -94,7 +94,7 @@ export const neutralTheme = defineTheme({
     '--color-background-muted': [neutral.light[95], neutral.dark[10]],
 
     '--color-accent': [neutral.light[10], neutral.dark[95]],
-    '--color-accent-muted': [neutral.light[95], neutral.dark[15]],
+    '--color-accent-muted': [neutral.light[85], neutral.dark[30]],
     '--color-neutral': [
       withAlpha(neutral.light[0], '0F'),
       withAlpha(neutral.dark[100], '1A'),
@@ -273,6 +273,32 @@ export const neutralTheme = defineTheme({
   },
 
   components: {
+    // In dark mode, secondary text falls under 4.5:1 on the selected fill
+    // and under its hover. Selected rows use the next stop that clears both.
+    item: {
+      selected: {
+        '--color-text-secondary': `light-dark(${neutral.light[30]}, ${neutral.dark[80]})`,
+      },
+    },
+    'tree-list-item': {
+      selected: {
+        '--color-text-secondary': `light-dark(${neutral.light[30]}, ${neutral.dark[80]})`,
+      },
+    },
+    // A dropzone's hint sits on the same fill while a file is dragged over.
+    // That state has no target, so the dropzone takes the lift at rest too.
+    'file-input': {
+      'mode:dropzone': {
+        '--color-text-secondary': `light-dark(${neutral.light[30]}, ${neutral.dark[80]})`,
+      },
+    },
+    // A numbered citation is a pill on the same fill.
+    citation: {
+      'variant:number': {
+        '--color-text-secondary': `light-dark(${neutral.light[30]}, ${neutral.dark[80]})`,
+      },
+    },
+
     button: {
       'variant:destructive': {
         backgroundColor: 'var(--color-error-muted)',