ng-hub-ui-ds 22.9.1 → 22.9.2
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 +58 -35
- package/docs/variables-css-library.en.md +150 -130
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,31 @@ 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.9.2] - 2026-09-07
|
|
9
|
+
|
|
10
|
+
### Changed
|
|
11
|
+
|
|
12
|
+
- **The token catalogue catches up with the release of 2026-09-07.** `docs/variables-css-library.en.md`
|
|
13
|
+
travels inside the published package, so it is the one place a consumer can read what every
|
|
14
|
+
`--hub-*` token is for without cloning the repository. Six libraries moved their defaults off their
|
|
15
|
+
own element in that release, and the `Source` column pointed at lines that had shifted. All of that
|
|
16
|
+
is now in step with the code, which is what `npm run tokens:parity` checks on every build.
|
|
17
|
+
|
|
18
|
+
- **Five calendar tokens documented, three of them new to the catalogue rather than to the code.**
|
|
19
|
+
`--hub-calendar-height` (the calendar's own height, written by its new `height` input),
|
|
20
|
+
`--hub-calendar-header-gap` (the floor on the distance between the header title and either button
|
|
21
|
+
group) and `--hub-calendar-event-time-font-size` (the hour at the end of a month chip) arrive with
|
|
22
|
+
`ng-hub-ui-calendar` 22.7.0. `--hub-calendar-event-gap` and `--hub-calendar-event-padding-x-timed`
|
|
23
|
+
were already read by the component and had never been written down — a hook a consumer could set
|
|
24
|
+
and never learn about — which is exactly the gap this file exists to close.
|
|
25
|
+
|
|
26
|
+
- **Three calendar defaults corrected, because the code moved and the table did not.**
|
|
27
|
+
`--hub-calendar-event-font-size` now documents `var(--hub-ref-font-size-xs, 0.75rem)` and
|
|
28
|
+
`--hub-calendar-day-padding-x` / `-y` document `var(--hub-ref-space-1, 0.25rem)`: the month grid
|
|
29
|
+
was tightened in that same calendar release. The parity check cannot catch these on its own —
|
|
30
|
+
all three are consumed-only hooks with no declaration to compare against — so they are the kind
|
|
31
|
+
of row that goes stale silently.
|
|
32
|
+
|
|
8
33
|
## [22.9.1] - 2026-09-06
|
|
9
34
|
|
|
10
35
|
### Fixed
|
|
@@ -80,7 +105,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
80
105
|
the width of a start/end drawer, the height of a top/bottom sheet, and the rounding of its
|
|
81
106
|
content. All three sit deliberately outside the modal size scale, which is the point of them:
|
|
82
107
|
`size: 'lg'` is 800px, and on an 853px window that covers the document the drawer is meant to be
|
|
83
|
-
read
|
|
108
|
+
read _against_, leaving 53px of it showing.
|
|
84
109
|
|
|
85
110
|
### Fixed
|
|
86
111
|
|
|
@@ -97,14 +122,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
97
122
|
the question mark that carries `formTextType="tooltip"` helper text: size, type, and the resting
|
|
98
123
|
and hover colours of its surface and border.
|
|
99
124
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
125
|
+
The one worth reading is `--hub-form-hint-size`, at `1.15em` rather than a pixel value. The mark
|
|
126
|
+
sits beside a label, so it is sized against that label's type: a form that scales its labels down
|
|
127
|
+
scales the mark with them, instead of leaving a circle that grows relative to the words next to
|
|
128
|
+
it. The rest of the family is there because the mark is drawn from CSS rather than an icon font —
|
|
129
|
+
`ng-hub-ui-icons` is not a dependency of that package — so every part of its appearance has to be
|
|
130
|
+
reachable from a token or it is not reachable at all.
|
|
106
131
|
|
|
107
|
-
|
|
132
|
+
Documentation-only, as always for another library's tokens.
|
|
108
133
|
|
|
109
134
|
## [22.8.3] - 2026-09-02
|
|
110
135
|
|
|
@@ -113,13 +138,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
113
138
|
- **docs (forms)** — `--hub-input-plaintext-color`, the value colour on a `plaintext` field
|
|
114
139
|
(`ng-hub-ui-forms` 22.30.0), defaulting to `var(--hub-ref-color-gray-700, #495057)`.
|
|
115
140
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
141
|
+
It exists because of what a field loses along with its box. Measured on the documentation site:
|
|
142
|
+
label and value came out at exactly the same colour, separated only by 2px of size and one
|
|
143
|
+
weight step — fine inside a box, which does the separating, and not fine once the box is gone,
|
|
144
|
+
where a column of them reads as undifferentiated lines. The label is deliberately untouched, on
|
|
145
|
+
the same tokens as every other field's, because a form's labels have to keep one rhythm whatever
|
|
146
|
+
state each field is in; it is the value that steps back a shade. 8.18:1 against the page, so it
|
|
147
|
+
clears AAA, and it is a token rather than a literal.
|
|
123
148
|
|
|
124
149
|
- **docs (forms)** — `--hub-input-plaintext-padding-block`
|
|
125
150
|
(`0 calc(var(--hub-input-padding-y) * 2)`) and `--hub-input-plaintext-font-weight` (`300`), the
|
|
@@ -140,13 +165,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
140
165
|
`--hub-table-filter-control-*` and `--hub-table-delete-filters-*`, which is what a consumer has
|
|
141
166
|
to reach for to theme them — and the only way back to the old red-at-rest clear button.
|
|
142
167
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
168
|
+
The remaining eight cover the filter row itself (`--hub-table-filter-row-bg`,
|
|
169
|
+
`--hub-table-filter-cell-padding-x` / `-y`), the search box's new clear affordance
|
|
170
|
+
(`--hub-table-search-clear-*`) and the close glyph it uses (`--hub-table-icon-close`).
|
|
146
171
|
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
172
|
+
Documentation-only, as always for another library's tokens: nothing in the ds's own tokens or
|
|
173
|
+
compiled CSS changes. It earns a release because this package ships its `docs/` folder, so the
|
|
174
|
+
reference table travels to consumers — and a token nobody can find is one nobody can theme.
|
|
150
175
|
|
|
151
176
|
## [22.8.1] - 2026-09-01
|
|
152
177
|
|
|
@@ -167,11 +192,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
167
192
|
mirror. Named into the `.font-*` family beside `.font-monospace`, because it is the same
|
|
168
193
|
kind of decision — which shapes the glyphs take.
|
|
169
194
|
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
195
|
+
Proportional numerals give every digit its own width, so a 1 is narrower than a 0 and two
|
|
196
|
+
amounts in a column have their units in different places. Money is read by comparing it
|
|
197
|
+
downwards, and a column whose units do not line up has to be read figure by figure
|
|
198
|
+
instead. Consumers were writing the declaration by hand in their own sheets — five screens
|
|
199
|
+
of one product, which is what asked for this.
|
|
175
200
|
|
|
176
201
|
- **docs (table)** — `--hub-table-action-disabled-opacity`, how far a refused action button is
|
|
177
202
|
faded (`ng-hub-ui-paginable` 22.15.0), defaulting to `0.5`. Consumed-only. It exists because
|
|
@@ -217,7 +242,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
217
242
|
|
|
218
243
|
### Fixed
|
|
219
244
|
|
|
220
|
-
- **The parity check no longer skips a declaration that wraps.** Its pattern needed the whole declaration, terminating `;` included, on a single line; a long `calc()` broken by the formatter therefore registered as
|
|
245
|
+
- **The parity check no longer skips a declaration that wraps.** Its pattern needed the whole declaration, terminating `;` included, on a single line; a long `calc()` broken by the formatter therefore registered as _undeclared_, so value parity had nothing to compare and the documented value was free to drift in silence. Teaching it to read a wrapped declaration as one logical line immediately surfaced sixteen stale values — one in this spec and fifteen in the per-library reference docs of `avatar`, `board`, `modal`, `paginable`, `panels` and `stepper`, where for instance `--hub-modal-margin` was still documented as `1.75rem auto` long after the code had decomposed it into four per-side tokens. All sixteen are corrected.
|
|
221
246
|
|
|
222
247
|
## [22.7.16] - 2026-08-24
|
|
223
248
|
|
|
@@ -340,9 +365,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
340
365
|
### Added
|
|
341
366
|
|
|
342
367
|
- **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:
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
368
|
+
- `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}`.
|
|
369
|
+
- `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.
|
|
370
|
+
- `layout.scss` — `.d-inline-grid` (plus its `.d-print-` and responsive variants), `.focus-ring-{accent}`.
|
|
346
371
|
- **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.
|
|
347
372
|
- **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.
|
|
348
373
|
- **cascade knobs — `--hub-border-opacity`, `--hub-link-opacity`, `--hub-focus-ring-opacity`**, documented alongside the existing `--hub-bg-opacity` / `--hub-text-opacity` contract.
|
|
@@ -357,9 +382,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
357
382
|
### Changed
|
|
358
383
|
|
|
359
384
|
- **docs (token catalogue) — hygiene wave for the Figma design-system sync.** Documentation-only; no token or compiled-CSS changes.
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
385
|
+
- 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.
|
|
386
|
+
- The `metrics` token table moved from the Appendix to its canonical place in the Components chapter (`### metrics`), like every other library.
|
|
387
|
+
- 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.
|
|
363
388
|
- **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.
|
|
364
389
|
|
|
365
390
|
### Added
|
|
@@ -545,7 +570,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
545
570
|
|
|
546
571
|
- `--hub-sys-color-{variant}-dark` is kept as a back-compat alias of `-emphasis`.
|
|
547
572
|
|
|
548
|
-
|
|
549
573
|
## [22.0.0] - 2026-06-17
|
|
550
574
|
|
|
551
575
|
### Changed
|
|
@@ -553,7 +577,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
553
577
|
- Aligned with Angular 22.
|
|
554
578
|
- README documentation standardized.
|
|
555
579
|
|
|
556
|
-
|
|
557
580
|
## [1.0.0] - 2026-06-16
|
|
558
581
|
|
|
559
582
|
Initial release. The shared design-token foundation for the ng-hub-ui family,
|
|
@@ -707,47 +707,47 @@ Source legend:
|
|
|
707
707
|
|
|
708
708
|
| Token | Initial value | Usage | Status | Source |
|
|
709
709
|
| --- | --- | --- | --- | --- |
|
|
710
|
-
| `--hub-action-sheet-z-index`
|
|
711
|
-
| `--hub-action-sheet-backdrop-bg`
|
|
712
|
-
| `--hub-action-sheet-bg`
|
|
713
|
-
| `--hub-action-sheet-color`
|
|
714
|
-
| `--hub-action-sheet-border-color`
|
|
715
|
-
| `--hub-action-sheet-border-radius`
|
|
716
|
-
| `--hub-action-sheet-shadow`
|
|
717
|
-
| `--hub-action-sheet-max-width`
|
|
718
|
-
| `--hub-action-sheet-padding`
|
|
719
|
-
| `--hub-action-sheet-gap`
|
|
720
|
-
| `--hub-action-sheet-inset`
|
|
721
|
-
| `--hub-action-sheet-duration`
|
|
722
|
-
| `--hub-action-sheet-header-color`
|
|
723
|
-
| `--hub-action-sheet-sub-header-color`
|
|
724
|
-
| `--hub-action-sheet-group-title-color`
|
|
725
|
-
| `--hub-action-sheet-action-color`
|
|
726
|
-
| `--hub-action-sheet-action-bg`
|
|
727
|
-
| `--hub-action-sheet-action-hover-bg`
|
|
728
|
-
| `--hub-action-sheet-action-min-height`
|
|
729
|
-
| `--hub-action-sheet-action-padding-x`
|
|
730
|
-
| `--hub-action-sheet-action-gap`
|
|
731
|
-
| `--hub-action-sheet-action-font-size`
|
|
732
|
-
| `--hub-action-sheet-action-radius`
|
|
733
|
-
| `--hub-action-sheet-action-disabled-opacity` | `0.5`
|
|
734
|
-
| `--hub-action-sheet-destructive-color`
|
|
735
|
-
| `--hub-action-sheet-accent`
|
|
736
|
-
| `--hub-action-sheet-accent-emphasis`
|
|
737
|
-
| `--hub-action-sheet-accent-subtle`
|
|
738
|
-
| `--hub-action-sheet-selected-color`
|
|
739
|
-
| `--hub-action-sheet-selected-bg`
|
|
740
|
-
| `--hub-action-sheet-handle-width`
|
|
741
|
-
| `--hub-action-sheet-handle-height`
|
|
742
|
-
| `--hub-action-sheet-handle-color`
|
|
743
|
-
| `--hub-action-sheet-focus-ring-width`
|
|
744
|
-
| `--hub-action-sheet-focus-ring-color`
|
|
710
|
+
| `--hub-action-sheet-z-index` | `1055` | Stacking layer of the whole overlay | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:21` |
|
|
711
|
+
| `--hub-action-sheet-backdrop-bg` | `rgba(0, 0, 0, 0.45)` | Backdrop behind the sheet | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:22` |
|
|
712
|
+
| `--hub-action-sheet-bg` | `var(--hub-sys-surface-page, #fff)` | Sheet background color | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:23` |
|
|
713
|
+
| `--hub-action-sheet-color` | `var(--hub-sys-text-primary, #212529)` | Sheet text color | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:24` |
|
|
714
|
+
| `--hub-action-sheet-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Rule between groups and above the cancel action | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:25` |
|
|
715
|
+
| `--hub-action-sheet-border-radius` | `var(--hub-ref-radius-lg, 0.5rem)` | Sheet corner radius | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:26` |
|
|
716
|
+
| `--hub-action-sheet-shadow` | `0 -0.5rem 1.5rem rgba(0, 0, 0, 0.18)` | Sheet shadow | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:27` |
|
|
717
|
+
| `--hub-action-sheet-max-width` | `34rem` | Width cap of the sheet on wide screens | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:28` |
|
|
718
|
+
| `--hub-action-sheet-padding` | `var(--hub-ref-space-2, 0.5rem)` | Padding inside the sheet | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:29` |
|
|
719
|
+
| `--hub-action-sheet-gap` | `var(--hub-ref-space-2, 0.5rem)` | Space between the sheet blocks | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:30` |
|
|
720
|
+
| `--hub-action-sheet-inset` | `var(--hub-ref-space-2, 0.5rem)` | Margin between the sheet and the viewport edges | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:31` |
|
|
721
|
+
| `--hub-action-sheet-duration` | `240ms` | Entry, exit and snap-back duration | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:32` |
|
|
722
|
+
| `--hub-action-sheet-header-color` | `var(--hub-sys-text-primary, #212529)` | Header text color | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:35` |
|
|
723
|
+
| `--hub-action-sheet-sub-header-color` | `var(--hub-sys-text-muted, #6c757d)` | Sub-header text color | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:36` |
|
|
724
|
+
| `--hub-action-sheet-group-title-color` | `var(--hub-sys-text-muted, #6c757d)` | Group title color | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:37` |
|
|
725
|
+
| `--hub-action-sheet-action-color` | `var(--hub-sys-text-primary, #212529)` | Action text color | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:40` |
|
|
726
|
+
| `--hub-action-sheet-action-bg` | `transparent` | Action background color | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:41` |
|
|
727
|
+
| `--hub-action-sheet-action-hover-bg` | `var(--hub-sys-color-surface-subtle, #f8f9fa)` | Action background on hover | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:42` |
|
|
728
|
+
| `--hub-action-sheet-action-min-height` | `3rem` | Minimum height of an action — the touch target | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:43` |
|
|
729
|
+
| `--hub-action-sheet-action-padding-x` | `var(--hub-ref-space-3, 1rem)` | Horizontal padding of an action | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:44` |
|
|
730
|
+
| `--hub-action-sheet-action-gap` | `var(--hub-ref-space-2, 0.5rem)` | Space between an action icon and its label | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:45` |
|
|
731
|
+
| `--hub-action-sheet-action-font-size` | `1rem` | Action font size | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:46` |
|
|
732
|
+
| `--hub-action-sheet-action-radius` | `var(--hub-ref-radius-md, 0.375rem)` | Action corner radius | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:47` |
|
|
733
|
+
| `--hub-action-sheet-action-disabled-opacity` | `0.5` | Opacity of a disabled action | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:48` |
|
|
734
|
+
| `--hub-action-sheet-destructive-color` | `var(--hub-sys-color-danger, #dc3545)` | Text color of the destructive action | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:49` |
|
|
735
|
+
| `--hub-action-sheet-accent` | `var(--hub-sys-color-primary, #0d6efd)` | Semantic accent for the sheet — re-based per `variant` (default = primary) | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:296` |
|
|
736
|
+
| `--hub-action-sheet-accent-emphasis` | `color-mix(in oklch, var(--hub-action-sheet-accent) 80%, var(--hub-sys-color-ink, #212529))` | Accent role: emphasis, derived locally from the accent slot | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:99` |
|
|
737
|
+
| `--hub-action-sheet-accent-subtle` | `color-mix(in oklch, var(--hub-action-sheet-accent) 12%, var(--hub-action-sheet-bg))` | Accent role: subtle, derived locally from the accent slot | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:54` |
|
|
738
|
+
| `--hub-action-sheet-selected-color` | `var(--hub-action-sheet-accent)` | Text color of the selected action | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:55` |
|
|
739
|
+
| `--hub-action-sheet-selected-bg` | `var(--hub-action-sheet-accent-subtle)` | Background of the selected action | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:56` |
|
|
740
|
+
| `--hub-action-sheet-handle-width` | `2.25rem` | Width of the drag handle | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:59` |
|
|
741
|
+
| `--hub-action-sheet-handle-height` | `0.25rem` | Height of the drag handle | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:60` |
|
|
742
|
+
| `--hub-action-sheet-handle-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Color of the drag handle | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:61` |
|
|
743
|
+
| `--hub-action-sheet-focus-ring-width` | `var(--hub-sys-focus-ring-width, 0.25rem)` | Width of the keyboard focus ring | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:62` |
|
|
744
|
+
| `--hub-action-sheet-focus-ring-color` | `var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25))` | Color of the keyboard focus ring | `IN_USE` | `action-sheet/src/lib/components/action-sheet/action-sheet.component.scss:63` |
|
|
745
745
|
|
|
746
746
|
### `avatar`
|
|
747
747
|
|
|
748
748
|
| Token | Initial value | Usage | Status | Source |
|
|
749
749
|
| ----------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------ | -------- | -------------------------------------- |
|
|
750
|
-
| `--hub-avatar-size` | runtime (`50px`) | Avatar box size in px — written on the host from the `size` input (the input is the API; a CSS override is overruled by the inline style) | `INTERNAL` | `avatar/src/lib/avatar.component.ts:
|
|
750
|
+
| `--hub-avatar-size` | runtime (`50px`) | Avatar box size in px — written on the host from the `size` input (the input is the API; a CSS override is overruled by the inline style) | `INTERNAL` | `avatar/src/lib/avatar.component.ts:108` |
|
|
751
751
|
| `--hub-avatar-overflow` | `hidden` | Overflow clipping behavior for avatar container | `IN_USE` | `avatar/src/lib/avatar.component.scss:4` |
|
|
752
752
|
| `--hub-avatar-border-radius-round` | `50%` | Round shape radius token | `IN_USE` | `avatar/src/lib/avatar.component.scss:5` |
|
|
753
753
|
| `--hub-avatar-border-radius-square` | `var(--hub-ref-radius-sm, 0.25rem)` | Default square shape radius token | `IN_USE` | `avatar/src/lib/avatar.component.scss:6` |
|
|
@@ -871,7 +871,7 @@ Source legend:
|
|
|
871
871
|
| `--hub-breadcrumb-divider-flipped` | `'<'` | Content of the separator (RTL) | `IN_USE` | `breadcrumbs/src/lib/components/breadcrumb/breadcrumb.component.scss:41` |
|
|
872
872
|
| `--hub-breadcrumb-item-padding-x` | `var(--hub-ref-space-1, 0.25rem)` | Horizontal padding between breadcrumb items | `IN_USE` | `breadcrumbs/src/lib/components/breadcrumb/breadcrumb.component.scss:10` |
|
|
873
873
|
| `--hub-breadcrumb-item-active-color` | `var(--hub-sys-text-muted, #6c757d)` | Text color of the last (active) breadcrumb item | `IN_USE` | `breadcrumbs/src/lib/components/breadcrumb/breadcrumb.component.scss:11` |
|
|
874
|
-
| `--hub-breadcrumb-accent` | `var(--hub-sys-color-primary, #0d6efd)` | Semantic accent for the links — re-based per `variant` (default = link colour) | `IN_USE` | `breadcrumbs/src/lib/components/breadcrumb/breadcrumb.component.scss:
|
|
874
|
+
| `--hub-breadcrumb-accent` | `var(--hub-sys-color-primary, #0d6efd)` | Semantic accent for the links — re-based per `variant` (default = link colour) | `IN_USE` | `breadcrumbs/src/lib/components/breadcrumb/breadcrumb.component.scss:167` |
|
|
875
875
|
| `--hub-breadcrumb-link-color` | `var(--hub-breadcrumb-accent)` | Text color of breadcrumb links (follows the accent) | `IN_USE` | `breadcrumbs/src/lib/components/breadcrumb/breadcrumb.component.scss:23` |
|
|
876
876
|
| `--hub-breadcrumb-link-hover-color` | `var(--hub-breadcrumb-accent-emphasis, var(--hub-sys-link-hover-color, #0a58ca))` | Text color of breadcrumb links on hover | `IN_USE` | `breadcrumbs/src/lib/components/breadcrumb/breadcrumb.component.scss:24` |
|
|
877
877
|
| `--hub-breadcrumb-link-decoration` | `none` | Text decoration of breadcrumb links | `IN_USE` | `breadcrumbs/src/lib/components/breadcrumb/breadcrumb.component.scss:25` |
|
|
@@ -891,48 +891,62 @@ Source legend:
|
|
|
891
891
|
|
|
892
892
|
| Token | Initial value | Usage | Status | Source |
|
|
893
893
|
| -------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------- | -------- | ----------------------------------------------------------------- |
|
|
894
|
-
| `--hub-calendar-bg` | `var(--hub-sys-surface-page, #ffffff)`
|
|
895
|
-
| `--hub-calendar-color` | `var(--hub-sys-text-primary, #212529)`
|
|
896
|
-
| `--hub-calendar-accent` | `var(--hub-sys-color-primary, #0d6efd)`
|
|
897
|
-
| `--hub-calendar-accent-subtle` | `color-mix(in oklch, var(--hub-calendar-accent) 12%, var(--hub-sys-surface-page, #fff))`
|
|
898
|
-
| `--hub-calendar-border-color` | `var(--hub-sys-border-color-default, #dee2e6)`
|
|
899
|
-
| `--hub-calendar-border-radius` | `var(--hub-ref-radius-md, 0.375rem)`
|
|
900
|
-
| `--hub-calendar-font-family`
|
|
901
|
-
| `--hub-calendar-
|
|
902
|
-
| `--hub-calendar-
|
|
903
|
-
| `--hub-calendar-btn-
|
|
904
|
-
| `--hub-calendar-btn-
|
|
905
|
-
| `--hub-calendar-btn-border-
|
|
906
|
-
| `--hub-calendar-btn-
|
|
907
|
-
| `--hub-calendar-btn-padding-
|
|
908
|
-
| `--hub-calendar-btn-
|
|
909
|
-
| `--hub-calendar-btn-
|
|
910
|
-
| `--hub-calendar-btn-active-
|
|
911
|
-
| `--hub-calendar-
|
|
912
|
-
| `--hub-calendar-day-
|
|
913
|
-
| `--hub-calendar-day-
|
|
914
|
-
| `--hub-calendar-day-
|
|
915
|
-
| `--hub-calendar-day-other-month-
|
|
916
|
-
| `--hub-calendar-day-
|
|
917
|
-
| `--hub-calendar-day-
|
|
918
|
-
| `--hub-calendar-day-
|
|
919
|
-
| `--hub-calendar-
|
|
920
|
-
| `--hub-calendar-event-
|
|
921
|
-
| `--hub-calendar-event-
|
|
922
|
-
| `--hub-calendar-event-
|
|
923
|
-
| `--hub-calendar-event-padding-
|
|
924
|
-
| `--hub-calendar-event-
|
|
925
|
-
| `--hub-calendar-
|
|
926
|
-
| `--hub-calendar-
|
|
927
|
-
| `--hub-calendar-
|
|
928
|
-
| `--hub-calendar-
|
|
929
|
-
| `--hub-calendar-
|
|
930
|
-
| `--hub-calendar-
|
|
931
|
-
| `--hub-calendar-
|
|
932
|
-
| `--hub-calendar-
|
|
933
|
-
| `--hub-calendar-
|
|
934
|
-
| `--hub-calendar-
|
|
935
|
-
| `--hub-calendar-
|
|
894
|
+
| `--hub-calendar-bg` | `var(--hub-sys-surface-page, #ffffff)` | Calendar container background | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:23` |
|
|
895
|
+
| `--hub-calendar-color` | `var(--hub-sys-text-primary, #212529)` | Calendar base text color | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:24` |
|
|
896
|
+
| `--hub-calendar-accent` | `var(--hub-sys-color-primary, #0d6efd)` | Semantic accent — re-based per `variant`; drives today/selected day, active view button, events | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:823` |
|
|
897
|
+
| `--hub-calendar-accent-subtle` | `color-mix(in oklch, var(--hub-calendar-accent) 12%, var(--hub-sys-surface-page, #fff))` | Selected-day tint (generated from the accent) | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:38` |
|
|
898
|
+
| `--hub-calendar-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Calendar border color | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:25` |
|
|
899
|
+
| `--hub-calendar-border-radius` | `var(--hub-ref-radius-md, 0.375rem)` | Calendar border radius | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:26` |
|
|
900
|
+
| `--hub-calendar-font-family` | `var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif)` | Calendar typography family | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:28` |
|
|
901
|
+
| `--hub-calendar-height` | `100%` | Height of the calendar, and so whether it scrolls or grows — written by the `height` input, which is the route that cannot break the internal layout the way a consumer stylesheet on `hub-calendar` can | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:110` |
|
|
902
|
+
| `--hub-calendar-header-bg` | `var(--hub-sys-surface-elevated, #f8f9fa)` | Header background | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:43` |
|
|
903
|
+
| `--hub-calendar-btn-bg` | `var(--hub-ref-color-white, #ffffff)` | Calendar button background | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:52` |
|
|
904
|
+
| `--hub-calendar-btn-color` | `inherit` | Calendar button text color | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:53` |
|
|
905
|
+
| `--hub-calendar-btn-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Calendar button border color | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:54` |
|
|
906
|
+
| `--hub-calendar-btn-border-radius` | `var(--hub-ref-radius-sm, 0.25rem)` | Calendar button border radius | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:55` |
|
|
907
|
+
| `--hub-calendar-btn-padding-x` | `var(--hub-ref-space-3, 1rem)` | Calendar button horizontal padding | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:56` |
|
|
908
|
+
| `--hub-calendar-btn-padding-y` | `var(--hub-ref-space-2, 0.5rem)` | Calendar button vertical padding | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:57` |
|
|
909
|
+
| `--hub-calendar-btn-hover-bg` | `var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075))` | Calendar button hover background | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:58` |
|
|
910
|
+
| `--hub-calendar-btn-active-bg` | `var(--hub-calendar-accent)` | Active button background | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:59` |
|
|
911
|
+
| `--hub-calendar-btn-active-color` | `var(--hub-calendar-accent-on)` | Active button text color | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:60` |
|
|
912
|
+
| `--hub-calendar-day-min-height` | `80px` | Day cell minimum height | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:65` |
|
|
913
|
+
| `--hub-calendar-day-hover-bg` | `var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075))` | Day cell hover background | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:66` |
|
|
914
|
+
| `--hub-calendar-day-today-bg` | `color-mix(in oklch, var(--hub-calendar-accent) 8%, var(--hub-calendar-bg, #fff))` | Today day-cell background | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:67` |
|
|
915
|
+
| `--hub-calendar-day-other-month-bg` | `var(--hub-sys-surface-elevated, #f8f9fa)` | Other-month day-cell background | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:68` |
|
|
916
|
+
| `--hub-calendar-day-other-month-color` | `var(--hub-sys-text-muted, #6c757d)` | Other-month day-cell text color | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:69` |
|
|
917
|
+
| `--hub-calendar-day-weekend-bg` | `var(--hub-sys-surface-elevated, #f8f9fa)` | Weekend day-cell background | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:70` |
|
|
918
|
+
| `--hub-calendar-day-selected-bg` | `var(--hub-calendar-accent-subtle)` | Selected day-cell background | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:71` |
|
|
919
|
+
| `--hub-calendar-day-drag-over-bg` | `color-mix(in oklch, var(--hub-calendar-accent) 32%, var(--hub-calendar-bg, #fff))` | Drag-over day-cell background | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:72` |
|
|
920
|
+
| `--hub-calendar-event-bg` | `var(--hub-calendar-accent)` | Event chip background | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:75` |
|
|
921
|
+
| `--hub-calendar-event-color` | `var(--hub-calendar-accent-on)` | Event chip text color | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:76` |
|
|
922
|
+
| `--hub-calendar-event-border-radius` | `var(--hub-ref-radius-sm, 0.25rem)` | Event chip border radius | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:77` |
|
|
923
|
+
| `--hub-calendar-event-padding-x` | `var(--hub-ref-space-2, 0.5rem)` | Event chip horizontal padding | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:78` |
|
|
924
|
+
| `--hub-calendar-event-padding-y` | `var(--hub-ref-space-1, 0.25rem)` | Event chip vertical padding | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:79` |
|
|
925
|
+
| `--hub-calendar-event-font-size` | `var(--hub-ref-font-size-xs, 0.75rem)` | Event chip font size | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:80` |
|
|
926
|
+
| `--hub-calendar-event-gap` | `var(--hub-ref-space-1, 0.25rem)` | Gap between the dot, the hour and the title inside a timed event chip | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:463` |
|
|
927
|
+
| `--hub-calendar-event-time-font-size` | `0.9em` | Size of the hour printed at the end of a month-view timed chip, relative to the chip so it re-scales with it | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:83` |
|
|
928
|
+
| `--hub-calendar-event-padding-x-timed` | `var(--hub-ref-space-1, 0.25rem)` | Horizontal padding of a timed event chip, which carries no filled background to pad against | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:464` |
|
|
929
|
+
| `--hub-calendar-month-card-bg` | `var(--hub-sys-surface-elevated, #f8f9fa)` | Month card background (year view) | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:86` |
|
|
930
|
+
| `--hub-calendar-month-card-hover-bg` | `var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075))` | Month card hover background (year view) | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:87` |
|
|
931
|
+
| `--hub-calendar-primary` | `var(--hub-calendar-accent)` | Accent color alias used in month cards | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:40` |
|
|
932
|
+
| `--hub-calendar-muted` | `var(--hub-sys-text-muted, #6c757d)` | Muted text alias for secondary labels | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:31` |
|
|
933
|
+
| `--hub-calendar-btn-transition` | `var(--hub-sys-transition-base, all 0.2s ease-in-out)` | Transition for calendar actions and month cards | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:32` |
|
|
934
|
+
| `--hub-calendar-day-padding-x` | `var(--hub-ref-space-1, 0.25rem)` | Day cell horizontal padding | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:63` |
|
|
935
|
+
| `--hub-calendar-day-padding-y` | `var(--hub-ref-space-1, 0.25rem)` | Day cell vertical padding | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:64` |
|
|
936
|
+
| `--hub-calendar-header-padding-x` | `var(--hub-ref-space-3, 1rem)` | Header horizontal padding | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:44` |
|
|
937
|
+
| `--hub-calendar-header-padding-y` | `var(--hub-ref-space-3, 1rem)` | Header vertical padding | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:45` |
|
|
938
|
+
| `--hub-calendar-header-gap` | `var(--hub-ref-space-3, 1rem)` | Minimum distance between the header title and the button group on either side of it | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:49` |
|
|
939
|
+
| `--hub-calendar-month-card-padding-x` | `var(--hub-ref-space-4, 1.5rem)` | Month card horizontal padding | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:88` |
|
|
940
|
+
| `--hub-calendar-month-card-padding-y` | `var(--hub-ref-space-4, 1.5rem)` | Month card vertical padding | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:89` |
|
|
941
|
+
| `--hub-calendar-week-number-width` | `3rem` | Width of the week-number column shown by `config.showWeekNumbers` (month view) | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:92` |
|
|
942
|
+
| `--hub-calendar-time-column-width` | `60px` | Width of the hour ruler in the week and day views — also the width of the all-day strip's label margin, so the two stay on the same track | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:93` |
|
|
943
|
+
| `--hub-calendar-all-day-min-height` | `2.5rem` | Minimum height of the all-day strip above the week and day hour grids, kept whether or not the period holds an all-day event | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:94` |
|
|
944
|
+
| `--hub-calendar-hour-height` | `60px` | Height of one hour row in the week and day grids — also the unit every timed event is placed in, so re-scaling it moves the events with the ruler | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:95` |
|
|
945
|
+
| `--hub-calendar-event-min-height` | `1.5rem` | Floor on the height of a timed event band, so an event shorter than the grid can draw stays legible without its top edge lying about the start time | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:96` |
|
|
946
|
+
| `--hub-calendar-event-gutter` | `2px` | Horizontal gap between timed events sharing a column because they overlap in time | `IN_USE` | `calendar/src/lib/components/calendar/calendar.component.scss:97` |
|
|
947
|
+
| `--hub-calendar-grid-hours` | runtime (`24`) | Number of hours the ruler draws — written on the grid from `config.dayStartHour`/`dayEndHour`, and what gives the day columns the ruler's height | `INTERNAL` | `calendar/src/lib/components/calendar/calendar.component.html:191` |
|
|
948
|
+
| `--hub-calendar-event-offset` | runtime (hours) | Distance from the top of the ruler to a timed event's band, in hours — written per event from its start time | `INTERNAL` | `calendar/src/lib/components/calendar/calendar.component.html:214` |
|
|
949
|
+
| `--hub-calendar-event-span` | runtime (hours) | Height of a timed event's band, in hours — written per event from its duration, clipped to the part inside the ruler | `INTERNAL` | `calendar/src/lib/components/calendar/calendar.component.html:215` |
|
|
936
950
|
|
|
937
951
|
### `form`
|
|
938
952
|
|
|
@@ -1260,10 +1274,10 @@ The `detail` token set is defined as a single, standardized collection that supp
|
|
|
1260
1274
|
| Token | Initial value | Usage | Status | Source |
|
|
1261
1275
|
| --- | --- | --- | --- | --- |
|
|
1262
1276
|
| `--hub-badge-accent` | `var(--hub-sys-color-primary, #0d6efd)` | Badge accent | `IN_USE` | `badges/src/lib/components/badge/badge.component.scss:17` |
|
|
1263
|
-
| `--hub-badge-accent-border`
|
|
1277
|
+
| `--hub-badge-accent-border` | `color-mix(in oklch, var(--hub-badge-accent) 35%, var(--hub-sys-surface-page, #fff))` | Badge accent border | `IN_USE` | `badges/src/lib/components/badge/badge.component.scss:178` |
|
|
1264
1278
|
| `--hub-badge-accent-on` | `oklch(from var(--hub-badge-accent) clamp(0, (0.62 - l) * 1000, 1) 0 h)` | Badge accent contrast (on-color) | `IN_USE` | `badges/src/lib/components/badge/badge.component.scss:22` |
|
|
1265
1279
|
| `--hub-badge-accent-emphasis` | `color-mix(in oklch, var(--hub-badge-accent) 80%, var(--hub-sys-color-ink, #212529))` | Badge accent emphasis | `IN_USE` | `badges/src/lib/components/badge/badge.component.scss:55` |
|
|
1266
|
-
| `--hub-badge-accent-subtle`
|
|
1280
|
+
| `--hub-badge-accent-subtle` | `color-mix(in oklch, var(--hub-badge-accent) 12%, var(--hub-sys-surface-page, #fff))` | Badge accent subtle | `IN_USE` | `badges/src/lib/components/badge/badge.component.scss:155` |
|
|
1267
1281
|
| `--hub-badge-align` | `center` | Badge align | `IN_USE` | `badges/src/lib/components/badge/badge.component.scss:43` |
|
|
1268
1282
|
| `--hub-badge-bg` | `var(--hub-badge-accent)` | Badge bg | `IN_USE` | `badges/src/lib/components/badge/badge.component.scss:21` |
|
|
1269
1283
|
| `--hub-badge-border-color` | `var(--hub-badge-accent)` | Badge border color | `IN_USE` | `badges/src/lib/components/badge/badge.component.scss:23` |
|
|
@@ -1308,6 +1322,7 @@ The `detail` token set is defined as a single, standardized collection that supp
|
|
|
1308
1322
|
| `--hub-chip-border-color` | `var(--hub-badge-accent-border)` | Resting chip border colour | `IN_USE` | `badges/src/lib/components/chip/chip.component.scss:15` |
|
|
1309
1323
|
| `--hub-chip-color` | `var(--hub-badge-accent-emphasis)` | Resting chip text colour | `IN_USE` | `badges/src/lib/components/chip/chip.component.scss:14` |
|
|
1310
1324
|
| `--hub-chip-bg` | `var(--hub-badge-accent-subtle)` | Resting chip background (shared badge accent family) | `IN_USE` | `badges/src/lib/components/chip/chip.component.scss:13` |
|
|
1325
|
+
|
|
1311
1326
|
### `buttons`
|
|
1312
1327
|
|
|
1313
1328
|
| Token | Initial value | Usage | Status | Source |
|
|
@@ -1364,6 +1379,7 @@ The `detail` token set is defined as a single, standardized collection that supp
|
|
|
1364
1379
|
| `--hub-dropdown-header-color` | `var(--hub-sys-color-text-subtle, #94a3b8)` | Text color of a dropdown section header | `IN_USE` | `buttons/src/lib/components/dropdown-header/dropdown-header.component.ts:17` |
|
|
1365
1380
|
| `--hub-dropdown-header-font-size` | `var(--hub-ref-font-size-xs, 0.75rem)` | Font size of a dropdown section header | `IN_USE` | `buttons/src/lib/components/dropdown-header/dropdown-header.component.ts:15` |
|
|
1366
1381
|
| `--hub-dropdown-header-padding-x` | `var(--hub-ref-space-3, 1rem)` | Horizontal padding of a dropdown section header | `IN_USE` | `buttons/src/lib/components/dropdown-header/dropdown-header.component.ts:14` |
|
|
1382
|
+
|
|
1367
1383
|
### `utils`
|
|
1368
1384
|
|
|
1369
1385
|
| Token | Initial value | Usage | Status | Source |
|
|
@@ -1546,6 +1562,7 @@ The `detail` token set is defined as a single, standardized collection that supp
|
|
|
1546
1562
|
| `--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` |
|
|
1547
1563
|
| `--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` |
|
|
1548
1564
|
| `--hub-segmented-indicator-height` | `—` | Internal runtime height of the sliding indicator (set from the selected option's measured geometry) | `INTERNAL` | `forms/src/lib/components/segmented/segmented.component.scss:30` |
|
|
1565
|
+
|
|
1549
1566
|
### `switch`
|
|
1550
1567
|
|
|
1551
1568
|
| Token | Initial value | Usage | Status | Source |
|
|
@@ -1566,7 +1583,6 @@ The `detail` token set is defined as a single, standardized collection that supp
|
|
|
1566
1583
|
| `--hub-otp-gap` | `var(--hub-ref-space-2, 0.5rem)` | Gap between OTP cells | `IN_USE` | `forms/src/lib/components/otp/otp.component.scss:9` |
|
|
1567
1584
|
| `--hub-otp-separator-color` | `var(--hub-sys-text-muted, #6c757d)` | OTP separator color | `IN_USE` | `forms/src/lib/components/otp/otp.component.scss:13` |
|
|
1568
1585
|
|
|
1569
|
-
|
|
1570
1586
|
### `body`
|
|
1571
1587
|
|
|
1572
1588
|
| Token | Initial value | Usage | Status | Source |
|
|
@@ -1620,9 +1636,9 @@ The standalone `tabs` proposal was **superseded**: the tabs UI shipped inside `n
|
|
|
1620
1636
|
| `--hub-modal-title-color` | `var(--hub-modal-color, var(--hub-sys-text-primary, #212529))` | Title colour; a `variant` re-points it to the accent | `IN_USE` | `modal/src/lib/modal.scss:191` |
|
|
1621
1637
|
| `--hub-modal-width` | `auto` | Base dialog width | `IN_USE` | `modal/src/lib/modal.scss:109` |
|
|
1622
1638
|
| `--hub-modal-max-width` | `500px` | Dialog max-width | `IN_USE` | `modal/src/lib/modal.scss:110` |
|
|
1623
|
-
| `--hub-modal-offcanvas-width`
|
|
1639
|
+
| `--hub-modal-offcanvas-width` | `min(28rem, 100%)` | Width of a start/end drawer opened with `offcanvas: true`. Deliberately outside the `sm`/`lg`/`xl` size scale: `lg` is 800px, and on an 853px window that covers the document the drawer is meant to be read _against_, leaving 53px of it showing. Clamps to the viewport once the window is too small for both | `IN_USE` | `modal/src/lib/modal.scss` |
|
|
1624
1640
|
| `--hub-modal-offcanvas-height` | `min(60vh, 100%)` | Height of a top/bottom sheet opened with `offcanvas: true`. The same decision on the other axis: the sheet takes the full width and its own height, so the page stays readable above or below it | `IN_USE` | `modal/src/lib/modal.scss` |
|
|
1625
|
-
| `--hub-modal-offcanvas-border-radius`
|
|
1641
|
+
| `--hub-modal-offcanvas-border-radius` | `0` | Rounding of an offcanvas dialog's content. Square by default, because a drawer that keeps the rounding of a floating dialog on the side it slid out of reads as a modal somebody placed badly. Exposed anyway: rounding the _far_ side is a real choice — `0 1rem 1rem 0` on a start drawer | `IN_USE` | `modal/src/lib/modal.scss` |
|
|
1626
1642
|
| `--hub-modal-color` | `var(--hub-sys-text-primary, #212529)` | Base modal text color | `IN_USE` | `modal/src/lib/modal.scss:158` |
|
|
1627
1643
|
| `--hub-modal-bg` | `var(--hub-sys-surface-page, #ffffff)` | Modal content background | `IN_USE` | `modal/src/lib/modal.scss:159` |
|
|
1628
1644
|
| `--hub-modal-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Modal border color | `IN_USE` | `modal/src/lib/modal.scss:160` |
|
|
@@ -1786,34 +1802,34 @@ The standalone `tabs` proposal was **superseded**: the tabs UI shipped inside `n
|
|
|
1786
1802
|
| `--hub-table-bottom-bar-info-flex` | `0 0 auto` | Flex shorthand for the info slot | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:57` |
|
|
1787
1803
|
| `--hub-table-icon-color` | `currentColor` | Fill color for inline SVG mask icons | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:58` |
|
|
1788
1804
|
| `--hub-table-icon-size` | `1em` | Size for inline SVG mask icons | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:59` |
|
|
1789
|
-
| `--hub-table-icon-sort`
|
|
1790
|
-
| `--hub-table-icon-sort-up`
|
|
1791
|
-
| `--hub-table-icon-sort-down`
|
|
1792
|
-
| `--hub-table-icon-caret-up`
|
|
1793
|
-
| `--hub-table-icon-caret-down`
|
|
1794
|
-
| `--hub-table-icon-search`
|
|
1795
|
-
| `--hub-table-icon-filter`
|
|
1796
|
-
| `--hub-table-icon-eraser`
|
|
1805
|
+
| `--hub-table-icon-sort` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 41.4c12.5-12.5 32.8-12.5 45.3 0l128 128c9.2 9.2 11.9 22.9 6.9 34.9s-16.6 19.8-29.6 19.8H32c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l128-128zm0 429.3l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9s16.6-19.8 29.6-19.8H288c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128c-12.5 12.5-32.8 12.5-45.3 0z'/%3E%3C/svg%3E")` | Sort icon (unsorted state) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:61` |
|
|
1806
|
+
| `--hub-table-icon-sort-up` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3C/svg%3E")` | Sort ascending icon | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:62` |
|
|
1807
|
+
| `--hub-table-icon-sort-down` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H32c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E")` | Sort descending icon | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:63` |
|
|
1808
|
+
| `--hub-table-icon-caret-up` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M182.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8H288c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z'/%3E%3C/svg%3E")` | Row-expander caret icon (expanded) — overridable like the sort icons | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:66` |
|
|
1809
|
+
| `--hub-table-icon-caret-down` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H32c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E")` | Row-expander caret icon (collapsed) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:67` |
|
|
1810
|
+
| `--hub-table-icon-search` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E")` | Table search icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:69` |
|
|
1811
|
+
| `--hub-table-icon-filter` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z'/%3E%3C/svg%3E")` | Table filter icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:70` |
|
|
1812
|
+
| `--hub-table-icon-eraser` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M290.7 57.4L57.4 290.7c-25 25-25 65.5 0 90.5l80 80c12 12 28.3 18.7 45.3 18.7H288h9.4H512c17.7 0 32-14.3 32-32s-14.3-32-32-32H387.9L518.6 285.3c25-25 25-65.5 0-90.5L381.3 57.4c-25-25-65.5-25-90.5 0zM297.4 416H288l-105.4 0-80-80L227.3 211.3 364.7 348.7 297.4 416z'/%3E%3C/svg%3E")` | Table eraser icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:71` |
|
|
1797
1813
|
| `--hub-table-icon-close` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E")` | Table close/dismiss icon, used by the search box's clear affordance (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:72` |
|
|
1798
|
-
| `--hub-table-icon-info`
|
|
1799
|
-
| `--hub-table-icon-chevron-up`
|
|
1800
|
-
| `--hub-table-icon-chevron-down`
|
|
1801
|
-
| `--hub-table-icon-chevron-left`
|
|
1802
|
-
| `--hub-table-icon-chevron-right`
|
|
1803
|
-
| `--hub-table-icon-angle-left`
|
|
1804
|
-
| `--hub-table-icon-angle-right`
|
|
1805
|
-
| `--hub-table-icon-angle-double-left`
|
|
1806
|
-
| `--hub-table-icon-angle-double-right`
|
|
1807
|
-
| `--hub-table-icon-ellipsis-v`
|
|
1808
|
-
| `--hub-table-icon-trash`
|
|
1809
|
-
| `--hub-table-icon-plus`
|
|
1814
|
+
| `--hub-table-icon-info` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E")` | Table info icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:73` |
|
|
1815
|
+
| `--hub-table-icon-chevron-up` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E")` | Declared for `.hub-table__icon--chevron-up`. Nothing in this package paints that class, and the rule is scoped to the table's own view, so overriding this variable changes nothing on screen | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:74` |
|
|
1816
|
+
| `--hub-table-icon-chevron-down` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E")` | Declared for `.hub-table__icon--chevron-down`. Nothing in this package paints that class, and the rule is scoped to the table's own view, so overriding this variable changes nothing on screen | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:75` |
|
|
1817
|
+
| `--hub-table-icon-chevron-left` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E")` | Declared for `.hub-table__icon--chevron-left`. Nothing in this package paints that class, and the rule is scoped to the table's own view, so overriding this variable changes nothing on screen | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:76` |
|
|
1818
|
+
| `--hub-table-icon-chevron-right` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 105.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E")` | Declared for `.hub-table__icon--chevron-right`. Nothing in this package paints that class, and the rule is scoped to the table's own view, so overriding this variable changes nothing on screen | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:77` |
|
|
1819
|
+
| `--hub-table-icon-angle-left` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E")` | Declared for `.hub-table__icon--angle-left`. Nothing in this package paints that class, and the rule is scoped to the table's own view, so overriding this variable changes nothing on screen | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:78` |
|
|
1820
|
+
| `--hub-table-icon-angle-right` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E")` | Declared for `.hub-table__icon--angle-right`. Nothing in this package paints that class, and the rule is scoped to the table's own view, so overriding this variable changes nothing on screen | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:79` |
|
|
1821
|
+
| `--hub-table-icon-angle-double-left` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z'/%3E%3C/svg%3E")` | Declared for `.hub-table__icon--angle-double-left`. Nothing in this package paints that class, and the rule is scoped to the table's own view, so overriding this variable changes nothing on screen | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:80` |
|
|
1822
|
+
| `--hub-table-icon-angle-double-right` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z'/%3E%3C/svg%3E")` | Declared for `.hub-table__icon--angle-double-right`. Nothing in this package paints that class, and the rule is scoped to the table's own view, so overriding this variable changes nothing on screen | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:81` |
|
|
1823
|
+
| `--hub-table-icon-ellipsis-v` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 512'%3E%3Cpath d='M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z'/%3E%3C/svg%3E")` | Declared for `.hub-table__icon--ellipsis-v`. The table dropdown draws its own glyph since 22.18.0, so nothing paints that class any more and overriding this variable changes nothing on screen — theme `--hub-table-dropdown-icon-ellipsis-v` instead | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:82` |
|
|
1824
|
+
| `--hub-table-icon-trash` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z'/%3E%3C/svg%3E")` | Declared for `.hub-table__icon--trash`. The filter panel draws its own glyph since 22.18.0, so nothing paints that class any more and overriding this variable changes nothing on screen — theme `--hub-filter-icon-trash` instead | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:83` |
|
|
1825
|
+
| `--hub-table-icon-plus` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E")` | Declared for `.hub-table__icon--plus`. The filter panel draws its own glyph since 22.18.0, so nothing paints that class any more and overriding this variable changes nothing on screen — theme `--hub-filter-icon-plus` instead | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:84` |
|
|
1810
1826
|
| `--hub-table-accent` | `var(--hub-sys-color-primary, #0d6efd)` | Semantic accent for the selected row — re-based per `variant` | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:96` |
|
|
1811
1827
|
| `--hub-table-accent-subtle` | `color-mix(in oklch, var(--hub-table-accent) 12%, var(--hub-sys-surface-page, #ffffff))` | Soft accent tint for the selected-row background | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:98` |
|
|
1812
1828
|
| `--hub-table-selected-bg` | `var(--hub-table-accent-subtle)` | Selected row background (soft accent tint) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:101` |
|
|
1813
1829
|
| `--hub-table-selected-color` | `var(--hub-sys-text-primary, #212529)` | Selected row text color | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:102` |
|
|
1814
1830
|
| `--hub-table-selected-bar-width` | `0` | Width of the optional accent bar on the selected row's leading edge (`0` = hidden) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:108` |
|
|
1815
1831
|
| `--hub-table-selected-bar-color` | `var(--hub-table-accent)` | Colour of the selected-row accent bar | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:109` |
|
|
1816
|
-
| `--hub-table-select-hit-min-size` | `1.75rem` | Minimum height of the label wrapping the row checkbox, so the hit area stays comfortable on touch even when the row is short | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1832
|
+
| `--hub-table-select-hit-min-size` | `1.75rem` | Minimum height of the label wrapping the row checkbox, so the hit area stays comfortable on touch even when the row is short | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:1320` |
|
|
1817
1833
|
| `--hub-table-cell-bar-width` | `var(--hub-table-selected-bar-width)` | Internal per-cell relay of the selected-row bar width (mirrored/negated for RTL); theme via `--hub-table-selected-bar-width` | `INTERNAL` | `paginable/src/lib/components/table/table.component.scss:1122` |
|
|
1818
1834
|
| `--hub-table-cell-bar-color` | `var(--hub-table-selected-bar-color, var(--hub-table-accent))` | Internal per-cell relay of the selected-row bar colour; theme via `--hub-table-selected-bar-color` | `INTERNAL` | `paginable/src/lib/components/table/table.component.scss:1123` |
|
|
1819
1835
|
| `--hub-table-accent-bg` | `transparent` | Accent layer applied via `box-shadow inset` on cells | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:85` |
|
|
@@ -2090,10 +2106,10 @@ The legacy row-actions menu, deprecated since 22.16.0. Same rule as the filter p
|
|
|
2090
2106
|
| `--hub-paginator-select-padding-x` | `var(--hub-ref-space-2, 0.5rem)` | Horizontal padding of the items-per-page select | `IN_USE` | `paginable/src/lib/components/paginator/paginator.component.scss:38` |
|
|
2091
2107
|
| `--hub-paginator-select-padding-y` | `var(--hub-ref-space-1, 0.25rem)` | Vertical padding of the items-per-page select | `IN_USE` | `paginable/src/lib/components/paginator/paginator.component.scss:39` |
|
|
2092
2108
|
| `--hub-paginator-settings-gap` | `var(--hub-ref-space-2, 0.5rem)` | Gap between label and select in the settings row | `IN_USE` | `paginable/src/lib/components/paginator/paginator.component.scss:40` |
|
|
2093
|
-
| `--hub-paginator-icon-angle-left`
|
|
2094
|
-
| `--hub-paginator-icon-angle-right`
|
|
2095
|
-
| `--hub-paginator-icon-angle-double-left`
|
|
2096
|
-
| `--hub-paginator-icon-angle-double-right`
|
|
2109
|
+
| `--hub-paginator-icon-angle-left` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E")` | Icon for the previous-page button | `IN_USE` | `paginable/src/lib/components/paginator/paginator.component.scss:42` |
|
|
2110
|
+
| `--hub-paginator-icon-angle-right` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E")` | Icon for the next-page button | `IN_USE` | `paginable/src/lib/components/paginator/paginator.component.scss:43` |
|
|
2111
|
+
| `--hub-paginator-icon-angle-double-left` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z'/%3E%3C/svg%3E")` | Icon for the first-page button | `IN_USE` | `paginable/src/lib/components/paginator/paginator.component.scss:44` |
|
|
2112
|
+
| `--hub-paginator-icon-angle-double-right` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0z'/%3E%3C/svg%3E")` | Icon for the last-page button | `IN_USE` | `paginable/src/lib/components/paginator/paginator.component.scss:45` |
|
|
2097
2113
|
| `--hub-paginator-link-border-width` | `1px` | Page link border width | `IN_USE` | `paginable/src/lib/components/paginator/paginator.component.scss:18` |
|
|
2098
2114
|
| `--hub-paginator-link-focus-shadow` | `0 0 0 var(--hub-sys-focus-ring-width, 0.25rem) var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25))` | Page link focus ring shadow | `IN_USE` | `paginable/src/lib/components/paginator/paginator.component.scss:22` |
|
|
2099
2115
|
| `--hub-paginator-link-padding-x` | `0.75rem` | Page link horizontal padding | `IN_USE` | `paginable/src/lib/components/paginator/paginator.component.scss:20` |
|
|
@@ -2124,6 +2140,7 @@ Neutral loading-placeholder tokens (no semantic colour variant). The base / high
|
|
|
2124
2140
|
| `--hub-skeleton-node-columns` | runtime (`2`) | Column count of a grid node — written from the template DSL | `INTERNAL` | `skeleton/src/lib/hub-skeleton.component.ts:147` |
|
|
2125
2141
|
| `--hub-skeleton-node-align` | runtime (`stretch`) | Cross-axis alignment of a stack/grid node — written from the template DSL | `INTERNAL` | `skeleton/src/lib/hub-skeleton.component.ts:137` |
|
|
2126
2142
|
| `--hub-skeleton-node-justify` | runtime (`flex-start`) | Main-axis justification of a stack node — written from the template DSL | `INTERNAL` | `skeleton/src/lib/hub-skeleton.component.ts:138` |
|
|
2143
|
+
|
|
2127
2144
|
### `stepper`
|
|
2128
2145
|
|
|
2129
2146
|
| Token | Initial value | Usage | Status | Source |
|
|
@@ -2172,6 +2189,7 @@ Neutral loading-placeholder tokens (no semantic colour variant). The base / high
|
|
|
2172
2189
|
| `--hub-stepper-nav-padding-x` | `0` | Nav horizontal padding | `IN_USE` | `stepper/src/lib/stepper/stepper.component.scss:21` |
|
|
2173
2190
|
| `--hub-stepper-nav-padding-y` | `0` | Nav vertical padding | `IN_USE` | `stepper/src/lib/stepper/stepper.component.scss:22` |
|
|
2174
2191
|
| `--hub-stepper-nav-title-max-width` | `12rem` | Max width of a step nav title before ellipsis | `IN_USE` | `stepper/src/lib/stepper/stepper.component.scss:387` |
|
|
2192
|
+
|
|
2175
2193
|
### `layout`
|
|
2176
2194
|
|
|
2177
2195
|
#### `aside`
|
|
@@ -2388,6 +2406,7 @@ Neutral loading-placeholder tokens (no semantic colour variant). The base / high
|
|
|
2388
2406
|
| `--hub-nav-mobile-root-padding-inline` | `0.5rem` | Inline padding of the mobile root list | `IN_USE` | `nav/src/components/nav-mobile-panel/nav-mobile-panel.component.scss:73` |
|
|
2389
2407
|
| `--hub-nav-mobile-shadow` | `0 0.5rem 1rem rgba(0, 0, 0, 0.18)` | Box shadow of the mobile drawer panel | `IN_USE` | `nav/src/components/nav-mobile-panel/nav-mobile-panel.component.scss:85` |
|
|
2390
2408
|
| `--hub-nav-sticky-top` | runtime (`0px`) | Sticky offset from top — written from the `stickyTop` config option; set via config, not CSS | `INTERNAL` | `nav/src/components/nav/nav.component.ts:77` |
|
|
2409
|
+
|
|
2391
2410
|
### `panels`
|
|
2392
2411
|
|
|
2393
2412
|
The outer container chrome (`--hub-panels-content-bg`, `--hub-panels-border-*`, `--hub-panels-content-padding-*`) inherits from the `--hub-container-*` base layer, so it re-bases when a container token is overridden on a subtree. Inner pieces (tabs, cards, pills, accordion) keep their own tokens.
|
|
@@ -2522,31 +2541,33 @@ The navigation strip is **semantic-accent aware**: a single `--hub-panels-accent
|
|
|
2522
2541
|
| `--hub-panels-multiple-vertical-panel-min-width` | runtime (`0px`) | Min content width per `multiple + vertical` block, from the measured header height | `INTERNAL` | `panels/src/lib/components/panels/panels.component.ts:765` |
|
|
2523
2542
|
| `--hub-tabs-gap` | `0` | Gap between tabs in the <hub-tab-nav> strip | `IN_USE` | `panels/src/lib/components/tab-nav/tab-nav.component.scss:18` |
|
|
2524
2543
|
| `--hub-tabs-indicator-color` | `var(--hub-panels-accent, var(--hub-sys-color-primary, #0d6efd))` | Active-tab underline / active-pill fill colour for <hub-tab-nav> | `IN_USE` | `panels/src/lib/components/tab-nav/tab-nav.component.scss:16` |
|
|
2544
|
+
|
|
2525
2545
|
### `milestones`
|
|
2526
2546
|
|
|
2527
2547
|
| Token | Initial value | Usage | Status | Source |
|
|
2528
2548
|
| ----- | ------------- | ----- | ------ | ------ |
|
|
2529
|
-
| `--hub-milestone-body-color`
|
|
2530
|
-
| `--hub-milestone-body-muted`
|
|
2531
|
-
| `--hub-milestone-connector-bg`
|
|
2532
|
-
| `--hub-milestone-connector-pending-bg` | `var(--hub-sys-border-color-default, #dee2e6)` | Connector line (pending)
|
|
2533
|
-
| `--hub-milestone-connector-thickness`
|
|
2534
|
-
| `--hub-milestone-error-bg`
|
|
2535
|
-
| `--hub-milestone-gap`
|
|
2536
|
-
| `--hub-milestone-node-color`
|
|
2537
|
-
| `--hub-milestone-node-font-size`
|
|
2538
|
-
| `--hub-milestone-node-size`
|
|
2539
|
-
| `--hub-milestone-node-text`
|
|
2540
|
-
| `--hub-milestone-pending-bg`
|
|
2541
|
-
| `--hub-milestone-pending-border`
|
|
2542
|
-
| `--hub-milestone-pending-color`
|
|
2543
|
-
| `--hub-milestone-spacing`
|
|
2544
|
-
| `--hub-milestone-pulse-color`
|
|
2545
|
-
| `--hub-milestone-pulse-duration`
|
|
2546
|
-
| `--hub-milestone-pulse-spread`
|
|
2547
|
-
| `--hub-milestone-reveal-duration`
|
|
2548
|
-
| `--hub-milestone-reveal-stagger`
|
|
2549
|
+
| `--hub-milestone-body-color` | `var(--hub-sys-text-primary, #212529)` | Body text color | `IN_USE` | `milestones/src/lib/milestones.component.scss:28` |
|
|
2550
|
+
| `--hub-milestone-body-muted` | `var(--hub-sys-text-muted, #6c757d)` | Muted body text color | `IN_USE` | `milestones/src/lib/milestones.component.scss:29` |
|
|
2551
|
+
| `--hub-milestone-connector-bg` | `var(--hub-milestone-node-color)` | Connector line (completed) | `IN_USE` | `milestones/src/lib/milestones.component.scss:81` |
|
|
2552
|
+
| `--hub-milestone-connector-pending-bg` | `var(--hub-sys-border-color-default, #dee2e6)` | Connector line (pending) | `IN_USE` | `milestones/src/lib/milestones.component.scss:25` |
|
|
2553
|
+
| `--hub-milestone-connector-thickness` | `3px` | Connector line thickness | `IN_USE` | `milestones/src/lib/milestones.component.scss:24` |
|
|
2554
|
+
| `--hub-milestone-error-bg` | `var(--hub-sys-color-danger, #dc3545)` | Error node background | `IN_USE` | `milestones/src/lib/milestones.component.scss:23` |
|
|
2555
|
+
| `--hub-milestone-gap` | `1rem` | Gap between milestones | `IN_USE` | `milestones/src/lib/milestones.component.scss:26` |
|
|
2556
|
+
| `--hub-milestone-node-color` | `var(--hub-sys-color-primary, #0d6efd)` | Node background color | `IN_USE` | `milestones/src/lib/milestones.component.scss:18` |
|
|
2557
|
+
| `--hub-milestone-node-font-size` | `1.05rem` | Node label font size | `IN_USE` | `milestones/src/lib/milestones.component.scss:17` |
|
|
2558
|
+
| `--hub-milestone-node-size` | `2.75rem` | Node diameter | `IN_USE` | `milestones/src/lib/milestones.component.scss:16` |
|
|
2559
|
+
| `--hub-milestone-node-text` | `var(--hub-ref-color-white, #ffffff)` | Node text color | `IN_USE` | `milestones/src/lib/milestones.component.scss:19` |
|
|
2560
|
+
| `--hub-milestone-pending-bg` | `var(--hub-sys-surface-elevated, #f8f9fa)` | Pending node background | `IN_USE` | `milestones/src/lib/milestones.component.scss:20` |
|
|
2561
|
+
| `--hub-milestone-pending-border` | `var(--hub-sys-border-color-default, #dee2e6)` | Pending node border color | `IN_USE` | `milestones/src/lib/milestones.component.scss:22` |
|
|
2562
|
+
| `--hub-milestone-pending-color` | `var(--hub-sys-text-muted, #6c757d)` | Pending node text color | `IN_USE` | `milestones/src/lib/milestones.component.scss:21` |
|
|
2563
|
+
| `--hub-milestone-spacing` | `1.75rem` | Spacing between node and content | `IN_USE` | `milestones/src/lib/milestones.component.scss:27` |
|
|
2564
|
+
| `--hub-milestone-pulse-color` | `var(--hub-milestone-node-color)` | Color of the active-node pulse ring | `IN_USE` | `milestones/src/lib/milestones.component.scss:80` |
|
|
2565
|
+
| `--hub-milestone-pulse-duration` | `1.6s` | Duration of the pulse animation | `IN_USE` | `milestones/src/lib/milestones.component.scss:204` |
|
|
2566
|
+
| `--hub-milestone-pulse-spread` | `0.75rem` | Spread radius of the pulse ring | `IN_USE` | `milestones/src/lib/milestones.component.scss:187` |
|
|
2567
|
+
| `--hub-milestone-reveal-duration` | `0.5s` | Duration of the connector reveal/fill animation | `IN_USE` | `milestones/src/lib/milestones.component.scss:245` |
|
|
2568
|
+
| `--hub-milestone-reveal-stagger` | `0.14s` | Per-index delay of the staggered reveal | `IN_USE` | `milestones/src/lib/milestones.component.scss:246` |
|
|
2549
2569
|
| `--hub-milestone-index` | runtime (0-based) | Node position used to stagger the reveal delay; set per node by the parent | `INTERNAL` | `milestones/src/lib/milestone.component.ts:29` |
|
|
2570
|
+
|
|
2550
2571
|
### `icons`
|
|
2551
2572
|
|
|
2552
2573
|
Agnostic icon renderer (`ng-hub-ui-icons`). One token set themes any icon pack (Font Awesome, Bootstrap Icons, Material Symbols, Solar, custom SVG) uniformly. The variable-font axes (`fill`/`weight`/`grade`/`optical-size`) are applied via `font-variation-settings` and only affect variable icon fonts such as Material Symbols.
|
|
@@ -2756,4 +2777,3 @@ Unique custom properties **declared** in each library's source (`.scss` + inline
|
|
|
2756
2777
|
### Template variables
|
|
2757
2778
|
|
|
2758
2779
|
Template variables with interpolation are already documented in de-interpolated format within the `paginable` section.
|
|
2759
|
-
|