ng-hub-ui-ds 22.9.2 → 22.10.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 (7) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/docs/variables-css-library.en.md +74 -71
  3. package/package.json +1 -1
  4. package/styles/mixins/_surfaces.scss +10 -4
  5. package/styles/mixins/_theme.scss +19 -0
  6. package/styles/utilities/surfaces.css +16 -6
  7. package/styles/utilities/surfaces.scss +19 -5
package/CHANGELOG.md CHANGED
@@ -5,6 +5,35 @@ 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.10.0] - 2026-09-08
9
+
10
+ ### Added
11
+
12
+ - **A theme can now flatten the boxes it draws.** `.border` carried its `1px` written into the
13
+ rule, so a theme could recolour a border but never remove or thicken one — which meant a
14
+ flat-surface theme was impossible to express through tokens no matter how the consumer wrote its
15
+ markup. The width now travels on `--hub-border-width`, and the single-side rules on
16
+ `--hub-border-side-width`. They are two chains on purpose: `.border` outlines a surface and a flat
17
+ theme wants that gone, while `.border-bottom` separates one row from the next and that is
18
+ structure. One variable for both would force a theme to choose between keeping its cards and
19
+ losing its separators. One consequence is worth reading before upgrading: a theme that had
20
+ already re-based `--hub-ref-border-width` now sees the border utilities follow it, where they
21
+ used to ignore it. See `BREAKING_CHANGES.md`.
22
+ - **`theme()` takes surfaces and borders by name.** `$surfaces` sets `--hub-sys-surface-page` and
23
+ `-elevated`; `$borders` sets the border colour and the two width chains above. Both were reachable
24
+ through `$tokens` already, but a visual theme is mostly surfaces and borders, and routing the main
25
+ case through the escape hatch made the API read as if it only did colour and spacing.
26
+
27
+ ## [22.9.3] - 2026-09-08
28
+
29
+ ### Changed
30
+
31
+ - **The six `--hub-icon-*` rows point at the line they actually live on.** `icons` 22.3.0 moved its
32
+ base rules into `:where(.hub-icon)` and wrote the reason above them, which pushed every token
33
+ declaration down the file. The catalogue travels inside this package, so a citation left behind
34
+ sends a reader to a line that now holds something else — the same failure this package has
35
+ already released for twice. No token is new, renamed, or worth a different value.
36
+
8
37
  ## [22.9.2] - 2026-09-07
9
38
 
10
39
  ### Changed
package/docs/variables-css-library.en.md CHANGED
@@ -517,6 +517,8 @@ Cascade knobs read by the opt-in utility sheets and their mixin equivalents. The
517
517
  | `--hub-link-opacity` | `1` | Opacity multiplier for the `.link-*` text colour (set by `.link-opacity-{10,25,50,75,100}`) | `IN_USE` | `ds/styles/utilities/text.scss:199` |
518
518
  | `--hub-border-opacity` | `1` | Opacity multiplier applied by `.border` / `.border-*` colour utilities (set by `.border-opacity-{10,25,50,75,100}`) | `IN_USE` | `ds/styles/utilities/surfaces.scss:117` |
519
519
  | `--hub-focus-ring-opacity` | `0.25` | Alpha the `.focus-ring-*` utilities mix the accent with when re-tinting `--hub-sys-focus-ring-color` | `IN_USE` | `ds/styles/mixins/_helpers.scss:70` |
520
+ | `--hub-border-width` | `var(--hub-ref-border-width, 1px)` | Thickness of the box `.border` draws around a surface. A flat theme sets it to `0` and every boxed surface loses its outline at once, without a consumer rewriting a single rule | `IN_USE` | `ds/styles/mixins/_surfaces.scss:58` |
521
+ | `--hub-border-side-width` | `var(--hub-ref-border-width, 1px)` | Thickness of the single-side rules (`.border-top`, `-bottom`, `-start`, `-end`). Deliberately separate from `--hub-border-width`: those rules separate one row from the next, and that is structure a flat theme should not erase along with its cards | `IN_USE` | `ds/styles/utilities/surfaces.scss:93` |
520
522
 
521
523
  ## `container` Variables (Inheritable base)
522
524
 
@@ -1304,7 +1306,7 @@ The `detail` token set is defined as a single, standardized collection that supp
1304
1306
  | `--hub-badge-transition` | `var(--hub-sys-transition-base, all 0.2s ease-in-out)` | Badge transition | `IN_USE` | `badges/src/lib/components/badge/badge.component.scss:53` |
1305
1307
  | `--hub-badge-active-bg` | `var(--hub-badge-accent-emphasis)` | Active (pressed) background of an interactive badge (.hub-badge--active) | `IN_USE` | `badges/src/lib/components/badge/badge.component.scss:55` |
1306
1308
  | `--hub-badge-overlay-offset` | `-0.25rem` | Corner inset of the overlay status dot (dotOverlay) | `IN_USE` | `badges/src/lib/components/badge/badge.component.scss:57` |
1307
- | `--hub-chip-set-gap` | `var(--hub-ref-space-2, 0.5rem)` | Gap between chips inside a hub-chip-set | `IN_USE` | `badges/src/lib/components/chip-set/chip-set.component.scss:2` |
1309
+ | `--hub-chip-set-gap` | `var(--hub-ref-space-2, 0.5rem)` | Gap between chips inside a hub-chip-set | `IN_USE` | `badges/src/lib/components/chip-set/chip-set.component.scss:5` |
1308
1310
  | `--hub-chip-transition` | `var(--hub-sys-transition-base, all 0.2s ease-in-out)` | Chip transition | `IN_USE` | `badges/src/lib/components/chip/chip.component.scss:39` |
1309
1311
  | `--hub-chip-focus-ring-width` | `var(--hub-sys-focus-ring-width, 0.25rem)` | Chip focus ring width | `IN_USE` | `badges/src/lib/components/chip/chip.component.scss:38` |
1310
1312
  | `--hub-chip-border-radius` | `var(--hub-ref-radius-pill, 50rem)` | Chip shell radius | `IN_USE` | `badges/src/lib/components/chip/chip.component.scss:37` |
@@ -2188,7 +2190,7 @@ Neutral loading-placeholder tokens (no semantic colour variant). The base / high
2188
2190
  | `--hub-stepper-content-padding-y` | `0` | Content vertical padding | `IN_USE` | `stepper/src/lib/stepper/stepper.component.scss:60` |
2189
2191
  | `--hub-stepper-nav-padding-x` | `0` | Nav horizontal padding | `IN_USE` | `stepper/src/lib/stepper/stepper.component.scss:21` |
2190
2192
  | `--hub-stepper-nav-padding-y` | `0` | Nav vertical padding | `IN_USE` | `stepper/src/lib/stepper/stepper.component.scss:22` |
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` |
2193
+ | `--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:403` |
2192
2194
 
2193
2195
  ### `layout`
2194
2196
 
@@ -2276,6 +2278,7 @@ Neutral loading-placeholder tokens (no semantic colour variant). The base / high
2276
2278
  | `--hub-nav-accent-emphasis` | `color-mix(in oklch, var(--hub-nav-accent) 80%, var(--hub-sys-color-ink, #212529))` | Accent emphasis role — the accent mixed over the theme ink, so accent text reads with enough contrast | `IN_USE` | `nav/src/styles/nav-tokens.scss:43` |
2277
2279
  | `--hub-nav-accent-on` | `oklch(from var(--hub-nav-accent) clamp(0, (0.62 - l) * 1000, 1) 0 h)` | Accent on-color — text sitting on the accent, a grayscale flip driven by the accent's own lightness | `IN_USE` | `nav/src/styles/nav-tokens.scss:47` |
2278
2280
  | `--hub-nav-bg` | `color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff))` | Navigation surface background (faint accent tint, re-based per variant) | `IN_USE` | `nav/src/styles/nav-tokens.scss:50` |
2281
+ | `--hub-nav-bg-image` | `none` | Optional `<image>` layered over `--hub-nav-bg`. A gradient substituted into `background-color` computes to an invalid value and drops the declaration, so it travels on its own property with the colour underneath as the fallback | `CONSUMED` | `nav/src/components/nav/nav.component.scss:15` |
2279
2282
  | `--hub-nav-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Navigation border color | `IN_USE` | `nav/src/styles/nav-tokens.scss:52` |
2280
2283
  | `--hub-nav-border-style` | `solid` | Navigation border style | `IN_USE` | `nav/src/styles/nav-tokens.scss:54` |
2281
2284
  | `--hub-nav-border-width` | `1px` | Navigation border width | `IN_USE` | `nav/src/styles/nav-tokens.scss:53` |
@@ -2307,7 +2310,7 @@ Neutral loading-placeholder tokens (no semantic colour variant). The base / high
2307
2310
  | `--hub-nav-header-padding-y` | `var(--hub-ref-space-1, 0.25rem)` | Section header vertical padding | `IN_USE` | `nav/src/styles/nav-tokens.scss:114` |
2308
2311
  | `--hub-nav-height` | `3.5rem` | Navigation bar height | `IN_USE` | `nav/src/styles/nav-tokens.scss:9` |
2309
2312
  | `--hub-nav-horizontal-items-justify` | `center` | Horizontal items justification | `IN_USE` | `nav/src/styles/nav-tokens.scss:16` |
2310
- | `--hub-nav-collapsed-justify` | `space-between` | `justify-content` of items when the nav is collapsed (opt-in hook) | `IN_USE` | `nav/src/components/nav/nav.component.scss:69` |
2313
+ | `--hub-nav-collapsed-justify` | `space-between` | `justify-content` of items when the nav is collapsed (opt-in hook) | `IN_USE` | `nav/src/components/nav/nav.component.scss:75` |
2311
2314
  | `--hub-nav-horizontal-items-overflow-x` | `auto` | Horizontal items x-overflow | `IN_USE` | `nav/src/styles/nav-tokens.scss:17` |
2312
2315
  | `--hub-nav-horizontal-items-overflow-y` | `hidden` | Horizontal items y-overflow | `IN_USE` | `nav/src/styles/nav-tokens.scss:18` |
2313
2316
  | `--hub-nav-horizontal-padding-x` | `0` | Horizontal nav horizontal padding | `IN_USE` | `nav/src/styles/nav-tokens.scss:14` |
@@ -2562,11 +2565,11 @@ The navigation strip is **semantic-accent aware**: a single `--hub-panels-accent
2562
2565
  | `--hub-milestone-pending-color` | `var(--hub-sys-text-muted, #6c757d)` | Pending node text color | `IN_USE` | `milestones/src/lib/milestones.component.scss:21` |
2563
2566
  | `--hub-milestone-spacing` | `1.75rem` | Spacing between node and content | `IN_USE` | `milestones/src/lib/milestones.component.scss:27` |
2564
2567
  | `--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` |
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` |
2568
+ | `--hub-milestone-pulse-duration` | `1.6s` | Duration of the pulse animation | `IN_USE` | `milestones/src/lib/milestones.component.scss:248` |
2569
+ | `--hub-milestone-pulse-spread` | `0.75rem` | Spread radius of the pulse ring | `IN_USE` | `milestones/src/lib/milestones.component.scss:231` |
2570
+ | `--hub-milestone-reveal-duration` | `0.5s` | Duration of the connector reveal/fill animation | `IN_USE` | `milestones/src/lib/milestones.component.scss:289` |
2571
+ | `--hub-milestone-reveal-stagger` | `0.14s` | Per-index delay of the staggered reveal | `IN_USE` | `milestones/src/lib/milestones.component.scss:290` |
2572
+ | `--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:54` |
2570
2573
 
2571
2574
  ### `icons`
2572
2575
 
@@ -2574,12 +2577,12 @@ Agnostic icon renderer (`ng-hub-ui-icons`). One token set themes any icon pack (
2574
2577
 
2575
2578
  | Token | Initial value | Usage | Status | Source |
2576
2579
  | ----- | ------------- | ----- | ------ | ------ |
2577
- | `--hub-icon-size` | `1em` | Icon size (font-size for glyphs; width/height for SVG/img) | `IN_USE` | `icons/src/lib/styles/_icon-base.scss:11` |
2578
- | `--hub-icon-color` | `currentColor` | Icon color (color for glyphs; fill for SVG) | `IN_USE` | `icons/src/lib/styles/_icon-base.scss:12` |
2579
- | `--hub-icon-fill` | `0` | Variable-font `FILL` axis (Material Symbols) | `IN_USE` | `icons/src/lib/styles/_icon-base.scss:16` |
2580
- | `--hub-icon-weight` | `400` | Variable-font `wght` axis (Material Symbols) | `IN_USE` | `icons/src/lib/styles/_icon-base.scss:17` |
2581
- | `--hub-icon-grade` | `0` | Variable-font `GRAD` axis (Material Symbols) | `IN_USE` | `icons/src/lib/styles/_icon-base.scss:18` |
2582
- | `--hub-icon-optical-size` | `24` | Variable-font `opsz` axis (Material Symbols) | `IN_USE` | `icons/src/lib/styles/_icon-base.scss:19` |
2580
+ | `--hub-icon-size` | `1em` | Icon size (font-size for glyphs; width/height for SVG/img) | `IN_USE` | `icons/src/lib/styles/_icon-base.scss:29` |
2581
+ | `--hub-icon-color` | `currentColor` | Icon color (color for glyphs; fill for SVG) | `IN_USE` | `icons/src/lib/styles/_icon-base.scss:30` |
2582
+ | `--hub-icon-fill` | `0` | Variable-font `FILL` axis (Material Symbols) | `IN_USE` | `icons/src/lib/styles/_icon-base.scss:34` |
2583
+ | `--hub-icon-weight` | `400` | Variable-font `wght` axis (Material Symbols) | `IN_USE` | `icons/src/lib/styles/_icon-base.scss:35` |
2584
+ | `--hub-icon-grade` | `0` | Variable-font `GRAD` axis (Material Symbols) | `IN_USE` | `icons/src/lib/styles/_icon-base.scss:36` |
2585
+ | `--hub-icon-optical-size` | `24` | Variable-font `opsz` axis (Material Symbols) | `IN_USE` | `icons/src/lib/styles/_icon-base.scss:37` |
2583
2586
 
2584
2587
  ### `metrics`
2585
2588
 
@@ -2587,26 +2590,26 @@ Agnostic icon renderer (`ng-hub-ui-icons`). One token set themes any icon pack (
2587
2590
 
2588
2591
  | Token | Initial value | Usage | Status | Source |
2589
2592
  | ----- | ------------- | ----- | ------ | ------ |
2590
- | `--hub-progress-track-bg` | `color-mix(in oklch, var(--hub-progress-accent) 16%, transparent)` | Progress track background (subtle accent tint) | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:11` |
2591
- | `--hub-progress-indicator-bg` | `var(--hub-progress-accent)` | Filled progress indicator colour | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:12` |
2592
- | `--hub-progress-height` | `var(--hub-ref-space-2, 0.5rem)` | Progress bar thickness (sm/md/lg override it) | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:13` |
2593
- | `--hub-progress-radius` | `var(--hub-ref-radius-pill, 50rem)` | Progress bar corner radius | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:14` |
2594
- | `--hub-progress-value` | `0%` | Internal runtime width of the indicator (set from the value input) | `INTERNAL` | `metrics/src/lib/components/progress/progress.component.scss:41` |
2595
- | `--hub-meter-track-bg` | `color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 16%, transparent)` | Meter track background | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:11` |
2596
- | `--hub-meter-low-bg` | `var(--hub-sys-color-danger, #dc3545)` | Meter fill when the value is below target | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:12` |
2597
- | `--hub-meter-optimum-bg` | `var(--hub-sys-color-success, #198754)` | Meter fill when the value is on target | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:13` |
2598
- | `--hub-meter-high-bg` | `var(--hub-sys-color-warning, #ffc107)` | Meter fill when the value is above target | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:14` |
2599
- | `--hub-meter-height` | `var(--hub-ref-space-2, 0.5rem)` | Meter bar thickness | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:15` |
2600
- | `--hub-meter-radius` | `var(--hub-ref-radius-pill, 50rem)` | Meter bar corner radius | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:16` |
2601
- | `--hub-meter-fill` | `var(--hub-meter-optimum-bg)` | Internal band-selected meter fill colour | `INTERNAL` | `metrics/src/lib/components/meter/meter.component.scss:18` |
2602
- | `--hub-meter-value` | `0%` | Internal runtime width of the meter fill (set from the value input) | `INTERNAL` | `metrics/src/lib/components/meter/meter.component.scss:37` |
2603
- | `--hub-ring-size` | `4rem` | Ring outer diameter (overridden per-instance from size) | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:12` |
2604
- | `--hub-ring-thickness` | `var(--hub-ref-space-2, 0.5rem)` | Ring stroke width (overridden per-instance from thickness) | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:13` |
2605
- | `--hub-ring-track` | `color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 20%, transparent)` | Ring track stroke colour | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:14` |
2606
- | `--hub-ring-indicator` | `var(--hub-sys-color-primary, #0d6efd)` | Ring indicator stroke colour (neutral band) | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:15` |
2607
- | `--hub-ring-caption-color` | `var(--hub-sys-text-primary, #212529)` | Ring centre caption colour | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:16` |
2608
- | `--hub-ring-low-color` | `var(--hub-sys-color-danger, #dc3545)` | Ring stroke below the low threshold | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:17` |
2609
- | `--hub-ring-high-color` | `var(--hub-sys-color-success, #198754)` | Ring stroke at/above the high threshold | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:18` |
2593
+ | `--hub-progress-track-bg` | `color-mix(in oklch, var(--hub-progress-accent) 16%, transparent)` | Progress track background (subtle accent tint) | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:15` |
2594
+ | `--hub-progress-indicator-bg` | `var(--hub-progress-accent)` | Filled progress indicator colour | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:16` |
2595
+ | `--hub-progress-height` | `var(--hub-ref-space-2, 0.5rem)` | Progress bar thickness (sm/md/lg override it) | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:17` |
2596
+ | `--hub-progress-radius` | `var(--hub-ref-radius-pill, 50rem)` | Progress bar corner radius | `IN_USE` | `metrics/src/lib/components/progress/progress.component.scss:18` |
2597
+ | `--hub-progress-value` | `0%` | Internal runtime width of the indicator (set from the value input) | `INTERNAL` | `metrics/src/lib/components/progress/progress.component.scss:45` |
2598
+ | `--hub-meter-track-bg` | `color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 16%, transparent)` | Meter track background | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:15` |
2599
+ | `--hub-meter-low-bg` | `var(--hub-sys-color-danger, #dc3545)` | Meter fill when the value is below target | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:16` |
2600
+ | `--hub-meter-optimum-bg` | `var(--hub-sys-color-success, #198754)` | Meter fill when the value is on target | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:17` |
2601
+ | `--hub-meter-high-bg` | `var(--hub-sys-color-warning, #ffc107)` | Meter fill when the value is above target | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:18` |
2602
+ | `--hub-meter-height` | `var(--hub-ref-space-2, 0.5rem)` | Meter bar thickness | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:19` |
2603
+ | `--hub-meter-radius` | `var(--hub-ref-radius-pill, 50rem)` | Meter bar corner radius | `IN_USE` | `metrics/src/lib/components/meter/meter.component.scss:20` |
2604
+ | `--hub-meter-fill` | `var(--hub-meter-optimum-bg)` | Internal band-selected meter fill colour | `INTERNAL` | `metrics/src/lib/components/meter/meter.component.scss:22` |
2605
+ | `--hub-meter-value` | `0%` | Internal runtime width of the meter fill (set from the value input) | `INTERNAL` | `metrics/src/lib/components/meter/meter.component.scss:41` |
2606
+ | `--hub-ring-size` | `4rem` | Ring outer diameter (overridden per-instance from size) | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:16` |
2607
+ | `--hub-ring-thickness` | `var(--hub-ref-space-2, 0.5rem)` | Ring stroke width (overridden per-instance from thickness) | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:17` |
2608
+ | `--hub-ring-track` | `color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 20%, transparent)` | Ring track stroke colour | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:18` |
2609
+ | `--hub-ring-indicator` | `var(--hub-sys-color-primary, #0d6efd)` | Ring indicator stroke colour (neutral band) | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:19` |
2610
+ | `--hub-ring-caption-color` | `var(--hub-sys-text-primary, #212529)` | Ring centre caption colour | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:20` |
2611
+ | `--hub-ring-low-color` | `var(--hub-sys-color-danger, #dc3545)` | Ring stroke below the low threshold | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:21` |
2612
+ | `--hub-ring-high-color` | `var(--hub-sys-color-success, #198754)` | Ring stroke at/above the high threshold | `IN_USE` | `metrics/src/lib/components/ring/ring.component.scss:22` |
2610
2613
 
2611
2614
  ### `signature`
2612
2615
 
@@ -2614,17 +2617,17 @@ The signature field reuses the `.hub-field__*` shell from `ng-hub-ui-forms`, so
2614
2617
 
2615
2618
  | Token | Initial value | Usage | Status | Source |
2616
2619
  | ----- | ------------- | ----- | ------ | ------ |
2617
- | `--hub-signature-bg` | `var(--hub-input-bg, var(--hub-sys-surface, #fff))` | Drawing-surface background | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:2` |
2618
- | `--hub-signature-color` | `var(--hub-input-color, var(--hub-sys-text-primary, #212529))` | Field text colour | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:3` |
2619
- | `--hub-signature-border-color` | `var(--hub-input-border-color, var(--hub-sys-border, #ced4da))` | Drawing-surface border colour | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:4` |
2620
- | `--hub-signature-border-width` | `var(--hub-input-border-width, 1px)` | Drawing-surface border thickness | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:5` |
2621
- | `--hub-signature-border-radius` | `var(--hub-input-border-radius, var(--hub-ref-radius-md, 0.375rem))` | Drawing-surface corner radius | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:6` |
2622
- | `--hub-signature-focus-border-color` | `var(--hub-input-focus-border-color, var(--hub-sys-color-primary, #0d6efd))` | Border colour while the surface holds keyboard focus | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:7` |
2623
- | `--hub-signature-focus-shadow` | `var(--hub-input-focus-box-shadow, 0 0 0 0.25rem rgb(13 110 253 / 25%))` | Focus ring around the drawing surface | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:8` |
2624
- | `--hub-signature-label-color` | `var(--hub-label-color, var(--hub-sys-text-primary, #212529))` | Field label colour | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:9` |
2625
- | `--hub-signature-label-font-size` | `var(--hub-label-font-size, var(--hub-ref-font-size-sm, 0.875rem))` | Field label font size | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:10` |
2626
- | `--hub-signature-font-size` | `var(--hub-input-font-size, 1rem)` | Field font size | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:11` |
2627
- | `--hub-signature-actions-gap` | `var(--hub-ref-space-2, 0.5rem)` | Gap between the clear / undo / redo actions | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:12` |
2620
+ | `--hub-signature-bg` | `var(--hub-input-bg, var(--hub-sys-surface, #fff))` | Drawing-surface background | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:7` |
2621
+ | `--hub-signature-color` | `var(--hub-input-color, var(--hub-sys-text-primary, #212529))` | Field text colour | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:8` |
2622
+ | `--hub-signature-border-color` | `var(--hub-input-border-color, var(--hub-sys-border, #ced4da))` | Drawing-surface border colour | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:9` |
2623
+ | `--hub-signature-border-width` | `var(--hub-input-border-width, 1px)` | Drawing-surface border thickness | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:10` |
2624
+ | `--hub-signature-border-radius` | `var(--hub-input-border-radius, var(--hub-ref-radius-md, 0.375rem))` | Drawing-surface corner radius | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:11` |
2625
+ | `--hub-signature-focus-border-color` | `var(--hub-input-focus-border-color, var(--hub-sys-color-primary, #0d6efd))` | Border colour while the surface holds keyboard focus | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:12` |
2626
+ | `--hub-signature-focus-shadow` | `var(--hub-input-focus-box-shadow, 0 0 0 0.25rem rgb(13 110 253 / 25%))` | Focus ring around the drawing surface | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:13` |
2627
+ | `--hub-signature-label-color` | `var(--hub-label-color, var(--hub-sys-text-primary, #212529))` | Field label colour | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:14` |
2628
+ | `--hub-signature-label-font-size` | `var(--hub-label-font-size, var(--hub-ref-font-size-sm, 0.875rem))` | Field label font size | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:15` |
2629
+ | `--hub-signature-font-size` | `var(--hub-input-font-size, 1rem)` | Field font size | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:16` |
2630
+ | `--hub-signature-actions-gap` | `var(--hub-ref-space-2, 0.5rem)` | Gap between the clear / undo / redo actions | `IN_USE` | `signature/src/lib/components/signature/signature.component.scss:17` |
2628
2631
 
2629
2632
  ### `loading`
2630
2633
 
@@ -2632,17 +2635,17 @@ One accent drives all five indicator variants, so recolouring the spinner recolo
2632
2635
 
2633
2636
  | Token | Initial value | Usage | Status | Source |
2634
2637
  | ----- | ------------- | ----- | ------ | ------ |
2635
- | `--hub-loading-accent` | `var(--hub-sys-color-primary, #0d6efd)` | Indicator colour, shared by all five variants | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:7` |
2636
- | `--hub-loading-size` | `2.5rem` | Indicator diameter; the `sm` / `lg` modifiers re-declare it | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:8` |
2637
- | `--hub-loading-thickness` | `calc(var(--hub-ref-border-width, 1px) * 3)` | Stroke weight of the `spinner` and `ring` variants | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:9` |
2638
- | `--hub-loading-speed` | `0.9s` | Period of one animation loop, for every variant | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:10` |
2639
- | `--hub-loading-gap` | `var(--hub-sys-gap-2, var(--hub-ref-space-2, 0.5rem))` | Space between indicator, message and projected content | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:11` |
2640
- | `--hub-loading-text-color` | `var(--hub-sys-text-primary, var(--hub-ref-color-gray-900, #212529))` | Message colour | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:12` |
2641
- | `--hub-loading-font-size` | `var(--hub-ref-font-size-sm, 0.875rem)` | Message font size; the `sm` / `lg` modifiers re-declare it | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:13` |
2642
- | `--hub-loading-backdrop-bg` | `color-mix(in srgb, var(--hub-sys-surface-page, #ffffff) 72%, transparent)` | Scrim painted behind the `overlay` and `fullscreen` modes | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:16` |
2643
- | `--hub-loading-backdrop-blur` | `2px` | Blur radius applied to whatever the scrim covers | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:17` |
2644
- | `--hub-loading-z-index` | `var(--hub-sys-zindex-modal, 1055)` | Stacking order of the `fullscreen` overlay | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:18` |
2645
- | `--hub-loading-image-size` | `var(--hub-loading-size)` | Size of the branding image supplied through `image` | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:19` |
2638
+ | `--hub-loading-accent` | `var(--hub-sys-color-primary, #0d6efd)` | Indicator colour, shared by all five variants | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:11` |
2639
+ | `--hub-loading-size` | `2.5rem` | Indicator diameter; the `sm` / `lg` modifiers re-declare it | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:12` |
2640
+ | `--hub-loading-thickness` | `calc(var(--hub-ref-border-width, 1px) * 3)` | Stroke weight of the `spinner` and `ring` variants | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:13` |
2641
+ | `--hub-loading-speed` | `0.9s` | Period of one animation loop, for every variant | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:14` |
2642
+ | `--hub-loading-gap` | `var(--hub-sys-gap-2, var(--hub-ref-space-2, 0.5rem))` | Space between indicator, message and projected content | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:15` |
2643
+ | `--hub-loading-text-color` | `var(--hub-sys-text-primary, var(--hub-ref-color-gray-900, #212529))` | Message colour | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:16` |
2644
+ | `--hub-loading-font-size` | `var(--hub-ref-font-size-sm, 0.875rem)` | Message font size; the `sm` / `lg` modifiers re-declare it | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:17` |
2645
+ | `--hub-loading-backdrop-bg` | `color-mix(in srgb, var(--hub-sys-surface-page, #ffffff) 72%, transparent)` | Scrim painted behind the `overlay` and `fullscreen` modes | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:20` |
2646
+ | `--hub-loading-backdrop-blur` | `2px` | Blur radius applied to whatever the scrim covers | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:21` |
2647
+ | `--hub-loading-z-index` | `var(--hub-sys-zindex-modal, 1055)` | Stacking order of the `fullscreen` overlay | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:22` |
2648
+ | `--hub-loading-image-size` | `var(--hub-loading-size)` | Size of the branding image supplied through `image` | `IN_USE` | `loading/src/lib/components/loading/loading.component.scss:23` |
2646
2649
 
2647
2650
  ### `loading-bar`
2648
2651
 
@@ -2650,21 +2653,21 @@ The page-progress strip shares the library's philosophy but not its tokens: a ba
2650
2653
 
2651
2654
  | Token | Initial value | Usage | Status | Source |
2652
2655
  | ----- | ------------- | ----- | ------ | ------ |
2653
- | `--hub-loading-bar-accent` | `var(--hub-sys-color-primary, #0d6efd)` | Fill colour of the bar | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:9` |
2654
- | `--hub-loading-bar-height` | `3px` | Thickness of the strip | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:10` |
2655
- | `--hub-loading-bar-track-bg` | `transparent` | Unfilled track; transparent so an idle bar draws no permanent line under the navbar | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:13` |
2656
- | `--hub-loading-bar-radius` | `0` | Corner radius of the strip and its fill | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:14` |
2657
- | `--hub-loading-bar-speed` | `200ms` | How long the fill takes to catch up with a new value | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:15` |
2658
- | `--hub-loading-bar-fade` | `300ms` | Fade in and out of the whole strip | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:16` |
2659
- | `--hub-loading-bar-easing` | `linear` | Easing of the fill; linear reads as steady progress rather than as a flourish | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:17` |
2660
- | `--hub-loading-bar-glow-color` | `var(--hub-loading-bar-accent)` | Colour of the glow trailing the leading edge | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:18` |
2661
- | `--hub-loading-bar-glow-blur` | `10px` | Blur radius of that glow | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:19` |
2662
- | `--hub-loading-bar-glow-spread` | `1px` | Spread radius of that glow | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:20` |
2663
- | `--hub-loading-bar-indeterminate-speed` | `1.6s` | Period of one `indeterminate` sweep; calmed under `prefers-reduced-motion` | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:21` |
2664
- | `--hub-loading-bar-offset` | `0px` | Distance from the edge the `overlay` and `fixed` modes attach to | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:24` |
2665
- | `--hub-loading-bar-z-index` | `var(--hub-sys-zindex-sticky, 1020)` | Stacking order of the positioned modes, at chrome level | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:27` |
2666
- | `--hub-loading-bar-progress` | `0%` | Internal runtime fill, written by the component from its resolved value | `INTERNAL` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:29` |
2667
- | `--hub-loading-bar-sweep-direction` | `1` | Internal runtime sign flipping the `indeterminate` sweep under `[dir='rtl']` | `INTERNAL` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:31` |
2656
+ | `--hub-loading-bar-accent` | `var(--hub-sys-color-primary, #0d6efd)` | Fill colour of the bar | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:13` |
2657
+ | `--hub-loading-bar-height` | `3px` | Thickness of the strip | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:14` |
2658
+ | `--hub-loading-bar-track-bg` | `transparent` | Unfilled track; transparent so an idle bar draws no permanent line under the navbar | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:17` |
2659
+ | `--hub-loading-bar-radius` | `0` | Corner radius of the strip and its fill | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:18` |
2660
+ | `--hub-loading-bar-speed` | `200ms` | How long the fill takes to catch up with a new value | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:19` |
2661
+ | `--hub-loading-bar-fade` | `300ms` | Fade in and out of the whole strip | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:20` |
2662
+ | `--hub-loading-bar-easing` | `linear` | Easing of the fill; linear reads as steady progress rather than as a flourish | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:21` |
2663
+ | `--hub-loading-bar-glow-color` | `var(--hub-loading-bar-accent)` | Colour of the glow trailing the leading edge | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:22` |
2664
+ | `--hub-loading-bar-glow-blur` | `10px` | Blur radius of that glow | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:23` |
2665
+ | `--hub-loading-bar-glow-spread` | `1px` | Spread radius of that glow | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:24` |
2666
+ | `--hub-loading-bar-indeterminate-speed` | `1.6s` | Period of one `indeterminate` sweep; calmed under `prefers-reduced-motion` | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:25` |
2667
+ | `--hub-loading-bar-offset` | `0px` | Distance from the edge the `overlay` and `fixed` modes attach to | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:28` |
2668
+ | `--hub-loading-bar-z-index` | `var(--hub-sys-zindex-sticky, 1020)` | Stacking order of the positioned modes, at chrome level | `IN_USE` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:31` |
2669
+ | `--hub-loading-bar-progress` | `0%` | Internal runtime fill, written by the component from its resolved value | `INTERNAL` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:33` |
2670
+ | `--hub-loading-bar-sweep-direction` | `1` | Internal runtime sign flipping the `indeterminate` sweep under `[dir='rtl']` | `INTERNAL` | `loading/src/lib/components/loading-bar/loading-bar.component.scss:35` |
2668
2671
 
2669
2672
  ## Appendix
2670
2673
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ng-hub-ui-ds",
3
- "version": "22.9.2",
3
+ "version": "22.10.0",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "build:tokens": "sass styles/tokens/hub-tokens.scss styles/tokens/hub-tokens.css --style=expanded --no-source-map",
package/styles/mixins/_surfaces.scss CHANGED
@@ -48,11 +48,17 @@
48
48
  color: var(--hub-sys-color-#{$variant}-on);
49
49
  }
50
50
 
51
- /// Solid border on all sides, token-driven colour. The colour is emitted through
52
- /// `--hub-border-opacity` (default 1), so `.border-opacity-*` fades it.
53
- /// @param {Number} $width Border width.
51
+ /// Solid border on all sides, token-driven colour AND width. The colour is emitted
52
+ /// through `--hub-border-opacity` (default 1), so `.border-opacity-*` fades it; the
53
+ /// width goes through `--hub-border-width`, which is what lets a theme flatten every
54
+ /// boxed surface at once. Before this, the 1px was written into the rule, so a theme
55
+ /// could recolour a border but never remove or thicken one.
56
+ /// @param {Number} $width Border width; defaults to the themable width chain.
54
57
  /// @param {String} $color Any CSS colour; defaults to the canonical border token.
55
- @mixin border($width: 1px, $color: var(--hub-sys-border-color-default)) {
58
+ @mixin border(
59
+ $width: var(--hub-border-width, var(--hub-ref-border-width, 1px)),
60
+ $color: var(--hub-sys-border-color-default)
61
+ ) {
56
62
  border: $width solid color-mix(in srgb, #{$color} calc(var(--hub-border-opacity, 1) * 100%), transparent);
57
63
  }
58
64
 
package/styles/mixins/_theme.scss CHANGED
@@ -32,6 +32,13 @@
32
32
  /// @param {Map} $gap Gap step → value (`--hub-sys-gap-*`) — only to decouple gap from the spacing scale.
33
33
  /// @param {Map} $radius Radius step (none…xxl|pill) → value (`--hub-ref-radius-*`).
34
34
  /// @param {Map} $shadow Shadow size (sm|md|lg|inset) → value (`--hub-sys-shadow-*`).
35
+ /// @param {Map} $surfaces Surface role (page|elevated) → colour (`--hub-sys-surface-*`). Every accent
36
+ /// role family re-derives against it, so changing the page surface repaints
37
+ /// the tints without listing a single one of them.
38
+ /// @param {Map} $borders Border role → value. `color` sets `--hub-sys-border-color-default`; `width`
39
+ /// and `side-width` set the two chains the utilities read — the box drawn
40
+ /// around a surface and the rule that separates one row from the next. A flat
41
+ /// theme sets `width: 0` and leaves `side-width` alone.
35
42
  /// @param {Map} $font-family Family (base|display|mono) → stack (`--hub-ref-font-family-*`).
36
43
  /// @param {Map} $font-size Size step (xs|sm|base|lg) → value (`--hub-ref-font-size-*`; the fs-1…6 heading scale re-derives from base).
37
44
  /// @param {Map} $font-weight Weight (light|base|medium|semibold|bold) → value (`--hub-ref-font-weight-*`).
@@ -43,6 +50,8 @@
43
50
  $gap: (),
44
51
  $radius: (),
45
52
  $shadow: (),
53
+ $surfaces: (),
54
+ $borders: (),
46
55
  $font-family: (),
47
56
  $font-size: (),
48
57
  $font-weight: (),
@@ -64,6 +73,16 @@
64
73
  @each $size, $value in $shadow {
65
74
  --hub-sys-shadow-#{$size}: #{$value};
66
75
  }
76
+ @each $role, $value in $surfaces {
77
+ --hub-sys-surface-#{$role}: #{$value};
78
+ }
79
+ @each $role, $value in $borders {
80
+ @if $role == color {
81
+ --hub-sys-border-color-default: #{$value};
82
+ } @else {
83
+ --hub-border-#{$role}: #{$value};
84
+ }
85
+ }
67
86
  @each $family, $value in $font-family {
68
87
  --hub-ref-font-family-#{$family}: #{$value};
69
88
  }
package/styles/utilities/surfaces.css CHANGED
@@ -198,9 +198,19 @@
198
198
  color: var(--hub-sys-color-dark-on);
199
199
  }
200
200
 
201
- /* ── Borders — additive sides ── */
201
+ /* ── Borders — additive sides ──
202
+ *
203
+ * Width travels on two separate chains on purpose. `.border` draws the box around a
204
+ * surface, and a flat theme wants that gone; the single-side utilities draw the rule
205
+ * that separates one row from the next, and that is structure the theme has no
206
+ * business erasing. One variable for both would force a theme to choose between
207
+ * keeping its boxes and losing its separators.
208
+ *
209
+ * --hub-border-width the box → set to 0 for a theme with no cards
210
+ * --hub-border-side-width the rule → left alone by a flat theme
211
+ */
202
212
  .border {
203
- border: 1px solid color-mix(in srgb, var(--hub-sys-border-color-default) calc(var(--hub-border-opacity, 1) * 100%), transparent);
213
+ border: var(--hub-border-width, var(--hub-ref-border-width, 1px)) solid color-mix(in srgb, var(--hub-sys-border-color-default) calc(var(--hub-border-opacity, 1) * 100%), transparent);
204
214
  }
205
215
 
206
216
  .border-0 {
@@ -208,7 +218,7 @@
208
218
  }
209
219
 
210
220
  .border-top {
211
- border-block-start: 1px solid var(--hub-sys-border-color-default);
221
+ border-block-start: var(--hub-border-side-width, var(--hub-ref-border-width, 1px)) solid var(--hub-sys-border-color-default);
212
222
  }
213
223
 
214
224
  .border-top-0 {
@@ -216,7 +226,7 @@
216
226
  }
217
227
 
218
228
  .border-bottom {
219
- border-block-end: 1px solid var(--hub-sys-border-color-default);
229
+ border-block-end: var(--hub-border-side-width, var(--hub-ref-border-width, 1px)) solid var(--hub-sys-border-color-default);
220
230
  }
221
231
 
222
232
  .border-bottom-0 {
@@ -224,7 +234,7 @@
224
234
  }
225
235
 
226
236
  .border-start {
227
- border-inline-start: 1px solid var(--hub-sys-border-color-default);
237
+ border-inline-start: var(--hub-border-side-width, var(--hub-ref-border-width, 1px)) solid var(--hub-sys-border-color-default);
228
238
  }
229
239
 
230
240
  .border-start-0 {
@@ -232,7 +242,7 @@
232
242
  }
233
243
 
234
244
  .border-end {
235
- border-inline-end: 1px solid var(--hub-sys-border-color-default);
245
+ border-inline-end: var(--hub-border-side-width, var(--hub-ref-border-width, 1px)) solid var(--hub-sys-border-color-default);
236
246
  }
237
247
 
238
248
  .border-end-0 {
package/styles/utilities/surfaces.scss CHANGED
@@ -74,7 +74,17 @@ $_accents: primary, secondary, success, danger, warning, info, neutral, light, d
74
74
  }
75
75
  }
76
76
 
77
- /* ── Borders — additive sides ── */
77
+ /* ── Borders — additive sides ──
78
+ *
79
+ * Width travels on two separate chains on purpose. `.border` draws the box around a
80
+ * surface, and a flat theme wants that gone; the single-side utilities draw the rule
81
+ * that separates one row from the next, and that is structure the theme has no
82
+ * business erasing. One variable for both would force a theme to choose between
83
+ * keeping its boxes and losing its separators.
84
+ *
85
+ * --hub-border-width the box → set to 0 for a theme with no cards
86
+ * --hub-border-side-width the rule → left alone by a flat theme
87
+ */
78
88
  .border {
79
89
  @include surfaces.border();
80
90
  }
@@ -82,25 +92,29 @@ $_accents: primary, secondary, success, danger, warning, info, neutral, light, d
82
92
  border: 0;
83
93
  }
84
94
  .border-top {
85
- border-block-start: 1px solid var(--hub-sys-border-color-default);
95
+ border-block-start: var(--hub-border-side-width, var(--hub-ref-border-width, 1px)) solid
96
+ var(--hub-sys-border-color-default);
86
97
  }
87
98
  .border-top-0 {
88
99
  border-block-start: 0;
89
100
  }
90
101
  .border-bottom {
91
- border-block-end: 1px solid var(--hub-sys-border-color-default);
102
+ border-block-end: var(--hub-border-side-width, var(--hub-ref-border-width, 1px)) solid
103
+ var(--hub-sys-border-color-default);
92
104
  }
93
105
  .border-bottom-0 {
94
106
  border-block-end: 0;
95
107
  }
96
108
  .border-start {
97
- border-inline-start: 1px solid var(--hub-sys-border-color-default);
109
+ border-inline-start: var(--hub-border-side-width, var(--hub-ref-border-width, 1px)) solid
110
+ var(--hub-sys-border-color-default);
98
111
  }
99
112
  .border-start-0 {
100
113
  border-inline-start: 0;
101
114
  }
102
115
  .border-end {
103
- border-inline-end: 1px solid var(--hub-sys-border-color-default);
116
+ border-inline-end: var(--hub-border-side-width, var(--hub-ref-border-width, 1px)) solid
117
+ var(--hub-sys-border-color-default);
104
118
  }
105
119
  .border-end-0 {
106
120
  border-inline-end: 0;