@krizaka/tokens 2.0.0-beta.3 → 2.0.0-beta.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/BRAND.md +102 -0
  2. package/README.md +9 -4
  3. package/dist/brands/krizaka.css +42 -0
  4. package/dist/brands/orazaka.css +44 -0
  5. package/dist/brands/orochia.css +44 -0
  6. package/dist/brands/scoped.css +122 -0
  7. package/dist/index.d.ts +11 -0
  8. package/dist/index.js +100 -0
  9. package/dist/native.d.ts +11 -0
  10. package/dist/native.js +96 -0
  11. package/dist/tokens.css +15 -1
  12. package/package.json +27 -6
package/BRAND.md ADDED
@@ -0,0 +1,102 @@
1
+ # The Krizaka brand system
2
+
3
+ One identity for the parent and its products: **one colour per brand**, one family of marks, one icon language and one
4
+ visual language for pages. The values live in `src/brands/<id>.brand.json` (DTCG) and ship as
5
+ `@krizaka/tokens/brands/<id>.css`, `brands` (web, raw CSS) and `brands` (`@krizaka/tokens/native`, ThemeProvider
6
+ overrides). A product never re-invents its values: it imports its brand.
7
+
8
+ ## 1. Colours — one per brand
9
+
10
+ | Brand | Identity | Why |
11
+ | :-- | :-- | :-- |
12
+ | **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). |
13
+ | **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). |
14
+ | **Orochia** (creators) | **Velvet violet → magenta**, the serpent of its mark (unchanged). | The values of `@krizaka/orochia-design-system`, already adjusted to AA. |
15
+
16
+ ### Palette (the accent family)
17
+
18
+ `on-accent` is the text and icon colour on the accent; `accent-text` is the accent **as text** (links, active labels),
19
+ ≥ 4.5:1 on every surface; `accent-2` closes gradients.
20
+
21
+ | Role | Krizaka dark | Krizaka light | Orazaka dark | Orazaka light | Orochia dark | Orochia light |
22
+ | :-- | :-- | :-- | :-- | :-- | :-- | :-- |
23
+ | `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 |
24
+ | `accent-hover` | `hsl(217 88% 45%)` | `hsl(217 88% 42%)` | `hsl(26 92% 62%)` (lightens) | `hsl(26 90% 31%)` | #6d28d9 | #6d28d9 |
25
+ | `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) |
26
+ | `accent-text` | `hsl(217 92% 68%)` #629cf8 | `hsl(217 92% 42%)` #0954ce | `hsl(26 92% 60%)` #f78c3b | `hsl(26 90% 32%)` #9b4808 | #a78bfa | #6d28d9 |
27
+ | `accent-2` | = accent | = accent | #f59e0b (the mark's light stop) | `hsl(32 95% 33%)` | #db2777 | #db2777 |
28
+ | `ring` | = accent | = accent | = accent | = accent | #a78bfa | #7c3aed |
29
+ | `info` | = accent | = accent | `hsl(217 92% 60%)` | `hsl(217 92% 50%)` | = accent | = accent |
30
+
31
+ Every pair is a test (`test/tokens.test.ts`, "brands"): `on-accent` ≥ 4.5:1 on `accent`, `accent-hover` and
32
+ `accent-2`; `accent-text` ≥ 4.5:1 on surfaces 0–3 and on every section-gradient stop; `ring` ≥ 3:1 on the page;
33
+ `text-primary` / `text-secondary` ≥ 4.5:1 on every section-gradient stop — in dark **and** light.
34
+
35
+ ### Use
36
+
37
+ ```css
38
+ /* A product app: its brand on the whole app, both themes. */
39
+ @import "tailwindcss";
40
+ @import "@krizaka/tailwind";
41
+ @import "@krizaka/tokens/brands/orazaka.css";
42
+ ```
43
+
44
+ ```tsx
45
+ // A page that shows several brands (krizaka.com, the catalogue): the scoped classes.
46
+ import "@krizaka/tokens/brands/scoped.css";
47
+ <section className="brand-orochia">…</section>
48
+
49
+ // React Native
50
+ import { brands } from "@krizaka/tokens/native";
51
+ <ThemeProvider overrides={brands.orazaka}>…</ThemeProvider>
52
+ ```
53
+
54
+ Utilities (`@krizaka/tailwind`): `bg-accent`, `text-on-accent`, `text-fg-accent` (accent as text — use it, not
55
+ `text-accent`, for words), `from-brand-from via-brand-via to-brand-to`.
56
+
57
+ ## 2. Marks — one family
58
+
59
+ The Orochia mark is the reference and does not change. Krizaka and Orazaka take its grammar (2.0.0-beta.5; before and
60
+ after in Storybook, *Brand/Evolution*):
61
+
62
+ - a **400 × 400** frame, a **dashed orbit** (r 160) that turns, a **ring** (r 134), a halo in the brand colour;
63
+ - **one bold emblem** (stroke 22 or solid shapes of the same weight) drawn as an *open* figure;
64
+ - a **bright core** (Orochia's flame and eye, Krizaka's blue core and node, Orazaka's core) that breathes;
65
+ - below **48 px** the view box crops to the emblem and the halo is dropped (navigation, tab bars).
66
+
67
+ | Mark | Emblem | Change and reason |
68
+ | :-- | :-- | :-- |
69
+ | 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. |
70
+ | 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. |
71
+ | Orochia | The serpent coiled into an "O" around the flame. | Unchanged. |
72
+
73
+ Web: `KrizakaLogo`, `OrazakaLogo`, `OrochiaLogo`, `ProductLogo id` (`@krizaka/ui`). Native: `KrizakaMark`,
74
+ `OrazakaMark`, `OrochiaMark`, `ProductMark id` (`@krizaka/ui/native`). The geometry is shared
75
+ (`packages/ui/src/marks/*-geometry.ts`) and its colours are tested against the brand themes.
76
+
77
+ ## 3. Icons — the signature
78
+
79
+ `@krizaka/icons` (see its README): a 24 grid, a 1.75 stroke, round caps; **cut corners** (45° chamfers) where other
80
+ sets round them — the angle of the hexagon; and on every product icon a **node**, the core of the marks, that can
81
+ carry the brand accent (`nodeColor="var(--kz-accent)"`). Utility glyphs (arrows, close, plus, check, menu) stay bare.
82
+
83
+ ## 4. Visual language for pages
84
+
85
+ What M2/M3/M4 (the homes of Orochia, Orazaka and krizaka.com) apply. Restrained, premium: depth and light, not noise.
86
+
87
+ - **Sections glide from one temperature to the next.** Each section's background is the brand's section gradient
88
+ (`--kz-brand-gradient-from → via → to`), tinted at the top and ending on the page surface, so the next section starts
89
+ where the previous one stopped. Alternate `direction="down"` / `"up"` and brands (`.brand-<id>` on krizaka.com) to
90
+ give each part of a page its own temperature. Wide, soft gradients only — never a hard band.
91
+ `SectionBackdrop` (`@krizaka/ui/section-backdrop`) does it.
92
+ - **A light dome over the hero**: a blurred ellipse of the accent above the content (`dome`, on by default).
93
+ - **Luminous isometric illustrations**, original: objects built from our own vocabulary — the icons' cut-corner
94
+ shapes, the marks' hexagons and nodes, the chat bubble — extruded in isometric projection, lit from inside in the
95
+ brand colour (a core that glows, edges in `accent-text`), standing on a **perspective grid** (`grid`) that fades
96
+ into the page. One hero object per page, two or three satellites, no stock 3D.
97
+ - **Depth of field**: a foreground element blurred (`media`, 18 px) between the reader and the content; the subject
98
+ stays sharp. Never blur text.
99
+ - **Slow motion**: the light drifts over 40 s, marks turn over 30–35 s, reveals rise once (`[data-reveal]`). Nothing
100
+ loops fast; everything stops under `prefers-reduced-motion`.
101
+ - **Text on these backgrounds** uses the text roles (`text-fg`, `text-fg-secondary`, `text-fg-accent`): AA is tested
102
+ on every gradient stop, in both themes.
package/README.md CHANGED
@@ -27,7 +27,11 @@ npm install @krizaka/tokens
27
27
  | :-- | :-- | :-- |
28
28
  | `@krizaka/tokens/tokens.css` | Web (imported once, usually through `@krizaka/tailwind`) | The `--kz-*` custom properties. |
29
29
  | `@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`. |
30
- | `@krizaka/tokens/native` | React Native / Expo | `themes.dark` / `themes.light` (hex, `rgba()` when translucent), `radius` (dp), `typography`, `motion.ease`, type `Theme`. |
30
+ | `@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). |
31
+ | `@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. |
32
+ | `@krizaka/tokens/brands/scoped.css` | A page showing several brands | `.brand-krizaka`, `.brand-orazaka`, `.brand-orochia`. |
33
+
34
+ **Brands:** one colour per brand, its marks, icons and page language are in [`BRAND.md`](./BRAND.md).
31
35
 
32
36
  ```css
33
37
  @import "@krizaka/tokens/tokens.css";
@@ -80,9 +84,11 @@ under every product override.
80
84
  | `--kz-accent` | `accent` | Primary action, link, selection — the product's identity | `hsl(217 92% 53%)` | `hsl(217 92% 50%)` |
81
85
  | `--kz-accent-hover` | `accentHover` | Accent on hover | `hsl(217 88% 45%)` | `hsl(217 88% 42%)` |
82
86
  | `--kz-accent-soft` | `accentSoft` | Tinted background (selection, badge) | `hsl(217 92% 53% / 0.10)` | `hsl(217 92% 50% / 0.08)` |
87
+ | `--kz-accent-text` | `accentText` | The accent as text (link, active label): ≥ 4.5:1 on every surface | `hsl(217 92% 68%)` | `hsl(217 92% 42%)` |
83
88
  | `--kz-accent-2` | `accent2` | Second accent (gradients) | → `accent` | → `accent` |
84
89
  | `--kz-on-accent` | `onAccent` | Text and icon on the accent (≥ 4.5:1) | `hsl(0 0% 100%)` | = dark |
85
90
  | `--kz-ring` | `ring` | Keyboard focus ring | → `accent` | → `accent` |
91
+ | `--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%)` |
86
92
  | `--kz-success` | `success` | Status: success | `hsl(160 84% 39%)` | = dark |
87
93
  | `--kz-warning` | `warning` | Status: warning | `hsl(38 92% 50%)` | = dark |
88
94
  | `--kz-danger` | `danger` | Status: error, destructive action | `hsl(0 84% 60%)` | = dark |
@@ -110,9 +116,8 @@ under every product override.
110
116
 
111
117
  Contrast is **tested**, not assumed: `pnpm turbo run check` fails if `text-primary` / `text-secondary` drop under 4.5:1 or
112
118
  `text-muted` under 3:1 on any surface, or `on-accent` under 4.5:1 on the accent, in either theme (WCAG 2.x).
113
- One trade-off is known: no blue can carry white text at 4.5:1 *and* be read at 4.5:1 as text on `surface-0`. The
114
- accent favours white text on it; for body-size links on dark, pair the accent with an underline or use it at
115
- ≥ 18.66px bold (3:1).
119
+ No accent can carry white text at 4.5:1 *and* be read at 4.5:1 as text on `surface-0`: the accent favours the text
120
+ set on it, and `accent-text` (`text-fg-accent`) is the accent for words — tested at 4.5:1 on every surface.
116
121
 
117
122
  ## Add or change a token
118
123
 
package/dist/brands/krizaka.css ADDED
@@ -0,0 +1,42 @@
1
+ /* @krizaka/tokens — GÉNÉRÉ depuis src/brands/krizaka.brand.json par scripts/build.mjs : ne pas éditer.
2
+ Krizaka — la marque mère. Ink (les surfaces et le texte neutres de la plateforme) et un seul accent, le bleu Krizaka du cœur du logo : il chapeaute les produits sans les concurrencer. Ce sont aussi les valeurs par défaut de tokens.css.
3
+ Importé après tokens.css (ou @krizaka/tailwind) : l'identité krizaka sur toute l'app, dans les deux thèmes. */
4
+
5
+ :root, .theme-dark {
6
+ --kz-accent: hsl(217 92% 53%);
7
+ --kz-accent-hover: hsl(217 88% 45%);
8
+ --kz-accent-soft: hsl(217 92% 53% / 0.10);
9
+ --kz-accent-text: hsl(217 92% 68%);
10
+ --kz-accent-2: var(--kz-accent);
11
+ --kz-on-accent: hsl(0 0% 100%);
12
+ --kz-ring: var(--kz-accent);
13
+ --kz-info: var(--kz-accent);
14
+ --kz-brand-gradient-from: hsl(222 45% 10%);
15
+ --kz-brand-gradient-via: hsl(232 24% 7%);
16
+ --kz-brand-gradient-to: hsl(240 6% 5%);
17
+ }
18
+
19
+ html.light {
20
+ --kz-accent: hsl(217 92% 50%);
21
+ --kz-accent-hover: hsl(217 88% 42%);
22
+ --kz-accent-soft: hsl(217 92% 50% / 0.08);
23
+ --kz-accent-text: hsl(217 92% 42%);
24
+ --kz-on-accent: hsl(0 0% 100%);
25
+ --kz-brand-gradient-from: hsl(214 95% 93%);
26
+ --kz-brand-gradient-via: hsl(220 60% 97%);
27
+ --kz-brand-gradient-to: hsl(0 0% 98%);
28
+ }
29
+
30
+ .theme-light {
31
+ --kz-accent: hsl(217 92% 50%);
32
+ --kz-accent-hover: hsl(217 88% 42%);
33
+ --kz-accent-soft: hsl(217 92% 50% / 0.08);
34
+ --kz-accent-text: hsl(217 92% 42%);
35
+ --kz-accent-2: var(--kz-accent);
36
+ --kz-on-accent: hsl(0 0% 100%);
37
+ --kz-ring: var(--kz-accent);
38
+ --kz-info: var(--kz-accent);
39
+ --kz-brand-gradient-from: hsl(214 95% 93%);
40
+ --kz-brand-gradient-via: hsl(220 60% 97%);
41
+ --kz-brand-gradient-to: hsl(0 0% 98%);
42
+ }
package/dist/brands/orazaka.css ADDED
@@ -0,0 +1,44 @@
1
+ /* @krizaka/tokens — GÉNÉRÉ depuis src/brands/orazaka.brand.json par scripts/build.mjs : ne pas éditer.
2
+ 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.
3
+ Importé après tokens.css (ou @krizaka/tailwind) : l'identité orazaka sur toute l'app, dans les deux thèmes. */
4
+
5
+ :root, .theme-dark {
6
+ --kz-accent: hsl(26 92% 55%);
7
+ --kz-accent-hover: hsl(26 92% 62%);
8
+ --kz-accent-soft: hsl(26 92% 55% / 0.12);
9
+ --kz-accent-text: hsl(26 92% 60%);
10
+ --kz-accent-2: hsl(37.7 92.1% 50.2%);
11
+ --kz-on-accent: hsl(240 6% 5%);
12
+ --kz-ring: var(--kz-accent);
13
+ --kz-info: hsl(217 92% 60%);
14
+ --kz-brand-gradient-from: hsl(24 55% 10%);
15
+ --kz-brand-gradient-via: hsl(34 30% 7%);
16
+ --kz-brand-gradient-to: hsl(240 6% 5%);
17
+ }
18
+
19
+ html.light {
20
+ --kz-accent: hsl(26 90.5% 37.1%);
21
+ --kz-accent-hover: hsl(26 90% 31%);
22
+ --kz-accent-soft: hsl(26 90.5% 37.1% / 0.08);
23
+ --kz-accent-text: hsl(26 90% 32%);
24
+ --kz-accent-2: hsl(32 95% 33%);
25
+ --kz-on-accent: hsl(0 0% 100%);
26
+ --kz-info: hsl(217 92% 50%);
27
+ --kz-brand-gradient-from: hsl(30 100% 92%);
28
+ --kz-brand-gradient-via: hsl(38 80% 96%);
29
+ --kz-brand-gradient-to: hsl(0 0% 98%);
30
+ }
31
+
32
+ .theme-light {
33
+ --kz-accent: hsl(26 90.5% 37.1%);
34
+ --kz-accent-hover: hsl(26 90% 31%);
35
+ --kz-accent-soft: hsl(26 90.5% 37.1% / 0.08);
36
+ --kz-accent-text: hsl(26 90% 32%);
37
+ --kz-accent-2: hsl(32 95% 33%);
38
+ --kz-on-accent: hsl(0 0% 100%);
39
+ --kz-ring: var(--kz-accent);
40
+ --kz-info: hsl(217 92% 50%);
41
+ --kz-brand-gradient-from: hsl(30 100% 92%);
42
+ --kz-brand-gradient-via: hsl(38 80% 96%);
43
+ --kz-brand-gradient-to: hsl(0 0% 98%);
44
+ }
package/dist/brands/orochia.css ADDED
@@ -0,0 +1,44 @@
1
+ /* @krizaka/tokens — GÉNÉRÉ depuis src/brands/orochia.brand.json par scripts/build.mjs : ne pas éditer.
2
+ Orochia — velours violet → magenta, les couleurs du serpent du logo (inchangé). Les valeurs de @krizaka/orochia-design-system (ajustées AA) : velvet #7c3aed sous texte blanc (5.7:1), magenta #db2777 en second accent (4.6:1), lavande #a78bfa pour le texte et l'anneau sur fond sombre.
3
+ Importé après tokens.css (ou @krizaka/tailwind) : l'identité orochia sur toute l'app, dans les deux thèmes. */
4
+
5
+ :root, .theme-dark {
6
+ --kz-accent: hsl(262.1 83.3% 57.8%);
7
+ --kz-accent-hover: hsl(263.4 70% 50.4%);
8
+ --kz-accent-soft: hsl(258.3 89.5% 66.3% / 0.12);
9
+ --kz-accent-text: hsl(255.1 91.7% 76.3%);
10
+ --kz-accent-2: hsl(333.3 71.4% 50.6%);
11
+ --kz-on-accent: hsl(0 0% 100%);
12
+ --kz-ring: hsl(255.1 91.7% 76.3%);
13
+ --kz-info: var(--kz-accent);
14
+ --kz-brand-gradient-from: hsl(266 50% 11%);
15
+ --kz-brand-gradient-via: hsl(320 35% 8%);
16
+ --kz-brand-gradient-to: hsl(240 6% 5%);
17
+ }
18
+
19
+ html.light {
20
+ --kz-accent: hsl(262.1 83.3% 57.8%);
21
+ --kz-accent-hover: hsl(263.4 70% 50.4%);
22
+ --kz-accent-soft: hsl(262.1 83.3% 57.8% / 0.08);
23
+ --kz-accent-text: hsl(263.4 70% 50.4%);
24
+ --kz-accent-2: hsl(333.3 71.4% 50.6%);
25
+ --kz-on-accent: hsl(0 0% 100%);
26
+ --kz-ring: hsl(262.1 83.3% 57.8%);
27
+ --kz-brand-gradient-from: hsl(262 90% 95%);
28
+ --kz-brand-gradient-via: hsl(330 80% 96%);
29
+ --kz-brand-gradient-to: hsl(0 0% 98%);
30
+ }
31
+
32
+ .theme-light {
33
+ --kz-accent: hsl(262.1 83.3% 57.8%);
34
+ --kz-accent-hover: hsl(263.4 70% 50.4%);
35
+ --kz-accent-soft: hsl(262.1 83.3% 57.8% / 0.08);
36
+ --kz-accent-text: hsl(263.4 70% 50.4%);
37
+ --kz-accent-2: hsl(333.3 71.4% 50.6%);
38
+ --kz-on-accent: hsl(0 0% 100%);
39
+ --kz-ring: hsl(262.1 83.3% 57.8%);
40
+ --kz-info: var(--kz-accent);
41
+ --kz-brand-gradient-from: hsl(262 90% 95%);
42
+ --kz-brand-gradient-via: hsl(330 80% 96%);
43
+ --kz-brand-gradient-to: hsl(0 0% 98%);
44
+ }
package/dist/brands/scoped.css ADDED
@@ -0,0 +1,122 @@
1
+ /* @krizaka/tokens — GÉNÉRÉ depuis src/brands/*.brand.json par scripts/build.mjs : ne pas éditer.
2
+ Chaque marque en classe `.brand-<id>` : pour une page qui montre plusieurs marques (le site, le catalogue). */
3
+
4
+ .brand-krizaka {
5
+ --kz-accent: hsl(217 92% 53%);
6
+ --kz-accent-hover: hsl(217 88% 45%);
7
+ --kz-accent-soft: hsl(217 92% 53% / 0.10);
8
+ --kz-accent-text: hsl(217 92% 68%);
9
+ --kz-accent-2: var(--kz-accent);
10
+ --kz-on-accent: hsl(0 0% 100%);
11
+ --kz-ring: var(--kz-accent);
12
+ --kz-info: var(--kz-accent);
13
+ --kz-brand-gradient-from: hsl(222 45% 10%);
14
+ --kz-brand-gradient-via: hsl(232 24% 7%);
15
+ --kz-brand-gradient-to: hsl(240 6% 5%);
16
+ }
17
+ html.light .brand-krizaka, html .theme-light .brand-krizaka, html .brand-krizaka.theme-light {
18
+ --kz-accent: hsl(217 92% 50%);
19
+ --kz-accent-hover: hsl(217 88% 42%);
20
+ --kz-accent-soft: hsl(217 92% 50% / 0.08);
21
+ --kz-accent-text: hsl(217 92% 42%);
22
+ --kz-accent-2: var(--kz-accent);
23
+ --kz-on-accent: hsl(0 0% 100%);
24
+ --kz-ring: var(--kz-accent);
25
+ --kz-info: var(--kz-accent);
26
+ --kz-brand-gradient-from: hsl(214 95% 93%);
27
+ --kz-brand-gradient-via: hsl(220 60% 97%);
28
+ --kz-brand-gradient-to: hsl(0 0% 98%);
29
+ }
30
+ html .theme-dark .brand-krizaka, html .brand-krizaka.theme-dark {
31
+ --kz-accent: hsl(217 92% 53%);
32
+ --kz-accent-hover: hsl(217 88% 45%);
33
+ --kz-accent-soft: hsl(217 92% 53% / 0.10);
34
+ --kz-accent-text: hsl(217 92% 68%);
35
+ --kz-accent-2: var(--kz-accent);
36
+ --kz-on-accent: hsl(0 0% 100%);
37
+ --kz-ring: var(--kz-accent);
38
+ --kz-info: var(--kz-accent);
39
+ --kz-brand-gradient-from: hsl(222 45% 10%);
40
+ --kz-brand-gradient-via: hsl(232 24% 7%);
41
+ --kz-brand-gradient-to: hsl(240 6% 5%);
42
+ }
43
+
44
+ .brand-orazaka {
45
+ --kz-accent: hsl(26 92% 55%);
46
+ --kz-accent-hover: hsl(26 92% 62%);
47
+ --kz-accent-soft: hsl(26 92% 55% / 0.12);
48
+ --kz-accent-text: hsl(26 92% 60%);
49
+ --kz-accent-2: hsl(37.7 92.1% 50.2%);
50
+ --kz-on-accent: hsl(240 6% 5%);
51
+ --kz-ring: var(--kz-accent);
52
+ --kz-info: hsl(217 92% 60%);
53
+ --kz-brand-gradient-from: hsl(24 55% 10%);
54
+ --kz-brand-gradient-via: hsl(34 30% 7%);
55
+ --kz-brand-gradient-to: hsl(240 6% 5%);
56
+ }
57
+ html.light .brand-orazaka, html .theme-light .brand-orazaka, html .brand-orazaka.theme-light {
58
+ --kz-accent: hsl(26 90.5% 37.1%);
59
+ --kz-accent-hover: hsl(26 90% 31%);
60
+ --kz-accent-soft: hsl(26 90.5% 37.1% / 0.08);
61
+ --kz-accent-text: hsl(26 90% 32%);
62
+ --kz-accent-2: hsl(32 95% 33%);
63
+ --kz-on-accent: hsl(0 0% 100%);
64
+ --kz-ring: var(--kz-accent);
65
+ --kz-info: hsl(217 92% 50%);
66
+ --kz-brand-gradient-from: hsl(30 100% 92%);
67
+ --kz-brand-gradient-via: hsl(38 80% 96%);
68
+ --kz-brand-gradient-to: hsl(0 0% 98%);
69
+ }
70
+ html .theme-dark .brand-orazaka, html .brand-orazaka.theme-dark {
71
+ --kz-accent: hsl(26 92% 55%);
72
+ --kz-accent-hover: hsl(26 92% 62%);
73
+ --kz-accent-soft: hsl(26 92% 55% / 0.12);
74
+ --kz-accent-text: hsl(26 92% 60%);
75
+ --kz-accent-2: hsl(37.7 92.1% 50.2%);
76
+ --kz-on-accent: hsl(240 6% 5%);
77
+ --kz-ring: var(--kz-accent);
78
+ --kz-info: hsl(217 92% 60%);
79
+ --kz-brand-gradient-from: hsl(24 55% 10%);
80
+ --kz-brand-gradient-via: hsl(34 30% 7%);
81
+ --kz-brand-gradient-to: hsl(240 6% 5%);
82
+ }
83
+
84
+ .brand-orochia {
85
+ --kz-accent: hsl(262.1 83.3% 57.8%);
86
+ --kz-accent-hover: hsl(263.4 70% 50.4%);
87
+ --kz-accent-soft: hsl(258.3 89.5% 66.3% / 0.12);
88
+ --kz-accent-text: hsl(255.1 91.7% 76.3%);
89
+ --kz-accent-2: hsl(333.3 71.4% 50.6%);
90
+ --kz-on-accent: hsl(0 0% 100%);
91
+ --kz-ring: hsl(255.1 91.7% 76.3%);
92
+ --kz-info: var(--kz-accent);
93
+ --kz-brand-gradient-from: hsl(266 50% 11%);
94
+ --kz-brand-gradient-via: hsl(320 35% 8%);
95
+ --kz-brand-gradient-to: hsl(240 6% 5%);
96
+ }
97
+ html.light .brand-orochia, html .theme-light .brand-orochia, html .brand-orochia.theme-light {
98
+ --kz-accent: hsl(262.1 83.3% 57.8%);
99
+ --kz-accent-hover: hsl(263.4 70% 50.4%);
100
+ --kz-accent-soft: hsl(262.1 83.3% 57.8% / 0.08);
101
+ --kz-accent-text: hsl(263.4 70% 50.4%);
102
+ --kz-accent-2: hsl(333.3 71.4% 50.6%);
103
+ --kz-on-accent: hsl(0 0% 100%);
104
+ --kz-ring: hsl(262.1 83.3% 57.8%);
105
+ --kz-info: var(--kz-accent);
106
+ --kz-brand-gradient-from: hsl(262 90% 95%);
107
+ --kz-brand-gradient-via: hsl(330 80% 96%);
108
+ --kz-brand-gradient-to: hsl(0 0% 98%);
109
+ }
110
+ html .theme-dark .brand-orochia, html .brand-orochia.theme-dark {
111
+ --kz-accent: hsl(262.1 83.3% 57.8%);
112
+ --kz-accent-hover: hsl(263.4 70% 50.4%);
113
+ --kz-accent-soft: hsl(258.3 89.5% 66.3% / 0.12);
114
+ --kz-accent-text: hsl(255.1 91.7% 76.3%);
115
+ --kz-accent-2: hsl(333.3 71.4% 50.6%);
116
+ --kz-on-accent: hsl(0 0% 100%);
117
+ --kz-ring: hsl(255.1 91.7% 76.3%);
118
+ --kz-info: var(--kz-accent);
119
+ --kz-brand-gradient-from: hsl(266 50% 11%);
120
+ --kz-brand-gradient-via: hsl(320 35% 8%);
121
+ --kz-brand-gradient-to: hsl(240 6% 5%);
122
+ }
package/dist/index.d.ts CHANGED
@@ -17,9 +17,13 @@ export declare const tokens: {
17
17
  readonly accent: "var(--kz-accent)";
18
18
  readonly accentHover: "var(--kz-accent-hover)";
19
19
  readonly accentSoft: "var(--kz-accent-soft)";
20
+ readonly accentText: "var(--kz-accent-text)";
20
21
  readonly accent2: "var(--kz-accent-2)";
21
22
  readonly onAccent: "var(--kz-on-accent)";
22
23
  readonly ring: "var(--kz-ring)";
24
+ readonly brandGradientFrom: "var(--kz-brand-gradient-from)";
25
+ readonly brandGradientVia: "var(--kz-brand-gradient-via)";
26
+ readonly brandGradientTo: "var(--kz-brand-gradient-to)";
23
27
  readonly success: "var(--kz-success)";
24
28
  readonly warning: "var(--kz-warning)";
25
29
  readonly danger: "var(--kz-danger)";
@@ -46,3 +50,10 @@ export type TokenName = keyof typeof tokens;
46
50
  export type TokenValues = { readonly [K in TokenName]: string };
47
51
  /** The raw CSS values per theme (aliases resolved), for canvas, charts and e-mails. */
48
52
  export declare const values: { readonly dark: TokenValues; readonly light: TokenValues };
53
+
54
+ /** A Krizaka brand. */
55
+ export type BrandId = "krizaka" | "orazaka" | "orochia";
56
+ /** The roles a brand theme sets. */
57
+ export type BrandRole = "accent" | "accentHover" | "accentSoft" | "accentText" | "accent2" | "onAccent" | "ring" | "info" | "brandGradientFrom" | "brandGradientVia" | "brandGradientTo";
58
+ /** The brand themes: the accent family of each Krizaka brand, raw CSS per theme (aliases resolved). */
59
+ export declare const brands: { readonly [B in BrandId]: { readonly dark: { readonly [R in BrandRole]: string }; readonly light: { readonly [R in BrandRole]: string } } };
package/dist/index.js CHANGED
@@ -17,9 +17,13 @@ export const tokens = Object.freeze({
17
17
  "accent": "var(--kz-accent)",
18
18
  "accentHover": "var(--kz-accent-hover)",
19
19
  "accentSoft": "var(--kz-accent-soft)",
20
+ "accentText": "var(--kz-accent-text)",
20
21
  "accent2": "var(--kz-accent-2)",
21
22
  "onAccent": "var(--kz-on-accent)",
22
23
  "ring": "var(--kz-ring)",
24
+ "brandGradientFrom": "var(--kz-brand-gradient-from)",
25
+ "brandGradientVia": "var(--kz-brand-gradient-via)",
26
+ "brandGradientTo": "var(--kz-brand-gradient-to)",
23
27
  "success": "var(--kz-success)",
24
28
  "warning": "var(--kz-warning)",
25
29
  "danger": "var(--kz-danger)",
@@ -58,9 +62,13 @@ export const values = Object.freeze({ dark: Object.freeze({
58
62
  "accent": "hsl(217 92% 53%)",
59
63
  "accentHover": "hsl(217 88% 45%)",
60
64
  "accentSoft": "hsl(217 92% 53% / 0.10)",
65
+ "accentText": "hsl(217 92% 68%)",
61
66
  "accent2": "hsl(217 92% 53%)",
62
67
  "onAccent": "hsl(0 0% 100%)",
63
68
  "ring": "hsl(217 92% 53%)",
69
+ "brandGradientFrom": "hsl(222 45% 10%)",
70
+ "brandGradientVia": "hsl(232 24% 7%)",
71
+ "brandGradientTo": "hsl(240 6% 5%)",
64
72
  "success": "hsl(160 84% 39%)",
65
73
  "warning": "hsl(38 92% 50%)",
66
74
  "danger": "hsl(0 84% 60%)",
@@ -96,9 +104,13 @@ export const values = Object.freeze({ dark: Object.freeze({
96
104
  "accent": "hsl(217 92% 50%)",
97
105
  "accentHover": "hsl(217 88% 42%)",
98
106
  "accentSoft": "hsl(217 92% 50% / 0.08)",
107
+ "accentText": "hsl(217 92% 42%)",
99
108
  "accent2": "hsl(217 92% 50%)",
100
109
  "onAccent": "hsl(0 0% 100%)",
101
110
  "ring": "hsl(217 92% 50%)",
111
+ "brandGradientFrom": "hsl(214 95% 93%)",
112
+ "brandGradientVia": "hsl(220 60% 97%)",
113
+ "brandGradientTo": "hsl(0 0% 98%)",
102
114
  "success": "hsl(160 84% 39%)",
103
115
  "warning": "hsl(38 92% 50%)",
104
116
  "danger": "hsl(0 84% 60%)",
@@ -119,3 +131,91 @@ export const values = Object.freeze({ dark: Object.freeze({
119
131
  "fontDisplay": "Inter, system-ui, sans-serif",
120
132
  "fontMono": "\"JetBrains Mono\", ui-monospace, monospace"
121
133
  }) });
134
+
135
+ /** The brand themes: the accent family of each Krizaka brand, raw CSS per theme (aliases resolved). */
136
+ export const brands = Object.freeze({
137
+ "krizaka": {
138
+ "dark": {
139
+ "accent": "hsl(217 92% 53%)",
140
+ "accentHover": "hsl(217 88% 45%)",
141
+ "accentSoft": "hsl(217 92% 53% / 0.10)",
142
+ "accentText": "hsl(217 92% 68%)",
143
+ "accent2": "hsl(217 92% 53%)",
144
+ "onAccent": "hsl(0 0% 100%)",
145
+ "ring": "hsl(217 92% 53%)",
146
+ "info": "hsl(217 92% 53%)",
147
+ "brandGradientFrom": "hsl(222 45% 10%)",
148
+ "brandGradientVia": "hsl(232 24% 7%)",
149
+ "brandGradientTo": "hsl(240 6% 5%)"
150
+ },
151
+ "light": {
152
+ "accent": "hsl(217 92% 50%)",
153
+ "accentHover": "hsl(217 88% 42%)",
154
+ "accentSoft": "hsl(217 92% 50% / 0.08)",
155
+ "accentText": "hsl(217 92% 42%)",
156
+ "accent2": "hsl(217 92% 50%)",
157
+ "onAccent": "hsl(0 0% 100%)",
158
+ "ring": "hsl(217 92% 50%)",
159
+ "info": "hsl(217 92% 50%)",
160
+ "brandGradientFrom": "hsl(214 95% 93%)",
161
+ "brandGradientVia": "hsl(220 60% 97%)",
162
+ "brandGradientTo": "hsl(0 0% 98%)"
163
+ }
164
+ },
165
+ "orazaka": {
166
+ "dark": {
167
+ "accent": "hsl(26 92% 55%)",
168
+ "accentHover": "hsl(26 92% 62%)",
169
+ "accentSoft": "hsl(26 92% 55% / 0.12)",
170
+ "accentText": "hsl(26 92% 60%)",
171
+ "accent2": "hsl(37.7 92.1% 50.2%)",
172
+ "onAccent": "hsl(240 6% 5%)",
173
+ "ring": "hsl(26 92% 55%)",
174
+ "info": "hsl(217 92% 60%)",
175
+ "brandGradientFrom": "hsl(24 55% 10%)",
176
+ "brandGradientVia": "hsl(34 30% 7%)",
177
+ "brandGradientTo": "hsl(240 6% 5%)"
178
+ },
179
+ "light": {
180
+ "accent": "hsl(26 90.5% 37.1%)",
181
+ "accentHover": "hsl(26 90% 31%)",
182
+ "accentSoft": "hsl(26 90.5% 37.1% / 0.08)",
183
+ "accentText": "hsl(26 90% 32%)",
184
+ "accent2": "hsl(32 95% 33%)",
185
+ "onAccent": "hsl(0 0% 100%)",
186
+ "ring": "hsl(26 90.5% 37.1%)",
187
+ "info": "hsl(217 92% 50%)",
188
+ "brandGradientFrom": "hsl(30 100% 92%)",
189
+ "brandGradientVia": "hsl(38 80% 96%)",
190
+ "brandGradientTo": "hsl(0 0% 98%)"
191
+ }
192
+ },
193
+ "orochia": {
194
+ "dark": {
195
+ "accent": "hsl(262.1 83.3% 57.8%)",
196
+ "accentHover": "hsl(263.4 70% 50.4%)",
197
+ "accentSoft": "hsl(258.3 89.5% 66.3% / 0.12)",
198
+ "accentText": "hsl(255.1 91.7% 76.3%)",
199
+ "accent2": "hsl(333.3 71.4% 50.6%)",
200
+ "onAccent": "hsl(0 0% 100%)",
201
+ "ring": "hsl(255.1 91.7% 76.3%)",
202
+ "info": "hsl(262.1 83.3% 57.8%)",
203
+ "brandGradientFrom": "hsl(266 50% 11%)",
204
+ "brandGradientVia": "hsl(320 35% 8%)",
205
+ "brandGradientTo": "hsl(240 6% 5%)"
206
+ },
207
+ "light": {
208
+ "accent": "hsl(262.1 83.3% 57.8%)",
209
+ "accentHover": "hsl(263.4 70% 50.4%)",
210
+ "accentSoft": "hsl(262.1 83.3% 57.8% / 0.08)",
211
+ "accentText": "hsl(263.4 70% 50.4%)",
212
+ "accent2": "hsl(333.3 71.4% 50.6%)",
213
+ "onAccent": "hsl(0 0% 100%)",
214
+ "ring": "hsl(262.1 83.3% 57.8%)",
215
+ "info": "hsl(262.1 83.3% 57.8%)",
216
+ "brandGradientFrom": "hsl(262 90% 95%)",
217
+ "brandGradientVia": "hsl(330 80% 96%)",
218
+ "brandGradientTo": "hsl(0 0% 98%)"
219
+ }
220
+ }
221
+ });
package/dist/native.d.ts CHANGED
@@ -17,9 +17,13 @@ export type Theme = {
17
17
  readonly accent: string;
18
18
  readonly accentHover: string;
19
19
  readonly accentSoft: string;
20
+ readonly accentText: string;
20
21
  readonly accent2: string;
21
22
  readonly onAccent: string;
22
23
  readonly ring: string;
24
+ readonly brandGradientFrom: string;
25
+ readonly brandGradientVia: string;
26
+ readonly brandGradientTo: string;
23
27
  readonly success: string;
24
28
  readonly warning: string;
25
29
  readonly danger: string;
@@ -47,3 +51,10 @@ export declare const typography: {
47
51
  };
48
52
  /** Motion: the cubic-bezier control points (`Easing.bezier(...motion.ease)`). */
49
53
  export declare const motion: { readonly ease: readonly [number, number, number, number] };
54
+
55
+ /** A Krizaka brand. */
56
+ export type BrandId = "krizaka" | "orazaka" | "orochia";
57
+ /** The colour roles a brand theme sets, per theme. */
58
+ 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 } };
59
+ /** The brand themes as ThemeProvider overrides (`overrides={brands.orazaka}`): the accent family per theme. */
60
+ export declare const brands: { readonly [B in BrandId]: BrandTheme };
package/dist/native.js CHANGED
@@ -17,9 +17,13 @@ export const themes = Object.freeze({ dark: Object.freeze({
17
17
  "accent": "#196df5",
18
18
  "accentHover": "#0e5bd8",
19
19
  "accentSoft": "rgba(25,109,245,0.1)",
20
+ "accentText": "#629cf8",
20
21
  "accent2": "#196df5",
21
22
  "onAccent": "#ffffff",
22
23
  "ring": "#196df5",
24
+ "brandGradientFrom": "#0e1525",
25
+ "brandGradientVia": "#0e0f16",
26
+ "brandGradientTo": "#0c0c0e",
23
27
  "success": "#10b77f",
24
28
  "warning": "#f59f0a",
25
29
  "danger": "#ef4343",
@@ -43,9 +47,13 @@ export const themes = Object.freeze({ dark: Object.freeze({
43
47
  "accent": "#0a64f5",
44
48
  "accentHover": "#0d55c9",
45
49
  "accentSoft": "rgba(10,100,245,0.08)",
50
+ "accentText": "#0954ce",
46
51
  "accent2": "#0a64f5",
47
52
  "onAccent": "#ffffff",
48
53
  "ring": "#0a64f5",
54
+ "brandGradientFrom": "#dcebfe",
55
+ "brandGradientVia": "#f3f6fc",
56
+ "brandGradientTo": "#fafafa",
49
57
  "success": "#10b77f",
50
58
  "warning": "#f59f0a",
51
59
  "danger": "#ef4343",
@@ -73,3 +81,91 @@ export const typography = Object.freeze({
73
81
 
74
82
  /** Motion: the cubic-bezier control points (`Easing.bezier(...motion.ease)`). */
75
83
  export const motion = Object.freeze({ ease: Object.freeze([0.16,1,0.3,1]) });
84
+
85
+ /** The brand themes as ThemeProvider overrides (`overrides={brands.orazaka}`): the accent family per theme. */
86
+ export const brands = Object.freeze({
87
+ "krizaka": {
88
+ "dark": {
89
+ "accent": "#196df5",
90
+ "accentHover": "#0e5bd8",
91
+ "accentSoft": "rgba(25,109,245,0.1)",
92
+ "accentText": "#629cf8",
93
+ "accent2": "#196df5",
94
+ "onAccent": "#ffffff",
95
+ "ring": "#196df5",
96
+ "info": "#196df5",
97
+ "brandGradientFrom": "#0e1525",
98
+ "brandGradientVia": "#0e0f16",
99
+ "brandGradientTo": "#0c0c0e"
100
+ },
101
+ "light": {
102
+ "accent": "#0a64f5",
103
+ "accentHover": "#0d55c9",
104
+ "accentSoft": "rgba(10,100,245,0.08)",
105
+ "accentText": "#0954ce",
106
+ "accent2": "#0a64f5",
107
+ "onAccent": "#ffffff",
108
+ "ring": "#0a64f5",
109
+ "info": "#0a64f5",
110
+ "brandGradientFrom": "#dcebfe",
111
+ "brandGradientVia": "#f3f6fc",
112
+ "brandGradientTo": "#fafafa"
113
+ }
114
+ },
115
+ "orazaka": {
116
+ "dark": {
117
+ "accent": "#f67e23",
118
+ "accentHover": "#f79245",
119
+ "accentSoft": "rgba(246,126,35,0.12)",
120
+ "accentText": "#f78c3b",
121
+ "accent2": "#f59e0b",
122
+ "onAccent": "#0c0c0e",
123
+ "ring": "#f67e23",
124
+ "info": "#3b83f7",
125
+ "brandGradientFrom": "#28170b",
126
+ "brandGradientVia": "#17130c",
127
+ "brandGradientTo": "#0c0c0e"
128
+ },
129
+ "light": {
130
+ "accent": "#b45309",
131
+ "accentHover": "#964608",
132
+ "accentSoft": "rgba(180,83,9,0.08)",
133
+ "accentText": "#9b4808",
134
+ "accent2": "#a45904",
135
+ "onAccent": "#ffffff",
136
+ "ring": "#b45309",
137
+ "info": "#0a64f5",
138
+ "brandGradientFrom": "#ffebd6",
139
+ "brandGradientVia": "#fdf7ed",
140
+ "brandGradientTo": "#fafafa"
141
+ }
142
+ },
143
+ "orochia": {
144
+ "dark": {
145
+ "accent": "#7c3aed",
146
+ "accentHover": "#6d28d9",
147
+ "accentSoft": "rgba(139,92,246,0.12)",
148
+ "accentText": "#a78bfa",
149
+ "accent2": "#db2777",
150
+ "onAccent": "#ffffff",
151
+ "ring": "#a78bfa",
152
+ "info": "#7c3aed",
153
+ "brandGradientFrom": "#1a0e2a",
154
+ "brandGradientVia": "#1c0d17",
155
+ "brandGradientTo": "#0c0c0e"
156
+ },
157
+ "light": {
158
+ "accent": "#7c3aed",
159
+ "accentHover": "#6d28d9",
160
+ "accentSoft": "rgba(124,58,237,0.08)",
161
+ "accentText": "#6d28d9",
162
+ "accent2": "#db2777",
163
+ "onAccent": "#ffffff",
164
+ "ring": "#7c3aed",
165
+ "info": "#7c3aed",
166
+ "brandGradientFrom": "#efe7fe",
167
+ "brandGradientVia": "#fdedf5",
168
+ "brandGradientTo": "#fafafa"
169
+ }
170
+ }
171
+ });
package/dist/tokens.css CHANGED
@@ -22,12 +22,18 @@
22
22
  --kz-text-secondary: hsl(240 4% 64%); /* Texte d'appui, libellés */
23
23
  --kz-text-muted: hsl(240 4% 47%); /* Métadonnées, placeholders, désactivé (≥ 3:1) */
24
24
 
25
- /* Accent : l'identité du produit. Surchargé par le thème produit, jamais par un composant. */
25
+ /* 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. */
26
26
  --kz-accent: hsl(217 92% 53%); /* Action principale, lien, sélection */
27
27
  --kz-accent-hover: hsl(217 88% 45%); /* Accent au survol */
28
28
  --kz-accent-soft: hsl(217 92% 53% / 0.10); /* Fond teinté (sélection, badge) */
29
+ --kz-accent-text: hsl(217 92% 68%); /* Accent en texte (lien, libellé actif) : ≥ 4.5:1 sur chaque surface */
29
30
  --kz-accent-2: var(--kz-accent); /* 2e accent (dégradés) ; égal à l'accent par défaut */
30
31
  --kz-ring: var(--kz-accent); /* Anneau de focus clavier */
32
+
33
+ /* 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é). */
34
+ --kz-brand-gradient-from: hsl(222 45% 10%); /* Section : la teinte de départ (haut de section, halo) */
35
+ --kz-brand-gradient-via: hsl(232 24% 7%); /* Section : la teinte intermédiaire */
36
+ --kz-brand-gradient-to: hsl(240 6% 5%); /* Section : l'arrivée, la surface de page (la section suivante y enchaîne) */
31
37
  --kz-info: var(--kz-accent); /* Statut : information */
32
38
 
33
39
  /* Ombres (web uniquement) */
@@ -56,6 +62,10 @@ html.light {
56
62
  --kz-accent: hsl(217 92% 50%); /* Action principale, lien, sélection */
57
63
  --kz-accent-hover: hsl(217 88% 42%); /* Accent au survol */
58
64
  --kz-accent-soft: hsl(217 92% 50% / 0.08); /* Fond teinté (sélection, badge) */
65
+ --kz-accent-text: hsl(217 92% 42%); /* Accent en texte (lien, libellé actif) : ≥ 4.5:1 sur chaque surface */
66
+ --kz-brand-gradient-from: hsl(214 95% 93%); /* Section : la teinte de départ (haut de section, halo) */
67
+ --kz-brand-gradient-via: hsl(220 60% 97%); /* Section : la teinte intermédiaire */
68
+ --kz-brand-gradient-to: hsl(0 0% 98%); /* Section : l'arrivée, la surface de page (la section suivante y enchaîne) */
59
69
  --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 */
60
70
  --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 */
61
71
  --kz-shadow-lg: 0 8px 24px hsl(240 6% 0% / 0.10), 0 4px 8px hsl(240 6% 0% / 0.05); /* Dialogue, feuille */
@@ -79,8 +89,12 @@ html.light {
79
89
  --kz-accent: hsl(217 92% 50%); /* Action principale, lien, sélection */
80
90
  --kz-accent-hover: hsl(217 88% 42%); /* Accent au survol */
81
91
  --kz-accent-soft: hsl(217 92% 50% / 0.08); /* Fond teinté (sélection, badge) */
92
+ --kz-accent-text: hsl(217 92% 42%); /* Accent en texte (lien, libellé actif) : ≥ 4.5:1 sur chaque surface */
82
93
  --kz-accent-2: var(--kz-accent); /* 2e accent (dégradés) ; égal à l'accent par défaut */
83
94
  --kz-ring: var(--kz-accent); /* Anneau de focus clavier */
95
+ --kz-brand-gradient-from: hsl(214 95% 93%); /* Section : la teinte de départ (haut de section, halo) */
96
+ --kz-brand-gradient-via: hsl(220 60% 97%); /* Section : la teinte intermédiaire */
97
+ --kz-brand-gradient-to: hsl(0 0% 98%); /* Section : l'arrivée, la surface de page (la section suivante y enchaîne) */
84
98
  --kz-info: var(--kz-accent); /* Statut : information */
85
99
  --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 */
86
100
  --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 */
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@krizaka/tokens",
3
- "version": "2.0.0-beta.3",
4
- "description": "The Krizaka semantic design tokens (--kz-*): one DTCG source compiled to CSS (dark, light, media invariants), typed constants and React Native themes.",
3
+ "version": "2.0.0-beta.5",
4
+ "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.",
5
5
  "keywords": [
6
6
  "krizaka",
7
7
  "design-tokens",
@@ -10,7 +10,9 @@
10
10
  "theme",
11
11
  "dark-mode",
12
12
  "react-native",
13
- "design-system"
13
+ "design-system",
14
+ "brand",
15
+ "theming"
14
16
  ],
15
17
  "homepage": "https://github.com/krizaka/krizaka-ui/tree/main/packages/tokens#readme",
16
18
  "bugs": "https://github.com/krizaka/krizaka-ui/issues",
@@ -31,6 +33,10 @@
31
33
  "import": "./dist/index.js"
32
34
  },
33
35
  "./tokens.css": "./dist/tokens.css",
36
+ "./brands/krizaka.css": "./dist/brands/krizaka.css",
37
+ "./brands/orazaka.css": "./dist/brands/orazaka.css",
38
+ "./brands/orochia.css": "./dist/brands/orochia.css",
39
+ "./brands/scoped.css": "./dist/brands/scoped.css",
34
40
  "./native": {
35
41
  "types": "./dist/native.d.ts",
36
42
  "import": "./dist/native.js"
@@ -40,6 +46,7 @@
40
46
  "files": [
41
47
  "dist",
42
48
  "README.md",
49
+ "BRAND.md",
43
50
  "LICENSE"
44
51
  ],
45
52
  "sideEffects": [
@@ -70,16 +77,30 @@
70
77
  "gzip": true,
71
78
  "rolldown": false
72
79
  },
80
+ {
81
+ "name": "./brands/<id>.css (each)",
82
+ "path": "dist/brands/orazaka.css",
83
+ "limit": "0.75 kB",
84
+ "gzip": true,
85
+ "rolldown": false
86
+ },
87
+ {
88
+ "name": "./brands/scoped.css",
89
+ "path": "dist/brands/scoped.css",
90
+ "limit": "1 kB",
91
+ "gzip": true,
92
+ "rolldown": false
93
+ },
73
94
  {
74
95
  "name": ".",
75
96
  "path": "dist/index.js",
76
- "limit": "1.5 kB",
97
+ "limit": "2 kB",
77
98
  "gzip": true
78
99
  },
79
100
  {
80
101
  "name": "./native",
81
102
  "path": "dist/native.js",
82
- "limit": "1 kB",
103
+ "limit": "1.5 kB",
83
104
  "gzip": true
84
105
  }
85
106
  ],
@@ -89,6 +110,6 @@
89
110
  "typecheck": "tsc --noEmit",
90
111
  "test": "vitest run",
91
112
  "size": "size-limit",
92
- "publint": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./tokens.css"
113
+ "publint": "publint && attw --pack . --profile esm-only --exclude-entrypoints ./tokens.css ./brands/krizaka.css ./brands/orazaka.css ./brands/orochia.css ./brands/scoped.css"
93
114
  }
94
115
  }