Recipes

The variants of a component written once, as classes of the Krizaka tokens: the web wears them with tv(recipe), React Native reads the same classes into styles on the theme's roles with nativeRecipe(recipe).resolve(props, theme). Button, Badge, Chip and Card are built this way, so the two platforms cannot name different tokens.

WebBêtaUtilitaires et marque

Web uniquement — React, depuis @krizaka/ui/recipes. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Builds the web and native variants of the primitives from one recipe (nativeRecipe, PS4): every component that exists on both platforms.

Quand l’utiliser

A component that exists on the web and on the phone, whose variants (a look, a size, a tone) must stay the same on both.
A product composite that adds variants to a primitive and wants its React Native twin to follow.

Quand ne pas l’utiliser

To merge class names on the web: cn does that.À la place : cn
For a component that has a web side only: write tv({ … }) as the primitives do.
For the layout, the pointer and focus states, shadows and transitions: they stay on the web side of the recipe, the phone ignores them.

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { defineRecipe, nativeRecipe, withAlpha, ROLES } from "@krizaka/ui/recipes";

Exemples

What the phone reads

A recipe of two tones and two sizes, and what nativeRecipe reads from its classes: points, colours on a theme, and the classes only the web has.

calm · sm: 28 pt high, 12 pt sides, 12 pt type, surface-colour behind text-colour — web only: inline-flex items-center rounded-full
calm · md: 36 pt high, 16 pt sides, 14 pt type, surface-colour behind text-colour — web only: inline-flex items-center rounded-full
loud · sm: 28 pt high, 12 pt sides, 12 pt type, accent-colour behind on-accent-colour — web only: inline-flex items-center rounded-full hover:bg-accent-hover
loud · md: 36 pt high, 16 pt sides, 14 pt type, accent-colour behind on-accent-colour — web only: inline-flex items-center rounded-full hover:bg-accent-hover

Props

Ce module n'a pas de props de composant : voir l'import et l'aperçu ci-dessus.

Accessibilité

A recipe only carries colours and sizes: the contrast of each pair is the tokens' (text roles ≥ 4.5:1 on the surfaces they are meant for, tested in @krizaka/tokens).
Focus rings and the pointer's states are web classes and stay on the web side; a phone has the platform's own focus and press feedback.

Bonnes pratiques

Write colours as roles (bg-accent, text-fg-secondary, border-border-default, ring-accent/40) and sizes in Tailwind units (h-10, px-4, text-sm, text-[11px]): those are what the phone can read.
Sizes are a variant dimension; states are prefixes: hover: is for the pointer (web only), disabled: and data-[state=on]: are read on both.
Keep what the phone draws differently in its component (the radius of a shape, the pressed opacity, a shadow): the recipe holds colours, sizes and type.
Check the pair in a test: resolve every variant on both themes and fail on a class that is neither mapped nor declared web-only (see recipes.test.ts).
Pass the native theme to resolve (useTheme().theme) and wrap the result in StyleSheet in the component; the recipe itself imports nothing from React Native.

Générée depuis le code de @krizaka/ui 3.18.2 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub