@keboola/design 14.0.0 → 15.0.0

package/AGENTS.md

@@ -238,12 +238,12 @@ Vertical rhythm: prefer `tw:gap-*` on a flex column parent over `tw:mt-*` on chi
 
 ### Navigation / flow
 
-| Use        | When                                                                                                                                        |
-| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Stepper`  | Linear progress through an ordered, finite sequence (multi-step form / wizard / pipeline). Argo-only. Set `onStepClick` for navigable flows |
-| `Tabs`     | Switching between sibling views of the same context                                                                                         |
-| `Timeline` | Unordered chronological log of events                                                                                                       |
-| `Progress` | Single percentage value of an in-flight task                                                                                                |
+| Use        | When                                                                                                                             |
+| ---------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `Stepper`  | Linear progress through an ordered, finite sequence (multi-step form / wizard / pipeline). Set `onStepClick` for navigable flows |
+| `Tabs`     | Switching between sibling views of the same context                                                                              |
+| `Timeline` | Unordered chronological log of events                                                                                            |
+| `Progress` | Single percentage value of an in-flight task                                                                                     |
 
 **Never** use `Stepper` for branching navigation (use `Tabs`) or an unordered status list (use `Timeline`).
 
@@ -798,9 +798,11 @@ An **opacity modifier composites over `transparent`, not over the element's own
 
 A tint also cannot carry a **state change** on a light surface — a brand-primary tint stays within ~1.5:1 of the surface at any opacity that still reads as a tint. Step the border for that, and keep the roles apart: hover steps the chrome border (`border-input` → `border-muted-foreground`), `focus-visible` owns the brand border.
 
-**Status — themeable under argo, with AA-legible defaults.** The four semantic states — `success`, `warning`, `info`, and `destructive` (used for "error") — are brand-overridable tokens, not fixed scales. Alert `variant`, `HelpBlock` / field-error state, `ErrorState`, and `Stepper` status read them, so a brand recolours every status surface at once. **Rule:** consume the token as **tint + text/icon** — `tw:bg-<role>/10` for the surface, `tw:text-<role>` / `tw:border-<role>/25` for the mark. The default token values ship dark enough to be AA (≥4.5:1) as text/icon on their own tint, in light **and** dark mode — a brand overriding them should preserve that. Avoid solid fills with a white foreground (`tw:bg-<role>` + white): the token flips light in dark mode, so white-on-token fails there. A brand _can_ recolour "error" away from red — that is now allowed; the accessible-on-tint contract is what must hold, not the hue. **Legacy exception:** the themeable treatment is gated to argo (`data-[argo=true]:` / `group-data-[argo=true]/…:`). Under legacy chrome (`useArgoDesign()` → `false`) Alert and `ErrorState` keep their original fixed status scales (`blue-*`/`green-*`/`warning-*`/`error-*`), and the legacy brand retains its original status token hues — so legacy status colour is unchanged.
+**Status — themeable, with AA-legible defaults.** The four semantic states — `success`, `warning`, `info`, and `destructive` (used for "error") — are brand-overridable tokens, not fixed scales. Alert `variant`, `HelpBlock` / field-error state, `ErrorState`, and `Stepper` status read them, so a brand recolours every status surface at once. **Rule:** consume the token as **tint + text/icon** — `tw:bg-<role>/10` for the surface, `tw:text-<role>` / `tw:border-<role>/25` for the mark. The default token values ship dark enough to be AA (≥4.5:1) as text/icon on their own tint, in light **and** dark mode — a brand overriding them should preserve that. Avoid solid fills with a white foreground (`tw:bg-<role>` + white): the token flips light in dark mode, so white-on-token fails there. A brand _can_ recolour "error" away from red — that is now allowed; the accessible-on-tint contract is what must hold, not the hue.
 
-**Decorative — stays fixed across brands.** The non-semantic palette that encodes category rather than state: `Badge` decorative colours (`purple`, `cyan`, `teal`, `blue`, …), chart colours, decorative tag palette. **Rule:** keep using primitive scales (`purple-500`, `cyan-500`, …). These are an identity/category contract with the consumer and do not re-skin.
+**Status pastels.** Each state also has a pastel pair — `tw:bg-<role>-subtle` + `tw:text-<role>-subtle-foreground`, for `success` / `warning` / `info` / `destructive` and `neutral`. Unset, the fill is the status token at 10% and the text is the token 30% towards `foreground` (`neutral`: `muted` + `muted-foreground`), so the pair follows the brand and dark mode with no work and stays AA at badge size. A brand or app that wants its own pastel sets `--<role>-subtle` / `--<role>-subtle-foreground` to any CSS colour. `Badge color="<role>-subtle"` reads them.
+
+**Decorative — stays fixed across brands.** The non-semantic palette that encodes category rather than state: `Badge` `color` hues (`purple`, `cyan`, `teal`, `blue`, …) — a state badge takes a status `color` (`success`, `warning-subtle`, …) instead — chart colours, decorative tag palette. **Rule:** keep using primitive scales (`purple-500`, `cyan-500`, …). These are an identity/category contract with the consumer and do not re-skin.
 
 **Heuristic.** A `variant` / `status` prop encoding one of the four states → **status token**. A `color` prop picking an arbitrary hue for categorisation → **decorative, fixed scale**. Everything else → **chrome, semantic token**.
 
@@ -833,20 +835,6 @@ import { keboola } from '@keboola/brand-registry';
 
 Read the resolved values with `useTheme()` (`brandId`, `currentTheme`, `themes`, `scheme`, `resolvedScheme`, and the setters). With no provider above it, it answers the defaults rather than throwing.
 
-### The argo/legacy switch is separate from the brand
-
-`ThemeProvider` does **not** decide whether a subtree renders the argo design language — that is a kbc-ui migration concern, so it rides its own context:
-
-```tsx
-import { ArgoDesignContext, useArgoDesign } from '@keboola/design';
-
-<ArgoDesignContext value={false}>{/* legacy chrome for this subtree */}</ArgoDesignContext>;
-```
-
-`ArgoDesignContext` defaults to `true` (argo — the modern default; legacy chrome is the exception), so an app that never provides it gets argo everywhere. kbc-ui provides `false` for its legacy brands and overrides per subtree as pages are migrated; components read it with `useArgoDesign()`. It is **temporary** and will be deleted once every kbc-ui surface is migrated — don't build on it in a new app.
-
-Because the value is read from the nearest provider, a nested override scopes to that subtree. The build ships a single instance of both contexts across every subpath entry, so a provider mounted from the root barrel is visible to components that ship in `@keboola/design/rjsf`, `/markdown-editor`, `/mermaid` and `/editors` too.
-
 Define a custom brand with `@keboola/brand-registry`'s `brandSchema` (Zod) and pass it in `brands`; or override the `--color-*` / `--radius-*` CSS variables directly on `:root`.
 
 **Interaction states and surface corners** are part of the same theme. Every one is optional and, unset, keeps the look the package ships:
@@ -869,7 +857,7 @@ Define a custom brand with `@keboola/brand-registry`'s `brandSchema` (Zod) and p
 - The state colours take **any CSS colour**, not the `R G B` channels the other colours use, so a wash can be translucent.
 - Each scheme falls back on its own: a value set in `colors` does not reach dark mode. Set `colorsDark` too.
 - Set `hover` and `hoverForeground` together, and `selected` and `selectedForeground`. Several components change the label on hover, and an unset foreground keeps the `accent-foreground` blue over whatever wash you chose.
-- Unset, a few components keep a hover or selected look of their own rather than `accent`: argo `DropdownMenu` (a `primary` tint), `Table` rows and `SectionNav` (`muted`). Once a theme sets the token, they follow it like the rest.
+- Unset, a few components keep a hover or selected look of their own rather than `accent`: `DropdownMenu` (a `primary` tint), `Table` rows and `SectionNav` (`muted`). Once a theme sets the token, they follow it like the rest.
 - `Sidebar` and `Navbar` sit on their own surface, so they take their own pair: `sidebarHover` for a hovered or open item, `sidebarSelected` for the current page. Set them inside `colors.sidebar` (and `colorsDark.sidebar`).
 - The fallbacks resolve where each class is used, so a brand that only re-points `accent` still moves hover and selected with it.
 

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @keboola/design
 
+## 15.0.0
+
+### Major Changes
+
+- Text inputs, `Select` and `DateRangePicker` take no `variant` or `sizing` props: every field and trigger is 36 px tall in the same chrome.
+  - `InputGroup`, `TextInput`, `SearchInput`, `SearchInputWithNavigation`, `PasswordInput`, `NumberInput`, `Textarea`, `AutoSaveTextarea`, `DateInput`, `TimeInput`, `ColorInput`, `DateRangeInput`, `ChipEditor`, `Combobox`, `MultiCombobox`, the `FormGroup.*` inputs and the `field.*` connectors drop `variant` and `sizing`.
+  - `Select` and `Select.Trigger` drop `variant` and `sizing`; `inline` renders the text-like trigger with no field chrome.
+  - `DateRangePicker` drops `variant`.
+
+- Every component renders one design language — the one `useArgoDesign()` used to opt into — whatever the brand or context.
+  - `Button`'s `argoVariants` export is `buttonVariants`.
+  - `Tooltip` drops `chrome` and `Tooltip.Content` drops `argo`; tooltips are the light popover chrome.
+  - `Command` drops `variant`; `compact` keeps the dense search row and list padding for a menu inside a popover.
+  - `Switch` drops `size`.
+  - The `data-argo`, `data-design` and argo `data-variant` attributes are gone from Modal, AlertModal, Sheet, Toast, HoverCard, Tooltip, DropdownMenu, Command, Alert, Card and ErrorState.
+  - `ArgoDesignContext` and `useArgoDesign` are removed.
+  - `AlertModal`'s icon sits on its status token's tint (`info`, `warning`, `destructive`, `success`), so it follows the brand and dark mode.
+  - Kai's `Button variant="kai"` and `Toggle variant="ai-vivid"` take their label from `primary-foreground`; in dark their gradients are lighter, so a near-black label stays AA across the whole fill.
+  - Text, borders and surfaces in the form, editor, sidebar and input blocks use theme tokens, and `ModalIcon`, `Skeleton` and `Toggle variant="ai"` carry dark variants of their tints, so they stay legible in dark mode.
+
+- `kbcUi` (`kbc-ui`) is kbc-ui's brand, in place of `keboolaLegacySidebar` (`keboola-legacy-sidebar`).
+  - Light: the colours `keboola-legacy-sidebar` had — brand-blue `31 143 255`, bright status hues, a white sidebar.
+  - Dark: the `keboola` dark palette, pinned in full and tuned to WCAG AA — near-black labels on the bright primary and status fills, an input border at 3:1.
+  - Typography and radii: the `keboola` brand's.
+  - `@keboola/design` re-exports it under the same name.
+
+### Patch Changes
+
+- A pressed `Toggle variant="ai-vivid"` keeps its navy gradient in dark mode, so its white label stays legible.
+
+- Updated dependencies:
+  - @keboola/brand-registry@3.0.0
+
 ## 14.0.0
 
 ### Major Changes