@krizaka/tokens 2.3.0 → 2.5.0

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 (8) hide show
  1. package/BRAND.md +83 -2
  2. package/README.md +17 -0
  3. package/dist/index.d.ts +103 -0
  4. package/dist/index.js +395 -7
  5. package/dist/native.d.ts +47 -3
  6. package/dist/native.js +161 -5
  7. package/dist/tokens.css +176 -7
  8. package/package.json +4 -4
package/BRAND.md CHANGED
@@ -1,7 +1,7 @@
1
1
  # The Krizaka brand system
2
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
3
+ One identity for the parent and its products: **one colour per brand**, one family of marks, one icon language, one
4
+ typography (§5) and one visual language for pages. The values live in `src/brands/<id>.brand.json` (DTCG) and ship as
5
5
  `@krizaka/tokens/brands/<id>.css`, `brands` (web, raw CSS) and `brands` (`@krizaka/tokens/native`, ThemeProvider
6
6
  overrides). A product never re-invents its values: it imports its brand.
7
7
 
@@ -103,3 +103,84 @@ What M2/M3/M4 (the homes of Orochia, Orazaka and krizaka.com) apply. Restrained,
103
103
  loops fast; everything stops under `prefers-reduced-motion`.
104
104
  - **Text on these backgrounds** uses the text roles (`text-fg`, `text-fg-secondary`, `text-fg-accent`): AA is tested
105
105
  on every gradient stop, in both themes.
106
+
107
+ ## 5. Typography — three families, one voice
108
+
109
+ `@krizaka/fonts` (2026-10, session TY) ships them, self-hosted; `@krizaka/tokens` names them (`--kz-font-display`,
110
+ `--kz-font-text` = `--kz-font-sans`, `--kz-font-mono`) and sets the scale (`type.*` → `text-display-xl`, `text-body-md`…
111
+ in `@krizaka/tailwind`, `typeScale` in `/native`). Only faces under the **SIL Open Font License 1.1**: redistributable,
112
+ bundled in apps, subset by us (no Reserved Font Name on any of the three).
113
+
114
+ | Role | Family | Why this one |
115
+ | :-- | :-- | :-- |
116
+ | **Display** — headlines, figures, names | **Plus Jakarta Sans** (500–800) | Already the headline face of krizaka.com — no gratuitous change to the parent brand. Compact, slightly squared bowls and flat terminals: it echoes the cut corners of the marks and icons, and stays dense and premium at 800. |
117
+ | **Text** — reading and interface | **Inter** (400–700, cut at the text optical size) | Drawn for screens: tall x-height, open apertures, tabular figures for amounts. Already the default of the tokens and Orazaka's text; krizaka.com's body already asked for its character variants (`cv02`–`cv04`). |
118
+ | **Mono** — code, identifiers, overlines | **JetBrains Mono** (400–700) | Already on every Krizaka surface. Unambiguous 0/O and 1/l/I at 12 px; rectangular forms that sit next to the chamfers. |
119
+
120
+ What we weighed:
121
+
122
+ - **Continuity first.** The inventory (krizaka.com: Jakarta + JetBrains Mono; Orochia: Jakarta text + Outfit display;
123
+ Orazaka: Inter + Outfit as a stand-in "Krizaka Display" + JetBrains Mono; the tokens: Inter; the mobile apps: system
124
+ faces) has three faces in common use. The decision keeps all three and gives each one job, so every surface moves by
125
+ one role at most: krizaka.com changes its body (Jakarta → Inter), Orazaka its headlines (Outfit → Jakarta), Orochia its
126
+ body (Jakarta → Inter) — and **keeps Outfit as its product display face**, a theme override of `--kz-font-display`
127
+ like its violet.
128
+ - **Outfit as the Krizaka display** was the alternative: rounder and friendlier, it reads as Orochia's voice, and moving
129
+ the parent's headlines to it is the visible change we wanted to avoid.
130
+ - **Screen and French.** Every file covers latin and latin-ext (é è à ç ô œ « » ’ — French is in the latin file; the
131
+ browser fetches latin-ext only when a page needs it). Each family has a local fallback whose metrics are adjusted to
132
+ it (`… Fallback`, size-adjust and ascent/descent overrides): the text does not move when the font arrives (CLS 0).
133
+
134
+ **Signature.** The Krizaka signature in type is the **wordmark**, drawn, inside the logo (`KrizakaLogo`) — never the name
135
+ set in a font. No typeface is drawn from scratch: a cut-corner stylistic set (a chamfered `K`, `z`, `a` as alternates
136
+ of the display face, under the OFL as a modified version with its own name) is a foundry project for later, tracked as
137
+ an issue, not a dependency of anything today.
138
+
139
+ Rules (also `rules` of `@krizaka/fonts`, on krizaka.com/docs/ui/typography): display speaks, text reads, mono labels;
140
+ display from 20 px at 600–800, text from 12 px at 400–700; one display line per block; tabular figures for amounts; the
141
+ scale, not one-off sizes; products may override the display role only.
142
+
143
+
144
+ ## 6. Surfaces & materials — the signature of the components
145
+
146
+ Session DSV (2026-10). The primitives had the right roles but read flat and interchangeable. The Krizaka signature is
147
+ one idea, applied everywhere and always in tokens: **light comes from above.**
148
+
149
+ | Lever | Rule | Tokens → utilities |
150
+ | :-- | :-- | :-- |
151
+ | **What you press rises** | A raised surface (button, card, chip, key, the active segment) carries a **sheen** — its top a little lighter — a **1-px edge of light** along its top, and an **ink-tinted shadow** in two or three layers. | `--kz-surface-sheen`, `--kz-edge-light`, `--kz-shadow-raised` → `bg-sheen inset-shadow-edge shadow-raised` |
152
+ | **What you fill sinks** | A field, a track, a checkbox is a **well**: an inner shade at its top. | `--kz-edge-well` → `inset-shadow-well` |
153
+ | **What floats is glass** | Menus, popovers, tooltips, dialogs, toasts, the sticky header of a table: frosted glass at 88 % — the text stays AA over anything that passes under (tested against the page's own text). | `--kz-glass-*` → `glass shadow-floating` / `shadow-overlay` |
154
+ | **Only what acts glows** | The accent fill is lit along its top edge and shaded at its bottom (on-accent stays ≥ 4.5:1 there, tested in every brand) and sits on the **brand's glow** — composed where it is used, so a `.brand-<id>` section has its own. Selection, the checked box, the current page glow too; nothing else. | `--kz-fill-shade`, `--kz-edge-on-fill` → `bg-fill-shade inset-shadow-edge-fill shadow-glow` |
155
+ | **The node marks a state** | The core of the marks, a small lit diamond: a badge's dot, the chosen radio, the switch's thumb when on, today in a calendar, an error's mark. | `node`, `node-lit` |
156
+ | **The focus is the brand's ring** | A crisp ring of `--kz-ring`, 2 px off the element, in a halo of the same colour — it follows the corners, cut ones included. On a field it lies on the border. | `--kz-ring-*` → `focus-visible:focus-ring`, `focus-ring-inset` |
157
+ | **Motion answers the hand** | A short spring (`ease-spring`), never more than 200 ms: a press compresses (0.97), a toggle springs across, a check pops in. Under `prefers-reduced-motion` every duration is 0 ms: instant, never absent. | `--kz-ease-spring`, `--kz-duration-*` |
158
+ | **Type in three voices** | Display for titles (tracking tightened), text for reading, **mono for labels**: badges, table headers, menu labels, stat labels, weekdays. | `font-mono`, `tracking-[0.06em]` |
159
+ | **Density** | Comfortable by default; `data-density="compact"` on a subtree tightens every control (a console, a dense table). | `--kz-control-*` |
160
+ | **Status tints** | One tint per status, the primary text and the status text AA on it: badges, alerts, rows. A rail of the status colour that glows marks alerts and toasts. | `--kz-*-soft` |
161
+
162
+ Restraint is part of it: a page has one spotlight card, one glowing call to action; the rest is quiet material.
163
+
164
+ ### 6.1 The griffe — the 45° cut corner
165
+
166
+ The angle of the hexagon, the chamfer of the icons: **the cut corner is the claw mark of the brand.** It is
167
+ `corner-shape: bevel` (the border, the edge light, the shadow and the focus ring all follow it; browsers without
168
+ `corner-shape` show the rounded corner), sized by `--kz-cut-size` (10 px on a control), shaped by `--kz-cut-shape`.
169
+
170
+ | Where | How |
171
+ | :-- | :-- |
172
+ | **The call to action** | `Button` `primary` and `gradient` are cut **by default** (`shape="auto"`, `--kz-cut-shape`); a node lights in the cut corner under the pointer. `rounded` / `pill` stay options. |
173
+ | **The status badge** | `Badge` `success` / `warning` / `danger` are cut by default (`shape="auto"`); `shape="cut"` on any tone. |
174
+ | **The card that matters** | `Card` `variant="spotlight"` has its top-right corner cut; `cut` on any card. |
175
+ | **The active tab** | The raised segment of `Tabs variant="segmented"` and the light of `pills` are cut. |
176
+ | **The focused field** | A field's top-right corner cuts itself when it has the focus. |
177
+ | **The toast** | Its top-right corner is cut. |
178
+
179
+ Sparingly: the griffe marks **what matters on the screen** — the action, the state, the chosen — never every box. An app
180
+ that must not wear it (a third-party embed) sets `--kz-cut-shape: round`; everything returns to rounded corners.
181
+ React Native has no `corner-shape`: the native primitives keep their rounded corners, and `cut.size` of
182
+ `@krizaka/tokens/native` is there for a drawn shape (react-native-svg) where a product needs one.
183
+
184
+ Captures of the material, the three brands in dark and light, are in the pull request that introduced it
185
+ (krizaka/krizaka-ui, "signature visual language"); the living reference is the showcase at the top of
186
+ [krizaka.com/docs/ui](https://www.krizaka.com/docs/ui).
package/README.md CHANGED
@@ -118,6 +118,23 @@ under every product override.
118
118
  | `--kz-font-display` | `fontDisplay` | Headings; a product theme may override it | → `font-sans` | → `font-sans` |
119
119
  | `--kz-font-mono` | `fontMono` | Code, aligned amounts | `"JetBrains Mono", ui-monospace, monospace` | = dark |
120
120
 
121
+ ### The material (BRAND.md §6)
122
+
123
+ | Token | Key | Usage | Dark | Light |
124
+ | :-- | :-- | :-- | :-- | :-- |
125
+ | `--kz-radius-xs`, `--kz-radius-2xl` | `radiusXs`, `radius2xl` | Checkbox, key, cut badge · sheet | `6px`, `28px` | = dark |
126
+ | `--kz-shadow-raised` · `-floating` · `-overlay` | `shadowRaised`… | Raised (button, card) · floating (menu, tooltip) · over the page (dialog, toast) — ink-tinted, 2–3 layers; native: `shadows.<theme>.raised` (`boxShadow`) | `hsl(240 30% 2% / …)` | `hsl(232 25% 25% / …)` |
127
+ | `--kz-surface-sheen` | `surfaceSheen` | The top of a raised surface (`bg-sheen`) | `hsl(0 0% 100% / 0.045)` | `hsl(0 0% 100% / 0.7)` |
128
+ | `--kz-fill-shade` | `fillShade` | The bottom of an accent or status fill (`bg-fill-shade`) | `hsl(0 0% 0% / 0.12)` | = dark |
129
+ | `--kz-edge-light` · `-on-fill` · `-well` | `edgeLight`… | The 1-px top edge of a raised surface · of a fill · the inner shade of a well | `/ 0.07` · `/ 0.22` · ink `/ 0.5` | `/ 0.9` · = · ink `/ 0.08` |
130
+ | `--kz-glass-bg` · `-border` · `-blur` | `glassBg`… | Frosted glass: menus, popovers, dialogs, toasts (88 %: text AA over anything) | `hsl(240 5% 12% / 0.88)` | `hsl(0 0% 100% / 0.88)` |
131
+ | `--kz-success-soft` · `warning-soft` · `danger-soft` | `successSoft`… | Status tints: badges, alerts, rows | `/ 0.14` | `/ 0.10–0.12` |
132
+ | `--kz-ring-width` · `-offset` · `-halo` | `ringWidth`… | The signature focus ring (`focus-ring`) | `2px` · `2px` · `4px` | = dark |
133
+ | `--kz-control-sm` · `md` · `lg` · `field` | `controlSm`… | Control heights; `[data-density="compact"]` tightens them | `32` · `40` · `48` · `44px` | compact `28` · `34` · `40` · `36px` |
134
+ | `--kz-cut-shape` · `--kz-cut-size` | `cutShape`, `cutSize` | **The griffe**: the 45° cut corner (`corner-shape`); `round` turns it off; native: `cut.size` | `bevel` · `10px` | = dark |
135
+ | `--kz-ease-spring` | `easeSpring` | A short spring: a press, a toggle, a selection; native `motion.spring` | `cubic-bezier(0.34, 1.36, 0.64, 1)` | = dark |
136
+ | `--kz-duration-instant` · `fast` · `base` | `durationFast`… | Micro-interactions ≤ 200 ms; **0 ms under `prefers-reduced-motion`**; native `motion.duration` | `90` · `150` · `200ms` | = dark |
137
+
121
138
  Contrast is **tested**, not assumed: `pnpm turbo run check` fails if `text-primary` / `text-secondary` drop under 4.5:1 or
122
139
  `text-muted` under 3:1 on any surface, or `on-accent` under 4.5:1 on the accent, in either theme (WCAG 2.x).
123
140
  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
package/dist/index.d.ts CHANGED
@@ -26,27 +26,113 @@ export declare const tokens: {
26
26
  readonly brandGradientTo: "var(--kz-brand-gradient-to)";
27
27
  readonly success: "var(--kz-success)";
28
28
  readonly successText: "var(--kz-success-text)";
29
+ readonly successSoft: "var(--kz-success-soft)";
29
30
  readonly warning: "var(--kz-warning)";
30
31
  readonly warningText: "var(--kz-warning-text)";
32
+ readonly warningSoft: "var(--kz-warning-soft)";
31
33
  readonly danger: "var(--kz-danger)";
32
34
  readonly dangerText: "var(--kz-danger-text)";
35
+ readonly dangerSoft: "var(--kz-danger-soft)";
33
36
  readonly info: "var(--kz-info)";
34
37
  readonly infoText: "var(--kz-info-text)";
35
38
  readonly scrim: "var(--kz-scrim)";
36
39
  readonly scrimStrong: "var(--kz-scrim-strong)";
37
40
  readonly overlay: "var(--kz-overlay)";
41
+ readonly radiusXs: "var(--kz-radius-xs)";
38
42
  readonly radiusSm: "var(--kz-radius-sm)";
39
43
  readonly radiusMd: "var(--kz-radius-md)";
40
44
  readonly radiusLg: "var(--kz-radius-lg)";
41
45
  readonly radiusXl: "var(--kz-radius-xl)";
46
+ readonly radius2xl: "var(--kz-radius-2xl)";
42
47
  readonly radiusFull: "var(--kz-radius-full)";
43
48
  readonly shadowSm: "var(--kz-shadow-sm)";
44
49
  readonly shadowMd: "var(--kz-shadow-md)";
45
50
  readonly shadowLg: "var(--kz-shadow-lg)";
51
+ readonly shadowRaised: "var(--kz-shadow-raised)";
52
+ readonly shadowFloating: "var(--kz-shadow-floating)";
53
+ readonly shadowOverlay: "var(--kz-shadow-overlay)";
54
+ readonly surfaceSheen: "var(--kz-surface-sheen)";
55
+ readonly fillShade: "var(--kz-fill-shade)";
56
+ readonly edgeLight: "var(--kz-edge-light)";
57
+ readonly edgeOnFill: "var(--kz-edge-on-fill)";
58
+ readonly edgeWell: "var(--kz-edge-well)";
59
+ readonly glassBg: "var(--kz-glass-bg)";
60
+ readonly glassBorder: "var(--kz-glass-border)";
61
+ readonly glassBlur: "var(--kz-glass-blur)";
62
+ readonly ringWidth: "var(--kz-ring-width)";
63
+ readonly ringOffset: "var(--kz-ring-offset)";
64
+ readonly ringHalo: "var(--kz-ring-halo)";
65
+ readonly controlSm: "var(--kz-control-sm)";
66
+ readonly controlMd: "var(--kz-control-md)";
67
+ readonly controlLg: "var(--kz-control-lg)";
68
+ readonly controlField: "var(--kz-control-field)";
69
+ readonly cutShape: "var(--kz-cut-shape)";
70
+ readonly cutSize: "var(--kz-cut-size)";
46
71
  readonly ease: "var(--kz-ease)";
72
+ readonly easeSpring: "var(--kz-ease-spring)";
73
+ readonly durationInstant: "var(--kz-duration-instant)";
74
+ readonly durationFast: "var(--kz-duration-fast)";
75
+ readonly durationBase: "var(--kz-duration-base)";
47
76
  readonly fontSans: "var(--kz-font-sans)";
77
+ readonly fontText: "var(--kz-font-text)";
48
78
  readonly fontDisplay: "var(--kz-font-display)";
49
79
  readonly fontMono: "var(--kz-font-mono)";
80
+ readonly typeDisplay2xlSize: "var(--kz-type-display-2xl-size)";
81
+ readonly typeDisplay2xlLineHeight: "var(--kz-type-display-2xl-line-height)";
82
+ readonly typeDisplay2xlWeight: "var(--kz-type-display-2xl-weight)";
83
+ readonly typeDisplay2xlTracking: "var(--kz-type-display-2xl-tracking)";
84
+ readonly typeDisplayXlSize: "var(--kz-type-display-xl-size)";
85
+ readonly typeDisplayXlLineHeight: "var(--kz-type-display-xl-line-height)";
86
+ readonly typeDisplayXlWeight: "var(--kz-type-display-xl-weight)";
87
+ readonly typeDisplayXlTracking: "var(--kz-type-display-xl-tracking)";
88
+ readonly typeDisplayLgSize: "var(--kz-type-display-lg-size)";
89
+ readonly typeDisplayLgLineHeight: "var(--kz-type-display-lg-line-height)";
90
+ readonly typeDisplayLgWeight: "var(--kz-type-display-lg-weight)";
91
+ readonly typeDisplayLgTracking: "var(--kz-type-display-lg-tracking)";
92
+ readonly typeDisplayMdSize: "var(--kz-type-display-md-size)";
93
+ readonly typeDisplayMdLineHeight: "var(--kz-type-display-md-line-height)";
94
+ readonly typeDisplayMdWeight: "var(--kz-type-display-md-weight)";
95
+ readonly typeDisplayMdTracking: "var(--kz-type-display-md-tracking)";
96
+ readonly typeDisplaySmSize: "var(--kz-type-display-sm-size)";
97
+ readonly typeDisplaySmLineHeight: "var(--kz-type-display-sm-line-height)";
98
+ readonly typeDisplaySmWeight: "var(--kz-type-display-sm-weight)";
99
+ readonly typeDisplaySmTracking: "var(--kz-type-display-sm-tracking)";
100
+ readonly typeTitleLgSize: "var(--kz-type-title-lg-size)";
101
+ readonly typeTitleLgLineHeight: "var(--kz-type-title-lg-line-height)";
102
+ readonly typeTitleLgWeight: "var(--kz-type-title-lg-weight)";
103
+ readonly typeTitleLgTracking: "var(--kz-type-title-lg-tracking)";
104
+ readonly typeTitleMdSize: "var(--kz-type-title-md-size)";
105
+ readonly typeTitleMdLineHeight: "var(--kz-type-title-md-line-height)";
106
+ readonly typeTitleMdWeight: "var(--kz-type-title-md-weight)";
107
+ readonly typeTitleMdTracking: "var(--kz-type-title-md-tracking)";
108
+ readonly typeBodyLgSize: "var(--kz-type-body-lg-size)";
109
+ readonly typeBodyLgLineHeight: "var(--kz-type-body-lg-line-height)";
110
+ readonly typeBodyLgWeight: "var(--kz-type-body-lg-weight)";
111
+ readonly typeBodyLgTracking: "var(--kz-type-body-lg-tracking)";
112
+ readonly typeBodyMdSize: "var(--kz-type-body-md-size)";
113
+ readonly typeBodyMdLineHeight: "var(--kz-type-body-md-line-height)";
114
+ readonly typeBodyMdWeight: "var(--kz-type-body-md-weight)";
115
+ readonly typeBodyMdTracking: "var(--kz-type-body-md-tracking)";
116
+ readonly typeBodySmSize: "var(--kz-type-body-sm-size)";
117
+ readonly typeBodySmLineHeight: "var(--kz-type-body-sm-line-height)";
118
+ readonly typeBodySmWeight: "var(--kz-type-body-sm-weight)";
119
+ readonly typeBodySmTracking: "var(--kz-type-body-sm-tracking)";
120
+ readonly typeCaptionSize: "var(--kz-type-caption-size)";
121
+ readonly typeCaptionLineHeight: "var(--kz-type-caption-line-height)";
122
+ readonly typeCaptionWeight: "var(--kz-type-caption-weight)";
123
+ readonly typeCaptionTracking: "var(--kz-type-caption-tracking)";
124
+ readonly typeOverlineSize: "var(--kz-type-overline-size)";
125
+ readonly typeOverlineLineHeight: "var(--kz-type-overline-line-height)";
126
+ readonly typeOverlineWeight: "var(--kz-type-overline-weight)";
127
+ readonly typeOverlineTracking: "var(--kz-type-overline-tracking)";
128
+ readonly typeMonoMdSize: "var(--kz-type-mono-md-size)";
129
+ readonly typeMonoMdLineHeight: "var(--kz-type-mono-md-line-height)";
130
+ readonly typeMonoMdWeight: "var(--kz-type-mono-md-weight)";
131
+ readonly typeMonoMdTracking: "var(--kz-type-mono-md-tracking)";
132
+ readonly typeMonoSmSize: "var(--kz-type-mono-sm-size)";
133
+ readonly typeMonoSmLineHeight: "var(--kz-type-mono-sm-line-height)";
134
+ readonly typeMonoSmWeight: "var(--kz-type-mono-sm-weight)";
135
+ readonly typeMonoSmTracking: "var(--kz-type-mono-sm-tracking)";
50
136
  };
51
137
  /** A token's camelCase name. */
52
138
  export type TokenName = keyof typeof tokens;
@@ -54,6 +140,23 @@ export type TokenName = keyof typeof tokens;
54
140
  export type TokenValues = { readonly [K in TokenName]: string };
55
141
  /** The raw CSS values per theme (aliases resolved), for canvas, charts and e-mails. */
56
142
  export declare const values: { readonly dark: TokenValues; readonly light: TokenValues };
143
+ /** The role of a step of the type scale: the family it is set in. */
144
+ export type TypeRole = "display" | "text" | "mono";
145
+ /** A step of the type scale. */
146
+ export interface TypeStep {
147
+ readonly name: "display-2xl" | "display-xl" | "display-lg" | "display-md" | "display-sm" | "title-lg" | "title-md" | "body-lg" | "body-md" | "body-sm" | "caption" | "overline" | "mono-md" | "mono-sm";
148
+ readonly role: TypeRole;
149
+ readonly description: string;
150
+ /** `72px`. */
151
+ readonly size: string;
152
+ /** Unitless: `1.05`. */
153
+ readonly lineHeight: number;
154
+ readonly weight: number;
155
+ /** `-0.03em`. */
156
+ readonly tracking: string;
157
+ }
158
+ /** The type scale: each step's role (the family), size, line height, weight and tracking — `text-<name>` in @krizaka/tailwind. */
159
+ export declare const typeScale: readonly TypeStep[];
57
160
 
58
161
  /** A Krizaka brand. */
59
162
  export type BrandId = "krizaka" | "orazaka" | "orochia";
package/dist/index.js CHANGED
@@ -26,27 +26,113 @@ export const tokens = /* @__PURE__ */ Object.freeze({
26
26
  "brandGradientTo": "var(--kz-brand-gradient-to)",
27
27
  "success": "var(--kz-success)",
28
28
  "successText": "var(--kz-success-text)",
29
+ "successSoft": "var(--kz-success-soft)",
29
30
  "warning": "var(--kz-warning)",
30
31
  "warningText": "var(--kz-warning-text)",
32
+ "warningSoft": "var(--kz-warning-soft)",
31
33
  "danger": "var(--kz-danger)",
32
34
  "dangerText": "var(--kz-danger-text)",
35
+ "dangerSoft": "var(--kz-danger-soft)",
33
36
  "info": "var(--kz-info)",
34
37
  "infoText": "var(--kz-info-text)",
35
38
  "scrim": "var(--kz-scrim)",
36
39
  "scrimStrong": "var(--kz-scrim-strong)",
37
40
  "overlay": "var(--kz-overlay)",
41
+ "radiusXs": "var(--kz-radius-xs)",
38
42
  "radiusSm": "var(--kz-radius-sm)",
39
43
  "radiusMd": "var(--kz-radius-md)",
40
44
  "radiusLg": "var(--kz-radius-lg)",
41
45
  "radiusXl": "var(--kz-radius-xl)",
46
+ "radius2xl": "var(--kz-radius-2xl)",
42
47
  "radiusFull": "var(--kz-radius-full)",
43
48
  "shadowSm": "var(--kz-shadow-sm)",
44
49
  "shadowMd": "var(--kz-shadow-md)",
45
50
  "shadowLg": "var(--kz-shadow-lg)",
51
+ "shadowRaised": "var(--kz-shadow-raised)",
52
+ "shadowFloating": "var(--kz-shadow-floating)",
53
+ "shadowOverlay": "var(--kz-shadow-overlay)",
54
+ "surfaceSheen": "var(--kz-surface-sheen)",
55
+ "fillShade": "var(--kz-fill-shade)",
56
+ "edgeLight": "var(--kz-edge-light)",
57
+ "edgeOnFill": "var(--kz-edge-on-fill)",
58
+ "edgeWell": "var(--kz-edge-well)",
59
+ "glassBg": "var(--kz-glass-bg)",
60
+ "glassBorder": "var(--kz-glass-border)",
61
+ "glassBlur": "var(--kz-glass-blur)",
62
+ "ringWidth": "var(--kz-ring-width)",
63
+ "ringOffset": "var(--kz-ring-offset)",
64
+ "ringHalo": "var(--kz-ring-halo)",
65
+ "controlSm": "var(--kz-control-sm)",
66
+ "controlMd": "var(--kz-control-md)",
67
+ "controlLg": "var(--kz-control-lg)",
68
+ "controlField": "var(--kz-control-field)",
69
+ "cutShape": "var(--kz-cut-shape)",
70
+ "cutSize": "var(--kz-cut-size)",
46
71
  "ease": "var(--kz-ease)",
72
+ "easeSpring": "var(--kz-ease-spring)",
73
+ "durationInstant": "var(--kz-duration-instant)",
74
+ "durationFast": "var(--kz-duration-fast)",
75
+ "durationBase": "var(--kz-duration-base)",
47
76
  "fontSans": "var(--kz-font-sans)",
77
+ "fontText": "var(--kz-font-text)",
48
78
  "fontDisplay": "var(--kz-font-display)",
49
- "fontMono": "var(--kz-font-mono)"
79
+ "fontMono": "var(--kz-font-mono)",
80
+ "typeDisplay2xlSize": "var(--kz-type-display-2xl-size)",
81
+ "typeDisplay2xlLineHeight": "var(--kz-type-display-2xl-line-height)",
82
+ "typeDisplay2xlWeight": "var(--kz-type-display-2xl-weight)",
83
+ "typeDisplay2xlTracking": "var(--kz-type-display-2xl-tracking)",
84
+ "typeDisplayXlSize": "var(--kz-type-display-xl-size)",
85
+ "typeDisplayXlLineHeight": "var(--kz-type-display-xl-line-height)",
86
+ "typeDisplayXlWeight": "var(--kz-type-display-xl-weight)",
87
+ "typeDisplayXlTracking": "var(--kz-type-display-xl-tracking)",
88
+ "typeDisplayLgSize": "var(--kz-type-display-lg-size)",
89
+ "typeDisplayLgLineHeight": "var(--kz-type-display-lg-line-height)",
90
+ "typeDisplayLgWeight": "var(--kz-type-display-lg-weight)",
91
+ "typeDisplayLgTracking": "var(--kz-type-display-lg-tracking)",
92
+ "typeDisplayMdSize": "var(--kz-type-display-md-size)",
93
+ "typeDisplayMdLineHeight": "var(--kz-type-display-md-line-height)",
94
+ "typeDisplayMdWeight": "var(--kz-type-display-md-weight)",
95
+ "typeDisplayMdTracking": "var(--kz-type-display-md-tracking)",
96
+ "typeDisplaySmSize": "var(--kz-type-display-sm-size)",
97
+ "typeDisplaySmLineHeight": "var(--kz-type-display-sm-line-height)",
98
+ "typeDisplaySmWeight": "var(--kz-type-display-sm-weight)",
99
+ "typeDisplaySmTracking": "var(--kz-type-display-sm-tracking)",
100
+ "typeTitleLgSize": "var(--kz-type-title-lg-size)",
101
+ "typeTitleLgLineHeight": "var(--kz-type-title-lg-line-height)",
102
+ "typeTitleLgWeight": "var(--kz-type-title-lg-weight)",
103
+ "typeTitleLgTracking": "var(--kz-type-title-lg-tracking)",
104
+ "typeTitleMdSize": "var(--kz-type-title-md-size)",
105
+ "typeTitleMdLineHeight": "var(--kz-type-title-md-line-height)",
106
+ "typeTitleMdWeight": "var(--kz-type-title-md-weight)",
107
+ "typeTitleMdTracking": "var(--kz-type-title-md-tracking)",
108
+ "typeBodyLgSize": "var(--kz-type-body-lg-size)",
109
+ "typeBodyLgLineHeight": "var(--kz-type-body-lg-line-height)",
110
+ "typeBodyLgWeight": "var(--kz-type-body-lg-weight)",
111
+ "typeBodyLgTracking": "var(--kz-type-body-lg-tracking)",
112
+ "typeBodyMdSize": "var(--kz-type-body-md-size)",
113
+ "typeBodyMdLineHeight": "var(--kz-type-body-md-line-height)",
114
+ "typeBodyMdWeight": "var(--kz-type-body-md-weight)",
115
+ "typeBodyMdTracking": "var(--kz-type-body-md-tracking)",
116
+ "typeBodySmSize": "var(--kz-type-body-sm-size)",
117
+ "typeBodySmLineHeight": "var(--kz-type-body-sm-line-height)",
118
+ "typeBodySmWeight": "var(--kz-type-body-sm-weight)",
119
+ "typeBodySmTracking": "var(--kz-type-body-sm-tracking)",
120
+ "typeCaptionSize": "var(--kz-type-caption-size)",
121
+ "typeCaptionLineHeight": "var(--kz-type-caption-line-height)",
122
+ "typeCaptionWeight": "var(--kz-type-caption-weight)",
123
+ "typeCaptionTracking": "var(--kz-type-caption-tracking)",
124
+ "typeOverlineSize": "var(--kz-type-overline-size)",
125
+ "typeOverlineLineHeight": "var(--kz-type-overline-line-height)",
126
+ "typeOverlineWeight": "var(--kz-type-overline-weight)",
127
+ "typeOverlineTracking": "var(--kz-type-overline-tracking)",
128
+ "typeMonoMdSize": "var(--kz-type-mono-md-size)",
129
+ "typeMonoMdLineHeight": "var(--kz-type-mono-md-line-height)",
130
+ "typeMonoMdWeight": "var(--kz-type-mono-md-weight)",
131
+ "typeMonoMdTracking": "var(--kz-type-mono-md-tracking)",
132
+ "typeMonoSmSize": "var(--kz-type-mono-sm-size)",
133
+ "typeMonoSmLineHeight": "var(--kz-type-mono-sm-line-height)",
134
+ "typeMonoSmWeight": "var(--kz-type-mono-sm-weight)",
135
+ "typeMonoSmTracking": "var(--kz-type-mono-sm-tracking)"
50
136
  });
51
137
 
52
138
  /** The raw CSS values per theme (aliases resolved), for canvas, charts and e-mails. */
@@ -75,27 +161,113 @@ export const values = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Obje
75
161
  "brandGradientTo": "hsl(240 6% 5%)",
76
162
  "success": "hsl(160 84% 39%)",
77
163
  "successText": "hsl(158 64% 52%)",
164
+ "successSoft": "hsl(160 84% 39% / 0.14)",
78
165
  "warning": "hsl(38 92% 50%)",
79
166
  "warningText": "hsl(38 92% 55%)",
167
+ "warningSoft": "hsl(38 92% 50% / 0.14)",
80
168
  "danger": "hsl(0 84% 60%)",
81
169
  "dangerText": "hsl(0 91% 71%)",
170
+ "dangerSoft": "hsl(0 84% 60% / 0.14)",
82
171
  "info": "hsl(217 92% 53%)",
83
172
  "infoText": "hsl(217 92% 68%)",
84
173
  "scrim": "hsl(0 0% 0% / 0.60)",
85
174
  "scrimStrong": "hsl(0 0% 0% / 0.80)",
86
175
  "overlay": "hsl(0 0% 0% / 0.70)",
176
+ "radiusXs": "6px",
87
177
  "radiusSm": "8px",
88
178
  "radiusMd": "12px",
89
179
  "radiusLg": "16px",
90
180
  "radiusXl": "20px",
181
+ "radius2xl": "28px",
91
182
  "radiusFull": "9999px",
92
183
  "shadowSm": "0 1px 3px hsl(0 0% 0% / 0.12), 0 1px 2px hsl(0 0% 0% / 0.06)",
93
184
  "shadowMd": "0 4px 12px hsl(0 0% 0% / 0.15), 0 2px 4px hsl(0 0% 0% / 0.08)",
94
185
  "shadowLg": "0 8px 24px hsl(0 0% 0% / 0.18), 0 4px 8px hsl(0 0% 0% / 0.08)",
186
+ "shadowRaised": "0 1px 2px hsl(240 30% 2% / 0.45), 0 2px 6px -2px hsl(240 30% 2% / 0.3)",
187
+ "shadowFloating": "0 2px 4px hsl(240 30% 2% / 0.35), 0 12px 24px -6px hsl(240 30% 2% / 0.45), 0 24px 48px -12px hsl(240 30% 2% / 0.35)",
188
+ "shadowOverlay": "0 4px 8px hsl(240 30% 2% / 0.4), 0 24px 48px -12px hsl(240 30% 2% / 0.5), 0 48px 96px -24px hsl(240 30% 2% / 0.45)",
189
+ "surfaceSheen": "hsl(0 0% 100% / 0.045)",
190
+ "fillShade": "hsl(0 0% 0% / 0.12)",
191
+ "edgeLight": "hsl(0 0% 100% / 0.07)",
192
+ "edgeOnFill": "hsl(0 0% 100% / 0.22)",
193
+ "edgeWell": "hsl(240 30% 2% / 0.5)",
194
+ "glassBg": "hsl(240 5% 12% / 0.88)",
195
+ "glassBorder": "hsl(0 0% 100% / 0.1)",
196
+ "glassBlur": "24px",
197
+ "ringWidth": "2px",
198
+ "ringOffset": "2px",
199
+ "ringHalo": "4px",
200
+ "controlSm": "32px",
201
+ "controlMd": "40px",
202
+ "controlLg": "48px",
203
+ "controlField": "44px",
204
+ "cutShape": "bevel",
205
+ "cutSize": "10px",
95
206
  "ease": "cubic-bezier(0.16, 1, 0.3, 1)",
96
- "fontSans": "Inter, system-ui, sans-serif",
97
- "fontDisplay": "Inter, system-ui, sans-serif",
98
- "fontMono": "\"JetBrains Mono\", ui-monospace, monospace"
207
+ "easeSpring": "cubic-bezier(0.34, 1.36, 0.64, 1)",
208
+ "durationInstant": "90ms",
209
+ "durationFast": "150ms",
210
+ "durationBase": "200ms",
211
+ "fontSans": "Inter, \"Inter Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
212
+ "fontText": "Inter, \"Inter Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
213
+ "fontDisplay": "\"Plus Jakarta Sans\", \"Plus Jakarta Sans Fallback\", Inter, system-ui, sans-serif",
214
+ "fontMono": "\"JetBrains Mono\", \"JetBrains Mono Fallback\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
215
+ "typeDisplay2xlSize": "72px",
216
+ "typeDisplay2xlLineHeight": "1.02",
217
+ "typeDisplay2xlWeight": "800",
218
+ "typeDisplay2xlTracking": "-0.035em",
219
+ "typeDisplayXlSize": "56px",
220
+ "typeDisplayXlLineHeight": "1.05",
221
+ "typeDisplayXlWeight": "800",
222
+ "typeDisplayXlTracking": "-0.03em",
223
+ "typeDisplayLgSize": "44px",
224
+ "typeDisplayLgLineHeight": "1.1",
225
+ "typeDisplayLgWeight": "700",
226
+ "typeDisplayLgTracking": "-0.025em",
227
+ "typeDisplayMdSize": "34px",
228
+ "typeDisplayMdLineHeight": "1.15",
229
+ "typeDisplayMdWeight": "700",
230
+ "typeDisplayMdTracking": "-0.02em",
231
+ "typeDisplaySmSize": "26px",
232
+ "typeDisplaySmLineHeight": "1.2",
233
+ "typeDisplaySmWeight": "700",
234
+ "typeDisplaySmTracking": "-0.015em",
235
+ "typeTitleLgSize": "20px",
236
+ "typeTitleLgLineHeight": "1.35",
237
+ "typeTitleLgWeight": "700",
238
+ "typeTitleLgTracking": "-0.01em",
239
+ "typeTitleMdSize": "17px",
240
+ "typeTitleMdLineHeight": "1.4",
241
+ "typeTitleMdWeight": "600",
242
+ "typeTitleMdTracking": "-0.012em",
243
+ "typeBodyLgSize": "18px",
244
+ "typeBodyLgLineHeight": "1.6",
245
+ "typeBodyLgWeight": "400",
246
+ "typeBodyLgTracking": "-0.014em",
247
+ "typeBodyMdSize": "16px",
248
+ "typeBodyMdLineHeight": "1.6",
249
+ "typeBodyMdWeight": "400",
250
+ "typeBodyMdTracking": "-0.011em",
251
+ "typeBodySmSize": "14px",
252
+ "typeBodySmLineHeight": "1.5",
253
+ "typeBodySmWeight": "400",
254
+ "typeBodySmTracking": "-0.006em",
255
+ "typeCaptionSize": "12px",
256
+ "typeCaptionLineHeight": "1.4",
257
+ "typeCaptionWeight": "500",
258
+ "typeCaptionTracking": "0em",
259
+ "typeOverlineSize": "11px",
260
+ "typeOverlineLineHeight": "1.3",
261
+ "typeOverlineWeight": "600",
262
+ "typeOverlineTracking": "0.12em",
263
+ "typeMonoMdSize": "14px",
264
+ "typeMonoMdLineHeight": "1.6",
265
+ "typeMonoMdWeight": "400",
266
+ "typeMonoMdTracking": "0em",
267
+ "typeMonoSmSize": "12px",
268
+ "typeMonoSmLineHeight": "1.5",
269
+ "typeMonoSmWeight": "400",
270
+ "typeMonoSmTracking": "0em"
99
271
  }), light: /* @__PURE__ */ Object.freeze({
100
272
  "surface0": "hsl(0 0% 98%)",
101
273
  "surface1": "hsl(0 0% 100%)",
@@ -121,29 +293,245 @@ export const values = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Obje
121
293
  "brandGradientTo": "hsl(0 0% 98%)",
122
294
  "success": "hsl(160 84% 39%)",
123
295
  "successText": "hsl(160 84% 24%)",
296
+ "successSoft": "hsl(160 84% 39% / 0.1)",
124
297
  "warning": "hsl(38 92% 50%)",
125
298
  "warningText": "hsl(32 95% 30%)",
299
+ "warningSoft": "hsl(38 92% 50% / 0.12)",
126
300
  "danger": "hsl(0 84% 60%)",
127
301
  "dangerText": "hsl(0 72% 40%)",
302
+ "dangerSoft": "hsl(0 84% 60% / 0.1)",
128
303
  "info": "hsl(217 92% 50%)",
129
304
  "infoText": "hsl(217 92% 42%)",
130
305
  "scrim": "hsl(0 0% 0% / 0.60)",
131
306
  "scrimStrong": "hsl(0 0% 0% / 0.80)",
132
307
  "overlay": "hsl(0 0% 0% / 0.70)",
308
+ "radiusXs": "6px",
133
309
  "radiusSm": "8px",
134
310
  "radiusMd": "12px",
135
311
  "radiusLg": "16px",
136
312
  "radiusXl": "20px",
313
+ "radius2xl": "28px",
137
314
  "radiusFull": "9999px",
138
315
  "shadowSm": "0 1px 3px hsl(240 6% 0% / 0.06), 0 1px 2px hsl(240 6% 0% / 0.04)",
139
316
  "shadowMd": "0 4px 12px hsl(240 6% 0% / 0.08), 0 2px 4px hsl(240 6% 0% / 0.04)",
140
317
  "shadowLg": "0 8px 24px hsl(240 6% 0% / 0.10), 0 4px 8px hsl(240 6% 0% / 0.05)",
318
+ "shadowRaised": "0 1px 2px hsl(232 25% 25% / 0.08), 0 2px 6px -2px hsl(232 25% 25% / 0.08)",
319
+ "shadowFloating": "0 2px 4px hsl(232 25% 25% / 0.06), 0 12px 24px -6px hsl(232 25% 25% / 0.1), 0 24px 48px -12px hsl(232 25% 25% / 0.1)",
320
+ "shadowOverlay": "0 4px 8px hsl(232 25% 25% / 0.08), 0 24px 48px -12px hsl(232 25% 25% / 0.14), 0 48px 96px -24px hsl(232 25% 25% / 0.14)",
321
+ "surfaceSheen": "hsl(0 0% 100% / 0.7)",
322
+ "fillShade": "hsl(0 0% 0% / 0.12)",
323
+ "edgeLight": "hsl(0 0% 100% / 0.9)",
324
+ "edgeOnFill": "hsl(0 0% 100% / 0.22)",
325
+ "edgeWell": "hsl(232 25% 25% / 0.08)",
326
+ "glassBg": "hsl(0 0% 100% / 0.88)",
327
+ "glassBorder": "hsl(240 6% 0% / 0.08)",
328
+ "glassBlur": "24px",
329
+ "ringWidth": "2px",
330
+ "ringOffset": "2px",
331
+ "ringHalo": "4px",
332
+ "controlSm": "32px",
333
+ "controlMd": "40px",
334
+ "controlLg": "48px",
335
+ "controlField": "44px",
336
+ "cutShape": "bevel",
337
+ "cutSize": "10px",
141
338
  "ease": "cubic-bezier(0.16, 1, 0.3, 1)",
142
- "fontSans": "Inter, system-ui, sans-serif",
143
- "fontDisplay": "Inter, system-ui, sans-serif",
144
- "fontMono": "\"JetBrains Mono\", ui-monospace, monospace"
339
+ "easeSpring": "cubic-bezier(0.34, 1.36, 0.64, 1)",
340
+ "durationInstant": "90ms",
341
+ "durationFast": "150ms",
342
+ "durationBase": "200ms",
343
+ "fontSans": "Inter, \"Inter Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
344
+ "fontText": "Inter, \"Inter Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
345
+ "fontDisplay": "\"Plus Jakarta Sans\", \"Plus Jakarta Sans Fallback\", Inter, system-ui, sans-serif",
346
+ "fontMono": "\"JetBrains Mono\", \"JetBrains Mono Fallback\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
347
+ "typeDisplay2xlSize": "72px",
348
+ "typeDisplay2xlLineHeight": "1.02",
349
+ "typeDisplay2xlWeight": "800",
350
+ "typeDisplay2xlTracking": "-0.035em",
351
+ "typeDisplayXlSize": "56px",
352
+ "typeDisplayXlLineHeight": "1.05",
353
+ "typeDisplayXlWeight": "800",
354
+ "typeDisplayXlTracking": "-0.03em",
355
+ "typeDisplayLgSize": "44px",
356
+ "typeDisplayLgLineHeight": "1.1",
357
+ "typeDisplayLgWeight": "700",
358
+ "typeDisplayLgTracking": "-0.025em",
359
+ "typeDisplayMdSize": "34px",
360
+ "typeDisplayMdLineHeight": "1.15",
361
+ "typeDisplayMdWeight": "700",
362
+ "typeDisplayMdTracking": "-0.02em",
363
+ "typeDisplaySmSize": "26px",
364
+ "typeDisplaySmLineHeight": "1.2",
365
+ "typeDisplaySmWeight": "700",
366
+ "typeDisplaySmTracking": "-0.015em",
367
+ "typeTitleLgSize": "20px",
368
+ "typeTitleLgLineHeight": "1.35",
369
+ "typeTitleLgWeight": "700",
370
+ "typeTitleLgTracking": "-0.01em",
371
+ "typeTitleMdSize": "17px",
372
+ "typeTitleMdLineHeight": "1.4",
373
+ "typeTitleMdWeight": "600",
374
+ "typeTitleMdTracking": "-0.012em",
375
+ "typeBodyLgSize": "18px",
376
+ "typeBodyLgLineHeight": "1.6",
377
+ "typeBodyLgWeight": "400",
378
+ "typeBodyLgTracking": "-0.014em",
379
+ "typeBodyMdSize": "16px",
380
+ "typeBodyMdLineHeight": "1.6",
381
+ "typeBodyMdWeight": "400",
382
+ "typeBodyMdTracking": "-0.011em",
383
+ "typeBodySmSize": "14px",
384
+ "typeBodySmLineHeight": "1.5",
385
+ "typeBodySmWeight": "400",
386
+ "typeBodySmTracking": "-0.006em",
387
+ "typeCaptionSize": "12px",
388
+ "typeCaptionLineHeight": "1.4",
389
+ "typeCaptionWeight": "500",
390
+ "typeCaptionTracking": "0em",
391
+ "typeOverlineSize": "11px",
392
+ "typeOverlineLineHeight": "1.3",
393
+ "typeOverlineWeight": "600",
394
+ "typeOverlineTracking": "0.12em",
395
+ "typeMonoMdSize": "14px",
396
+ "typeMonoMdLineHeight": "1.6",
397
+ "typeMonoMdWeight": "400",
398
+ "typeMonoMdTracking": "0em",
399
+ "typeMonoSmSize": "12px",
400
+ "typeMonoSmLineHeight": "1.5",
401
+ "typeMonoSmWeight": "400",
402
+ "typeMonoSmTracking": "0em"
145
403
  }) });
146
404
 
405
+ /** The type scale: each step's role (the family), size, line height, weight and tracking — `text-<name>` in @krizaka/tailwind. */
406
+ export const typeScale = /* @__PURE__ */ Object.freeze([
407
+ {
408
+ "name": "display-2xl",
409
+ "role": "display",
410
+ "description": "The hero of a home page",
411
+ "size": "72px",
412
+ "lineHeight": 1.02,
413
+ "weight": 800,
414
+ "tracking": "-0.035em"
415
+ },
416
+ {
417
+ "name": "display-xl",
418
+ "role": "display",
419
+ "description": "The hero of a page",
420
+ "size": "56px",
421
+ "lineHeight": 1.05,
422
+ "weight": 800,
423
+ "tracking": "-0.03em"
424
+ },
425
+ {
426
+ "name": "display-lg",
427
+ "role": "display",
428
+ "description": "The title of a page",
429
+ "size": "44px",
430
+ "lineHeight": 1.1,
431
+ "weight": 700,
432
+ "tracking": "-0.025em"
433
+ },
434
+ {
435
+ "name": "display-md",
436
+ "role": "display",
437
+ "description": "The title of a section",
438
+ "size": "34px",
439
+ "lineHeight": 1.15,
440
+ "weight": 700,
441
+ "tracking": "-0.02em"
442
+ },
443
+ {
444
+ "name": "display-sm",
445
+ "role": "display",
446
+ "description": "A sub-section, a big figure",
447
+ "size": "26px",
448
+ "lineHeight": 1.2,
449
+ "weight": 700,
450
+ "tracking": "-0.015em"
451
+ },
452
+ {
453
+ "name": "title-lg",
454
+ "role": "display",
455
+ "description": "The title of a card or a dialog",
456
+ "size": "20px",
457
+ "lineHeight": 1.35,
458
+ "weight": 700,
459
+ "tracking": "-0.01em"
460
+ },
461
+ {
462
+ "name": "title-md",
463
+ "role": "text",
464
+ "description": "The title of a list or a panel",
465
+ "size": "17px",
466
+ "lineHeight": 1.4,
467
+ "weight": 600,
468
+ "tracking": "-0.012em"
469
+ },
470
+ {
471
+ "name": "body-lg",
472
+ "role": "text",
473
+ "description": "The lead, a paragraph that stands out",
474
+ "size": "18px",
475
+ "lineHeight": 1.6,
476
+ "weight": 400,
477
+ "tracking": "-0.014em"
478
+ },
479
+ {
480
+ "name": "body-md",
481
+ "role": "text",
482
+ "description": "Running text",
483
+ "size": "16px",
484
+ "lineHeight": 1.6,
485
+ "weight": 400,
486
+ "tracking": "-0.011em"
487
+ },
488
+ {
489
+ "name": "body-sm",
490
+ "role": "text",
491
+ "description": "Dense interface, secondary text",
492
+ "size": "14px",
493
+ "lineHeight": 1.5,
494
+ "weight": 400,
495
+ "tracking": "-0.006em"
496
+ },
497
+ {
498
+ "name": "caption",
499
+ "role": "text",
500
+ "description": "Captions, help, metadata",
501
+ "size": "12px",
502
+ "lineHeight": 1.4,
503
+ "weight": 500,
504
+ "tracking": "0em"
505
+ },
506
+ {
507
+ "name": "overline",
508
+ "role": "mono",
509
+ "description": "The overline of a section, uppercase",
510
+ "size": "11px",
511
+ "lineHeight": 1.3,
512
+ "weight": 600,
513
+ "tracking": "0.12em"
514
+ },
515
+ {
516
+ "name": "mono-md",
517
+ "role": "mono",
518
+ "description": "Code blocks",
519
+ "size": "14px",
520
+ "lineHeight": 1.6,
521
+ "weight": 400,
522
+ "tracking": "0em"
523
+ },
524
+ {
525
+ "name": "mono-sm",
526
+ "role": "mono",
527
+ "description": "Identifiers, endpoints, versions",
528
+ "size": "12px",
529
+ "lineHeight": 1.5,
530
+ "weight": 400,
531
+ "tracking": "0em"
532
+ }
533
+ ]);
534
+
147
535
  /** The brand themes: the accent family of each Krizaka brand, raw CSS per theme (aliases resolved). */
148
536
  export const brands = /* @__PURE__ */ Object.freeze({
149
537
  "krizaka": {
package/dist/native.d.ts CHANGED
@@ -26,35 +26,79 @@ export type Theme = {
26
26
  readonly brandGradientTo: string;
27
27
  readonly success: string;
28
28
  readonly successText: string;
29
+ readonly successSoft: string;
29
30
  readonly warning: string;
30
31
  readonly warningText: string;
32
+ readonly warningSoft: string;
31
33
  readonly danger: string;
32
34
  readonly dangerText: string;
35
+ readonly dangerSoft: string;
33
36
  readonly info: string;
34
37
  readonly infoText: string;
35
38
  readonly scrim: string;
36
39
  readonly scrimStrong: string;
37
40
  readonly overlay: string;
41
+ readonly surfaceSheen: string;
42
+ readonly fillShade: string;
43
+ readonly edgeLight: string;
44
+ readonly edgeOnFill: string;
45
+ readonly edgeWell: string;
46
+ readonly glassBg: string;
47
+ readonly glassBorder: string;
38
48
  };
39
49
  export type ThemeName = "dark" | "light";
40
50
  /** Colour roles per theme, resolved for React Native (`#rrggbb`, `rgba()` when translucent). */
41
51
  export declare const themes: { readonly dark: Theme; readonly light: Theme };
42
52
  /** Corner radii, in dp. */
43
53
  export declare const radius: {
54
+ readonly xs: 6;
44
55
  readonly sm: 8;
45
56
  readonly md: 12;
46
57
  readonly lg: 16;
47
58
  readonly xl: 20;
59
+ readonly "2xl": 28;
48
60
  readonly full: 9999;
49
61
  };
50
62
  /** Font families: the first family of each web stack (React Native takes a single name). */
51
63
  export declare const typography: {
52
64
  readonly sans: "Inter";
53
- readonly display: "Inter";
65
+ readonly text: "Inter";
66
+ readonly display: "Plus Jakarta Sans";
54
67
  readonly mono: "JetBrains Mono";
55
68
  };
56
- /** Motion: the cubic-bezier control points (`Easing.bezier(...motion.ease)`). */
57
- export declare const motion: { readonly ease: readonly [number, number, number, number] };
69
+ /** Motion: the ease and the spring (cubic-bezier control points) and the micro-interaction durations, in ms. */
70
+ export declare const motion: {
71
+ readonly ease: readonly [number, number, number, number];
72
+ readonly spring: readonly [number, number, number, number];
73
+ readonly duration: {
74
+ readonly instant: 90;
75
+ readonly fast: 150;
76
+ readonly base: 200;
77
+ };
78
+ };
79
+ /** A step of the type scale, in dp. */
80
+ export interface NativeTypeStep {
81
+ readonly role: "display" | "text" | "mono";
82
+ readonly fontSize: number;
83
+ readonly lineHeight: number;
84
+ readonly fontWeight: "400" | "500" | "600" | "700" | "800";
85
+ readonly letterSpacing: number;
86
+ }
87
+ /** The type scale in dp (React Native): fontSize, lineHeight and letterSpacing absolute, the role whose family sets it. */
88
+ export declare const typeScale: { readonly [K in "display2xl" | "displayXl" | "displayLg" | "displayMd" | "displaySm" | "titleLg" | "titleMd" | "bodyLg" | "bodyMd" | "bodySm" | "caption" | "overline" | "monoMd" | "monoSm"]: NativeTypeStep };
89
+ /** The shadows of one theme, as React Native `boxShadow` strings. */
90
+ export type Shadows = {
91
+ readonly sm: string;
92
+ readonly md: string;
93
+ readonly lg: string;
94
+ readonly raised: string;
95
+ readonly floating: string;
96
+ readonly overlay: string;
97
+ };
98
+ /** The shadows per theme as React Native `boxShadow` strings (RN ≥ 0.76). */
99
+ export declare const shadows: { readonly dark: Shadows; readonly light: Shadows };
100
+ /** The griffe: the size of the 45° cut corner of a control, in dp. */
101
+ export declare const cut: { readonly size: number };
58
102
 
59
103
  /** A Krizaka brand. */
60
104
  export type BrandId = "krizaka" | "orazaka" | "orochia";
package/dist/native.js CHANGED
@@ -26,15 +26,25 @@ export const themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Obje
26
26
  "brandGradientTo": "#0c0c0e",
27
27
  "success": "#10b77f",
28
28
  "successText": "#36d399",
29
+ "successSoft": "rgba(16,183,127,0.14)",
29
30
  "warning": "#f59f0a",
30
31
  "warningText": "#f6a823",
32
+ "warningSoft": "rgba(245,159,10,0.14)",
31
33
  "danger": "#ef4343",
32
34
  "dangerText": "#f87272",
35
+ "dangerSoft": "rgba(239,67,67,0.14)",
33
36
  "info": "#196df5",
34
37
  "infoText": "#629cf8",
35
38
  "scrim": "rgba(0,0,0,0.6)",
36
39
  "scrimStrong": "rgba(0,0,0,0.8)",
37
- "overlay": "rgba(0,0,0,0.7)"
40
+ "overlay": "rgba(0,0,0,0.7)",
41
+ "surfaceSheen": "rgba(255,255,255,0.045)",
42
+ "fillShade": "rgba(0,0,0,0.12)",
43
+ "edgeLight": "rgba(255,255,255,0.07)",
44
+ "edgeOnFill": "rgba(255,255,255,0.22)",
45
+ "edgeWell": "rgba(4,4,7,0.5)",
46
+ "glassBg": "rgba(29,29,32,0.88)",
47
+ "glassBorder": "rgba(255,255,255,0.1)"
38
48
  }), light: /* @__PURE__ */ Object.freeze({
39
49
  "surface0": "#fafafa",
40
50
  "surface1": "#ffffff",
@@ -60,35 +70,181 @@ export const themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Obje
60
70
  "brandGradientTo": "#fafafa",
61
71
  "success": "#10b77f",
62
72
  "successText": "#0a714e",
73
+ "successSoft": "rgba(16,183,127,0.1)",
63
74
  "warning": "#f59f0a",
64
75
  "warningText": "#955104",
76
+ "warningSoft": "rgba(245,159,10,0.12)",
65
77
  "danger": "#ef4343",
66
78
  "dangerText": "#af1d1d",
79
+ "dangerSoft": "rgba(239,67,67,0.1)",
67
80
  "info": "#0a64f5",
68
81
  "infoText": "#0954ce",
69
82
  "scrim": "rgba(0,0,0,0.6)",
70
83
  "scrimStrong": "rgba(0,0,0,0.8)",
71
- "overlay": "rgba(0,0,0,0.7)"
84
+ "overlay": "rgba(0,0,0,0.7)",
85
+ "surfaceSheen": "rgba(255,255,255,0.7)",
86
+ "fillShade": "rgba(0,0,0,0.12)",
87
+ "edgeLight": "rgba(255,255,255,0.9)",
88
+ "edgeOnFill": "rgba(255,255,255,0.22)",
89
+ "edgeWell": "rgba(48,52,80,0.08)",
90
+ "glassBg": "rgba(255,255,255,0.88)",
91
+ "glassBorder": "rgba(0,0,0,0.08)"
72
92
  }) });
73
93
 
74
94
  /** Corner radii, in dp. */
75
95
  export const radius = /* @__PURE__ */ Object.freeze({
96
+ "xs": 6,
76
97
  "sm": 8,
77
98
  "md": 12,
78
99
  "lg": 16,
79
100
  "xl": 20,
101
+ "2xl": 28,
80
102
  "full": 9999
81
103
  });
82
104
 
83
105
  /** Font families: the first family of each web stack (React Native takes a single name). */
84
106
  export const typography = /* @__PURE__ */ Object.freeze({
85
107
  "sans": "Inter",
86
- "display": "Inter",
108
+ "text": "Inter",
109
+ "display": "Plus Jakarta Sans",
87
110
  "mono": "JetBrains Mono"
88
111
  });
89
112
 
90
- /** Motion: the cubic-bezier control points (`Easing.bezier(...motion.ease)`). */
91
- export const motion = /* @__PURE__ */ Object.freeze({ ease: /* @__PURE__ */ Object.freeze([0.16,1,0.3,1]) });
113
+ /**
114
+ * Motion: the cubic-bezier control points (`Easing.bezier(...motion.ease)`), the short spring of what answers the hand
115
+ * (`motion.spring`) and the micro-interaction durations in ms (`motion.duration.fast`) — 0 when the system reduces motion.
116
+ */
117
+ export const motion = /* @__PURE__ */ Object.freeze({ ease: /* @__PURE__ */ Object.freeze([0.16,1,0.3,1]), spring: /* @__PURE__ */ Object.freeze([0.34,1.36,0.64,1]), duration: /* @__PURE__ */ Object.freeze({"instant":90,"fast":150,"base":200}) });
118
+
119
+ /**
120
+ * The type scale in dp: fontSize, lineHeight and letterSpacing absolute (React Native has no em), fontWeight as a string,
121
+ * and the role whose family sets it — with @krizaka/fonts: `{ ...typeScale.bodyMd, fontFamily: fontFamily(role, weight) }`.
122
+ */
123
+ export const typeScale = /* @__PURE__ */ Object.freeze({
124
+ "display2xl": {
125
+ "role": "display",
126
+ "fontSize": 72,
127
+ "lineHeight": 73,
128
+ "fontWeight": "800",
129
+ "letterSpacing": -2.52
130
+ },
131
+ "displayXl": {
132
+ "role": "display",
133
+ "fontSize": 56,
134
+ "lineHeight": 59,
135
+ "fontWeight": "800",
136
+ "letterSpacing": -1.68
137
+ },
138
+ "displayLg": {
139
+ "role": "display",
140
+ "fontSize": 44,
141
+ "lineHeight": 48,
142
+ "fontWeight": "700",
143
+ "letterSpacing": -1.1
144
+ },
145
+ "displayMd": {
146
+ "role": "display",
147
+ "fontSize": 34,
148
+ "lineHeight": 39,
149
+ "fontWeight": "700",
150
+ "letterSpacing": -0.68
151
+ },
152
+ "displaySm": {
153
+ "role": "display",
154
+ "fontSize": 26,
155
+ "lineHeight": 31,
156
+ "fontWeight": "700",
157
+ "letterSpacing": -0.39
158
+ },
159
+ "titleLg": {
160
+ "role": "display",
161
+ "fontSize": 20,
162
+ "lineHeight": 27,
163
+ "fontWeight": "700",
164
+ "letterSpacing": -0.2
165
+ },
166
+ "titleMd": {
167
+ "role": "text",
168
+ "fontSize": 17,
169
+ "lineHeight": 24,
170
+ "fontWeight": "600",
171
+ "letterSpacing": -0.2
172
+ },
173
+ "bodyLg": {
174
+ "role": "text",
175
+ "fontSize": 18,
176
+ "lineHeight": 29,
177
+ "fontWeight": "400",
178
+ "letterSpacing": -0.25
179
+ },
180
+ "bodyMd": {
181
+ "role": "text",
182
+ "fontSize": 16,
183
+ "lineHeight": 26,
184
+ "fontWeight": "400",
185
+ "letterSpacing": -0.18
186
+ },
187
+ "bodySm": {
188
+ "role": "text",
189
+ "fontSize": 14,
190
+ "lineHeight": 21,
191
+ "fontWeight": "400",
192
+ "letterSpacing": -0.08
193
+ },
194
+ "caption": {
195
+ "role": "text",
196
+ "fontSize": 12,
197
+ "lineHeight": 17,
198
+ "fontWeight": "500",
199
+ "letterSpacing": 0
200
+ },
201
+ "overline": {
202
+ "role": "mono",
203
+ "fontSize": 11,
204
+ "lineHeight": 14,
205
+ "fontWeight": "600",
206
+ "letterSpacing": 1.32
207
+ },
208
+ "monoMd": {
209
+ "role": "mono",
210
+ "fontSize": 14,
211
+ "lineHeight": 22,
212
+ "fontWeight": "400",
213
+ "letterSpacing": 0
214
+ },
215
+ "monoSm": {
216
+ "role": "mono",
217
+ "fontSize": 12,
218
+ "lineHeight": 18,
219
+ "fontWeight": "400",
220
+ "letterSpacing": 0
221
+ }
222
+ });
223
+
224
+ /**
225
+ * The shadows per theme as React Native `boxShadow` strings (RN ≥ 0.76): `raised` (a button, a card), `floating`
226
+ * (a menu, a popover), `overlay` (a sheet, a toast) — ink-tinted, several layers, as on the web.
227
+ */
228
+ export const shadows = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze({
229
+ "sm": "0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.06)",
230
+ "md": "0 4px 12px 0 rgba(0,0,0,0.15), 0 2px 4px 0 rgba(0,0,0,0.08)",
231
+ "lg": "0 8px 24px 0 rgba(0,0,0,0.18), 0 4px 8px 0 rgba(0,0,0,0.08)",
232
+ "raised": "0 1px 2px 0 rgba(4,4,7,0.45), 0 2px 6px -2px rgba(4,4,7,0.3)",
233
+ "floating": "0 2px 4px 0 rgba(4,4,7,0.35), 0 12px 24px -6px rgba(4,4,7,0.45), 0 24px 48px -12px rgba(4,4,7,0.35)",
234
+ "overlay": "0 4px 8px 0 rgba(4,4,7,0.4), 0 24px 48px -12px rgba(4,4,7,0.5), 0 48px 96px -24px rgba(4,4,7,0.45)"
235
+ }), light: /* @__PURE__ */ Object.freeze({
236
+ "sm": "0 1px 3px 0 rgba(0,0,0,0.06), 0 1px 2px 0 rgba(0,0,0,0.04)",
237
+ "md": "0 4px 12px 0 rgba(0,0,0,0.08), 0 2px 4px 0 rgba(0,0,0,0.04)",
238
+ "lg": "0 8px 24px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.05)",
239
+ "raised": "0 1px 2px 0 rgba(48,52,80,0.08), 0 2px 6px -2px rgba(48,52,80,0.08)",
240
+ "floating": "0 2px 4px 0 rgba(48,52,80,0.06), 0 12px 24px -6px rgba(48,52,80,0.1), 0 24px 48px -12px rgba(48,52,80,0.1)",
241
+ "overlay": "0 4px 8px 0 rgba(48,52,80,0.08), 0 24px 48px -12px rgba(48,52,80,0.14), 0 48px 96px -24px rgba(48,52,80,0.14)"
242
+ }) });
243
+
244
+ /** The griffe (BRAND.md §6.1): the size of the 45° cut corner of a control, in dp. */
245
+ export const cut = /* @__PURE__ */ Object.freeze({
246
+ "size": 10
247
+ });
92
248
 
93
249
  /** The brand themes as ThemeProvider overrides (`overrides={brands.orazaka}`): the accent family per theme. */
94
250
  export const brands = /* @__PURE__ */ Object.freeze({
package/dist/tokens.css CHANGED
@@ -35,18 +35,33 @@
35
35
  --kz-brand-gradient-via: hsl(232 24% 7%); /* Section : la teinte intermédiaire */
36
36
  --kz-brand-gradient-to: var(--kz-surface-0); /* Section : l'arrivée, un alias de la surface de page — la section suivante y enchaîne, même quand un produit change --kz-surface-0 */
37
37
  --kz-success-text: hsl(158 64% 52%); /* Statut succès en texte (petit texte, libellé) : ≥ 4.5:1 sur chaque surface */
38
+ --kz-success-soft: hsl(160 84% 39% / 0.14); /* Fond teinté success (texte primaire ≥ 4.5:1) */
38
39
  --kz-warning-text: hsl(38 92% 55%); /* Statut avertissement en texte : ≥ 4.5:1 sur chaque surface */
40
+ --kz-warning-soft: hsl(38 92% 50% / 0.14); /* Fond teinté warning (texte primaire ≥ 4.5:1) */
39
41
  --kz-danger-text: hsl(0 91% 71%); /* Statut erreur en texte (message d'erreur, compte à rebours urgent) : ≥ 4.5:1 sur chaque surface */
42
+ --kz-danger-soft: hsl(0 84% 60% / 0.14); /* Fond teinté danger (texte primaire ≥ 4.5:1) */
40
43
  --kz-info: var(--kz-accent); /* Statut : information */
41
44
  --kz-info-text: var(--kz-accent-text); /* Statut information en texte : l'accent en texte par défaut (≥ 4.5:1) */
42
45
 
43
- /* Ombres (web uniquement) */
46
+ /* Ombres (web uniquement) ; raised/floating/overlay : teintées d'encre, multi-couches */
44
47
  --kz-shadow-sm: 0 1px 3px hsl(0 0% 0% / 0.12), 0 1px 2px hsl(0 0% 0% / 0.06); /* Champ, bouton au repos */
45
48
  --kz-shadow-md: 0 4px 12px hsl(0 0% 0% / 0.15), 0 2px 4px hsl(0 0% 0% / 0.08); /* Menu, popover, carte au survol */
46
49
  --kz-shadow-lg: 0 8px 24px hsl(0 0% 0% / 0.18), 0 4px 8px hsl(0 0% 0% / 0.08); /* Dialogue, feuille */
50
+ --kz-shadow-raised: 0 1px 2px hsl(240 30% 2% / 0.45), 0 2px 6px -2px hsl(240 30% 2% / 0.3); /* Surélevé : bouton, carte */
51
+ --kz-shadow-floating: 0 2px 4px hsl(240 30% 2% / 0.35), 0 12px 24px -6px hsl(240 30% 2% / 0.45), 0 24px 48px -12px hsl(240 30% 2% / 0.35); /* Flottant : menu, popover, info-bulle */
52
+ --kz-shadow-overlay: 0 4px 8px hsl(240 30% 2% / 0.4), 0 24px 48px -12px hsl(240 30% 2% / 0.5), 0 48px 96px -24px hsl(240 30% 2% / 0.45); /* Au-dessus : dialogue, toast, palette */
53
+ --kz-surface-sheen: hsl(0 0% 100% / 0.045); /* Reflet en haut d'une surface (bg-sheen) */
47
54
 
48
- /* Typographie */
49
- --kz-font-display: var(--kz-font-sans); /* Titres ; égal à sans par défaut, surchargé par le thème produit */
55
+ /* Arêtes : un filet intérieur d'1 px */
56
+ --kz-edge-light: hsl(0 0% 100% / 0.07); /* Arête lumineuse du haut (inset-shadow-edge) */
57
+ --kz-edge-well: hsl(240 30% 2% / 0.5); /* Ombre intérieure d'un puits : champ, piste (inset-shadow-well) */
58
+
59
+ /* Verre dépoli de ce qui flotte : 88 %, texte secondaire ≥ 4.5:1 sur tout fond */
60
+ --kz-glass-bg: hsl(240 5% 12% / 0.88); /* Le fond du verre */
61
+ --kz-glass-border: hsl(0 0% 100% / 0.1); /* Le contour du verre */
62
+
63
+ /* Typographie — les trois familles de @krizaka/fonts, chacune suivie de son repli aux métriques ajustées */
64
+ --kz-font-text: var(--kz-font-sans); /* Alias de sans : le rôle texte */
50
65
  }
51
66
 
52
67
  /* Light. */
@@ -70,11 +85,22 @@ html.light {
70
85
  --kz-brand-gradient-from: hsl(214 95% 93%); /* Section : la teinte de départ (haut de section, halo) */
71
86
  --kz-brand-gradient-via: hsl(220 60% 97%); /* Section : la teinte intermédiaire */
72
87
  --kz-success-text: hsl(160 84% 24%); /* Statut succès en texte (petit texte, libellé) : ≥ 4.5:1 sur chaque surface */
88
+ --kz-success-soft: hsl(160 84% 39% / 0.1); /* Fond teinté success (texte primaire ≥ 4.5:1) */
73
89
  --kz-warning-text: hsl(32 95% 30%); /* Statut avertissement en texte : ≥ 4.5:1 sur chaque surface */
90
+ --kz-warning-soft: hsl(38 92% 50% / 0.12); /* Fond teinté warning (texte primaire ≥ 4.5:1) */
74
91
  --kz-danger-text: hsl(0 72% 40%); /* Statut erreur en texte (message d'erreur, compte à rebours urgent) : ≥ 4.5:1 sur chaque surface */
92
+ --kz-danger-soft: hsl(0 84% 60% / 0.1); /* Fond teinté danger (texte primaire ≥ 4.5:1) */
75
93
  --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 */
76
94
  --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 */
77
95
  --kz-shadow-lg: 0 8px 24px hsl(240 6% 0% / 0.10), 0 4px 8px hsl(240 6% 0% / 0.05); /* Dialogue, feuille */
96
+ --kz-shadow-raised: 0 1px 2px hsl(232 25% 25% / 0.08), 0 2px 6px -2px hsl(232 25% 25% / 0.08); /* Surélevé : bouton, carte */
97
+ --kz-shadow-floating: 0 2px 4px hsl(232 25% 25% / 0.06), 0 12px 24px -6px hsl(232 25% 25% / 0.1), 0 24px 48px -12px hsl(232 25% 25% / 0.1); /* Flottant : menu, popover, info-bulle */
98
+ --kz-shadow-overlay: 0 4px 8px hsl(232 25% 25% / 0.08), 0 24px 48px -12px hsl(232 25% 25% / 0.14), 0 48px 96px -24px hsl(232 25% 25% / 0.14); /* Au-dessus : dialogue, toast, palette */
99
+ --kz-surface-sheen: hsl(0 0% 100% / 0.7); /* Reflet en haut d'une surface (bg-sheen) */
100
+ --kz-edge-light: hsl(0 0% 100% / 0.9); /* Arête lumineuse du haut (inset-shadow-edge) */
101
+ --kz-edge-well: hsl(232 25% 25% / 0.08); /* Ombre intérieure d'un puits : champ, piste (inset-shadow-well) */
102
+ --kz-glass-bg: hsl(0 0% 100% / 0.88); /* Le fond du verre */
103
+ --kz-glass-border: hsl(240 6% 0% / 0.08); /* Le contour du verre */
78
104
  }
79
105
 
80
106
  /* `.theme-light` : les valeurs claires, alias compris, sur un sous-arbre — un aperçu reste clair dans une page
@@ -102,14 +128,25 @@ html.light {
102
128
  --kz-brand-gradient-via: hsl(220 60% 97%); /* Section : la teinte intermédiaire */
103
129
  --kz-brand-gradient-to: var(--kz-surface-0); /* Section : l'arrivée, un alias de la surface de page — la section suivante y enchaîne, même quand un produit change --kz-surface-0 */
104
130
  --kz-success-text: hsl(160 84% 24%); /* Statut succès en texte (petit texte, libellé) : ≥ 4.5:1 sur chaque surface */
131
+ --kz-success-soft: hsl(160 84% 39% / 0.1); /* Fond teinté success (texte primaire ≥ 4.5:1) */
105
132
  --kz-warning-text: hsl(32 95% 30%); /* Statut avertissement en texte : ≥ 4.5:1 sur chaque surface */
133
+ --kz-warning-soft: hsl(38 92% 50% / 0.12); /* Fond teinté warning (texte primaire ≥ 4.5:1) */
106
134
  --kz-danger-text: hsl(0 72% 40%); /* Statut erreur en texte (message d'erreur, compte à rebours urgent) : ≥ 4.5:1 sur chaque surface */
135
+ --kz-danger-soft: hsl(0 84% 60% / 0.1); /* Fond teinté danger (texte primaire ≥ 4.5:1) */
107
136
  --kz-info: var(--kz-accent); /* Statut : information */
108
137
  --kz-info-text: var(--kz-accent-text); /* Statut information en texte : l'accent en texte par défaut (≥ 4.5:1) */
109
138
  --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 */
110
139
  --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 */
111
140
  --kz-shadow-lg: 0 8px 24px hsl(240 6% 0% / 0.10), 0 4px 8px hsl(240 6% 0% / 0.05); /* Dialogue, feuille */
112
- --kz-font-display: var(--kz-font-sans); /* Titres ; égal à sans par défaut, surchargé par le thème produit */
141
+ --kz-shadow-raised: 0 1px 2px hsl(232 25% 25% / 0.08), 0 2px 6px -2px hsl(232 25% 25% / 0.08); /* Surélevé : bouton, carte */
142
+ --kz-shadow-floating: 0 2px 4px hsl(232 25% 25% / 0.06), 0 12px 24px -6px hsl(232 25% 25% / 0.1), 0 24px 48px -12px hsl(232 25% 25% / 0.1); /* Flottant : menu, popover, info-bulle */
143
+ --kz-shadow-overlay: 0 4px 8px hsl(232 25% 25% / 0.08), 0 24px 48px -12px hsl(232 25% 25% / 0.14), 0 48px 96px -24px hsl(232 25% 25% / 0.14); /* Au-dessus : dialogue, toast, palette */
144
+ --kz-surface-sheen: hsl(0 0% 100% / 0.7); /* Reflet en haut d'une surface (bg-sheen) */
145
+ --kz-edge-light: hsl(0 0% 100% / 0.9); /* Arête lumineuse du haut (inset-shadow-edge) */
146
+ --kz-edge-well: hsl(232 25% 25% / 0.08); /* Ombre intérieure d'un puits : champ, piste (inset-shadow-well) */
147
+ --kz-glass-bg: hsl(0 0% 100% / 0.88); /* Le fond du verre */
148
+ --kz-glass-border: hsl(240 6% 0% / 0.08); /* Le contour du verre */
149
+ --kz-font-text: var(--kz-font-sans); /* Alias de sans : le rôle texte */
113
150
  }
114
151
 
115
152
  /* Invariants : identiques dans les deux thèmes. Tout ce qui se pose SUR un média les utilise. */
@@ -127,14 +164,146 @@ html.light {
127
164
  --kz-overlay: hsl(0 0% 0% / 0.70); /* fond d'un dialogue */
128
165
 
129
166
  /* Rayons */
167
+ --kz-radius-xs: 6px; /* Case à cocher, touche, badge coupé */
130
168
  --kz-radius-sm: 8px; /* Champ, puce */
131
169
  --kz-radius-md: 12px; /* Bouton, menu */
132
170
  --kz-radius-lg: 16px; /* Carte */
133
171
  --kz-radius-xl: 20px; /* Dialogue, feuille */
172
+ --kz-radius-2xl: 28px; /* Feuille, grande surface flottante */
134
173
  --kz-radius-full: 9999px; /* Pastille, avatar */
174
+ --kz-fill-shade: hsl(0 0% 0% / 0.12); /* Bas d'un aplat (bg-fill-shade), on-accent ≥ 4.5:1 */
175
+
176
+ /* Arêtes : un filet intérieur d'1 px */
177
+ --kz-edge-on-fill: hsl(0 0% 100% / 0.22); /* Arête lumineuse sur un aplat */
178
+
179
+ /* Verre dépoli de ce qui flotte : 88 %, texte secondaire ≥ 4.5:1 sur tout fond */
180
+ --kz-glass-blur: 24px; /* Le flou de ce qui passe dessous */
181
+
182
+ /* Anneau de focus signature : net, décollé, dans un halo (focus-ring) */
183
+ --kz-ring-width: 2px; /* Épaisseur */
184
+ --kz-ring-offset: 2px; /* Écart */
185
+ --kz-ring-halo: 4px; /* Halo au-delà */
186
+
187
+ /* Hauteurs des contrôles ; resserrées sous [data-density=compact] */
188
+ --kz-control-sm: 32px; /* Petit bouton, onglet segmenté */
189
+ --kz-control-md: 40px; /* Bouton */
190
+ --kz-control-lg: 48px; /* Grand bouton */
191
+ --kz-control-field: 44px; /* Champ de saisie, sélecteur */
192
+
193
+ /* La griffe : le coin coupé à 45° (BRAND.md §6.1) ; --kz-cut-shape: round l'éteint pour une app */
194
+ --kz-cut-shape: bevel; /* La forme des coins signés : bevel (coupé) ou round */
195
+ --kz-cut-size: 10px; /* La taille de la coupe d'un contrôle */
135
196
  --kz-ease: cubic-bezier(0.16, 1, 0.3, 1); /* Courbe par défaut de la signature de mouvement */
197
+ --kz-ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); /* Ressort court : pression, bascule, sélection */
198
+
199
+ /* Micro-interactions ≤ 200 ms ; 0 ms en mouvement réduit */
200
+ --kz-duration-instant: 90ms; /* La compression d'un clic */
201
+ --kz-duration-fast: 150ms; /* Survol, couleur, ombre */
202
+ --kz-duration-base: 200ms; /* Une bascule, un indicateur qui glisse */
203
+
204
+ /* Typographie — les trois familles de @krizaka/fonts, chacune suivie de son repli aux métriques ajustées */
205
+ --kz-font-sans: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Texte : interface et lecture (Inter) */
206
+ --kz-font-display: "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", Inter, system-ui, sans-serif; /* Affichage : titres, chiffres (Plus Jakarta Sans) ; surchargé par le thème produit */
207
+ --kz-font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Code, identifiants, surtitres (JetBrains Mono) */
208
+
209
+ /* The hero of a home page */
210
+ --kz-type-display-2xl-size: 72px;
211
+ --kz-type-display-2xl-line-height: 1.02;
212
+ --kz-type-display-2xl-weight: 800;
213
+ --kz-type-display-2xl-tracking: -0.035em;
214
+
215
+ /* The hero of a page */
216
+ --kz-type-display-xl-size: 56px;
217
+ --kz-type-display-xl-line-height: 1.05;
218
+ --kz-type-display-xl-weight: 800;
219
+ --kz-type-display-xl-tracking: -0.03em;
220
+
221
+ /* The title of a page */
222
+ --kz-type-display-lg-size: 44px;
223
+ --kz-type-display-lg-line-height: 1.1;
224
+ --kz-type-display-lg-weight: 700;
225
+ --kz-type-display-lg-tracking: -0.025em;
226
+
227
+ /* The title of a section */
228
+ --kz-type-display-md-size: 34px;
229
+ --kz-type-display-md-line-height: 1.15;
230
+ --kz-type-display-md-weight: 700;
231
+ --kz-type-display-md-tracking: -0.02em;
232
+
233
+ /* A sub-section, a big figure */
234
+ --kz-type-display-sm-size: 26px;
235
+ --kz-type-display-sm-line-height: 1.2;
236
+ --kz-type-display-sm-weight: 700;
237
+ --kz-type-display-sm-tracking: -0.015em;
238
+
239
+ /* The title of a card or a dialog */
240
+ --kz-type-title-lg-size: 20px;
241
+ --kz-type-title-lg-line-height: 1.35;
242
+ --kz-type-title-lg-weight: 700;
243
+ --kz-type-title-lg-tracking: -0.01em;
244
+
245
+ /* The title of a list or a panel */
246
+ --kz-type-title-md-size: 17px;
247
+ --kz-type-title-md-line-height: 1.4;
248
+ --kz-type-title-md-weight: 600;
249
+ --kz-type-title-md-tracking: -0.012em;
250
+
251
+ /* The lead, a paragraph that stands out */
252
+ --kz-type-body-lg-size: 18px;
253
+ --kz-type-body-lg-line-height: 1.6;
254
+ --kz-type-body-lg-weight: 400;
255
+ --kz-type-body-lg-tracking: -0.014em;
256
+
257
+ /* Running text */
258
+ --kz-type-body-md-size: 16px;
259
+ --kz-type-body-md-line-height: 1.6;
260
+ --kz-type-body-md-weight: 400;
261
+ --kz-type-body-md-tracking: -0.011em;
262
+
263
+ /* Dense interface, secondary text */
264
+ --kz-type-body-sm-size: 14px;
265
+ --kz-type-body-sm-line-height: 1.5;
266
+ --kz-type-body-sm-weight: 400;
267
+ --kz-type-body-sm-tracking: -0.006em;
268
+
269
+ /* Captions, help, metadata */
270
+ --kz-type-caption-size: 12px;
271
+ --kz-type-caption-line-height: 1.4;
272
+ --kz-type-caption-weight: 500;
273
+ --kz-type-caption-tracking: 0em;
274
+
275
+ /* The overline of a section, uppercase */
276
+ --kz-type-overline-size: 11px;
277
+ --kz-type-overline-line-height: 1.3;
278
+ --kz-type-overline-weight: 600;
279
+ --kz-type-overline-tracking: 0.12em;
280
+
281
+ /* Code blocks */
282
+ --kz-type-mono-md-size: 14px;
283
+ --kz-type-mono-md-line-height: 1.6;
284
+ --kz-type-mono-md-weight: 400;
285
+ --kz-type-mono-md-tracking: 0em;
286
+
287
+ /* Identifiers, endpoints, versions */
288
+ --kz-type-mono-sm-size: 12px;
289
+ --kz-type-mono-sm-line-height: 1.5;
290
+ --kz-type-mono-sm-weight: 400;
291
+ --kz-type-mono-sm-tracking: 0em;
292
+ }
293
+
294
+ /* Densité compacte : [data-density="compact"] sur un sous-arbre resserre les contrôles (tableau dense, console). */
295
+ [data-density="compact"] {
296
+ --kz-control-sm: 28px;
297
+ --kz-control-md: 34px;
298
+ --kz-control-lg: 40px;
299
+ --kz-control-field: 36px;
300
+ }
136
301
 
137
- /* Typographie */
138
- --kz-font-sans: Inter, system-ui, sans-serif; /* Interface et texte courant */
139
- --kz-font-mono: "JetBrains Mono", ui-monospace, monospace; /* Code, montants alignés */
302
+ /* Mouvement réduit : les micro-interactions deviennent instantanées. */
303
+ @media (prefers-reduced-motion: reduce) {
304
+ :root {
305
+ --kz-duration-instant: 0ms;
306
+ --kz-duration-fast: 0ms;
307
+ --kz-duration-base: 0ms;
308
+ }
140
309
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@krizaka/tokens",
3
- "version": "2.3.0",
3
+ "version": "2.5.0",
4
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",
@@ -73,7 +73,7 @@
73
73
  {
74
74
  "name": "./tokens.css",
75
75
  "path": "dist/tokens.css",
76
- "limit": "2.5 kB",
76
+ "limit": "4.3 kB",
77
77
  "gzip": true,
78
78
  "rolldown": false
79
79
  },
@@ -94,13 +94,13 @@
94
94
  {
95
95
  "name": ".",
96
96
  "path": "dist/index.js",
97
- "limit": "2 kB",
97
+ "limit": "3.5 kB",
98
98
  "gzip": true
99
99
  },
100
100
  {
101
101
  "name": "./native",
102
102
  "path": "dist/native.js",
103
- "limit": "1.5 kB",
103
+ "limit": "1.85 kB",
104
104
  "gzip": true
105
105
  }
106
106
  ],