ng-hub-ui-ds 22.8.4 → 22.9.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 (5) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/docs/variables-css-library.en.md +113 -106
  3. package/package.json +1 -1
  4. package/styles/tokens/hub-tokens.css +25 -55
  5. package/styles/tokens/hub-tokens.scss +25 -56
package/CHANGELOG.md CHANGED
@@ -5,6 +5,46 @@ 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.0] - 2026-09-03
9
+
10
+ ### Removed
11
+
12
+ - **The Bootstrap bridge.** A block of `--hub-sys-*` declarations read Bootstrap's own variables
13
+ — `var(--bs-primary, …)`, `var(--bs-body-color, …)`, `var(--bs-border-color, …)` — and its
14
+ selector covered `:root` and every theme. With Bootstrap present it silently handed that
15
+ package control of this one's semantic tokens; without it, every declaration resolved to its
16
+ fallback and the block did nothing. It is gone, and with it the package's last dependency on
17
+ another framework's variables: **0** `--bs-*` references remain.
18
+
19
+ ### Changed
20
+
21
+ - **The `bootstrap` theme keeps its look and loses the dependency.** It borrowed the palette
22
+ through `var(--bs-*)` with the classic values as fallbacks; those values are now written
23
+ literally. It renders identically whether or not Bootstrap is loaded — which, since its
24
+ fallbacks were already the Bootstrap defaults, is what it rendered in practice all along.
25
+
26
+ ### Added
27
+
28
+ - Four themable hooks for the modal's close-button focus ring, documented in the token spec:
29
+ `--hub-modal-close-focus-ring-width`, `-color`, `-offset` and `-radius`.
30
+
31
+ ## [22.8.5] - 2026-09-02
32
+
33
+ ### Added
34
+
35
+ - **docs (modal)** — the three `--hub-modal-offcanvas-*` variables of `ng-hub-ui-modal` 22.8.0:
36
+ the width of a start/end drawer, the height of a top/bottom sheet, and the rounding of its
37
+ content. All three sit deliberately outside the modal size scale, which is the point of them:
38
+ `size: 'lg'` is 800px, and on an 853px window that covers the document the drawer is meant to be
39
+ read *against*, leaving 53px of it showing.
40
+
41
+ ### Fixed
42
+
43
+ - **Ninety `Source` citations point at the right lines again.** `ng-hub-ui-modal` moved its default
44
+ declarations from `.hub-modal` to `:root` to repair its composition contract, which shifted every
45
+ line after them. This package ships its `docs/` folder, so the citations travel to consumers and a
46
+ stale number sends a reader to the wrong rule. Nothing else moved, which the parity check confirms.
47
+
8
48
  ## [22.8.4] - 2026-09-02
9
49
 
10
50
  ### Added
package/docs/variables-css-library.en.md CHANGED
@@ -1372,22 +1372,22 @@ The `detail` token set is defined as a single, standardized collection that supp
1372
1372
  | `--hub-overlay-border-radius` | `var(--hub-sys-radius-sm, 0.25rem)` | Overlay border radius | `IN_USE` | `utils/src/lib/styles/overlay.scss:14` |
1373
1373
  | `--hub-overlay-shadow` | `var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15))` | Overlay shadow | `IN_USE` | `utils/src/lib/styles/overlay.scss:15` |
1374
1374
  | `--hub-overlay-zindex` | `var(--hub-sys-zindex-dropdown, 1000)` | Overlay z index | `IN_USE` | `utils/src/lib/styles/overlay.scss:16` |
1375
- | `--hub-tooltip-bg` | `var(--hub-ref-color-black, #000)` | Tooltip background | `IN_USE` | `utils/src/lib/styles/tooltip.scss:17` |
1376
- | `--hub-tooltip-border-radius` | `var(--hub-sys-radius-md, 0.375rem)` | Tooltip corner radius | `IN_USE` | `utils/src/lib/styles/tooltip.scss:22` |
1377
- | `--hub-tooltip-color` | `var(--hub-ref-color-white, #fff)` | Tooltip text color | `IN_USE` | `utils/src/lib/styles/tooltip.scss:18` |
1378
- | `--hub-tooltip-font-family` | `var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif)` | Tooltip font family | `IN_USE` | `utils/src/lib/styles/tooltip.scss:32` |
1379
- | `--hub-tooltip-font-size` | `var(--hub-ref-font-size-sm, 0.875rem)` | Tooltip font size | `IN_USE` | `utils/src/lib/styles/tooltip.scss:23` |
1380
- | `--hub-tooltip-font-weight` | `var(--hub-ref-font-weight-base, 400)` | Tooltip font weight | `IN_USE` | `utils/src/lib/styles/tooltip.scss:24` |
1381
- | `--hub-tooltip-line-height` | `var(--hub-ref-line-height-base, 1.5)` | Tooltip line height | `IN_USE` | `utils/src/lib/styles/tooltip.scss:25` |
1382
- | `--hub-tooltip-max-width` | `200px` | Tooltip max width | `IN_USE` | `utils/src/lib/styles/tooltip.scss:26` |
1383
- | `--hub-tooltip-white-space` | `normal` | How the label wraps. Forwarded from the host, so one tooltip can be told to keep its text on a single line without a global rule that changes every tooltip in the product | `IN_USE` | `utils/src/lib/styles/tooltip.scss:27` |
1384
- | `--hub-tooltip-text-align` | `center` | Alignment of the label. Forwarded the same way — a tooltip carrying a sentence or two usually wants to read left, while a short name reads better centred | `IN_USE` | `utils/src/lib/styles/tooltip.scss:28` |
1385
- | `--hub-tooltip-opacity` | `0.9` | Tooltip visible opacity | `IN_USE` | `utils/src/lib/styles/tooltip.scss:19` |
1386
- | `--hub-tooltip-padding-x` | `var(--hub-ref-space-2, 0.5rem)` | Tooltip horizontal padding | `IN_USE` | `utils/src/lib/styles/tooltip.scss:20` |
1387
- | `--hub-tooltip-padding-y` | `var(--hub-ref-space-1, 0.25rem)` | Tooltip vertical padding | `IN_USE` | `utils/src/lib/styles/tooltip.scss:21` |
1388
- | `--hub-tooltip-shadow` | `none` | Tooltip box shadow | `IN_USE` | `utils/src/lib/styles/tooltip.scss:31` |
1389
- | `--hub-tooltip-transition-duration` | `0.15s` | Tooltip fade duration | `IN_USE` | `utils/src/lib/styles/tooltip.scss:30` |
1390
- | `--hub-tooltip-zindex` | `var(--hub-sys-zindex-tooltip, 1080)` | Tooltip stacking order | `IN_USE` | `utils/src/lib/styles/tooltip.scss:29` |
1375
+ | `--hub-tooltip-bg` | `var(--hub-sys-color-ink, #212529)` | Tooltip background | `IN_USE` | `utils/src/lib/styles/tooltip.scss:20` |
1376
+ | `--hub-tooltip-border-radius` | `var(--hub-sys-radius-md, 0.375rem)` | Tooltip corner radius | `IN_USE` | `utils/src/lib/styles/tooltip.scss:25` |
1377
+ | `--hub-tooltip-color` | `var(--hub-sys-surface-page, #fff)` | Tooltip text color | `IN_USE` | `utils/src/lib/styles/tooltip.scss:21` |
1378
+ | `--hub-tooltip-font-family` | `var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif)` | Tooltip font family | `IN_USE` | `utils/src/lib/styles/tooltip.scss:35` |
1379
+ | `--hub-tooltip-font-size` | `var(--hub-ref-font-size-sm, 0.875rem)` | Tooltip font size | `IN_USE` | `utils/src/lib/styles/tooltip.scss:26` |
1380
+ | `--hub-tooltip-font-weight` | `var(--hub-ref-font-weight-base, 400)` | Tooltip font weight | `IN_USE` | `utils/src/lib/styles/tooltip.scss:27` |
1381
+ | `--hub-tooltip-line-height` | `var(--hub-ref-line-height-base, 1.5)` | Tooltip line height | `IN_USE` | `utils/src/lib/styles/tooltip.scss:28` |
1382
+ | `--hub-tooltip-max-width` | `200px` | Tooltip max width | `IN_USE` | `utils/src/lib/styles/tooltip.scss:29` |
1383
+ | `--hub-tooltip-white-space` | `normal` | How the label wraps. Forwarded from the host, so one tooltip can be told to keep its text on a single line without a global rule that changes every tooltip in the product | `IN_USE` | `utils/src/lib/styles/tooltip.scss:30` |
1384
+ | `--hub-tooltip-text-align` | `center` | Alignment of the label. Forwarded the same way — a tooltip carrying a sentence or two usually wants to read left, while a short name reads better centred | `IN_USE` | `utils/src/lib/styles/tooltip.scss:31` |
1385
+ | `--hub-tooltip-opacity` | `0.9` | Tooltip visible opacity | `IN_USE` | `utils/src/lib/styles/tooltip.scss:22` |
1386
+ | `--hub-tooltip-padding-x` | `var(--hub-ref-space-2, 0.5rem)` | Tooltip horizontal padding | `IN_USE` | `utils/src/lib/styles/tooltip.scss:23` |
1387
+ | `--hub-tooltip-padding-y` | `var(--hub-ref-space-1, 0.25rem)` | Tooltip vertical padding | `IN_USE` | `utils/src/lib/styles/tooltip.scss:24` |
1388
+ | `--hub-tooltip-shadow` | `none` | Tooltip box shadow | `IN_USE` | `utils/src/lib/styles/tooltip.scss:34` |
1389
+ | `--hub-tooltip-transition-duration` | `0.15s` | Tooltip fade duration | `IN_USE` | `utils/src/lib/styles/tooltip.scss:33` |
1390
+ | `--hub-tooltip-zindex` | `var(--hub-sys-zindex-tooltip, 1080)` | Tooltip stacking order | `IN_USE` | `utils/src/lib/styles/tooltip.scss:32` |
1391
1391
 
1392
1392
  ### `select`
1393
1393
 
@@ -1608,108 +1608,115 @@ The standalone `tabs` proposal was **superseded**: the tabs UI shipped inside `n
1608
1608
 
1609
1609
  | Token | Initial value | Usage | Status | Source |
1610
1610
  | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | -------- | ------------------------------ |
1611
- | `--hub-modal-zindex` | `var(--hub-sys-zindex-modal, 1055)` | Modal layer z-index | `IN_USE` | `modal/src/lib/modal.scss:46` |
1612
- | `--hub-modal-backdrop-zindex` | `calc(var(--hub-modal-zindex, var(--hub-sys-zindex-modal, 1055)) - 1)` | Backdrop layer z-index | `IN_USE` | `modal/src/lib/modal.scss:168` |
1613
- | `--hub-modal-accent` | `var(--hub-sys-color-primary, #0d6efd)` | Semantic accent (opt-in via `variant`); re-based per variant | `IN_USE` | `modal/src/lib/modal.scss:54` |
1614
- | `--hub-modal-accent-subtle` | `color-mix(in oklch, var(--hub-modal-accent) 12%, var(--hub-sys-surface-page, #ffffff))` | Variant tinted background (generated from the accent) | `IN_USE` | `modal/src/lib/modal.scss:56` |
1615
- | `--hub-modal-accent-border` | `color-mix(in oklch, var(--hub-modal-accent) 35%, var(--hub-sys-surface-page, #ffffff))` | Variant accent-tinted border (outer + header/footer rules) | `IN_USE` | `modal/src/lib/modal.scss:58` |
1616
- | `--hub-modal-accent-bar-width` | `var(--hub-ref-space-1, 0.25rem)` | Thickness of the variant accent bar atop the dialog | `IN_USE` | `modal/src/lib/modal.scss:59` |
1617
- | `--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:142` |
1618
- | `--hub-modal-width` | `auto` | Base dialog width | `IN_USE` | `modal/src/lib/modal.scss:60` |
1619
- | `--hub-modal-max-width` | `500px` | Dialog max-width | `IN_USE` | `modal/src/lib/modal.scss:61` |
1620
- | `--hub-modal-color` | `var(--hub-sys-text-primary, #212529)` | Base modal text color | `IN_USE` | `modal/src/lib/modal.scss:109` |
1621
- | `--hub-modal-bg` | `var(--hub-sys-surface-page, #ffffff)` | Modal content background | `IN_USE` | `modal/src/lib/modal.scss:110` |
1622
- | `--hub-modal-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Modal border color | `IN_USE` | `modal/src/lib/modal.scss:111` |
1623
- | `--hub-modal-border-width` | `var(--hub-ref-border-width, 1px)` | Modal border width | `IN_USE` | `modal/src/lib/modal.scss:112` |
1624
- | `--hub-modal-border-radius` | `var(--hub-ref-radius-lg, 0.5rem)` | Modal outer border radius | `IN_USE` | `modal/src/lib/modal.scss:113` |
1625
- | `--hub-modal-inner-border-radius` | `calc( var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) - var( --hub-modal-border-width, var(--hub-ref-border-width, 1px) ) )` | Inner radius for header/footer caps | `IN_USE` | `modal/src/lib/modal.scss:122` |
1626
- | `--hub-modal-box-shadow` | `var(--hub-sys-shadow-lg, 0 1rem 3rem rgba(0,0,0,0.175))` | Modal elevation shadow | `IN_USE` | `modal/src/lib/modal.scss:128` |
1611
+ | `--hub-modal-zindex` | `var(--hub-sys-zindex-modal, 1055)` | Modal layer z-index | `IN_USE` | `modal/src/lib/modal.scss:61` |
1612
+ | `--hub-modal-backdrop-zindex` | `calc(var(--hub-modal-zindex, var(--hub-sys-zindex-modal, 1055)) - 1)` | Backdrop layer z-index | `IN_USE` | `modal/src/lib/modal.scss:183` |
1613
+ | `--hub-modal-accent` | `var(--hub-sys-color-primary, #0d6efd)` | Semantic accent (opt-in via `variant`); re-based per variant | `IN_USE` | `modal/src/lib/modal.scss:69` |
1614
+ | `--hub-modal-accent-subtle` | `color-mix(in oklch, var(--hub-modal-accent) 12%, var(--hub-sys-surface-page, #ffffff))` | Variant tinted background (generated from the accent) | `IN_USE` | `modal/src/lib/modal.scss:71` |
1615
+ | `--hub-modal-accent-border` | `color-mix(in oklch, var(--hub-modal-accent) 35%, var(--hub-sys-surface-page, #ffffff))` | Variant accent-tinted border (outer + header/footer rules) | `IN_USE` | `modal/src/lib/modal.scss:73` |
1616
+ | `--hub-modal-accent-bar-width` | `var(--hub-ref-space-1, 0.25rem)` | Thickness of the variant accent bar atop the dialog | `IN_USE` | `modal/src/lib/modal.scss:74` |
1617
+ | `--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:157` |
1618
+ | `--hub-modal-width` | `auto` | Base dialog width | `IN_USE` | `modal/src/lib/modal.scss:75` |
1619
+ | `--hub-modal-max-width` | `500px` | Dialog max-width | `IN_USE` | `modal/src/lib/modal.scss:76` |
1620
+ | `--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` |
1621
+ | `--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` |
1622
+ | `--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` |
1623
+ | `--hub-modal-color` | `var(--hub-sys-text-primary, #212529)` | Base modal text color | `IN_USE` | `modal/src/lib/modal.scss:124` |
1624
+ | `--hub-modal-bg` | `var(--hub-sys-surface-page, #ffffff)` | Modal content background | `IN_USE` | `modal/src/lib/modal.scss:125` |
1625
+ | `--hub-modal-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Modal border color | `IN_USE` | `modal/src/lib/modal.scss:126` |
1626
+ | `--hub-modal-border-width` | `var(--hub-ref-border-width, 1px)` | Modal border width | `IN_USE` | `modal/src/lib/modal.scss:127` |
1627
+ | `--hub-modal-border-radius` | `var(--hub-ref-radius-lg, 0.5rem)` | Modal outer border radius | `IN_USE` | `modal/src/lib/modal.scss:128` |
1628
+ | `--hub-modal-inner-border-radius` | `calc( var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) - var( --hub-modal-border-width, var(--hub-ref-border-width, 1px) ) )` | Inner radius for header/footer caps | `IN_USE` | `modal/src/lib/modal.scss:137` |
1629
+ | `--hub-modal-box-shadow` | `var(--hub-sys-shadow-lg, 0 1rem 3rem rgba(0,0,0,0.175))` | Modal elevation shadow | `IN_USE` | `modal/src/lib/modal.scss:143` |
1627
1630
  | **Margin tokens** | | | | |
1628
- | `--hub-modal-margin-y` | `1.75rem` | Vertical margin alias used by top/bottom margin tokens | `IN_USE` | `modal/src/lib/modal.scss:62` |
1629
- | `--hub-modal-margin-x` | `auto` | Horizontal margin alias used by left/right margin tokens | `IN_USE` | `modal/src/lib/modal.scss:63` |
1630
- | `--hub-modal-margin-top` | `var(--hub-modal-margin-y, 1.75rem)` | Dialog top margin | `IN_USE` | `modal/src/lib/modal.scss:64` |
1631
- | `--hub-modal-margin-right` | `var(--hub-modal-margin-x, auto)` | Dialog right margin | `IN_USE` | `modal/src/lib/modal.scss:65` |
1632
- | `--hub-modal-margin-bottom` | `var(--hub-modal-margin-y, 1.75rem)` | Dialog bottom margin | `IN_USE` | `modal/src/lib/modal.scss:66` |
1633
- | `--hub-modal-margin-left` | `var(--hub-modal-margin-x, auto)` | Dialog left margin | `IN_USE` | `modal/src/lib/modal.scss:67` |
1634
- | `--hub-modal-margin-block` | `calc( var(--hub-modal-margin-top, 1.75rem) + var(--hub-modal-margin-bottom, 1.75rem) )` | Sum of vertical margins (used for scrollable min-height calc) | `IN_USE` | `modal/src/lib/modal.scss:68` |
1635
- | `--hub-modal-margin` | `var(--hub-modal-margin-top) var(--hub-modal-margin-right) var(--hub-modal-margin-bottom) var(--hub-modal-margin-left)` | Dialog outer margin shorthand | `IN_USE` | `modal/src/lib/modal.scss:69` |
1631
+ | `--hub-modal-margin-y` | `1.75rem` | Vertical margin alias used by top/bottom margin tokens | `IN_USE` | `modal/src/lib/modal.scss:77` |
1632
+ | `--hub-modal-margin-x` | `auto` | Horizontal margin alias used by left/right margin tokens | `IN_USE` | `modal/src/lib/modal.scss:78` |
1633
+ | `--hub-modal-margin-top` | `var(--hub-modal-margin-y, 1.75rem)` | Dialog top margin | `IN_USE` | `modal/src/lib/modal.scss:79` |
1634
+ | `--hub-modal-margin-right` | `var(--hub-modal-margin-x, auto)` | Dialog right margin | `IN_USE` | `modal/src/lib/modal.scss:80` |
1635
+ | `--hub-modal-margin-bottom` | `var(--hub-modal-margin-y, 1.75rem)` | Dialog bottom margin | `IN_USE` | `modal/src/lib/modal.scss:81` |
1636
+ | `--hub-modal-margin-left` | `var(--hub-modal-margin-x, auto)` | Dialog left margin | `IN_USE` | `modal/src/lib/modal.scss:82` |
1637
+ | `--hub-modal-margin-block` | `calc( var(--hub-modal-margin-top, 1.75rem) + var(--hub-modal-margin-bottom, 1.75rem) )` | Sum of vertical margins (used for scrollable min-height calc) | `IN_USE` | `modal/src/lib/modal.scss:83` |
1638
+ | `--hub-modal-margin` | `var(--hub-modal-margin-top) var(--hub-modal-margin-right) var(--hub-modal-margin-bottom) var(--hub-modal-margin-left)` | Dialog outer margin shorthand | `IN_USE` | `modal/src/lib/modal.scss:84` |
1636
1639
  | **Placement — Start (left drawer)** | | | | |
1637
- | `--hub-modal-placement-start-margin-top` | `var(--hub-modal-margin-top, 1.75rem)` | Top margin when placement=start | `IN_USE` | `modal/src/lib/modal.scss:71` |
1638
- | `--hub-modal-placement-start-margin-right` | `auto` | Right margin when placement=start | `IN_USE` | `modal/src/lib/modal.scss:72` |
1639
- | `--hub-modal-placement-start-margin-bottom` | `var(--hub-modal-margin-bottom, 1.75rem)` | Bottom margin when placement=start | `IN_USE` | `modal/src/lib/modal.scss:73` |
1640
- | `--hub-modal-placement-start-margin-left` | `0` | Left margin when placement=start (flush to edge) | `IN_USE` | `modal/src/lib/modal.scss:74` |
1641
- | `--hub-modal-placement-start-margin-block` | `calc( var(--hub-modal-placement-start-margin-top, 1.75rem) + var(--hub-modal-placement-start-margin-bottom, 1.75rem) )` | Sum of vertical margins for start placement | `IN_USE` | `modal/src/lib/modal.scss:75` |
1642
- | `--hub-modal-placement-start-margin` | `var(--hub-modal-placement-start-margin-top) var(--hub-modal-placement-start-margin-right) var(--hub-modal-placement-start-margin-bottom) var(--hub-modal-placement-start-margin-left)` | Margin shorthand for start placement | `IN_USE` | `modal/src/lib/modal.scss:78` |
1643
- | `--hub-modal-placement-start-border-radius` | `0 var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) 0` | Border radius for start-anchored dialog (right corners rounded) | `IN_USE` | `modal/src/lib/modal.scss:114` |
1640
+ | `--hub-modal-placement-start-margin-top` | `var(--hub-modal-margin-top, 1.75rem)` | Top margin when placement=start | `IN_USE` | `modal/src/lib/modal.scss:86` |
1641
+ | `--hub-modal-placement-start-margin-right` | `auto` | Right margin when placement=start | `IN_USE` | `modal/src/lib/modal.scss:87` |
1642
+ | `--hub-modal-placement-start-margin-bottom` | `var(--hub-modal-margin-bottom, 1.75rem)` | Bottom margin when placement=start | `IN_USE` | `modal/src/lib/modal.scss:88` |
1643
+ | `--hub-modal-placement-start-margin-left` | `0` | Left margin when placement=start (flush to edge) | `IN_USE` | `modal/src/lib/modal.scss:89` |
1644
+ | `--hub-modal-placement-start-margin-block` | `calc( var(--hub-modal-placement-start-margin-top, 1.75rem) + var(--hub-modal-placement-start-margin-bottom, 1.75rem) )` | Sum of vertical margins for start placement | `IN_USE` | `modal/src/lib/modal.scss:90` |
1645
+ | `--hub-modal-placement-start-margin` | `var(--hub-modal-placement-start-margin-top) var(--hub-modal-placement-start-margin-right) var(--hub-modal-placement-start-margin-bottom) var(--hub-modal-placement-start-margin-left)` | Margin shorthand for start placement | `IN_USE` | `modal/src/lib/modal.scss:93` |
1646
+ | `--hub-modal-placement-start-border-radius` | `0 var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) 0` | Border radius for start-anchored dialog (right corners rounded) | `IN_USE` | `modal/src/lib/modal.scss:129` |
1644
1647
  | **Placement — End (right drawer)** | | | | |
1645
- | `--hub-modal-placement-end-margin-top` | `var(--hub-modal-margin-top, 1.75rem)` | Top margin when placement=end | `IN_USE` | `modal/src/lib/modal.scss:81` |
1646
- | `--hub-modal-placement-end-margin-right` | `0` | Right margin when placement=end (flush to edge) | `IN_USE` | `modal/src/lib/modal.scss:82` |
1647
- | `--hub-modal-placement-end-margin-bottom` | `var(--hub-modal-margin-bottom, 1.75rem)` | Bottom margin when placement=end | `IN_USE` | `modal/src/lib/modal.scss:83` |
1648
- | `--hub-modal-placement-end-margin-left` | `auto` | Left margin when placement=end | `IN_USE` | `modal/src/lib/modal.scss:84` |
1649
- | `--hub-modal-placement-end-margin-block` | `calc( var(--hub-modal-placement-end-margin-top, 1.75rem) + var(--hub-modal-placement-end-margin-bottom, 1.75rem) )` | Sum of vertical margins for end placement | `IN_USE` | `modal/src/lib/modal.scss:85` |
1650
- | `--hub-modal-placement-end-margin` | `var(--hub-modal-placement-end-margin-top) var(--hub-modal-placement-end-margin-right) var(--hub-modal-placement-end-margin-bottom) var(--hub-modal-placement-end-margin-left)` | Margin shorthand for end placement | `IN_USE` | `modal/src/lib/modal.scss:88` |
1651
- | `--hub-modal-placement-end-border-radius` | `var( --hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem) ) 0 0 var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem))` | Border radius for end-anchored dialog (left corners rounded) | `IN_USE` | `modal/src/lib/modal.scss:116` |
1648
+ | `--hub-modal-placement-end-margin-top` | `var(--hub-modal-margin-top, 1.75rem)` | Top margin when placement=end | `IN_USE` | `modal/src/lib/modal.scss:96` |
1649
+ | `--hub-modal-placement-end-margin-right` | `0` | Right margin when placement=end (flush to edge) | `IN_USE` | `modal/src/lib/modal.scss:97` |
1650
+ | `--hub-modal-placement-end-margin-bottom` | `var(--hub-modal-margin-bottom, 1.75rem)` | Bottom margin when placement=end | `IN_USE` | `modal/src/lib/modal.scss:98` |
1651
+ | `--hub-modal-placement-end-margin-left` | `auto` | Left margin when placement=end | `IN_USE` | `modal/src/lib/modal.scss:99` |
1652
+ | `--hub-modal-placement-end-margin-block` | `calc( var(--hub-modal-placement-end-margin-top, 1.75rem) + var(--hub-modal-placement-end-margin-bottom, 1.75rem) )` | Sum of vertical margins for end placement | `IN_USE` | `modal/src/lib/modal.scss:100` |
1653
+ | `--hub-modal-placement-end-margin` | `var(--hub-modal-placement-end-margin-top) var(--hub-modal-placement-end-margin-right) var(--hub-modal-placement-end-margin-bottom) var(--hub-modal-placement-end-margin-left)` | Margin shorthand for end placement | `IN_USE` | `modal/src/lib/modal.scss:103` |
1654
+ | `--hub-modal-placement-end-border-radius` | `var( --hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem) ) 0 0 var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem))` | Border radius for end-anchored dialog (left corners rounded) | `IN_USE` | `modal/src/lib/modal.scss:131` |
1652
1655
  | **Placement — Top (top sheet)** | | | | |
1653
- | `--hub-modal-placement-top-margin-top` | `0` | Top margin when placement=top (flush to top edge) | `IN_USE` | `modal/src/lib/modal.scss:90` |
1654
- | `--hub-modal-placement-top-margin-right` | `auto` | Right margin when placement=top | `IN_USE` | `modal/src/lib/modal.scss:91` |
1655
- | `--hub-modal-placement-top-margin-bottom` | `0` | Bottom margin when placement=top | `IN_USE` | `modal/src/lib/modal.scss:92` |
1656
- | `--hub-modal-placement-top-margin-left` | `auto` | Left margin when placement=top | `IN_USE` | `modal/src/lib/modal.scss:93` |
1657
- | `--hub-modal-placement-top-margin-block` | `calc( var(--hub-modal-placement-top-margin-top, 0px) + var(--hub-modal-placement-top-margin-bottom, 0px) )` | Sum of vertical margins for top placement | `IN_USE` | `modal/src/lib/modal.scss:94` |
1658
- | `--hub-modal-placement-top-margin` | `var(--hub-modal-placement-top-margin-top) var(--hub-modal-placement-top-margin-right) var(--hub-modal-placement-top-margin-bottom) var(--hub-modal-placement-top-margin-left)` | Margin shorthand for top placement | `IN_USE` | `modal/src/lib/modal.scss:97` |
1659
- | `--hub-modal-placement-top-border-radius` | `0 0 var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem))` | Border radius for top-anchored dialog (bottom corners rounded) | `IN_USE` | `modal/src/lib/modal.scss:118` |
1656
+ | `--hub-modal-placement-top-margin-top` | `0` | Top margin when placement=top (flush to top edge) | `IN_USE` | `modal/src/lib/modal.scss:105` |
1657
+ | `--hub-modal-placement-top-margin-right` | `auto` | Right margin when placement=top | `IN_USE` | `modal/src/lib/modal.scss:106` |
1658
+ | `--hub-modal-placement-top-margin-bottom` | `0` | Bottom margin when placement=top | `IN_USE` | `modal/src/lib/modal.scss:107` |
1659
+ | `--hub-modal-placement-top-margin-left` | `auto` | Left margin when placement=top | `IN_USE` | `modal/src/lib/modal.scss:108` |
1660
+ | `--hub-modal-placement-top-margin-block` | `calc( var(--hub-modal-placement-top-margin-top, 0px) + var(--hub-modal-placement-top-margin-bottom, 0px) )` | Sum of vertical margins for top placement | `IN_USE` | `modal/src/lib/modal.scss:109` |
1661
+ | `--hub-modal-placement-top-margin` | `var(--hub-modal-placement-top-margin-top) var(--hub-modal-placement-top-margin-right) var(--hub-modal-placement-top-margin-bottom) var(--hub-modal-placement-top-margin-left)` | Margin shorthand for top placement | `IN_USE` | `modal/src/lib/modal.scss:112` |
1662
+ | `--hub-modal-placement-top-border-radius` | `0 0 var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem))` | Border radius for top-anchored dialog (bottom corners rounded) | `IN_USE` | `modal/src/lib/modal.scss:133` |
1660
1663
  | **Placement — Bottom (bottom sheet)** | | | | |
1661
- | `--hub-modal-placement-bottom-margin-top` | `0` | Top margin when placement=bottom | `IN_USE` | `modal/src/lib/modal.scss:99` |
1662
- | `--hub-modal-placement-bottom-margin-right` | `auto` | Right margin when placement=bottom | `IN_USE` | `modal/src/lib/modal.scss:100` |
1663
- | `--hub-modal-placement-bottom-margin-bottom` | `0` | Bottom margin when placement=bottom (flush to bottom edge) | `IN_USE` | `modal/src/lib/modal.scss:101` |
1664
- | `--hub-modal-placement-bottom-margin-left` | `auto` | Left margin when placement=bottom | `IN_USE` | `modal/src/lib/modal.scss:102` |
1665
- | `--hub-modal-placement-bottom-margin-block` | `calc( var(--hub-modal-placement-bottom-margin-top, 0px) + var(--hub-modal-placement-bottom-margin-bottom, 0px) )` | Sum of vertical margins for bottom placement | `IN_USE` | `modal/src/lib/modal.scss:103` |
1666
- | `--hub-modal-placement-bottom-margin` | `var(--hub-modal-placement-bottom-margin-top) var(--hub-modal-placement-bottom-margin-right) var(--hub-modal-placement-bottom-margin-bottom) var(--hub-modal-placement-bottom-margin-left)` | Margin shorthand for bottom placement | `IN_USE` | `modal/src/lib/modal.scss:106` |
1667
- | `--hub-modal-placement-bottom-border-radius` | `var( --hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem) ) var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) 0 0` | Border radius for bottom-anchored dialog (top corners rounded) | `IN_USE` | `modal/src/lib/modal.scss:120` |
1664
+ | `--hub-modal-placement-bottom-margin-top` | `0` | Top margin when placement=bottom | `IN_USE` | `modal/src/lib/modal.scss:114` |
1665
+ | `--hub-modal-placement-bottom-margin-right` | `auto` | Right margin when placement=bottom | `IN_USE` | `modal/src/lib/modal.scss:115` |
1666
+ | `--hub-modal-placement-bottom-margin-bottom` | `0` | Bottom margin when placement=bottom (flush to bottom edge) | `IN_USE` | `modal/src/lib/modal.scss:116` |
1667
+ | `--hub-modal-placement-bottom-margin-left` | `auto` | Left margin when placement=bottom | `IN_USE` | `modal/src/lib/modal.scss:117` |
1668
+ | `--hub-modal-placement-bottom-margin-block` | `calc( var(--hub-modal-placement-bottom-margin-top, 0px) + var(--hub-modal-placement-bottom-margin-bottom, 0px) )` | Sum of vertical margins for bottom placement | `IN_USE` | `modal/src/lib/modal.scss:118` |
1669
+ | `--hub-modal-placement-bottom-margin` | `var(--hub-modal-placement-bottom-margin-top) var(--hub-modal-placement-bottom-margin-right) var(--hub-modal-placement-bottom-margin-bottom) var(--hub-modal-placement-bottom-margin-left)` | Margin shorthand for bottom placement | `IN_USE` | `modal/src/lib/modal.scss:121` |
1670
+ | `--hub-modal-placement-bottom-border-radius` | `var( --hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem) ) var(--hub-modal-border-radius, var(--hub-ref-radius-lg, 0.5rem)) 0 0` | Border radius for bottom-anchored dialog (top corners rounded) | `IN_USE` | `modal/src/lib/modal.scss:135` |
1668
1671
  | **Header** | | | | |
1669
- | `--hub-modal-header-padding-x` | `var(--hub-modal-padding-x)` | Header horizontal padding | `IN_USE` | `modal/src/lib/modal.scss:131` |
1670
- | `--hub-modal-header-padding-y` | `var(--hub-modal-padding-y)` | Header vertical padding | `IN_USE` | `modal/src/lib/modal.scss:132` |
1671
- | `--hub-modal-header-gap` | `var(--hub-ref-space-2, 0.5rem)` | Header content gap | `IN_USE` | `modal/src/lib/modal.scss:133` |
1672
- | `--hub-modal-header-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Header bottom border color | `IN_USE` | `modal/src/lib/modal.scss:134` |
1673
- | `--hub-modal-header-border-width` | `var(--hub-ref-border-width, 1px)` | Header bottom border width | `IN_USE` | `modal/src/lib/modal.scss:135` |
1672
+ | `--hub-modal-header-padding-x` | `var(--hub-modal-padding-x)` | Header horizontal padding | `IN_USE` | `modal/src/lib/modal.scss:146` |
1673
+ | `--hub-modal-header-padding-y` | `var(--hub-modal-padding-y)` | Header vertical padding | `IN_USE` | `modal/src/lib/modal.scss:147` |
1674
+ | `--hub-modal-header-gap` | `var(--hub-ref-space-2, 0.5rem)` | Header content gap | `IN_USE` | `modal/src/lib/modal.scss:148` |
1675
+ | `--hub-modal-header-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Header bottom border color | `IN_USE` | `modal/src/lib/modal.scss:149` |
1676
+ | `--hub-modal-header-border-width` | `var(--hub-ref-border-width, 1px)` | Header bottom border width | `IN_USE` | `modal/src/lib/modal.scss:150` |
1674
1677
  | **Title** | | | | |
1675
- | `--hub-modal-title-font-size` | `var(--hub-ref-font-size-lg, 1.25rem)` | Modal title font size | `IN_USE` | `modal/src/lib/modal.scss:136` |
1676
- | `--hub-modal-title-font-weight` | `var(--hub-ref-font-weight-medium, 500)` | Modal title font weight | `IN_USE` | `modal/src/lib/modal.scss:137` |
1677
- | `--hub-modal-title-line-height` | `var(--hub-ref-line-height-base, 1.5)` | Modal title line-height | `IN_USE` | `modal/src/lib/modal.scss:138` |
1678
- | `--hub-modal-title-margin-x` | `0` | Title horizontal margin | `IN_USE` | `modal/src/lib/modal.scss:139` |
1679
- | `--hub-modal-title-margin-y` | `0` | Title vertical margin | `IN_USE` | `modal/src/lib/modal.scss:140` |
1678
+ | `--hub-modal-title-font-size` | `var(--hub-ref-font-size-lg, 1.25rem)` | Modal title font size | `IN_USE` | `modal/src/lib/modal.scss:151` |
1679
+ | `--hub-modal-title-font-weight` | `var(--hub-ref-font-weight-medium, 500)` | Modal title font weight | `IN_USE` | `modal/src/lib/modal.scss:152` |
1680
+ | `--hub-modal-title-line-height` | `var(--hub-ref-line-height-base, 1.5)` | Modal title line-height | `IN_USE` | `modal/src/lib/modal.scss:153` |
1681
+ | `--hub-modal-title-margin-x` | `0` | Title horizontal margin | `IN_USE` | `modal/src/lib/modal.scss:154` |
1682
+ | `--hub-modal-title-margin-y` | `0` | Title vertical margin | `IN_USE` | `modal/src/lib/modal.scss:155` |
1680
1683
  | **Body** | | | | |
1681
- | `--hub-modal-body-padding-x` | `var(--hub-modal-padding-x)` | Body horizontal padding | `IN_USE` | `modal/src/lib/modal.scss:143` |
1682
- | `--hub-modal-body-padding-y` | `var(--hub-modal-padding-y)` | Body vertical padding | `IN_USE` | `modal/src/lib/modal.scss:144` |
1684
+ | `--hub-modal-body-padding-x` | `var(--hub-modal-padding-x)` | Body horizontal padding | `IN_USE` | `modal/src/lib/modal.scss:158` |
1685
+ | `--hub-modal-body-padding-y` | `var(--hub-modal-padding-y)` | Body vertical padding | `IN_USE` | `modal/src/lib/modal.scss:159` |
1683
1686
  | **Footer** | | | | |
1684
- | `--hub-modal-footer-padding-x` | `var(--hub-modal-padding-x)` | Footer horizontal padding | `IN_USE` | `modal/src/lib/modal.scss:145` |
1685
- | `--hub-modal-footer-padding-y` | `var(--hub-modal-padding-y)` | Footer vertical padding | `IN_USE` | `modal/src/lib/modal.scss:146` |
1686
- | `--hub-modal-footer-gap` | `var(--hub-ref-space-2, 0.5rem)` | Footer actions gap | `IN_USE` | `modal/src/lib/modal.scss:147` |
1687
- | `--hub-modal-footer-bg` | `var(--hub-modal-bg, var(--hub-sys-surface-page, #ffffff))` | Footer background | `IN_USE` | `modal/src/lib/modal.scss:148` |
1688
- | `--hub-modal-footer-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Footer top border color | `IN_USE` | `modal/src/lib/modal.scss:149` |
1689
- | `--hub-modal-footer-border-width` | `var(--hub-ref-border-width, 1px)` | Footer top border width | `IN_USE` | `modal/src/lib/modal.scss:150` |
1687
+ | `--hub-modal-footer-padding-x` | `var(--hub-modal-padding-x)` | Footer horizontal padding | `IN_USE` | `modal/src/lib/modal.scss:160` |
1688
+ | `--hub-modal-footer-padding-y` | `var(--hub-modal-padding-y)` | Footer vertical padding | `IN_USE` | `modal/src/lib/modal.scss:161` |
1689
+ | `--hub-modal-footer-gap` | `var(--hub-ref-space-2, 0.5rem)` | Footer actions gap | `IN_USE` | `modal/src/lib/modal.scss:162` |
1690
+ | `--hub-modal-footer-bg` | `var(--hub-modal-bg, var(--hub-sys-surface-page, #ffffff))` | Footer background | `IN_USE` | `modal/src/lib/modal.scss:163` |
1691
+ | `--hub-modal-footer-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Footer top border color | `IN_USE` | `modal/src/lib/modal.scss:164` |
1692
+ | `--hub-modal-footer-border-width` | `var(--hub-ref-border-width, 1px)` | Footer top border width | `IN_USE` | `modal/src/lib/modal.scss:165` |
1690
1693
  | **Close button** | | | | |
1691
- | `--hub-modal-close-color` | `var(--hub-sys-text-primary, #212529)` | Close button icon color | `IN_USE` | `modal/src/lib/modal.scss:151` |
1692
- | `--hub-modal-close-size` | `var(--hub-ref-font-size-lg, 1.25rem)` | Close button font-size (controls icon size) | `IN_USE` | `modal/src/lib/modal.scss:152` |
1693
- | `--hub-modal-close-line-height` | `1` | Close button line-height | `IN_USE` | `modal/src/lib/modal.scss:153` |
1694
- | `--hub-modal-close-opacity` | `0.5` | Close button base opacity | `IN_USE` | `modal/src/lib/modal.scss:156` |
1695
- | `--hub-modal-close-hover-opacity` | `0.75` | Close button hover/focus opacity | `IN_USE` | `modal/src/lib/modal.scss:157` |
1694
+ | `--hub-modal-close-color` | `var(--hub-sys-text-primary, #212529)` | Close button icon color | `IN_USE` | `modal/src/lib/modal.scss:166` |
1695
+ | `--hub-modal-close-size` | `var(--hub-ref-font-size-lg, 1.25rem)` | Close button font-size (controls icon size) | `IN_USE` | `modal/src/lib/modal.scss:167` |
1696
+ | `--hub-modal-close-line-height` | `1` | Close button line-height | `IN_USE` | `modal/src/lib/modal.scss:168` |
1697
+ | `--hub-modal-close-opacity` | `0.5` | Close button base opacity | `IN_USE` | `modal/src/lib/modal.scss:171` |
1698
+ | `--hub-modal-close-hover-opacity` | `0.75` | Close button hover/focus opacity | `IN_USE` | `modal/src/lib/modal.scss:172` |
1699
+ | `--hub-modal-close-focus-ring-width` | `2px` | Close button focus ring thickness | `IN_USE` | `modal/src/lib/modal.scss:521` |
1700
+ | `--hub-modal-close-focus-ring-color` | `var(--hub-modal-accent)` | Close button focus ring color; follows the dialog accent so a variant dialog does not draw the browser default blue | `IN_USE` | `modal/src/lib/modal.scss:522` |
1701
+ | `--hub-modal-close-focus-ring-offset` | `2px` | Gap between the close button and its focus ring | `IN_USE` | `modal/src/lib/modal.scss:523` |
1702
+ | `--hub-modal-close-focus-ring-radius` | `var(--hub-ref-radius-sm, 0.25rem)` | Corner radius of the close button focus ring | `IN_USE` | `modal/src/lib/modal.scss:524` |
1696
1703
  | **Backdrop** | | | | |
1697
- | `--hub-modal-backdrop-bg` | `var(--hub-ref-color-black, #000000)` | Backdrop background color | `IN_USE` | `modal/src/lib/modal.scss:158` |
1698
- | `--hub-modal-backdrop-opacity` | `var(--hub-sys-opacity-50, 0.5)` | Backdrop visible opacity | `IN_USE` | `modal/src/lib/modal.scss:159` |
1699
- | `--hub-modal-backdrop-opacity-hidden` | `var(--hub-sys-opacity-0, 0)` | Backdrop opacity when hidden (before fade-in) | `IN_USE` | `modal/src/lib/modal.scss:160` |
1700
- | `--hub-modal-backdrop-transition` | `opacity 0.15s linear` | Backdrop fade transition | `IN_USE` | `modal/src/lib/modal.scss:161` |
1704
+ | `--hub-modal-backdrop-bg` | `var(--hub-ref-color-black, #000000)` | Backdrop background color | `IN_USE` | `modal/src/lib/modal.scss:173` |
1705
+ | `--hub-modal-backdrop-opacity` | `var(--hub-sys-opacity-50, 0.5)` | Backdrop visible opacity | `IN_USE` | `modal/src/lib/modal.scss:174` |
1706
+ | `--hub-modal-backdrop-opacity-hidden` | `var(--hub-sys-opacity-0, 0)` | Backdrop opacity when hidden (before fade-in) | `IN_USE` | `modal/src/lib/modal.scss:175` |
1707
+ | `--hub-modal-backdrop-transition` | `opacity 0.15s linear` | Backdrop fade transition | `IN_USE` | `modal/src/lib/modal.scss:176` |
1701
1708
  | **Motion** | | | | |
1702
- | `--hub-modal-fade-transform` | `translate(0, -50px)` | Dialog transform at fade start | `IN_USE` | `modal/src/lib/modal.scss:162` |
1703
- | `--hub-modal-show-transform` | `none` | Dialog transform when shown | `IN_USE` | `modal/src/lib/modal.scss:163` |
1704
- | `--hub-modal-transition` | `var(--hub-sys-transition-base, all 0.2s ease-in-out)` | Dialog transition curve/duration | `IN_USE` | `modal/src/lib/modal.scss:164` |
1705
- | `--hub-modal-dialog-inset` | `var(--hub-modal-margin-block, 3.5rem)` | Space the dialog discounts from the viewport when capping its own height, so the body is what scrolls rather than the page. Zero inside a fullscreen dialog, which covers the viewport and has no margin to discount | `IN_USE` | `modal/src/lib/modal.scss:313` |
1706
- | `--hub-modal-resize-duration` | `200` | Milliseconds the dialog takes to travel between two content heights. Unitless, because it is read from script rather than used in a CSS transition | `IN_USE` | `modal/src/lib/modal.scss:165` |
1707
- | `--hub-modal-resize-easing` | `ease-in-out` | Easing for that same height travel | `IN_USE` | `modal/src/lib/modal.scss:166` |
1708
- | `--hub-modal-scale-transform` | `scale(1.02)` | Dialog scale in static backdrop bump | `IN_USE` | `modal/src/lib/modal.scss:167` |
1709
- | `--hub-modal-close-padding-x` | `0` | Close button horizontal padding | `IN_USE` | `modal/src/lib/modal.scss:154` |
1710
- | `--hub-modal-close-padding-y` | `0` | Close button vertical padding | `IN_USE` | `modal/src/lib/modal.scss:155` |
1711
- | `--hub-modal-padding-x` | `var(--hub-ref-space-3, 1rem)` | Dialog body horizontal padding | `IN_USE` | `modal/src/lib/modal.scss:129` |
1712
- | `--hub-modal-padding-y` | `var(--hub-ref-space-3, 1rem)` | Dialog body vertical padding | `IN_USE` | `modal/src/lib/modal.scss:130` |
1709
+ | `--hub-modal-fade-transform` | `translate(0, -50px)` | Dialog transform at fade start | `IN_USE` | `modal/src/lib/modal.scss:177` |
1710
+ | `--hub-modal-show-transform` | `none` | Dialog transform when shown | `IN_USE` | `modal/src/lib/modal.scss:178` |
1711
+ | `--hub-modal-transition` | `var(--hub-sys-transition-base, all 0.2s ease-in-out)` | Dialog transition curve/duration | `IN_USE` | `modal/src/lib/modal.scss:179` |
1712
+ | `--hub-modal-dialog-inset` | `var(--hub-modal-margin-block, 3.5rem)` | Space the dialog discounts from the viewport when capping its own height, so the body is what scrolls rather than the page. Zero inside a fullscreen dialog, which covers the viewport and has no margin to discount | `IN_USE` | `modal/src/lib/modal.scss:344` |
1713
+ | `--hub-modal-resize-duration` | `200` | Milliseconds the dialog takes to travel between two content heights. Unitless, because it is read from script rather than used in a CSS transition | `IN_USE` | `modal/src/lib/modal.scss:180` |
1714
+ | `--hub-modal-resize-easing` | `ease-in-out` | Easing for that same height travel | `IN_USE` | `modal/src/lib/modal.scss:181` |
1715
+ | `--hub-modal-scale-transform` | `scale(1.02)` | Dialog scale in static backdrop bump | `IN_USE` | `modal/src/lib/modal.scss:182` |
1716
+ | `--hub-modal-close-padding-x` | `0` | Close button horizontal padding | `IN_USE` | `modal/src/lib/modal.scss:169` |
1717
+ | `--hub-modal-close-padding-y` | `0` | Close button vertical padding | `IN_USE` | `modal/src/lib/modal.scss:170` |
1718
+ | `--hub-modal-padding-x` | `var(--hub-ref-space-3, 1rem)` | Dialog body horizontal padding | `IN_USE` | `modal/src/lib/modal.scss:144` |
1719
+ | `--hub-modal-padding-y` | `var(--hub-ref-space-3, 1rem)` | Dialog body vertical padding | `IN_USE` | `modal/src/lib/modal.scss:145` |
1713
1720
 
1714
1721
  ### `toast`
1715
1722
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ng-hub-ui-ds",
3
- "version": "22.8.4",
3
+ "version": "22.9.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/tokens/hub-tokens.css CHANGED
@@ -582,43 +582,11 @@
582
582
  --hub-sys-transition-timing-function-base: ease;
583
583
  }
584
584
 
585
- /* ============================================================
586
- Bootstrap bridge variables
587
- Maps Bootstrap variables into hub sys tokens.
588
- ============================================================ */
589
- :root,
590
- [data-theme=base],
591
- [data-theme=light],
592
- [data-theme=bootstrap],
593
- [data-theme=dark],
594
- [data-theme=sunset],
595
- [data-theme=forest],
596
- [data-theme=mono] {
597
- --hub-sys-color-primary: var(--bs-primary, #0d6efd);
598
- --hub-sys-color-secondary: var(--bs-secondary, #6c757d);
599
- --hub-sys-color-success: var(--bs-success, #198754);
600
- --hub-sys-color-danger: var(--bs-danger, #dc3545);
601
- --hub-sys-color-warning: var(--bs-warning, #ffc107);
602
- --hub-sys-color-info: var(--bs-info, #0dcaf0);
603
- --hub-sys-color-dark: var(--bs-dark, #212529);
604
- --hub-sys-surface-elevated: var(--bs-light, #f8f9fa);
605
- --hub-sys-border-color-default: var(--bs-border-color, #dee2e6);
606
- --hub-sys-surface-page: var(--bs-body-bg, #ffffff);
607
- --hub-sys-text-primary: var(--bs-body-color, #212529);
608
- /* The de-emphasis ramp: alpha over the theme's own ink, so it follows any
609
- re-theme without a per-theme value. `secondary` here is the TEXT role,
610
- not the `secondary` ACCENT (a blue in most themes). */
611
- --hub-sys-text-secondary: color-mix(in srgb, var(--hub-sys-text-primary) 75%, transparent);
612
- --hub-sys-text-tertiary: color-mix(in srgb, var(--hub-sys-text-primary) 50%, transparent);
613
- }
614
-
615
585
  /* ============================================================
616
586
  LAYER 2 — sys (base alias)
617
587
  Base is equivalent to light theme and works as explicit default.
618
- Also re-asserted for :root / [data-theme='light'] AFTER the Bootstrap
619
- bridge above (whose selector also matches :root/light), so the default
620
- and light themes keep their ref-based accents/surfaces instead of being
621
- silently overridden by --bs-* when Bootstrap is present.
588
+ Every value here comes from the ref layer, so the package carries no
589
+ dependency on any other framework's variables.
622
590
  ============================================================ */
623
591
  :root,
624
592
  [data-theme=base],
@@ -649,32 +617,34 @@
649
617
 
650
618
  /* ============================================================
651
619
  LAYER 2 — sys (bootstrap-aligned)
652
- Preserves classic Bootstrap palette and spacing feel.
620
+ Reproduces the classic Bootstrap palette and spacing feel from literal
621
+ values. It is a look, not a dependency: nothing here reads a --bs-*
622
+ variable, so the theme renders identically with Bootstrap absent.
653
623
  ============================================================ */
654
624
  [data-theme=bootstrap] {
655
- --hub-sys-color-primary: var(--bs-primary, #0d6efd);
656
- --hub-sys-color-success: var(--bs-success, #198754);
657
- --hub-sys-color-danger: var(--bs-danger, #dc3545);
658
- --hub-sys-color-warning: var(--bs-warning, #ffc107);
659
- --hub-sys-color-info: var(--bs-info, #0dcaf0);
660
- --hub-sys-color-secondary: var(--bs-secondary, #6c757d);
661
- --hub-sys-color-dark: var(--bs-dark, #212529);
662
- --hub-sys-surface-page: var(--bs-body-bg, #ffffff);
663
- --hub-sys-surface-elevated: var(--bs-light, #f8f9fa);
664
- --hub-sys-text-primary: var(--bs-body-color, #212529);
625
+ --hub-sys-color-primary: #0d6efd;
626
+ --hub-sys-color-success: #198754;
627
+ --hub-sys-color-danger: #dc3545;
628
+ --hub-sys-color-warning: #ffc107;
629
+ --hub-sys-color-info: #0dcaf0;
630
+ --hub-sys-color-secondary: #6c757d;
631
+ --hub-sys-color-dark: #212529;
632
+ --hub-sys-surface-page: #ffffff;
633
+ --hub-sys-surface-elevated: #f8f9fa;
634
+ --hub-sys-text-primary: #212529;
665
635
  /* The de-emphasis ramp: alpha over the theme's own ink, so it follows any
666
636
  re-theme without a per-theme value. `secondary` here is the TEXT role,
667
637
  not the `secondary` ACCENT (a blue in most themes). */
668
638
  --hub-sys-text-secondary: color-mix(in srgb, var(--hub-sys-text-primary) 75%, transparent);
669
639
  --hub-sys-text-tertiary: color-mix(in srgb, var(--hub-sys-text-primary) 50%, transparent);
670
- --hub-sys-text-muted: var(--bs-secondary-color, #6c757d);
671
- --hub-sys-link-color: var(--bs-link-color, #0d6efd);
672
- --hub-sys-link-hover-color: var(--bs-link-hover-color, #0a58ca);
673
- --hub-sys-border-color-default: var(--bs-border-color, #dee2e6);
674
- --hub-sys-shadow-sm: var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
675
- --hub-sys-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
676
- --hub-sys-shadow-lg: var(--bs-box-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175));
677
- --hub-sys-focus-ring-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
640
+ --hub-sys-text-muted: #6c757d;
641
+ --hub-sys-link-color: #0d6efd;
642
+ --hub-sys-link-hover-color: #0a58ca;
643
+ --hub-sys-border-color-default: #dee2e6;
644
+ --hub-sys-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
645
+ --hub-sys-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
646
+ --hub-sys-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
647
+ --hub-sys-focus-ring-color: rgba(13, 110, 253, 0.25);
678
648
  --hub-sys-state-hover-bg: rgba(0, 0, 0, 0.075);
679
649
  --hub-sys-state-active-bg: rgba(0, 0, 0, 0.1);
680
650
  --hub-sys-state-striped-bg: rgba(0, 0, 0, 0.05);
@@ -862,8 +832,8 @@
862
832
  square corners, near-black surfaces and a glowing green palette.
863
833
  The immersive layer (scanlines, glow, code blocks and overrides
864
834
  for the documentation chrome) lives in styles/themes/terminal.scss.
865
- Note: terminal is intentionally excluded from the Bootstrap bridge
866
- block above, so its tokens and --bs-* overrides take full control.
835
+ Note: terminal is intentionally excluded from the bootstrap-aligned
836
+ theme block above, so its own tokens take full control.
867
837
  ============================================================ */
868
838
  [data-theme=terminal] {
869
839
  /* ----------------------------------------------------------
package/styles/tokens/hub-tokens.scss CHANGED
@@ -328,11 +328,11 @@ $hub-accents: map.merge($hub-accents, $hub-accents-extra);
328
328
  // Per-theme accent maps — just the base color of each variant a theme re-tints.
329
329
 
330
330
  $hub-accents-bootstrap: (
331
- primary: var(--bs-primary, #0d6efd),
332
- success: var(--bs-success, #198754),
333
- danger: var(--bs-danger, #dc3545),
334
- warning: var(--bs-warning, #ffc107),
335
- info: var(--bs-info, #0dcaf0)
331
+ primary: #0d6efd,
332
+ success: #198754,
333
+ danger: #dc3545,
334
+ warning: #ffc107,
335
+ info: #0dcaf0
336
336
  );
337
337
 
338
338
  $hub-accents-dark: (
@@ -597,44 +597,11 @@ $hub-accents-terminal: (
597
597
  --hub-sys-transition-timing-function-base: ease;
598
598
  }
599
599
 
600
- /* ============================================================
601
- Bootstrap bridge variables
602
- Maps Bootstrap variables into hub sys tokens.
603
- ============================================================ */
604
-
605
- :root,
606
- [data-theme='base'],
607
- [data-theme='light'],
608
- [data-theme='bootstrap'],
609
- [data-theme='dark'],
610
- [data-theme='sunset'],
611
- [data-theme='forest'],
612
- [data-theme='mono'] {
613
- --hub-sys-color-primary: var(--bs-primary, #0d6efd);
614
- --hub-sys-color-secondary: var(--bs-secondary, #6c757d);
615
- --hub-sys-color-success: var(--bs-success, #198754);
616
- --hub-sys-color-danger: var(--bs-danger, #dc3545);
617
- --hub-sys-color-warning: var(--bs-warning, #ffc107);
618
- --hub-sys-color-info: var(--bs-info, #0dcaf0);
619
- --hub-sys-color-dark: var(--bs-dark, #212529);
620
- --hub-sys-surface-elevated: var(--bs-light, #f8f9fa);
621
- --hub-sys-border-color-default: var(--bs-border-color, #dee2e6);
622
- --hub-sys-surface-page: var(--bs-body-bg, #ffffff);
623
- --hub-sys-text-primary: var(--bs-body-color, #212529);
624
- /* The de-emphasis ramp: alpha over the theme's own ink, so it follows any
625
- re-theme without a per-theme value. `secondary` here is the TEXT role,
626
- not the `secondary` ACCENT (a blue in most themes). */
627
- --hub-sys-text-secondary: color-mix(in srgb, var(--hub-sys-text-primary) 75%, transparent);
628
- --hub-sys-text-tertiary: color-mix(in srgb, var(--hub-sys-text-primary) 50%, transparent);
629
- }
630
-
631
600
  /* ============================================================
632
601
  LAYER 2 — sys (base alias)
633
602
  Base is equivalent to light theme and works as explicit default.
634
- Also re-asserted for :root / [data-theme='light'] AFTER the Bootstrap
635
- bridge above (whose selector also matches :root/light), so the default
636
- and light themes keep their ref-based accents/surfaces instead of being
637
- silently overridden by --bs-* when Bootstrap is present.
603
+ Every value here comes from the ref layer, so the package carries no
604
+ dependency on any other framework's variables.
638
605
  ============================================================ */
639
606
 
640
607
  :root,
@@ -658,29 +625,31 @@ $hub-accents-terminal: (
658
625
 
659
626
  /* ============================================================
660
627
  LAYER 2 — sys (bootstrap-aligned)
661
- Preserves classic Bootstrap palette and spacing feel.
628
+ Reproduces the classic Bootstrap palette and spacing feel from literal
629
+ values. It is a look, not a dependency: nothing here reads a --bs-*
630
+ variable, so the theme renders identically with Bootstrap absent.
662
631
  ============================================================ */
663
632
 
664
633
  [data-theme='bootstrap'] {
665
634
  @include hub-color-accents($hub-accents-bootstrap);
666
- --hub-sys-color-secondary: var(--bs-secondary, #6c757d);
667
- --hub-sys-color-dark: var(--bs-dark, #212529);
668
- --hub-sys-surface-page: var(--bs-body-bg, #ffffff);
669
- --hub-sys-surface-elevated: var(--bs-light, #f8f9fa);
670
- --hub-sys-text-primary: var(--bs-body-color, #212529);
635
+ --hub-sys-color-secondary: #6c757d;
636
+ --hub-sys-color-dark: #212529;
637
+ --hub-sys-surface-page: #ffffff;
638
+ --hub-sys-surface-elevated: #f8f9fa;
639
+ --hub-sys-text-primary: #212529;
671
640
  /* The de-emphasis ramp: alpha over the theme's own ink, so it follows any
672
641
  re-theme without a per-theme value. `secondary` here is the TEXT role,
673
642
  not the `secondary` ACCENT (a blue in most themes). */
674
643
  --hub-sys-text-secondary: color-mix(in srgb, var(--hub-sys-text-primary) 75%, transparent);
675
644
  --hub-sys-text-tertiary: color-mix(in srgb, var(--hub-sys-text-primary) 50%, transparent);
676
- --hub-sys-text-muted: var(--bs-secondary-color, #6c757d);
677
- --hub-sys-link-color: var(--bs-link-color, #0d6efd);
678
- --hub-sys-link-hover-color: var(--bs-link-hover-color, #0a58ca);
679
- --hub-sys-border-color-default: var(--bs-border-color, #dee2e6);
680
- --hub-sys-shadow-sm: var(--bs-box-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075));
681
- --hub-sys-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
682
- --hub-sys-shadow-lg: var(--bs-box-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, 0.175));
683
- --hub-sys-focus-ring-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
645
+ --hub-sys-text-muted: #6c757d;
646
+ --hub-sys-link-color: #0d6efd;
647
+ --hub-sys-link-hover-color: #0a58ca;
648
+ --hub-sys-border-color-default: #dee2e6;
649
+ --hub-sys-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
650
+ --hub-sys-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
651
+ --hub-sys-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
652
+ --hub-sys-focus-ring-color: rgba(13, 110, 253, 0.25);
684
653
  --hub-sys-state-hover-bg: rgba(0, 0, 0, 0.075);
685
654
  --hub-sys-state-active-bg: rgba(0, 0, 0, 0.1);
686
655
  --hub-sys-state-striped-bg: rgba(0, 0, 0, 0.05);
@@ -867,8 +836,8 @@ $hub-accents-terminal: (
867
836
  square corners, near-black surfaces and a glowing green palette.
868
837
  The immersive layer (scanlines, glow, code blocks and overrides
869
838
  for the documentation chrome) lives in styles/themes/terminal.scss.
870
- Note: terminal is intentionally excluded from the Bootstrap bridge
871
- block above, so its tokens and --bs-* overrides take full control.
839
+ Note: terminal is intentionally excluded from the bootstrap-aligned
840
+ theme block above, so its own tokens take full control.
872
841
  ============================================================ */
873
842
 
874
843
  [data-theme='terminal'] {