@krizaka/tokens 2.0.0 → 2.2.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`. |
 

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 {

package/dist/index.d.ts

@@ -61,3 +61,7 @@ export type BrandId = "krizaka" | "orazaka" | "orochia";
 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)",
@@ -50,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%)",
@@ -96,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%)",
@@ -145,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%)",
@@ -237,3 +237,40 @@ export const brands = Object.freeze({
     }
   }
 });
+/** 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

@@ -62,3 +62,7 @@ export type BrandId = "krizaka" | "orazaka" | "orochia";
 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",
@@ -35,7 +35,7 @@ export const themes = Object.freeze({ dark: Object.freeze({
   "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",
@@ -72,7 +72,7 @@ export const themes = Object.freeze({ dark: Object.freeze({
 }) });
 
 /** Corner radii, in dp. */
-export const radius = Object.freeze({
+export const radius = /* @__PURE__ */ Object.freeze({
   "sm": 8,
   "md": 12,
   "lg": 16,
@@ -81,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",
@@ -183,3 +183,40 @@ export const brands = Object.freeze({
     }
   }
 });
+/** 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/tokens",
-  "version": "2.0.0",
+  "version": "2.2.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",