ng-hub-ui-ds 22.9.0 → 22.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +103 -36
- package/README.es.md +45 -26
- package/README.md +45 -26
- package/docs/variables-css-library.en.md +575 -497
- package/package.json +1 -1
- package/styles/tokens/hub-tokens.css +3 -2
- package/styles/tokens/hub-tokens.scss +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,73 @@ All notable changes to `ng-hub-ui-ds` are documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [22.9.2] - 2026-09-07
|
|
9
|
+
|
|
10
|
+
### Changed
|
|
11
|
+
|
|
12
|
+
- **The token catalogue catches up with the release of 2026-09-07.** `docs/variables-css-library.en.md`
|
|
13
|
+
travels inside the published package, so it is the one place a consumer can read what every
|
|
14
|
+
`--hub-*` token is for without cloning the repository. Six libraries moved their defaults off their
|
|
15
|
+
own element in that release, and the `Source` column pointed at lines that had shifted. All of that
|
|
16
|
+
is now in step with the code, which is what `npm run tokens:parity` checks on every build.
|
|
17
|
+
|
|
18
|
+
- **Five calendar tokens documented, three of them new to the catalogue rather than to the code.**
|
|
19
|
+
`--hub-calendar-height` (the calendar's own height, written by its new `height` input),
|
|
20
|
+
`--hub-calendar-header-gap` (the floor on the distance between the header title and either button
|
|
21
|
+
group) and `--hub-calendar-event-time-font-size` (the hour at the end of a month chip) arrive with
|
|
22
|
+
`ng-hub-ui-calendar` 22.7.0. `--hub-calendar-event-gap` and `--hub-calendar-event-padding-x-timed`
|
|
23
|
+
were already read by the component and had never been written down — a hook a consumer could set
|
|
24
|
+
and never learn about — which is exactly the gap this file exists to close.
|
|
25
|
+
|
|
26
|
+
- **Three calendar defaults corrected, because the code moved and the table did not.**
|
|
27
|
+
`--hub-calendar-event-font-size` now documents `var(--hub-ref-font-size-xs, 0.75rem)` and
|
|
28
|
+
`--hub-calendar-day-padding-x` / `-y` document `var(--hub-ref-space-1, 0.25rem)`: the month grid
|
|
29
|
+
was tightened in that same calendar release. The parity check cannot catch these on its own —
|
|
30
|
+
all three are consumed-only hooks with no declaration to compare against — so they are the kind
|
|
31
|
+
of row that goes stale silently.
|
|
32
|
+
|
|
33
|
+
## [22.9.1] - 2026-09-06
|
|
34
|
+
|
|
35
|
+
### Fixed
|
|
36
|
+
|
|
37
|
+
- **The README stopped promising a token that resolves to nothing.** Its colour table still listed
|
|
38
|
+
`--hub-sys-color-{variant}-dark` as the fifth member of the family — retired in 22.4.0 — and never
|
|
39
|
+
mentioned `-on`, the member that replaced it and that forms, buttons and badges consume today. The
|
|
40
|
+
"SCSS functions" section described a closed `$hub-variants` list and a `-dark` back-compat alias,
|
|
41
|
+
a mechanism the package left behind in that same release: it now shows the open `$hub-accents` map,
|
|
42
|
+
`$hub-accents-extra` and the real derivation loop, so a reader who copies it gets working code.
|
|
43
|
+
Also restores the seven libraries missing from the family list and drops the two that are not in it:
|
|
44
|
+
`ng-hub-ui-accordion`, retired in favour of panels, and `ng-hub-ui-dropdown`, which is a directive
|
|
45
|
+
inside `ng-hub-ui-buttons` and never a package. `focus-ring-color()` joins the mixin catalogue.
|
|
46
|
+
Both languages.
|
|
47
|
+
- **`BREAKING_CHANGES.md` records the 22.4.0 removal of `--hub-sys-color-{variant}-dark`.** It shipped
|
|
48
|
+
with a changelog line and no entry here; in this repository the major tracks Angular and can never
|
|
49
|
+
signal a break, so this file is the only warning a consumer gets — and a CSS variable that resolves
|
|
50
|
+
to nothing fails silently, at paint time, with no build error.
|
|
51
|
+
- **The terminal-theme comment no longer points at a file the package does not ship.** It sent the
|
|
52
|
+
reader to `styles/themes/terminal.scss`, which lives in the documentation app, not here. The
|
|
53
|
+
compiled `hub-tokens.css` carries the same correction.
|
|
54
|
+
- **Docs site** — the family gallery on the design-system page claimed `avatar`, `milestones` and
|
|
55
|
+
`utils` were still pending after they had been wired to `--hub-sys-*`, and listed none of
|
|
56
|
+
`action-sheet`, `badges`, `buttons`, `icons`, `loading`, `metrics` or `signature`. Its cards also
|
|
57
|
+
linked to unprefixed URLs, which only resolve through a legacy redirect table `action-sheet` is
|
|
58
|
+
absent from, and which drop a reader of the Spanish page into the English docs; they are relative
|
|
59
|
+
now. Nothing in the published package changes.
|
|
60
|
+
|
|
61
|
+
### Added
|
|
62
|
+
|
|
63
|
+
- **`FUNCTIONALITIES.md`**, the coverage table the rest of the family carries: which tokens, mixins
|
|
64
|
+
and utilities exist and which of them the documentation actually demonstrates. Every mixin is
|
|
65
|
+
marked uncovered on purpose — the page's demos consume the utility classes, as it says itself.
|
|
66
|
+
|
|
67
|
+
### Removed
|
|
68
|
+
|
|
69
|
+
- **Docs site** — the orphan `app-topbar` component. The site's top navigation moved into the app
|
|
70
|
+
shell's sidebar slots and nothing mounts the component any more, but its stylesheet stayed behind
|
|
71
|
+
as the last place in the repository still reading `--hub-sys-color-primary-dark`, the alias this
|
|
72
|
+
package retired in 22.4.0. A component nobody renders is still a component somebody copies styles
|
|
73
|
+
from, which is the only reason this was worth a line. Nothing in the published package changes.
|
|
74
|
+
|
|
8
75
|
## [22.9.0] - 2026-09-03
|
|
9
76
|
|
|
10
77
|
### Removed
|
|
@@ -14,7 +81,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
14
81
|
selector covered `:root` and every theme. With Bootstrap present it silently handed that
|
|
15
82
|
package control of this one's semantic tokens; without it, every declaration resolved to its
|
|
16
83
|
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
|
|
84
|
+
another framework's variables: the emitted tokens carry **0** `--bs-*` references. The
|
|
85
|
+
only ones left in the package are inside `bridge-bootstrap()`, which emits nothing unless
|
|
86
|
+
you call it.
|
|
18
87
|
|
|
19
88
|
### Changed
|
|
20
89
|
|
|
@@ -36,7 +105,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
36
105
|
the width of a start/end drawer, the height of a top/bottom sheet, and the rounding of its
|
|
37
106
|
content. All three sit deliberately outside the modal size scale, which is the point of them:
|
|
38
107
|
`size: 'lg'` is 800px, and on an 853px window that covers the document the drawer is meant to be
|
|
39
|
-
read
|
|
108
|
+
read _against_, leaving 53px of it showing.
|
|
40
109
|
|
|
41
110
|
### Fixed
|
|
42
111
|
|
|
@@ -53,14 +122,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
53
122
|
the question mark that carries `formTextType="tooltip"` helper text: size, type, and the resting
|
|
54
123
|
and hover colours of its surface and border.
|
|
55
124
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
125
|
+
The one worth reading is `--hub-form-hint-size`, at `1.15em` rather than a pixel value. The mark
|
|
126
|
+
sits beside a label, so it is sized against that label's type: a form that scales its labels down
|
|
127
|
+
scales the mark with them, instead of leaving a circle that grows relative to the words next to
|
|
128
|
+
it. The rest of the family is there because the mark is drawn from CSS rather than an icon font —
|
|
129
|
+
`ng-hub-ui-icons` is not a dependency of that package — so every part of its appearance has to be
|
|
130
|
+
reachable from a token or it is not reachable at all.
|
|
62
131
|
|
|
63
|
-
|
|
132
|
+
Documentation-only, as always for another library's tokens.
|
|
64
133
|
|
|
65
134
|
## [22.8.3] - 2026-09-02
|
|
66
135
|
|
|
@@ -69,13 +138,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
69
138
|
- **docs (forms)** — `--hub-input-plaintext-color`, the value colour on a `plaintext` field
|
|
70
139
|
(`ng-hub-ui-forms` 22.30.0), defaulting to `var(--hub-ref-color-gray-700, #495057)`.
|
|
71
140
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
141
|
+
It exists because of what a field loses along with its box. Measured on the documentation site:
|
|
142
|
+
label and value came out at exactly the same colour, separated only by 2px of size and one
|
|
143
|
+
weight step — fine inside a box, which does the separating, and not fine once the box is gone,
|
|
144
|
+
where a column of them reads as undifferentiated lines. The label is deliberately untouched, on
|
|
145
|
+
the same tokens as every other field's, because a form's labels have to keep one rhythm whatever
|
|
146
|
+
state each field is in; it is the value that steps back a shade. 8.18:1 against the page, so it
|
|
147
|
+
clears AAA, and it is a token rather than a literal.
|
|
79
148
|
|
|
80
149
|
- **docs (forms)** — `--hub-input-plaintext-padding-block`
|
|
81
150
|
(`0 calc(var(--hub-input-padding-y) * 2)`) and `--hub-input-plaintext-font-weight` (`300`), the
|
|
@@ -96,13 +165,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
96
165
|
`--hub-table-filter-control-*` and `--hub-table-delete-filters-*`, which is what a consumer has
|
|
97
166
|
to reach for to theme them — and the only way back to the old red-at-rest clear button.
|
|
98
167
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
168
|
+
The remaining eight cover the filter row itself (`--hub-table-filter-row-bg`,
|
|
169
|
+
`--hub-table-filter-cell-padding-x` / `-y`), the search box's new clear affordance
|
|
170
|
+
(`--hub-table-search-clear-*`) and the close glyph it uses (`--hub-table-icon-close`).
|
|
102
171
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
172
|
+
Documentation-only, as always for another library's tokens: nothing in the ds's own tokens or
|
|
173
|
+
compiled CSS changes. It earns a release because this package ships its `docs/` folder, so the
|
|
174
|
+
reference table travels to consumers — and a token nobody can find is one nobody can theme.
|
|
106
175
|
|
|
107
176
|
## [22.8.1] - 2026-09-01
|
|
108
177
|
|
|
@@ -123,11 +192,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
123
192
|
mirror. Named into the `.font-*` family beside `.font-monospace`, because it is the same
|
|
124
193
|
kind of decision — which shapes the glyphs take.
|
|
125
194
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
195
|
+
Proportional numerals give every digit its own width, so a 1 is narrower than a 0 and two
|
|
196
|
+
amounts in a column have their units in different places. Money is read by comparing it
|
|
197
|
+
downwards, and a column whose units do not line up has to be read figure by figure
|
|
198
|
+
instead. Consumers were writing the declaration by hand in their own sheets — five screens
|
|
199
|
+
of one product, which is what asked for this.
|
|
131
200
|
|
|
132
201
|
- **docs (table)** — `--hub-table-action-disabled-opacity`, how far a refused action button is
|
|
133
202
|
faded (`ng-hub-ui-paginable` 22.15.0), defaulting to `0.5`. Consumed-only. It exists because
|
|
@@ -173,7 +242,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
173
242
|
|
|
174
243
|
### Fixed
|
|
175
244
|
|
|
176
|
-
- **The parity check no longer skips a declaration that wraps.** Its pattern needed the whole declaration, terminating `;` included, on a single line; a long `calc()` broken by the formatter therefore registered as
|
|
245
|
+
- **The parity check no longer skips a declaration that wraps.** Its pattern needed the whole declaration, terminating `;` included, on a single line; a long `calc()` broken by the formatter therefore registered as _undeclared_, so value parity had nothing to compare and the documented value was free to drift in silence. Teaching it to read a wrapped declaration as one logical line immediately surfaced sixteen stale values — one in this spec and fifteen in the per-library reference docs of `avatar`, `board`, `modal`, `paginable`, `panels` and `stepper`, where for instance `--hub-modal-margin` was still documented as `1.75rem auto` long after the code had decomposed it into four per-side tokens. All sixteen are corrected.
|
|
177
246
|
|
|
178
247
|
## [22.7.16] - 2026-08-24
|
|
179
248
|
|
|
@@ -296,9 +365,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
296
365
|
### Added
|
|
297
366
|
|
|
298
367
|
- **utilities — the Bootstrap-standard classes the sheets were missing.** The utility sheets promise Bootstrap-exact names; an audit against `bootstrap@5` found 74 base classes documented there but absent here. All of them now ship, emitted through the existing accent loops and the surface/typography mixins, so they follow a re-theme like everything else:
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
368
|
+
- `text.scss` — `.text-{accent}-emphasis` (the accent driven toward the theme's ink; legible as body copy on its own `-subtle` background), `.text-black-50` / `.text-white-50`, `.link-opacity-{10,25,50,75,100}`.
|
|
369
|
+
- `surfaces.scss` — `.bg-body-secondary` / `.bg-body-tertiary` (the **surface** de-emphasis ramp), `.border-{accent}-subtle`, `.border-black` / `.border-white`, `.border-opacity-{10,25,50,75,100}`, and the side-scoped radii `.rounded-{top,bottom,start,end}-{0..5,circle,pill}` — logical corners, so they flip correctly in RTL.
|
|
370
|
+
- `layout.scss` — `.d-inline-grid` (plus its `.d-print-` and responsive variants), `.focus-ring-{accent}`.
|
|
302
371
|
- **tokens — `--hub-sys-text-secondary` and `--hub-sys-text-tertiary`.** Two rungs of the text de-emphasis ramp were consumed by `text-color()` through a fallback but never declared, so `.text-body-secondary` and `.text-body-tertiary` both silently collapsed onto `.text-muted`. They are now derived as alpha over each theme's own `--hub-sys-text-primary` (75% / 50%) — no per-theme value needed, and they survive any re-theme.
|
|
303
372
|
- **mixins — `focus-ring-color($variant)`** (`_helpers.scss`), the public API behind `.focus-ring-*`. It re-tints `--hub-sys-focus-ring-color` and leaves the geometry to `focus-ring()`; set it on the element, not on its focus state.
|
|
304
373
|
- **cascade knobs — `--hub-border-opacity`, `--hub-link-opacity`, `--hub-focus-ring-opacity`**, documented alongside the existing `--hub-bg-opacity` / `--hub-text-opacity` contract.
|
|
@@ -313,9 +382,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
313
382
|
### Changed
|
|
314
383
|
|
|
315
384
|
- **docs (token catalogue) — hygiene wave for the Figma design-system sync.** Documentation-only; no token or compiled-CSS changes.
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
385
|
+
- The 41 foundational `sys` rows still flagged `PENDING` (shadows ×6, focus/accessibility ×5, zindex ×8, transitions & states ×10, breakpoints ×6, opacity ×6) were re-flagged **`IN_USE`** — every one of them has been compiled in `styles/tokens/hub-tokens.css` for a while; only the flags were stale. The parity guard now has a foundational shipped-PENDING check (A3) so this cannot drift silently again.
|
|
386
|
+
- The `metrics` token table moved from the Appendix to its canonical place in the Components chapter (`### metrics`), like every other library.
|
|
387
|
+
- The "Light / Dark theme" table is now explicitly marked as illustrative (`parity:ignore` region) — its rows re-document tokens whose canonical rows live in their own sections.
|
|
319
388
|
- **docs (select)** — `--hub-select-dropdown-zindex` documented as the canonical spelling of the select dropdown stacking hook (`ng-hub-ui-forms` 22.8.0); the old `--hub-select-dropdown-z-index` row remains as the deprecated default carrier.
|
|
320
389
|
|
|
321
390
|
### Added
|
|
@@ -501,7 +570,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
501
570
|
|
|
502
571
|
- `--hub-sys-color-{variant}-dark` is kept as a back-compat alias of `-emphasis`.
|
|
503
572
|
|
|
504
|
-
|
|
505
573
|
## [22.0.0] - 2026-06-17
|
|
506
574
|
|
|
507
575
|
### Changed
|
|
@@ -509,7 +577,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
509
577
|
- Aligned with Angular 22.
|
|
510
578
|
- README documentation standardized.
|
|
511
579
|
|
|
512
|
-
|
|
513
580
|
## [1.0.0] - 2026-06-16
|
|
514
581
|
|
|
515
582
|
Initial release. The shared design-token foundation for the ng-hub-ui family,
|
package/README.es.md
CHANGED
|
@@ -27,25 +27,30 @@ librerías de componentes Angular para aplicaciones standalone.
|
|
|
27
27
|
Este paquete es la base de design tokens de la que lee el resto del ecosistema
|
|
28
28
|
**ng-hub-ui**:
|
|
29
29
|
|
|
30
|
-
- [**ng-hub-ui-accordion**](https://www.npmjs.com/package/ng-hub-ui-accordion) (obsoleta — usa ng-hub-ui-panels)
|
|
31
30
|
- [**ng-hub-ui-action-sheet**](https://www.npmjs.com/package/ng-hub-ui-action-sheet)
|
|
32
31
|
- [**ng-hub-ui-avatar**](https://www.npmjs.com/package/ng-hub-ui-avatar)
|
|
32
|
+
- [**ng-hub-ui-badges**](https://www.npmjs.com/package/ng-hub-ui-badges)
|
|
33
33
|
- [**ng-hub-ui-board**](https://www.npmjs.com/package/ng-hub-ui-board)
|
|
34
34
|
- [**ng-hub-ui-breadcrumbs**](https://www.npmjs.com/package/ng-hub-ui-breadcrumbs)
|
|
35
|
+
- [**ng-hub-ui-buttons**](https://www.npmjs.com/package/ng-hub-ui-buttons)
|
|
35
36
|
- [**ng-hub-ui-calendar**](https://www.npmjs.com/package/ng-hub-ui-calendar)
|
|
36
|
-
- [**ng-hub-ui-dropdown**](https://www.npmjs.com/package/ng-hub-ui-dropdown)
|
|
37
37
|
- [**ng-hub-ui-ds**](https://www.npmjs.com/package/ng-hub-ui-ds) ← Estás aquí
|
|
38
38
|
- [**ng-hub-ui-forms**](https://www.npmjs.com/package/ng-hub-ui-forms)
|
|
39
39
|
- [**ng-hub-ui-history**](https://www.npmjs.com/package/ng-hub-ui-history)
|
|
40
|
+
- [**ng-hub-ui-icons**](https://www.npmjs.com/package/ng-hub-ui-icons)
|
|
41
|
+
- [**ng-hub-ui-loading**](https://www.npmjs.com/package/ng-hub-ui-loading)
|
|
42
|
+
- [**ng-hub-ui-metrics**](https://www.npmjs.com/package/ng-hub-ui-metrics)
|
|
40
43
|
- [**ng-hub-ui-milestones**](https://www.npmjs.com/package/ng-hub-ui-milestones)
|
|
41
44
|
- [**ng-hub-ui-modal**](https://www.npmjs.com/package/ng-hub-ui-modal)
|
|
42
45
|
- [**ng-hub-ui-nav**](https://www.npmjs.com/package/ng-hub-ui-nav)
|
|
43
46
|
- [**ng-hub-ui-paginable**](https://www.npmjs.com/package/ng-hub-ui-paginable)
|
|
44
47
|
- [**ng-hub-ui-panels**](https://www.npmjs.com/package/ng-hub-ui-panels)
|
|
45
48
|
- [**ng-hub-ui-portal**](https://www.npmjs.com/package/ng-hub-ui-portal)
|
|
49
|
+
- [**ng-hub-ui-signature**](https://www.npmjs.com/package/ng-hub-ui-signature)
|
|
46
50
|
- [**ng-hub-ui-skeleton**](https://www.npmjs.com/package/ng-hub-ui-skeleton)
|
|
47
51
|
- [**ng-hub-ui-sortable**](https://www.npmjs.com/package/ng-hub-ui-sortable)
|
|
48
52
|
- [**ng-hub-ui-stepper**](https://www.npmjs.com/package/ng-hub-ui-stepper)
|
|
53
|
+
- [**ng-hub-ui-toast**](https://www.npmjs.com/package/ng-hub-ui-toast)
|
|
49
54
|
- [**ng-hub-ui-utils**](https://www.npmjs.com/package/ng-hub-ui-utils)
|
|
50
55
|
|
|
51
56
|
---
|
|
@@ -178,8 +183,10 @@ espaciado direccional `-x` / `-y`.
|
|
|
178
183
|
|
|
179
184
|
## 🎨 Los colores semánticos
|
|
180
185
|
|
|
181
|
-
Cada
|
|
182
|
-
|
|
186
|
+
Cada variante semántica expone una **familia uniforme** de cinco tokens. El conjunto por
|
|
187
|
+
defecto es `primary` · `secondary` · `success` · `danger` · `warning` · `info` · `neutral` ·
|
|
188
|
+
`light` · `dark`, y es **abierto**: cada variante que añadas obtiene la misma familia (ver
|
|
189
|
+
[Cómo modificarlo](#️-cómo-modificarlo)).
|
|
183
190
|
|
|
184
191
|
| Token | Uso típico |
|
|
185
192
|
| ----------------------------------- | ---------------------------------------------- |
|
|
@@ -187,7 +194,7 @@ expone una **familia uniforme** de cinco tokens:
|
|
|
187
194
|
| `--hub-sys-color-<v>-subtle` | Fondo tenue (banners, alertas) |
|
|
188
195
|
| `--hub-sys-color-<v>-border-subtle` | Borde tenue sobre el fondo subtle |
|
|
189
196
|
| `--hub-sys-color-<v>-emphasis` | Texto legible sobre el fondo subtle |
|
|
190
|
-
| `--hub-sys-color-<v>-
|
|
197
|
+
| `--hub-sys-color-<v>-on` | Color de texto/icono con contraste **sobre** el acento |
|
|
191
198
|
|
|
192
199
|
Ejemplo de uso (un aviso a juego con el resto de la familia):
|
|
193
200
|
|
|
@@ -248,7 +255,7 @@ Los únicos nombres fuera de Bootstrap son los primitivos de layout que reflejan
|
|
|
248
255
|
.sr-label { @include hub.visually-hidden(); }
|
|
249
256
|
```
|
|
250
257
|
|
|
251
|
-
Grupos: **tema** (`theme()` — tematización parcial en una llamada: pásale solo las escalas/acentos cambiados como mapas), **breakpoints** (`media-breakpoint-up/down` sobre el mapa `$hub-breakpoints` — de él se generan las variantes responsive `.d-md-*`, `.col-lg-*`, `.p-sm-*`…), **layout** (`stack`, `cluster`, `grid`, `grid-fixed`, `row`, `col`, `offset`, `center`), **tipografía** (`font-family`, `font-size`, `font-weight`, `line-height`, `text-color`, `link-color`, `text-truncate`, `text-break`), **superficies** (`bg`, `text-bg`, `border`, `border-color`, `radius`, `shadow`), **helpers** (`focus-ring`, `visually-hidden`, `stretched-link`, `ratio`, `clearfix`) y los **puentes** (`bridge-bootstrap` / `bridge-material` / `bridge-tailwind` / `bridge-open-props`).
|
|
258
|
+
Grupos: **tema** (`theme()` — tematización parcial en una llamada: pásale solo las escalas/acentos cambiados como mapas), **breakpoints** (`media-breakpoint-up/down` sobre el mapa `$hub-breakpoints` — de él se generan las variantes responsive `.d-md-*`, `.col-lg-*`, `.p-sm-*`…), **layout** (`stack`, `cluster`, `grid`, `grid-fixed`, `row`, `col`, `offset`, `center`), **tipografía** (`font-family`, `font-size`, `font-weight`, `line-height`, `text-color`, `link-color`, `text-truncate`, `text-break`), **superficies** (`bg`, `text-bg`, `border`, `border-color`, `radius`, `shadow`), **helpers** (`focus-ring`, `focus-ring-color`, `visually-hidden`, `stretched-link`, `ratio`, `clearfix`) y los **puentes** (`bridge-bootstrap` / `bridge-material` / `bridge-tailwind` / `bridge-open-props`).
|
|
252
259
|
|
|
253
260
|
El catálogo completo con demos en vivo está documentado en [hubui.dev/design-system](https://hubui.dev/en/design-system/).
|
|
254
261
|
|
|
@@ -311,43 +318,55 @@ Reúne tus overrides bajo un atributo de tema y actívalo cuando quieras:
|
|
|
311
318
|
## 🧩 Funciones SCSS (cómo se genera por dentro)
|
|
312
319
|
|
|
313
320
|
Las familias de color semántico **no se escriben a mano**, y un tema solo fija el
|
|
314
|
-
**acento** de cada variante — `-subtle`, `-border-subtle` y `-
|
|
315
|
-
**una sola vez** en `:root`
|
|
316
|
-
|
|
321
|
+
**acento** de cada variante — `-subtle`, `-border-subtle`, `-emphasis` y `-on` se
|
|
322
|
+
derivan **una sola vez** en `:root` a partir del acento, la superficie y el _ink_
|
|
323
|
+
vivos. Los nombres de las variantes viven en un único mapa Sass **abierto**, así
|
|
324
|
+
que añadir un color o un tema es uniforme y sin _boilerplate_.
|
|
317
325
|
|
|
318
326
|
```scss
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
$hub-accents-light: (
|
|
327
|
+
// El ÚNICO sitio que enumera los nombres de variante. Es `!default`, así que puedes
|
|
328
|
+
// reemplazarlo entero antes del import — o, mejor, fusionar con $hub-accents-extra.
|
|
329
|
+
$hub-accents: (
|
|
323
330
|
primary: var(--hub-ref-color-blue-500, #0d6efd),
|
|
331
|
+
secondary: var(--hub-ref-color-gray-600, #6c757d),
|
|
324
332
|
success: var(--hub-ref-color-green-500, #198754),
|
|
325
333
|
danger: var(--hub-ref-color-red-500, #dc3545),
|
|
326
334
|
warning: var(--hub-ref-color-yellow-500, #ffc107),
|
|
327
|
-
info: var(--hub-ref-color-cyan-500, #0dcaf0)
|
|
328
|
-
)
|
|
329
|
-
|
|
330
|
-
|
|
335
|
+
info: var(--hub-ref-color-cyan-500, #0dcaf0),
|
|
336
|
+
neutral: var(--hub-ref-color-gray-600, #6c757d),
|
|
337
|
+
light: var(--hub-ref-color-gray-100, #f8f9fa),
|
|
338
|
+
dark: var(--hub-ref-color-gray-900, #212529)
|
|
339
|
+
) !default;
|
|
340
|
+
|
|
341
|
+
// Override aditivo — pasa SOLO las variantes que añades o retocas, conserva las demás.
|
|
342
|
+
$hub-accents-extra: () !default;
|
|
343
|
+
$hub-accents: map.merge($hub-accents, $hub-accents-extra);
|
|
344
|
+
|
|
345
|
+
// Fija SOLO --hub-sys-color-<variante> (el acento). Se llama en cada bloque de tema
|
|
346
|
+
// con el mapa propio del tema, así que un tema emite justo las variantes que retinta.
|
|
331
347
|
@mixin hub-color-accents($accents) {
|
|
332
|
-
@each $name in $
|
|
333
|
-
--hub-sys-color-#{$name}: #{
|
|
348
|
+
@each $name, $color in $accents {
|
|
349
|
+
--hub-sys-color-#{$name}: #{$color};
|
|
334
350
|
}
|
|
335
351
|
}
|
|
336
352
|
|
|
337
|
-
// Deriva la familia de roles del acento + superficie + ink vivos. Se emite UNA
|
|
338
|
-
//
|
|
353
|
+
// Deriva la familia de roles del acento + superficie + ink vivos. Se emite UNA vez
|
|
354
|
+
// en :root sobre el conjunto abierto, así que cada variante — incluidas las tuyas —
|
|
355
|
+
// obtiene su familia completa gratis.
|
|
339
356
|
@mixin hub-color-derive() {
|
|
340
|
-
@each $name in $hub-
|
|
357
|
+
@each $name in map.keys($hub-accents) {
|
|
341
358
|
--hub-sys-color-#{$name}-subtle: color-mix(in oklch, var(--hub-sys-color-#{$name}) 12%, var(--hub-sys-surface-page, #fff));
|
|
342
359
|
--hub-sys-color-#{$name}-border-subtle: color-mix(in oklch, var(--hub-sys-color-#{$name}) 35%, var(--hub-sys-surface-page, #fff));
|
|
343
360
|
--hub-sys-color-#{$name}-emphasis: color-mix(in oklch, var(--hub-sys-color-#{$name}) 80%, var(--hub-sys-color-ink, #212529));
|
|
344
|
-
|
|
361
|
+
// Volteo de contraste en escala de grises según la luminosidad del propio acento:
|
|
362
|
+
// los acentos oscuros (L < .62) resuelven a texto blanco; los claros, a casi negro.
|
|
363
|
+
--hub-sys-color-#{$name}-on: oklch(from var(--hub-sys-color-#{$name}) clamp(0, (0.62 - l) * 1000, 1) 0 h);
|
|
345
364
|
}
|
|
346
365
|
}
|
|
347
366
|
|
|
348
367
|
:root,
|
|
349
368
|
[data-theme='light'] {
|
|
350
|
-
@include hub-color-accents($hub-accents
|
|
369
|
+
@include hub-color-accents($hub-accents);
|
|
351
370
|
@include hub-color-derive();
|
|
352
371
|
}
|
|
353
372
|
```
|
|
@@ -355,8 +374,8 @@ $hub-accents-light: (
|
|
|
355
374
|
> Casi nunca necesitas tocar el SCSS: como la familia se deriva del **acento
|
|
356
375
|
> único** en tiempo de ejecución, sobrescribir `--hub-sys-color-<variante>` en CSS
|
|
357
376
|
> plano — incluso en un subárbol — recalcula `-subtle` / `-border-subtle` /
|
|
358
|
-
> `-emphasis` automáticamente. Los mapas + mixins son solo la mecánica
|
|
359
|
-
> útil si contribuyes al paquete o compilas tu propia variante de la paleta.
|
|
377
|
+
> `-emphasis` / `-on` automáticamente. Los mapas + mixins son solo la mecánica
|
|
378
|
+
> interna, útil si contribuyes al paquete o compilas tu propia variante de la paleta.
|
|
360
379
|
|
|
361
380
|
---
|
|
362
381
|
|
package/README.md
CHANGED
|
@@ -27,25 +27,30 @@ component libraries for standalone apps.
|
|
|
27
27
|
This package is the design-token foundation the rest of the **ng-hub-ui**
|
|
28
28
|
ecosystem reads from:
|
|
29
29
|
|
|
30
|
-
- [**ng-hub-ui-accordion**](https://www.npmjs.com/package/ng-hub-ui-accordion) (deprecated — use ng-hub-ui-panels)
|
|
31
30
|
- [**ng-hub-ui-action-sheet**](https://www.npmjs.com/package/ng-hub-ui-action-sheet)
|
|
32
31
|
- [**ng-hub-ui-avatar**](https://www.npmjs.com/package/ng-hub-ui-avatar)
|
|
32
|
+
- [**ng-hub-ui-badges**](https://www.npmjs.com/package/ng-hub-ui-badges)
|
|
33
33
|
- [**ng-hub-ui-board**](https://www.npmjs.com/package/ng-hub-ui-board)
|
|
34
34
|
- [**ng-hub-ui-breadcrumbs**](https://www.npmjs.com/package/ng-hub-ui-breadcrumbs)
|
|
35
|
+
- [**ng-hub-ui-buttons**](https://www.npmjs.com/package/ng-hub-ui-buttons)
|
|
35
36
|
- [**ng-hub-ui-calendar**](https://www.npmjs.com/package/ng-hub-ui-calendar)
|
|
36
|
-
- [**ng-hub-ui-dropdown**](https://www.npmjs.com/package/ng-hub-ui-dropdown)
|
|
37
37
|
- [**ng-hub-ui-ds**](https://www.npmjs.com/package/ng-hub-ui-ds) ← You are here
|
|
38
38
|
- [**ng-hub-ui-forms**](https://www.npmjs.com/package/ng-hub-ui-forms)
|
|
39
39
|
- [**ng-hub-ui-history**](https://www.npmjs.com/package/ng-hub-ui-history)
|
|
40
|
+
- [**ng-hub-ui-icons**](https://www.npmjs.com/package/ng-hub-ui-icons)
|
|
41
|
+
- [**ng-hub-ui-loading**](https://www.npmjs.com/package/ng-hub-ui-loading)
|
|
42
|
+
- [**ng-hub-ui-metrics**](https://www.npmjs.com/package/ng-hub-ui-metrics)
|
|
40
43
|
- [**ng-hub-ui-milestones**](https://www.npmjs.com/package/ng-hub-ui-milestones)
|
|
41
44
|
- [**ng-hub-ui-modal**](https://www.npmjs.com/package/ng-hub-ui-modal)
|
|
42
45
|
- [**ng-hub-ui-nav**](https://www.npmjs.com/package/ng-hub-ui-nav)
|
|
43
46
|
- [**ng-hub-ui-paginable**](https://www.npmjs.com/package/ng-hub-ui-paginable)
|
|
44
47
|
- [**ng-hub-ui-panels**](https://www.npmjs.com/package/ng-hub-ui-panels)
|
|
45
48
|
- [**ng-hub-ui-portal**](https://www.npmjs.com/package/ng-hub-ui-portal)
|
|
49
|
+
- [**ng-hub-ui-signature**](https://www.npmjs.com/package/ng-hub-ui-signature)
|
|
46
50
|
- [**ng-hub-ui-skeleton**](https://www.npmjs.com/package/ng-hub-ui-skeleton)
|
|
47
51
|
- [**ng-hub-ui-sortable**](https://www.npmjs.com/package/ng-hub-ui-sortable)
|
|
48
52
|
- [**ng-hub-ui-stepper**](https://www.npmjs.com/package/ng-hub-ui-stepper)
|
|
53
|
+
- [**ng-hub-ui-toast**](https://www.npmjs.com/package/ng-hub-ui-toast)
|
|
49
54
|
- [**ng-hub-ui-utils**](https://www.npmjs.com/package/ng-hub-ui-utils)
|
|
50
55
|
|
|
51
56
|
---
|
|
@@ -179,8 +184,10 @@ These are live, re-basable CSS variables too, using the same directional
|
|
|
179
184
|
|
|
180
185
|
## 🎨 Semantic colours
|
|
181
186
|
|
|
182
|
-
Each semantic
|
|
183
|
-
|
|
187
|
+
Each semantic variant exposes a **uniform family** of five tokens. The default set is
|
|
188
|
+
`primary` · `secondary` · `success` · `danger` · `warning` · `info` · `neutral` · `light` ·
|
|
189
|
+
`dark`, and it is **open**: every variant you add gets the same family (see
|
|
190
|
+
[How to customise it](#️-how-to-customise-it)).
|
|
184
191
|
|
|
185
192
|
| Token | Typical use |
|
|
186
193
|
| ----------------------------------- | ---------------------------------------------- |
|
|
@@ -188,7 +195,7 @@ exposes a **uniform family** of five tokens:
|
|
|
188
195
|
| `--hub-sys-color-<v>-subtle` | Faint background (banners, alerts) |
|
|
189
196
|
| `--hub-sys-color-<v>-border-subtle` | Faint border over the subtle background |
|
|
190
197
|
| `--hub-sys-color-<v>-emphasis` | Legible text over the subtle background |
|
|
191
|
-
| `--hub-sys-color-<v>-
|
|
198
|
+
| `--hub-sys-color-<v>-on` | Contrast text/icon colour laid **on** the accent |
|
|
192
199
|
|
|
193
200
|
Usage example (a callout that matches the rest of the family):
|
|
194
201
|
|
|
@@ -250,7 +257,7 @@ The only non-Bootstrap names are the layout primitives that mirror the mixins: `
|
|
|
250
257
|
.sr-label { @include hub.visually-hidden(); }
|
|
251
258
|
```
|
|
252
259
|
|
|
253
|
-
Groups: **theme** (`theme()` — partial theming in one call: pass only the changed scales/accents as maps), **breakpoints** (`media-breakpoint-up/down` over the `$hub-breakpoints` map — the responsive variants `.d-md-*`, `.col-lg-*`, `.p-sm-*`… are generated from it), **layout** (`stack`, `cluster`, `grid`, `grid-fixed`, `row`, `col`, `offset`, `center`), **typography** (`font-family`, `font-size`, `font-weight`, `line-height`, `text-color`, `link-color`, `text-truncate`, `text-break`), **surfaces** (`bg`, `text-bg`, `border`, `border-color`, `radius`, `shadow`), **helpers** (`focus-ring`, `visually-hidden`, `stretched-link`, `ratio`, `clearfix`) and the **bridges** (`bridge-bootstrap` / `bridge-material` / `bridge-tailwind` / `bridge-open-props`).
|
|
260
|
+
Groups: **theme** (`theme()` — partial theming in one call: pass only the changed scales/accents as maps), **breakpoints** (`media-breakpoint-up/down` over the `$hub-breakpoints` map — the responsive variants `.d-md-*`, `.col-lg-*`, `.p-sm-*`… are generated from it), **layout** (`stack`, `cluster`, `grid`, `grid-fixed`, `row`, `col`, `offset`, `center`), **typography** (`font-family`, `font-size`, `font-weight`, `line-height`, `text-color`, `link-color`, `text-truncate`, `text-break`), **surfaces** (`bg`, `text-bg`, `border`, `border-color`, `radius`, `shadow`), **helpers** (`focus-ring`, `focus-ring-color`, `visually-hidden`, `stretched-link`, `ratio`, `clearfix`) and the **bridges** (`bridge-bootstrap` / `bridge-material` / `bridge-tailwind` / `bridge-open-props`).
|
|
254
261
|
|
|
255
262
|
The full catalogue with live demos is documented at [hubui.dev/design-system](https://hubui.dev/en/design-system/).
|
|
256
263
|
|
|
@@ -313,52 +320,64 @@ Group your overrides under a theme attribute and activate it whenever you want:
|
|
|
313
320
|
## 🧩 SCSS functions (how it is generated internally)
|
|
314
321
|
|
|
315
322
|
The semantic colour families are **not written by hand**, and a theme only ever
|
|
316
|
-
sets the **accent** of each variant — `-subtle`, `-border-subtle
|
|
317
|
-
are derived **once** in `:root`
|
|
318
|
-
|
|
323
|
+
sets the **accent** of each variant — `-subtle`, `-border-subtle`, `-emphasis` and
|
|
324
|
+
`-on` are derived **once** in `:root` from the live accent, surface and ink CSS
|
|
325
|
+
variables. The variant names live in a single **open** Sass map, so adding a colour
|
|
326
|
+
or a theme is uniform and boilerplate-free.
|
|
319
327
|
|
|
320
328
|
```scss
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
$hub-accents-light: (
|
|
329
|
+
// The ONE place that enumerates variant names. `!default`, so you can replace it
|
|
330
|
+
// wholesale before the import — or, better, merge into it with $hub-accents-extra.
|
|
331
|
+
$hub-accents: (
|
|
325
332
|
primary: var(--hub-ref-color-blue-500, #0d6efd),
|
|
333
|
+
secondary: var(--hub-ref-color-gray-600, #6c757d),
|
|
326
334
|
success: var(--hub-ref-color-green-500, #198754),
|
|
327
335
|
danger: var(--hub-ref-color-red-500, #dc3545),
|
|
328
336
|
warning: var(--hub-ref-color-yellow-500, #ffc107),
|
|
329
|
-
info: var(--hub-ref-color-cyan-500, #0dcaf0)
|
|
330
|
-
)
|
|
331
|
-
|
|
332
|
-
|
|
337
|
+
info: var(--hub-ref-color-cyan-500, #0dcaf0),
|
|
338
|
+
neutral: var(--hub-ref-color-gray-600, #6c757d),
|
|
339
|
+
light: var(--hub-ref-color-gray-100, #f8f9fa),
|
|
340
|
+
dark: var(--hub-ref-color-gray-900, #212529)
|
|
341
|
+
) !default;
|
|
342
|
+
|
|
343
|
+
// Additive override — pass ONLY the variants you add or retune, keep the defaults.
|
|
344
|
+
$hub-accents-extra: () !default;
|
|
345
|
+
$hub-accents: map.merge($hub-accents, $hub-accents-extra);
|
|
346
|
+
|
|
347
|
+
// Sets ONLY --hub-sys-color-<variant> (the accent). Called in every theme block
|
|
348
|
+
// with that theme's own map, so a theme emits exactly the variants it re-tints.
|
|
333
349
|
@mixin hub-color-accents($accents) {
|
|
334
|
-
@each $name in $
|
|
335
|
-
--hub-sys-color-#{$name}: #{
|
|
350
|
+
@each $name, $color in $accents {
|
|
351
|
+
--hub-sys-color-#{$name}: #{$color};
|
|
336
352
|
}
|
|
337
353
|
}
|
|
338
354
|
|
|
339
355
|
// Derives the role family from the live accent + surface + ink. Emitted ONCE in
|
|
340
|
-
// :root
|
|
356
|
+
// :root over the open set, so every variant — including the ones you added — gets
|
|
357
|
+
// its full family for free.
|
|
341
358
|
@mixin hub-color-derive() {
|
|
342
|
-
@each $name in $hub-
|
|
359
|
+
@each $name in map.keys($hub-accents) {
|
|
343
360
|
--hub-sys-color-#{$name}-subtle: color-mix(in oklch, var(--hub-sys-color-#{$name}) 12%, var(--hub-sys-surface-page, #fff));
|
|
344
361
|
--hub-sys-color-#{$name}-border-subtle: color-mix(in oklch, var(--hub-sys-color-#{$name}) 35%, var(--hub-sys-surface-page, #fff));
|
|
345
362
|
--hub-sys-color-#{$name}-emphasis: color-mix(in oklch, var(--hub-sys-color-#{$name}) 80%, var(--hub-sys-color-ink, #212529));
|
|
346
|
-
|
|
363
|
+
// Grayscale contrast flip driven by the accent's own lightness: dark accents
|
|
364
|
+
// (L < .62) resolve to white text, light accents to near-black.
|
|
365
|
+
--hub-sys-color-#{$name}-on: oklch(from var(--hub-sys-color-#{$name}) clamp(0, (0.62 - l) * 1000, 1) 0 h);
|
|
347
366
|
}
|
|
348
367
|
}
|
|
349
368
|
|
|
350
369
|
:root,
|
|
351
370
|
[data-theme='light'] {
|
|
352
|
-
@include hub-color-accents($hub-accents
|
|
371
|
+
@include hub-color-accents($hub-accents);
|
|
353
372
|
@include hub-color-derive();
|
|
354
373
|
}
|
|
355
374
|
```
|
|
356
375
|
|
|
357
376
|
> You almost never need to touch the SCSS: because the family is derived from the
|
|
358
377
|
> **single accent** at runtime, overriding `--hub-sys-color-<variant>` in plain CSS
|
|
359
|
-
> — even on a subtree — recomputes `-subtle` / `-border-subtle` / `-emphasis`
|
|
360
|
-
> automatically. The maps + mixins are just the internal mechanism, useful if
|
|
361
|
-
> contribute to the package or compile your own palette variant.
|
|
378
|
+
> — even on a subtree — recomputes `-subtle` / `-border-subtle` / `-emphasis` /
|
|
379
|
+
> `-on` automatically. The maps + mixins are just the internal mechanism, useful if
|
|
380
|
+
> you contribute to the package or compile your own palette variant.
|
|
362
381
|
|
|
363
382
|
---
|
|
364
383
|
|