@krizaka/tokens 3.12.0 → 3.13.0

package/BRAND.md

@@ -14,6 +14,7 @@ overrides). A product never re-invents its values: it imports its brand.
 | **Orochia** (creators) | **Velvet violet → magenta**, the serpent of its mark (unchanged). | The values of `@krizaka/orochia-design-system`, already adjusted to AA. |
 | **Yasakia** (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 (Yasakia'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. |
+| **Yomizaka** (documents, read and checked) | **Ink indigo** (藍, *ai*): the colour of writing and reading, a blue that leans to violet. The accent is the indigo (hue 240–242); the ink blue (hue 232) is the mark's first stop and `accent-2`. | The wheel is full, so the indigo is placed by test: ≥ 20° from the Krizaka blue (217, saturated) and from the Orochia violet (262, vivid), ≥ 60° from every other brand and every status. Dark: periwinkle under near-black text (6.3:1); light: deep indigo under white (8.7:1). `info` stays the Krizaka blue. |
 
 ### Palette (the accent family)
 
@@ -42,6 +43,18 @@ Yororis (a table of its own so the row above stays readable):
 | `ring` | = accent | = accent |
 | `info` | `hsl(217 92% 60%)` | `hsl(217 92% 50%)` |
 
+Yomizaka:
+
+| Role | Yomizaka dark | Yomizaka light |
+| :-- | :-- | :-- |
+| `accent` | `hsl(240 80% 74%)` #8888f2 | `hsl(242 52% 46%)` #3c38b2 |
+| `accent-hover` | `hsl(240 82% 80%)` (lightens) | `hsl(242 55% 40%)` |
+| `on-accent` | near-black (6.3:1) | white (8.7:1) |
+| `accent-text` | `hsl(240 85% 78%)` #9797f7 | `hsl(242 52% 44%)` #3a36ab |
+| `accent-2` | ink `hsl(232 72% 74%)` #8d9aec | `hsl(232 56% 40%)` #2d3c9f |
+| `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.
@@ -85,9 +98,10 @@ after in Storybook, *Brand/Evolution*):
 | Orochia | The serpent coiled into an "O" around the flame. | Unchanged. |
 | Yasakia | **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. |
+| Yomizaka | **The reading**: a **filled** page with the Krizaka cut at its upper-right corner, three lines of text in light, and a bright lens — the eye that reads — resting on its lower half, its handle running out of the page. A line of light scans the page from top to bottom (reading); one node, a page, rides the dashed orbit. | New (5th product, 2026-10). Ink `hsl(232 50% 55%)` #5362c6 → indigo `hsl(248 50% 58%)` #6d5ec9, every stop ≥ 3:1 on surfaces 0–2 in dark and light (a test); the lens is a pale indigo light. The cut corner is the house chamfer, so the page reads as Krizaka's at 20 px. |
 
-Web: `KrizakaLogo`, `OrazakaLogo`, `OrochiaLogo`, `YasakiaLogo`, `YororisLogo`, `ProductLogo id` (`@krizaka/ui`). Native: `KrizakaMark`,
-`OrazakaMark`, `OrochiaMark`, `YasakiaMark`, `YororisMark`, `ProductMark id` (`@krizaka/ui/native`). The geometry is shared
+Web: `KrizakaLogo`, `OrazakaLogo`, `OrochiaLogo`, `YasakiaLogo`, `YororisLogo`, `YomizakaLogo`, `ProductLogo id` (`@krizaka/ui`). Native: `KrizakaMark`,
+`OrazakaMark`, `OrochiaMark`, `YasakiaMark`, `YororisMark`, `YomizakaMark`, `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`, `yasakia`, `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-yasakia`, `.brand-yororis`. |
+| `@krizaka/tokens/brands/<id>.css` | A product app (`krizaka`, `orazaka`, `orochia`, `yasakia`, `yororis`, `yomizaka`), 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-yasakia`, `.brand-yororis`, `.brand-yomizaka`. |
 
 **Brands:** one colour per brand, its marks, icons and page language are in [`BRAND.md`](./BRAND.md).
 

package/dist/brands/scoped.css

@@ -216,6 +216,49 @@ html .theme-dark .brand-yororis, html .brand-yororis.theme-dark {
   --kz-brand-gradient-to: var(--kz-surface-0);
 }
 
+.brand-yomizaka {
+  --kz-accent: hsl(240 80% 74%);
+  --kz-accent-hover: hsl(240 82% 80%);
+  --kz-accent-soft: hsl(240 80% 74% / 0.12);
+  --kz-accent-text: hsl(240 85% 78%);
+  --kz-accent-2: hsl(232 72% 74%);
+  --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(236 30% 10%);
+  --kz-brand-gradient-via: hsl(244 22% 8%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+}
+html.light .brand-yomizaka, html .theme-light .brand-yomizaka, html .brand-yomizaka.theme-light {
+  --kz-accent: hsl(242 52% 46%);
+  --kz-accent-hover: hsl(242 55% 40%);
+  --kz-accent-soft: hsl(242 52% 46% / 0.08);
+  --kz-accent-text: hsl(242 52% 44%);
+  --kz-accent-2: hsl(232 56% 40%);
+  --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(236 60% 95%);
+  --kz-brand-gradient-via: hsl(244 50% 96%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+}
+html .theme-dark .brand-yomizaka, html .brand-yomizaka.theme-dark {
+  --kz-accent: hsl(240 80% 74%);
+  --kz-accent-hover: hsl(240 82% 80%);
+  --kz-accent-soft: hsl(240 80% 74% / 0.12);
+  --kz-accent-text: hsl(240 85% 78%);
+  --kz-accent-2: hsl(232 72% 74%);
+  --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(236 30% 10%);
+  --kz-brand-gradient-via: hsl(244 22% 8%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+}
+
 /* DEPRECATED — `.brand-yazakia` is `.brand-yasakia` (Yazakia was renamed Yasakia); kept for one minor version. */
 .brand-yazakia {
   --kz-accent: hsl(174 72% 50%);

package/dist/brands/yomizaka.css

@@ -0,0 +1,46 @@
+/* @krizaka/tokens — GÉNÉRÉ depuis src/brands/yomizaka.brand.json par scripts/build.mjs : ne pas éditer.
+   Yomizaka — l'indigo de l'encre (藍, ai) : la couleur de l'écrit et de la lecture, un bleu qui penche vers le violet. Distinct du bleu de Krizaka (217, saturé) par sa teinte (240, ≥ 20° — un test) et du violet d'Orochia (262, vif) par sa douceur ; loin de l'émeraude de Yasakia, de la sauge de Yororis, de l'orange d'Orazaka et de tous les statuts. Dark : indigo clair (pervenche) sous texte quasi noir ; light : indigo profond sous texte blanc. accent-2 est le bleu d'encre (232), le premier temps du logo et du dégradé des boutons. info reste le bleu de Krizaka. Le logo (mark) est un dégradé encre (232) → indigo (248) 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é yomizaka sur toute l'app, dans les deux thèmes. */
+
+:root, .theme-dark {
+  --kz-accent: hsl(240 80% 74%);
+  --kz-accent-hover: hsl(240 82% 80%);
+  --kz-accent-soft: hsl(240 80% 74% / 0.12);
+  --kz-accent-text: hsl(240 85% 78%);
+  --kz-accent-2: hsl(232 72% 74%);
+  --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(236 30% 10%);
+  --kz-brand-gradient-via: hsl(244 22% 8%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+}
+
+html.light {
+  --kz-accent: hsl(242 52% 46%);
+  --kz-accent-hover: hsl(242 55% 40%);
+  --kz-accent-soft: hsl(242 52% 46% / 0.08);
+  --kz-accent-text: hsl(242 52% 44%);
+  --kz-accent-2: hsl(232 56% 40%);
+  --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(236 60% 95%);
+  --kz-brand-gradient-via: hsl(244 50% 96%);
+}
+
+.theme-light {
+  --kz-accent: hsl(242 52% 46%);
+  --kz-accent-hover: hsl(242 55% 40%);
+  --kz-accent-soft: hsl(242 52% 46% / 0.08);
+  --kz-accent-text: hsl(242 52% 44%);
+  --kz-accent-2: hsl(232 56% 40%);
+  --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(236 60% 95%);
+  --kz-brand-gradient-via: hsl(244 50% 96%);
+  --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" | "yasakia" | "yororis";
+export type BrandId = "krizaka" | "orazaka" | "orochia" | "yasakia" | "yororis" | "yomizaka";
 /** 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

@@ -683,6 +683,36 @@ export const brands = /* @__PURE__ */ Object.freeze({
       "brandGradientVia": "hsl(96 30% 95%)",
       "brandGradientTo": "hsl(0 0% 98%)"
     }
+  },
+  "yomizaka": {
+    "dark": {
+      "accent": "hsl(240 80% 74%)",
+      "accentHover": "hsl(240 82% 80%)",
+      "accentSoft": "hsl(240 80% 74% / 0.12)",
+      "accentText": "hsl(240 85% 78%)",
+      "accent2": "hsl(232 72% 74%)",
+      "onAccent": "hsl(240 6% 5%)",
+      "ring": "hsl(240 80% 74%)",
+      "info": "hsl(217 92% 60%)",
+      "infoText": "hsl(217 92% 68%)",
+      "brandGradientFrom": "hsl(236 30% 10%)",
+      "brandGradientVia": "hsl(244 22% 8%)",
+      "brandGradientTo": "hsl(240 6% 5%)"
+    },
+    "light": {
+      "accent": "hsl(242 52% 46%)",
+      "accentHover": "hsl(242 55% 40%)",
+      "accentSoft": "hsl(242 52% 46% / 0.08)",
+      "accentText": "hsl(242 52% 44%)",
+      "accent2": "hsl(232 56% 40%)",
+      "onAccent": "hsl(0 0% 100%)",
+      "ring": "hsl(242 52% 46%)",
+      "info": "hsl(217 92% 50%)",
+      "infoText": "hsl(217 92% 42%)",
+      "brandGradientFrom": "hsl(236 60% 95%)",
+      "brandGradientVia": "hsl(244 50% 96%)",
+      "brandGradientTo": "hsl(0 0% 98%)"
+    }
   }
 });
 /** The marks' emblem gradients: [offset, colour] stops, the same in both themes (raw CSS). */
@@ -740,5 +770,15 @@ export const marks = /* @__PURE__ */ Object.freeze({
       "100%",
       "hsl(104 28% 42%)"
     ]
+  ],
+  "yomizaka": [
+    [
+      "0%",
+      "hsl(232 50% 55%)"
+    ],
+    [
+      "100%",
+      "hsl(248 50% 58%)"
+    ]
   ]
 });

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" | "yasakia" | "yororis";
+export type BrandId = "krizaka" | "orazaka" | "orochia" | "yasakia" | "yororis" | "yomizaka";
 /** 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

@@ -397,6 +397,36 @@ export const brands = /* @__PURE__ */ Object.freeze({
       "brandGradientVia": "#f1f6ee",
       "brandGradientTo": "#fafafa"
     }
+  },
+  "yomizaka": {
+    "dark": {
+      "accent": "#8888f2",
+      "accentHover": "#a2a2f6",
+      "accentSoft": "rgba(136,136,242,0.12)",
+      "accentText": "#9797f7",
+      "accent2": "#8d9aec",
+      "onAccent": "#0c0c0e",
+      "ring": "#8888f2",
+      "info": "#3b83f7",
+      "infoText": "#629cf8",
+      "brandGradientFrom": "#121321",
+      "brandGradientVia": "#111019",
+      "brandGradientTo": "#0c0c0e"
+    },
+    "light": {
+      "accent": "#3c38b2",
+      "accentHover": "#322e9e",
+      "accentSoft": "rgba(60,56,178,0.08)",
+      "accentText": "#3a36ab",
+      "accent2": "#2d3c9f",
+      "onAccent": "#ffffff",
+      "ring": "#3c38b2",
+      "info": "#0a64f5",
+      "infoText": "#0954ce",
+      "brandGradientFrom": "#ebecfa",
+      "brandGradientVia": "#f0f0fa",
+      "brandGradientTo": "#fafafa"
+    }
   }
 });
 /** The marks' emblem gradients: [offset, #rrggbb] stops, the same in both themes. */
@@ -454,5 +484,15 @@ export const marks = /* @__PURE__ */ Object.freeze({
       "100%",
       "#5d894d"
     ]
+  ],
+  "yomizaka": [
+    [
+      "0%",
+      "#5362c6"
+    ],
+    [
+      "100%",
+      "#6d5ec9"
+    ]
   ]
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@krizaka/tokens",
-  "version": "3.12.0",
-  "description": "The Krizaka semantic design tokens (--kz-*) and the brand themes (Krizaka, Orazaka, Orochia, Yasakia, Yororis): one DTCG source compiled to CSS (dark, light, media invariants), typed constants and React Native themes.",
+  "version": "3.13.0",
+  "description": "The Krizaka semantic design tokens (--kz-*) and the brand themes (Krizaka, Orazaka, Orochia, Yasakia, Yororis, Yomizaka): one DTCG source compiled to CSS (dark, light, media invariants), typed constants and React Native themes.",
   "keywords": [
     "krizaka",
     "design-tokens",
@@ -39,6 +39,7 @@
     "./brands/yasakia.css": "./dist/brands/yasakia.css",
     "./brands/yazakia.css": "./dist/brands/yazakia.css",
     "./brands/yororis.css": "./dist/brands/yororis.css",
+    "./brands/yomizaka.css": "./dist/brands/yomizaka.css",
     "./brands/scoped.css": "./dist/brands/scoped.css",
     "./native": {
       "types": "./dist/native.d.ts",
@@ -97,13 +98,13 @@
     {
       "name": ".",
       "path": "dist/index.js",
-      "limit": "3.7 kB",
+      "limit": "3.9 kB",
       "gzip": true
     },
     {
       "name": "./native",
       "path": "dist/native.js",
-      "limit": "2 kB",
+      "limit": "2.2 kB",
       "gzip": true
     }
   ],
@@ -113,6 +114,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/yasakia.css ./brands/yazakia.css ./brands/yororis.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/yasakia.css ./brands/yazakia.css ./brands/yororis.css ./brands/yomizaka.css ./brands/scoped.css"
   }
 }