Krizaka UI

Le problème qu'elle supprime

Trois produits, trois vocabulaires de jetons, 1 153 surcharges light: dans une seule app.

Ce qu'elle fait

Décisions et compromis

1. 01

   Nous avons choisi

   Un seul vocabulaire de jetons ; le sombre sur :root, le clair sur html.light ; une marque surcharge des valeurs (brands/scoped.css).

   Nous avons refusé

   Des variantes light:/dark: dans les composants, et un jeu de jetons par produit.

   Parce que

   Un thème ou une marque est un jeu de valeurs : l'orange d'Orazaka et le violet d'Orochia utilisent les mêmes composants que ce site.

   Ce que cela vous coûte

   Les composants ne lisent que var(--kz-*) ; les couleurs de palette brutes sont refusées par les règles de lint.

2. 02

   Nous avons choisi

   Radix pour toute interaction non triviale, des variantes tailwind-variants, chaque story auditée par axe en sombre et en clair à chaque pull request.

   Nous avons refusé

   Des pièges à focus et une gestion du clavier écrits à la main.

   Parce que

   L'accessibilité est écrite une fois et testée là où elle est écrite.

   Ce que cela vous coûte

   Radix dans votre bundle ; des budgets size-limit par point d'entrée le tiennent en respect.

3. 03

   Nous avons choisi

   Les mots arrivent en props ; aucune fonction de traduction dans la bibliothèque.

   Nous avons refusé

   Embarquer un moteur de traduction.

   Parce que

   N'importe quelle i18n convient — la nôtre (@krizaka/i18n, catalogues typés et contrôle en CI) ou la vôtre.

   Ce que cela vous coûte

   Vous passez les libellés.

4. 04

   Nous avons choisi

   Un cliquet : par dépôt, des compteurs de classes de palette brutes, de variantes light:, d'utilitaires [var(--…)] et de className en template qui ne peuvent que descendre.

   Nous avons refusé

   Une migration big bang, et une règle de lint activée d'un coup.

   Parce que

   Une application existante l'adopte écran par écran sans laisser la dette repousser.

   Ce que cela vous coûte

   Un lint-ratchet.json à commiter et un contrôle en CI.

En code

/* globals.css — your brand is values, never components */
@import "tailwindcss";
@import "@krizaka/tailwind";        /* tokens + utilities + motion signature */
@import "@krizaka/ui/tailwind.css";
:root      { --kz-accent: hsl(152 62% 40%); }   /* dark is the default */
html.light { --kz-accent: hsl(152 70% 30%); }

// Save.tsx — one entry point per primitive: an app ships only what it imports
import { Button } from "@krizaka/ui/button";

export function Save({ label }: { label: string }) { // words arrive as props: any i18n works
  return <Button variant="primary">{label}</Button>;
}

L'adopter

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss
# the debt counters of an existing app (raw palette, light:, [var(--…)], className templates):
npx -p @krizaka/config krizaka-ratchet --json --root .