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.

WebBetaUtilities & brand

Web only — React, from @krizaka/ui/recipes. Beta: its API may still change in a minor version.

Why it is here. Builds the web and native variants of the primitives from one recipe (nativeRecipe, PS4): every component that exists on both platforms.

When to use

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.

When not to use

To merge class names on the web: cn does that.Use instead: 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

Install

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

Styles

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

Import

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

Examples

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

This module has no component props: see the import and the preview above.

Accessibility

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.

Best practices

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.

Generated from the code of @krizaka/ui 3.9.0: its meta.ts, its examples and its types.Edit this documentation on GitHub