@krizaka/tokens 2.0.0-beta.5 → 2.0.0

package/README.md

@@ -88,11 +88,15 @@ under every product override.
 | `--kz-accent-2` | `accent2` | Second accent (gradients) | → `accent` | → `accent` |
 | `--kz-on-accent` | `onAccent` | Text and icon on the accent (≥ 4.5:1) | `hsl(0 0% 100%)` | = dark |
 | `--kz-ring` | `ring` | Keyboard focus ring | → `accent` | → `accent` |
-| `--kz-brand-gradient-from` / `-via` / `-to` | `brandGradientFrom`… | Section gradient of the brand (tinted → page surface); text reads at AA on every stop | `hsl(222 45% 10%)` → `hsl(232 24% 7%)` → `hsl(240 6% 5%)` | `hsl(214 95% 93%)` → `hsl(220 60% 97%)` → `hsl(0 0% 98%)` |
-| `--kz-success` | `success` | Status: success | `hsl(160 84% 39%)` | = dark |
+| `--kz-brand-gradient-from` / `-via` / `-to` | `brandGradientFrom`… | Section gradient of the brand (tinted → page surface); text reads at AA on every stop. `-to` is an alias of `surface-0`: an app that changes its page surface keeps a seamless section end | `hsl(222 45% 10%)` → `hsl(232 24% 7%)` → `surface-0` | `hsl(214 95% 93%)` → `hsl(220 60% 97%)` → `surface-0` |
+| `--kz-success` | `success` | Status: success — fills, borders, dots, icons (≥ 3:1) | `hsl(160 84% 39%)` | = dark |
+| `--kz-success-text` | `successText` | Success as small text: ≥ 4.5:1 on every surface | `hsl(158 64% 52%)` | `hsl(160 84% 24%)` |
 | `--kz-warning` | `warning` | Status: warning | `hsl(38 92% 50%)` | = dark |
+| `--kz-warning-text` | `warningText` | Warning as small text: ≥ 4.5:1 on every surface | `hsl(38 92% 55%)` | `hsl(32 95% 30%)` |
 | `--kz-danger` | `danger` | Status: error, destructive action | `hsl(0 84% 60%)` | = dark |
+| `--kz-danger-text` | `dangerText` | Error as small text (a field's message, an urgent countdown): ≥ 4.5:1 on every surface | `hsl(0 91% 71%)` | `hsl(0 72% 40%)` |
 | `--kz-info` | `info` | Status: information | → `accent` | → `accent` |
+| `--kz-info-text` | `infoText` | Information as small text (a brand role) | → `accent-text` | → `accent-text` |
 | `--kz-scrim` | `scrim` | Veil behind a badge or a caption on an image | `hsl(0 0% 0% / 0.60)` | = dark |
 | `--kz-scrim-strong` | `scrimStrong` | Stronger veil (long text on an image) | `hsl(0 0% 0% / 0.80)` | = dark |
 | `--kz-overlay` | `overlay` | Dialog backdrop | `hsl(0 0% 0% / 0.70)` | = dark |

package/dist/brands/krizaka.css

@@ -11,9 +11,10 @@
   --kz-on-accent: hsl(0 0% 100%);
   --kz-ring: var(--kz-accent);
   --kz-info: var(--kz-accent);
+  --kz-info-text: var(--kz-accent-text);
   --kz-brand-gradient-from: hsl(222 45% 10%);
   --kz-brand-gradient-via: hsl(232 24% 7%);
-  --kz-brand-gradient-to: hsl(240 6% 5%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
 }
 
 html.light {
@@ -24,7 +25,6 @@ html.light {
   --kz-on-accent: hsl(0 0% 100%);
   --kz-brand-gradient-from: hsl(214 95% 93%);
   --kz-brand-gradient-via: hsl(220 60% 97%);
-  --kz-brand-gradient-to: hsl(0 0% 98%);
 }
 
 .theme-light {
@@ -36,7 +36,8 @@ html.light {
   --kz-on-accent: hsl(0 0% 100%);
   --kz-ring: var(--kz-accent);
   --kz-info: var(--kz-accent);
+  --kz-info-text: var(--kz-accent-text);
   --kz-brand-gradient-from: hsl(214 95% 93%);
   --kz-brand-gradient-via: hsl(220 60% 97%);
-  --kz-brand-gradient-to: hsl(0 0% 98%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
 }

package/dist/brands/orazaka.css

@@ -11,9 +11,10 @@
   --kz-on-accent: hsl(240 6% 5%);
   --kz-ring: var(--kz-accent);
   --kz-info: hsl(217 92% 60%);
+  --kz-info-text: hsl(217 92% 68%);
   --kz-brand-gradient-from: hsl(24 55% 10%);
   --kz-brand-gradient-via: hsl(34 30% 7%);
-  --kz-brand-gradient-to: hsl(240 6% 5%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
 }
 
 html.light {
@@ -24,9 +25,9 @@ html.light {
   --kz-accent-2: hsl(32 95% 33%);
   --kz-on-accent: hsl(0 0% 100%);
   --kz-info: hsl(217 92% 50%);
+  --kz-info-text: hsl(217 92% 42%);
   --kz-brand-gradient-from: hsl(30 100% 92%);
   --kz-brand-gradient-via: hsl(38 80% 96%);
-  --kz-brand-gradient-to: hsl(0 0% 98%);
 }
 
 .theme-light {
@@ -38,7 +39,8 @@ html.light {
   --kz-on-accent: hsl(0 0% 100%);
   --kz-ring: var(--kz-accent);
   --kz-info: hsl(217 92% 50%);
+  --kz-info-text: hsl(217 92% 42%);
   --kz-brand-gradient-from: hsl(30 100% 92%);
   --kz-brand-gradient-via: hsl(38 80% 96%);
-  --kz-brand-gradient-to: hsl(0 0% 98%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
 }

package/dist/brands/orochia.css

@@ -11,9 +11,10 @@
   --kz-on-accent: hsl(0 0% 100%);
   --kz-ring: hsl(255.1 91.7% 76.3%);
   --kz-info: var(--kz-accent);
+  --kz-info-text: var(--kz-accent-text);
   --kz-brand-gradient-from: hsl(266 50% 11%);
   --kz-brand-gradient-via: hsl(320 35% 8%);
-  --kz-brand-gradient-to: hsl(240 6% 5%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
 }
 
 html.light {
@@ -26,7 +27,6 @@ html.light {
   --kz-ring: hsl(262.1 83.3% 57.8%);
   --kz-brand-gradient-from: hsl(262 90% 95%);
   --kz-brand-gradient-via: hsl(330 80% 96%);
-  --kz-brand-gradient-to: hsl(0 0% 98%);
 }
 
 .theme-light {
@@ -38,7 +38,8 @@ html.light {
   --kz-on-accent: hsl(0 0% 100%);
   --kz-ring: hsl(262.1 83.3% 57.8%);
   --kz-info: var(--kz-accent);
+  --kz-info-text: var(--kz-accent-text);
   --kz-brand-gradient-from: hsl(262 90% 95%);
   --kz-brand-gradient-via: hsl(330 80% 96%);
-  --kz-brand-gradient-to: hsl(0 0% 98%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
 }

package/dist/brands/scoped.css

@@ -10,9 +10,10 @@
   --kz-on-accent: hsl(0 0% 100%);
   --kz-ring: var(--kz-accent);
   --kz-info: var(--kz-accent);
+  --kz-info-text: var(--kz-accent-text);
   --kz-brand-gradient-from: hsl(222 45% 10%);
   --kz-brand-gradient-via: hsl(232 24% 7%);
-  --kz-brand-gradient-to: hsl(240 6% 5%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
 }
 html.light .brand-krizaka, html .theme-light .brand-krizaka, html .brand-krizaka.theme-light {
   --kz-accent: hsl(217 92% 50%);
@@ -23,9 +24,10 @@ html.light .brand-krizaka, html .theme-light .brand-krizaka, html .brand-krizaka
   --kz-on-accent: hsl(0 0% 100%);
   --kz-ring: var(--kz-accent);
   --kz-info: var(--kz-accent);
+  --kz-info-text: var(--kz-accent-text);
   --kz-brand-gradient-from: hsl(214 95% 93%);
   --kz-brand-gradient-via: hsl(220 60% 97%);
-  --kz-brand-gradient-to: hsl(0 0% 98%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
 }
 html .theme-dark .brand-krizaka, html .brand-krizaka.theme-dark {
   --kz-accent: hsl(217 92% 53%);
@@ -36,9 +38,10 @@ html .theme-dark .brand-krizaka, html .brand-krizaka.theme-dark {
   --kz-on-accent: hsl(0 0% 100%);
   --kz-ring: var(--kz-accent);
   --kz-info: var(--kz-accent);
+  --kz-info-text: var(--kz-accent-text);
   --kz-brand-gradient-from: hsl(222 45% 10%);
   --kz-brand-gradient-via: hsl(232 24% 7%);
-  --kz-brand-gradient-to: hsl(240 6% 5%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
 }
 
 .brand-orazaka {
@@ -50,9 +53,10 @@ html .theme-dark .brand-krizaka, html .brand-krizaka.theme-dark {
   --kz-on-accent: hsl(240 6% 5%);
   --kz-ring: var(--kz-accent);
   --kz-info: hsl(217 92% 60%);
+  --kz-info-text: hsl(217 92% 68%);
   --kz-brand-gradient-from: hsl(24 55% 10%);
   --kz-brand-gradient-via: hsl(34 30% 7%);
-  --kz-brand-gradient-to: hsl(240 6% 5%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
 }
 html.light .brand-orazaka, html .theme-light .brand-orazaka, html .brand-orazaka.theme-light {
   --kz-accent: hsl(26 90.5% 37.1%);
@@ -63,9 +67,10 @@ html.light .brand-orazaka, html .theme-light .brand-orazaka, html .brand-orazaka
   --kz-on-accent: hsl(0 0% 100%);
   --kz-ring: var(--kz-accent);
   --kz-info: hsl(217 92% 50%);
+  --kz-info-text: hsl(217 92% 42%);
   --kz-brand-gradient-from: hsl(30 100% 92%);
   --kz-brand-gradient-via: hsl(38 80% 96%);
-  --kz-brand-gradient-to: hsl(0 0% 98%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
 }
 html .theme-dark .brand-orazaka, html .brand-orazaka.theme-dark {
   --kz-accent: hsl(26 92% 55%);
@@ -76,9 +81,10 @@ html .theme-dark .brand-orazaka, html .brand-orazaka.theme-dark {
   --kz-on-accent: hsl(240 6% 5%);
   --kz-ring: var(--kz-accent);
   --kz-info: hsl(217 92% 60%);
+  --kz-info-text: hsl(217 92% 68%);
   --kz-brand-gradient-from: hsl(24 55% 10%);
   --kz-brand-gradient-via: hsl(34 30% 7%);
-  --kz-brand-gradient-to: hsl(240 6% 5%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
 }
 
 .brand-orochia {
@@ -90,9 +96,10 @@ html .theme-dark .brand-orazaka, html .brand-orazaka.theme-dark {
   --kz-on-accent: hsl(0 0% 100%);
   --kz-ring: hsl(255.1 91.7% 76.3%);
   --kz-info: var(--kz-accent);
+  --kz-info-text: var(--kz-accent-text);
   --kz-brand-gradient-from: hsl(266 50% 11%);
   --kz-brand-gradient-via: hsl(320 35% 8%);
-  --kz-brand-gradient-to: hsl(240 6% 5%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
 }
 html.light .brand-orochia, html .theme-light .brand-orochia, html .brand-orochia.theme-light {
   --kz-accent: hsl(262.1 83.3% 57.8%);
@@ -103,9 +110,10 @@ html.light .brand-orochia, html .theme-light .brand-orochia, html .brand-orochia
   --kz-on-accent: hsl(0 0% 100%);
   --kz-ring: hsl(262.1 83.3% 57.8%);
   --kz-info: var(--kz-accent);
+  --kz-info-text: var(--kz-accent-text);
   --kz-brand-gradient-from: hsl(262 90% 95%);
   --kz-brand-gradient-via: hsl(330 80% 96%);
-  --kz-brand-gradient-to: hsl(0 0% 98%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
 }
 html .theme-dark .brand-orochia, html .brand-orochia.theme-dark {
   --kz-accent: hsl(262.1 83.3% 57.8%);
@@ -116,7 +124,8 @@ html .theme-dark .brand-orochia, html .brand-orochia.theme-dark {
   --kz-on-accent: hsl(0 0% 100%);
   --kz-ring: hsl(255.1 91.7% 76.3%);
   --kz-info: var(--kz-accent);
+  --kz-info-text: var(--kz-accent-text);
   --kz-brand-gradient-from: hsl(266 50% 11%);
   --kz-brand-gradient-via: hsl(320 35% 8%);
-  --kz-brand-gradient-to: hsl(240 6% 5%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
 }

package/dist/index.d.ts

@@ -25,9 +25,13 @@ export declare const tokens: {
   readonly brandGradientVia: "var(--kz-brand-gradient-via)";
   readonly brandGradientTo: "var(--kz-brand-gradient-to)";
   readonly success: "var(--kz-success)";
+  readonly successText: "var(--kz-success-text)";
   readonly warning: "var(--kz-warning)";
+  readonly warningText: "var(--kz-warning-text)";
   readonly danger: "var(--kz-danger)";
+  readonly dangerText: "var(--kz-danger-text)";
   readonly info: "var(--kz-info)";
+  readonly infoText: "var(--kz-info-text)";
   readonly scrim: "var(--kz-scrim)";
   readonly scrimStrong: "var(--kz-scrim-strong)";
   readonly overlay: "var(--kz-overlay)";
@@ -54,6 +58,6 @@ export declare const values: { readonly dark: TokenValues; readonly light: Token
 /** A Krizaka brand. */
 export type BrandId = "krizaka" | "orazaka" | "orochia";
 /** The roles a brand theme sets. */
-export type BrandRole = "accent" | "accentHover" | "accentSoft" | "accentText" | "accent2" | "onAccent" | "ring" | "info" | "brandGradientFrom" | "brandGradientVia" | "brandGradientTo";
+export type BrandRole = "accent" | "accentHover" | "accentSoft" | "accentText" | "accent2" | "onAccent" | "ring" | "info" | "infoText" | "brandGradientFrom" | "brandGradientVia" | "brandGradientTo";
 /** The brand themes: the accent family of each Krizaka brand, raw CSS per theme (aliases resolved). */
 export declare const brands: { readonly [B in BrandId]: { readonly dark: { readonly [R in BrandRole]: string }; readonly light: { readonly [R in BrandRole]: string } } };

package/dist/index.js

@@ -25,9 +25,13 @@ export const tokens = Object.freeze({
   "brandGradientVia": "var(--kz-brand-gradient-via)",
   "brandGradientTo": "var(--kz-brand-gradient-to)",
   "success": "var(--kz-success)",
+  "successText": "var(--kz-success-text)",
   "warning": "var(--kz-warning)",
+  "warningText": "var(--kz-warning-text)",
   "danger": "var(--kz-danger)",
+  "dangerText": "var(--kz-danger-text)",
   "info": "var(--kz-info)",
+  "infoText": "var(--kz-info-text)",
   "scrim": "var(--kz-scrim)",
   "scrimStrong": "var(--kz-scrim-strong)",
   "overlay": "var(--kz-overlay)",
@@ -70,9 +74,13 @@ export const values = Object.freeze({ dark: Object.freeze({
   "brandGradientVia": "hsl(232 24% 7%)",
   "brandGradientTo": "hsl(240 6% 5%)",
   "success": "hsl(160 84% 39%)",
+  "successText": "hsl(158 64% 52%)",
   "warning": "hsl(38 92% 50%)",
+  "warningText": "hsl(38 92% 55%)",
   "danger": "hsl(0 84% 60%)",
+  "dangerText": "hsl(0 91% 71%)",
   "info": "hsl(217 92% 53%)",
+  "infoText": "hsl(217 92% 68%)",
   "scrim": "hsl(0 0% 0% / 0.60)",
   "scrimStrong": "hsl(0 0% 0% / 0.80)",
   "overlay": "hsl(0 0% 0% / 0.70)",
@@ -112,9 +120,13 @@ export const values = Object.freeze({ dark: Object.freeze({
   "brandGradientVia": "hsl(220 60% 97%)",
   "brandGradientTo": "hsl(0 0% 98%)",
   "success": "hsl(160 84% 39%)",
+  "successText": "hsl(160 84% 24%)",
   "warning": "hsl(38 92% 50%)",
+  "warningText": "hsl(32 95% 30%)",
   "danger": "hsl(0 84% 60%)",
+  "dangerText": "hsl(0 72% 40%)",
   "info": "hsl(217 92% 50%)",
+  "infoText": "hsl(217 92% 42%)",
   "scrim": "hsl(0 0% 0% / 0.60)",
   "scrimStrong": "hsl(0 0% 0% / 0.80)",
   "overlay": "hsl(0 0% 0% / 0.70)",
@@ -144,6 +156,7 @@ export const brands = Object.freeze({
       "onAccent": "hsl(0 0% 100%)",
       "ring": "hsl(217 92% 53%)",
       "info": "hsl(217 92% 53%)",
+      "infoText": "hsl(217 92% 68%)",
       "brandGradientFrom": "hsl(222 45% 10%)",
       "brandGradientVia": "hsl(232 24% 7%)",
       "brandGradientTo": "hsl(240 6% 5%)"
@@ -157,6 +170,7 @@ export const brands = Object.freeze({
       "onAccent": "hsl(0 0% 100%)",
       "ring": "hsl(217 92% 50%)",
       "info": "hsl(217 92% 50%)",
+      "infoText": "hsl(217 92% 42%)",
       "brandGradientFrom": "hsl(214 95% 93%)",
       "brandGradientVia": "hsl(220 60% 97%)",
       "brandGradientTo": "hsl(0 0% 98%)"
@@ -172,6 +186,7 @@ export const brands = Object.freeze({
       "onAccent": "hsl(240 6% 5%)",
       "ring": "hsl(26 92% 55%)",
       "info": "hsl(217 92% 60%)",
+      "infoText": "hsl(217 92% 68%)",
       "brandGradientFrom": "hsl(24 55% 10%)",
       "brandGradientVia": "hsl(34 30% 7%)",
       "brandGradientTo": "hsl(240 6% 5%)"
@@ -185,6 +200,7 @@ export const brands = Object.freeze({
       "onAccent": "hsl(0 0% 100%)",
       "ring": "hsl(26 90.5% 37.1%)",
       "info": "hsl(217 92% 50%)",
+      "infoText": "hsl(217 92% 42%)",
       "brandGradientFrom": "hsl(30 100% 92%)",
       "brandGradientVia": "hsl(38 80% 96%)",
       "brandGradientTo": "hsl(0 0% 98%)"
@@ -200,6 +216,7 @@ export const brands = Object.freeze({
       "onAccent": "hsl(0 0% 100%)",
       "ring": "hsl(255.1 91.7% 76.3%)",
       "info": "hsl(262.1 83.3% 57.8%)",
+      "infoText": "hsl(255.1 91.7% 76.3%)",
       "brandGradientFrom": "hsl(266 50% 11%)",
       "brandGradientVia": "hsl(320 35% 8%)",
       "brandGradientTo": "hsl(240 6% 5%)"
@@ -213,6 +230,7 @@ export const brands = Object.freeze({
       "onAccent": "hsl(0 0% 100%)",
       "ring": "hsl(262.1 83.3% 57.8%)",
       "info": "hsl(262.1 83.3% 57.8%)",
+      "infoText": "hsl(263.4 70% 50.4%)",
       "brandGradientFrom": "hsl(262 90% 95%)",
       "brandGradientVia": "hsl(330 80% 96%)",
       "brandGradientTo": "hsl(0 0% 98%)"

package/dist/native.d.ts

@@ -25,9 +25,13 @@ export type Theme = {
   readonly brandGradientVia: string;
   readonly brandGradientTo: string;
   readonly success: string;
+  readonly successText: string;
   readonly warning: string;
+  readonly warningText: string;
   readonly danger: string;
+  readonly dangerText: string;
   readonly info: string;
+  readonly infoText: string;
   readonly scrim: string;
   readonly scrimStrong: string;
   readonly overlay: string;
@@ -55,6 +59,6 @@ export declare const motion: { readonly ease: readonly [number, number, number,
 /** A Krizaka brand. */
 export type BrandId = "krizaka" | "orazaka" | "orochia";
 /** The colour roles a brand theme sets, per theme. */
-export type BrandTheme = { readonly dark: { readonly [R in "accent" | "accentHover" | "accentSoft" | "accentText" | "accent2" | "onAccent" | "ring" | "info" | "brandGradientFrom" | "brandGradientVia" | "brandGradientTo"]: string }; readonly light: { readonly [R in "accent" | "accentHover" | "accentSoft" | "accentText" | "accent2" | "onAccent" | "ring" | "info" | "brandGradientFrom" | "brandGradientVia" | "brandGradientTo"]: string } };
+export type BrandTheme = { readonly dark: { readonly [R in "accent" | "accentHover" | "accentSoft" | "accentText" | "accent2" | "onAccent" | "ring" | "info" | "infoText" | "brandGradientFrom" | "brandGradientVia" | "brandGradientTo"]: string }; readonly light: { readonly [R in "accent" | "accentHover" | "accentSoft" | "accentText" | "accent2" | "onAccent" | "ring" | "info" | "infoText" | "brandGradientFrom" | "brandGradientVia" | "brandGradientTo"]: string } };
 /** The brand themes as ThemeProvider overrides (`overrides={brands.orazaka}`): the accent family per theme. */
 export declare const brands: { readonly [B in BrandId]: BrandTheme };

package/dist/native.js

@@ -25,9 +25,13 @@ export const themes = Object.freeze({ dark: Object.freeze({
   "brandGradientVia": "#0e0f16",
   "brandGradientTo": "#0c0c0e",
   "success": "#10b77f",
+  "successText": "#36d399",
   "warning": "#f59f0a",
+  "warningText": "#f6a823",
   "danger": "#ef4343",
+  "dangerText": "#f87272",
   "info": "#196df5",
+  "infoText": "#629cf8",
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
   "overlay": "rgba(0,0,0,0.7)"
@@ -55,9 +59,13 @@ export const themes = Object.freeze({ dark: Object.freeze({
   "brandGradientVia": "#f3f6fc",
   "brandGradientTo": "#fafafa",
   "success": "#10b77f",
+  "successText": "#0a714e",
   "warning": "#f59f0a",
+  "warningText": "#955104",
   "danger": "#ef4343",
+  "dangerText": "#af1d1d",
   "info": "#0a64f5",
+  "infoText": "#0954ce",
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
   "overlay": "rgba(0,0,0,0.7)"
@@ -94,6 +102,7 @@ export const brands = Object.freeze({
       "onAccent": "#ffffff",
       "ring": "#196df5",
       "info": "#196df5",
+      "infoText": "#629cf8",
       "brandGradientFrom": "#0e1525",
       "brandGradientVia": "#0e0f16",
       "brandGradientTo": "#0c0c0e"
@@ -107,6 +116,7 @@ export const brands = Object.freeze({
       "onAccent": "#ffffff",
       "ring": "#0a64f5",
       "info": "#0a64f5",
+      "infoText": "#0954ce",
       "brandGradientFrom": "#dcebfe",
       "brandGradientVia": "#f3f6fc",
       "brandGradientTo": "#fafafa"
@@ -122,6 +132,7 @@ export const brands = Object.freeze({
       "onAccent": "#0c0c0e",
       "ring": "#f67e23",
       "info": "#3b83f7",
+      "infoText": "#629cf8",
       "brandGradientFrom": "#28170b",
       "brandGradientVia": "#17130c",
       "brandGradientTo": "#0c0c0e"
@@ -135,6 +146,7 @@ export const brands = Object.freeze({
       "onAccent": "#ffffff",
       "ring": "#b45309",
       "info": "#0a64f5",
+      "infoText": "#0954ce",
       "brandGradientFrom": "#ffebd6",
       "brandGradientVia": "#fdf7ed",
       "brandGradientTo": "#fafafa"
@@ -150,6 +162,7 @@ export const brands = Object.freeze({
       "onAccent": "#ffffff",
       "ring": "#a78bfa",
       "info": "#7c3aed",
+      "infoText": "#a78bfa",
       "brandGradientFrom": "#1a0e2a",
       "brandGradientVia": "#1c0d17",
       "brandGradientTo": "#0c0c0e"
@@ -163,6 +176,7 @@ export const brands = Object.freeze({
       "onAccent": "#ffffff",
       "ring": "#7c3aed",
       "info": "#7c3aed",
+      "infoText": "#6d28d9",
       "brandGradientFrom": "#efe7fe",
       "brandGradientVia": "#fdedf5",
       "brandGradientTo": "#fafafa"

package/dist/tokens.css

@@ -33,8 +33,12 @@
   /* Dégradé de section de la marque (from → via → to) : les fonds de section glissent d'une teinte à l'autre ; le texte reste lisible dessus (testé). */
   --kz-brand-gradient-from: hsl(222 45% 10%); /* Section : la teinte de départ (haut de section, halo) */
   --kz-brand-gradient-via: hsl(232 24% 7%); /* Section : la teinte intermédiaire */
-  --kz-brand-gradient-to: hsl(240 6% 5%); /* Section : l'arrivée, la surface de page (la section suivante y enchaîne) */
+  --kz-brand-gradient-to: var(--kz-surface-0); /* Section : l'arrivée, un alias de la surface de page — la section suivante y enchaîne, même quand un produit change --kz-surface-0 */
+  --kz-success-text: hsl(158 64% 52%); /* Statut succès en texte (petit texte, libellé) : ≥ 4.5:1 sur chaque surface */
+  --kz-warning-text: hsl(38 92% 55%); /* Statut avertissement en texte : ≥ 4.5:1 sur chaque surface */
+  --kz-danger-text: hsl(0 91% 71%); /* Statut erreur en texte (message d'erreur, compte à rebours urgent) : ≥ 4.5:1 sur chaque surface */
   --kz-info: var(--kz-accent); /* Statut : information */
+  --kz-info-text: var(--kz-accent-text); /* Statut information en texte : l'accent en texte par défaut (≥ 4.5:1) */
 
   /* Ombres (web uniquement) */
   --kz-shadow-sm: 0 1px 3px hsl(0 0% 0% / 0.12), 0 1px 2px hsl(0 0% 0% / 0.06); /* Champ, bouton au repos */
@@ -65,7 +69,9 @@ html.light {
   --kz-accent-text: hsl(217 92% 42%); /* Accent en texte (lien, libellé actif) : ≥ 4.5:1 sur chaque surface */
   --kz-brand-gradient-from: hsl(214 95% 93%); /* Section : la teinte de départ (haut de section, halo) */
   --kz-brand-gradient-via: hsl(220 60% 97%); /* Section : la teinte intermédiaire */
-  --kz-brand-gradient-to: hsl(0 0% 98%); /* Section : l'arrivée, la surface de page (la section suivante y enchaîne) */
+  --kz-success-text: hsl(160 84% 24%); /* Statut succès en texte (petit texte, libellé) : ≥ 4.5:1 sur chaque surface */
+  --kz-warning-text: hsl(32 95% 30%); /* Statut avertissement en texte : ≥ 4.5:1 sur chaque surface */
+  --kz-danger-text: hsl(0 72% 40%); /* Statut erreur en texte (message d'erreur, compte à rebours urgent) : ≥ 4.5:1 sur chaque surface */
   --kz-shadow-sm: 0 1px 3px hsl(240 6% 0% / 0.06), 0 1px 2px hsl(240 6% 0% / 0.04); /* Champ, bouton au repos */
   --kz-shadow-md: 0 4px 12px hsl(240 6% 0% / 0.08), 0 2px 4px hsl(240 6% 0% / 0.04); /* Menu, popover, carte au survol */
   --kz-shadow-lg: 0 8px 24px hsl(240 6% 0% / 0.10), 0 4px 8px hsl(240 6% 0% / 0.05); /* Dialogue, feuille */
@@ -94,8 +100,12 @@ html.light {
   --kz-ring: var(--kz-accent); /* Anneau de focus clavier */
   --kz-brand-gradient-from: hsl(214 95% 93%); /* Section : la teinte de départ (haut de section, halo) */
   --kz-brand-gradient-via: hsl(220 60% 97%); /* Section : la teinte intermédiaire */
-  --kz-brand-gradient-to: hsl(0 0% 98%); /* Section : l'arrivée, la surface de page (la section suivante y enchaîne) */
+  --kz-brand-gradient-to: var(--kz-surface-0); /* Section : l'arrivée, un alias de la surface de page — la section suivante y enchaîne, même quand un produit change --kz-surface-0 */
+  --kz-success-text: hsl(160 84% 24%); /* Statut succès en texte (petit texte, libellé) : ≥ 4.5:1 sur chaque surface */
+  --kz-warning-text: hsl(32 95% 30%); /* Statut avertissement en texte : ≥ 4.5:1 sur chaque surface */
+  --kz-danger-text: hsl(0 72% 40%); /* Statut erreur en texte (message d'erreur, compte à rebours urgent) : ≥ 4.5:1 sur chaque surface */
   --kz-info: var(--kz-accent); /* Statut : information */
+  --kz-info-text: var(--kz-accent-text); /* Statut information en texte : l'accent en texte par défaut (≥ 4.5:1) */
   --kz-shadow-sm: 0 1px 3px hsl(240 6% 0% / 0.06), 0 1px 2px hsl(240 6% 0% / 0.04); /* Champ, bouton au repos */
   --kz-shadow-md: 0 4px 12px hsl(240 6% 0% / 0.08), 0 2px 4px hsl(240 6% 0% / 0.04); /* Menu, popover, carte au survol */
   --kz-shadow-lg: 0 8px 24px hsl(240 6% 0% / 0.10), 0 4px 8px hsl(240 6% 0% / 0.05); /* Dialogue, feuille */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/tokens",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0",
   "description": "The Krizaka semantic design tokens (--kz-*) and the brand themes (Krizaka, Orazaka, Orochia): one DTCG source compiled to CSS (dark, light, media invariants), typed constants and React Native themes.",
   "keywords": [
     "krizaka",