@nattstack/ui 0.1.2 → 0.1.3

package/dist/components/stylex.css

@@ -223,8 +223,8 @@
     border-color: #0000;
   }
 
-  .x7n6cpb:hover {
-    border-color: var(--color-gray-6);
+  .x17d5om2:hover {
+    border-color: var(--color-neutral-6);
   }
 }
 
@@ -269,40 +269,40 @@
     background-color: #0000;
   }
 
-  .x1h73wb5 {
-    background-color: var(--color-bg-shell-inner);
+  .x1gdbxxd {
+    background-color: var(--color-accent-9);
   }
 
-  .x1m4xfpy {
-    background-color: var(--color-border);
+  .x13xp1pn {
+    background-color: var(--color-bg-inverse);
   }
 
-  .xm8sm7k {
-    background-color: var(--color-gray-1);
+  .x1h73wb5 {
+    background-color: var(--color-bg-shell-inner);
   }
 
-  .x1escjlh {
-    background-color: var(--color-gray-12);
+  .x1m4xfpy {
+    background-color: var(--color-border);
   }
 
-  .x2j0cto {
-    background-color: var(--color-gray-3);
+  .x1qibisb {
+    background-color: var(--color-neutral-1);
   }
 
-  .x1tcrco7 {
-    background-color: var(--color-gray-4);
+  .xwwl56u {
+    background-color: var(--color-neutral-12);
   }
 
-  .xfl8pkj {
-    background-color: var(--color-gray-6);
+  .x191x1kn {
+    background-color: var(--color-neutral-3);
   }
 
-  .xa4c8pb {
-    background-color: var(--color-primary-9);
+  .x1hhrpk5 {
+    background-color: var(--color-neutral-4);
   }
 
-  .x191mfzf {
-    background-color: var(--color-tooltip-bg);
+  .x1fkpbz {
+    background-color: var(--color-neutral-6);
   }
 
   .x12peec7 {
@@ -338,24 +338,32 @@
     color: #0000;
   }
 
-  .xf4b43d {
-    color: var(--color-gray-1);
+  .xnucuqp {
+    color: var(--color-accent-9);
+  }
+
+  .xa9avxy {
+    color: var(--color-neutral-1);
+  }
+
+  .x15ppyrk {
+    color: var(--color-neutral-11);
   }
 
-  .x1dtbpl2 {
-    color: var(--color-gray-11);
+  .x1s2xpon {
+    color: var(--color-neutral-12);
   }
 
-  .x197k1c5 {
-    color: var(--color-gray-12);
+  .xszoz02 {
+    color: var(--color-neutral-9);
   }
 
-  .x1vpwubs {
-    color: var(--color-gray-9);
+  .x1wkzfu4 {
+    color: var(--color-neutral-on-accent);
   }
 
-  .x9i09x5 {
-    color: var(--color-primary-9);
+  .x1jiohqz {
+    color: var(--color-text-inverse);
   }
 
   .x1tgivj0 {
@@ -366,10 +374,6 @@
     color: var(--color-text-secondary);
   }
 
-  .x1x01sck {
-    color: var(--color-tooltip);
-  }
-
   .xfex06f {
     column-gap: 8px;
   }
@@ -538,16 +542,16 @@
     outline-color: #0000;
   }
 
-  .x43yjvr {
-    outline-color: var(--color-outline);
+  .x16u5ykr {
+    outline-color: var(--color-accent-9);
   }
 
-  .x1luwoo2 {
-    outline-color: var(--color-primary-9);
+  .xj8wus6 {
+    outline-color: var(--color-accent);
   }
 
-  .x1du7r5n {
-    outline-color: var(--color-primary);
+  .x43yjvr {
+    outline-color: var(--color-outline);
   }
 
   .x2ssjo2 {
@@ -658,8 +662,8 @@
     stroke-width: 3px;
   }
 
-  .xqvyd8v {
-    stroke: #fff;
+  .xzeoyw6 {
+    stroke: var(--color-neutral-on-accent);
   }
 
   .x2b8uid {
@@ -796,8 +800,8 @@
     z-index: 50;
   }
 
-  .xpy517o.xpy517o:where(:has(.x-default-marker:disabled)) {
-    background-color: var(--color-gray-3);
+  .xp2pw04.xp2pw04:where(:has(.x-default-marker:disabled)) {
+    background-color: var(--color-neutral-3);
   }
 
   .x1beebc2.x1beebc2:where(:has(.x-default-marker:disabled)) {
@@ -808,56 +812,60 @@
     opacity: .5;
   }
 
-  .xalcron:hover:not(:disabled) {
-    background-color: color-mix(in oklab,var(--color-gray-12) 100%,var(--color-gray-1) 25%);
+  .xikox1u:hover:not(:disabled) {
+    background-color: color-mix(in oklab,var(--color-neutral-12) 100%,var(--color-neutral-1) 25%);
   }
 
   .x18ejm1c[data-active] {
     background-color: #0000;
   }
 
-  .x160dr52[data-highlighted][data-disabled]:not(:hover), .x1cgdd2a[data-highlighted]:not([data-disabled]), .xhsv7s5[data-pressed], .xm4hijy[data-popup-open], .xoepl9e[data-disabled] {
-    background-color: var(--color-gray-3);
+  .x3t9pfk:hover:not(:disabled) {
+    background-color: var(--color-accent-10);
   }
 
-  .x1pflddp:hover:not(:disabled) {
-    background-color: var(--color-gray-4);
+  .xic19eo[data-checked] {
+    background-color: var(--color-accent-9);
   }
 
-  .x1hhl9jx[data-checked] {
-    background-color: var(--color-primary-9);
+  .x1unksgd[data-checked] {
+    background-color: var(--color-accent);
   }
 
-  .x1qny0gl[data-checked] {
-    background-color: var(--color-primary);
+  .x1jkuzjh[data-popup-open], .x1tuk5u7[data-highlighted]:not([data-disabled]), .x7fdak6[data-pressed], .xu5tege[data-disabled], .xxmzxow[data-highlighted][data-disabled]:not(:hover) {
+    background-color: var(--color-neutral-3);
+  }
+
+  .xdx07ev:hover:not(:disabled) {
+    background-color: var(--color-neutral-4);
   }
 
   .xofwk0p[data-popup-open] {
     box-shadow: inset 0 0 0 1px #0000;
   }
 
-  .x1ytwql3:hover:not([data-disabled], :has(:disabled)), .xhxsgan:enabled[data-is-active="true"], .xwsgaks:hover:not(:disabled, [data-popup-open]) {
-    box-shadow: inset 0 0 0 1px var(--color-gray-6);
+  .x17jnma7[data-pressed] {
+    box-shadow: inset 0 0 0 1px var(--color-accent);
   }
 
-  .x11uh7ir[data-pressed] {
-    box-shadow: inset 0 0 0 1px var(--color-primary);
+  .x1235ddk:hover:not([data-disabled], :has(:disabled)), .x19m32tz:hover:not(:disabled, [data-popup-open]), .x9frp66:enabled[data-is-active="true"] {
+    box-shadow: inset 0 0 0 1px var(--color-neutral-6);
   }
 
   .x7auhu6:hover:not(:disabled) {
     box-shadow: none;
   }
 
-  .x1dua4oe[data-active] {
-    color: var(--color-gray-1);
+  .x1gd7t8[data-active] {
+    color: var(--color-neutral-1);
   }
 
-  .x58zf59[data-active] {
-    color: var(--color-gray-12);
+  .xrvx2ja[data-active] {
+    color: var(--color-neutral-12);
   }
 
-  .x1juq307[data-placeholder], .xn64az2.xn64az2:where(.x-default-marker[data-placeholder] *) {
-    color: var(--color-gray-9);
+  .x1ytjifj.x1ytjifj:where(.x-default-marker[data-placeholder] *), .xgyj9p2[data-placeholder] {
+    color: var(--color-neutral-9);
   }
 
   .xp9l56k[data-pressed] {
@@ -908,16 +916,16 @@
     outline-color: #e5484d;
   }
 
-  .xfcj4rt:focus-visible {
-    outline-color: var(--color-outline);
+  .x1arrva2:focus-visible {
+    outline-color: var(--color-accent-9);
   }
 
-  .x1mp0jls:focus-visible {
-    outline-color: var(--color-primary-9);
+  .x1wcu262:focus-within, .xzunyri:focus-visible {
+    outline-color: var(--color-accent);
   }
 
-  .x1oifg:focus-within, .xr5th1z:focus-visible {
-    outline-color: var(--color-primary);
+  .xfcj4rt:focus-visible {
+    outline-color: var(--color-outline);
   }
 
   .x784prv:focus-visible {
@@ -977,8 +985,8 @@
     user-select: none;
   }
 
-  .xfi2sx2:disabled {
-    background-color: var(--color-gray-3);
+  .x1kwllon:disabled {
+    background-color: var(--color-neutral-3);
   }
 
   .x1s07b3s:disabled {
@@ -993,16 +1001,16 @@
     opacity: var(--opacity-picker-disabled);
   }
 
-  .x12icss0:hover {
-    background-color: var(--color-gray-3);
+  .xh52p7d:hover {
+    background-color: var(--color-neutral-3);
   }
 
-  .x135mljp:hover {
-    background-color: var(--color-gray-4);
+  .x193yea9:hover {
+    background-color: var(--color-neutral-4);
   }
 
-  .x1srrrpr:hover {
-    color: var(--color-gray-12);
+  .x11e09nm:hover {
+    color: var(--color-neutral-12);
   }
 
   @media (width <= 640px) {
@@ -1035,8 +1043,8 @@
     }
   }
 
-  .x1rlgnxn:enabled:hover {
-    box-shadow: inset 0 0 0 1px var(--color-gray-6);
+  .x1kqw4io:enabled:hover {
+    box-shadow: inset 0 0 0 1px var(--color-neutral-6);
   }
 
   @media (width <= 640px) {
@@ -1053,14 +1061,14 @@
     }
   }
 
-  .xho1339:enabled:focus, .xnn6d81:enabled:active {
-    box-shadow: inset 0 0 0 1px var(--color-gray-6);
+  .x8k5xug:enabled:focus, .x1myrugz:enabled:active {
+    box-shadow: inset 0 0 0 1px var(--color-neutral-6);
   }
 }
 
 @layer components.priority5 {
-  .x1s77fqg {
-    border-bottom-color: var(--color-gray-4);
+  .xazlz85 {
+    border-bottom-color: var(--color-neutral-4);
   }
 
   .x17sffzf {
@@ -1347,8 +1355,8 @@
     background-color: currentColor;
   }
 
-  .x1ta7s2x::placeholder {
-    color: var(--color-gray-9);
+  .x53zao0::placeholder {
+    color: var(--color-neutral-9);
   }
 
   .x1s928wv:after {

package/dist/components/switch/switch.stylex.js

@@ -1,13 +1,13 @@
 //#region src/components/switch/switch.stylex.ts
 const switchStyles = {
 	base: {
-		kWkggS: "x1hhl9jx xfl8pkj",
+		kWkggS: "xic19eo x1fkpbz",
 		kaIpWk: "x10hpsqq",
 		kkrTdU: "x5ezrf1 x1ypdohk",
 		k1xSpc: "x78zum5",
 		kmuXW: "x2lah0s",
 		kSiTet: "xxh3kiz x1hc1fzr",
-		kjBf7l: "x1luwoo2",
+		kjBf7l: "x16u5ykr",
 		kInvED: "x1hl8ikr",
 		k3XXqK: "xaatb59",
 		kMeerF: "x784prv x1k57tk5",

package/dist/components/tabs/tabs-panel.stylex.js

@@ -2,7 +2,7 @@
 const tabsPanelStyles = { base: {
 	k1xSpc: "x78zum5",
 	kXwgrk: "xdt5ytf",
-	kjBf7l: "x1mp0jls x1uczgqu",
+	kjBf7l: "x1arrva2 x1uczgqu",
 	kInvED: "x2ssjo2",
 	k3XXqK: "xaatb59",
 	kMeerF: "x784prv x1k57tk5",

package/dist/components/tabs-pill/tabs-pill-indicator.stylex.js

@@ -1,6 +1,6 @@
 //#region src/components/tabs-pill/tabs-pill-indicator.stylex.ts
 const tabsPillIndicatorStyles = { base: {
-	kWkggS: "x1escjlh",
+	kWkggS: "xwwl56u",
 	kaIpWk: "x4pepcl",
 	kZKoxP: "x1gezbiy",
 	kbCHJM: "xvbikie",

package/dist/components/tabs-pill/tabs-pill-tab.stylex.js

@@ -1,7 +1,7 @@
 //#region src/components/tabs-pill/tabs-pill-tab.stylex.ts
 const tabsPillTabStyles = {
 	background: {
-		kWkggS: "x2j0cto",
+		kWkggS: "x191x1kn",
 		kpwlN0: "x10a8y8t",
 		kVAEAm: "x10l6tqk",
 		kY2c9j: "x1fdshc9",
@@ -10,9 +10,9 @@ const tabsPillTabStyles = {
 	base: {
 		"--border-radius": "xq5qtd1",
 		kGNEyG: "x6s0dn4",
-		kWkggS: "x135mljp x18ejm1c xjbqb8w",
+		kWkggS: "x193yea9 x18ejm1c xjbqb8w",
 		kaIpWk: "xujip75",
-		kMwMTN: "x1dua4oe x197k1c5",
+		kMwMTN: "x1gd7t8 x1s2xpon",
 		k1C7PZ: "xfex06f",
 		kkrTdU: "x1ypdohk",
 		k1xSpc: "x78zum5",
@@ -21,7 +21,7 @@ const tabsPillTabStyles = {
 		k63SB2: "x10p5zqr",
 		kZKoxP: "x1vqgdyp",
 		kjj79g: "xl56j7k",
-		kjBf7l: "x1luwoo2",
+		kjBf7l: "x16u5ykr",
 		kInvED: "xr2mjdv",
 		k3XXqK: "xaatb59",
 		kMeerF: "x784prv x1k57tk5",

package/dist/components/tabs-segmented/tabs-segmented-indicator.stylex.js

@@ -1,6 +1,6 @@
 //#region src/components/tabs-segmented/tabs-segmented-indicator.stylex.ts
 const tabsSegmentedIndicatorStyles = { base: {
-	kWkggS: "xm8sm7k",
+	kWkggS: "x1qibisb",
 	kaIpWk: "x1q4ynmn",
 	kZKoxP: "x1gezbiy",
 	kbCHJM: "xvbikie",

package/dist/components/tabs-segmented/tabs-segmented-list.stylex.js

@@ -1,6 +1,6 @@
 //#region src/components/tabs-segmented/tabs-segmented-list.stylex.ts
 const tabsSegmentedListStyles = { base: {
-	kWkggS: "x2j0cto",
+	kWkggS: "x191x1kn",
 	kaIpWk: "x4pepcl",
 	k1xSpc: "x78zum5",
 	kZKoxP: "x1vqgdyp",

package/dist/components/tabs-segmented/tabs-segmented-tab.stylex.js

@@ -2,7 +2,7 @@
 const tabsSegmentedTabStyles = { base: {
 	kGNEyG: "x6s0dn4",
 	kaIpWk: "x1q4ynmn",
-	kMwMTN: "x1srrrpr x58zf59 x1dtbpl2",
+	kMwMTN: "x11e09nm xrvx2ja x15ppyrk",
 	k1C7PZ: "xfex06f",
 	kkrTdU: "x1ypdohk",
 	k1xSpc: "x78zum5",
@@ -11,7 +11,7 @@ const tabsSegmentedTabStyles = { base: {
 	k63SB2: "x10p5zqr",
 	kZKoxP: "x5yr21d",
 	kjj79g: "xl56j7k",
-	kjBf7l: "x1luwoo2",
+	kjBf7l: "x16u5ykr",
 	kInvED: "xr2mjdv",
 	k3XXqK: "xaatb59",
 	kMeerF: "x784prv x1k57tk5",

package/dist/components/tabs-underline/tabs-underline-indicator.stylex.js

@@ -1,6 +1,6 @@
 //#region src/components/tabs-underline/tabs-underline-indicator.stylex.ts
 const tabsUnderlineIndicatorStyles = { base: {
-	kWkggS: "xa4c8pb",
+	kWkggS: "x1gdbxxd",
 	krVfgx: "x1ey2m1c",
 	kZKoxP: "x36qwtl",
 	kbCHJM: "xvbikie",

package/dist/components/tabs-underline/tabs-underline-list.stylex.js

@@ -1,6 +1,6 @@
 //#region src/components/tabs-underline/tabs-underline-list.stylex.ts
 const tabsUnderlineListStyles = { base: {
-	kL6WhQ: "x1s77fqg",
+	kL6WhQ: "xazlz85",
 	kfdmCh: "x1q0q8m5",
 	kt9PQ7: "xso031l",
 	k1xSpc: "x78zum5",

package/dist/components/tabs-underline/tabs-underline-tab.stylex.js

@@ -2,7 +2,7 @@
 const tabsUnderlineTabStyles = { base: {
 	kGNEyG: "x6s0dn4",
 	kaIpWk: "xur7f20",
-	kMwMTN: "x1srrrpr x58zf59 x1dtbpl2",
+	kMwMTN: "x11e09nm xrvx2ja x15ppyrk",
 	k1C7PZ: "xfex06f",
 	kkrTdU: "x1ypdohk",
 	k1xSpc: "x78zum5",
@@ -10,7 +10,7 @@ const tabsUnderlineTabStyles = { base: {
 	kGuDYH: "xif65rj",
 	k63SB2: "x10p5zqr",
 	k1K539: "xzueoph",
-	kjBf7l: "x1luwoo2",
+	kjBf7l: "x16u5ykr",
 	kInvED: "x2ssjo2",
 	k3XXqK: "xaatb59",
 	kMeerF: "x784prv x1k57tk5",

package/dist/components/toggle-group/toggle-group-item.stylex.js

@@ -2,9 +2,9 @@
 const toggleGroupItemStyles = {
 	base: {
 		kGNEyG: "x6s0dn4",
-		kWkggS: "x1pflddp xhsv7s5 xjbqb8w",
+		kWkggS: "xdx07ev x7fdak6 xjbqb8w",
 		kaIpWk: "x1q4ynmn",
-		kGVxlE: "x11uh7ir x1gnnqk1",
+		kGVxlE: "x17jnma7 x1gnnqk1",
 		kMwMTN: "xp9l56k xv1l7n4",
 		k1C7PZ: "xfex06f",
 		kkrTdU: "x1s07b3s x1ypdohk",

package/dist/components/tooltip/tooltip-popup.stylex.js

@@ -1,10 +1,10 @@
 //#region src/components/tooltip/tooltip-popup.stylex.ts
 const tooltipPopupStyles = {
 	base: {
-		kWkggS: "x191mfzf",
+		kWkggS: "x13xp1pn",
 		kaIpWk: "xur7f20",
 		kGVxlE: "x1bbn379",
-		kMwMTN: "x1x01sck",
+		kMwMTN: "x1jiohqz",
 		kGuDYH: "x4z9k3i",
 		k63SB2: "x10p5zqr",
 		kSiTet: "x1pimrze x1hc1fzr",

package/dist/tailwind-colors/color.css

@@ -1,102 +1,67 @@
-@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant dark (&:where([data-color-theme="dark"], [data-color-theme="dark"] *));
 
-@theme {
+/*
+    Every value here aliases a runtime variable of the same name, set by the
+    ./colors scales. The flags matter:
+
+    - `inline` inlines the var() value into generated utilities.
+      https://tailwindcss.com/docs/theme#referencing-other-variables
+    - `reference` stops Tailwind from emitting the declarations into :root,
+      where `--color-accent-1: var(--color-accent-1)` would be a self-reference
+      that resolves to invalid. Not on the docs site; the composed flags are
+      documented in https://github.com/tailwindlabs/tailwindcss/pull/14095
+      ("reference (so the variables aren't generated) and inline").
+*/
+@theme inline reference {
   /* Reset ============================================= */
   --color-\*: initial;
 
-  /* Gray ============================================== */
-  --color-gray-1: var(--color-gray-1);
-  --color-gray-2: var(--color-gray-2);
-  --color-gray-3: var(--color-gray-3);
-  --color-gray-4: var(--color-gray-4);
-  --color-gray-5: var(--color-gray-5);
-  --color-gray-6: var(--color-gray-6);
-  --color-gray-7: var(--color-gray-7);
-  --color-gray-8: var(--color-gray-8);
-  --color-gray-9: var(--color-gray-9);
-  --color-gray-10: var(--color-gray-10);
-  --color-gray-11: var(--color-gray-11);
-  --color-gray-12: var(--color-gray-12);
-
-  --color-gray-light-1: var(--color-gray-light-1);
-  --color-gray-light-2: var(--color-gray-light-2);
-  --color-gray-light-3: var(--color-gray-light-3);
-  --color-gray-light-4: var(--color-gray-light-4);
-  --color-gray-light-5: var(--color-gray-light-5);
-  --color-gray-light-6: var(--color-gray-light-6);
-  --color-gray-light-7: var(--color-gray-light-7);
-  --color-gray-light-8: var(--color-gray-light-8);
-  --color-gray-light-9: var(--color-gray-light-9);
-  --color-gray-light-10: var(--color-gray-light-10);
-  --color-gray-light-11: var(--color-gray-light-11);
-  --color-gray-light-12: var(--color-gray-light-12);
-
-  --color-gray-dark-1: var(--color-gray-dark-1);
-  --color-gray-dark-2: var(--color-gray-dark-2);
-  --color-gray-dark-3: var(--color-gray-dark-3);
-  --color-gray-dark-4: var(--color-gray-dark-4);
-  --color-gray-dark-5: var(--color-gray-dark-5);
-  --color-gray-dark-6: var(--color-gray-dark-6);
-  --color-gray-dark-7: var(--color-gray-dark-7);
-  --color-gray-dark-8: var(--color-gray-dark-8);
-  --color-gray-dark-9: var(--color-gray-dark-9);
-  --color-gray-dark-10: var(--color-gray-dark-10);
-  --color-gray-dark-11: var(--color-gray-dark-11);
-  --color-gray-dark-12: var(--color-gray-dark-12);
-
-  /* Primary =========================================== */
-  --color-primary-1: var(--color-primary-1);
-  --color-primary-2: var(--color-primary-2);
-  --color-primary-3: var(--color-primary-3);
-  --color-primary-4: var(--color-primary-4);
-  --color-primary-5: var(--color-primary-5);
-  --color-primary-6: var(--color-primary-6);
-  --color-primary-7: var(--color-primary-7);
-  --color-primary-8: var(--color-primary-8);
-  --color-primary-9: var(--color-primary-9);
-  --color-primary-10: var(--color-primary-10);
-  --color-primary-11: var(--color-primary-11);
-  --color-primary-12: var(--color-primary-12);
+  /* Neutral =========================================== */
+  --color-neutral-1: var(--color-neutral-1);
+  --color-neutral-2: var(--color-neutral-2);
+  --color-neutral-3: var(--color-neutral-3);
+  --color-neutral-4: var(--color-neutral-4);
+  --color-neutral-5: var(--color-neutral-5);
+  --color-neutral-6: var(--color-neutral-6);
+  --color-neutral-7: var(--color-neutral-7);
+  --color-neutral-8: var(--color-neutral-8);
+  --color-neutral-9: var(--color-neutral-9);
+  --color-neutral-10: var(--color-neutral-10);
+  --color-neutral-11: var(--color-neutral-11);
+  --color-neutral-12: var(--color-neutral-12);
 
-  --color-primary-light-1: var(--color-primary-light-1);
-  --color-primary-light-2: var(--color-primary-light-2);
-  --color-primary-light-3: var(--color-primary-light-3);
-  --color-primary-light-4: var(--color-primary-light-4);
-  --color-primary-light-5: var(--color-primary-light-5);
-  --color-primary-light-6: var(--color-primary-light-6);
-  --color-primary-light-7: var(--color-primary-light-7);
-  --color-primary-light-8: var(--color-primary-light-8);
-  --color-primary-light-9: var(--color-primary-light-9);
-  --color-primary-light-10: var(--color-primary-light-10);
-  --color-primary-light-11: var(--color-primary-light-11);
-  --color-primary-light-12: var(--color-primary-light-12);
+  /* Accent ============================================ */
+  --color-accent-1: var(--color-accent-1);
+  --color-accent-2: var(--color-accent-2);
+  --color-accent-3: var(--color-accent-3);
+  --color-accent-4: var(--color-accent-4);
+  --color-accent-5: var(--color-accent-5);
+  --color-accent-6: var(--color-accent-6);
+  --color-accent-7: var(--color-accent-7);
+  --color-accent-8: var(--color-accent-8);
+  --color-accent-9: var(--color-accent-9);
+  --color-accent-10: var(--color-accent-10);
+  --color-accent-11: var(--color-accent-11);
+  --color-accent-12: var(--color-accent-12);
 
-  --color-primary-dark-1: var(--color-primary-dark-1);
-  --color-primary-dark-2: var(--color-primary-dark-2);
-  --color-primary-dark-3: var(--color-primary-dark-3);
-  --color-primary-dark-4: var(--color-primary-dark-4);
-  --color-primary-dark-5: var(--color-primary-dark-5);
-  --color-primary-dark-6: var(--color-primary-dark-6);
-  --color-primary-dark-7: var(--color-primary-dark-7);
-  --color-primary-dark-8: var(--color-primary-dark-8);
-  --color-primary-dark-9: var(--color-primary-dark-9);
-  --color-primary-dark-10: var(--color-primary-dark-10);
-  --color-primary-dark-11: var(--color-primary-dark-11);
-  --color-primary-dark-12: var(--color-primary-dark-12);
+  --color-neutral-on-accent: var(--color-neutral-on-accent);
 
   /* Semantic ========================================== */
-  --color-gray: var(--color-gray);
-  --color-primary: var(--color-primary);
+  --color-neutral: var(--color-neutral);
+  --color-accent: var(--color-accent);
+
+  --color-border: var(--color-border);
+  --color-outline: var(--color-outline);
 
   --color-bg-primary: var(--color-bg-primary);
   --color-bg-secondary: var(--color-bg-secondary);
   --color-bg-shell-outer: var(--color-bg-shell-outer);
   --color-bg-shell-inner: var(--color-bg-shell-inner);
-
-  --color-border: var(--color-border);
+  --color-bg-inverse: var(--color-bg-inverse);
 
   --color-text-primary: var(--color-text-primary);
   --color-text-secondary: var(--color-text-secondary);
+  --color-text-inverse: var(--color-text-inverse);
 
   --color-success: var(--color-success);
   --color-warning: var(--color-warning);