@astryxdesign/theme-neutral 0.5.2 → 0.5.3

package/dist/theme.css

@@ -2,8 +2,8 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: src/neutralTheme.ts
  * Command: astryx theme build src/neutralTheme.ts --out dist/theme.css
- * CLI: @astryxdesign/cli@0.5.2
- * Core: @astryxdesign/core@0.5.2
+ * CLI: @astryxdesign/cli@0.5.3
+ * Core: @astryxdesign/core@0.5.3
  */
 
 @layer reset {
@@ -211,96 +211,96 @@
     --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(#700084, #efa8ff);
-    --color-syntax-string: light-dark(#005600, #a6d2a2);
-    --color-syntax-comment: light-dark(#737373, #a3a3a3);
-    --color-syntax-number: light-dark(#6e3500, #ffb37f);
-    --color-syntax-function: light-dark(#00458c, #a0caff);
-    --color-syntax-type: light-dark(#700084, #efa8ff);
-    --color-syntax-variable: light-dark(#171717, #e5e5e5);
-    --color-syntax-operator: light-dark(#737373, #a3a3a3);
-    --color-syntax-constant: light-dark(#6e3500, #ffb37f);
-    --color-syntax-tag: light-dark(#89001a, #ffaeaa);
-    --color-syntax-attribute: light-dark(#584400, #eec12f);
-    --color-syntax-property: light-dark(#005348, #83dac9);
-    --color-syntax-punctuation: light-dark(#6e6e6e, #a0a0a0);
-    --color-syntax-background: light-dark(#fafafa, #0a0a0a);
+    --color-syntax-keyword: light-dark(#6b187c, #efa8ff);
+    --color-syntax-string: light-dark(#0b5615, #a4d6a3);
+    --color-syntax-comment: light-dark(#6a6a6a, #9e9e9e);
+    --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-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-background: light-dark(#ffffff, #111111);
     --color-background-surface: light-dark(#ffffff, #262626);
     --color-background-body: light-dark(#f1f1f1, #1b1b1b);
     --color-background-card: light-dark(#ffffff, #1b1b1b);
     --color-background-popover: light-dark(#ffffff, #1b1b1b);
     --color-background-muted: light-dark(#f1f1f1, #1b1b1b);
-    --color-accent: light-dark(#262626, #ebebeb);
+    --color-accent: light-dark(#262626, #f1f1f1);
     --color-accent-muted: light-dark(#f1f1f1, #262626);
-    --color-neutral: light-dark(#0000000F, #FFFFFF1A);
+    --color-neutral: light-dark(#0000000F, #ffffff1A);
     --color-overlay: light-dark(#00000080, #000000CC);
-    --color-overlay-hover: light-dark(#0000000D, #FFFFFF0D);
-    --color-overlay-pressed: light-dark(#0000001A, #FFFFFF1A);
-    --color-text-primary: light-dark(#171717, #fafafa);
-    --color-text-secondary: light-dark(#525252, #a3a3a3);
-    --color-text-disabled: light-dark(#a3a3a3, #525252);
-    --color-text-accent: light-dark(#262626, #ebebeb);
+    --color-overlay-hover: light-dark(#0000000D, #ffffff0D);
+    --color-overlay-pressed: light-dark(#0000001A, #ffffff1A);
+    --color-text-primary: light-dark(#111111, #ffffff);
+    --color-text-secondary: light-dark(#525252, #9e9e9e);
+    --color-text-disabled: light-dark(#9e9e9e, #525252);
+    --color-text-accent: light-dark(#262626, #f1f1f1);
     --color-on-dark: #ffffff;
-    --color-on-light: #171717;
-    --color-on-accent: light-dark(#ffffff, #171717);
-    --color-on-success: light-dark(#ffffff, #171717);
-    --color-on-error: light-dark(#ffffff, #171717);
-    --color-on-warning: #171717;
-    --color-icon-accent: light-dark(#262626, #ebebeb);
-    --color-icon-primary: light-dark(#171717, #fafafa);
-    --color-icon-secondary: light-dark(#737373, #a3a3a3);
-    --color-icon-disabled: light-dark(#a3a3a3, #525252);
-    --color-success: light-dark(#007004, #9fe59b);
-    --color-error: light-dark(#a50c25, #ffc6c1);
-    --color-warning: light-dark(#745b00, #fdcf4f);
-    --color-success-muted: light-dark(#c5e5c0, #84c9803D);
-    --color-error-muted: light-dark(#facecb, #ff9e973D);
-    --color-warning-muted: light-dark(#f8da9d, #deb4333D);
-    --color-border: light-dark(#00000014, #FFFFFF1A);
+    --color-on-light: #111111;
+    --color-on-accent: light-dark(#ffffff, #111111);
+    --color-on-success: light-dark(#ffffff, #111111);
+    --color-on-error: light-dark(#ffffff, #111111);
+    --color-on-warning: #111111;
+    --color-icon-accent: light-dark(#262626, #f1f1f1);
+    --color-icon-primary: light-dark(#111111, #ffffff);
+    --color-icon-secondary: light-dark(#777777, #9e9e9e);
+    --color-icon-disabled: light-dark(#9e9e9e, #525252);
+    --color-success: light-dark(#237028, #a4d6a3);
+    --color-error: light-dark(#9e0015, #ffc4be);
+    --color-warning: light-dark(#745b00, #f8d36a);
+    --color-success-muted: light-dark(#bce0bb, #90ca903D);
+    --color-error-muted: light-dark(#ffc4be, #ff98903D);
+    --color-warning-muted: light-dark(#fae19e, #e2b6233D);
+    --color-border: light-dark(#00000014, #ffffff1A);
     --color-border-emphasized: light-dark(#d4d4d4, #525252);
-    --color-skeleton: light-dark(#ebebeb, #525252);
+    --color-skeleton: light-dark(#f1f1f1, #525252);
     --color-shadow: light-dark(#0000001A, #0000004D);
     --color-tint-hover: light-dark(black, white);
-    --color-background-red: light-dark(#facecb, #ff9e973D);
-    --color-border-red: light-dark(#e6bab8, #ff6f6c);
-    --color-icon-red: light-dark(#89001a, #ff9e97);
-    --color-text-red: light-dark(#89001a, #ffc6c1);
-    --color-background-orange: light-dark(#fad0b5, #ffa2583D);
-    --color-border-orange: light-dark(#e6bda2, #e2883e);
-    --color-icon-orange: light-dark(#6e3500, #ffa258);
-    --color-text-orange: light-dark(#6e3500, #ffc9a2);
-    --color-background-yellow: light-dark(#f8da9d, #deb4333D);
-    --color-border-yellow: light-dark(#e4c279, #c0990e);
-    --color-icon-yellow: light-dark(#584400, #deb433);
-    --color-text-yellow: light-dark(#584400, #fdcf4f);
-    --color-background-green: light-dark(#c5e5c0, #84c9803D);
-    --color-border-green: light-dark(#b2d1ac, #69ad67);
-    --color-icon-green: light-dark(#0c5700, #84c980);
-    --color-text-green: light-dark(#0c5700, #9fe59b);
-    --color-background-teal: light-dark(#a5e3d6, #7ec6b83D);
-    --color-border-teal: light-dark(#94d6c8, #63ab9d);
-    --color-icon-teal: light-dark(#005348, #7ec6b8);
-    --color-text-teal: light-dark(#005348, #99e2d3);
-    --color-background-cyan: light-dark(#a3e0ef, #83c2d43D);
-    --color-border-cyan: light-dark(#91d3e3, #67a7b8);
-    --color-icon-cyan: light-dark(#00505f, #83c2d4);
-    --color-text-cyan: light-dark(#00505f, #9edef0);
-    --color-background-blue: light-dark(#c4ddfb, #9eb7ff3D);
-    --color-border-blue: light-dark(#b1c9e7, #6d9cfe);
-    --color-icon-blue: light-dark(#00458c, #9eb7ff);
-    --color-text-blue: light-dark(#00458c, #c7d3ff);
-    --color-background-purple: light-dark(#eccef3, #f297ff3D);
-    --color-border-purple: light-dark(#d8bbdf, #dd74f0);
-    --color-icon-purple: light-dark(#700084, #f297ff);
-    --color-text-purple: light-dark(#700084, #fac1ff);
-    --color-background-pink: light-dark(#fccadc, #ff99c33D);
-    --color-border-pink: light-dark(#e7b7c8, #f273aa);
-    --color-icon-pink: light-dark(#83004b, #ff99c3);
-    --color-text-pink: light-dark(#83004b, #ffc3da);
-    --color-background-gray: light-dark(#e5e5e5, var(--color-neutral));
+    --color-background-red: light-dark(#ffc4be, #5b2b28);
+    --color-border-red: light-dark(#ffaea7, #fa6762);
+    --color-icon-red: light-dark(#8a0011, #ff9890);
+    --color-text-red: light-dark(#8a0011, #ffaea7);
+    --color-background-orange: light-dark(#ffc7a1, #503424);
+    --color-border-orange: light-dark(#ffc7a1, #df843f);
+    --color-icon-orange: light-dark(#733100, #ff9e55);
+    --color-text-orange: light-dark(#733100, #ffb37e);
+    --color-background-yellow: light-dark(#fae19e, #453a1c);
+    --color-border-yellow: light-dark(#e3c36c, #c29900);
+    --color-icon-yellow: light-dark(#584400, #e2b623);
+    --color-text-yellow: light-dark(#584400, #eec448);
+    --color-background-green: light-dark(#bce0bb, #2b422b);
+    --color-border-green: light-dark(#aad4a9, #6ab26b);
+    --color-icon-green: light-dark(#0b5615, #90ca90);
+    --color-text-green: light-dark(#0b5615, #90ca90);
+    --color-background-teal: light-dark(#a9e2d6, #28413c);
+    --color-border-teal: light-dark(#90d7c8, #4fb1a0);
+    --color-icon-teal: light-dark(#005348, #81c9bb);
+    --color-text-teal: light-dark(#005348, #90d7c8);
+    --color-background-cyan: light-dark(#9ae2f4, #274046);
+    --color-border-cyan: light-dark(#85d5e9, #49adc4);
+    --color-icon-cyan: light-dark(#00505f, #71c7dd);
+    --color-text-cyan: light-dark(#00505f, #85d5e9);
+    --color-background-blue: light-dark(#b9d7ff, #253c5a);
+    --color-border-blue: light-dark(#a1caff, #5aa0f8);
+    --color-icon-blue: light-dark(#00458c, #88bcff);
+    --color-text-blue: light-dark(#00458c, #a1caff);
+    --color-background-purple: light-dark(#f7d5ff, #4a2f51);
+    --color-border-purple: light-dark(#f3bfff, #d885eb);
+    --color-icon-purple: light-dark(#6b187c, #e496f6);
+    --color-text-purple: light-dark(#6b187c, #eaacf8);
+    --color-background-pink: light-dark(#ffc0d7, #572b3d);
+    --color-border-pink: light-dark(#ffc0d7, #fc78b1);
+    --color-icon-pink: light-dark(#83004b, #fd92bd);
+    --color-text-pink: light-dark(#83004b, #ffa9ca);
+    --color-background-gray: light-dark(#e2e2e2, #303030);
     --color-border-gray: light-dark(#d4d4d4, #262626);
-    --color-icon-gray: light-dark(#525252, #a3a3a3);
-    --color-text-gray: light-dark(#262626, #e5e5e5);
+    --color-icon-gray: light-dark(#525252, #9e9e9e);
+    --color-text-gray: light-dark(#262626, #d4d4d4);
     --radius-none: 0px;
     --radius-inner: 0.375rem;
     --radius-element: 0.625rem;
@@ -312,9 +312,19 @@
     --shadow-high: 0 4px 6px light-dark(oklch(0 0 0 / 10%), oklch(0 0 0 / 50%)), 0 12px 24px light-dark(oklch(0 0 0 / 15%), oklch(0 0 0 / 70%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 15%));
     --shadow-inset-hover: inset 0px 0px 0px 2px #0074e24D;
     --shadow-inset-selected: inset 0px 0px 0px 2px #0074e280;
-    --shadow-inset-success: inset 0px 0px 0px 2px #1981004D;
-    --shadow-inset-warning: inset 0px 0px 0px 2px #ffce2f4D;
-    --shadow-inset-error: inset 0px 0px 0px 2px #e33f4a4D;
+    --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;
+    --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);
   }
 
   .astryx-heading.level-1 {
@@ -428,11 +438,13 @@
   .astryx-button.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.info {
-    background-color: light-dark(#0074e2, #6d9cfe);
-    color: light-dark(#ffffff, #171717);
+    background-color: var(--astryx-theme-neutral-color-status-fill-accent);
+    color: var(--color-on-accent);
   }
 
   .astryx-badge.neutral {
@@ -441,18 +453,18 @@
   }
 
   .astryx-badge.success {
-    background-color: light-dark(#198100, #64af4c);
-    color: light-dark(#ffffff, #171717);
+    background-color: var(--astryx-theme-neutral-color-status-fill-success);
+    color: var(--color-on-success);
   }
 
   .astryx-badge.warning {
-    background-color: #ffce2f;
-    color: #171717;
+    background-color: var(--astryx-theme-neutral-color-status-fill-warning);
+    color: var(--color-on-warning);
   }
 
   .astryx-badge.error {
-    background-color: light-dark(#c9303a, #ff705d);
-    color: light-dark(#ffffff, #171717);
+    background-color: var(--astryx-theme-neutral-color-status-fill-error);
+    color: var(--color-on-error);
   }
 
   .astryx-badge.red {
@@ -506,23 +518,58 @@
   }
 
   .astryx-statusdot.success {
-    background-color: light-dark(#198100, #64af4c);
+    background-color: var(--astryx-theme-neutral-color-status-fill-success);
   }
 
   .astryx-statusdot.warning {
-    background-color: #ffce2f;
+    background-color: var(--astryx-theme-neutral-color-status-fill-warning);
   }
 
   .astryx-statusdot.error {
-    background-color: light-dark(#c9303a, #ff705d);
+    background-color: var(--astryx-theme-neutral-color-status-fill-error);
   }
 
   .astryx-statusdot.accent {
-    background-color: light-dark(#0074e2, #6d9cfe);
+    background-color: var(--astryx-theme-neutral-color-status-fill-accent);
+  }
+
+  .astryx-avatar-status-dot.success {
+    background-color: var(--astryx-theme-neutral-color-status-fill-success);
+  }
+
+  .astryx-avatar-status-dot.error {
+    background-color: var(--astryx-theme-neutral-color-status-fill-error);
+  }
+
+  .astryx-segmented-control {
+    padding: var(--spacing-1);
+    --_segmented-control-padding: var(--spacing-1);
+  }
+
+  .astryx-segmented-control-item.sm {
+    height: calc(var(--size-element-sm) - 8px);
+  }
+
+  .astryx-segmented-control-item.md {
+    height: calc(var(--size-element-md) - 8px);
+  }
+
+  .astryx-segmented-control-item.lg {
+    height: calc(var(--size-element-lg) - 8px);
+  }
+
+  .astryx-segmented-control-item.selected {
+    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.info {
-    --color-accent-muted: var(--color-background-blue);
+    --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);
@@ -546,6 +593,22 @@
     --color-error: var(--color-text-red);
   }
 
+  .astryx-step-indicator.accent {
+    --color-accent: var(--astryx-theme-neutral-color-status-fill-accent);
+  }
+
+  .astryx-step-indicator.success {
+    --color-success: var(--astryx-theme-neutral-color-status-fill-success);
+  }
+
+  .astryx-step-indicator.warning {
+    --color-warning: var(--astryx-theme-neutral-color-status-fill-warning);
+  }
+
+  .astryx-step-indicator.error {
+    --color-error: var(--astryx-theme-neutral-color-status-fill-error);
+  }
+
   .astryx-switch {
     --color-background-gray: var(--color-border-emphasized);
   }
@@ -555,19 +618,19 @@
   }
 
   .astryx-progressbar.accent {
-    --color-accent: #0074e2;
+    --color-accent: var(--astryx-theme-neutral-color-status-fill-accent);
   }
 
   .astryx-progressbar.success {
-    --color-success: #198100;
+    --color-success: var(--astryx-theme-neutral-color-status-fill-success);
   }
 
   .astryx-progressbar.warning {
-    --color-warning: #ffce2f;
+    --color-warning: var(--astryx-theme-neutral-color-status-fill-warning);
   }
 
   .astryx-progressbar.error {
-    --color-error: #c9303a;
+    --color-error: var(--astryx-theme-neutral-color-status-fill-error);
   }
 
   .astryx-card {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/theme-neutral",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "displayName": "Neutral Theme",
   "private": false,
   "description": "Restrained warm grays. Minimal and quiet, so the content stays the focus.",
@@ -43,17 +43,18 @@
   },
   "files": [
     "dist",
-    "src"
+    "src",
+    "palette.config.json"
   ],
   "dependencies": {
     "lucide-react": "^1.18.0"
   },
   "peerDependencies": {
-    "@astryxdesign/core": "0.5.2",
+    "@astryxdesign/core": "0.5.3",
     "react": ">=19"
   },
   "devDependencies": {
-    "@astryxdesign/cli": "0.5.2"
+    "@astryxdesign/cli": "0.5.3"
   },
   "module": "./dist/source.mjs",
   "scripts": {

package/palette.config.json

@@ -0,0 +1,122 @@
+{
+  "recipe": "astryx-oklch-v1",
+  "vibrancy": 50,
+  "neutralProfile": "neutral-v1",
+  "modeStrategy": "light-and-dark",
+  "darkChromaTaper": {
+    "edgeMultiplier": 0.5,
+    "throughStop": 25,
+    "recoverAtStop": 60,
+    "familyMultipliers": {
+      "yellow": 0.65
+    }
+  },
+  "stops": [
+    0,
+    5,
+    10,
+    15,
+    20,
+    25,
+    30,
+    35,
+    40,
+    45,
+    50,
+    55,
+    60,
+    65,
+    70,
+    75,
+    80,
+    85,
+    90,
+    95,
+    100
+  ],
+  "families": [
+    {
+      "id": "neutral",
+      "name": "Neutral",
+      "seed": "#777777",
+      "kind": "neutral"
+    },
+    {
+      "id": "red",
+      "name": "Red",
+      "seed": "#d62830"
+    },
+    {
+      "id": "orange",
+      "name": "Orange",
+      "seed": "#d57113"
+    },
+    {
+      "id": "yellow",
+      "name": "Yellow",
+      "seed": "#f8c723",
+      "anchors": [
+        {
+          "mode": "light",
+          "stop": 80,
+          "color": "#f8c723",
+          "policy": "flexible"
+        }
+      ]
+    },
+    {
+      "id": "green",
+      "name": "Green",
+      "seed": "#358a3a",
+      "anchors": [
+        {
+          "mode": "light",
+          "stop": 50,
+          "color": "#358a3a",
+          "policy": "flexible"
+        }
+      ]
+    },
+    {
+      "id": "teal",
+      "name": "Teal",
+      "seed": "#0c7365"
+    },
+    {
+      "id": "cyan",
+      "name": "Cyan",
+      "seed": "#0c6f82"
+    },
+    {
+      "id": "blue",
+      "name": "Blue",
+      "seed": "#0074e2",
+      "anchors": [
+        {
+          "mode": "light",
+          "stop": 50,
+          "color": "#0074e2",
+          "policy": "exact"
+        }
+      ]
+    },
+    {
+      "id": "purple",
+      "name": "Purple",
+      "seed": "#980fb2",
+      "anchors": [
+        {
+          "mode": "light",
+          "stop": 50,
+          "color": "#980fb2",
+          "policy": "flexible"
+        }
+      ]
+    },
+    {
+      "id": "pink",
+      "name": "Pink",
+      "seed": "#b10e69"
+    }
+  ]
+}

package/src/neutralPaletteRefs.generated.ts

@@ -0,0 +1,50 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+// Generated from neutralPalettes.generated.ts for the stops used by
+// neutralTheme.ts. Keep the complete palette available for authoring and
+// audits, but do not make consumers pay for unused palette stops.
+// prettier-ignore
+export const neutralPaletteRefs = {
+  purple: {
+    light: {30: '#6b187c', 70: '#d885eb', 75: '#e496f6', 80: '#efa8ff', 85: '#f3bfff', 90: '#f7d5ff'},
+    dark: {25: '#4a2f51', 80: '#eaacf8'},
+  },
+  green: {
+    light: {30: '#0b5615', 40: '#237028', 45: '#2f7d33', 65: '#6ab26b', 75: '#90ca90', 80: '#a4d6a3'},
+    dark: {25: '#2b422b', 80: '#aad4a9', 85: '#bce0bb'},
+  },
+  neutral: {
+    light: {0: '#000000', 5: '#111111', 15: '#262626', 35: '#525252', 45: '#6a6a6a', 50: '#777777', 65: '#9e9e9e', 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'},
+  },
+  orange: {
+    light: {30: '#733100', 75: '#ff9e55', 85: '#ffc7a1'},
+    dark: {25: '#503424', 65: '#df843f', 80: '#ffb37e'},
+  },
+  blue: {
+    light: {30: '#00458c', 50: '#0074e2', 80: '#a1caff', 85: '#b9d7ff'},
+    dark: {25: '#253c5a', 65: '#5aa0f8', 75: '#88bcff', 80: '#a1caff'},
+  },
+  red: {
+    light: {30: '#8a0011', 35: '#9e0015', 55: '#de4745', 65: '#fa6762', 70: '#ff7f77', 80: '#ffaea7', 85: '#ffc4be'},
+    dark: {25: '#5b2b28', 65: '#ee736c', 75: '#ff9890', 80: '#ffaea7', 85: '#ffc4be'},
+  },
+  yellow: {
+    light: {30: '#584400', 40: '#745b00', 65: '#c29900', 75: '#e2b623', 80: '#eec448', 85: '#f8d36a'},
+    dark: {25: '#453a1c', 80: '#e3c36c', 90: '#fae19e'},
+  },
+  teal: {
+    light: {30: '#005348', 80: '#90d7c8', 85: '#a9e2d6'},
+    dark: {25: '#28413c', 65: '#4fb1a0', 75: '#81c9bb'},
+  },
+  cyan: {
+    dark: {25: '#274046', 65: '#49adc4', 75: '#71c7dd', 80: '#85d5e9', 85: '#9ae2f4'},
+    light: {30: '#00505f'},
+  },
+  pink: {
+    light: {30: '#83004b', 70: '#fc78b1', 85: '#ffc0d7'},
+    dark: {25: '#572b3d', 75: '#fd92bd', 80: '#ffa9ca'},
+  },
+} as const;
+
+export default neutralPaletteRefs;