ng-hub-ui-ds 22.4.3 → 22.5.0

package/CHANGELOG.md

@@ -5,6 +5,69 @@ All notable changes to `ng-hub-ui-ds` are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [22.5.0] - 2026-07-04
+
+### Added
+
+- **One-call partial theming — `theme()` mixin** (`styles/mixins/_theme.scss`, forwarded by the root Sass entry): pass only the overrides as partial maps (`$accents`, `$space`, `$gap`, `$radius`, `$shadow`, `$font-family/-size/-weight`, `$line-height`, plus a raw `$tokens` escape hatch) and it emits the matching custom properties with the canonical names — everything derived (sys aliases, role families, utilities, components) re-derives at runtime through the var() chain. Scopeable to `:root`, a `[data-theme]` block or any subtree.
+- **Radius tokens `xl` / `xxl`** (`--hub-ref-radius-xl: 1rem`, `--hub-ref-radius-xxl: 2rem` and their `--hub-sys-radius-*` aliases), completing Bootstrap's radius scale — `.rounded-4` / `.rounded-5` are now emitted by the surfaces sheet.
+- **Breakpoints** (`styles/mixins/_breakpoints.scss`, forwarded by the root Sass entry): the Bootstrap-compatible `$hub-breakpoints` map (sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400, retunable via `with (…)`) plus `media-breakpoint-up($name)` / `media-breakpoint-down($name)` mixins.
+- **Responsive utility variants** (mobile-first, Bootstrap-exact names) generated for the highest-traffic groups: display (`.d-{bp}-*`), 12-column spans (`.col-{bp}-1…12`), spacing (`.p/.px/.py/.pt/.pb/.ps/.pe-{bp}-*`, `.m…-{bp}-*`, auto margins) and gap. Other groups get their responsive variant in consumer code with `media-breakpoint-up()`.
+- **Focus ring**: `focus-ring()` helper mixin over the (previously unconsumed) `--hub-sys-focus-ring-width/color` tokens, plus the `.focus-ring` utility.
+- **Background / text opacity hooks**: `bg()`, `text-bg()` and `text-color()` now emit their colour through the local custom properties `--hub-bg-opacity` / `--hub-text-opacity` (default 1, via `color-mix`), and the sheets add Bootstrap's `.bg-opacity-10/25/50/75/100` and `.text-opacity-25/50/75/100`.
+- **Link utilities & mixin**: `link-color($variant)` (accent link with `-emphasis` hover) and the `.link-{variant}`, `.link-underline(-{variant})`, `.link-underline-opacity-0…100` (via `--hub-link-underline-opacity`), `.link-offset-1…3` and `.icon-link` classes.
+- **`.bg-gradient`** and **print display utilities** (`.d-print-none/inline/inline-block/block/grid/table(-row/-cell)/flex/inline-flex`).
+- **Surface mixins** (`styles/mixins/_surfaces.scss`, forwarded by the root Sass entry): `bg($variant, $subtle)` over the open accent map plus `body` / `transparent`, `text-bg($variant)` (accent background + guaranteed-contrast `-on` text), `border($width, $color)`, `border-color($variant)`, `radius($size)` (none | sm | md | lg | pill | circle) and `shadow($size)` (none | sm | md | lg | inset).
+- **Helper mixins** (`styles/mixins/_helpers.scss`, forwarded by the root Sass entry): `visually-hidden()`, `stretched-link()`, `ratio($x, $y)` (native `aspect-ratio`) and `clearfix()`.
+- **Surface utility sheet** (`styles/utilities/surfaces.scss` / `.css`, exported as `./styles/utilities/surfaces`): Bootstrap-exact helpers built on the surface mixins — backgrounds (`.bg-primary` … `.bg-dark`, `.bg-*-subtle`, `.bg-body`, `.bg-transparent`, `.bg-white/black`), `.text-bg-*`, borders (`.border`, per-side add/remove, `.border-{variant}` colours, `.border-1…5` widths), radii (`.rounded`, `.rounded-0…3`, `.rounded-circle`, `.rounded-pill`, per-side variants), shadows (`.shadow-sm/.shadow/.shadow-lg/.shadow-none`) and `.opacity-0/25/50/75/100`. `.rounded-4` / `.rounded-5` are not emitted — the ds radius scale has no xl/xxl tokens yet.
+- **Layout sheet expansion** (`styles/utilities/layout.scss`), all Bootstrap-exact: per-side spacing (`.pt/.pb/.ps/.pe-*`, `.mt/.mb/.ms/.me-*` on the 0–5 scale, logical properties), auto margins (`.m-auto`, `.mx-auto`, `.ms-auto` …), `.row-gap-*` / `.column-gap-*`, table display helpers (`.d-table(-row/-cell)`), position (`.position-*`, `.top/bottom/start/end-0/50/100`, `.translate-middle(-x/-y)`, `.fixed-top/bottom`, `.sticky-top/bottom`), overflow (`.overflow-*` plus `-x`/`-y` axes), `.order-first/0…5/last`, `.align-content-*`, float (`.float-start/end/none`, `.clearfix`), `.visible`/`.invisible`, `.z-n1/0…3`, `.object-fit-*`, vertical alignment (`.align-baseline/top/middle/bottom/text-top/text-bottom`), interactions (`.user-select-*`, `.pe-none/.pe-auto`) and the behaviour helpers (`.visually-hidden`, `.visually-hidden-focusable`, `.stretched-link`, `.ratio` + `.ratio-1x1/4x3/16x9/21x9`).
+- **Typography mixins** (`styles/mixins/_typography.scss`, forwarded by the root Sass entry): `text-truncate()`, `text-break()`, `font-family($family)`, `font-size($size)` — Bootstrap's heading scale 1–6 derived from the base token, or the xs/sm/base/lg steps —, `font-weight($weight)`, `line-height($height)` and `text-color($variant)` over the open accent map plus the `body` / `muted` document roles.
+- **Text utility sheet** (`styles/utilities/text.scss` / `.css`, exported as `./styles/utilities/text`): Bootstrap-exact helpers built on the typography mixins — alignment (`.text-start/center/end`), wrapping (`.text-wrap/nowrap`, `.text-break`, `.text-truncate`), transform (`.text-lowercase/uppercase/capitalize`), decoration (`.text-decoration-none/underline/line-through`), weight & style (`.fw-lighter/light/normal/medium/semibold/bold/bolder`, `.fst-italic/normal`), size (`.fs-1…6`), line-height (`.lh-1/sm/base/lg`), `.font-monospace`, and semantic text colours (`.text-primary` … `.text-dark`, `.text-body`, `.text-muted`, `.text-white`, `.text-black`, `.text-reset`).
+- **Native-element reset** (`styles/base/reset.scss` / `.css`, exported as `./styles/base/reset`): an opt-in, token-driven reboot of the browser defaults — `box-sizing: border-box`, body typography/surface from `--hub-ref-*` / `--hub-sys-*`, heading/paragraph/list margins on the spacing scale, link colors from `--hub-sys-link-*`, monospace for `code`/`pre`, form controls inheriting the document font, and sensible `hr`/`table`/`fieldset` normalization. Load it only when the host app does not already ship a reset (e.g. Bootstrap's Reboot).
+
+### Removed
+
+- **BREAKING**: the `hub-`-prefixed utility sheet (`styles/utilities/layout.hub.scss` / `.css`) and its `./styles/utilities/layout.hub` package exports. The ds now ships a single, unprefixed utility sheet: `styles/utilities/layout`, whose helper names mirror Bootstrap's exactly. Migration: update imports from `ng-hub-ui-ds/styles/utilities/layout.hub` to `ng-hub-ui-ds/styles/utilities/layout` and rename classes — `.hub-stack` → `.stack`, `.hub-d-flex` → `.d-flex`, `.hub-gap-3` → `.gap-3`, `.hub-row`/`.hub-col-6` → `.row`/`.col-6`, `.hub-w-50` → `.w-50`, `.hub-justify-*` → `.justify-content-*`, `.hub-items-*` → `.align-items-*`, `.hub-self-*` → `.align-self-*`, and `.hub-grid` → `.grid-auto`. Do not load the sheet AND Bootstrap globally in the same document (the names now overlap by design; the spacing scale already matched Bootstrap's).
+- **BREAKING**: the Tailwind-style flex aliases `.flex-1`, `.flex-auto`, `.flex-initial` and `.flex-none` — helper classes mirror Bootstrap exactly, which has no such utilities. Use `.flex-fill` / `.flex-grow-*` / `.flex-shrink-*` instead.
+
+### Changed
+
+- **Size scales are now generated from public Sass maps** — `$hub-space-scale`, `$hub-radius-scale` and `$hub-gap-steps` (`!default`, retunable via `with (…)`) are the single source for the `--hub-ref-space-*` / `--hub-ref-radius-*` blocks and their `sys` aliases, mirroring the `$hub-accents` pattern. Emitted CSS is unchanged except `--hub-sys-radius-pill`'s dead-code fallback, normalized from `9999px` to the ref value `50rem`.
+- The layout primitives of the utility sheet (`.stack`, `.cluster`, `.grid-auto`, `.row`, `.col-*`, `.center`) are now emitted from the canonical layout mixins instead of duplicating their CSS — no behaviour change; the mixins remain the single source of truth.
+- **BREAKING**: the flexbox alignment utilities of the unprefixed sheet now use Bootstrap's exact names — `.justify-start|end|center|between|around|evenly` → `.justify-content-*`, `.items-start|end|center|baseline|stretch` → `.align-items-*`, `.self-auto|start|end|center|baseline|stretch` → `.align-self-*`.
+
+## [22.4.5] - 2026-07-02
+
+### Added
+
+- Token-spec MD: new `INTERNAL` status in the Components legend for variables the component writes at runtime (from inputs/config/state) — inventoried so every variable in code has a row, but explicitly not themable hooks.
+- Token-spec MD: documented 35 previously missing component variables — the `--hub-dropdown-header-*` / `--hub-dropdown-divider-color` hooks (buttons), the `--hub-nav-mobile-*` drawer hooks, the `--hub-milestone-pulse-*` / `--hub-milestone-reveal-*` animation hooks, `--hub-stepper-nav-title-max-width`, and the `INTERNAL` runtime variables of badges (`--hub-badge-group-*`), nav (`--hub-nav-sticky-top`), skeleton (`--hub-skeleton-node-*`), milestones (`--hub-milestone-index`), panels (`--hub-panels-multiple-vertical-panel-min-width`) and forms slider (`--hub-slider-from/-to/-percent`).
+
+### Changed
+
+- Token-spec MD: the formal component-token regex required three name segments (`{2,}`), invalidating the dominant `--hub-{component}-{property}` pattern (89 legitimate tokens like `--hub-badge-bg`); relaxed to `{1,}`.
+- Token-spec MD: the "Tokenization coverage" appendix was a stale snapshot (e.g. `paginable` listed at 22.4% — it is now 84.8%); regenerated with current per-library numbers, dated methodology notes and updated priorities (`buttons` is now the lowest at 70.6%).
+- Token-spec MD: the "Standalone neutral colors" table wrongly claimed `secondary` / `light` / `dark` derive no role family — they are `$hub-accents` variants and derive the full family like every other variant. Split into "Neutral variant accents" (with `neutral` added) and "Standalone brand aliases" (`--hub-sys-color-brand-default` / `-on-default`, the only true base-only tokens).
+- Token-spec MD: the "Directional spacing rule" now records the grandfathered logical-suffix exceptions (modal margin cascade, `--hub-nav-mobile-*-padding-inline`, `--hub-table-batch-actions-margin-inline-end`) and clarifies that single-value spacing tokens may keep the bare `-padding` suffix.
+- Token-spec MD: 213 "Initial value" cells re-synchronized from the actual code declarations (new value-parity guard below) — including the canonical accent-slot derivations (oklch, 12% subtle / 80% emphasis) that panels, toast and nav now share, and the new `--hub-speed-dial-label-bg` / `--hub-speed-dial-label-color` tokens from buttons 22.7.0.
+- `tokens-parity.mjs` guard extended: library scan now covers `.ts` / `.html` (inline component styles count as public API), consumed-only hooks (`var(--hub-x, fallback)` without a declaration) must now have an MD row, and `INTERNAL` rows are checked for existence in code like `IN_USE` ones. A new **value-parity check (D)** compares every component row's "Initial value" cell against the token's declaration in the file named by its Source column (tolerant normalization; `url(data:)` icons and Sass-interpolated values exempt), and `--write` rewrites drifted cells from code.
+
+- Token-spec MD: `--hub-table-filter-count-bg` / `--hub-table-filter-count-color` were still marked `PENDING` but have shipped in paginable — promoted to `IN_USE` (a new parity sub-check now flags any PENDING/PROPOSAL row whose token is declared in code).
+
+- Token-spec MD: adversarial re-audit fixes — 27 `Source` cells pointed at ghost files (24 legacy `accordion/*` rows → retargeted to the panels bridge `panels.variables.scss`; 3 `form/*` → the real forms fieldset component) and 60% of `Source` line numbers had drifted (675 cells renumbered); `url(data:)` icon values are no longer exempt from value parity (3 had drifted — `--hub-check-input-checked-icon` documented a different glyph entirely) and the descriptive icon placeholders were replaced by the real data URIs; the Figma-mapping sections now use real tokens as examples; `--hub-avatar-size` reclassified `IN_USE` → `INTERNAL` (written from the `size` input; a CSS override is overruled by the inline host style); the three `--hub-form-fieldset-border-*` values re-synced to the fallbacks the fieldset actually consumes.
+- `tokens-parity.mjs`: two more guards — **check E** validates every `Source` cell (file exists, contains the token, right line; `--write` retargets/renumbers) and **check F** keeps each library's `docs/css-variables-reference.md` "Default" cells in sync with the code declarations (254 cells resynchronized on first run).
+
+### Removed
+
+- Token-spec MD: the superseded `tabs` proposal section (23 `--hub-tabs-tab-*` PENDING rows) — the tabs UI shipped in `ng-hub-ui-panels` as `--hub-panels-tab-*`; a tombstone note now points there.
+- Token-spec MD: 49 superseded PENDING rows in the `select` section — the `--hub-select-btn-*` block shipped as the `--hub-select-button-*` tokens, and the `--hub-select-checkbox-input-*` / `--hub-select-radio-input-*` proposals were dropped in favour of the `check` component tokens the implemented select actually uses.
+
+## [22.4.4] - 2026-07-01
+
+### Changed
+
+- Token-spec MD: documented the `<hub-input>` affix and clear-button tokens added in `ng-hub-ui-forms` 22.3.0 — `--hub-input-icon-color` / `--hub-input-icon-size`, `--hub-input-affix-inset` / `--hub-input-affix-gap`, and `--hub-input-clear-icon` / `--hub-input-clear-size` / `--hub-input-clear-color` / `--hub-input-clear-hover-color`. Docs only — no change to the emitted tokens.
+
 ## [22.4.3] - 2026-07-01
 
 ### Changed

package/README.es.md

@@ -58,13 +58,14 @@ Este paquete es la base de design tokens de la que lee el resto del ecosistema
 4. [🧱 Arquitectura: las capas](#-arquitectura-las-capas)
 5. [🎨 Los colores semánticos](#-los-colores-semánticos)
 6. [🌗 Temas](#-temas)
-7. [🛠️ Cómo modificarlo](#️-cómo-modificarlo)
-8. [🧩 Funciones SCSS (cómo se genera por dentro)](#-funciones-scss-cómo-se-genera-por-dentro)
-9. [📋 Tabla de referencia rápida](#-tabla-de-referencia-rápida)
-10. [📊 Changelog](#-changelog)
-11. [🤝 Contribución](#-contribución)
-12. [☕ Apoyo](#-apoyo)
-13. [📄 Licencia](#-licencia)
+7. [🧰 Utilidades y mixins opt-in](#-utilidades-y-mixins-opt-in)
+8. [🛠️ Cómo modificarlo](#️-cómo-modificarlo)
+9. [🧩 Funciones SCSS (cómo se genera por dentro)](#-funciones-scss-cómo-se-genera-por-dentro)
+10. [📋 Tabla de referencia rápida](#-tabla-de-referencia-rápida)
+11. [📊 Changelog](#-changelog)
+12. [🤝 Contribución](#-contribución)
+13. [☕ Apoyo](#-apoyo)
+14. [📄 Licencia](#-licencia)
 
 ---
 
@@ -216,6 +217,43 @@ Como cada tema **redefine los mismos tokens** con sus valores, todo lo que lee
 
 ---
 
+## 🧰 Utilidades y mixins opt-in
+
+Además de los tokens, el paquete incluye una capa de estilos opt-in — no se emite nada salvo que la importes.
+
+**Hojas de utilidades** — los nombres de clase son **exactamente los de Bootstrap** y cada valor resuelve a los tokens canónicos. No cargues estas hojas Y Bootstrap globalmente en el mismo documento. Cada hoja tiene además su gemela `.css` compilada para apps sin Sass:
+
+```scss
+@use 'ng-hub-ui-ds/styles/utilities/layout';    // display/flex, grid de 12 col, spacing, sizing, position, overflow, order, .ratio-*, .visually-hidden…
+@use 'ng-hub-ui-ds/styles/utilities/text';      // .fs-1…6, .fw-*, .lh-*, .text-truncate, colores de texto semánticos
+@use 'ng-hub-ui-ds/styles/utilities/surfaces';  // .bg-* (+ -subtle), .text-bg-*, .border*, .rounded*, .shadow*, .opacity-*
+```
+
+Los únicos nombres fuera de Bootstrap son los primitivos de layout que reflejan los mixins: `.stack`, `.cluster`, `.grid-auto`, `.center`.
+
+**Reset de elementos nativos** — una normalización estilo reboot, dirigida por tokens, para apps que no traigan ya un reset (p. ej. el Reboot de Bootstrap):
+
+```scss
+@use 'ng-hub-ui-ds/styles/base/reset';
+```
+
+**Mixins Sass** — las utilidades son wrappers finos sobre ellos; úsalos para acuñar tus propias variantes con los mismos primitivos:
+
+```scss
+@use 'ng-hub-ui-ds' as hub;
+
+.toolbar     { @include hub.cluster($gap: 2); }
+.card__title { @include hub.font-size(4); @include hub.font-weight(semibold); }
+.card--brand { @include hub.text-bg(brand); @include hub.radius(lg); @include hub.shadow(sm); }
+.sr-label    { @include hub.visually-hidden(); }
+```
+
+Grupos: **tema** (`theme()` — tematización parcial en una llamada: pásale solo las escalas/acentos cambiados como mapas), **breakpoints** (`media-breakpoint-up/down` sobre el mapa `$hub-breakpoints` — de él se generan las variantes responsive `.d-md-*`, `.col-lg-*`, `.p-sm-*`…), **layout** (`stack`, `cluster`, `grid`, `grid-fixed`, `row`, `col`, `center`), **tipografía** (`font-family`, `font-size`, `font-weight`, `line-height`, `text-color`, `link-color`, `text-truncate`, `text-break`), **superficies** (`bg`, `text-bg`, `border`, `border-color`, `radius`, `shadow`), **helpers** (`focus-ring`, `visually-hidden`, `stretched-link`, `ratio`, `clearfix`) y los **puentes** (`bridge-bootstrap` / `bridge-material` / `bridge-tailwind` / `bridge-open-props`).
+
+El catálogo completo con demos en vivo está documentado en [hubui.dev/design-system](https://hubui.dev/design-system).
+
+---
+
 ## 🛠️ Cómo modificarlo
 
 Hay tres mecanismos, de más simple a más avanzado.
@@ -300,9 +338,9 @@ $hub-accents-light: (
 // vez en :root; los temas solo cambian las entradas y la familia se recalcula.
 @mixin hub-color-derive() {
 	@each $name in $hub-variants {
-		--hub-sys-color-#{$name}-subtle:        color-mix(in srgb, var(--hub-sys-color-#{$name}) 12%, var(--hub-sys-surface-page, #fff));
-		--hub-sys-color-#{$name}-border-subtle: color-mix(in srgb, var(--hub-sys-color-#{$name}) 35%, var(--hub-sys-surface-page, #fff));
-		--hub-sys-color-#{$name}-emphasis:      color-mix(in srgb, var(--hub-sys-color-#{$name}) 80%, var(--hub-sys-color-ink, #212529));
+		--hub-sys-color-#{$name}-subtle:        color-mix(in oklch, var(--hub-sys-color-#{$name}) 12%, var(--hub-sys-surface-page, #fff));
+		--hub-sys-color-#{$name}-border-subtle: color-mix(in oklch, var(--hub-sys-color-#{$name}) 35%, var(--hub-sys-surface-page, #fff));
+		--hub-sys-color-#{$name}-emphasis:      color-mix(in oklch, var(--hub-sys-color-#{$name}) 80%, var(--hub-sys-color-ink, #212529));
 		--hub-sys-color-#{$name}-dark:          var(--hub-sys-color-#{$name}-emphasis); // alias retrocompatible
 	}
 }

package/README.md

@@ -58,13 +58,14 @@ ecosystem reads from:
 4. [🧱 Architecture: the layers](#-architecture-the-layers)
 5. [🎨 Semantic colours](#-semantic-colours)
 6. [🌗 Themes](#-themes)
-7. [🛠️ How to customise it](#️-how-to-customise-it)
-8. [🧩 SCSS functions (how it is generated internally)](#-scss-functions-how-it-is-generated-internally)
-9. [📋 Quick reference table](#-quick-reference-table)
-10. [📊 Changelog](#-changelog)
-11. [🤝 Contribution](#-contribution)
-12. [☕ Support](#-support)
-13. [📄 License](#-license)
+7. [🧰 Opt-in utilities & mixins](#-opt-in-utilities--mixins)
+8. [🛠️ How to customise it](#️-how-to-customise-it)
+9. [🧩 SCSS functions (how it is generated internally)](#-scss-functions-how-it-is-generated-internally)
+10. [📋 Quick reference table](#-quick-reference-table)
+11. [📊 Changelog](#-changelog)
+12. [🤝 Contribution](#-contribution)
+13. [☕ Support](#-support)
+14. [📄 License](#-license)
 
 ---
 
@@ -218,6 +219,43 @@ own CSS.
 
 ---
 
+## 🧰 Opt-in utilities & mixins
+
+Besides the tokens, the package ships an opt-in styling layer — nothing is emitted unless you import it.
+
+**Utility sheets** — class names mirror Bootstrap's **exactly** and every value resolves to the canonical tokens. Do not load them AND Bootstrap globally in the same document. Each sheet also has a compiled `.css` twin for Sass-less apps:
+
+```scss
+@use 'ng-hub-ui-ds/styles/utilities/layout';    // display/flex, 12-col grid, spacing, sizing, position, overflow, order, .ratio-*, .visually-hidden…
+@use 'ng-hub-ui-ds/styles/utilities/text';      // .fs-1…6, .fw-*, .lh-*, .text-truncate, semantic text colours
+@use 'ng-hub-ui-ds/styles/utilities/surfaces';  // .bg-* (+ -subtle), .text-bg-*, .border*, .rounded*, .shadow*, .opacity-*
+```
+
+The only non-Bootstrap names are the layout primitives that mirror the mixins: `.stack`, `.cluster`, `.grid-auto`, `.center`.
+
+**Native-element reset** — a reboot-style, token-driven normalisation for apps that do not already ship one (e.g. Bootstrap's Reboot):
+
+```scss
+@use 'ng-hub-ui-ds/styles/base/reset';
+```
+
+**Sass mixins** — the utilities are thin wrappers over these; use them to mint your own variants with the same primitives:
+
+```scss
+@use 'ng-hub-ui-ds' as hub;
+
+.toolbar     { @include hub.cluster($gap: 2); }
+.card__title { @include hub.font-size(4); @include hub.font-weight(semibold); }
+.card--brand { @include hub.text-bg(brand); @include hub.radius(lg); @include hub.shadow(sm); }
+.sr-label    { @include hub.visually-hidden(); }
+```
+
+Groups: **theme** (`theme()` — partial theming in one call: pass only the changed scales/accents as maps), **breakpoints** (`media-breakpoint-up/down` over the `$hub-breakpoints` map — the responsive variants `.d-md-*`, `.col-lg-*`, `.p-sm-*`… are generated from it), **layout** (`stack`, `cluster`, `grid`, `grid-fixed`, `row`, `col`, `center`), **typography** (`font-family`, `font-size`, `font-weight`, `line-height`, `text-color`, `link-color`, `text-truncate`, `text-break`), **surfaces** (`bg`, `text-bg`, `border`, `border-color`, `radius`, `shadow`), **helpers** (`focus-ring`, `visually-hidden`, `stretched-link`, `ratio`, `clearfix`) and the **bridges** (`bridge-bootstrap` / `bridge-material` / `bridge-tailwind` / `bridge-open-props`).
+
+The full catalogue with live demos is documented at [hubui.dev/design-system](https://hubui.dev/design-system).
+
+---
+
 ## 🛠️ How to customise it
 
 There are three mechanisms, from simplest to most advanced.
@@ -302,9 +340,9 @@ $hub-accents-light: (
 // :root; themes only override the inputs, so the family recomputes contextually.
 @mixin hub-color-derive() {
 	@each $name in $hub-variants {
-		--hub-sys-color-#{$name}-subtle:        color-mix(in srgb, var(--hub-sys-color-#{$name}) 12%, var(--hub-sys-surface-page, #fff));
-		--hub-sys-color-#{$name}-border-subtle: color-mix(in srgb, var(--hub-sys-color-#{$name}) 35%, var(--hub-sys-surface-page, #fff));
-		--hub-sys-color-#{$name}-emphasis:      color-mix(in srgb, var(--hub-sys-color-#{$name}) 80%, var(--hub-sys-color-ink, #212529));
+		--hub-sys-color-#{$name}-subtle:        color-mix(in oklch, var(--hub-sys-color-#{$name}) 12%, var(--hub-sys-surface-page, #fff));
+		--hub-sys-color-#{$name}-border-subtle: color-mix(in oklch, var(--hub-sys-color-#{$name}) 35%, var(--hub-sys-surface-page, #fff));
+		--hub-sys-color-#{$name}-emphasis:      color-mix(in oklch, var(--hub-sys-color-#{$name}) 80%, var(--hub-sys-color-ink, #212529));
 		--hub-sys-color-#{$name}-dark:          var(--hub-sys-color-#{$name}-emphasis); // back-compat alias
 	}
 }