@krizaka/tokens 2.6.0 → 2.8.0

package/BRAND.md

@@ -12,21 +12,22 @@ overrides). A product never re-invents its values: it imports its brand.
 | **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**, 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. |
 
 ### Palette (the accent family)
 
 `on-accent` is the text and icon colour on the accent; `accent-text` is the accent **as text** (links, active labels),
 ≥ 4.5:1 on every surface; `accent-2` closes gradients.
 
-| Role | Krizaka dark | Krizaka light | Orazaka dark | Orazaka light | Orochia dark | Orochia light |
-| :-- | :-- | :-- | :-- | :-- | :-- | :-- |
-| `accent` | `hsl(217 92% 53%)` #196df5 | `hsl(217 92% 50%)` #0a64f5 | `hsl(26 92% 55%)` #f67e23 | `hsl(26 90.5% 37.1%)` #b45309 | #7c3aed | #7c3aed |
-| `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 (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 |
+| Role | Krizaka dark | Krizaka light | Orazaka dark | Orazaka light | Orochia dark | Orochia light | Yazakia dark | Yazakia light |
+| :-- | :-- | :-- | :-- | :-- | :-- | :-- | :-- | :-- |
+| `accent` | `hsl(217 92% 53%)` #196df5 | `hsl(217 92% 50%)` #0a64f5 | `hsl(26 92% 55%)` #f67e23 | `hsl(26 90.5% 37.1%)` #b45309 | #7c3aed | #7c3aed | `hsl(174 72% 50%)` #24dbc9 | `hsl(175 85% 24%)` #097169 |
+| `accent-hover` | `hsl(217 88% 45%)` | `hsl(217 88% 42%)` | `hsl(26 92% 62%)` (lightens) | `hsl(26 90% 31%)` | #6d28d9 | #6d28d9 | `hsl(174 72% 58%)` (lightens) | `hsl(175 85% 20%)` |
+| `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) | near-black (11.2:1) | white (5.9: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 | `hsl(174 72% 56%)` #3ee0cf | `hsl(175 85% 23%)` #096d64 |
+| `accent-2` | = accent | = accent | #f59e0b (closes the buttons' gradient) | `hsl(32 95% 33%)` | #db2777 | #db2777 | emerald `hsl(152 70% 45%)` #22c378 | `hsl(152 76% 26%)` #107546 |
+| `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%)` |
 
 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;
@@ -69,9 +70,10 @@ 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. |
 
-Web: `KrizakaLogo`, `OrazakaLogo`, `OrochiaLogo`, `ProductLogo id` (`@krizaka/ui`). Native: `KrizakaMark`,
-`OrazakaMark`, `OrochiaMark`, `ProductMark id` (`@krizaka/ui/native`). The geometry is shared
+Web: `KrizakaLogo`, `OrazakaLogo`, `OrochiaLogo`, `YazakiaLogo`, `ProductLogo id` (`@krizaka/ui`). Native: `KrizakaMark`,
+`OrazakaMark`, `OrochiaMark`, `YazakiaMark`, `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`), 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`. |
+| `@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`. |
 
 **Brands:** one colour per brand, its marks, icons and page language are in [`BRAND.md`](./BRAND.md).
 

package/dist/brands/scoped.css

@@ -129,3 +129,46 @@ html .theme-dark .brand-orochia, html .brand-orochia.theme-dark {
   --kz-brand-gradient-via: hsl(320 35% 8%);
   --kz-brand-gradient-to: var(--kz-surface-0);
 }
+
+.brand-yazakia {
+  --kz-accent: hsl(174 72% 50%);
+  --kz-accent-hover: hsl(174 72% 58%);
+  --kz-accent-soft: hsl(174 72% 50% / 0.12);
+  --kz-accent-text: hsl(174 72% 56%);
+  --kz-accent-2: hsl(152 70% 45%);
+  --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(166 55% 9%);
+  --kz-brand-gradient-via: hsl(180 35% 7%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+}
+html.light .brand-yazakia, html .theme-light .brand-yazakia, html .brand-yazakia.theme-light {
+  --kz-accent: hsl(175 85% 24%);
+  --kz-accent-hover: hsl(175 85% 20%);
+  --kz-accent-soft: hsl(175 85% 24% / 0.08);
+  --kz-accent-text: hsl(175 85% 23%);
+  --kz-accent-2: hsl(152 76% 26%);
+  --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(160 70% 93%);
+  --kz-brand-gradient-via: hsl(176 70% 95%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+}
+html .theme-dark .brand-yazakia, html .brand-yazakia.theme-dark {
+  --kz-accent: hsl(174 72% 50%);
+  --kz-accent-hover: hsl(174 72% 58%);
+  --kz-accent-soft: hsl(174 72% 50% / 0.12);
+  --kz-accent-text: hsl(174 72% 56%);
+  --kz-accent-2: hsl(152 70% 45%);
+  --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(166 55% 9%);
+  --kz-brand-gradient-via: hsl(180 35% 7%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+}

package/dist/brands/yazakia.css

@@ -0,0 +1,46 @@
+/* @krizaka/tokens — GÉNÉRÉ depuis src/brands/yazakia.brand.json par scripts/build.mjs : ne pas éditer.
+   Yazakia — émeraude → turquoise, le vert libre de la famille, qui prend le contre-pied du rouge et du rose des applications de rencontre. L'accent (boutons, liens, anneau) est le turquoise, teinte 174 : à 14° de --kz-success (160, l'émeraude des statuts), pour qu'un bouton principal ne se lise jamais comme un succès. Dark : turquoise clair sous texte quasi noir ; light : turquoise profond sous texte blanc (5.9:1). accent-2 est l'émeraude (teinte 152), le second temps du dégradé des boutons et de la mascotte, jamais un statut. info reste bleu. Le logo (mark) est un dégradé émeraude (156) → turquoise (178) 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é yazakia sur toute l'app, dans les deux thèmes. */
+
+:root, .theme-dark {
+  --kz-accent: hsl(174 72% 50%);
+  --kz-accent-hover: hsl(174 72% 58%);
+  --kz-accent-soft: hsl(174 72% 50% / 0.12);
+  --kz-accent-text: hsl(174 72% 56%);
+  --kz-accent-2: hsl(152 70% 45%);
+  --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(166 55% 9%);
+  --kz-brand-gradient-via: hsl(180 35% 7%);
+  --kz-brand-gradient-to: var(--kz-surface-0);
+}
+
+html.light {
+  --kz-accent: hsl(175 85% 24%);
+  --kz-accent-hover: hsl(175 85% 20%);
+  --kz-accent-soft: hsl(175 85% 24% / 0.08);
+  --kz-accent-text: hsl(175 85% 23%);
+  --kz-accent-2: hsl(152 76% 26%);
+  --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(160 70% 93%);
+  --kz-brand-gradient-via: hsl(176 70% 95%);
+}
+
+.theme-light {
+  --kz-accent: hsl(175 85% 24%);
+  --kz-accent-hover: hsl(175 85% 20%);
+  --kz-accent-soft: hsl(175 85% 24% / 0.08);
+  --kz-accent-text: hsl(175 85% 23%);
+  --kz-accent-2: hsl(152 76% 26%);
+  --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(160 70% 93%);
+  --kz-brand-gradient-via: hsl(176 70% 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";
+export type BrandId = "krizaka" | "orazaka" | "orochia" | "yazakia";
 /** 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

@@ -623,6 +623,36 @@ export const brands = /* @__PURE__ */ Object.freeze({
       "brandGradientVia": "hsl(330 80% 96%)",
       "brandGradientTo": "hsl(0 0% 98%)"
     }
+  },
+  "yazakia": {
+    "dark": {
+      "accent": "hsl(174 72% 50%)",
+      "accentHover": "hsl(174 72% 58%)",
+      "accentSoft": "hsl(174 72% 50% / 0.12)",
+      "accentText": "hsl(174 72% 56%)",
+      "accent2": "hsl(152 70% 45%)",
+      "onAccent": "hsl(240 6% 5%)",
+      "ring": "hsl(174 72% 50%)",
+      "info": "hsl(217 92% 60%)",
+      "infoText": "hsl(217 92% 68%)",
+      "brandGradientFrom": "hsl(166 55% 9%)",
+      "brandGradientVia": "hsl(180 35% 7%)",
+      "brandGradientTo": "hsl(240 6% 5%)"
+    },
+    "light": {
+      "accent": "hsl(175 85% 24%)",
+      "accentHover": "hsl(175 85% 20%)",
+      "accentSoft": "hsl(175 85% 24% / 0.08)",
+      "accentText": "hsl(175 85% 23%)",
+      "accent2": "hsl(152 76% 26%)",
+      "onAccent": "hsl(0 0% 100%)",
+      "ring": "hsl(175 85% 24%)",
+      "info": "hsl(217 92% 50%)",
+      "infoText": "hsl(217 92% 42%)",
+      "brandGradientFrom": "hsl(160 70% 93%)",
+      "brandGradientVia": "hsl(176 70% 95%)",
+      "brandGradientTo": "hsl(0 0% 98%)"
+    }
   }
 });
 /** The marks' emblem gradients: [offset, colour] stops, the same in both themes (raw CSS). */
@@ -660,5 +690,15 @@ export const marks = /* @__PURE__ */ Object.freeze({
       "100%",
       "hsl(328.6 85.5% 70.2%)"
     ]
+  ],
+  "yazakia": [
+    [
+      "0%",
+      "hsl(156 92% 32%)"
+    ],
+    [
+      "100%",
+      "hsl(178 90% 32%)"
+    ]
   ]
 });

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

@@ -337,6 +337,36 @@ export const brands = /* @__PURE__ */ Object.freeze({
       "brandGradientVia": "#fdedf5",
       "brandGradientTo": "#fafafa"
     }
+  },
+  "yazakia": {
+    "dark": {
+      "accent": "#24dbc9",
+      "accentHover": "#47e1d2",
+      "accentSoft": "rgba(36,219,201,0.12)",
+      "accentText": "#3ee0cf",
+      "accent2": "#22c378",
+      "onAccent": "#0c0c0e",
+      "ring": "#24dbc9",
+      "info": "#3b83f7",
+      "infoText": "#629cf8",
+      "brandGradientFrom": "#0a241e",
+      "brandGradientVia": "#0c1818",
+      "brandGradientTo": "#0c0c0e"
+    },
+    "light": {
+      "accent": "#097169",
+      "accentHover": "#085e57",
+      "accentSoft": "rgba(9,113,105,0.08)",
+      "accentText": "#096d64",
+      "accent2": "#107546",
+      "onAccent": "#ffffff",
+      "ring": "#097169",
+      "info": "#0a64f5",
+      "infoText": "#0954ce",
+      "brandGradientFrom": "#e1faf1",
+      "brandGradientVia": "#e9fbfa",
+      "brandGradientTo": "#fafafa"
+    }
   }
 });
 /** The marks' emblem gradients: [offset, #rrggbb] stops, the same in both themes. */
@@ -374,5 +404,15 @@ export const marks = /* @__PURE__ */ Object.freeze({
       "100%",
       "#f472b6"
     ]
+  ],
+  "yazakia": [
+    [
+      "0%",
+      "#079d61"
+    ],
+    [
+      "100%",
+      "#089b96"
+    ]
   ]
 });

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 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 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.6.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.",
+  "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.",
   "keywords": [
     "krizaka",
     "design-tokens",
@@ -36,6 +36,7 @@
     "./brands/krizaka.css": "./dist/brands/krizaka.css",
     "./brands/orazaka.css": "./dist/brands/orazaka.css",
     "./brands/orochia.css": "./dist/brands/orochia.css",
+    "./brands/yazakia.css": "./dist/brands/yazakia.css",
     "./brands/scoped.css": "./dist/brands/scoped.css",
     "./native": {
       "types": "./dist/native.d.ts",
@@ -110,6 +111,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/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/scoped.css"
   }
 }