ng-hub-ui-ds 22.1.0 → 22.3.1

package/CHANGELOG.md

@@ -7,7 +7,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [22.1.0] - 2026-06-22
+## [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng-hub-ui-ds",
-  "version": "22.1.0",
+  "version": "22.3.1",
   "license": "MIT",
   "scripts": {
     "build:tokens": "sass styles/tokens/hub-tokens.scss styles/tokens/hub-tokens.css --style=expanded --no-source-map",

package/styles/tokens/hub-tokens.css

@@ -203,6 +203,42 @@
   --hub-container-column-gap: var(--hub-ref-space-2);
 }
 
+/* ============================================================
+   BASE — body / main (application shell layout)
+   `body` is the outer app/page wrapper — it inherits the container
+   layout defaults so the same spacing system drives the whole page.
+   `main` is the content region (and its centered wrapper). Both are
+   live, re-basable CSS variables, standardised here so an app shell
+   (vertical or horizontal aside) reads one consistent token set.
+   ============================================================ */
+:root {
+  /* body — outer app/page wrapper (inherits the container layout) */
+  --hub-body-width: var(--hub-container-width, 100%);
+  --hub-body-margin-x: var(--hub-container-margin-x, 0);
+  --hub-body-margin-y: var(--hub-container-margin-y, 0);
+  --hub-body-padding-x: var(--hub-container-padding-x, 0);
+  --hub-body-padding-y: var(--hub-container-padding-y, 0);
+  --hub-body-row-gap: var(--hub-container-row-gap, 0);
+  --hub-body-column-gap: var(--hub-container-column-gap, 0);
+  --hub-body-bg: var(--hub-container-bg, var(--hub-sys-surface-page));
+  --hub-body-border-color: var(--hub-container-border-color, var(--hub-sys-border-color-default));
+  --hub-body-border-style: var(--hub-container-border-style, solid);
+  --hub-body-border-width: var(--hub-container-border-width, var(--hub-ref-border-width, 1px));
+  --hub-body-border-radius: var(--hub-container-border-radius, var(--hub-ref-radius-md, 0.375rem));
+  /* main — content region */
+  --hub-main-bg: var(--hub-sys-surface-page);
+  --hub-main-border-radius: var(--hub-ref-radius-lg, 0.5rem);
+  --hub-main-padding-x: var(--hub-ref-space-4, 1.5rem);
+  --hub-main-padding-y: var(--hub-ref-space-4, 1.5rem);
+  /* main — centered wrapper around the content region */
+  --hub-main-wrapper-bg: var(--hub-sys-surface-page);
+  --hub-main-wrapper-border-radius: var(--hub-ref-radius-lg, 0.5rem);
+  --hub-main-wrapper-gap: var(--hub-ref-space-4, 1.5rem);
+  --hub-main-wrapper-max-width: 1200px;
+  --hub-main-wrapper-padding-x: var(--hub-ref-space-4, 1.5rem);
+  --hub-main-wrapper-padding-y: var(--hub-ref-space-4, 1.5rem);
+}
+
 /* ============================================================
    Semantic color generation (CSS-variable-first)
    A theme sets only ONE accent per variant (--hub-sys-color-{v}).
@@ -316,6 +352,10 @@
   --hub-sys-color-secondary: var(--hub-ref-color-gray-600, #6c757d);
   --hub-sys-color-light: var(--hub-ref-color-gray-100, #f8f9fa);
   --hub-sys-color-dark: var(--hub-ref-color-gray-900, #212529);
+  /* Brand alias — the default accent consumed by component theme mixins
+     (e.g. ng-hub-ui-buttons / -badges). Follows the active theme's primary. */
+  --hub-sys-color-brand-default: var(--hub-sys-color-primary, #0d6efd);
+  --hub-sys-color-brand-on-default: var(--hub-ref-color-white, #fff);
   /* ----------------------------------------------------------
       Expressive gradient — theme-aware accent used by the home
       page (gradient headlines, glows, mesh background blobs).
@@ -442,7 +482,6 @@
 [data-theme=forest],
 [data-theme=mono] {
   --hub-sys-color-primary: var(--bs-primary, #0d6efd);
-  --hub-sys-color-primary-dark: var(--bs-primary-text-emphasis, #0a58ca);
   --hub-sys-color-secondary: var(--bs-secondary, #6c757d);
   --hub-sys-color-success: var(--bs-success, #198754);
   --hub-sys-color-danger: var(--bs-danger, #dc3545);
@@ -458,8 +497,14 @@
 /* ============================================================
    LAYER 2 — sys (base alias)
    Base is equivalent to light theme and works as explicit default.
+   Also re-asserted for :root / [data-theme='light'] AFTER the Bootstrap
+   bridge above (whose selector also matches :root/light), so the default
+   and light themes keep their ref-based accents/surfaces instead of being
+   silently overridden by --bs-* when Bootstrap is present.
    ============================================================ */
-[data-theme=base] {
+:root,
+[data-theme=base],
+[data-theme=light] {
   --hub-sys-color-primary: var(--hub-ref-color-blue-500, #0d6efd);
   --hub-sys-color-success: var(--hub-ref-color-green-500, #198754);
   --hub-sys-color-danger: var(--hub-ref-color-red-500, #dc3545);

package/styles/tokens/hub-tokens.scss

@@ -221,6 +221,44 @@
 	--hub-container-column-gap: var(--hub-ref-space-2);
 }
 
+/* ============================================================
+   BASE — body / main (application shell layout)
+   `body` is the outer app/page wrapper — it inherits the container
+   layout defaults so the same spacing system drives the whole page.
+   `main` is the content region (and its centered wrapper). Both are
+   live, re-basable CSS variables, standardised here so an app shell
+   (vertical or horizontal aside) reads one consistent token set.
+   ============================================================ */
+:root {
+	/* body — outer app/page wrapper (inherits the container layout) */
+	--hub-body-width: var(--hub-container-width, 100%);
+	--hub-body-margin-x: var(--hub-container-margin-x, 0);
+	--hub-body-margin-y: var(--hub-container-margin-y, 0);
+	--hub-body-padding-x: var(--hub-container-padding-x, 0);
+	--hub-body-padding-y: var(--hub-container-padding-y, 0);
+	--hub-body-row-gap: var(--hub-container-row-gap, 0);
+	--hub-body-column-gap: var(--hub-container-column-gap, 0);
+	--hub-body-bg: var(--hub-container-bg, var(--hub-sys-surface-page));
+	--hub-body-border-color: var(--hub-container-border-color, var(--hub-sys-border-color-default));
+	--hub-body-border-style: var(--hub-container-border-style, solid);
+	--hub-body-border-width: var(--hub-container-border-width, var(--hub-ref-border-width, 1px));
+	--hub-body-border-radius: var(--hub-container-border-radius, var(--hub-ref-radius-md, 0.375rem));
+
+	/* main — content region */
+	--hub-main-bg: var(--hub-sys-surface-page);
+	--hub-main-border-radius: var(--hub-ref-radius-lg, 0.5rem);
+	--hub-main-padding-x: var(--hub-ref-space-4, 1.5rem);
+	--hub-main-padding-y: var(--hub-ref-space-4, 1.5rem);
+
+	/* main — centered wrapper around the content region */
+	--hub-main-wrapper-bg: var(--hub-sys-surface-page);
+	--hub-main-wrapper-border-radius: var(--hub-ref-radius-lg, 0.5rem);
+	--hub-main-wrapper-gap: var(--hub-ref-space-4, 1.5rem);
+	--hub-main-wrapper-max-width: 1200px;
+	--hub-main-wrapper-padding-x: var(--hub-ref-space-4, 1.5rem);
+	--hub-main-wrapper-padding-y: var(--hub-ref-space-4, 1.5rem);
+}
+
 /* ============================================================
    Semantic color generation (CSS-variable-first)
    A theme sets only ONE accent per variant (--hub-sys-color-{v}).
@@ -344,6 +382,10 @@ $hub-accents-terminal: (
 	--hub-sys-color-secondary: var(--hub-ref-color-gray-600, #6c757d);
 	--hub-sys-color-light: var(--hub-ref-color-gray-100, #f8f9fa);
 	--hub-sys-color-dark: var(--hub-ref-color-gray-900, #212529);
+	/* Brand alias — the default accent consumed by component theme mixins
+	   (e.g. ng-hub-ui-buttons / -badges). Follows the active theme's primary. */
+	--hub-sys-color-brand-default: var(--hub-sys-color-primary, #0d6efd);
+	--hub-sys-color-brand-on-default: var(--hub-ref-color-white, #fff);
 
 	/* ----------------------------------------------------------
      Expressive gradient — theme-aware accent used by the home
@@ -484,7 +526,6 @@ $hub-accents-terminal: (
 [data-theme='forest'],
 [data-theme='mono'] {
 	--hub-sys-color-primary: var(--bs-primary, #0d6efd);
-	--hub-sys-color-primary-dark: var(--bs-primary-text-emphasis, #0a58ca);
 	--hub-sys-color-secondary: var(--bs-secondary, #6c757d);
 	--hub-sys-color-success: var(--bs-success, #198754);
 	--hub-sys-color-danger: var(--bs-danger, #dc3545);
@@ -500,9 +541,15 @@ $hub-accents-terminal: (
 /* ============================================================
    LAYER 2 — sys (base alias)
    Base is equivalent to light theme and works as explicit default.
+   Also re-asserted for :root / [data-theme='light'] AFTER the Bootstrap
+   bridge above (whose selector also matches :root/light), so the default
+   and light themes keep their ref-based accents/surfaces instead of being
+   silently overridden by --bs-* when Bootstrap is present.
    ============================================================ */
 
-[data-theme='base'] {
+:root,
+[data-theme='base'],
+[data-theme='light'] {
 	@include hub-color-accents($hub-accents-light);
 	--hub-sys-color-secondary: var(--hub-ref-color-gray-600, #6c757d);
 	--hub-sys-color-dark: var(--hub-ref-color-gray-900, #212529);