ng-hub-ui-ds 22.1.0 → 22.4.0

package/CHANGELOG.md

@@ -5,9 +5,52 @@ 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).
 
-## [Unreleased]
+## [22.4.0] - 2026-06-26
 
-## [22.1.0] - 2026-06-22
+### Added
+
+- **Open, user-extensible semantic accent map.** The set of variant names is no longer hard-coded: it is driven by a configurable `$hub-accents` Sass map (`!default`). Consumers can redefine the defaults or **add any number of custom variants** (e.g. `brand`, `accent`, `tertiary`) — each one automatically gets its full derived role family (`-subtle`, `-border-subtle`, `-emphasis`, `-on`). Two entry points, no per-library recompile:
+    - `@use 'ng-hub-ui-ds/styles/tokens/hub-tokens' with ($hub-accents-extra: (brand: #ff6b00))` — additive: keeps the defaults and merges your variants (recommended).
+    - `with ($hub-accents: (...))` or defining `$hub-accents` before importing — full replacement.
+- **Neutral variants in the default set.** `secondary`, `neutral`, `light` and `dark` are now first-class accents that derive the same role family as the chromatic ones (9 default variants total).
+- **`--hub-sys-color-{variant}-on` contrast pair** for every variant. A grayscale on-color derived from the accent's own lightness via relative-color syntax (`oklch(from … )`), so dark accents resolve to white text and light accents to near-black — recomputed live with the accent, no second token to maintain.
+- **Canonical structural layer.** New tokens: `--hub-ref-space-6/7`, sizing (`--hub-sys-size-full/-auto/-min/-max/-fit` and fractions `-1-2/-1-3/-2-3/-1-4/-3-4`), responsive container widths (`--hub-sys-container-max-width-sm…xxl`), grid (`--hub-sys-grid-columns/-gutter-x/-gutter-y`) and a semantic gap scale (`--hub-sys-gap-0…5`).
+- **Layout mixins** (`@use 'ng-hub-ui-ds' as hub`): `hub.stack`, `hub.cluster`, `hub.grid`, `hub.grid-fixed`, `hub.row` + `hub.col($span)` (12-column grid) and `hub.center`.
+- **Opt-in utility sheets** in two flavours sharing one naming rule — canonical `hub-` prefixed (`styles/utilities/layout.hub`) and unprefixed (`styles/utilities/layout`): a 12-column grid (`row` + `col-1…12`), display/flex helpers, directional padding/margin (`p/px/py`, `m/mx/my` 0–5), gap, and width/height sizing (`w-auto`, `w-25/50/75/100`, `vw-100`, `vh-100`, `min-vh-100`, …).
+- **External-system bridge mixins** (opt-in): `hub.bridge-bootstrap`, `hub.bridge-tailwind`, `hub.bridge-material`, `hub.bridge-open-props`, each with `$mode: adopt | project | both` (hub adopts the host's tokens, or projects its theme onto the host).
+- The canonical token spec (`docs/variables-css-library.en.md`) now ships **inside this package** as the single source of truth.
+
+### Changed
+
+- Semantic role derivation (`-subtle` / `-border-subtle` / `-emphasis`) now mixes `in oklch` instead of `in srgb` for perceptually smoother tints.
+- `package.json` exposes new `exports` (`.`/`styles`, `styles/mixins/*`, `styles/utilities/*`) and a `build:styles` script that compiles tokens **and** the utility sheets.
+
+### Removed
+
+- **`--hub-sys-color-{variant}-dark`** (legacy back-compat alias of `-emphasis`). Consume `-emphasis` (or the new `-on` for contrast text).
+
+## [22.3.1] - 2026-06-25
+
+### Fixed
+
+- The default / `light` theme accents are no longer silently overridden by the Bootstrap bridge: `:root` and `[data-theme='light']` now re-assert the ref-based accents (and surfaces/text/border) after the bridge block, instead of resolving through `--bs-*` when Bootstrap is present.
+- Removed the stray `--hub-sys-color-primary-dark` Bootstrap override so all five variants derive `-dark` from the canonical `-emphasis` alias.
+
+## [22.3.0] - 2026-06-24
+
+### Added
+
+- `--hub-sys-color-brand-default` and `--hub-sys-color-brand-on-default` semantic tokens. `brand` is the default accent consumed by component theme mixins (e.g. `ng-hub-ui-buttons` / `ng-hub-ui-badges`); it aliases the active theme's `primary`, so it re-colours automatically per theme.
+
+## [22.2.0] - 2026-06-24
+
+### Added
+
+- **`body` / `main` base (shell) layer**: new inheritable tokens that standardise the application-shell layout so a vertical or horizontal aside reads one consistent token set.
+    - **`--hub-body-*`** — the outer app/page wrapper. Twelve tokens (`width`, `margin-x/-y`, `padding-x/-y`, `row-gap`, `column-gap`, `bg`, `border-color`, `border-style`, `border-width`, `border-radius`) that **inherit from the matching `--hub-container-*` tokens** (with `sys`/`ref` fallbacks), so the container spacing system drives the whole page.
+    - **`--hub-main-*`** — the content region: `bg`, `border-radius`, `padding-x`, `padding-y`.
+    - **`--hub-main-wrapper-*`** — the centered wrapper around the content region: `bg`, `border-radius`, `gap`, `padding-x`, `padding-y` and `max-width` (default `1200px`).
+- All tokens are live, re-basable CSS custom properties; paired spacing uses the canonical directional `-x` / `-y` form only (no `padding`/`margin` shorthand).
 
 ### Added
 

package/README.es.md

@@ -55,7 +55,7 @@ Este paquete es la base de design tokens de la que lee el resto del ecosistema
 1. [🧩 ¿Qué es y para qué sirve?](#-qué-es-y-para-qué-sirve)
 2. [📦 Instalación](#-instalación)
 3. [🚀 Importación](#-importación)
-4. [🧱 Arquitectura: las dos capas](#-arquitectura-las-dos-capas)
+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)
@@ -134,7 +134,7 @@ propios estilos:
 
 ---
 
-## 🧱 Arquitectura: las dos capas
+## 🧱 Arquitectura: las capas
 
 Los tokens siguen un sistema por capas:
 
@@ -143,6 +143,7 @@ Los tokens siguen un sistema por capas:
 | **Referencia**  | `--hub-ref-*`       | Valores crudos, sin contexto                                 | `--hub-ref-color-blue-500`, `--hub-ref-space-3`, `--hub-ref-radius-md`  |
 | **Sistema**     | `--hub-sys-*`       | Asignaciones con significado que consumen los componentes    | `--hub-sys-color-primary`, `--hub-sys-surface-page`, `--hub-sys-text-primary` |
 | **Container**   | `--hub-container-*` | Puente heredable de `sys` a contenedores/slots concretos — un **re-base hook** | `--hub-container-bg`, `--hub-container-padding-x`, `--hub-container-gap` |
+| **Base / shell** | `--hub-body-*` · `--hub-main-*` · `--hub-main-wrapper-*` | Layout del _application shell_: el wrapper exterior de la página, la región de contenido y su wrapper centrado. `--hub-body-*` **hereda los valores por defecto de `--hub-container-*`** | `--hub-body-padding-x`, `--hub-main-bg`, `--hub-main-wrapper-max-width` (`1200px`) |
 
 Regla de oro: **los componentes referencian solo tokens `sys`**. Los `sys`
 apuntan a los `ref`. Así, cambiar un `sys` re-tematiza; cambiar un `ref` ajusta
@@ -158,6 +159,20 @@ descendiente que lo lee (p. ej. `ng-hub-ui-panels`), sin tocar `sys`. El espacia
 emparejado usa solo la forma direccional `-x` / `-y` (`--hub-container-padding-x/-y`,
 `--hub-container-margin-x/-y`) — sin atajo.
 
+La capa `base` / shell estandariza el **layout del _application shell_** para que
+un aside vertical u horizontal lea un único conjunto de tokens coherente:
+
+- `--hub-body-*` — el wrapper exterior de la app/página. **Hereda los valores por
+  defecto de `--hub-container-*`** (`--hub-body-padding-x` recurre a
+  `--hub-container-padding-x`, y así sucesivamente), de modo que el sistema de
+  espaciado del container gobierna toda la página.
+- `--hub-main-*` — la región de contenido (`bg`, `border-radius`, `padding-x/-y`).
+- `--hub-main-wrapper-*` — el wrapper centrado alrededor de la región de contenido,
+  con un `--hub-main-wrapper-max-width: 1200px` por defecto.
+
+También son variables CSS vivas y re-basables, con la misma convención de
+espaciado direccional `-x` / `-y`.
+
 ---
 
 ## 🎨 Los colores semánticos

package/README.md

@@ -55,7 +55,7 @@ ecosystem reads from:
 1. [🧩 What is it and what is it for?](#-what-is-it-and-what-is-it-for)
 2. [📦 Installation](#-installation)
 3. [🚀 Import](#-import)
-4. [🧱 Architecture: the two layers](#-architecture-the-two-layers)
+4. [🧱 Architecture: the layers](#-architecture-the-layers)
 5. [🎨 Semantic colours](#-semantic-colours)
 6. [🌗 Themes](#-themes)
 7. [🛠️ How to customise it](#️-how-to-customise-it)
@@ -135,7 +135,7 @@ own styles too:
 
 ---
 
-## 🧱 Architecture: the two layers
+## 🧱 Architecture: the layers
 
 The tokens follow a layered system:
 
@@ -144,6 +144,7 @@ The tokens follow a layered system:
 | **Reference**  | `--hub-ref-*`       | Raw, context-free values                                      | `--hub-ref-color-blue-500`, `--hub-ref-space-3`, `--hub-ref-radius-md`  |
 | **System**     | `--hub-sys-*`       | Meaningful assignments that components consume                | `--hub-sys-color-primary`, `--hub-sys-surface-page`, `--hub-sys-text-primary` |
 | **Container**  | `--hub-container-*` | Inheritable bridge from `sys` to concrete containers/slots — a **re-base hook** | `--hub-container-bg`, `--hub-container-padding-x`, `--hub-container-gap` |
+| **Base / shell** | `--hub-body-*` · `--hub-main-*` · `--hub-main-wrapper-*` | Application-shell layout: the outer page wrapper, the content region and its centered wrapper. `--hub-body-*` **inherits the matching `--hub-container-*` defaults** | `--hub-body-padding-x`, `--hub-main-bg`, `--hub-main-wrapper-max-width` (`1200px`) |
 
 Golden rule: **components reference `sys` tokens only**. The `sys` tokens point
 at the `ref` tokens. So changing a `sys` token re-themes; changing a `ref`
@@ -159,6 +160,20 @@ container that reads it (e.g. `ng-hub-ui-panels`), without touching `sys`. Paire
 spacing uses the directional `-x` / `-y` form only (`--hub-container-padding-x/-y`,
 `--hub-container-margin-x/-y`) — no shorthand.
 
+The `base` / shell layer standardises the **application-shell layout** so a
+vertical or horizontal aside reads one consistent token set:
+
+- `--hub-body-*` — the outer app/page wrapper. It **inherits the matching
+  `--hub-container-*` defaults** (`--hub-body-padding-x` falls back to
+  `--hub-container-padding-x`, and so on), so the container spacing system drives
+  the whole page.
+- `--hub-main-*` — the content region (`bg`, `border-radius`, `padding-x/-y`).
+- `--hub-main-wrapper-*` — the centered wrapper around the content region, with a
+  default `--hub-main-wrapper-max-width: 1200px`.
+
+These are live, re-basable CSS variables too, using the same directional
+`-x` / `-y` spacing convention.
+
 ---
 
 ## 🎨 Semantic colours