@krizaka/tokens 2.0.0-beta.6 → 2.1.0

package/BRAND.md

@@ -10,7 +10,7 @@ overrides). A product never re-invents its values: it imports its brand.
 | Brand | Identity | Why |
 | :-- | :-- | :-- |
 | **Krizaka** (parent) | **Ink + Krizaka blue.** The neutral surfaces and text of the platform carry the brand; one blue, the core of the Krizaka mark, is the only accent. | The parent frames its products without competing with them: ink is neutral next to orange and violet, and blue is the complement of the Orazaka orange. It is also the platform default (`tokens.css` = the Krizaka brand). |
-| **Orazaka** (sovereign AI) | **Orange**, taken from its own mark: the gradient `#f59e0b → #b45309` (hues 38 → 26). | The accent sits at hue 26 — the *orange* end of the mark, not its amber end: hue 38 is `--kz-warning`, and a primary button must never read as a warning. The light theme uses the mark's deep stop **exactly** (`#b45309`). `info` stays blue (an orange "info" would read as a warning). |
+| **Orazaka** (sovereign AI) | **Orange**, hue 26 — the accent and the mark share it. | Hue 38 (amber) is `--kz-warning`: a primary button, and since 2.1.0 the mark, must never read as a warning. The light theme's accent is the deep orange `#b45309`, also the first stop of the mark. `info` stays blue (an orange "info" would read as a warning). |
 | **Orochia** (creators) | **Velvet violet → magenta**, the serpent of its mark (unchanged). | The values of `@krizaka/orochia-design-system`, already adjusted to AA. |
 
 ### Palette (the accent family)
@@ -24,7 +24,7 @@ overrides). A product never re-invents its values: it imports its brand.
 | `accent-hover` | `hsl(217 88% 45%)` | `hsl(217 88% 42%)` | `hsl(26 92% 62%)` (lightens) | `hsl(26 90% 31%)` | #6d28d9 | #6d28d9 |
 | `on-accent` | white (4.6:1) | white (5.1:1) | near-black `hsl(240 6% 5%)` (7.4:1) | white (5.1:1) | white (5.7:1) | white (5.7:1) |
 | `accent-text` | `hsl(217 92% 68%)` #629cf8 | `hsl(217 92% 42%)` #0954ce | `hsl(26 92% 60%)` #f78c3b | `hsl(26 90% 32%)` #9b4808 | #a78bfa | #6d28d9 |
-| `accent-2` | = accent | = accent | #f59e0b (the mark's light stop) | `hsl(32 95% 33%)` | #db2777 | #db2777 |
+| `accent-2` | = accent | = accent | #f59e0b (closes the buttons' gradient) | `hsl(32 95% 33%)` | #db2777 | #db2777 |
 | `ring` | = accent | = accent | = accent | = accent | #a78bfa | #7c3aed |
 | `info` | = accent | = accent | `hsl(217 92% 60%)` | `hsl(217 92% 50%)` | = accent | = accent |
 
@@ -67,12 +67,14 @@ after in Storybook, *Brand/Evolution*):
 | Mark | Emblem | Change and reason |
 | :-- | :-- | :-- |
 | Krizaka | An **ink** hexagonal shield, open at its upper-right vertex where a **blue node** breaks out, around a blue core. | Before: hairline strokes and five hard-coded blues that vanished below 48 px and did not crop. Now the weight, crop and grammar of Orochia; ink + one blue, the brand palette. |
-| Orazaka | Three **solid** hexagonal shards in the mark's own orange gradient, orbiting a core. | Before: two grey outlines and one amber, 3.5-unit strokes — the mark read grey and thin next to Orochia. Same idea and colours, now solid, all orange, with the family's crop. |
+| Orazaka | Three **solid** hexagonal shards in the brand's orange gradient, orbiting a core. | Before: two grey outlines and one amber, 3.5-unit strokes — the mark read grey and thin next to Orochia. Same idea, now solid, with the family's crop. **2.1.0:** amber (`#b45309 → #f59e0b`, hues 26 → 38) becomes the brand's orange — deep orange `hsl(26 90.5% 37.1%)` #b45309 → orange `hsl(26 92% 45%)` #dc6509, one hue: the old light stop was the warning's hue and read at 2:1 on a light page; every stop now reads ≥ 3:1 on surfaces 0–2 in dark and light (a test). |
 | Orochia | The serpent coiled into an "O" around the flame. | Unchanged. |
 
 Web: `KrizakaLogo`, `OrazakaLogo`, `OrochiaLogo`, `ProductLogo id` (`@krizaka/ui`). Native: `KrizakaMark`,
 `OrazakaMark`, `OrochiaMark`, `ProductMark id` (`@krizaka/ui/native`). The geometry is shared
-(`packages/ui/src/marks/*-geometry.ts`) and its colours are tested against the brand themes.
+(`packages/ui/src/marks/*-geometry.ts`); the emblem gradients are **brand tokens** — `$extensions["com.krizaka"].mark` of
+each `src/brands/<id>.brand.json`, exported as `marks.<id>` (`@krizaka/tokens`, `/native`) — read by the geometry, never
+copied. A mark is the same in both themes: its stops are chosen to read on dark and light pages.
 
 ## 3. Icons — the signature
 

package/README.md

@@ -27,7 +27,7 @@ npm install @krizaka/tokens
 | :-- | :-- | :-- |
 | `@krizaka/tokens/tokens.css` | Web (imported once, usually through `@krizaka/tailwind`) | The `--kz-*` custom properties. |
 | `@krizaka/tokens` | TS / JS on the web (canvas, charts, e-mails, inline styles) | `tokens` (`var(--kz-…)` references, camelCase keys), `values.dark` / `values.light` (raw CSS, aliases resolved), `TokenName`. |
-| `@krizaka/tokens/native` | React Native / Expo | `themes.dark` / `themes.light` (hex, `rgba()` when translucent), `radius` (dp), `typography`, `motion.ease`, type `Theme`; `brands.<id>` (ThemeProvider overrides). |
+| `@krizaka/tokens/native` | React Native / Expo | `themes.dark` / `themes.light` (hex, `rgba()` when translucent), `radius` (dp), `typography`, `motion.ease`, type `Theme`; `brands.<id>` (ThemeProvider overrides); `marks.<id>` (the mark's emblem gradient, `[offset, #rrggbb]` stops). |
 | `@krizaka/tokens/brands/<id>.css` | A product app (`krizaka`, `orazaka`, `orochia`), after the tokens | The brand's accent family and section gradient, dark and light. |
 | `@krizaka/tokens/brands/scoped.css` | A page showing several brands | `.brand-krizaka`, `.brand-orazaka`, `.brand-orochia`. |
 
@@ -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

@@ -1,5 +1,5 @@
 /* @krizaka/tokens — GÉNÉRÉ depuis src/brands/orazaka.brand.json par scripts/build.mjs : ne pas éditer.
-   Orazaka — orange, pris dans le dégradé du logo (#f59e0b → #b45309, teintes 38 → 26). L'accent est à la teinte 26 (l'orange du logo, pas son ambre : la teinte 38 est celle de --kz-warning). Dark : orange clair sous texte quasi noir ; light : l'arrêt profond du logo exactement (#b45309) sous texte blanc. accent-2 prolonge le dégradé vers l'ambre. info reste bleu : un statut d'information orange se confondrait avec un avertissement.
+   Orazaka — orange, teinte 26 (pas 38 : la teinte 38 est celle de --kz-warning, un bouton principal ne doit jamais lire comme un avertissement). Dark : orange clair sous texte quasi noir ; light : orange profond (#b45309) sous texte blanc. accent-2 prolonge le dégradé des boutons vers l'ambre. info reste bleu : un statut d'information orange se confondrait avec un avertissement. Le logo (mark) est un dégradé orange profond → orange sur la même teinte 26, identique dans les deux thèmes et ≥ 3:1 sur les surfaces 0–2 des deux thèmes.
    Importé après tokens.css (ou @krizaka/tailwind) : l'identité orazaka sur toute l'app, dans les deux thèmes. */
 
 :root, .theme-dark {
@@ -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,10 @@ 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 } } };
+/** A gradient stop of a mark: [offset, colour]. */
+export type MarkStop = readonly [offset: string, color: string];
+/** The marks' emblem gradients: [offset, colour] stops, the same in both themes (raw CSS). */
+export declare const marks: { readonly [B in BrandId]: readonly MarkStop[] };

package/dist/index.js

@@ -1,7 +1,7 @@
 // @krizaka/tokens — GÉNÉRÉ depuis src/tokens/*.tokens.json par scripts/build.mjs : ne pas éditer.
 
 /** Every token as a CSS reference, `var(--kz-…)`: follows the active theme. */
-export const tokens = Object.freeze({
+export const tokens = /* @__PURE__ */ Object.freeze({
   "surface0": "var(--kz-surface-0)",
   "surface1": "var(--kz-surface-1)",
   "surface2": "var(--kz-surface-2)",
@@ -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)",
@@ -46,7 +50,7 @@ export const tokens = Object.freeze({
 });
 
 /** The raw CSS values per theme (aliases resolved), for canvas, charts and e-mails. */
-export const values = Object.freeze({ dark: Object.freeze({
+export const values = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze({
   "surface0": "hsl(240 6% 5%)",
   "surface1": "hsl(240 5% 9%)",
   "surface2": "hsl(240 5% 13%)",
@@ -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)",
@@ -88,7 +96,7 @@ export const values = Object.freeze({ dark: Object.freeze({
   "fontSans": "Inter, system-ui, sans-serif",
   "fontDisplay": "Inter, system-ui, sans-serif",
   "fontMono": "\"JetBrains Mono\", ui-monospace, monospace"
-}), light: Object.freeze({
+}), light: /* @__PURE__ */ Object.freeze({
   "surface0": "hsl(0 0% 98%)",
   "surface1": "hsl(0 0% 100%)",
   "surface2": "hsl(240 6% 95%)",
@@ -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)",
@@ -133,7 +145,7 @@ export const values = Object.freeze({ dark: Object.freeze({
 }) });
 
 /** The brand themes: the accent family of each Krizaka brand, raw CSS per theme (aliases resolved). */
-export const brands = Object.freeze({
+export const brands = /* @__PURE__ */ Object.freeze({
   "krizaka": {
     "dark": {
       "accent": "hsl(217 92% 53%)",
@@ -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,9 +230,47 @@ 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%)"
     }
   }
 });
+/** The marks' emblem gradients: [offset, colour] stops, the same in both themes (raw CSS). */
+export const marks = /* @__PURE__ */ Object.freeze({
+  "krizaka": [
+    [
+      "0%",
+      "hsl(217 92% 53%)"
+    ],
+    [
+      "100%",
+      "hsl(217 92% 68%)"
+    ]
+  ],
+  "orazaka": [
+    [
+      "0%",
+      "hsl(26 90.5% 37.1%)"
+    ],
+    [
+      "100%",
+      "hsl(26 92% 45%)"
+    ]
+  ],
+  "orochia": [
+    [
+      "0%",
+      "hsl(262.1 83.3% 57.8%)"
+    ],
+    [
+      "55%",
+      "hsl(292.2 84.1% 60.6%)"
+    ],
+    [
+      "100%",
+      "hsl(328.6 85.5% 70.2%)"
+    ]
+  ]
+});

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,10 @@ 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 };
+/** A gradient stop of a mark: [offset, #rrggbb]. */
+export type MarkStop = readonly [offset: string, color: string];
+/** The marks' emblem gradients: [offset, #rrggbb] stops, the same in both themes. */
+export declare const marks: { readonly [B in BrandId]: readonly MarkStop[] };

package/dist/native.js

@@ -1,7 +1,7 @@
 // @krizaka/tokens — GÉNÉRÉ depuis src/tokens/*.tokens.json par scripts/build.mjs : ne pas éditer.
 
 /** Colour roles per theme, resolved for React Native (`#rrggbb`, `rgba()` when translucent). */
-export const themes = Object.freeze({ dark: Object.freeze({
+export const themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze({
   "surface0": "#0c0c0e",
   "surface1": "#161618",
   "surface2": "#1f1f23",
@@ -25,13 +25,17 @@ 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)"
-}), light: Object.freeze({
+}), light: /* @__PURE__ */ Object.freeze({
   "surface0": "#fafafa",
   "surface1": "#ffffff",
   "surface2": "#f1f1f3",
@@ -55,16 +59,20 @@ 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)"
 }) });
 
 /** Corner radii, in dp. */
-export const radius = Object.freeze({
+export const radius = /* @__PURE__ */ Object.freeze({
   "sm": 8,
   "md": 12,
   "lg": 16,
@@ -73,17 +81,17 @@ export const radius = Object.freeze({
 });
 
 /** Font families: the first family of each web stack (React Native takes a single name). */
-export const typography = Object.freeze({
+export const typography = /* @__PURE__ */ Object.freeze({
   "sans": "Inter",
   "display": "Inter",
   "mono": "JetBrains Mono"
 });
 
 /** Motion: the cubic-bezier control points (`Easing.bezier(...motion.ease)`). */
-export const motion = Object.freeze({ ease: Object.freeze([0.16,1,0.3,1]) });
+export const motion = /* @__PURE__ */ Object.freeze({ ease: /* @__PURE__ */ Object.freeze([0.16,1,0.3,1]) });
 
 /** The brand themes as ThemeProvider overrides (`overrides={brands.orazaka}`): the accent family per theme. */
-export const brands = Object.freeze({
+export const brands = /* @__PURE__ */ Object.freeze({
   "krizaka": {
     "dark": {
       "accent": "#196df5",
@@ -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,9 +176,47 @@ export const brands = Object.freeze({
       "onAccent": "#ffffff",
       "ring": "#7c3aed",
       "info": "#7c3aed",
+      "infoText": "#6d28d9",
       "brandGradientFrom": "#efe7fe",
       "brandGradientVia": "#fdedf5",
       "brandGradientTo": "#fafafa"
     }
   }
 });
+/** The marks' emblem gradients: [offset, #rrggbb] stops, the same in both themes. */
+export const marks = /* @__PURE__ */ Object.freeze({
+  "krizaka": [
+    [
+      "0%",
+      "#196df5"
+    ],
+    [
+      "100%",
+      "#629cf8"
+    ]
+  ],
+  "orazaka": [
+    [
+      "0%",
+      "#b45309"
+    ],
+    [
+      "100%",
+      "#dc6509"
+    ]
+  ],
+  "orochia": [
+    [
+      "0%",
+      "#7c3aed"
+    ],
+    [
+      "55%",
+      "#d946ef"
+    ],
+    [
+      "100%",
+      "#f472b6"
+    ]
+  ]
+});

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.6",
+  "version": "2.1.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",