@krizaka/tailwind 2.4.0 → 2.5.0

package/README.md

@@ -46,10 +46,19 @@ The first two lines are enough to get the whole vocabulary. `@krizaka/ui/tailwin
 | Accent | `accent` · `accent-hover` · `accent-soft` · `accent-2` (gradients) · `on-accent` · `ring` | `--kz-accent*`, `--kz-on-accent`, `--kz-ring` |
 | Status | `success` · `warning` · `danger` · `info` (fills, borders, dots, icons — ≥ 3:1) | `--kz-success` … |
 | Status text | `fg-success` · `fg-warning` · `fg-danger` · `fg-info` → `text-fg-danger` (small text, ≥ 4.5:1 on every surface, both themes) | `--kz-*-text` |
-| Radius | `rounded-sm` · `rounded-md` · `rounded-lg` · `rounded-xl` · `rounded-full` | `--kz-radius-*` |
-| Shadow | `shadow-sm` · `shadow-md` · `shadow-lg` | `--kz-shadow-*` |
+| Status tints | `success-soft` · `warning-soft` · `danger-soft` → `bg-danger-soft` (the primary and the status text ≥ 4.5:1 on them) | `--kz-*-soft` |
+| Radius | `rounded-sm` · `rounded-md` · `rounded-lg` · `rounded-xl` · `rounded-full`; `rounded-(--kz-radius-xs)`, `rounded-(--kz-radius-2xl)` (not mapped: Tailwind's own `xs` / `2xl` keep their sizes in the products) | `--kz-radius-*` |
+| Shadow | `shadow-sm` · `shadow-md` · `shadow-lg`; the signature: `shadow-raised` · `shadow-floating` · `shadow-overlay` (ink-tinted, multi-layer) · `shadow-glow` · `shadow-glow-lg` (the brand's light under what acts) | `--kz-shadow-*`, `--kz-accent` |
+| Edges | `inset-shadow-edge` (the top edge catches the light) · `inset-shadow-edge-fill` (on an accent fill) · `inset-shadow-well` (a field, a track) | `--kz-edge-*` |
+| Material | `bg-sheen` (the top of a raised surface) · `bg-fill-shade` (the bottom of a fill) · `bg-halo` (the brand from the top) · `glass` (+ `bg-glass`, `border-glass-border`) | `--kz-surface-sheen`, `--kz-fill-shade`, `--kz-glass-*` |
+| Focus | `focus-visible:focus-ring` (a crisp ring off the element, in a halo) · `focus-ring-inset` (on the border) | `--kz-ring*` |
+| Node | `node` · `node-lit` — the core of the marks as a state mark | `--kz-accent` |
 | Font | `font-sans` · `font-display` · `font-mono` | `--kz-font-*` |
-| Motion | `ease-kz`; every `transition*` defaults to 200 ms on `--kz-ease` | `--kz-ease` |
+| Motion | `ease-kz`, `ease-spring`; every `transition*` defaults to 200 ms on `--kz-ease`; `duration-(--kz-duration-fast)` for the micro-interactions (0 under reduced motion) | `--kz-ease*`, `--kz-duration-*` |
+
+The material is BRAND.md §6 of `@krizaka/tokens`. Merge these classes with `twMergeConfig` (`@krizaka/ui/cn`) in your own
+`twMerge`, or `bg-sheen` will be taken for a background colour. The griffe (the 45° cut corner) is `[corner-shape:var(--kz-cut-shape)]`
+with `rounded-(--kz-cut-size)`; `--kz-cut-shape: round` turns it off for an app.
 
 Opacity modifiers work on every colour: `bg-surface-1/70`, `shadow-accent/20`.
 

package/index.css

@@ -42,6 +42,13 @@
   --color-fg-warning: var(--kz-warning-text);
   --color-fg-danger: var(--kz-danger-text);
   --color-fg-info: var(--kz-info-text);
+  /* statuts en fond teinté : le texte primaire et le texte du statut y restent ≥ 4.5:1 */
+  --color-success-soft: var(--kz-success-soft);
+  --color-warning-soft: var(--kz-warning-soft);
+  --color-danger-soft: var(--kz-danger-soft);
+  /* le verre (BRAND.md §6) : bg-glass + border-glass-border, ou l'utilitaire glass qui ajoute le flou */
+  --color-glass: var(--kz-glass-bg);
+  --color-glass-border: var(--kz-glass-border);
 
   --radius-sm: var(--kz-radius-sm);
   --radius-md: var(--kz-radius-md);
@@ -52,6 +59,17 @@
   --shadow-sm: var(--kz-shadow-sm);
   --shadow-md: var(--kz-shadow-md);
   --shadow-lg: var(--kz-shadow-lg);
+  /* la signature (BRAND.md §6) : ombres d'encre multi-couches, et la lueur de la marque sous ce qui agit — composée ici
+     pour que var(--kz-accent) se lise sur l'élément (une section .brand-<id> a sa propre lueur) */
+  --shadow-raised: var(--kz-shadow-raised);
+  --shadow-floating: var(--kz-shadow-floating);
+  --shadow-overlay: var(--kz-shadow-overlay);
+  --shadow-glow: 0 1px 2px color-mix(in oklab, var(--kz-accent) 28%, transparent), 0 6px 16px -6px color-mix(in oklab, var(--kz-accent) 55%, transparent);
+  --shadow-glow-lg: 0 2px 4px color-mix(in oklab, var(--kz-accent) 30%, transparent), 0 12px 28px -8px color-mix(in oklab, var(--kz-accent) 60%, transparent);
+  /* les arêtes : le haut d'une surface surélevée capte la lumière, un puits (champ, piste) se creuse */
+  --inset-shadow-edge: inset 0 1px 0 0 var(--kz-edge-light);
+  --inset-shadow-edge-fill: inset 0 1px 0 0 var(--kz-edge-on-fill);
+  --inset-shadow-well: inset 0 1px 2px 0 var(--kz-edge-well);
 
   --font-sans: var(--kz-font-sans);
   --font-text: var(--kz-font-text);
@@ -76,10 +94,63 @@
   --text-mono-sm: var(--kz-type-mono-sm-size); --text-mono-sm--line-height: var(--kz-type-mono-sm-line-height); --text-mono-sm--font-weight: var(--kz-type-mono-sm-weight); --text-mono-sm--letter-spacing: var(--kz-type-mono-sm-tracking);
 
   --ease-kz: var(--kz-ease);
+  --ease-spring: var(--kz-ease-spring);
   --default-transition-duration: 200ms;
   --default-transition-timing-function: var(--kz-ease);
 }
 
+/* ─── Surfaces & matières (BRAND.md §6) : des utilitaires qui lisent les tokens, rien d'autre ─── */
+
+/* Le reflet : le haut d'une surface surélevée, sur sa couleur (bg-surface-2 bg-sheen). */
+@utility bg-sheen {
+  background-image: linear-gradient(to bottom, var(--kz-surface-sheen), transparent 70%);
+}
+/* Le bas d'un aplat (accent, statut) s'assombrit à peine : de la matière, on-accent reste ≥ 4.5:1 (testé). */
+@utility bg-fill-shade {
+  background-image: linear-gradient(to bottom, transparent 35%, var(--kz-fill-shade));
+}
+/* Un halo de la marque qui descend du haut d'une surface (la carte « spotlight ») : 16 %, texte secondaire ≥ 4.5:1. */
+@utility bg-halo {
+  background-image: radial-gradient(120% 90% at 50% -30%, color-mix(in oklab, var(--kz-accent) 16%, transparent), transparent 70%);
+}
+/* Le verre dépoli de ce qui flotte : fond, contour, flou. */
+@utility glass {
+  background-color: var(--kz-glass-bg);
+  border-color: var(--kz-glass-border);
+  -webkit-backdrop-filter: blur(var(--kz-glass-blur)) saturate(1.6);
+  backdrop-filter: blur(var(--kz-glass-blur)) saturate(1.6);
+}
+/* L'anneau de focus signature : net (--kz-ring), décollé de l'élément, dans un halo de la même couleur. L'outline suit
+   les coins (y compris les coins coupés), le halo s'ajoute aux ombres de l'élément sans les effacer. */
+@utility focus-ring {
+  outline: var(--kz-ring-width) solid var(--kz-ring);
+  outline-offset: var(--kz-ring-offset);
+  --tw-ring-shadow: 0 0 0 calc(var(--kz-ring-offset) + var(--kz-ring-width) + var(--kz-ring-halo)) color-mix(in oklab, var(--kz-ring) 22%, transparent);
+  box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+/* …posé sur le contour (un champ, une cellule, un élément dans un conteneur qui rogne). */
+@utility focus-ring-inset {
+  outline: var(--kz-ring-width) solid var(--kz-ring);
+  outline-offset: calc(var(--kz-ring-width) * -1);
+  --tw-ring-shadow: 0 0 0 var(--kz-ring-halo) color-mix(in oklab, var(--kz-ring) 22%, transparent);
+  box-shadow: var(--tw-inset-shadow, 0 0 #0000), var(--tw-inset-ring-shadow, 0 0 #0000), var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+/* Le nœud : le cœur des marques, un losange qui marque un état. Éteint, il se tait ; node-lit l'allume dans l'accent. */
+@utility node {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 6px;
+  height: 6px;
+  rotate: 45deg;
+  border-radius: 1.5px;
+  background-color: var(--kz-border-strong);
+  transition: background-color var(--kz-duration-fast) var(--kz-ease), box-shadow var(--kz-duration-base) var(--kz-ease);
+}
+@utility node-lit {
+  background-color: var(--kz-accent);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--kz-accent) 22%, transparent), 0 0 10px color-mix(in oklab, var(--kz-accent) 70%, transparent);
+}
+
 /* Variantes de thème : réservées aux illustrations et aux images. Interdites par lint dans les produits
    (les tokens font le travail). `.theme-dark` reste un îlot sombre dans les deux thèmes. */
 @custom-variant light {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krizaka/tailwind",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "The Krizaka Tailwind CSS v4 preset: the semantic --kz-* tokens as utilities (bg-surface-1, text-fg-secondary, border-border-default, text-accent, rounded-xl…), illustration-only light/dark variants and the Krizaka easing.",
   "keywords": [
     "krizaka",
@@ -37,8 +37,8 @@
   "sideEffects": true,
   "peerDependencies": {
     "tailwindcss": "^4.1",
-    "@krizaka/tokens": "^2.4.0",
-    "@krizaka/ui": "^2.4.0"
+    "@krizaka/tokens": "^2.5.0",
+    "@krizaka/ui": "^2.5.0"
   },
   "devDependencies": {
     "@size-limit/file": "^14.2.0",
@@ -51,9 +51,9 @@
     "tailwindcss": "^4.3.3",
     "typescript": "^5.9.0",
     "vitest": "^4.1.11",
-    "@krizaka/config": "0.1.0",
-    "@krizaka/tokens": "^2.4.0",
-    "@krizaka/ui": "^2.4.0"
+    "@krizaka/tokens": "^2.5.0",
+    "@krizaka/ui": "^2.5.0",
+    "@krizaka/config": "0.1.0"
   },
   "engines": {
     "node": ">=20"
@@ -65,7 +65,7 @@
     {
       "name": ".",
       "path": "index.css",
-      "limit": "1.7 kB",
+      "limit": "3.1 kB",
       "gzip": true
     }
   ],