@astryxdesign/theme-neutral 0.7.5-canary.fccd771 → 0.7.5

package/dist/source.mjs

@@ -92,15 +92,15 @@ var neutralPaletteRefs = {
     dark: { 25: "#503424", 65: "#df843f", 80: "#ffb37e" }
   },
   blue: {
-    light: { 25: "#003978", 30: "#00458c", 50: "#0074e2", 80: "#a1caff", 85: "#b9d7ff" },
+    light: { 25: "#003978", 30: "#00458c", 45: "#0067ce", 50: "#0074e2", 80: "#a1caff", 85: "#b9d7ff" },
     dark: { 25: "#253c5a", 65: "#5aa0f8", 75: "#88bcff", 80: "#a1caff" }
   },
   red: {
-    light: { 25: "#76000c", 30: "#8a0011", 55: "#de4745", 65: "#fa6762", 70: "#ff7f77", 80: "#ffaea7", 85: "#ffc4be" },
-    dark: { 25: "#5b2b28", 65: "#ee736c", 75: "#ff9890", 80: "#ffaea7", 85: "#ffc4be" }
+    light: { 25: "#76000c", 30: "#8a0011", 45: "#c0262c", 55: "#de4745", 65: "#fa6762", 80: "#ffaea7", 85: "#ffc4be" },
+    dark: { 25: "#5b2b28", 75: "#ff9890", 80: "#ffaea7" }
   },
   yellow: {
-    light: { 25: "#4b3900", 30: "#584400", 65: "#c29900", 75: "#e2b623", 80: "#eec448", 85: "#f8d36a" },
+    light: { 25: "#4b3900", 30: "#584400", 45: "#836700", 65: "#c29900", 75: "#e2b623", 80: "#eec448", 85: "#f8d36a" },
     dark: { 25: "#453a1c", 80: "#e3c36c", 90: "#fae19e" }
   },
   teal: {
@@ -140,37 +140,10 @@ var neutralSyntax = defineSyntaxTheme({
   }
 });
 var neutralLocalTokens = {
-  "--astryx-theme-neutral-color-status-fill-accent": ["#0074e2", "#6d9cfe"],
-  "--astryx-theme-neutral-color-status-fill-success": ["#198100", "#64af4c"],
-  "--astryx-theme-neutral-color-status-fill-warning": "#ffce2f",
-  "--astryx-theme-neutral-color-status-fill-error": ["#c9303a", "#ff705d"],
-  "--astryx-theme-neutral-color-status-muted-accent": [
-    blue.light[85],
-    withAlpha(blue.dark[75], "3D")
-  ],
-  "--astryx-theme-neutral-color-on-tint-neutral": ["#fafafa4D", "#0a0a0a4D"],
-  "--astryx-theme-neutral-color-on-tint-overlay-hover": [
-    "#fafafa1A",
-    "#0a0a0a1A"
-  ],
-  "--astryx-theme-neutral-color-on-tint-overlay-pressed": [
-    "#fafafa33",
-    "#0a0a0a33"
-  ],
-  "--astryx-theme-neutral-color-destructive-overlay-hover": [
-    withAlpha(red.light[70], "0D"),
-    withAlpha(red.dark[65], "0D")
-  ],
-  "--astryx-theme-neutral-color-destructive-overlay-pressed": [
-    withAlpha(red.light[70], "1A"),
-    withAlpha(red.dark[65], "1A")
-  ]
-};
-var statusFill = {
-  accent: "var(--astryx-theme-neutral-color-status-fill-accent)",
-  success: "var(--astryx-theme-neutral-color-status-fill-success)",
-  warning: "var(--astryx-theme-neutral-color-status-fill-warning)",
-  error: "var(--astryx-theme-neutral-color-status-fill-error)"
+  // Deprecated: kept with its released name, meaning, and value for Neutral
+  // extensions (theme:neutral DEC-1); Neutral itself paints status through the
+  // portable --color-* roles and no longer reads it.
+  "--astryx-theme-neutral-color-status-fill-accent": ["#0074e2", "#6d9cfe"]
 };
 var neutralTheme = defineTheme({
   name: "neutral",
@@ -247,14 +220,27 @@ var neutralTheme = defineTheme({
     "--color-on-success": [neutral.light[100], neutral.dark[5]],
     "--color-on-error": [neutral.light[100], neutral.dark[5]],
     "--color-on-warning": neutral.light[5],
+    "--color-info": ["#0074e2", "#6d9cfe"],
+    "--color-info-muted": [blue.light[85], withAlpha(blue.dark[75], "3D")],
+    "--color-on-info": [neutral.light[100], neutral.dark[5]],
+    "--color-text-info": [blue.light[45], blue.dark[80]],
+    "--color-text-success": [green.light[45], green.light[75]],
+    "--color-text-warning": [yellow.light[45], yellow.light[80]],
+    "--color-text-error": [red.light[45], red.dark[80]],
+    "--color-on-info-muted": [blue.light[25], blue.dark[80]],
+    "--color-on-success-muted": [green.light[25], green.light[75]],
+    "--color-on-warning-muted": [yellow.light[25], yellow.light[80]],
+    "--color-on-error-muted": [red.light[25], red.dark[80]],
     // Icon
     "--color-icon-accent": [neutral.light[10], neutral.dark[95]],
     "--color-icon-primary": [neutral.light[0], neutral.dark[100]],
     "--color-icon-secondary": [neutral.light[45], neutral.dark[65]],
     "--color-icon-disabled": [neutral.light[60], neutral.dark[35]],
-    "--color-success": [green.light[25], green.light[80]],
-    "--color-error": [red.light[25], red.dark[85]],
-    "--color-warning": [yellow.light[25], yellow.light[85]],
+    // Strong status fills (architecture:theme-tokens INV11): Neutral's
+    // reviewed status-fill colours, with --color-on-<status> above.
+    "--color-success": ["#198100", "#64af4c"],
+    "--color-warning": "#ffce2f",
+    "--color-error": ["#c9303a", "#ff705d"],
     "--color-success-muted": [green.dark[85], withAlpha(green.light[75], "3D")],
     "--color-error-muted": [red.light[85], withAlpha(red.dark[75], "3D")],
     "--color-warning-muted": [
@@ -272,7 +258,7 @@ var neutralTheme = defineTheme({
       withAlpha(neutral.light[0], "1A"),
       withAlpha(neutral.dark[0], "4D")
     ],
-    "--color-tint-hover": ["black", "white"],
+    "--color-tint-hover": [neutral.light[0], neutral.dark[100]],
     "--color-background-red": [red.light[85], red.dark[25]],
     "--color-border-red": [red.light[80], red.light[65]],
     "--color-icon-red": [red.light[25], red.dark[75]],
@@ -356,32 +342,14 @@ var neutralTheme = defineTheme({
     button: {
       "variant:destructive": {
         backgroundColor: "var(--color-error-muted)",
-        color: "var(--color-error)",
-        "--color-overlay-hover": "var(--astryx-theme-neutral-color-destructive-overlay-hover)",
-        "--color-overlay-pressed": "var(--astryx-theme-neutral-color-destructive-overlay-pressed)"
+        color: "var(--color-on-error-muted)"
       }
     },
     badge: {
-      "variant:info": {
-        backgroundColor: statusFill.accent,
-        color: "var(--color-on-accent)"
-      },
       "variant:neutral": {
         backgroundColor: "var(--color-background-gray)",
         color: "var(--color-text-gray)"
       },
-      "variant:success": {
-        backgroundColor: statusFill.success,
-        color: "var(--color-on-success)"
-      },
-      "variant:warning": {
-        backgroundColor: statusFill.warning,
-        color: "var(--color-on-warning)"
-      },
-      "variant:error": {
-        backgroundColor: statusFill.error,
-        color: "var(--color-on-error)"
-      },
       "variant:red": {
         backgroundColor: "var(--color-background-red)",
         color: "var(--color-text-red)"
@@ -423,16 +391,6 @@ var neutralTheme = defineTheme({
         color: "var(--color-text-gray)"
       }
     },
-    "status-dot": {
-      "variant:success": { backgroundColor: statusFill.success },
-      "variant:warning": { backgroundColor: statusFill.warning },
-      "variant:error": { backgroundColor: statusFill.error },
-      "variant:accent": { backgroundColor: statusFill.accent }
-    },
-    "avatar-status-dot": {
-      "variant:success": { backgroundColor: statusFill.success },
-      "variant:error": { backgroundColor: statusFill.error }
-    },
     // Give the Neutral segmented control a roomier inset without changing its
     // outside height. The selected item stays flat against the tinted track.
     "segmented-control": {
@@ -454,40 +412,6 @@ var neutralTheme = defineTheme({
         boxShadow: "none"
       }
     },
-    banner: {
-      base: {
-        "--color-neutral": "var(--astryx-theme-neutral-color-on-tint-neutral)",
-        "--color-overlay-hover": "var(--astryx-theme-neutral-color-on-tint-overlay-hover)",
-        "--color-overlay-pressed": "var(--astryx-theme-neutral-color-on-tint-overlay-pressed)"
-      },
-      "status:info": {
-        "--color-accent-muted": "var(--astryx-theme-neutral-color-status-muted-accent)",
-        "--color-text-primary": "var(--color-text-blue)",
-        "--color-text-secondary": "var(--color-text-blue)",
-        "--color-accent": "var(--color-text-blue)"
-      },
-      "status:success": {
-        "--color-text-primary": "var(--color-text-green)",
-        "--color-text-secondary": "var(--color-text-green)",
-        "--color-success": "var(--color-text-green)"
-      },
-      "status:warning": {
-        "--color-text-primary": "var(--color-text-yellow)",
-        "--color-text-secondary": "var(--color-text-yellow)",
-        "--color-warning": "var(--color-text-yellow)"
-      },
-      "status:error": {
-        "--color-text-primary": "var(--color-text-red)",
-        "--color-text-secondary": "var(--color-text-red)",
-        "--color-error": "var(--color-text-red)"
-      }
-    },
-    "step-indicator": {
-      "status:accent": { "--color-accent": statusFill.accent },
-      "status:success": { "--color-success": statusFill.success },
-      "status:warning": { "--color-warning": statusFill.warning },
-      "status:error": { "--color-error": statusFill.error }
-    },
     switch: {
       base: {
         "--color-background-gray": "var(--color-border-emphasized)"
@@ -496,18 +420,6 @@ var neutralTheme = defineTheme({
     "progress-bar": {
       base: {
         "--color-background-muted": "var(--color-border-emphasized)"
-      },
-      "variant:accent": {
-        "--color-accent": statusFill.accent
-      },
-      "variant:success": {
-        "--color-success": statusFill.success
-      },
-      "variant:warning": {
-        "--color-warning": statusFill.warning
-      },
-      "variant:error": {
-        "--color-error": statusFill.error
       }
     },
     card: {

package/dist/theme.css

@@ -192,13 +192,24 @@
     --color-on-success: light-dark(#ffffff, #111111);
     --color-on-error: light-dark(#ffffff, #111111);
     --color-on-warning: #111111;
+    --color-info: light-dark(#0074e2, #6d9cfe);
+    --color-info-muted: light-dark(#b9d7ff, #88bcff3D);
+    --color-on-info: light-dark(#ffffff, #111111);
+    --color-text-info: light-dark(#0067ce, #a1caff);
+    --color-text-success: light-dark(#2f7d33, #90ca90);
+    --color-text-warning: light-dark(#836700, #eec448);
+    --color-text-error: light-dark(#c0262c, #ffaea7);
+    --color-on-info-muted: light-dark(#003978, #a1caff);
+    --color-on-success-muted: light-dark(#00490b, #90ca90);
+    --color-on-warning-muted: light-dark(#4b3900, #eec448);
+    --color-on-error-muted: light-dark(#76000c, #ffaea7);
     --color-icon-accent: light-dark(#1b1b1b, #f1f1f1);
     --color-icon-primary: light-dark(#000000, #ffffff);
     --color-icon-secondary: light-dark(#6a6a6a, #9e9e9e);
     --color-icon-disabled: light-dark(#919191, #525252);
-    --color-success: light-dark(#00490b, #a4d6a3);
-    --color-error: light-dark(#76000c, #ffc4be);
-    --color-warning: light-dark(#4b3900, #f8d36a);
+    --color-success: light-dark(#198100, #64af4c);
+    --color-warning: #ffce2f;
+    --color-error: light-dark(#c9303a, #ff705d);
     --color-success-muted: light-dark(#bce0bb, #90ca903D);
     --color-error-muted: light-dark(#ffc4be, #ff98903D);
     --color-warning-muted: light-dark(#fae19e, #e2b6233D);
@@ -206,7 +217,7 @@
     --color-border-emphasized: light-dark(#d4d4d4, #525252);
     --color-skeleton: light-dark(#f1f1f1, #525252);
     --color-shadow: light-dark(#0000001A, #0000004D);
-    --color-tint-hover: light-dark(black, white);
+    --color-tint-hover: light-dark(#000000, #ffffff);
     --color-background-red: light-dark(#ffc4be, #5b2b28);
     --color-border-red: light-dark(#ffaea7, #fa6762);
     --color-icon-red: light-dark(#76000c, #ff9890);
@@ -261,16 +272,15 @@
     --shadow-inset-success: inset 0px 0px 0px 2px #2f7d334D;
     --shadow-inset-warning: inset 0px 0px 0px 2px #f8d36a4D;
     --shadow-inset-error: inset 0px 0px 0px 2px #de47454D;
+    --color-icon-info: var(--color-text-info);
+    --color-icon-success: var(--color-text-success);
+    --color-icon-warning: var(--color-text-warning);
+    --color-icon-error: var(--color-text-error);
+    --color-border-info: var(--color-text-info);
+    --color-border-success: var(--color-text-success);
+    --color-border-warning: var(--color-text-warning);
+    --color-border-error: var(--color-text-error);
     --astryx-theme-neutral-color-status-fill-accent: light-dark(#0074e2, #6d9cfe);
-    --astryx-theme-neutral-color-status-fill-success: light-dark(#198100, #64af4c);
-    --astryx-theme-neutral-color-status-fill-warning: #ffce2f;
-    --astryx-theme-neutral-color-status-fill-error: light-dark(#c9303a, #ff705d);
-    --astryx-theme-neutral-color-status-muted-accent: light-dark(#b9d7ff, #88bcff3D);
-    --astryx-theme-neutral-color-on-tint-neutral: light-dark(#fafafa4D, #0a0a0a4D);
-    --astryx-theme-neutral-color-on-tint-overlay-hover: light-dark(#fafafa1A, #0a0a0a1A);
-    --astryx-theme-neutral-color-on-tint-overlay-pressed: light-dark(#fafafa33, #0a0a0a33);
-    --astryx-theme-neutral-color-destructive-overlay-hover: light-dark(#ff7f770D, #ee736c0D);
-    --astryx-theme-neutral-color-destructive-overlay-pressed: light-dark(#ff7f771A, #ee736c1A);
   }
 
   :scope {
@@ -387,14 +397,7 @@
 
   .astryx-button[data-variant="destructive"] {
     background-color: var(--color-error-muted);
-    color: var(--color-error);
-    --color-overlay-hover: var(--astryx-theme-neutral-color-destructive-overlay-hover);
-    --color-overlay-pressed: var(--astryx-theme-neutral-color-destructive-overlay-pressed);
-  }
-
-  .astryx-badge[data-variant="info"] {
-    background-color: var(--astryx-theme-neutral-color-status-fill-accent);
-    color: var(--color-on-accent);
+    color: var(--color-on-error-muted);
   }
 
   .astryx-badge[data-variant="neutral"] {
@@ -402,21 +405,6 @@
     color: var(--color-text-gray);
   }
 
-  .astryx-badge[data-variant="success"] {
-    background-color: var(--astryx-theme-neutral-color-status-fill-success);
-    color: var(--color-on-success);
-  }
-
-  .astryx-badge[data-variant="warning"] {
-    background-color: var(--astryx-theme-neutral-color-status-fill-warning);
-    color: var(--color-on-warning);
-  }
-
-  .astryx-badge[data-variant="error"] {
-    background-color: var(--astryx-theme-neutral-color-status-fill-error);
-    color: var(--color-on-error);
-  }
-
   .astryx-badge[data-variant="red"] {
     background-color: var(--color-background-red);
     color: var(--color-text-red);
@@ -467,30 +455,6 @@
     color: var(--color-text-gray);
   }
 
-  .astryx-status-dot[data-variant="success"] {
-    background-color: var(--astryx-theme-neutral-color-status-fill-success);
-  }
-
-  .astryx-status-dot[data-variant="warning"] {
-    background-color: var(--astryx-theme-neutral-color-status-fill-warning);
-  }
-
-  .astryx-status-dot[data-variant="error"] {
-    background-color: var(--astryx-theme-neutral-color-status-fill-error);
-  }
-
-  .astryx-status-dot[data-variant="accent"] {
-    background-color: var(--astryx-theme-neutral-color-status-fill-accent);
-  }
-
-  .astryx-avatar-status-dot[data-variant="success"] {
-    background-color: var(--astryx-theme-neutral-color-status-fill-success);
-  }
-
-  .astryx-avatar-status-dot[data-variant="error"] {
-    background-color: var(--astryx-theme-neutral-color-status-fill-error);
-  }
-
   .astryx-segmented-control {
     padding: var(--spacing-1);
     --_segmented-control-padding: var(--spacing-1);
@@ -512,53 +476,6 @@
     box-shadow: none;
   }
 
-  .astryx-banner {
-    --color-neutral: var(--astryx-theme-neutral-color-on-tint-neutral);
-    --color-overlay-hover: var(--astryx-theme-neutral-color-on-tint-overlay-hover);
-    --color-overlay-pressed: var(--astryx-theme-neutral-color-on-tint-overlay-pressed);
-  }
-
-  .astryx-banner[data-status="info"] {
-    --color-accent-muted: var(--astryx-theme-neutral-color-status-muted-accent);
-    --color-text-primary: var(--color-text-blue);
-    --color-text-secondary: var(--color-text-blue);
-    --color-accent: var(--color-text-blue);
-  }
-
-  .astryx-banner[data-status="success"] {
-    --color-text-primary: var(--color-text-green);
-    --color-text-secondary: var(--color-text-green);
-    --color-success: var(--color-text-green);
-  }
-
-  .astryx-banner[data-status="warning"] {
-    --color-text-primary: var(--color-text-yellow);
-    --color-text-secondary: var(--color-text-yellow);
-    --color-warning: var(--color-text-yellow);
-  }
-
-  .astryx-banner[data-status="error"] {
-    --color-text-primary: var(--color-text-red);
-    --color-text-secondary: var(--color-text-red);
-    --color-error: var(--color-text-red);
-  }
-
-  .astryx-step-indicator[data-status="accent"] {
-    --color-accent: var(--astryx-theme-neutral-color-status-fill-accent);
-  }
-
-  .astryx-step-indicator[data-status="success"] {
-    --color-success: var(--astryx-theme-neutral-color-status-fill-success);
-  }
-
-  .astryx-step-indicator[data-status="warning"] {
-    --color-warning: var(--astryx-theme-neutral-color-status-fill-warning);
-  }
-
-  .astryx-step-indicator[data-status="error"] {
-    --color-error: var(--astryx-theme-neutral-color-status-fill-error);
-  }
-
   .astryx-switch {
     --color-background-gray: var(--color-border-emphasized);
   }
@@ -567,22 +484,6 @@
     --color-background-muted: var(--color-border-emphasized);
   }
 
-  .astryx-progress-bar[data-variant="accent"] {
-    --color-accent: var(--astryx-theme-neutral-color-status-fill-accent);
-  }
-
-  .astryx-progress-bar[data-variant="success"] {
-    --color-success: var(--astryx-theme-neutral-color-status-fill-success);
-  }
-
-  .astryx-progress-bar[data-variant="warning"] {
-    --color-warning: var(--astryx-theme-neutral-color-status-fill-warning);
-  }
-
-  .astryx-progress-bar[data-variant="error"] {
-    --color-error: var(--astryx-theme-neutral-color-status-fill-error);
-  }
-
   .astryx-card {
     --astryx-card-padding: var(--spacing-3);
   }

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@astryxdesign/theme-neutral",
-  "version": "0.7.5-canary.fccd771",
+  "version": "0.7.5",
   "displayName": "Neutral Theme",
   "private": false,
   "description": "Restrained warm grays. Minimal and quiet, so the content stays the focus.",
   "author": "Meta Open Source",
   "license": "MIT",
-  "homepage": "https://github.com/facebook/astryx#readme",
+  "homepage": "https://github.com/meta/astryx#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/facebook/astryx.git",
+    "url": "git+https://github.com/meta/astryx.git",
     "directory": "packages/themes/neutral"
   },
   "bugs": {
-    "url": "https://github.com/facebook/astryx/issues"
+    "url": "https://github.com/meta/astryx/issues"
   },
   "keywords": [
     "astryx",
@@ -58,11 +58,11 @@
     "lucide-react": "^1.18.0"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.7.5-canary.fccd771",
+    "@astryxdesign/core": "0.7.5",
     "react": ">=19"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.7.5-canary.fccd771"
+    "@astryxdesign/cli": "0.7.5"
   },
   "module": "./dist/source.mjs",
   "scripts": {

package/src/neutralPaletteRefs.generated.ts

@@ -23,15 +23,15 @@ export const neutralPaletteRefs = {
     dark: {25: '#503424', 65: '#df843f', 80: '#ffb37e'},
   },
   blue: {
-    light: {25: '#003978', 30: '#00458c', 50: '#0074e2', 80: '#a1caff', 85: '#b9d7ff'},
+    light: {25: '#003978', 30: '#00458c', 45: '#0067ce', 50: '#0074e2', 80: '#a1caff', 85: '#b9d7ff'},
     dark: {25: '#253c5a', 65: '#5aa0f8', 75: '#88bcff', 80: '#a1caff'},
   },
   red: {
-    light: {25: '#76000c', 30: '#8a0011', 55: '#de4745', 65: '#fa6762', 70: '#ff7f77', 80: '#ffaea7', 85: '#ffc4be'},
-    dark: {25: '#5b2b28', 65: '#ee736c', 75: '#ff9890', 80: '#ffaea7', 85: '#ffc4be'},
+    light: {25: '#76000c', 30: '#8a0011', 45: '#c0262c', 55: '#de4745', 65: '#fa6762', 80: '#ffaea7', 85: '#ffc4be'},
+    dark: {25: '#5b2b28', 75: '#ff9890', 80: '#ffaea7'},
   },
   yellow: {
-    light: {25: '#4b3900', 30: '#584400', 65: '#c29900', 75: '#e2b623', 80: '#eec448', 85: '#f8d36a'},
+    light: {25: '#4b3900', 30: '#584400', 45: '#836700', 65: '#c29900', 75: '#e2b623', 80: '#eec448', 85: '#f8d36a'},
     dark: {25: '#453a1c', 80: '#e3c36c', 90: '#fae19e'},
   },
   teal: {