ng-hub-ui-ds 22.5.5 → 22.6.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.
Files changed (14) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/docs/variables-css-library.en.md +201 -112
  3. package/package.json +1 -1
  4. package/styles/mixins/_helpers.scss +12 -0
  5. package/styles/mixins/_surfaces.scss +19 -6
  6. package/styles/mixins/_typography.scss +29 -8
  7. package/styles/tokens/hub-tokens.css +45 -0
  8. package/styles/tokens/hub-tokens.scss +45 -0
  9. package/styles/utilities/layout.css +108 -0
  10. package/styles/utilities/layout.scss +25 -1
  11. package/styles/utilities/surfaces.css +247 -10
  12. package/styles/utilities/surfaces.scss +83 -15
  13. package/styles/utilities/text.css +147 -18
  14. package/styles/utilities/text.scss +66 -0
package/CHANGELOG.md CHANGED
@@ -5,6 +5,42 @@ 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
+ ## [22.6.0] - 2026-07-09
9
+
10
+ ### Added
11
+
12
+ - **utilities — the Bootstrap-standard classes the sheets were missing.** The utility sheets promise Bootstrap-exact names; an audit against `bootstrap@5` found 74 base classes documented there but absent here. All of them now ship, emitted through the existing accent loops and the surface/typography mixins, so they follow a re-theme like everything else:
13
+ - `text.scss` — `.text-{accent}-emphasis` (the accent driven toward the theme's ink; legible as body copy on its own `-subtle` background), `.text-black-50` / `.text-white-50`, `.link-opacity-{10,25,50,75,100}`.
14
+ - `surfaces.scss` — `.bg-body-secondary` / `.bg-body-tertiary` (the **surface** de-emphasis ramp), `.border-{accent}-subtle`, `.border-black` / `.border-white`, `.border-opacity-{10,25,50,75,100}`, and the side-scoped radii `.rounded-{top,bottom,start,end}-{0..5,circle,pill}` — logical corners, so they flip correctly in RTL.
15
+ - `layout.scss` — `.d-inline-grid` (plus its `.d-print-` and responsive variants), `.focus-ring-{accent}`.
16
+ - **tokens — `--hub-sys-text-secondary` and `--hub-sys-text-tertiary`.** Two rungs of the text de-emphasis ramp were consumed by `text-color()` through a fallback but never declared, so `.text-body-secondary` and `.text-body-tertiary` both silently collapsed onto `.text-muted`. They are now derived as alpha over each theme's own `--hub-sys-text-primary` (75% / 50%) — no per-theme value needed, and they survive any re-theme.
17
+ - **mixins — `focus-ring-color($variant)`** (`_helpers.scss`), the public API behind `.focus-ring-*`. It re-tints `--hub-sys-focus-ring-color` and leaves the geometry to `focus-ring()`; set it on the element, not on its focus state.
18
+ - **cascade knobs — `--hub-border-opacity`, `--hub-link-opacity`, `--hub-focus-ring-opacity`**, documented alongside the existing `--hub-bg-opacity` / `--hub-text-opacity` contract.
19
+
20
+ ### Changed
21
+
22
+ - **`.small` / `.large` are relative, not token steps.** `.small` resolves to Bootstrap's `0.875em`: it shrinks against whatever it sits in, so `.small` inside an `<h2>` stays proportional to the heading. Reach for `.fs-sm` / `.fs-lg` when you want a fixed rung of the token scale. Both classes are new in this release, so no shipped behaviour changes.
23
+ - **`border()` and `border-color()` honour `--hub-border-opacity`**, and `border-color()` gained a `$subtle` flag selecting the accent's `-border-subtle` tint. `link-color()` honours `--hub-link-opacity`. All three knobs default to `1`, so existing output is byte-identical.
24
+
25
+ ## [22.5.6] - 2026-07-09
26
+
27
+ ### Changed
28
+
29
+ - **docs (token catalogue) — hygiene wave for the Figma design-system sync.** Documentation-only; no token or compiled-CSS changes.
30
+ - The 41 foundational `sys` rows still flagged `PENDING` (shadows ×6, focus/accessibility ×5, zindex ×8, transitions & states ×10, breakpoints ×6, opacity ×6) were re-flagged **`IN_USE`** — every one of them has been compiled in `styles/tokens/hub-tokens.css` for a while; only the flags were stale. The parity guard now has a foundational shipped-PENDING check (A3) so this cannot drift silently again.
31
+ - The `metrics` token table moved from the Appendix to its canonical place in the Components chapter (`### metrics`), like every other library.
32
+ - The "Light / Dark theme" table is now explicitly marked as illustrative (`parity:ignore` region) — its rows re-document tokens whose canonical rows live in their own sections.
33
+ - **docs (select)** — `--hub-select-dropdown-zindex` documented as the canonical spelling of the select dropdown stacking hook (`ng-hub-ui-forms` 22.8.0); the old `--hub-select-dropdown-z-index` row remains as the deprecated default carrier.
34
+
35
+ ### Added
36
+
37
+ - **docs — "Utility opacity knobs" section**: `--hub-bg-opacity`, `--hub-text-opacity` and `--hub-link-underline-opacity`, the cascade knobs read by the opt-in utility sheets (`.bg-opacity-*`, `.text-opacity-*`, `.link-underline-opacity-*`). They were declared in `styles/utilities/` but had no catalogue row (they were invisible to the parity guard, which now counts ds styles as existing code).
38
+ - **docs — "Accent slots (generated annex)"**: machine-checked inventory of the 60 per-component accent slots (`--hub-<comp>-accent` + derived `-subtle` / `-emphasis` / `-on` roles, plus the per-item runtime slots). The convention was documented only generically; the new parity **check G** validates the annex against the slots actually declared/consumed in the libraries, so design-tool syncs (Figma) have an enumerable source of truth.
39
+
40
+ ### Fixed
41
+
42
+ - **docs — duplicate rows removed**: the stale `PENDING`/`UX-EXCEL` duplicate of `--hub-table-head-bg` (the real row ships since paginable 22.5.0) and the `--hub-sys-border-color-default` duplicate inside the former "Borders and shadows" table (retitled **"Shadows"**; the canonical row lives in "Surfaces, text and borders"). The parity guard now fails on any token documented by two rows.
43
+
8
44
  ## [22.5.5] - 2026-07-09
9
45
 
10
46
  ### Changed
package/docs/variables-css-library.en.md CHANGED
@@ -264,6 +264,8 @@ Semantic neutrals. The token names are stable across themes; only the literal va
264
264
  | `--hub-sys-surface-page` | `#ffffff` | `#121212` |
265
265
  | `--hub-sys-surface-elevated` | `#f8f9fa` | `#1e1e1e` |
266
266
  | `--hub-sys-text-primary` | `#212529` | `#f8f9fa` |
267
+ | `--hub-sys-text-secondary` | `alpha 75% of text-primary` | inherits |
268
+ | `--hub-sys-text-tertiary` | `alpha 50% of text-primary` | inherits |
267
269
  | `--hub-sys-text-muted` | `#6c757d` | `#adb5bd` |
268
270
  | `--hub-sys-border-color-default` | `#dee2e6` | `#343a40` |
269
271
  | `--hub-sys-link-color` | `var(--hub-sys-color-primary)` | inherits |
@@ -342,17 +344,16 @@ Standalone brand aliases (base only — no derived role family):
342
344
  | `--hub-sys-gradient-3` | `#d97706` |
343
345
  | `--hub-sys-gradient-accent` | `linear-gradient(135deg, var(--hub-sys-gradient-1), var(--hub-sys-gradient-2), var(--hub-sys-gradient-3))` |
344
346
 
345
- ### Borders and shadows
347
+ ### Shadows
346
348
 
347
349
  | Token | Layer | Status | Light | Dark | Notes |
348
350
  | -------------------------------- | ----- | --------- | ----------------------------------------- | --------------------------------------- | ---------------------- |
349
- | `--hub-sys-border-color-default` | `sys` | `PENDING` | `#dee2e6` | `#343a40` | Standard border |
350
- | `--hub-sys-shadow-sm` | `sys` | `PENDING` | `0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)` | `0 0.125rem 0.25rem rgba(0, 0, 0, 0.3)` | Low elevation |
351
- | `--hub-sys-shadow` | `sys` | `PENDING` | `0 0.5rem 1rem rgba(0, 0, 0, 0.15)` | `0 0.5rem 1rem rgba(0, 0, 0, 0.3)` | Medium elevation |
352
- | `--hub-sys-shadow-lg` | `sys` | `PENDING` | `0 1rem 3rem rgba(0, 0, 0, 0.175)` | `0 1rem 3rem rgba(0, 0, 0, 0.3)` | High elevation (modal) |
353
- | `--hub-sys-shadow-inset` | `sys` | `PENDING` | `inset 0 1px 2px rgba(0, 0, 0, 0.075)` | `inset 0 1px 2px rgba(0, 0, 0, 0.3)` | Inset shadow |
354
- | `--hub-sys-shadow-none` | `sys` | `PENDING` | `none` | `none` | Explicit no shadow |
355
- | `--hub-sys-shadow-md` | `sys` | `PENDING` | `var(--hub-sys-shadow)` | `var(--hub-sys-shadow)` | Alias of medium shadow |
351
+ | `--hub-sys-shadow-sm` | `sys` | `IN_USE` | `0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)` | `0 0.125rem 0.25rem rgba(0, 0, 0, 0.3)` | Low elevation |
352
+ | `--hub-sys-shadow` | `sys` | `IN_USE` | `0 0.5rem 1rem rgba(0, 0, 0, 0.15)` | `0 0.5rem 1rem rgba(0, 0, 0, 0.3)` | Medium elevation |
353
+ | `--hub-sys-shadow-lg` | `sys` | `IN_USE` | `0 1rem 3rem rgba(0, 0, 0, 0.175)` | `0 1rem 3rem rgba(0, 0, 0, 0.3)` | High elevation (modal) |
354
+ | `--hub-sys-shadow-inset` | `sys` | `IN_USE` | `inset 0 1px 2px rgba(0, 0, 0, 0.075)` | `inset 0 1px 2px rgba(0, 0, 0, 0.3)` | Inset shadow |
355
+ | `--hub-sys-shadow-none` | `sys` | `IN_USE` | `none` | `none` | Explicit no shadow |
356
+ | `--hub-sys-shadow-md` | `sys` | `IN_USE` | `var(--hub-sys-shadow)` | `var(--hub-sys-shadow)` | Alias of medium shadow |
356
357
 
357
358
  ### Radius (sys aliases)
358
359
 
@@ -374,11 +375,11 @@ The following tokens are required for all interactive elements. Do not remove `o
374
375
 
375
376
  | Token | Recommended value | Status |
376
377
  | ----------------------------- | -------------------------- | --------- |
377
- | `--hub-sys-focus-ring-width` | `0.25rem` | `PENDING` |
378
- | `--hub-sys-focus-ring-color` | `rgba(13, 110, 253, 0.25)` | `PENDING` |
379
- | `--hub-sys-focus-ring-offset` | `2px` | `PENDING` |
380
- | `--hub-sys-hit-area-min-size` | `44px` | `PENDING` |
381
- | `--hub-sys-text-contrast-min` | `4.5` | `PENDING` |
378
+ | `--hub-sys-focus-ring-width` | `0.25rem` | `IN_USE` |
379
+ | `--hub-sys-focus-ring-color` | `rgba(13, 110, 253, 0.25)` | `IN_USE` |
380
+ | `--hub-sys-focus-ring-offset` | `2px` | `IN_USE` |
381
+ | `--hub-sys-hit-area-min-size` | `44px` | `IN_USE` |
382
+ | `--hub-sys-text-contrast-min` | `4.5` | `IN_USE` |
382
383
 
383
384
  Accessibility rules for new tokens and components:
384
385
 
@@ -390,56 +391,58 @@ Accessibility rules for new tokens and components:
390
391
 
391
392
  | Token | Recommended value | Status |
392
393
  | --------------------------------- | ----------------- | --------- |
393
- | `--hub-sys-zindex-dropdown` | `1000` | `PENDING` |
394
- | `--hub-sys-zindex-sticky` | `1020` | `PENDING` |
395
- | `--hub-sys-zindex-fixed` | `1030` | `PENDING` |
396
- | `--hub-sys-zindex-modal-backdrop` | `1050` | `PENDING` |
397
- | `--hub-sys-zindex-modal` | `1055` | `PENDING` |
398
- | `--hub-sys-zindex-popover` | `1070` | `PENDING` |
399
- | `--hub-sys-zindex-tooltip` | `1080` | `PENDING` |
400
- | `--hub-sys-zindex-toast` | `1090` | `PENDING` |
394
+ | `--hub-sys-zindex-dropdown` | `1000` | `IN_USE` |
395
+ | `--hub-sys-zindex-sticky` | `1020` | `IN_USE` |
396
+ | `--hub-sys-zindex-fixed` | `1030` | `IN_USE` |
397
+ | `--hub-sys-zindex-modal-backdrop` | `1050` | `IN_USE` |
398
+ | `--hub-sys-zindex-modal` | `1055` | `IN_USE` |
399
+ | `--hub-sys-zindex-popover` | `1070` | `IN_USE` |
400
+ | `--hub-sys-zindex-tooltip` | `1080` | `IN_USE` |
401
+ | `--hub-sys-zindex-toast` | `1090` | `IN_USE` |
401
402
 
402
403
  ### Transitions and states
403
404
 
404
405
  | Token | Recommended value | Status |
405
406
  | ------------------------------- | ------------------------------------------------------------ | --------- |
406
- | `--hub-sys-transition-fast` | `all 0.15s ease-in-out` | `PENDING` |
407
- | `--hub-sys-transition-base` | `all 0.2s ease-in-out` | `PENDING` |
408
- | `--hub-sys-transition-slow` | `all 0.3s ease-in-out` | `PENDING` |
409
- | `--hub-sys-transition-fade` | `opacity 0.15s linear` | `PENDING` |
410
- | `--hub-sys-transition-collapse` | `height 0.35s ease` | `PENDING` |
411
- | `--hub-sys-transition-duration-base` | `260ms` | `PENDING` |
412
- | `--hub-sys-transition-timing-function-base` | `ease` | `PENDING` |
413
- | `--hub-sys-state-active-bg` | `rgba(0, 0, 0, 0.1)` / `rgba(255, 255, 255, 0.1)` (dark) | `PENDING` |
414
- | `--hub-sys-state-hover-bg` | `rgba(0, 0, 0, 0.075)` / `rgba(255, 255, 255, 0.075)` (dark) | `PENDING` |
415
- | `--hub-sys-state-striped-bg` | `rgba(0, 0, 0, 0.05)` / `rgba(255, 255, 255, 0.05)` (dark) | `PENDING` |
407
+ | `--hub-sys-transition-fast` | `all 0.15s ease-in-out` | `IN_USE` |
408
+ | `--hub-sys-transition-base` | `all 0.2s ease-in-out` | `IN_USE` |
409
+ | `--hub-sys-transition-slow` | `all 0.3s ease-in-out` | `IN_USE` |
410
+ | `--hub-sys-transition-fade` | `opacity 0.15s linear` | `IN_USE` |
411
+ | `--hub-sys-transition-collapse` | `height 0.35s ease` | `IN_USE` |
412
+ | `--hub-sys-transition-duration-base` | `260ms` | `IN_USE` |
413
+ | `--hub-sys-transition-timing-function-base` | `ease` | `IN_USE` |
414
+ | `--hub-sys-state-active-bg` | `rgba(0, 0, 0, 0.1)` / `rgba(255, 255, 255, 0.1)` (dark) | `IN_USE` |
415
+ | `--hub-sys-state-hover-bg` | `rgba(0, 0, 0, 0.075)` / `rgba(255, 255, 255, 0.075)` (dark) | `IN_USE` |
416
+ | `--hub-sys-state-striped-bg` | `rgba(0, 0, 0, 0.05)` / `rgba(255, 255, 255, 0.05)` (dark) | `IN_USE` |
416
417
 
417
418
  ### Breakpoints
418
419
 
419
420
  | Token | Recommended value | Status |
420
421
  | -------------------------- | ----------------- | --------- |
421
- | `--hub-sys-breakpoint-xs` | `0` | `PENDING` |
422
- | `--hub-sys-breakpoint-sm` | `576px` | `PENDING` |
423
- | `--hub-sys-breakpoint-md` | `768px` | `PENDING` |
424
- | `--hub-sys-breakpoint-lg` | `992px` | `PENDING` |
425
- | `--hub-sys-breakpoint-xl` | `1200px` | `PENDING` |
426
- | `--hub-sys-breakpoint-xxl` | `1400px` | `PENDING` |
422
+ | `--hub-sys-breakpoint-xs` | `0` | `IN_USE` |
423
+ | `--hub-sys-breakpoint-sm` | `576px` | `IN_USE` |
424
+ | `--hub-sys-breakpoint-md` | `768px` | `IN_USE` |
425
+ | `--hub-sys-breakpoint-lg` | `992px` | `IN_USE` |
426
+ | `--hub-sys-breakpoint-xl` | `1200px` | `IN_USE` |
427
+ | `--hub-sys-breakpoint-xxl` | `1400px` | `IN_USE` |
427
428
 
428
429
  ### Opacity
429
430
 
430
431
  | Token | Recommended value | Status |
431
432
  | ---------------------------- | ----------------- | --------- |
432
- | `--hub-sys-opacity-0` | `0` | `PENDING` |
433
- | `--hub-sys-opacity-25` | `0.25` | `PENDING` |
434
- | `--hub-sys-opacity-50` | `0.5` | `PENDING` |
435
- | `--hub-sys-opacity-75` | `0.75` | `PENDING` |
436
- | `--hub-sys-opacity-100` | `1` | `PENDING` |
437
- | `--hub-sys-opacity-disabled` | `0.65` | `PENDING` |
433
+ | `--hub-sys-opacity-0` | `0` | `IN_USE` |
434
+ | `--hub-sys-opacity-25` | `0.25` | `IN_USE` |
435
+ | `--hub-sys-opacity-50` | `0.5` | `IN_USE` |
436
+ | `--hub-sys-opacity-75` | `0.75` | `IN_USE` |
437
+ | `--hub-sys-opacity-100` | `1` | `IN_USE` |
438
+ | `--hub-sys-opacity-disabled` | `0.65` | `IN_USE` |
438
439
 
439
440
  ### Light / Dark theme
440
441
 
441
442
  Theming rule: the same semantic tokens (`--hub-sys-*`) are used in both themes. Only the assigned values change per theme. Components must consume semantic tokens, not literals.
442
443
 
444
+ <!-- parity:ignore-start — illustrative theming table; every row below re-documents a token whose canonical row lives in its own section -->
445
+
443
446
  | Semantic token | Light | Dark |
444
447
  | -------------------------------- | -------------------------- | --------------------------- |
445
448
  | `--hub-sys-surface-page` | `#ffffff` | `#121212` |
@@ -452,6 +455,8 @@ Theming rule: the same semantic tokens (`--hub-sys-*`) are used in both themes.
452
455
  | `--hub-sys-color-danger` | `#dc3545` | `#ea868f` |
453
456
  | `--hub-sys-focus-ring-color` | `rgba(13, 110, 253, 0.25)` | `rgba(110, 168, 254, 0.35)` |
454
457
 
458
+ <!-- parity:ignore-end -->
459
+
455
460
  CSS implementation:
456
461
 
457
462
  ```css
@@ -500,6 +505,19 @@ Canonical structural tokens (Bootstrap-compatible). Sizing keywords and fraction
500
505
  | `--hub-sys-gap-4` | `var(--hub-ref-space-4)` |
501
506
  | `--hub-sys-gap-5` | `var(--hub-ref-space-5)` |
502
507
 
508
+ ### Utility opacity knobs
509
+
510
+ Cascade knobs read by the opt-in utility sheets and their mixin equivalents. They are deliberately **unprefixed by layer** — they mirror Bootstrap's `--bs-bg-opacity` / `--bs-text-opacity` contract under the `hub` namespace (ds utility class names are Bootstrap-exact). Each utility resolves its colour through `color-mix(… calc(var(--knob, 1) * 100%), transparent)`, so a consumer can re-tune opacity on any subtree by setting the knob; the `.bg-opacity-*`, `.text-opacity-*` and `.link-underline-opacity-*` classes just set these knobs.
511
+
512
+ | Token | Initial value | Usage | Status | Source |
513
+ | ----- | ------------- | ----- | ------ | ------ |
514
+ | `--hub-bg-opacity` | `1` | Opacity multiplier applied by `.bg-*` / `.text-bg-*` surface utilities (set by `.bg-opacity-{10,25,50,75,100}`) | `IN_USE` | `ds/styles/utilities/surfaces.scss:47` |
515
+ | `--hub-text-opacity` | `1` | Opacity multiplier applied by `.text-*` colour utilities (set by `.text-opacity-{25,50,75,100}`) | `IN_USE` | `ds/styles/utilities/text.scss:146` |
516
+ | `--hub-link-underline-opacity` | `1` | Opacity multiplier for the `.link-underline-*` underline colour (set by `.link-underline-opacity-{0,10,25,50,75,100}`) | `IN_USE` | `ds/styles/utilities/text.scss:177` |
517
+ | `--hub-link-opacity` | `1` | Opacity multiplier for the `.link-*` text colour (set by `.link-opacity-{10,25,50,75,100}`) | `IN_USE` | `ds/styles/utilities/text.scss:199` |
518
+ | `--hub-border-opacity` | `1` | Opacity multiplier applied by `.border` / `.border-*` colour utilities (set by `.border-opacity-{10,25,50,75,100}`) | `IN_USE` | `ds/styles/utilities/surfaces.scss:117` |
519
+ | `--hub-focus-ring-opacity` | `0.25` | Alpha the `.focus-ring-*` utilities mix the accent with when re-tinting `--hub-sys-focus-ring-color` | `IN_USE` | `ds/styles/mixins/_helpers.scss:70` |
520
+
503
521
  ## `container` Variables (Inheritable base)
504
522
 
505
523
  These variables form a cross-cutting **re-base hook layer** for the page container and for `generic`, `tabs`, and `tab` slots. They are defined once with real defaults; a container component (e.g. `panels`) reads them for its outer chrome (surface, border, padding, typography) as `var(--hub-container-*, <component fallback>)`. Because they are live CSS variables, **overriding a single container token on a subtree re-bases every descendant container that reads it** — no recompile. Each component still keeps its own `--hub-{component}-*` token as the final fallback.
@@ -557,7 +575,80 @@ Example of base token assignment to a component:
557
575
 
558
576
  ## Components
559
577
 
560
- **Component accent-slot family (generative).** Components that expose a semantic variant read a single local accent slot — `--hub-{component}-accent` — defaulting to `var(--hub-sys-color-primary)`, and derive its role family locally with `color-mix(in oklch, …)` / relative color: `--hub-{component}-accent-subtle`, `-border-subtle`, `-emphasis` and the contrast pair `-on`. Because derivation reads the live slot, a custom accent (e.g. `brand`) works at runtime with a single rule — `[data-variant="brand"] { --hub-{component}-accent: var(--hub-sys-color-brand) }` — without recompiling the library. This family is generated by the slot convention (mirroring the sys family) and is not enumerated row-by-row below.
578
+ **Component accent-slot family (generative).** Components that expose a semantic variant read a single local accent slot — `--hub-{component}-accent` — defaulting to `var(--hub-sys-color-primary)`, and derive its role family locally with `color-mix(in oklch, …)` / relative color: `--hub-{component}-accent-subtle`, `-border-subtle`, `-emphasis` and the contrast pair `-on`. Because derivation reads the live slot, a custom accent (e.g. `brand`) works at runtime with a single rule — `[data-variant="brand"] { --hub-{component}-accent: var(--hub-sys-color-brand) }` — without recompiling the library. This family is generated by the slot convention (mirroring the sys family) and is not re-enumerated inside each component's own table below — the complete slot inventory is machine-checked in the annex that follows (`tokens-parity` check G).
579
+
580
+ ### Accent slots (generated annex)
581
+
582
+ Every accent slot discovered in the libraries (declared or consumed), one row per token. This table is validated against the code by `tokens-parity` **check G** — when a library adds or removes a slot, update this annex to match. Defaults and derivation live in each library's stylesheet: base slots default to `var(--hub-sys-color-primary)` unless the component re-bases them, and the `subtle` / `emphasis` / `on` roles derive from the live slot via `color-mix(in oklch, …)` / relative color.
583
+
584
+ <!-- parity:ignore-start — enumerated and validated by check G, not by the row parser -->
585
+ <!-- accent-annex:start -->
586
+
587
+ | Slot token | Role |
588
+ | ---------- | ---- |
589
+ | `--hub-avatar-accent` | base |
590
+ | `--hub-avatar-accent-subtle` | subtle |
591
+ | `--hub-avatar-accent-emphasis` | emphasis |
592
+ | `--hub-avatar-accent-on` | on |
593
+ | `--hub-badge-accent` | base |
594
+ | `--hub-badge-accent-subtle` | subtle |
595
+ | `--hub-badge-accent-emphasis` | emphasis |
596
+ | `--hub-badge-accent-on` | on |
597
+ | `--hub-board-accent` | base |
598
+ | `--hub-board-accent-subtle` | subtle |
599
+ | `--hub-board-accent-emphasis` | emphasis |
600
+ | `--hub-board-accent-on` | on |
601
+ | `--hub-breadcrumb-accent` | base |
602
+ | `--hub-breadcrumb-accent-subtle` | subtle |
603
+ | `--hub-breadcrumb-accent-emphasis` | emphasis |
604
+ | `--hub-breadcrumb-accent-on` | on |
605
+ | `--hub-btn-accent` | base |
606
+ | `--hub-btn-accent-subtle` | subtle |
607
+ | `--hub-btn-accent-emphasis` | emphasis |
608
+ | `--hub-btn-accent-on` | on |
609
+ | `--hub-calendar-accent` | base |
610
+ | `--hub-calendar-accent-subtle` | subtle |
611
+ | `--hub-calendar-accent-emphasis` | emphasis |
612
+ | `--hub-calendar-accent-on` | on |
613
+ | `--hub-dropdown-item-accent` | base (per-item runtime slot, set via host `[style.--hub-dropdown-item-accent]`) |
614
+ | `--hub-dropdown-panel-accent` | base (per-panel runtime slot) |
615
+ | `--hub-fab-accent` | base |
616
+ | `--hub-list-accent` | base |
617
+ | `--hub-list-accent-subtle` | subtle |
618
+ | `--hub-list-accent-emphasis` | emphasis |
619
+ | `--hub-list-accent-on` | on |
620
+ | `--hub-modal-accent` | base |
621
+ | `--hub-modal-accent-subtle` | subtle |
622
+ | `--hub-modal-accent-emphasis` | emphasis |
623
+ | `--hub-modal-accent-on` | on |
624
+ | `--hub-nav-accent` | base |
625
+ | `--hub-nav-accent-subtle` | subtle |
626
+ | `--hub-nav-accent-emphasis` | emphasis |
627
+ | `--hub-nav-accent-on` | on |
628
+ | `--hub-panels-accent` | base |
629
+ | `--hub-panels-accent-subtle` | subtle |
630
+ | `--hub-panels-accent-emphasis` | emphasis |
631
+ | `--hub-panels-accent-on` | on |
632
+ | `--hub-panels-alert-accent` | base (alert appearance slot) |
633
+ | `--hub-panels-card-accent` | base (card variant tint slot) |
634
+ | `--hub-progress-accent` | base |
635
+ | `--hub-segmented-accent` | base |
636
+ | `--hub-speed-dial-item-accent` | base (per-item runtime slot) |
637
+ | `--hub-stepper-accent` | base |
638
+ | `--hub-stepper-accent-subtle` | subtle |
639
+ | `--hub-stepper-accent-emphasis` | emphasis |
640
+ | `--hub-stepper-accent-on` | on |
641
+ | `--hub-table-accent` | base |
642
+ | `--hub-table-accent-subtle` | subtle |
643
+ | `--hub-table-accent-emphasis` | emphasis |
644
+ | `--hub-table-accent-on` | on |
645
+ | `--hub-toast-accent` | base |
646
+ | `--hub-toast-accent-subtle` | subtle |
647
+ | `--hub-toast-accent-emphasis` | emphasis |
648
+ | `--hub-toast-accent-on` | on |
649
+
650
+ <!-- accent-annex:end -->
651
+ <!-- parity:ignore-end -->
561
652
 
562
653
  Unified component inventory with current (`IN_USE`) and planned (`PENDING`) variables, always using the final canonical token name.
563
654
 
@@ -1235,18 +1326,19 @@ The `detail` token set is defined as a single, standardized collection that supp
1235
1326
  | `--hub-select-value-bg` | `var(--hub-sys-surface-elevated, #f8f9fa)` | Select value bg | `IN_USE` | `forms/src/lib/styles/_tokens.scss:286` |
1236
1327
  | `--hub-select-value-border-radius` | `var(--hub-ref-radius-sm, 0.25rem)` | Select value border radius | `IN_USE` | `forms/src/lib/styles/_tokens.scss:288` |
1237
1328
  | `--hub-select-value-color` | `var(--hub-sys-text-primary, #212529)` | Select value color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:287` |
1238
- | `--hub-select-button-bg` | `var(--hub-sys-surface-page, #fff)` | Segmented select button background | `IN_USE` | `forms/src/lib/styles/_tokens.scss:328` |
1239
- | `--hub-select-button-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Segmented select button border color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:330` |
1240
- | `--hub-select-button-color` | `var(--hub-sys-text-primary, #212529)` | Segmented select button text color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:329` |
1241
- | `--hub-select-button-gap` | `var(--hub-ref-space-2, 0.5rem)` | Segmented select button gap | `IN_USE` | `forms/src/lib/styles/_tokens.scss:333` |
1242
- | `--hub-select-button-padding-x` | `var(--hub-ref-space-3, 1rem)` | Segmented select button horizontal padding | `IN_USE` | `forms/src/lib/styles/_tokens.scss:331` |
1243
- | `--hub-select-button-padding-y` | `var(--hub-ref-space-2, 0.5rem)` | Segmented select button vertical padding | `IN_USE` | `forms/src/lib/styles/_tokens.scss:332` |
1244
- | `--hub-select-button-selected-bg` | `var(--hub-sys-color-primary, #0d6efd)` | Selected segmented button background | `IN_USE` | `forms/src/lib/styles/_tokens.scss:334` |
1245
- | `--hub-select-button-selected-border-color` | `var(--hub-sys-color-primary, #0d6efd)` | Selected segmented button border color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:337` |
1246
- | `--hub-select-button-selected-color` | `var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff))` | Selected segmented button text color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:336` |
1329
+ | `--hub-select-button-bg` | `var(--hub-sys-surface-page, #fff)` | Segmented select button background | `IN_USE` | `forms/src/lib/styles/_tokens.scss:331` |
1330
+ | `--hub-select-button-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Segmented select button border color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:333` |
1331
+ | `--hub-select-button-color` | `var(--hub-sys-text-primary, #212529)` | Segmented select button text color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:332` |
1332
+ | `--hub-select-button-gap` | `var(--hub-ref-space-2, 0.5rem)` | Segmented select button gap | `IN_USE` | `forms/src/lib/styles/_tokens.scss:336` |
1333
+ | `--hub-select-button-padding-x` | `var(--hub-ref-space-3, 1rem)` | Segmented select button horizontal padding | `IN_USE` | `forms/src/lib/styles/_tokens.scss:334` |
1334
+ | `--hub-select-button-padding-y` | `var(--hub-ref-space-2, 0.5rem)` | Segmented select button vertical padding | `IN_USE` | `forms/src/lib/styles/_tokens.scss:335` |
1335
+ | `--hub-select-button-selected-bg` | `var(--hub-sys-color-primary, #0d6efd)` | Selected segmented button background | `IN_USE` | `forms/src/lib/styles/_tokens.scss:337` |
1336
+ | `--hub-select-button-selected-border-color` | `var(--hub-sys-color-primary, #0d6efd)` | Selected segmented button border color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:340` |
1337
+ | `--hub-select-button-selected-color` | `var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff))` | Selected segmented button text color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:339` |
1247
1338
  | `--hub-select-min-height` | `2.5rem` | Select control minimum height | `IN_USE` | `forms/src/lib/styles/_tokens.scss:273` |
1248
1339
  | `--hub-select-optgroup-color` | `var(--hub-sys-text-muted, #6c757d)` | Select option group label color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:285` |
1249
- | `--hub-select-dropdown-z-index` | `calc(var(--hub-sys-zindex-modal, 1055) + 5)` | Stacking of the ng-select dropdown panel; sits above HubModal so a select inside a modal is not clipped | `IN_USE` | `forms/src/lib/styles/_tokens.scss:297` |
1340
+ | `--hub-select-dropdown-zindex` | `var(--hub-select-dropdown-z-index, calc(var(--hub-sys-zindex-modal, 1055) + 5))` | Stacking of the ng-select dropdown panel (canonical `zindex` spelling); sits above HubModal so a select inside a modal is not clipped | `IN_USE` | `forms/src/lib/select/select.component.scss:179` |
1341
+ | `--hub-select-dropdown-z-index` | `calc(var(--hub-sys-zindex-modal, 1055) + 5)` | Deprecated spelling — default carrier and override bridge for `--hub-select-dropdown-zindex`; scheduled for removal after one release cycle | `IN_USE` | `forms/src/lib/styles/_tokens.scss:300` |
1250
1342
 
1251
1343
  > **Superseded proposals (removed):** the former `--hub-select-btn-*` PENDING block shipped as the `--hub-select-button-*` tokens listed above, and the `--hub-select-checkbox-input-*` / `--hub-select-radio-input-*` proposals were dropped — option checkboxes/radios in the dropdown reuse the `check` component tokens (`--hub-check-*`, see [`check`](#check)), applied in `forms/src/lib/select/select.component.scss`.
1252
1344
 
@@ -1270,31 +1362,31 @@ The `detail` token set is defined as a single, standardized collection that supp
1270
1362
 
1271
1363
  | Token | Initial value | Usage | Status | Source |
1272
1364
  | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------------------------------- |
1273
- | `--hub-datepicker-icon` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236c757d' d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E")` | Datepicker icon | `IN_USE` | `forms/src/lib/styles/_tokens.scss:300` |
1274
- | `--hub-datepicker-icon-size` | `1rem` | Datepicker icon size | `IN_USE` | `forms/src/lib/styles/_tokens.scss:301` |
1275
- | `--hub-datepicker-icon-width` | `2.5rem` | Datepicker icon width | `IN_USE` | `forms/src/lib/styles/_tokens.scss:302` |
1276
- | `--hub-daterangepicker-padding-x` | `var(--hub-ref-space-3, 1rem)` | Calendar panel horizontal padding | `IN_USE` | `forms/src/lib/styles/_tokens.scss:310` |
1277
- | `--hub-daterangepicker-padding-y` | `var(--hub-ref-space-3, 1rem)` | Calendar panel vertical padding | `IN_USE` | `forms/src/lib/styles/_tokens.scss:311` |
1365
+ | `--hub-datepicker-icon` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236c757d' d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E")` | Datepicker icon | `IN_USE` | `forms/src/lib/styles/_tokens.scss:303` |
1366
+ | `--hub-datepicker-icon-size` | `1rem` | Datepicker icon size | `IN_USE` | `forms/src/lib/styles/_tokens.scss:304` |
1367
+ | `--hub-datepicker-icon-width` | `2.5rem` | Datepicker icon width | `IN_USE` | `forms/src/lib/styles/_tokens.scss:305` |
1368
+ | `--hub-daterangepicker-padding-x` | `var(--hub-ref-space-3, 1rem)` | Calendar panel horizontal padding | `IN_USE` | `forms/src/lib/styles/_tokens.scss:313` |
1369
+ | `--hub-daterangepicker-padding-y` | `var(--hub-ref-space-3, 1rem)` | Calendar panel vertical padding | `IN_USE` | `forms/src/lib/styles/_tokens.scss:314` |
1278
1370
 
1279
1371
  ### `daterangepicker`
1280
1372
 
1281
1373
  | Token | Initial value | Usage | Status | Source |
1282
1374
  | ----------------------------------------------- | ----------------------------------------------------------- | ----------------------------------------------------------------- | -------- | ----------------------------------------- |
1283
- | `--hub-daterangepicker-active-bg` | `var(--hub-sys-color-primary, #0d6efd)` | Daterangepicker active bg | `IN_USE` | `forms/src/lib/styles/_tokens.scss:316` |
1284
- | `--hub-daterangepicker-active-color` | `var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff))` | Daterangepicker active color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:318` |
1285
- | `--hub-daterangepicker-bg` | `var(--hub-sys-surface-page, #fff)` | Daterangepicker bg | `IN_USE` | `forms/src/lib/styles/_tokens.scss:305` |
1286
- | `--hub-daterangepicker-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Daterangepicker border color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:307` |
1287
- | `--hub-daterangepicker-border-radius` | `var(--hub-ref-radius-md, 0.375rem)` | Daterangepicker border radius | `IN_USE` | `forms/src/lib/styles/_tokens.scss:308` |
1288
- | `--hub-daterangepicker-box-shadow` | `var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15))` | Daterangepicker box shadow | `IN_USE` | `forms/src/lib/styles/_tokens.scss:309` |
1289
- | `--hub-daterangepicker-cell-border-radius` | `var(--hub-ref-radius-sm, 0.25rem)` | Daterangepicker cell border radius | `IN_USE` | `forms/src/lib/styles/_tokens.scss:314` |
1290
- | `--hub-daterangepicker-cell-color` | `var(--hub-sys-text-primary, #212529)` | Daterangepicker cell color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:313` |
1291
- | `--hub-daterangepicker-cell-hover-bg` | `var(--hub-sys-surface-elevated, #f8f9fa)` | Daterangepicker cell hover bg | `IN_USE` | `forms/src/lib/styles/_tokens.scss:315` |
1292
- | `--hub-daterangepicker-cell-size` | `2rem` | Daterangepicker cell size | `IN_USE` | `forms/src/lib/styles/_tokens.scss:312` |
1293
- | `--hub-daterangepicker-color` | `var(--hub-sys-text-primary, #212529)` | Daterangepicker color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:306` |
1294
- | `--hub-daterangepicker-in-range-bg` | `color-mix(in oklch, var(--hub-sys-color-primary, #0d6efd) 14%, transparent)` | Daterangepicker in range bg | `IN_USE` | `forms/src/lib/styles/_tokens.scss:322` |
1295
- | `--hub-daterangepicker-nav-arrow-color` | `var(--hub-sys-text-muted, #6c757d)` | Daterangepicker nav arrow color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:324` |
1296
- | `--hub-daterangepicker-nav-arrow-hover-color` | `var(--hub-sys-text-primary, #212529)` | Daterangepicker nav arrow hover color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:325` |
1297
- | `--hub-daterangepicker-off-color` | `var(--hub-sys-text-muted, #6c757d)` | Daterangepicker off color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:323` |
1375
+ | `--hub-daterangepicker-active-bg` | `var(--hub-sys-color-primary, #0d6efd)` | Daterangepicker active bg | `IN_USE` | `forms/src/lib/styles/_tokens.scss:319` |
1376
+ | `--hub-daterangepicker-active-color` | `var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff))` | Daterangepicker active color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:321` |
1377
+ | `--hub-daterangepicker-bg` | `var(--hub-sys-surface-page, #fff)` | Daterangepicker bg | `IN_USE` | `forms/src/lib/styles/_tokens.scss:308` |
1378
+ | `--hub-daterangepicker-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Daterangepicker border color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:310` |
1379
+ | `--hub-daterangepicker-border-radius` | `var(--hub-ref-radius-md, 0.375rem)` | Daterangepicker border radius | `IN_USE` | `forms/src/lib/styles/_tokens.scss:311` |
1380
+ | `--hub-daterangepicker-box-shadow` | `var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15))` | Daterangepicker box shadow | `IN_USE` | `forms/src/lib/styles/_tokens.scss:312` |
1381
+ | `--hub-daterangepicker-cell-border-radius` | `var(--hub-ref-radius-sm, 0.25rem)` | Daterangepicker cell border radius | `IN_USE` | `forms/src/lib/styles/_tokens.scss:317` |
1382
+ | `--hub-daterangepicker-cell-color` | `var(--hub-sys-text-primary, #212529)` | Daterangepicker cell color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:316` |
1383
+ | `--hub-daterangepicker-cell-hover-bg` | `var(--hub-sys-surface-elevated, #f8f9fa)` | Daterangepicker cell hover bg | `IN_USE` | `forms/src/lib/styles/_tokens.scss:318` |
1384
+ | `--hub-daterangepicker-cell-size` | `2rem` | Daterangepicker cell size | `IN_USE` | `forms/src/lib/styles/_tokens.scss:315` |
1385
+ | `--hub-daterangepicker-color` | `var(--hub-sys-text-primary, #212529)` | Daterangepicker color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:309` |
1386
+ | `--hub-daterangepicker-in-range-bg` | `color-mix(in oklch, var(--hub-sys-color-primary, #0d6efd) 14%, transparent)` | Daterangepicker in range bg | `IN_USE` | `forms/src/lib/styles/_tokens.scss:325` |
1387
+ | `--hub-daterangepicker-nav-arrow-color` | `var(--hub-sys-text-muted, #6c757d)` | Daterangepicker nav arrow color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:327` |
1388
+ | `--hub-daterangepicker-nav-arrow-hover-color` | `var(--hub-sys-text-primary, #212529)` | Daterangepicker nav arrow hover color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:328` |
1389
+ | `--hub-daterangepicker-off-color` | `var(--hub-sys-text-muted, #6c757d)` | Daterangepicker off color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:326` |
1298
1390
 
1299
1391
  ### `label`
1300
1392
 
@@ -1328,14 +1420,14 @@ The `detail` token set is defined as a single, standardized collection that supp
1328
1420
  | `--hub-slider-percent` | runtime (0–100) | Current value position driving fill and thumb/tooltip | `INTERNAL` | `forms/src/lib/components/slider/slider.component.html:7` |
1329
1421
  | `--hub-slider-track-fill` | `linear-gradient(var(--hub-slider-track-fill-bg), var(--hub-slider-track-fill-bg))` | Gradient-capable fill background image for the slider track (clipped to the current percentage) | `IN_USE` | `forms/src/lib/styles/_tokens.scss:248` |
1330
1422
  | `--hub-slider-value-space` | `0` | Vertical headroom above the rail for the value bubble; collapsed to 0 by the flush (labelless) modifier | `IN_USE` | `forms/src/lib/components/slider/slider.component.scss:21` |
1331
- | `--hub-segmented-padding-y` | `var(--hub-ref-space-2, 0.5rem)` | Vertical padding of each segment (md) | `IN_USE` | `forms/src/lib/styles/_tokens.scss:351` |
1332
- | `--hub-segmented-padding-x` | `var(--hub-ref-space-3, 1rem)` | Horizontal padding of each segment (md) | `IN_USE` | `forms/src/lib/styles/_tokens.scss:350` |
1333
- | `--hub-segmented-gap` | `0.25rem` | Gap between segments and inner track padding | `IN_USE` | `forms/src/lib/styles/_tokens.scss:349` |
1334
- | `--hub-segmented-radius` | `var(--hub-ref-radius-md, 0.375rem)` | Corner radius of the hub-segmented track | `IN_USE` | `forms/src/lib/styles/_tokens.scss:348` |
1335
- | `--hub-segmented-selected-color` | `var(--hub-sys-text-primary, #212529)` | Selected segment text colour | `IN_USE` | `forms/src/lib/styles/_tokens.scss:347` |
1336
- | `--hub-segmented-selected-bg` | `var(--hub-sys-surface-page, #fff)` | Selected segment background | `IN_USE` | `forms/src/lib/styles/_tokens.scss:346` |
1337
- | `--hub-segmented-bg` | `var(--hub-sys-surface-elevated, #f8f9fa)` | Track background of the hub-segmented bar | `IN_USE` | `forms/src/lib/styles/_tokens.scss:340` |
1338
- | `--hub-segmented-indicator-transition` | `0.2s ease` | Duration/easing of the single-mode sliding indicator as it moves between options | `IN_USE` | `forms/src/lib/styles/_tokens.scss:353` |
1423
+ | `--hub-segmented-padding-y` | `var(--hub-ref-space-2, 0.5rem)` | Vertical padding of each segment (md) | `IN_USE` | `forms/src/lib/styles/_tokens.scss:354` |
1424
+ | `--hub-segmented-padding-x` | `var(--hub-ref-space-3, 1rem)` | Horizontal padding of each segment (md) | `IN_USE` | `forms/src/lib/styles/_tokens.scss:353` |
1425
+ | `--hub-segmented-gap` | `0.25rem` | Gap between segments and inner track padding | `IN_USE` | `forms/src/lib/styles/_tokens.scss:352` |
1426
+ | `--hub-segmented-radius` | `var(--hub-ref-radius-md, 0.375rem)` | Corner radius of the hub-segmented track | `IN_USE` | `forms/src/lib/styles/_tokens.scss:351` |
1427
+ | `--hub-segmented-selected-color` | `var(--hub-sys-text-primary, #212529)` | Selected segment text colour | `IN_USE` | `forms/src/lib/styles/_tokens.scss:350` |
1428
+ | `--hub-segmented-selected-bg` | `var(--hub-sys-surface-page, #fff)` | Selected segment background | `IN_USE` | `forms/src/lib/styles/_tokens.scss:349` |
1429
+ | `--hub-segmented-bg` | `var(--hub-sys-surface-elevated, #f8f9fa)` | Track background of the hub-segmented bar | `IN_USE` | `forms/src/lib/styles/_tokens.scss:343` |
1430
+ | `--hub-segmented-indicator-transition` | `0.2s ease` | Duration/easing of the single-mode sliding indicator as it moves between options | `IN_USE` | `forms/src/lib/styles/_tokens.scss:356` |
1339
1431
  | `--hub-segmented-indicator-x` | `—` | Internal runtime X offset of the sliding indicator (set from the selected option's measured geometry) | `INTERNAL` | `forms/src/lib/components/segmented/segmented.component.scss:27` |
1340
1432
  | `--hub-segmented-indicator-y` | `—` | Internal runtime Y offset of the sliding indicator (set from the selected option's measured geometry) | `INTERNAL` | `forms/src/lib/components/segmented/segmented.component.scss:28` |
1341
1433
  | `--hub-segmented-indicator-width` | `—` | Internal runtime width of the sliding indicator (set from the selected option's measured geometry) | `INTERNAL` | `forms/src/lib/components/segmented/segmented.component.scss:29` |
@@ -1634,7 +1726,6 @@ The standalone `tabs` proposal was **superseded**: the tabs UI shipped inside `n
1634
1726
  | `--hub-table-container-padding-y` | `var(--hub-ref-space-3, 1rem)` | Vertical padding of table container | `PENDING` | `UX-EXCEL` |
1635
1727
  | `--hub-table-filter-count-bg` | `var(--hub-sys-color-success, #198754)` | Background of the active-filters count badge | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:159` |
1636
1728
  | `--hub-table-filter-count-color` | `var(--hub-ref-color-white, #fff)` | Text color of the active-filters count badge | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:160` |
1637
- | `--hub-table-head-bg` | `var(--hub-ref-surface-2, #f8f9fa)` | Background of the table header row | `PENDING` | `UX-EXCEL` |
1638
1729
  | `--hub-table-head-border-radius` | `var(--hub-table-border-radius, var(--hub-ref-radius-md, 0.375rem))` | Border radius of the table header row | `PENDING` | `UX-EXCEL` |
1639
1730
  | `--hub-table-tooltip-bg` | `var(--hub-sys-text-primary, #212529)` | Background of column tooltips | `PENDING` | `INVENTORY` |
1640
1731
  | `--hub-table-tooltip-border-radius` | `var(--hub-ref-radius-sm, 0.25rem)` | Border radius of column tooltips | `PENDING` | `INVENTORY` |
@@ -2243,6 +2334,33 @@ Agnostic icon renderer (`ng-hub-ui-icons`). One token set themes any icon pack (
2243
2334
  | `--hub-icon-grade` | `0` | Variable-font `GRAD` axis (Material Symbols) | `IN_USE` | `icons/src/lib/styles/_icon-base.scss:18` |
2244
2335
  | `--hub-icon-optical-size` | `24` | Variable-font `opsz` axis (Material Symbols) | `IN_USE` | `icons/src/lib/styles/_icon-base.scss:19` |
2245
2336
 
2337
+ ### `metrics`
2338
+
2339
+ > `ng-hub-ui-metrics` — `hub-progress` / `hub-meter` / `hub-ring`. Consumer-facing hooks are `IN_USE`; the runtime-written variables the components set from their value inputs (`--hub-progress-value`, `--hub-meter-value`, `--hub-meter-fill`) are `INTERNAL`, so `docs:cssvars` skips them.
2340
+
2341
+ | Token | Initial value | Usage | Status | Source |
2342
+ | ----- | ------------- | ----- | ------ | ------ |
2343
+ | `--hub-progress-track-bg` | `color-mix(in oklch, var(--hub-progress-accent) 16%, transparent)` | Progress track background (subtle accent tint) | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:11` |
2344
+ | `--hub-progress-indicator-bg` | `var(--hub-progress-accent)` | Filled progress indicator colour | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:12` |
2345
+ | `--hub-progress-height` | `var(--hub-ref-space-2, 0.5rem)` | Progress bar thickness (sm/md/lg override it) | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:13` |
2346
+ | `--hub-progress-radius` | `var(--hub-ref-radius-pill, 50rem)` | Progress bar corner radius | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:14` |
2347
+ | `--hub-progress-value` | `0%` | Internal runtime width of the indicator (set from the value input) | `INTERNAL` | `metrics/src/lib/components/progress/progress.component.scss:41` |
2348
+ | `--hub-meter-track-bg` | `color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 16%, transparent)` | Meter track background | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:11` |
2349
+ | `--hub-meter-low-bg` | `var(--hub-sys-color-danger, #dc3545)` | Meter fill when the value is below target | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:12` |
2350
+ | `--hub-meter-optimum-bg` | `var(--hub-sys-color-success, #198754)` | Meter fill when the value is on target | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:13` |
2351
+ | `--hub-meter-high-bg` | `var(--hub-sys-color-warning, #ffc107)` | Meter fill when the value is above target | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:14` |
2352
+ | `--hub-meter-height` | `var(--hub-ref-space-2, 0.5rem)` | Meter bar thickness | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:15` |
2353
+ | `--hub-meter-radius` | `var(--hub-ref-radius-pill, 50rem)` | Meter bar corner radius | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:16` |
2354
+ | `--hub-meter-fill` | `var(--hub-meter-optimum-bg)` | Internal band-selected meter fill colour | `INTERNAL` | `metrics/src/lib/components/meter/meter.component.scss:18` |
2355
+ | `--hub-meter-value` | `0%` | Internal runtime width of the meter fill (set from the value input) | `INTERNAL` | `metrics/src/lib/components/meter/meter.component.scss:37` |
2356
+ | `--hub-ring-size` | `4rem` | Ring outer diameter (overridden per-instance from size) | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:12` |
2357
+ | `--hub-ring-thickness` | `var(--hub-ref-space-2, 0.5rem)` | Ring stroke width (overridden per-instance from thickness) | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:13` |
2358
+ | `--hub-ring-track` | `color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 20%, transparent)` | Ring track stroke colour | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:14` |
2359
+ | `--hub-ring-indicator` | `var(--hub-sys-color-primary, #0d6efd)` | Ring indicator stroke colour (neutral band) | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:15` |
2360
+ | `--hub-ring-caption-color` | `var(--hub-sys-text-primary, #212529)` | Ring centre caption colour | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:16` |
2361
+ | `--hub-ring-low-color` | `var(--hub-sys-color-danger, #dc3545)` | Ring stroke below the low threshold | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:17` |
2362
+ | `--hub-ring-high-color` | `var(--hub-sys-color-success, #198754)` | Ring stroke at/above the high threshold | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:18` |
2363
+
2246
2364
  ## Appendix
2247
2365
 
2248
2366
  ### Glossary
@@ -2354,32 +2472,3 @@ Unique custom properties **declared** in each library's source (`.scss` + inline
2354
2472
 
2355
2473
  Template variables with interpolation are already documented in de-interpolated format within the `paginable` section.
2356
2474
 
2357
- ### Metrics (`ng-hub-ui-metrics`)
2358
-
2359
- > `ng-hub-ui-metrics` (hub-progress / hub-meter / hub-ring) exposes the theming tokens below, projected onto the `metrics` docs page through the docs `SECTION_MAP`. Consumer-facing hooks are `IN_USE`; the runtime-written variables the components set from their value inputs (`--hub-progress-value`, `--hub-meter-value`, `--hub-meter-fill`) are `INTERNAL`, so `docs:cssvars` skips them.
2360
-
2361
- #### metrics
2362
-
2363
- | Token | Initial value | Usage | Status | Source |
2364
- | ----- | ------------- | ----- | ------ | ------ |
2365
- | `--hub-progress-track-bg` | `color-mix(in oklch, var(--hub-progress-accent) 16%, transparent)` | Progress track background (subtle accent tint) | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:11` |
2366
- | `--hub-progress-indicator-bg` | `var(--hub-progress-accent)` | Filled progress indicator colour | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:12` |
2367
- | `--hub-progress-height` | `var(--hub-ref-space-2, 0.5rem)` | Progress bar thickness (sm/md/lg override it) | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:13` |
2368
- | `--hub-progress-radius` | `var(--hub-ref-radius-pill, 50rem)` | Progress bar corner radius | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:14` |
2369
- | `--hub-progress-value` | `0%` | Internal runtime width of the indicator (set from the value input) | `INTERNAL` | `metrics/src/lib/components/progress/progress.component.scss:41` |
2370
- | `--hub-meter-track-bg` | `color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 16%, transparent)` | Meter track background | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:11` |
2371
- | `--hub-meter-low-bg` | `var(--hub-sys-color-danger, #dc3545)` | Meter fill when the value is below target | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:12` |
2372
- | `--hub-meter-optimum-bg` | `var(--hub-sys-color-success, #198754)` | Meter fill when the value is on target | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:13` |
2373
- | `--hub-meter-high-bg` | `var(--hub-sys-color-warning, #ffc107)` | Meter fill when the value is above target | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:14` |
2374
- | `--hub-meter-height` | `var(--hub-ref-space-2, 0.5rem)` | Meter bar thickness | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:15` |
2375
- | `--hub-meter-radius` | `var(--hub-ref-radius-pill, 50rem)` | Meter bar corner radius | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:16` |
2376
- | `--hub-meter-fill` | `var(--hub-meter-optimum-bg)` | Internal band-selected meter fill colour | `INTERNAL` | `metrics/src/lib/components/meter/meter.component.scss:18` |
2377
- | `--hub-meter-value` | `0%` | Internal runtime width of the meter fill (set from the value input) | `INTERNAL` | `metrics/src/lib/components/meter/meter.component.scss:37` |
2378
- | `--hub-ring-size` | `4rem` | Ring outer diameter (overridden per-instance from size) | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:12` |
2379
- | `--hub-ring-thickness` | `var(--hub-ref-space-2, 0.5rem)` | Ring stroke width (overridden per-instance from thickness) | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:13` |
2380
- | `--hub-ring-track` | `color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 20%, transparent)` | Ring track stroke colour | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:14` |
2381
- | `--hub-ring-indicator` | `var(--hub-sys-color-primary, #0d6efd)` | Ring indicator stroke colour (neutral band) | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:15` |
2382
- | `--hub-ring-caption-color` | `var(--hub-sys-text-primary, #212529)` | Ring centre caption colour | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:16` |
2383
- | `--hub-ring-low-color` | `var(--hub-sys-color-danger, #dc3545)` | Ring stroke below the low threshold | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:17` |
2384
- | `--hub-ring-high-color` | `var(--hub-sys-color-success, #198754)` | Ring stroke at/above the high threshold | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:18` |
2385
-
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ng-hub-ui-ds",
3
- "version": "22.5.5",
3
+ "version": "22.6.0",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "build:tokens": "sass styles/tokens/hub-tokens.scss styles/tokens/hub-tokens.css --style=expanded --no-source-map",
package/styles/mixins/_helpers.scss CHANGED
@@ -60,3 +60,15 @@
60
60
  outline: 0;
61
61
  box-shadow: 0 0 0 var(--hub-sys-focus-ring-width) var(--hub-sys-focus-ring-color);
62
62
  }
63
+
64
+ /// Re-tints the ring colour token from an accent of the open map, leaving the
65
+ /// geometry to `focus-ring()`. Set it on the element, not on its focus state —
66
+ /// it declares a variable, it does not paint.
67
+ /// @param {String} $variant Accent name of the open map.
68
+ @mixin focus-ring-color($variant: primary) {
69
+ --hub-sys-focus-ring-color: color-mix(
70
+ in srgb,
71
+ var(--hub-sys-color-#{$variant}) calc(var(--hub-focus-ring-opacity, 0.25) * 100%),
72
+ transparent
73
+ );
74
+ }
package/styles/mixins/_surfaces.scss CHANGED
@@ -18,7 +18,7 @@
18
18
  /// page surface (`body`) or `transparent`. The colour is emitted through
19
19
  /// `--hub-bg-opacity` (default 1), so `.bg-opacity-*` (or a local override of
20
20
  /// that property) fades it without extra classes.
21
- /// @param {String} $variant Accent name, or body | transparent.
21
+ /// @param {String} $variant Accent name, or body | body-secondary | body-tertiary | transparent.
22
22
  /// @param {Boolean} $subtle Use the accent's `-subtle` tint.
23
23
  @mixin bg($variant: body, $subtle: false) {
24
24
  @if $variant == transparent {
@@ -27,6 +27,12 @@
27
27
  $color: var(--hub-sys-color-#{$variant});
28
28
  @if $variant == body {
29
29
  $color: var(--hub-sys-surface-page);
30
+ } @else if $variant == body-tertiary {
31
+ $color: var(--hub-sys-surface-elevated);
32
+ } @else if $variant == body-secondary {
33
+ // One step past the elevated surface, toward the theme's ink — so it
34
+ // darkens on a light theme and lightens on a dark one.
35
+ $color: color-mix(in oklch, var(--hub-sys-surface-elevated) 92%, var(--hub-sys-color-ink));
30
36
  } @else if $subtle {
31
37
  $color: var(--hub-sys-color-#{$variant}-subtle);
32
38
  }
@@ -42,17 +48,24 @@
42
48
  color: var(--hub-sys-color-#{$variant}-on);
43
49
  }
44
50
 
45
- /// Solid border on all sides, token-driven colour.
51
+ /// Solid border on all sides, token-driven colour. The colour is emitted through
52
+ /// `--hub-border-opacity` (default 1), so `.border-opacity-*` fades it.
46
53
  /// @param {Number} $width Border width.
47
54
  /// @param {String} $color Any CSS colour; defaults to the canonical border token.
48
55
  @mixin border($width: 1px, $color: var(--hub-sys-border-color-default)) {
49
- border: $width solid $color;
56
+ border: $width solid color-mix(in srgb, #{$color} calc(var(--hub-border-opacity, 1) * 100%), transparent);
50
57
  }
51
58
 
52
- /// Border colour from an accent of the open map (keeps width/style untouched).
59
+ /// Border colour from an accent of the open map (keeps width/style untouched),
60
+ /// honouring `--hub-border-opacity`.
53
61
  /// @param {String} $variant Accent name of the open map.
54
- @mixin border-color($variant: primary) {
55
- border-color: var(--hub-sys-color-#{$variant});
62
+ /// @param {Boolean} $subtle Use the accent's `-border-subtle` tint.
63
+ @mixin border-color($variant: primary, $subtle: false) {
64
+ $color: var(--hub-sys-color-#{$variant});
65
+ @if $subtle {
66
+ $color: var(--hub-sys-color-#{$variant}-border-subtle);
67
+ }
68
+ border-color: color-mix(in srgb, #{$color} calc(var(--hub-border-opacity, 1) * 100%), transparent);
56
69
  }
57
70
 
58
71
  /// Corner radius from the canonical scale.