Theming

.billing-panel {
  --kui-btn-danger-bg: oklch(0.5 0.2 25);
  --kui-btn-danger-bg-hov: oklch(0.44 0.2 25);
}

• Component tokens are inputs, not outputs. A component states its default in its own CSS, for example var(--kui-card-bg, var(--kui-color-surface)), and the generated stylesheet does not define that token. Setting --kui-card-bg on an ancestor therefore wins, and so does changing --kui-color-surface on the same ancestor.
• The generated stylesheet defines only literal component tokens (sizes, gaps, durations), the semantic --kui-type-* roles and the density-dependent --kui-btn-px. Do not read a component token in your own CSS without a fallback: it has no value unless someone sets it.
• Class names are a separate namespace: a kui-* class is stable only where a component page documents it, and the other anatomy classes are internal and may change in a minor release.

• @kikita-labs/ui/styles includes theme-default.css, generated from DEFAULT_KUI_THEME, so the first paint does not wait for a script. provideKikitaUi() adds the theme of custom seeds on top of it.
• The generated variables live in the kui.tokens cascade layer, declared before kui.base and kui.components. A variable that you write outside any layer, for example on the root, always wins over the generated one whatever the order of the style sheets.
• provideKikitaUi() sets data-kui-density on the root element from seeds.density, on the server too, unless the page already set it.
• The neutral seed tints the neutral scales of both modes, so surfaces, borders, text, skeletons and scrollbars follow seeds.neutral. For any seed every pair of roles the library draws reaches 4.5:1 (text) or 3:1 (non-text); the generator picks white or near-black text for each solid fill and corrects a seed that neither reaches 4.5:1 on.

import { DEFAULT_KUI_THEME, provideKuiTheme } from '@kikita-labs/ui';

provideKuiTheme({ ...DEFAULT_KUI_THEME, contrast: 'soft' });

• strict (default): control borders (--kui-color-border-control) reach 3:1 on every surface. soft: they read quieter (neutral 6, hover 8) and fall below 3:1, so choose it knowingly. Text, focus rings and fills do not change.
• The option sets the default. The other profile is emitted as the variables it changes, so data-kui-contrast switches it at runtime without a new theme.
• strict also applies by itself under prefers-contrast: more while the attribute is absent, so a visitor who asked for more contrast still gets 3:1 borders with a soft default. An explicit attribute always wins over the system setting.
• This documentation site runs with soft by default for a quieter look and lets you pick Strict or Soft in the theming palette. The choice is stored only after you make it, so the operating system setting keeps working until then.
• Keep profiles to border and surface roles: body text stays at 4.5:1 in every profile.

:root {
  --kui-opacity-disabled: 0.4; /* every disabled control, option and cell */
  --kui-focus-ring-width: 2px; /* standalone controls; parts use --kui-focus-ring-width-sm */
  --kui-duration-base: 120ms; /* enter animations and control state changes */
  --kui-color-scrim: oklch(0 0 0 / 0.65); /* behind Dialog, Drawer and Command Palette */
}

A component hook such as --kui-btn-focus-ring-w no longer exists; the shared token is the one to set. The full list is on the Tokens page.

• --kui-neutral-1 to -12 are one scale per mode, accent steps sit at fixed tones and --kui-input-focus-ring defaults to none.
• --kui-color-on-fill and --kui-color-primary-focus-ring are deprecated and removed in 3.0.
• Under Windows High Contrast, forced-colors.css states checked controls, Slider, Progress, selected cells, Tabs, Segmented, pressed Chip, Stepper and the charts with system colours.