@krizaka/tokens 2.4.0 → 2.6.0

package/BRAND.md

@@ -140,3 +140,47 @@ Rules (also `rules` of `@krizaka/fonts`, on krizaka.com/docs/ui/typography): dis
 display from 20 px at 600–800, text from 12 px at 400–700; one display line per block; tabular figures for amounts; the
 scale, not one-off sizes; products may override the display role only.
 
+
+## 6. Surfaces & materials — the signature of the components
+
+Session DSV (2026-10). The primitives had the right roles but read flat and interchangeable. The Krizaka signature is
+one idea, applied everywhere and always in tokens: **light comes from above.**
+
+| Lever | Rule | Tokens → utilities |
+| :-- | :-- | :-- |
+| **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` |
+| **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` |
+| **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` |
+| **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` |
+| **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` |
+| **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` |
+| **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-*` |
+| **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]` |
+| **Density** | Comfortable by default; `data-density="compact"` on a subtree tightens every control (a console, a dense table). | `--kz-control-*` |
+| **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` |
+
+Restraint is part of it: a page has one spotlight card, one glowing call to action; the rest is quiet material.
+
+### 6.1 The griffe — the 45° cut corner
+
+The angle of the hexagon, the chamfer of the icons: **the cut corner is the claw mark of the brand.** It is
+`corner-shape: bevel` (the border, the edge light, the shadow and the focus ring all follow it; browsers without
+`corner-shape` show the rounded corner), sized by `--kz-cut-size` (10 px on a control), shaped by `--kz-cut-shape`.
+
+| Where | How |
+| :-- | :-- |
+| **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. |
+| **The status badge** | `Badge` `success` / `warning` / `danger` are cut by default (`shape="auto"`); `shape="cut"` on any tone. |
+| **The card that matters** | `Card` `variant="spotlight"` has its top-right corner cut; `cut` on any card. |
+| **The active tab** | The raised segment of `Tabs variant="segmented"` and the light of `pills` are cut. |
+| **The focused field** | A field's top-right corner cuts itself when it has the focus. |
+| **The toast** | Its top-right corner is cut. |
+
+Sparingly: the griffe marks **what matters on the screen** — the action, the state, the chosen — never every box. An app
+that must not wear it (a third-party embed) sets `--kz-cut-shape: round`; everything returns to rounded corners.
+React Native has no `corner-shape`: the native primitives keep their rounded corners, and `cut.size` of
+`@krizaka/tokens/native` is there for a drawn shape (react-native-svg) where a product needs one.
+
+Captures of the material, the three brands in dark and light, are in the pull request that introduced it
+(krizaka/krizaka-ui, "signature visual language"); the living reference is the showcase at the top of
+[krizaka.com/docs/ui](https://www.krizaka.com/docs/ui).

package/README.md

@@ -118,6 +118,23 @@ under every product override.
 | `--kz-font-display` | `fontDisplay` | Headings; a product theme may override it | → `font-sans` | → `font-sans` |
 | `--kz-font-mono` | `fontMono` | Code, aligned amounts | `"JetBrains Mono", ui-monospace, monospace` | = dark |
 
+### The material (BRAND.md §6)
+
+| Token | Key | Usage | Dark | Light |
+| :-- | :-- | :-- | :-- | :-- |
+| `--kz-radius-xs`, `--kz-radius-2xl` | `radiusXs`, `radius2xl` | Checkbox, key, cut badge · sheet | `6px`, `28px` | = dark |
+| `--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% / …)` |
+| `--kz-surface-sheen` | `surfaceSheen` | The top of a raised surface (`bg-sheen`) | `hsl(0 0% 100% / 0.045)` | `hsl(0 0% 100% / 0.7)` |
+| `--kz-fill-shade` | `fillShade` | The bottom of an accent or status fill (`bg-fill-shade`) | `hsl(0 0% 0% / 0.12)` | = dark |
+| `--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` |
+| `--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)` |
+| `--kz-success-soft` · `warning-soft` · `danger-soft` | `successSoft`… | Status tints: badges, alerts, rows | `/ 0.14` | `/ 0.10–0.12` |
+| `--kz-ring-width` · `-offset` · `-halo` | `ringWidth`… | The signature focus ring (`focus-ring`) | `2px` · `2px` · `4px` | = dark |
+| `--kz-control-sm` · `md` · `lg` · `field` | `controlSm`… | Control heights; `[data-density="compact"]` tightens them | `32` · `40` · `48` · `44px` | compact `28` · `34` · `40` · `36px` |
+| `--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 |
+| `--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 |
+| `--kz-duration-instant` · `fast` · `base` | `durationFast`… | Micro-interactions ≤ 200 ms; **0 ms under `prefers-reduced-motion`**; native `motion.duration` | `90` · `150` · `200ms` | = dark |
+
 Contrast is **tested**, not assumed: `pnpm turbo run check` fails if `text-primary` / `text-secondary` drop under 4.5:1 or
 `text-muted` under 3:1 on any surface, or `on-accent` under 4.5:1 on the accent, in either theme (WCAG 2.x).
 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

@@ -26,24 +26,53 @@ export declare const tokens: {
   readonly brandGradientTo: "var(--kz-brand-gradient-to)";
   readonly success: "var(--kz-success)";
   readonly successText: "var(--kz-success-text)";
+  readonly successSoft: "var(--kz-success-soft)";
   readonly warning: "var(--kz-warning)";
   readonly warningText: "var(--kz-warning-text)";
+  readonly warningSoft: "var(--kz-warning-soft)";
   readonly danger: "var(--kz-danger)";
   readonly dangerText: "var(--kz-danger-text)";
+  readonly dangerSoft: "var(--kz-danger-soft)";
   readonly info: "var(--kz-info)";
   readonly infoText: "var(--kz-info-text)";
   readonly scrim: "var(--kz-scrim)";
   readonly scrimStrong: "var(--kz-scrim-strong)";
   readonly overlay: "var(--kz-overlay)";
+  readonly radiusXs: "var(--kz-radius-xs)";
   readonly radiusSm: "var(--kz-radius-sm)";
   readonly radiusMd: "var(--kz-radius-md)";
   readonly radiusLg: "var(--kz-radius-lg)";
   readonly radiusXl: "var(--kz-radius-xl)";
+  readonly radius2xl: "var(--kz-radius-2xl)";
   readonly radiusFull: "var(--kz-radius-full)";
   readonly shadowSm: "var(--kz-shadow-sm)";
   readonly shadowMd: "var(--kz-shadow-md)";
   readonly shadowLg: "var(--kz-shadow-lg)";
+  readonly shadowRaised: "var(--kz-shadow-raised)";
+  readonly shadowFloating: "var(--kz-shadow-floating)";
+  readonly shadowOverlay: "var(--kz-shadow-overlay)";
+  readonly surfaceSheen: "var(--kz-surface-sheen)";
+  readonly fillShade: "var(--kz-fill-shade)";
+  readonly edgeLight: "var(--kz-edge-light)";
+  readonly edgeOnFill: "var(--kz-edge-on-fill)";
+  readonly edgeWell: "var(--kz-edge-well)";
+  readonly glassBg: "var(--kz-glass-bg)";
+  readonly glassBorder: "var(--kz-glass-border)";
+  readonly glassBlur: "var(--kz-glass-blur)";
+  readonly ringWidth: "var(--kz-ring-width)";
+  readonly ringOffset: "var(--kz-ring-offset)";
+  readonly ringHalo: "var(--kz-ring-halo)";
+  readonly controlSm: "var(--kz-control-sm)";
+  readonly controlMd: "var(--kz-control-md)";
+  readonly controlLg: "var(--kz-control-lg)";
+  readonly controlField: "var(--kz-control-field)";
+  readonly cutShape: "var(--kz-cut-shape)";
+  readonly cutSize: "var(--kz-cut-size)";
   readonly ease: "var(--kz-ease)";
+  readonly easeSpring: "var(--kz-ease-spring)";
+  readonly durationInstant: "var(--kz-duration-instant)";
+  readonly durationFast: "var(--kz-duration-fast)";
+  readonly durationBase: "var(--kz-duration-base)";
   readonly fontSans: "var(--kz-font-sans)";
   readonly fontText: "var(--kz-font-text)";
   readonly fontDisplay: "var(--kz-font-display)";

package/dist/index.js

@@ -26,24 +26,53 @@ export const tokens = /* @__PURE__ */ Object.freeze({
   "brandGradientTo": "var(--kz-brand-gradient-to)",
   "success": "var(--kz-success)",
   "successText": "var(--kz-success-text)",
+  "successSoft": "var(--kz-success-soft)",
   "warning": "var(--kz-warning)",
   "warningText": "var(--kz-warning-text)",
+  "warningSoft": "var(--kz-warning-soft)",
   "danger": "var(--kz-danger)",
   "dangerText": "var(--kz-danger-text)",
+  "dangerSoft": "var(--kz-danger-soft)",
   "info": "var(--kz-info)",
   "infoText": "var(--kz-info-text)",
   "scrim": "var(--kz-scrim)",
   "scrimStrong": "var(--kz-scrim-strong)",
   "overlay": "var(--kz-overlay)",
+  "radiusXs": "var(--kz-radius-xs)",
   "radiusSm": "var(--kz-radius-sm)",
   "radiusMd": "var(--kz-radius-md)",
   "radiusLg": "var(--kz-radius-lg)",
   "radiusXl": "var(--kz-radius-xl)",
+  "radius2xl": "var(--kz-radius-2xl)",
   "radiusFull": "var(--kz-radius-full)",
   "shadowSm": "var(--kz-shadow-sm)",
   "shadowMd": "var(--kz-shadow-md)",
   "shadowLg": "var(--kz-shadow-lg)",
+  "shadowRaised": "var(--kz-shadow-raised)",
+  "shadowFloating": "var(--kz-shadow-floating)",
+  "shadowOverlay": "var(--kz-shadow-overlay)",
+  "surfaceSheen": "var(--kz-surface-sheen)",
+  "fillShade": "var(--kz-fill-shade)",
+  "edgeLight": "var(--kz-edge-light)",
+  "edgeOnFill": "var(--kz-edge-on-fill)",
+  "edgeWell": "var(--kz-edge-well)",
+  "glassBg": "var(--kz-glass-bg)",
+  "glassBorder": "var(--kz-glass-border)",
+  "glassBlur": "var(--kz-glass-blur)",
+  "ringWidth": "var(--kz-ring-width)",
+  "ringOffset": "var(--kz-ring-offset)",
+  "ringHalo": "var(--kz-ring-halo)",
+  "controlSm": "var(--kz-control-sm)",
+  "controlMd": "var(--kz-control-md)",
+  "controlLg": "var(--kz-control-lg)",
+  "controlField": "var(--kz-control-field)",
+  "cutShape": "var(--kz-cut-shape)",
+  "cutSize": "var(--kz-cut-size)",
   "ease": "var(--kz-ease)",
+  "easeSpring": "var(--kz-ease-spring)",
+  "durationInstant": "var(--kz-duration-instant)",
+  "durationFast": "var(--kz-duration-fast)",
+  "durationBase": "var(--kz-duration-base)",
   "fontSans": "var(--kz-font-sans)",
   "fontText": "var(--kz-font-text)",
   "fontDisplay": "var(--kz-font-display)",
@@ -132,24 +161,53 @@ export const values = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Obje
   "brandGradientTo": "hsl(240 6% 5%)",
   "success": "hsl(160 84% 39%)",
   "successText": "hsl(158 64% 52%)",
+  "successSoft": "hsl(160 84% 39% / 0.14)",
   "warning": "hsl(38 92% 50%)",
   "warningText": "hsl(38 92% 55%)",
+  "warningSoft": "hsl(38 92% 50% / 0.14)",
   "danger": "hsl(0 84% 60%)",
   "dangerText": "hsl(0 91% 71%)",
+  "dangerSoft": "hsl(0 84% 60% / 0.14)",
   "info": "hsl(217 92% 53%)",
   "infoText": "hsl(217 92% 68%)",
   "scrim": "hsl(0 0% 0% / 0.60)",
   "scrimStrong": "hsl(0 0% 0% / 0.80)",
   "overlay": "hsl(0 0% 0% / 0.70)",
+  "radiusXs": "6px",
   "radiusSm": "8px",
   "radiusMd": "12px",
   "radiusLg": "16px",
   "radiusXl": "20px",
+  "radius2xl": "28px",
   "radiusFull": "9999px",
   "shadowSm": "0 1px 3px hsl(0 0% 0% / 0.12), 0 1px 2px hsl(0 0% 0% / 0.06)",
   "shadowMd": "0 4px 12px hsl(0 0% 0% / 0.15), 0 2px 4px hsl(0 0% 0% / 0.08)",
   "shadowLg": "0 8px 24px hsl(0 0% 0% / 0.18), 0 4px 8px hsl(0 0% 0% / 0.08)",
+  "shadowRaised": "0 1px 2px hsl(240 30% 2% / 0.45), 0 2px 6px -2px hsl(240 30% 2% / 0.3)",
+  "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)",
+  "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)",
+  "surfaceSheen": "hsl(0 0% 100% / 0.045)",
+  "fillShade": "hsl(0 0% 0% / 0.12)",
+  "edgeLight": "hsl(0 0% 100% / 0.07)",
+  "edgeOnFill": "hsl(0 0% 100% / 0.22)",
+  "edgeWell": "hsl(240 30% 2% / 0.5)",
+  "glassBg": "hsl(240 5% 12% / 0.88)",
+  "glassBorder": "hsl(0 0% 100% / 0.1)",
+  "glassBlur": "24px",
+  "ringWidth": "2px",
+  "ringOffset": "2px",
+  "ringHalo": "4px",
+  "controlSm": "32px",
+  "controlMd": "40px",
+  "controlLg": "48px",
+  "controlField": "44px",
+  "cutShape": "bevel",
+  "cutSize": "10px",
   "ease": "cubic-bezier(0.16, 1, 0.3, 1)",
+  "easeSpring": "cubic-bezier(0.34, 1.36, 0.64, 1)",
+  "durationInstant": "90ms",
+  "durationFast": "150ms",
+  "durationBase": "200ms",
   "fontSans": "Inter, \"Inter Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
   "fontText": "Inter, \"Inter Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
   "fontDisplay": "\"Plus Jakarta Sans\", \"Plus Jakarta Sans Fallback\", Inter, system-ui, sans-serif",
@@ -235,24 +293,53 @@ export const values = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Obje
   "brandGradientTo": "hsl(0 0% 98%)",
   "success": "hsl(160 84% 39%)",
   "successText": "hsl(160 84% 24%)",
+  "successSoft": "hsl(160 84% 39% / 0.1)",
   "warning": "hsl(38 92% 50%)",
   "warningText": "hsl(32 95% 30%)",
+  "warningSoft": "hsl(38 92% 50% / 0.12)",
   "danger": "hsl(0 84% 60%)",
   "dangerText": "hsl(0 72% 40%)",
+  "dangerSoft": "hsl(0 84% 60% / 0.1)",
   "info": "hsl(217 92% 50%)",
   "infoText": "hsl(217 92% 42%)",
   "scrim": "hsl(0 0% 0% / 0.60)",
   "scrimStrong": "hsl(0 0% 0% / 0.80)",
   "overlay": "hsl(0 0% 0% / 0.70)",
+  "radiusXs": "6px",
   "radiusSm": "8px",
   "radiusMd": "12px",
   "radiusLg": "16px",
   "radiusXl": "20px",
+  "radius2xl": "28px",
   "radiusFull": "9999px",
   "shadowSm": "0 1px 3px hsl(240 6% 0% / 0.06), 0 1px 2px hsl(240 6% 0% / 0.04)",
   "shadowMd": "0 4px 12px hsl(240 6% 0% / 0.08), 0 2px 4px hsl(240 6% 0% / 0.04)",
   "shadowLg": "0 8px 24px hsl(240 6% 0% / 0.10), 0 4px 8px hsl(240 6% 0% / 0.05)",
+  "shadowRaised": "0 1px 2px hsl(232 25% 25% / 0.08), 0 2px 6px -2px hsl(232 25% 25% / 0.08)",
+  "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)",
+  "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)",
+  "surfaceSheen": "hsl(0 0% 100% / 0.7)",
+  "fillShade": "hsl(0 0% 0% / 0.12)",
+  "edgeLight": "hsl(0 0% 100% / 0.9)",
+  "edgeOnFill": "hsl(0 0% 100% / 0.22)",
+  "edgeWell": "hsl(232 25% 25% / 0.08)",
+  "glassBg": "hsl(0 0% 100% / 0.88)",
+  "glassBorder": "hsl(240 6% 0% / 0.08)",
+  "glassBlur": "24px",
+  "ringWidth": "2px",
+  "ringOffset": "2px",
+  "ringHalo": "4px",
+  "controlSm": "32px",
+  "controlMd": "40px",
+  "controlLg": "48px",
+  "controlField": "44px",
+  "cutShape": "bevel",
+  "cutSize": "10px",
   "ease": "cubic-bezier(0.16, 1, 0.3, 1)",
+  "easeSpring": "cubic-bezier(0.34, 1.36, 0.64, 1)",
+  "durationInstant": "90ms",
+  "durationFast": "150ms",
+  "durationBase": "200ms",
   "fontSans": "Inter, \"Inter Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
   "fontText": "Inter, \"Inter Fallback\", system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif",
   "fontDisplay": "\"Plus Jakarta Sans\", \"Plus Jakarta Sans Fallback\", Inter, system-ui, sans-serif",

package/dist/native.d.ts

@@ -26,25 +26,37 @@ export type Theme = {
   readonly brandGradientTo: string;
   readonly success: string;
   readonly successText: string;
+  readonly successSoft: string;
   readonly warning: string;
   readonly warningText: string;
+  readonly warningSoft: string;
   readonly danger: string;
   readonly dangerText: string;
+  readonly dangerSoft: string;
   readonly info: string;
   readonly infoText: string;
   readonly scrim: string;
   readonly scrimStrong: string;
   readonly overlay: string;
+  readonly surfaceSheen: string;
+  readonly fillShade: string;
+  readonly edgeLight: string;
+  readonly edgeOnFill: string;
+  readonly edgeWell: string;
+  readonly glassBg: string;
+  readonly glassBorder: string;
 };
 export type ThemeName = "dark" | "light";
 /** Colour roles per theme, resolved for React Native (`#rrggbb`, `rgba()` when translucent). */
 export declare const themes: { readonly dark: Theme; readonly light: Theme };
 /** Corner radii, in dp. */
 export declare const radius: {
+  readonly xs: 6;
   readonly sm: 8;
   readonly md: 12;
   readonly lg: 16;
   readonly xl: 20;
+  readonly "2xl": 28;
   readonly full: 9999;
 };
 /** Font families: the first family of each web stack (React Native takes a single name). */
@@ -54,8 +66,16 @@ export declare const typography: {
   readonly display: "Plus Jakarta Sans";
   readonly mono: "JetBrains Mono";
 };
-/** Motion: the cubic-bezier control points (`Easing.bezier(...motion.ease)`). */
-export declare const motion: { readonly ease: readonly [number, number, number, number] };
+/** Motion: the ease and the spring (cubic-bezier control points) and the micro-interaction durations, in ms. */
+export declare const motion: {
+  readonly ease: readonly [number, number, number, number];
+  readonly spring: readonly [number, number, number, number];
+  readonly duration: {
+  readonly instant: 90;
+  readonly fast: 150;
+  readonly base: 200;
+};
+};
 /** A step of the type scale, in dp. */
 export interface NativeTypeStep {
   readonly role: "display" | "text" | "mono";
@@ -66,6 +86,19 @@ export interface NativeTypeStep {
 }
 /** The type scale in dp (React Native): fontSize, lineHeight and letterSpacing absolute, the role whose family sets it. */
 export declare const typeScale: { readonly [K in "display2xl" | "displayXl" | "displayLg" | "displayMd" | "displaySm" | "titleLg" | "titleMd" | "bodyLg" | "bodyMd" | "bodySm" | "caption" | "overline" | "monoMd" | "monoSm"]: NativeTypeStep };
+/** The shadows of one theme, as React Native `boxShadow` strings. */
+export type Shadows = {
+  readonly sm: string;
+  readonly md: string;
+  readonly lg: string;
+  readonly raised: string;
+  readonly floating: string;
+  readonly overlay: string;
+};
+/** The shadows per theme as React Native `boxShadow` strings (RN ≥ 0.76). */
+export declare const shadows: { readonly dark: Shadows; readonly light: Shadows };
+/** The griffe: the size of the 45° cut corner of a control, in dp. */
+export declare const cut: { readonly size: number };
 
 /** A Krizaka brand. */
 export type BrandId = "krizaka" | "orazaka" | "orochia";

package/dist/native.js

@@ -26,15 +26,25 @@ export const themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Obje
   "brandGradientTo": "#0c0c0e",
   "success": "#10b77f",
   "successText": "#36d399",
+  "successSoft": "rgba(16,183,127,0.14)",
   "warning": "#f59f0a",
   "warningText": "#f6a823",
+  "warningSoft": "rgba(245,159,10,0.14)",
   "danger": "#ef4343",
   "dangerText": "#f87272",
+  "dangerSoft": "rgba(239,67,67,0.14)",
   "info": "#196df5",
   "infoText": "#629cf8",
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
-  "overlay": "rgba(0,0,0,0.7)"
+  "overlay": "rgba(0,0,0,0.7)",
+  "surfaceSheen": "rgba(255,255,255,0.045)",
+  "fillShade": "rgba(0,0,0,0.12)",
+  "edgeLight": "rgba(255,255,255,0.07)",
+  "edgeOnFill": "rgba(255,255,255,0.22)",
+  "edgeWell": "rgba(4,4,7,0.5)",
+  "glassBg": "rgba(29,29,32,0.88)",
+  "glassBorder": "rgba(255,255,255,0.1)"
 }), light: /* @__PURE__ */ Object.freeze({
   "surface0": "#fafafa",
   "surface1": "#ffffff",
@@ -60,23 +70,35 @@ export const themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Obje
   "brandGradientTo": "#fafafa",
   "success": "#10b77f",
   "successText": "#0a714e",
+  "successSoft": "rgba(16,183,127,0.1)",
   "warning": "#f59f0a",
   "warningText": "#955104",
+  "warningSoft": "rgba(245,159,10,0.12)",
   "danger": "#ef4343",
   "dangerText": "#af1d1d",
+  "dangerSoft": "rgba(239,67,67,0.1)",
   "info": "#0a64f5",
   "infoText": "#0954ce",
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
-  "overlay": "rgba(0,0,0,0.7)"
+  "overlay": "rgba(0,0,0,0.7)",
+  "surfaceSheen": "rgba(255,255,255,0.7)",
+  "fillShade": "rgba(0,0,0,0.12)",
+  "edgeLight": "rgba(255,255,255,0.9)",
+  "edgeOnFill": "rgba(255,255,255,0.22)",
+  "edgeWell": "rgba(48,52,80,0.08)",
+  "glassBg": "rgba(255,255,255,0.88)",
+  "glassBorder": "rgba(0,0,0,0.08)"
 }) });
 
 /** Corner radii, in dp. */
 export const radius = /* @__PURE__ */ Object.freeze({
+  "xs": 6,
   "sm": 8,
   "md": 12,
   "lg": 16,
   "xl": 20,
+  "2xl": 28,
   "full": 9999
 });
 
@@ -88,8 +110,11 @@ export const typography = /* @__PURE__ */ Object.freeze({
   "mono": "JetBrains Mono"
 });
 
-/** Motion: the cubic-bezier control points (`Easing.bezier(...motion.ease)`). */
-export const motion = /* @__PURE__ */ Object.freeze({ ease: /* @__PURE__ */ Object.freeze([0.16,1,0.3,1]) });
+/**
+ * Motion: the cubic-bezier control points (`Easing.bezier(...motion.ease)`), the short spring of what answers the hand
+ * (`motion.spring`) and the micro-interaction durations in ms (`motion.duration.fast`) — 0 when the system reduces motion.
+ */
+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}) });
 
 /**
  * The type scale in dp: fontSize, lineHeight and letterSpacing absolute (React Native has no em), fontWeight as a string,
@@ -196,6 +221,31 @@ export const typeScale = /* @__PURE__ */ Object.freeze({
   }
 });
 
+/**
+ * The shadows per theme as React Native `boxShadow` strings (RN ≥ 0.76): `raised` (a button, a card), `floating`
+ * (a menu, a popover), `overlay` (a sheet, a toast) — ink-tinted, several layers, as on the web.
+ */
+export const shadows = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze({
+  "sm": "0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.06)",
+  "md": "0 4px 12px 0 rgba(0,0,0,0.15), 0 2px 4px 0 rgba(0,0,0,0.08)",
+  "lg": "0 8px 24px 0 rgba(0,0,0,0.18), 0 4px 8px 0 rgba(0,0,0,0.08)",
+  "raised": "0 1px 2px 0 rgba(4,4,7,0.45), 0 2px 6px -2px rgba(4,4,7,0.3)",
+  "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)",
+  "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)"
+}), light: /* @__PURE__ */ Object.freeze({
+  "sm": "0 1px 3px 0 rgba(0,0,0,0.06), 0 1px 2px 0 rgba(0,0,0,0.04)",
+  "md": "0 4px 12px 0 rgba(0,0,0,0.08), 0 2px 4px 0 rgba(0,0,0,0.04)",
+  "lg": "0 8px 24px 0 rgba(0,0,0,0.1), 0 4px 8px 0 rgba(0,0,0,0.05)",
+  "raised": "0 1px 2px 0 rgba(48,52,80,0.08), 0 2px 6px -2px rgba(48,52,80,0.08)",
+  "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)",
+  "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)"
+}) });
+
+/** The griffe (BRAND.md §6.1): the size of the 45° cut corner of a control, in dp. */
+export const cut = /* @__PURE__ */ Object.freeze({
+  "size": 10
+});
+
 /** The brand themes as ThemeProvider overrides (`overrides={brands.orazaka}`): the accent family per theme. */
 export const brands = /* @__PURE__ */ Object.freeze({
   "krizaka": {

package/dist/tokens.css

@@ -35,15 +35,30 @@
   --kz-brand-gradient-via: hsl(232 24% 7%); /* Section : la teinte intermédiaire */
   --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 */
   --kz-success-text: hsl(158 64% 52%); /* Statut succès en texte (petit texte, libellé) : ≥ 4.5:1 sur chaque surface */
+  --kz-success-soft: hsl(160 84% 39% / 0.14); /* Fond teinté success (texte primaire ≥ 4.5:1) */
   --kz-warning-text: hsl(38 92% 55%); /* Statut avertissement en texte : ≥ 4.5:1 sur chaque surface */
+  --kz-warning-soft: hsl(38 92% 50% / 0.14); /* Fond teinté warning (texte primaire ≥ 4.5:1) */
   --kz-danger-text: hsl(0 91% 71%); /* Statut erreur en texte (message d'erreur, compte à rebours urgent) : ≥ 4.5:1 sur chaque surface */
+  --kz-danger-soft: hsl(0 84% 60% / 0.14); /* Fond teinté danger (texte primaire ≥ 4.5:1) */
   --kz-info: var(--kz-accent); /* Statut : information */
   --kz-info-text: var(--kz-accent-text); /* Statut information en texte : l'accent en texte par défaut (≥ 4.5:1) */
 
-  /* Ombres (web uniquement) */
+  /* Ombres (web uniquement) ; raised/floating/overlay : teintées d'encre, multi-couches */
   --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 */
   --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 */
   --kz-shadow-lg: 0 8px 24px hsl(0 0% 0% / 0.18), 0 4px 8px hsl(0 0% 0% / 0.08); /* Dialogue, feuille */
+  --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 */
+  --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 */
+  --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 */
+  --kz-surface-sheen: hsl(0 0% 100% / 0.045); /* Reflet en haut d'une surface (bg-sheen) */
+
+  /* Arêtes : un filet intérieur d'1 px */
+  --kz-edge-light: hsl(0 0% 100% / 0.07); /* Arête lumineuse du haut (inset-shadow-edge) */
+  --kz-edge-well: hsl(240 30% 2% / 0.5); /* Ombre intérieure d'un puits : champ, piste (inset-shadow-well) */
+
+  /* Verre dépoli de ce qui flotte : 88 %, texte secondaire ≥ 4.5:1 sur tout fond */
+  --kz-glass-bg: hsl(240 5% 12% / 0.88); /* Le fond du verre */
+  --kz-glass-border: hsl(0 0% 100% / 0.1); /* Le contour du verre */
 
   /* Typographie — les trois familles de @krizaka/fonts, chacune suivie de son repli aux métriques ajustées */
   --kz-font-text: var(--kz-font-sans); /* Alias de sans : le rôle texte */
@@ -70,11 +85,22 @@ html.light {
   --kz-brand-gradient-from: hsl(214 95% 93%); /* Section : la teinte de départ (haut de section, halo) */
   --kz-brand-gradient-via: hsl(220 60% 97%); /* Section : la teinte intermédiaire */
   --kz-success-text: hsl(160 84% 24%); /* Statut succès en texte (petit texte, libellé) : ≥ 4.5:1 sur chaque surface */
+  --kz-success-soft: hsl(160 84% 39% / 0.1); /* Fond teinté success (texte primaire ≥ 4.5:1) */
   --kz-warning-text: hsl(32 95% 30%); /* Statut avertissement en texte : ≥ 4.5:1 sur chaque surface */
+  --kz-warning-soft: hsl(38 92% 50% / 0.12); /* Fond teinté warning (texte primaire ≥ 4.5:1) */
   --kz-danger-text: hsl(0 72% 40%); /* Statut erreur en texte (message d'erreur, compte à rebours urgent) : ≥ 4.5:1 sur chaque surface */
+  --kz-danger-soft: hsl(0 84% 60% / 0.1); /* Fond teinté danger (texte primaire ≥ 4.5:1) */
   --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 */
   --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 */
   --kz-shadow-lg: 0 8px 24px hsl(240 6% 0% / 0.10), 0 4px 8px hsl(240 6% 0% / 0.05); /* Dialogue, feuille */
+  --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 */
+  --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 */
+  --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 */
+  --kz-surface-sheen: hsl(0 0% 100% / 0.7); /* Reflet en haut d'une surface (bg-sheen) */
+  --kz-edge-light: hsl(0 0% 100% / 0.9); /* Arête lumineuse du haut (inset-shadow-edge) */
+  --kz-edge-well: hsl(232 25% 25% / 0.08); /* Ombre intérieure d'un puits : champ, piste (inset-shadow-well) */
+  --kz-glass-bg: hsl(0 0% 100% / 0.88); /* Le fond du verre */
+  --kz-glass-border: hsl(240 6% 0% / 0.08); /* Le contour du verre */
 }
 
 /* `.theme-light` : les valeurs claires, alias compris, sur un sous-arbre — un aperçu reste clair dans une page
@@ -102,13 +128,24 @@ html.light {
   --kz-brand-gradient-via: hsl(220 60% 97%); /* Section : la teinte intermédiaire */
   --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 */
   --kz-success-text: hsl(160 84% 24%); /* Statut succès en texte (petit texte, libellé) : ≥ 4.5:1 sur chaque surface */
+  --kz-success-soft: hsl(160 84% 39% / 0.1); /* Fond teinté success (texte primaire ≥ 4.5:1) */
   --kz-warning-text: hsl(32 95% 30%); /* Statut avertissement en texte : ≥ 4.5:1 sur chaque surface */
+  --kz-warning-soft: hsl(38 92% 50% / 0.12); /* Fond teinté warning (texte primaire ≥ 4.5:1) */
   --kz-danger-text: hsl(0 72% 40%); /* Statut erreur en texte (message d'erreur, compte à rebours urgent) : ≥ 4.5:1 sur chaque surface */
+  --kz-danger-soft: hsl(0 84% 60% / 0.1); /* Fond teinté danger (texte primaire ≥ 4.5:1) */
   --kz-info: var(--kz-accent); /* Statut : information */
   --kz-info-text: var(--kz-accent-text); /* Statut information en texte : l'accent en texte par défaut (≥ 4.5:1) */
   --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 */
   --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 */
   --kz-shadow-lg: 0 8px 24px hsl(240 6% 0% / 0.10), 0 4px 8px hsl(240 6% 0% / 0.05); /* Dialogue, feuille */
+  --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 */
+  --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 */
+  --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 */
+  --kz-surface-sheen: hsl(0 0% 100% / 0.7); /* Reflet en haut d'une surface (bg-sheen) */
+  --kz-edge-light: hsl(0 0% 100% / 0.9); /* Arête lumineuse du haut (inset-shadow-edge) */
+  --kz-edge-well: hsl(232 25% 25% / 0.08); /* Ombre intérieure d'un puits : champ, piste (inset-shadow-well) */
+  --kz-glass-bg: hsl(0 0% 100% / 0.88); /* Le fond du verre */
+  --kz-glass-border: hsl(240 6% 0% / 0.08); /* Le contour du verre */
   --kz-font-text: var(--kz-font-sans); /* Alias de sans : le rôle texte */
 }
 
@@ -127,12 +164,42 @@ html.light {
   --kz-overlay: hsl(0 0% 0% / 0.70); /* fond d'un dialogue */
 
   /* Rayons */
+  --kz-radius-xs: 6px; /* Case à cocher, touche, badge coupé */
   --kz-radius-sm: 8px; /* Champ, puce */
   --kz-radius-md: 12px; /* Bouton, menu */
   --kz-radius-lg: 16px; /* Carte */
   --kz-radius-xl: 20px; /* Dialogue, feuille */
+  --kz-radius-2xl: 28px; /* Feuille, grande surface flottante */
   --kz-radius-full: 9999px; /* Pastille, avatar */
+  --kz-fill-shade: hsl(0 0% 0% / 0.12); /* Bas d'un aplat (bg-fill-shade), on-accent ≥ 4.5:1 */
+
+  /* Arêtes : un filet intérieur d'1 px */
+  --kz-edge-on-fill: hsl(0 0% 100% / 0.22); /* Arête lumineuse sur un aplat */
+
+  /* Verre dépoli de ce qui flotte : 88 %, texte secondaire ≥ 4.5:1 sur tout fond */
+  --kz-glass-blur: 24px; /* Le flou de ce qui passe dessous */
+
+  /* Anneau de focus signature : net, décollé, dans un halo (focus-ring) */
+  --kz-ring-width: 2px; /* Épaisseur */
+  --kz-ring-offset: 2px; /* Écart */
+  --kz-ring-halo: 4px; /* Halo au-delà */
+
+  /* Hauteurs des contrôles ; resserrées sous [data-density=compact] */
+  --kz-control-sm: 32px; /* Petit bouton, onglet segmenté */
+  --kz-control-md: 40px; /* Bouton */
+  --kz-control-lg: 48px; /* Grand bouton */
+  --kz-control-field: 44px; /* Champ de saisie, sélecteur */
+
+  /* La griffe : le coin coupé à 45° (BRAND.md §6.1) ; --kz-cut-shape: round l'éteint pour une app */
+  --kz-cut-shape: bevel; /* La forme des coins signés : bevel (coupé) ou round */
+  --kz-cut-size: 10px; /* La taille de la coupe d'un contrôle */
   --kz-ease: cubic-bezier(0.16, 1, 0.3, 1); /* Courbe par défaut de la signature de mouvement */
+  --kz-ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); /* Ressort court : pression, bascule, sélection */
+
+  /* Micro-interactions ≤ 200 ms ; 0 ms en mouvement réduit */
+  --kz-duration-instant: 90ms; /* La compression d'un clic */
+  --kz-duration-fast: 150ms; /* Survol, couleur, ombre */
+  --kz-duration-base: 200ms; /* Une bascule, un indicateur qui glisse */
 
   /* Typographie — les trois familles de @krizaka/fonts, chacune suivie de son repli aux métriques ajustées */
   --kz-font-sans: Inter, "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Texte : interface et lecture (Inter) */
@@ -223,3 +290,20 @@ html.light {
   --kz-type-mono-sm-weight: 400;
   --kz-type-mono-sm-tracking: 0em;
 }
+
+/* Densité compacte : [data-density="compact"] sur un sous-arbre resserre les contrôles (tableau dense, console). */
+[data-density="compact"] {
+  --kz-control-sm: 28px;
+  --kz-control-md: 34px;
+  --kz-control-lg: 40px;
+  --kz-control-field: 36px;
+}
+
+/* Mouvement réduit : les micro-interactions deviennent instantanées. */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --kz-duration-instant: 0ms;
+    --kz-duration-fast: 0ms;
+    --kz-duration-base: 0ms;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/tokens",
-  "version": "2.4.0",
+  "version": "2.6.0",
   "description": "The Krizaka semantic design tokens (--kz-*) and the brand themes (Krizaka, Orazaka, Orochia): one DTCG source compiled to CSS (dark, light, media invariants), typed constants and React Native themes.",
   "keywords": [
     "krizaka",
@@ -73,7 +73,7 @@
     {
       "name": "./tokens.css",
       "path": "dist/tokens.css",
-      "limit": "3.1 kB",
+      "limit": "4.3 kB",
       "gzip": true,
       "rolldown": false
     },
@@ -94,13 +94,13 @@
     {
       "name": ".",
       "path": "dist/index.js",
-      "limit": "3 kB",
+      "limit": "3.5 kB",
       "gzip": true
     },
     {
       "name": "./native",
       "path": "dist/native.js",
-      "limit": "1.5 kB",
+      "limit": "1.85 kB",
       "gzip": true
     }
   ],