@inchurch/matcha-theme 21.4.0 → 22.1.0

package/tokens/_primitives.scss

@@ -1,98 +1,98 @@
-// ⚠️ ARQUIVO GERADO — não editar à mão.
-// Fonte: tokens/matcha/primitives/colors.json  ·  Gerador: scripts/matcha-tokens/gen-primitives.js
-// Camada 1 (primitivas) da arquitetura de tema em runtime. Mode-agnostic.
-// Emite as cores cruas como CSS custom properties em :root; a Camada 2 (semânticas)
-// aponta para estas via var(--matcha-prim-*).
-
-$matcha-primitives: (
-  "red": ("200": #ef9a9a, "a700": #c81010),
-  "pink": ("600": #d81b60),
-  "purple": ("500": #9c27b0),
-  "blue": ("100": #bbdefb, "200": #90caf9, "300": #64b5f6, "350": #4090d8, "700": #1664c2, "a700": #0a2fc2),
-  "light-blue": ("500": #03a9f4, "700": #0288d1),
-  "teal": ("350": #4fb7ad, "500": #009688, "700": #00796b),
-  "green": ("900": #2e7d32, "a100": #b9f6ca, "a200": #69f0ae),
-  "light-green": ("200": #c5e1a5, "600": #43a047, "a400": #a8d94e),
-  "yellow": ("200": #ffb74d, "500": #e8c300, "600": #a64e00),
-  "orange": ("500": #f77814),
-  "common": ("white": #ffffff, "black": #000000),
-  "brand": ("accent": #54a71d, "accent-dark": #a8d94e),
-  "neutral": ("112": #f4f4f4, "143": #f1f4f1, "174": #f0f2f5, "205": #e8eaed, "236": #e4ebe5, "267": #e1e7e2, "298": #d8e1da, "329": #cfd6d1, "360": #c8d2ca, "391": #bdc1c6, "422": #a8b5a0, "453": #9aa0a6, "484": #8a9090, "516": #7a818a, "547": #6e7681, "578": #6e747a, "609": #5a6066, "640": #3d4248, "671": #333842, "702": #2e333c, "733": #2a2d33, "764": #282c34, "795": #262a32, "826": #1c1f26, "857": #1a1d21, "888": #151a22, "919": #111318, "950": #0d0f14, "050": #f7fcf7, "081": #f8faf8),
-);
-
-@mixin matcha-primitives() {
-  :root {
-    // red
-    --matcha-prim-red-200: #ef9a9a;
-    --matcha-prim-red-a700: #c81010;
-    // pink
-    --matcha-prim-pink-600: #d81b60;
-    // purple
-    --matcha-prim-purple-500: #9c27b0;
-    // blue
-    --matcha-prim-blue-100: #bbdefb;
-    --matcha-prim-blue-200: #90caf9;
-    --matcha-prim-blue-300: #64b5f6;
-    --matcha-prim-blue-350: #4090d8;
-    --matcha-prim-blue-700: #1664c2;
-    --matcha-prim-blue-a700: #0a2fc2;
-    // light-blue
-    --matcha-prim-light-blue-500: #03a9f4;
-    --matcha-prim-light-blue-700: #0288d1;
-    // teal
-    --matcha-prim-teal-350: #4fb7ad;
-    --matcha-prim-teal-500: #009688;
-    --matcha-prim-teal-700: #00796b;
-    // green
-    --matcha-prim-green-900: #2e7d32;
-    --matcha-prim-green-a100: #b9f6ca;
-    --matcha-prim-green-a200: #69f0ae;
-    // light-green
-    --matcha-prim-light-green-200: #c5e1a5;
-    --matcha-prim-light-green-600: #43a047;
-    --matcha-prim-light-green-a400: #a8d94e;
-    // yellow
-    --matcha-prim-yellow-200: #ffb74d;
-    --matcha-prim-yellow-500: #e8c300;
-    --matcha-prim-yellow-600: #a64e00;
-    // orange
-    --matcha-prim-orange-500: #f77814;
-    // common
-    --matcha-prim-common-white: #ffffff;
-    --matcha-prim-common-black: #000000;
-    // brand
-    --matcha-prim-brand-accent: #54a71d;
-    --matcha-prim-brand-accent-dark: #a8d94e;
-    // neutral
-    --matcha-prim-neutral-112: #f4f4f4;
-    --matcha-prim-neutral-143: #f1f4f1;
-    --matcha-prim-neutral-174: #f0f2f5;
-    --matcha-prim-neutral-205: #e8eaed;
-    --matcha-prim-neutral-236: #e4ebe5;
-    --matcha-prim-neutral-267: #e1e7e2;
-    --matcha-prim-neutral-298: #d8e1da;
-    --matcha-prim-neutral-329: #cfd6d1;
-    --matcha-prim-neutral-360: #c8d2ca;
-    --matcha-prim-neutral-391: #bdc1c6;
-    --matcha-prim-neutral-422: #a8b5a0;
-    --matcha-prim-neutral-453: #9aa0a6;
-    --matcha-prim-neutral-484: #8a9090;
-    --matcha-prim-neutral-516: #7a818a;
-    --matcha-prim-neutral-547: #6e7681;
-    --matcha-prim-neutral-578: #6e747a;
-    --matcha-prim-neutral-609: #5a6066;
-    --matcha-prim-neutral-640: #3d4248;
-    --matcha-prim-neutral-671: #333842;
-    --matcha-prim-neutral-702: #2e333c;
-    --matcha-prim-neutral-733: #2a2d33;
-    --matcha-prim-neutral-764: #282c34;
-    --matcha-prim-neutral-795: #262a32;
-    --matcha-prim-neutral-826: #1c1f26;
-    --matcha-prim-neutral-857: #1a1d21;
-    --matcha-prim-neutral-888: #151a22;
-    --matcha-prim-neutral-919: #111318;
-    --matcha-prim-neutral-950: #0d0f14;
-    --matcha-prim-neutral-050: #f7fcf7;
-    --matcha-prim-neutral-081: #f8faf8;
-  }
-}
+// ⚠️ ARQUIVO GERADO — não editar à mão.
+// Fonte: tokens/matcha/primitives/colors.json  ·  Gerador: scripts/matcha-tokens/gen-primitives.js
+// Camada 1 (primitivas) da arquitetura de tema em runtime. Mode-agnostic.
+// Emite as cores cruas como CSS custom properties em :root; a Camada 2 (semânticas)
+// aponta para estas via var(--matcha-prim-*).
+
+$matcha-primitives: (
+  "red": ("200": #ef9a9a, "a700": #c81010),
+  "pink": ("600": #d81b60),
+  "purple": ("500": #9c27b0),
+  "blue": ("100": #bbdefb, "200": #90caf9, "300": #64b5f6, "350": #4090d8, "700": #1664c2, "a700": #0a2fc2),
+  "light-blue": ("500": #03a9f4, "700": #0288d1),
+  "teal": ("350": #4fb7ad, "500": #009688, "700": #00796b),
+  "green": ("900": #2e7d32, "a100": #b9f6ca, "a200": #69f0ae),
+  "light-green": ("200": #c5e1a5, "600": #43a047, "a400": #a8d94e),
+  "yellow": ("200": #ffb74d, "500": #e8c300, "600": #a64e00),
+  "orange": ("500": #f77814),
+  "common": ("white": #ffffff, "black": #000000),
+  "brand": ("accent": #54a71d, "accent-dark": #a8d94e),
+  "neutral": ("112": #f4f4f4, "143": #f1f4f1, "174": #f0f2f5, "205": #e8eaed, "236": #e4ebe5, "267": #e1e7e2, "298": #d8e1da, "329": #cfd6d1, "360": #c8d2ca, "391": #bdc1c6, "422": #a8b5a0, "453": #9aa0a6, "484": #8a9090, "516": #7a818a, "547": #6e7681, "578": #6e747a, "609": #5a6066, "640": #3d4248, "671": #333842, "702": #2e333c, "733": #2a2d33, "764": #282c34, "795": #262a32, "826": #1c1f26, "857": #1a1d21, "888": #151a22, "919": #111318, "950": #0d0f14, "050": #f7fcf7, "081": #f8faf8),
+);
+
+@mixin matcha-primitives() {
+  :root {
+    // red
+    --matcha-prim-red-200: #ef9a9a;
+    --matcha-prim-red-a700: #c81010;
+    // pink
+    --matcha-prim-pink-600: #d81b60;
+    // purple
+    --matcha-prim-purple-500: #9c27b0;
+    // blue
+    --matcha-prim-blue-100: #bbdefb;
+    --matcha-prim-blue-200: #90caf9;
+    --matcha-prim-blue-300: #64b5f6;
+    --matcha-prim-blue-350: #4090d8;
+    --matcha-prim-blue-700: #1664c2;
+    --matcha-prim-blue-a700: #0a2fc2;
+    // light-blue
+    --matcha-prim-light-blue-500: #03a9f4;
+    --matcha-prim-light-blue-700: #0288d1;
+    // teal
+    --matcha-prim-teal-350: #4fb7ad;
+    --matcha-prim-teal-500: #009688;
+    --matcha-prim-teal-700: #00796b;
+    // green
+    --matcha-prim-green-900: #2e7d32;
+    --matcha-prim-green-a100: #b9f6ca;
+    --matcha-prim-green-a200: #69f0ae;
+    // light-green
+    --matcha-prim-light-green-200: #c5e1a5;
+    --matcha-prim-light-green-600: #43a047;
+    --matcha-prim-light-green-a400: #a8d94e;
+    // yellow
+    --matcha-prim-yellow-200: #ffb74d;
+    --matcha-prim-yellow-500: #e8c300;
+    --matcha-prim-yellow-600: #a64e00;
+    // orange
+    --matcha-prim-orange-500: #f77814;
+    // common
+    --matcha-prim-common-white: #ffffff;
+    --matcha-prim-common-black: #000000;
+    // brand
+    --matcha-prim-brand-accent: #54a71d;
+    --matcha-prim-brand-accent-dark: #a8d94e;
+    // neutral
+    --matcha-prim-neutral-112: #f4f4f4;
+    --matcha-prim-neutral-143: #f1f4f1;
+    --matcha-prim-neutral-174: #f0f2f5;
+    --matcha-prim-neutral-205: #e8eaed;
+    --matcha-prim-neutral-236: #e4ebe5;
+    --matcha-prim-neutral-267: #e1e7e2;
+    --matcha-prim-neutral-298: #d8e1da;
+    --matcha-prim-neutral-329: #cfd6d1;
+    --matcha-prim-neutral-360: #c8d2ca;
+    --matcha-prim-neutral-391: #bdc1c6;
+    --matcha-prim-neutral-422: #a8b5a0;
+    --matcha-prim-neutral-453: #9aa0a6;
+    --matcha-prim-neutral-484: #8a9090;
+    --matcha-prim-neutral-516: #7a818a;
+    --matcha-prim-neutral-547: #6e7681;
+    --matcha-prim-neutral-578: #6e747a;
+    --matcha-prim-neutral-609: #5a6066;
+    --matcha-prim-neutral-640: #3d4248;
+    --matcha-prim-neutral-671: #333842;
+    --matcha-prim-neutral-702: #2e333c;
+    --matcha-prim-neutral-733: #2a2d33;
+    --matcha-prim-neutral-764: #282c34;
+    --matcha-prim-neutral-795: #262a32;
+    --matcha-prim-neutral-826: #1c1f26;
+    --matcha-prim-neutral-857: #1a1d21;
+    --matcha-prim-neutral-888: #151a22;
+    --matcha-prim-neutral-919: #111318;
+    --matcha-prim-neutral-950: #0d0f14;
+    --matcha-prim-neutral-050: #f7fcf7;
+    --matcha-prim-neutral-081: #f8faf8;
+  }
+}

package/tokens/_semantic-aliases.scss

@@ -1,120 +1,120 @@
-// ⚠️ ARQUIVO GERADO — não editar à mão.
-// Fonte: tokens/matcha/colors/Light.json|Dark.json  ·  Gerador: scripts/matcha-tokens/gen-semantics.js
-// Camada 2 (aliases sólidos): mapeia token semântico → primitiva (--matcha-prim-*) por modo.
-// Consumido por matcha-css-custom-properties() para emitir var(--matcha-prim-*) na rota clássica.
-// Só aliases DIRETOS de primitiva entram aqui; derivados/alphas/cross-semantic ficam literais.
-
-$matcha-prim-aliases-light: (
-  accent: "--matcha-prim-brand-accent",
-  accent-2: "--matcha-prim-teal-700",
-  accent-2-contrast: "--matcha-prim-common-white",
-  accent-text-on: "--matcha-prim-common-white",
-  danger: "--matcha-prim-red-a700",
-  danger-contrast: "--matcha-prim-common-white",
-  danger-fill: "--matcha-prim-red-a700",
-  elevation-scrim: "--matcha-prim-common-black",
-  elevation-surface-1: "--matcha-prim-neutral-081",
-  elevation-surface-2: "--matcha-prim-common-white",
-  elevation-surface-3: "--matcha-prim-common-white",
-  focus-ring: "--matcha-prim-light-green-600",
-  icon-active: "--matcha-prim-neutral-640",
-  icon-default: "--matcha-prim-neutral-453",
-  info: "--matcha-prim-blue-a700",
-  info-contrast: "--matcha-prim-common-white",
-  interaction-disabled-bg: "--matcha-prim-neutral-329",
-  interaction-disabled-border: "--matcha-prim-neutral-360",
-  interaction-disabled-fg: "--matcha-prim-neutral-484",
-  neutral: "--matcha-prim-neutral-236",
-  neutral-contrast: "--matcha-prim-neutral-857",
-  neutral-hover: "--matcha-prim-neutral-298",
-  palette-light-blue: "--matcha-prim-light-blue-700",
-  palette-pink: "--matcha-prim-pink-600",
-  palette-purple: "--matcha-prim-purple-500",
-  palette-teal: "--matcha-prim-teal-700",
-  palette-teal-light: "--matcha-prim-teal-350",
-  primary: "--matcha-prim-blue-700",
-  primary-contrast: "--matcha-prim-common-white",
-  state-layer-fg: "--matcha-prim-common-black",
-  success: "--matcha-prim-green-900",
-  success-contrast: "--matcha-prim-common-white",
-  success-fill: "--matcha-prim-green-900",
-  success-pressed: "--matcha-prim-light-green-600",
-  surface-bg: "--matcha-prim-neutral-143",
-  surface-bg-inverse: "--matcha-prim-neutral-919",
-  surface-border: "--matcha-prim-neutral-267",
-  surface-card: "--matcha-prim-neutral-050",
-  surface-card-inverse: "--matcha-prim-neutral-826",
-  surface-card-strong: "--matcha-prim-common-white",
-  surface-inner: "--matcha-prim-neutral-143",
-  surface-sidebar: "--matcha-prim-neutral-236",
-  surface-table-row-hover: "--matcha-prim-neutral-112",
-  text-hint: "--matcha-prim-neutral-516",
-  text-inverse: "--matcha-prim-neutral-205",
-  text-label: "--matcha-prim-neutral-516",
-  text-muted: "--matcha-prim-neutral-547",
-  text-placeholder: "--matcha-prim-neutral-516",
-  text-primary: "--matcha-prim-neutral-733",
-  text-secondary: "--matcha-prim-neutral-609",
-  text-static-dark: "--matcha-prim-neutral-857",
-  text-static-light: "--matcha-prim-common-white",
-  warn: "--matcha-prim-yellow-600",
-  warn-contrast: "--matcha-prim-common-white",
-  warn-fill: "--matcha-prim-yellow-600",
-);
-
-$matcha-prim-aliases-dark: (
-  accent: "--matcha-prim-brand-accent-dark",
-  accent-2: "--matcha-prim-teal-350",
-  accent-2-contrast: "--matcha-prim-common-white",
-  accent-dark: "--matcha-prim-light-green-200",
-  accent-light: "--matcha-prim-green-a100",
-  accent-text-on: "--matcha-prim-neutral-857",
-  danger: "--matcha-prim-red-200",
-  elevation-scrim: "--matcha-prim-common-black",
-  elevation-shadow: "--matcha-prim-common-black",
-  elevation-shadow-tint: "--matcha-prim-common-black",
-  elevation-surface-1: "--matcha-prim-neutral-826",
-  elevation-surface-2: "--matcha-prim-neutral-795",
-  elevation-surface-3: "--matcha-prim-neutral-702",
-  focus-ring: "--matcha-prim-light-green-a400",
-  icon-active: "--matcha-prim-neutral-205",
-  icon-default: "--matcha-prim-neutral-453",
-  info: "--matcha-prim-blue-350",
-  info-contrast: "--matcha-prim-common-white",
-  interaction-disabled-bg: "--matcha-prim-neutral-764",
-  neutral: "--matcha-prim-neutral-764",
-  neutral-contrast: "--matcha-prim-neutral-205",
-  neutral-hover: "--matcha-prim-neutral-671",
-  palette-light-blue-light: "--matcha-prim-light-blue-500",
-  palette-orange-light: "--matcha-prim-orange-500",
-  palette-pink-light: "--matcha-prim-pink-600",
-  palette-purple-light: "--matcha-prim-purple-500",
-  palette-teal: "--matcha-prim-teal-350",
-  palette-teal-light: "--matcha-prim-teal-500",
-  palette-yellow-light: "--matcha-prim-yellow-500",
-  primary: "--matcha-prim-blue-300",
-  primary-dark: "--matcha-prim-blue-200",
-  primary-hover: "--matcha-prim-blue-200",
-  primary-light: "--matcha-prim-blue-100",
-  primary-pressed: "--matcha-prim-blue-100",
-  state-layer-fg: "--matcha-prim-common-white",
-  success: "--matcha-prim-green-a200",
-  success-fill: "--matcha-prim-light-green-600",
-  surface-bg: "--matcha-prim-neutral-919",
-  surface-bg-inverse: "--matcha-prim-neutral-174",
-  surface-card: "--matcha-prim-neutral-826",
-  surface-card-inverse: "--matcha-prim-common-white",
-  surface-card-strong: "--matcha-prim-neutral-795",
-  surface-inner: "--matcha-prim-neutral-795",
-  surface-sidebar: "--matcha-prim-neutral-950",
-  surface-table-row-hover: "--matcha-prim-neutral-888",
-  text-hint: "--matcha-prim-neutral-453",
-  text-inverse: "--matcha-prim-neutral-733",
-  text-label: "--matcha-prim-neutral-391",
-  text-muted: "--matcha-prim-neutral-422",
-  text-placeholder: "--matcha-prim-neutral-578",
-  text-primary: "--matcha-prim-neutral-205",
-  text-static-dark: "--matcha-prim-neutral-857",
-  text-static-light: "--matcha-prim-common-white",
-  warn: "--matcha-prim-yellow-200",
-);
+// ⚠️ ARQUIVO GERADO — não editar à mão.
+// Fonte: tokens/matcha/colors/Light.json|Dark.json  ·  Gerador: scripts/matcha-tokens/gen-semantics.js
+// Camada 2 (aliases sólidos): mapeia token semântico → primitiva (--matcha-prim-*) por modo.
+// Consumido por matcha-css-custom-properties() para emitir var(--matcha-prim-*) na rota clássica.
+// Só aliases DIRETOS de primitiva entram aqui; derivados/alphas/cross-semantic ficam literais.
+
+$matcha-prim-aliases-light: (
+  accent: "--matcha-prim-brand-accent",
+  accent-2: "--matcha-prim-teal-700",
+  accent-2-contrast: "--matcha-prim-common-white",
+  accent-text-on: "--matcha-prim-common-white",
+  danger: "--matcha-prim-red-a700",
+  danger-contrast: "--matcha-prim-common-white",
+  danger-fill: "--matcha-prim-red-a700",
+  elevation-scrim: "--matcha-prim-common-black",
+  elevation-surface-1: "--matcha-prim-neutral-081",
+  elevation-surface-2: "--matcha-prim-common-white",
+  elevation-surface-3: "--matcha-prim-common-white",
+  focus-ring: "--matcha-prim-light-green-600",
+  icon-active: "--matcha-prim-neutral-640",
+  icon-default: "--matcha-prim-neutral-453",
+  info: "--matcha-prim-blue-a700",
+  info-contrast: "--matcha-prim-common-white",
+  interaction-disabled-bg: "--matcha-prim-neutral-329",
+  interaction-disabled-border: "--matcha-prim-neutral-360",
+  interaction-disabled-fg: "--matcha-prim-neutral-484",
+  neutral: "--matcha-prim-neutral-236",
+  neutral-contrast: "--matcha-prim-neutral-857",
+  neutral-hover: "--matcha-prim-neutral-298",
+  palette-light-blue: "--matcha-prim-light-blue-700",
+  palette-pink: "--matcha-prim-pink-600",
+  palette-purple: "--matcha-prim-purple-500",
+  palette-teal: "--matcha-prim-teal-700",
+  palette-teal-light: "--matcha-prim-teal-350",
+  primary: "--matcha-prim-blue-700",
+  primary-contrast: "--matcha-prim-common-white",
+  state-layer-fg: "--matcha-prim-common-black",
+  success: "--matcha-prim-green-900",
+  success-contrast: "--matcha-prim-common-white",
+  success-fill: "--matcha-prim-green-900",
+  success-pressed: "--matcha-prim-light-green-600",
+  surface-bg: "--matcha-prim-neutral-143",
+  surface-bg-inverse: "--matcha-prim-neutral-919",
+  surface-border: "--matcha-prim-neutral-267",
+  surface-card: "--matcha-prim-neutral-050",
+  surface-card-inverse: "--matcha-prim-neutral-826",
+  surface-card-strong: "--matcha-prim-common-white",
+  surface-inner: "--matcha-prim-neutral-143",
+  surface-sidebar: "--matcha-prim-neutral-236",
+  surface-table-row-hover: "--matcha-prim-neutral-112",
+  text-hint: "--matcha-prim-neutral-516",
+  text-inverse: "--matcha-prim-neutral-205",
+  text-label: "--matcha-prim-neutral-516",
+  text-muted: "--matcha-prim-neutral-547",
+  text-placeholder: "--matcha-prim-neutral-516",
+  text-primary: "--matcha-prim-neutral-733",
+  text-secondary: "--matcha-prim-neutral-609",
+  text-static-dark: "--matcha-prim-neutral-857",
+  text-static-light: "--matcha-prim-common-white",
+  warn: "--matcha-prim-yellow-600",
+  warn-contrast: "--matcha-prim-common-white",
+  warn-fill: "--matcha-prim-yellow-600",
+);
+
+$matcha-prim-aliases-dark: (
+  accent: "--matcha-prim-brand-accent-dark",
+  accent-2: "--matcha-prim-teal-350",
+  accent-2-contrast: "--matcha-prim-common-white",
+  accent-dark: "--matcha-prim-light-green-200",
+  accent-light: "--matcha-prim-green-a100",
+  accent-text-on: "--matcha-prim-neutral-857",
+  danger: "--matcha-prim-red-200",
+  elevation-scrim: "--matcha-prim-common-black",
+  elevation-shadow: "--matcha-prim-common-black",
+  elevation-shadow-tint: "--matcha-prim-common-black",
+  elevation-surface-1: "--matcha-prim-neutral-826",
+  elevation-surface-2: "--matcha-prim-neutral-795",
+  elevation-surface-3: "--matcha-prim-neutral-702",
+  focus-ring: "--matcha-prim-light-green-a400",
+  icon-active: "--matcha-prim-neutral-205",
+  icon-default: "--matcha-prim-neutral-453",
+  info: "--matcha-prim-blue-350",
+  info-contrast: "--matcha-prim-common-white",
+  interaction-disabled-bg: "--matcha-prim-neutral-764",
+  neutral: "--matcha-prim-neutral-764",
+  neutral-contrast: "--matcha-prim-neutral-205",
+  neutral-hover: "--matcha-prim-neutral-671",
+  palette-light-blue-light: "--matcha-prim-light-blue-500",
+  palette-orange-light: "--matcha-prim-orange-500",
+  palette-pink-light: "--matcha-prim-pink-600",
+  palette-purple-light: "--matcha-prim-purple-500",
+  palette-teal: "--matcha-prim-teal-350",
+  palette-teal-light: "--matcha-prim-teal-500",
+  palette-yellow-light: "--matcha-prim-yellow-500",
+  primary: "--matcha-prim-blue-300",
+  primary-dark: "--matcha-prim-blue-200",
+  primary-hover: "--matcha-prim-blue-200",
+  primary-light: "--matcha-prim-blue-100",
+  primary-pressed: "--matcha-prim-blue-100",
+  state-layer-fg: "--matcha-prim-common-white",
+  success: "--matcha-prim-green-a200",
+  success-fill: "--matcha-prim-light-green-600",
+  surface-bg: "--matcha-prim-neutral-919",
+  surface-bg-inverse: "--matcha-prim-neutral-174",
+  surface-card: "--matcha-prim-neutral-826",
+  surface-card-inverse: "--matcha-prim-common-white",
+  surface-card-strong: "--matcha-prim-neutral-795",
+  surface-inner: "--matcha-prim-neutral-795",
+  surface-sidebar: "--matcha-prim-neutral-950",
+  surface-table-row-hover: "--matcha-prim-neutral-888",
+  text-hint: "--matcha-prim-neutral-453",
+  text-inverse: "--matcha-prim-neutral-733",
+  text-label: "--matcha-prim-neutral-391",
+  text-muted: "--matcha-prim-neutral-422",
+  text-placeholder: "--matcha-prim-neutral-578",
+  text-primary: "--matcha-prim-neutral-205",
+  text-static-dark: "--matcha-prim-neutral-857",
+  text-static-light: "--matcha-prim-common-white",
+  warn: "--matcha-prim-yellow-200",
+);

package/tokens/_spacing-tokens.scss

@@ -1,94 +1,94 @@
-$unit-base-pixels: px;
-$unit-base-percent: .0%;
-
-// Border Radius — aligned with Figma (matcha/radius/*)
-$border-radius-none: 0px;
-$border-radius-sm: 2px;
-$border-radius-md: 4px;
-$border-radius-lg: 8px;
-$border-radius-xl: 16px;
-$border-radius-2xl: 24px;
-$border-radius-pill: 9999px;
-
-// Border Width — aligned with Figma (matcha/border/*)
-$border-width-none: 0px;
-$border-width-hairline: 1px;
-$border-width-thin: 2px;
-$border-width-medium: 4px;
-$border-width-thick: 8px;
-$border-style-none: none;
-$border-style-solid: solid;
-$border-style-dashed: dashed;
-$border-style-dotted: dotted;
-
-$size-padding-minimum: 8px;
-$size-padding-xxsmall: 16px;
-$size-padding-xsmall: 24px;
-$size-padding-small: 32px;
-$size-padding-medium: 40px;
-$size-padding-big: 48px;
-$size-padding-bigger: 56px;
-$size-padding-tall: 64px;
-$size-padding-taller: 72px;
-$size-padding-large: 80px;
-$size-padding-xlarge: 88px;
-$size-padding-xxlarge: 96px;
-$size-padding-larger: 104px;
-$size-padding-largest: 112px;
-$size-padding-wider: 120px;
-$spacing-stack-min: 8px 0; // 8px
-$spacing-stack-xxs: 16px 0; // 16px
-$spacing-stack-xs: 24px 0; // 24px
-$spacing-stack-s: 32px 0; // 32px
-$spacing-stack-m: 40px 0; // 40px
-$spacing-stack-big: 48px 0; // 48px
-$spacing-stack-bgg: 56px 0; // 56px
-$spacing-stack-tll: 64px 0; // 64px
-$spacing-stack-tlr: 72px 0; // 72px
-$spacing-stack-lg: 80px 0; // 80px
-$spacing-stack-xl: 88px 0; // 88px
-$spacing-stack-xxl: 96px 0; // 96px
-$spacing-stack-lgr: 104px 0; // 104px
-$spacing-stack-lgs: 112px 0; // 112px
-$spacing-inline-min: 0 8px; // 8px
-$spacing-inline-xxs: 0 16px; // 16px
-$spacing-inline-xs: 0 24px; // 24px
-$spacing-inline-s: 0 32px; // 32px
-$spacing-inline-m: 0 40px; // 40px
-$spacing-inline-big: 0 48px; // 48px
-$spacing-inline-bgg: 0 56px; // 56px
-$spacing-inline-tll: 0 64px; // 64px
-$spacing-inline-tlr: 0 72px; // 72px
-$spacing-inline-lg: 0 80px; // 80px
-$spacing-inline-xl: 0 88px; // 88px
-$spacing-inline-xxl: 0 96px; // 96px
-$spacing-inline-lgr: 0 104px; // 104px
-$spacing-inline-lgs: 0 112px; // 112px
-$spacing-inset-min: 8px 8px; // 8px
-$spacing-inset-xxs: 16px 16px; // 16px
-$spacing-inset-xs: 24px 24px; // 24px
-$spacing-inset-s: 32px 32px; // 32px
-$spacing-inset-m: 40px 40px; // 40px
-$spacing-inset-big: 48px 48px; // 48px
-$spacing-inset-bgg: 56px 56px; // 56px
-$spacing-inset-tll: 64px 64px; // 64px
-$spacing-inset-tlr: 72px 72px; // 72px
-$spacing-inset-lg: 80px 80px; // 80px
-$spacing-inset-xl: 88px 88px; // 88px
-$spacing-inset-xxl: 96px 96px; // 96px
-$spacing-inset-lgr: 104px 104px; // 104px
-$spacing-inset-lgs: 112px 112px; // 112px
-$spacing-squish-min: 8px 16px; // 8px
-$spacing-squish-xxs: 16px 24px; // 16px
-$spacing-squish-xs: 24px 32px; // 24px
-$spacing-squish-s: 32px 40px; // 32px
-$spacing-squish-m: 40px 48px; // 40px
-$spacing-squish-big: 48px 56px; // 48px
-$spacing-squish-bgg: 56px 64px; // 56px
-$spacing-squish-tll: 64px 72px; // 64px
-$spacing-squish-tlr: 72px 80px; // 72px
-$spacing-squish-lg: 80px 88px; // 80px
-$spacing-squish-xl: 88px 96px; // 88px
-$spacing-squish-xxl: 96px 104px; // 96px
-$spacing-squish-lgr: 104px 112px; // 104px
-$spacing-squish-lgs: 112px 120px; // 112px
+$unit-base-pixels: px;
+$unit-base-percent: .0%;
+
+// Border Radius — aligned with Figma (matcha/radius/*)
+$border-radius-none: 0px;
+$border-radius-sm: 2px;
+$border-radius-md: 4px;
+$border-radius-lg: 8px;
+$border-radius-xl: 16px;
+$border-radius-2xl: 24px;
+$border-radius-pill: 9999px;
+
+// Border Width — aligned with Figma (matcha/border/*)
+$border-width-none: 0px;
+$border-width-hairline: 1px;
+$border-width-thin: 2px;
+$border-width-medium: 4px;
+$border-width-thick: 8px;
+$border-style-none: none;
+$border-style-solid: solid;
+$border-style-dashed: dashed;
+$border-style-dotted: dotted;
+
+$size-padding-minimum: 8px;
+$size-padding-xxsmall: 16px;
+$size-padding-xsmall: 24px;
+$size-padding-small: 32px;
+$size-padding-medium: 40px;
+$size-padding-big: 48px;
+$size-padding-bigger: 56px;
+$size-padding-tall: 64px;
+$size-padding-taller: 72px;
+$size-padding-large: 80px;
+$size-padding-xlarge: 88px;
+$size-padding-xxlarge: 96px;
+$size-padding-larger: 104px;
+$size-padding-largest: 112px;
+$size-padding-wider: 120px;
+$spacing-stack-min: 8px 0; // 8px
+$spacing-stack-xxs: 16px 0; // 16px
+$spacing-stack-xs: 24px 0; // 24px
+$spacing-stack-s: 32px 0; // 32px
+$spacing-stack-m: 40px 0; // 40px
+$spacing-stack-big: 48px 0; // 48px
+$spacing-stack-bgg: 56px 0; // 56px
+$spacing-stack-tll: 64px 0; // 64px
+$spacing-stack-tlr: 72px 0; // 72px
+$spacing-stack-lg: 80px 0; // 80px
+$spacing-stack-xl: 88px 0; // 88px
+$spacing-stack-xxl: 96px 0; // 96px
+$spacing-stack-lgr: 104px 0; // 104px
+$spacing-stack-lgs: 112px 0; // 112px
+$spacing-inline-min: 0 8px; // 8px
+$spacing-inline-xxs: 0 16px; // 16px
+$spacing-inline-xs: 0 24px; // 24px
+$spacing-inline-s: 0 32px; // 32px
+$spacing-inline-m: 0 40px; // 40px
+$spacing-inline-big: 0 48px; // 48px
+$spacing-inline-bgg: 0 56px; // 56px
+$spacing-inline-tll: 0 64px; // 64px
+$spacing-inline-tlr: 0 72px; // 72px
+$spacing-inline-lg: 0 80px; // 80px
+$spacing-inline-xl: 0 88px; // 88px
+$spacing-inline-xxl: 0 96px; // 96px
+$spacing-inline-lgr: 0 104px; // 104px
+$spacing-inline-lgs: 0 112px; // 112px
+$spacing-inset-min: 8px 8px; // 8px
+$spacing-inset-xxs: 16px 16px; // 16px
+$spacing-inset-xs: 24px 24px; // 24px
+$spacing-inset-s: 32px 32px; // 32px
+$spacing-inset-m: 40px 40px; // 40px
+$spacing-inset-big: 48px 48px; // 48px
+$spacing-inset-bgg: 56px 56px; // 56px
+$spacing-inset-tll: 64px 64px; // 64px
+$spacing-inset-tlr: 72px 72px; // 72px
+$spacing-inset-lg: 80px 80px; // 80px
+$spacing-inset-xl: 88px 88px; // 88px
+$spacing-inset-xxl: 96px 96px; // 96px
+$spacing-inset-lgr: 104px 104px; // 104px
+$spacing-inset-lgs: 112px 112px; // 112px
+$spacing-squish-min: 8px 16px; // 8px
+$spacing-squish-xxs: 16px 24px; // 16px
+$spacing-squish-xs: 24px 32px; // 24px
+$spacing-squish-s: 32px 40px; // 32px
+$spacing-squish-m: 40px 48px; // 40px
+$spacing-squish-big: 48px 56px; // 48px
+$spacing-squish-bgg: 56px 64px; // 56px
+$spacing-squish-tll: 64px 72px; // 64px
+$spacing-squish-tlr: 72px 80px; // 72px
+$spacing-squish-lg: 80px 88px; // 80px
+$spacing-squish-xl: 88px 96px; // 88px
+$spacing-squish-xxl: 96px 104px; // 96px
+$spacing-squish-lgr: 104px 112px; // 104px
+$spacing-squish-lgs: 112px 120px; // 112px