ng-hub-ui-ds 22.3.1 → 22.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -1
- package/docs/variables-css-library.en.md +2157 -0
- package/package.json +16 -4
- package/styles/index.scss +16 -0
- package/styles/mixins/_bridges.scss +170 -0
- package/styles/mixins/_layout.scss +69 -0
- package/styles/tokens/hub-tokens.css +138 -32
- package/styles/tokens/hub-tokens.scss +94 -32
- package/styles/utilities/layout.css +489 -0
- package/styles/utilities/layout.hub.css +490 -0
- package/styles/utilities/layout.hub.scss +252 -0
- package/styles/utilities/layout.scss +251 -0
package/CHANGELOG.md
CHANGED
|
@@ -5,7 +5,29 @@ All notable changes to `ng-hub-ui-ds` are documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
-
## [
|
|
8
|
+
## [22.4.0] - 2026-06-26
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- **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:
|
|
13
|
+
- `@use 'ng-hub-ui-ds/styles/tokens/hub-tokens' with ($hub-accents-extra: (brand: #ff6b00))` — additive: keeps the defaults and merges your variants (recommended).
|
|
14
|
+
- `with ($hub-accents: (...))` or defining `$hub-accents` before importing — full replacement.
|
|
15
|
+
- **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).
|
|
16
|
+
- **`--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.
|
|
17
|
+
- **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`).
|
|
18
|
+
- **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`.
|
|
19
|
+
- **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`, …).
|
|
20
|
+
- **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).
|
|
21
|
+
- The canonical token spec (`docs/variables-css-library.en.md`) now ships **inside this package** as the single source of truth.
|
|
22
|
+
|
|
23
|
+
### Changed
|
|
24
|
+
|
|
25
|
+
- Semantic role derivation (`-subtle` / `-border-subtle` / `-emphasis`) now mixes `in oklch` instead of `in srgb` for perceptually smoother tints.
|
|
26
|
+
- `package.json` exposes new `exports` (`.`/`styles`, `styles/mixins/*`, `styles/utilities/*`) and a `build:styles` script that compiles tokens **and** the utility sheets.
|
|
27
|
+
|
|
28
|
+
### Removed
|
|
29
|
+
|
|
30
|
+
- **`--hub-sys-color-{variant}-dark`** (legacy back-compat alias of `-emphasis`). Consume `-emphasis` (or the new `-on` for contrast text).
|
|
9
31
|
|
|
10
32
|
## [22.3.1] - 2026-06-25
|
|
11
33
|
|