@krizaka/tokens 2.8.0 → 2.10.0

package/BRAND.md

@@ -13,6 +13,7 @@ overrides). A product never re-invents its values: it imports its brand.
 | **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. |
 | **Yazakia** (dating, talk first) | **Emerald → turquoise.** The accent is the turquoise (hue 174); the emerald (hue 152–156) is the mark's first stop and `accent-2`. | Green is the family's free colour and takes the opposite view of the red and pink of dating apps. `--kz-success` is emerald (hue 160): a primary button must never read as a success, so the accent sits 14° away on the turquoise (a test) and the emerald stays in the mark and the gradients. Dark: light turquoise under near-black text (11:1); light: deep turquoise under white (5.9:1). `info` stays blue. |
+| **Yororis** (a listening space) | **Sand → sage.** A warm neutral that slides into a soft grey green: calm. The accent is the sage (hue 98–100); the sand (hue 34–36) is the mark's first stop, the core's light and `accent-2`. | Apart from every other brand (Yazakia's emerald and turquoise, the blue, the orange, the violet) and from every status: the sage sits ≥ 60° from `--kz-success` (160) and `--kz-warning` (38). The sand shares the warning's hue family, so it is told apart by its chroma — at most half the warning's saturation (≤ 40 % vs 92 %, a test) — and it never fills a primary button alone. Dark: light sage under near-black text (8.6:1); light: deep sage under white (6.9:1). `info` stays blue. |
 
 ### Palette (the accent family)
 
@@ -29,6 +30,18 @@ overrides). A product never re-invents its values: it imports its brand.
 | `ring` | = accent | = accent | = accent | = accent | #a78bfa | #7c3aed | = accent | = accent |
 | `info` | = accent | = accent | `hsl(217 92% 60%)` | `hsl(217 92% 50%)` | = accent | = accent | `hsl(217 92% 60%)` | `hsl(217 92% 50%)` |
 
+Yororis (a table of its own so the row above stays readable):
+
+| Role | Yororis dark | Yororis light |
+| :-- | :-- | :-- |
+| `accent` | `hsl(98 24% 62%)` #98b587 | `hsl(100 28% 30%)` #456237 |
+| `accent-hover` | `hsl(98 26% 70%)` (lightens) | `hsl(100 30% 25%)` |
+| `on-accent` | near-black (8.6:1) | white (6.9:1) |
+| `accent-text` | `hsl(98 28% 68%)` #a7c497 | `hsl(100 28% 28%)` #415b33 |
+| `accent-2` | sand `hsl(36 38% 62%)` #c3a579 | `hsl(34 38% 33%)` #745834 |
+| `ring` | = accent | = accent |
+| `info` | `hsl(217 92% 60%)` | `hsl(217 92% 50%)` |
+
 Every pair is a test (`test/tokens.test.ts`, "brands"): `on-accent` ≥ 4.5:1 on `accent`, `accent-hover` and
 `accent-2`; `accent-text` ≥ 4.5:1 on surfaces 0–3 and on every section-gradient stop; `ring` ≥ 3:1 on the page;
 `text-primary` / `text-secondary` ≥ 4.5:1 on every section-gradient stop — in dark **and** light.
@@ -70,10 +83,11 @@ after in Storybook, *Brand/Evolution*):
 | 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 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. |
-| Yazakia | Two **solid** arms that lean in and meet — a "Y", two people who find each other — each ending in a round head, the stem below, a bright core where they join. Two nodes, the pair, ride the dashed orbit. | New (3rd product, 2026-10). Emerald `hsl(156 92% 32%)` #079d61 → turquoise `hsl(178 90% 32%)` #089b96, mid-tones chosen so that every stop reads ≥ 3:1 on surfaces 0–2 in dark and light (a test): one mark for both themes. |
+| Yazakia | **Two voices**: two **solid** speech bubbles, mirrored, that overlap — the left a shade deeper, each tail pointing down and out. Where they overlap, what the two share once they have talked, is the bright core: a lens lit from above that breathes, set apart by a thin gap. The pair, two nodes, rides the dashed orbit. | New (3rd product, 2026-10). Emerald `hsl(156 92% 32%)` #079d61 → turquoise `hsl(178 90% 32%)` #089b96, mid-tones chosen so that every stop reads ≥ 3:1 on surfaces 0–2 in dark and light (a test): one mark for both themes. **2.9:** the first mark (a "Y" of two thin arms ending in heads) read as a plain thin "Y" at 16–24 px, weak next to Orochia; the bubbles are a filled glyph of Orochia's weight, readable in a nav chip, and say the product — talk first, both ways — without a heart. |
+| Yororis | **The hold**: two **filled** leaves — open hands — rise from one stem into a "Y" and cup a warm core that rests *inside* them (not on the junction): held, given room, listened to. A vein of light runs along each leaf (depth, like the serpent's scales); one node, the moment, rides the dashed orbit — it comes round, then it goes. The slowest breath of the family (4.2 s). | New (4th product, 2026-10). Chosen over a standing crane and a bowing crane (captures in the pull request): the only one that stays a clear "Y" with its core at 20 px. Sand `hsl(34 46% 44%)` #a4773d → sage `hsl(104 28% 42%)` #5d894d, every stop ≥ 3:1 on surfaces 0–2 in dark and light (a test); the core rises from the sand to a light sand #e6c993. |
 
-Web: `KrizakaLogo`, `OrazakaLogo`, `OrochiaLogo`, `YazakiaLogo`, `ProductLogo id` (`@krizaka/ui`). Native: `KrizakaMark`,
-`OrazakaMark`, `OrochiaMark`, `YazakiaMark`, `ProductMark id` (`@krizaka/ui/native`). The geometry is shared
+Web: `KrizakaLogo`, `OrazakaLogo`, `OrochiaLogo`, `YazakiaLogo`, `YororisLogo`, `ProductLogo id` (`@krizaka/ui`). Native: `KrizakaMark`,
+`OrazakaMark`, `OrochiaMark`, `YazakiaMark`, `YororisMark`, `ProductMark id` (`@krizaka/ui/native`). The geometry is shared
 (`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.

package/README.md

@@ -28,8 +28,8 @@ 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); `marks.<id>` (the mark's emblem gradient, `[offset, #rrggbb]` stops). |
-| `@krizaka/tokens/brands/<id>.css` | A product app (`krizaka`, `orazaka`, `orochia`, `yazakia`), 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`, `.brand-yazakia`. |
+| `@krizaka/tokens/brands/<id>.css` | A product app (`krizaka`, `orazaka`, `orochia`, `yazakia`, `yororis`), 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`, `.brand-yazakia`, `.brand-yororis`. |
 
 **Brands:** one colour per brand, its marks, icons and page language are in [`BRAND.md`](./BRAND.md).
 

package/dist/brands/scoped.css

@@ -172,3 +172,46 @@ html .theme-dark .brand-yazakia, html .brand-yazakia.theme-dark {
   --kz-brand-gradient-via: hsl(180 35% 7%);
   --kz-brand-gradient-to: var(--kz-surface-0);
 }
+
+.brand-yororis {
+  --kz-accent: hsl(98 24% 62%);
+  --kz-accent-hover: hsl(98 26% 70%);
+  --kz-accent-soft: hsl(98 24% 62% / 0.12);
+  --kz-accent-text: hsl(98 28% 68%);
+  --kz-accent-2: hsl(36 38% 62%);
+  --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(36 22% 9%);
+  --kz-brand-gradient-via: hsl(98 14% 7%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+}
+html.light .brand-yororis, html .theme-light .brand-yororis, html .brand-yororis.theme-light {
+  --kz-accent: hsl(100 28% 30%);
+  --kz-accent-hover: hsl(100 30% 25%);
+  --kz-accent-soft: hsl(100 28% 30% / 0.08);
+  --kz-accent-text: hsl(100 28% 28%);
+  --kz-accent-2: hsl(34 38% 33%);
+  --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(38 45% 93%);
+  --kz-brand-gradient-via: hsl(96 30% 95%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+}
+html .theme-dark .brand-yororis, html .brand-yororis.theme-dark {
+  --kz-accent: hsl(98 24% 62%);
+  --kz-accent-hover: hsl(98 26% 70%);
+  --kz-accent-soft: hsl(98 24% 62% / 0.12);
+  --kz-accent-text: hsl(98 28% 68%);
+  --kz-accent-2: hsl(36 38% 62%);
+  --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(36 22% 9%);
+  --kz-brand-gradient-via: hsl(98 14% 7%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+}

package/dist/brands/yororis.css

@@ -0,0 +1,46 @@
+/* @krizaka/tokens — GÉNÉRÉ depuis src/brands/yororis.brand.json par scripts/build.mjs : ne pas éditer.
+   Yororis — sable → sauge, un neutre chaud qui glisse vers un vert gris doux : apaisant, distinct de l'émeraude de Yazakia, du bleu de Krizaka, de l'orange d'Orazaka et du violet d'Orochia. L'accent (boutons, liens, anneau) est la sauge, teinte 98 : à 60° de --kz-success (160) et de --kz-warning (38), pour qu'un bouton principal ne se lise jamais comme un statut. Dark : sauge claire sous texte quasi noir ; light : sauge profonde sous texte blanc. accent-2 est le sable (teinte 36), le second temps du dégradé des boutons et de la mascotte, jamais un statut : sa teinte est voisine de --kz-warning, il s'en sépare par la saturation (≤ 40 %, contre 92 % pour l'ambre des avertissements — un test). info reste bleu. Le logo (mark) est un dégradé sable (34) → sauge (104) de teinte moyenne, 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é yororis sur toute l'app, dans les deux thèmes. */
+
+:root, .theme-dark {
+  --kz-accent: hsl(98 24% 62%);
+  --kz-accent-hover: hsl(98 26% 70%);
+  --kz-accent-soft: hsl(98 24% 62% / 0.12);
+  --kz-accent-text: hsl(98 28% 68%);
+  --kz-accent-2: hsl(36 38% 62%);
+  --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(36 22% 9%);
+  --kz-brand-gradient-via: hsl(98 14% 7%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+}
+
+html.light {
+  --kz-accent: hsl(100 28% 30%);
+  --kz-accent-hover: hsl(100 30% 25%);
+  --kz-accent-soft: hsl(100 28% 30% / 0.08);
+  --kz-accent-text: hsl(100 28% 28%);
+  --kz-accent-2: hsl(34 38% 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(38 45% 93%);
+  --kz-brand-gradient-via: hsl(96 30% 95%);
+}
+
+.theme-light {
+  --kz-accent: hsl(100 28% 30%);
+  --kz-accent-hover: hsl(100 30% 25%);
+  --kz-accent-soft: hsl(100 28% 30% / 0.08);
+  --kz-accent-text: hsl(100 28% 28%);
+  --kz-accent-2: hsl(34 38% 33%);
+  --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(38 45% 93%);
+  --kz-brand-gradient-via: hsl(96 30% 95%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+}

package/dist/index.d.ts

@@ -159,7 +159,7 @@ export interface TypeStep {
 export declare const typeScale: readonly TypeStep[];
 
 /** A Krizaka brand. */
-export type BrandId = "krizaka" | "orazaka" | "orochia" | "yazakia";
+export type BrandId = "krizaka" | "orazaka" | "orochia" | "yazakia" | "yororis";
 /** The roles a brand theme sets. */
 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). */

package/dist/index.js

@@ -653,6 +653,36 @@ export const brands = /* @__PURE__ */ Object.freeze({
       "brandGradientVia": "hsl(176 70% 95%)",
       "brandGradientTo": "hsl(0 0% 98%)"
     }
+  },
+  "yororis": {
+    "dark": {
+      "accent": "hsl(98 24% 62%)",
+      "accentHover": "hsl(98 26% 70%)",
+      "accentSoft": "hsl(98 24% 62% / 0.12)",
+      "accentText": "hsl(98 28% 68%)",
+      "accent2": "hsl(36 38% 62%)",
+      "onAccent": "hsl(240 6% 5%)",
+      "ring": "hsl(98 24% 62%)",
+      "info": "hsl(217 92% 60%)",
+      "infoText": "hsl(217 92% 68%)",
+      "brandGradientFrom": "hsl(36 22% 9%)",
+      "brandGradientVia": "hsl(98 14% 7%)",
+      "brandGradientTo": "hsl(240 6% 5%)"
+    },
+    "light": {
+      "accent": "hsl(100 28% 30%)",
+      "accentHover": "hsl(100 30% 25%)",
+      "accentSoft": "hsl(100 28% 30% / 0.08)",
+      "accentText": "hsl(100 28% 28%)",
+      "accent2": "hsl(34 38% 33%)",
+      "onAccent": "hsl(0 0% 100%)",
+      "ring": "hsl(100 28% 30%)",
+      "info": "hsl(217 92% 50%)",
+      "infoText": "hsl(217 92% 42%)",
+      "brandGradientFrom": "hsl(38 45% 93%)",
+      "brandGradientVia": "hsl(96 30% 95%)",
+      "brandGradientTo": "hsl(0 0% 98%)"
+    }
   }
 });
 /** The marks' emblem gradients: [offset, colour] stops, the same in both themes (raw CSS). */
@@ -700,5 +730,15 @@ export const marks = /* @__PURE__ */ Object.freeze({
       "100%",
       "hsl(178 90% 32%)"
     ]
+  ],
+  "yororis": [
+    [
+      "0%",
+      "hsl(34 46% 44%)"
+    ],
+    [
+      "100%",
+      "hsl(104 28% 42%)"
+    ]
   ]
 });

package/dist/native.d.ts

@@ -101,7 +101,7 @@ export declare const shadows: { readonly dark: Shadows; readonly light: Shadows
 export declare const cut: { readonly size: number };
 
 /** A Krizaka brand. */
-export type BrandId = "krizaka" | "orazaka" | "orochia" | "yazakia";
+export type BrandId = "krizaka" | "orazaka" | "orochia" | "yazakia" | "yororis";
 /** 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" | "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. */

package/dist/native.js

@@ -367,6 +367,36 @@ export const brands = /* @__PURE__ */ Object.freeze({
       "brandGradientVia": "#e9fbfa",
       "brandGradientTo": "#fafafa"
     }
+  },
+  "yororis": {
+    "dark": {
+      "accent": "#98b587",
+      "accentHover": "#adc69f",
+      "accentSoft": "rgba(152,181,135,0.12)",
+      "accentText": "#a7c497",
+      "accent2": "#c3a579",
+      "onAccent": "#0c0c0e",
+      "ring": "#98b587",
+      "info": "#3b83f7",
+      "infoText": "#629cf8",
+      "brandGradientFrom": "#1c1812",
+      "brandGradientVia": "#11140f",
+      "brandGradientTo": "#0c0c0e"
+    },
+    "light": {
+      "accent": "#456237",
+      "accentHover": "#39532d",
+      "accentSoft": "rgba(69,98,55,0.08)",
+      "accentText": "#415b33",
+      "accent2": "#745834",
+      "onAccent": "#ffffff",
+      "ring": "#456237",
+      "info": "#0a64f5",
+      "infoText": "#0954ce",
+      "brandGradientFrom": "#f5efe5",
+      "brandGradientVia": "#f1f6ee",
+      "brandGradientTo": "#fafafa"
+    }
   }
 });
 /** The marks' emblem gradients: [offset, #rrggbb] stops, the same in both themes. */
@@ -414,5 +444,15 @@ export const marks = /* @__PURE__ */ Object.freeze({
       "100%",
       "#089b96"
     ]
+  ],
+  "yororis": [
+    [
+      "0%",
+      "#a4773d"
+    ],
+    [
+      "100%",
+      "#5d894d"
+    ]
   ]
 });

package/dist/tokens.css

@@ -22,7 +22,7 @@
   --kz-text-secondary: hsl(240 4% 64%); /* Texte d'appui, libellés */
   --kz-text-muted: hsl(240 4% 47%); /* Métadonnées, placeholders, désactivé (≥ 3:1) */
 
-  /* Accent : l'identité de la marque (Krizaka par défaut ; Orazaka, Orochia, Yazakia dans src/brands). Surchargé par un thème de marque, jamais par un composant. */
+  /* Accent : l'identité de la marque (Krizaka par défaut ; Orazaka, Orochia, Yazakia, Yororis dans src/brands). Surchargé par un thème de marque, jamais par un composant. */
   --kz-accent: hsl(217 92% 53%); /* Action principale, lien, sélection */
   --kz-accent-hover: hsl(217 88% 45%); /* Accent au survol */
   --kz-accent-soft: hsl(217 92% 53% / 0.10); /* Fond teinté (sélection, badge) */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@krizaka/tokens",
-  "version": "2.8.0",
-  "description": "The Krizaka semantic design tokens (--kz-*) and the brand themes (Krizaka, Orazaka, Orochia, Yazakia): one DTCG source compiled to CSS (dark, light, media invariants), typed constants and React Native themes.",
+  "version": "2.10.0",
+  "description": "The Krizaka semantic design tokens (--kz-*) and the brand themes (Krizaka, Orazaka, Orochia, Yazakia, Yororis): one DTCG source compiled to CSS (dark, light, media invariants), typed constants and React Native themes.",
   "keywords": [
     "krizaka",
     "design-tokens",
@@ -37,6 +37,7 @@
     "./brands/orazaka.css": "./dist/brands/orazaka.css",
     "./brands/orochia.css": "./dist/brands/orochia.css",
     "./brands/yazakia.css": "./dist/brands/yazakia.css",
+    "./brands/yororis.css": "./dist/brands/yororis.css",
     "./brands/scoped.css": "./dist/brands/scoped.css",
     "./native": {
       "types": "./dist/native.d.ts",
@@ -62,7 +63,7 @@
     "size-limit": "^14.2.0",
     "typescript": "^5.9.0",
     "vitest": "^4.1.11",
-    "@krizaka/config": "0.1.0"
+    "@krizaka/config": "0.2.0"
   },
   "engines": {
     "node": ">=20"
@@ -95,13 +96,13 @@
     {
       "name": ".",
       "path": "dist/index.js",
-      "limit": "3.5 kB",
+      "limit": "3.7 kB",
       "gzip": true
     },
     {
       "name": "./native",
       "path": "dist/native.js",
-      "limit": "1.85 kB",
+      "limit": "2 kB",
       "gzip": true
     }
   ],
@@ -111,6 +112,6 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "size": "size-limit",
-    "publint": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./tokens.css ./brands/krizaka.css ./brands/orazaka.css ./brands/orochia.css ./brands/yazakia.css ./brands/scoped.css"
+    "publint": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./tokens.css ./brands/krizaka.css ./brands/orazaka.css ./brands/orochia.css ./brands/yazakia.css ./brands/yororis.css ./brands/scoped.css"
   }
 }