zabi-components 8.1.0 → 9.0.0

package/README.md

@@ -445,7 +445,7 @@ A `strings` key and an older prop for the same text: the prop wins.
 | Toast | `closeLabel` |
 | Toaster | `strings`, `aria-label` |
 | Toggle | `label`, or `aria-label` / `aria-labelledby` (without any of them it is called "Toggle") |
-| TopNavbar | `strings`, `ariaLabel`, `themeLabels` |
+| TopNavbar | `strings` (`openMenu`, `closeMenu`, `menuTitle`, `themeHeading`, `opensInNewTab`), `ariaLabel`, `themeLabels` |
 | UnsavedChangesBar | `message`, `label`, `saveLabel`, `discardLabel` |
 
 The name of the list in a SidebarShell is its `label` prop. One text is the

package/THEME.md

@@ -110,20 +110,33 @@ Components paint with **roles**: tokens that say what a colour is for and are
 already the right value in each mode. Use the same roles in your own CSS.
 
 - `--color-surface-base` / `-raised` / `-elevated` / `-overlay` - Surface levels: page, cards, nested cards, floating panels
+- `--color-material-thin`, `-regular`, `-thick` (`material-thin|regular|thick` classes) - Frosted fills for what floats over content; see THEMING.md, Materials. `data-materials="opaque"` on the root or an ancestor turns them into opaque surfaces
+- `--color-surface-chrome` - The fill of bars and sidebars; the page colour (flush). `--color-bar`, `--color-bar-border`, `--color-bar-brand`, `--color-tabbar-active` (`bg-bar-brand`, `bg-tabbar-active`, `border-bar` classes) - A bar's fill at rest, the hairline shown once content scrolls under it, the on-brand AppBar fill, the active tab pill. `material-bar` (with `data-scrolled-under`) paints a bar; `material-layer-regular` / `material-layer-thick` put a material on a layer. See THEMING.md, Materials
 - `--color-surface-inset` - A recessed area on a card (a well); see THEMING.md, Surface elevation levels
 - `--color-headline`, `--color-body`, `--color-description`, `--color-caption` - Text
 - `--color-border` - Borders and dividers
-- `--color-action-primary`, `-hover`, `-active` - Primary actions
+- `--color-action-primary`, `-hover`, `-active` - Primary actions. The brand step 600, 700 and 800 in light and in dark (the fill keeps its hue; the label is white in both). `createTheme({ darkPrimary: 'mirror' })` restores the 8.1 pale dark fills. Danger follows the same rule
+- `--font-family-display` (`font-display`) - A second face for `Heading variant="display"`; follows `--font-family-heading` until set
 - `--color-on-brand` - Text on a primary fill (`--color-action-primary-text` follows it)
+- `--color-action-tonal`, `-hover`, `-active`, `-text` (`bg-action-tonal`, `text-action-tonal`) - A brand tint with a brand label, for a quieter action beside a primary or a chosen answer. Label held to 4.5:1 on all three fills
+- `--color-chip`, `-hover`, `-active`, `-text` (`bg-chip`, `hover:bg-chip-hover`, `active:bg-chip-active`, `text-chip-text`) - A Chip at rest: a quiet neutral fill seen on the page and a card without an edge (1.2:1 or more), its label held to 4.5:1 on all three fills
+- `--color-chip-selected`, `-hover`, `-active`, `-text` (`bg-chip-selected`, `bg-chip-selected-hover`, `bg-chip-selected-active`, `text-chip-selected-text`) - A selected Chip: the tonal role by default, as tokens of its own, so an app that themes tonal gets matching chips
+- `--color-card-flat`, `-hover`, `-active` (`bg-card-flat`, `hover:bg-card-flat-hover`, `active:bg-card-flat-active`) - The fill of `Card variant="flat"`: the card in light (unchanged); in dark a translucent step of the neutral ramp (base-50 at 7%, hover 11%, pressed 15%), so flat cards nested in each other or in another card each read a step lighter. `overrides: { dark: { '--color-card-flat': 'var(--color-card)' } }` restores the opaque fill
+- `--color-card-tint` (`bg-card-tint`) - The brand tint as a surface for content (Card `tone="tint"`): brand-100 in light, the brand at 8% over the card in dark. Text, link, ring, field edge and outline edge are held on it
+- `--color-action-outline-border`, `-hover` (`border-action-outline`) - The edge of an outline button: the field edge, 3:1 on the page and the card
+- `--color-toggle-track`, `-hover`, `-active`, `-track-border` (`bg-toggle-track`, `ring-toggle-track`) - The off switch: a light tint with an edge that holds 3:1 (`--color-control-track*` stays the Slider's)
+- `--zabi-button-radius`, `--zabi-button-font-weight` (`rounded-button`, `font-button`) - Button corner and label weight, set on any ancestor; they default to `--radius-control` and 500
 - `--color-accent`, `-hover`, `-active`, `-subtle`, `-border`, `-text` - The second brand colour
 - `--color-on-accent` - Text on a solid accent fill
 - `--color-link`, `--color-focus-ring` - Links and the focus ring
 - `--color-focus-ring-muted` - The neutral ring of ghost and link controls (`.focus-ring--muted`)
 - `--color-focus-ring-danger` - The ring of a destructive control (`.focus-ring--danger`); `--color-error` by default
-- `--color-control-border` (`border-control-border`) - The edge of a control that has nothing else to be seen by, such as the outline of an empty Rating star. `--color-border-strong` is a decorative edge and is under 3:1 on the dark elevated and overlay surfaces
-- `--color-input-border` (`border-input-border`) - The edge of a form field (Input, Textarea, Select, DateField, TimeField). Held to 3:1 on the field fill (`--color-input`), the page and the card in both themes (WCAG 1.4.11); `--color-input-border-hover` is one step darker in light
-- `--color-progress-fill`, `--color-progress-track` (`bg-progress-fill`, `bg-progress-track`) - The fill and the track of Progress. The fill is `--color-action-primary` and the track `--color-input`, so the bar follows a pinned primary action. Held to 3:1 (fill on track) in both themes
-- `--color-success`, `--color-warning`, `--color-error`, `--color-info` - States, each with `-subtle`, `-border` and `-text`
+- `--color-control-border` (`border-control-border`) - The edge of a control that has nothing else to be seen by, such as the outline of an empty Rating star. `--color-border-strong` is a decorative edge, and is only 3.08:1 on the dark elevated and overlay surfaces
+- `--color-input`, `-hover`, `-focus`, `-active` (`bg-input`, `hover:bg-input-hover`, `focus-visible:bg-input-focus`, `active:bg-input-active`) - The field fill. Light: the white raised surface, unchanged. Dark: a translucent step of the neutral ramp (base-50 at 7%, hover 10%, focus 7%, pressed 15%), so a field is a well 1.20:1 to 1.23:1 lighter than the page, a card or the overlay it sits on (guarded at 1.15:1), and the 3:1 edge (`--color-input-border`) stays. `--color-input-solid`, `-hover`, `-focus`, `-active` are the opaque fills a field takes inside a colour block (`.on-brand`, `.on-accent`, `.on-fill`). `overrides: { dark: { '--color-input': 'var(--color-surface-inset)', '--color-input-hover': 'var(--color-base-200)', '--color-input-focus': 'var(--color-base-150)', '--color-input-active': 'color-mix(in srgb, var(--zabi-base-50) 10%, var(--color-surface-inset))', '--color-input-placeholder': 'var(--color-base-600)' } }` restores the 9.0.0-alpha.4 opaque field
+- `--color-input-border` (`border-input-border`) - The edge of a form field (Input, Textarea, Select, DateField, TimeField). Held to 3:1 on the page and the card in both themes (WCAG 1.4.11), and on the field fill in light and over the page in dark (the lifted dark fill is 2.79:1 under it on a card and 2.50:1 on the overlay; the edge's other side, the surface, is 3.40 and 3.08); `--color-input-border-hover` is one step darker in light
+- `--color-progress-track-border` (`border-progress-track-border`) - The edge of the Progress track: the field edge by default (3:1 on the page and the card); `transparent` for a track that reaches 3:1 itself (`createTheme` writes that when it overrides the track)
+- `--color-progress-fill`, `--color-progress-track` (`bg-progress-fill`, `bg-progress-track`) - The fill and the track of Progress. The fill is `--color-action-primary` and the track `--color-input` (a darker well, `--color-base-75`, in dark), so the bar follows a pinned primary action. Held to 3:1 (fill on track) in both themes
+- `--color-success`, `--color-warning`, `--color-error`, `--color-info` - States, each with `-subtle`, `-border` and `-text`. In dark the tint and edge are the hue thinned (16% / 36%) into the card surface, not a deep saturated step
 
 The full list is in [THEMING.md](./THEMING.md#roles-read-them-do-not-set-them).