ng-hub-ui-ds 22.7.19 → 22.8.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.
- package/CHANGELOG.md +21 -0
- package/docs/variables-css-library.en.md +1 -0
- package/package.json +64 -64
- package/styles/utilities/text.css +17 -0
- package/styles/utilities/text.scss +17 -0
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,27 @@ 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.8.0] - 2026-09-01
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- **`.font-tabular-nums`** — the one utility here Bootstrap does not have, and deliberately
|
|
13
|
+
so: Bootstrap ships no `font-variant-numeric` helper at all, so there was nothing to
|
|
14
|
+
mirror. Named into the `.font-*` family beside `.font-monospace`, because it is the same
|
|
15
|
+
kind of decision — which shapes the glyphs take.
|
|
16
|
+
|
|
17
|
+
Proportional numerals give every digit its own width, so a 1 is narrower than a 0 and two
|
|
18
|
+
amounts in a column have their units in different places. Money is read by comparing it
|
|
19
|
+
downwards, and a column whose units do not line up has to be read figure by figure
|
|
20
|
+
instead. Consumers were writing the declaration by hand in their own sheets — five screens
|
|
21
|
+
of one product, which is what asked for this.
|
|
22
|
+
|
|
23
|
+
## [22.7.20] - 2026-09-01
|
|
24
|
+
|
|
25
|
+
### Added
|
|
26
|
+
|
|
27
|
+
- **docs (datepicker)** — `--hub-datepicker-grid-gap`, the gap between the calendar's day cells (`ng-hub-ui-forms` 22.29.0), defaulting to `0.125rem`. Consumed-only, like the overlay's stacking hook before it. What earns it a row is that the panel now measures itself from the same arithmetic the grid lays itself out with — seven cells and the six gaps between them — so this token no longer only spaces the days: widening it widens the panel, which is the supported way to make room for `monthFormat="long"`. A reader who tunes it expecting a purely cosmetic change gets a wider calendar, and the table should say so before they find out.
|
|
28
|
+
|
|
8
29
|
## [22.7.19] - 2026-08-31
|
|
9
30
|
|
|
10
31
|
### Added
|
|
@@ -1480,6 +1480,7 @@ The `detail` token set is defined as a single, standardized collection that supp
|
|
|
1480
1480
|
| `--hub-daterangepicker-cell-color` | `var(--hub-sys-text-primary, #212529)` | Daterangepicker cell color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:418` |
|
|
1481
1481
|
| `--hub-daterangepicker-cell-hover-bg` | `var(--hub-sys-surface-elevated, #f8f9fa)` | Daterangepicker cell hover bg | `IN_USE` | `forms/src/lib/styles/_tokens.scss:420` |
|
|
1482
1482
|
| `--hub-daterangepicker-cell-size` | `2rem` | Daterangepicker cell size | `IN_USE` | `forms/src/lib/styles/_tokens.scss:417` |
|
|
1483
|
+
| `--hub-datepicker-grid-gap` | `0.125rem` | Gap between the calendar's day cells. Read twice on purpose — the grid lays itself out with it and the panel measures its own width from it — because the panel is exactly seven cells and the six gaps between them, and two literals would drift the first time either was tuned. Widening it widens the panel, which is what makes room for `monthFormat="long"` | `IN_USE` | `forms/src/lib/components/datepicker/datepicker.component.scss:178` |
|
|
1483
1484
|
| `--hub-daterangepicker-color` | `var(--hub-sys-text-primary, #212529)` | Daterangepicker color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:411` |
|
|
1484
1485
|
| `--hub-daterangepicker-in-range-bg` | `color-mix(in oklch, var(--hub-sys-color-primary, #0d6efd) 14%, transparent)` | Daterangepicker in range bg | `IN_USE` | `forms/src/lib/styles/_tokens.scss:427` |
|
|
1485
1486
|
| `--hub-daterangepicker-nav-arrow-color` | `var(--hub-sys-text-muted, #6c757d)` | Daterangepicker nav arrow color | `IN_USE` | `forms/src/lib/styles/_tokens.scss:434` |
|
package/package.json
CHANGED
|
@@ -1,66 +1,66 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
2
|
+
"name": "ng-hub-ui-ds",
|
|
3
|
+
"version": "22.8.0",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"build:tokens": "sass styles/tokens/hub-tokens.scss styles/tokens/hub-tokens.css --style=expanded --no-source-map",
|
|
7
|
+
"build:utilities": "sass styles/utilities/layout.scss:styles/utilities/layout.css styles/utilities/text.scss:styles/utilities/text.css styles/utilities/surfaces.scss:styles/utilities/surfaces.css --style=expanded --no-source-map",
|
|
8
|
+
"build:reset": "sass styles/base/reset.scss:styles/base/reset.css --style=expanded --no-source-map",
|
|
9
|
+
"build:styles": "npm run build:tokens && npm run build:utilities && npm run build:reset",
|
|
10
|
+
"prepublishOnly": "npm run build:styles"
|
|
11
|
+
},
|
|
12
|
+
"description": "Design tokens for the ng-hub-ui family — the canonical `--hub-ref-*` (primitive) and `--hub-sys-*` (semantic) CSS custom properties, with light/dark and 8 built-in themes. Framework-agnostic: ship the compiled CSS or the SCSS source. Import once and every ng-hub-ui library reads the same palette.",
|
|
13
|
+
"author": "Carlos Morcillo <carlos.morcillo@me.com> (https://www.carlosmorcillo.com)",
|
|
14
|
+
"homepage": "https://hubui.dev/en/design-system/",
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "git+https://github.com/carlos-morcillo/ng-hub-ui-ds.git"
|
|
18
|
+
},
|
|
19
|
+
"keywords": [
|
|
20
|
+
"design-tokens",
|
|
21
|
+
"design-system",
|
|
22
|
+
"css-variables",
|
|
23
|
+
"theme",
|
|
24
|
+
"dark-mode",
|
|
25
|
+
"scss",
|
|
26
|
+
"ng-hub-ui",
|
|
27
|
+
"hub-ui"
|
|
28
|
+
],
|
|
29
|
+
"sideEffects": [
|
|
30
|
+
"**/*.css",
|
|
31
|
+
"**/*.scss"
|
|
32
|
+
],
|
|
33
|
+
"exports": {
|
|
34
|
+
".": "./styles/index.scss",
|
|
35
|
+
"./styles": "./styles/index.scss",
|
|
36
|
+
"./styles/index.scss": "./styles/index.scss",
|
|
37
|
+
"./styles/tokens/hub-tokens.css": "./styles/tokens/hub-tokens.css",
|
|
38
|
+
"./styles/tokens/hub-tokens": "./styles/tokens/hub-tokens.scss",
|
|
39
|
+
"./styles/tokens/hub-tokens.scss": "./styles/tokens/hub-tokens.scss",
|
|
40
|
+
"./styles/mixins/theme": "./styles/mixins/_theme.scss",
|
|
41
|
+
"./styles/mixins/breakpoints": "./styles/mixins/_breakpoints.scss",
|
|
42
|
+
"./styles/mixins/layout": "./styles/mixins/_layout.scss",
|
|
43
|
+
"./styles/mixins/typography": "./styles/mixins/_typography.scss",
|
|
44
|
+
"./styles/mixins/surfaces": "./styles/mixins/_surfaces.scss",
|
|
45
|
+
"./styles/mixins/helpers": "./styles/mixins/_helpers.scss",
|
|
46
|
+
"./styles/mixins/bridges": "./styles/mixins/_bridges.scss",
|
|
47
|
+
"./styles/base/reset": "./styles/base/reset.scss",
|
|
48
|
+
"./styles/base/reset.css": "./styles/base/reset.css",
|
|
49
|
+
"./styles/utilities/layout": "./styles/utilities/layout.scss",
|
|
50
|
+
"./styles/utilities/layout.css": "./styles/utilities/layout.css",
|
|
51
|
+
"./styles/utilities/text": "./styles/utilities/text.scss",
|
|
52
|
+
"./styles/utilities/text.css": "./styles/utilities/text.css",
|
|
53
|
+
"./styles/utilities/surfaces": "./styles/utilities/surfaces.scss",
|
|
54
|
+
"./styles/utilities/surfaces.css": "./styles/utilities/surfaces.css"
|
|
55
|
+
},
|
|
56
|
+
"files": [
|
|
57
|
+
"styles",
|
|
58
|
+
"docs",
|
|
59
|
+
"README.md",
|
|
60
|
+
"README.es.md",
|
|
61
|
+
"CHANGELOG.md"
|
|
62
|
+
],
|
|
63
|
+
"devDependencies": {
|
|
64
|
+
"sass": "^1.99.0"
|
|
65
|
+
}
|
|
66
66
|
}
|
|
@@ -249,6 +249,23 @@
|
|
|
249
249
|
font-family: var(--hub-ref-font-family-mono);
|
|
250
250
|
}
|
|
251
251
|
|
|
252
|
+
/* ── Numerals ──
|
|
253
|
+
*
|
|
254
|
+
* The one name here Bootstrap does not have, and it is deliberate: Bootstrap ships no
|
|
255
|
+
* `font-variant-numeric` utility at all, so there was nothing to mirror. Named into the
|
|
256
|
+
* `.font-*` family beside `.font-monospace`, because it is the same kind of decision —
|
|
257
|
+
* which shapes the glyphs take — rather than a colour or a weight.
|
|
258
|
+
*
|
|
259
|
+
* Proportional numerals give every digit its own width, so a 1 is narrower than a 0 and
|
|
260
|
+
* two amounts in a column have their units in different places. Money is read by
|
|
261
|
+
* comparing it downwards; a column whose units do not line up has to be read figure by
|
|
262
|
+
* figure instead. Consumers were writing the declaration by hand in their own sheets —
|
|
263
|
+
* five screens of one product, which is what asked for this.
|
|
264
|
+
*/
|
|
265
|
+
.font-tabular-nums {
|
|
266
|
+
font-variant-numeric: tabular-nums;
|
|
267
|
+
}
|
|
268
|
+
|
|
252
269
|
/* ── Semantic text colours ── */
|
|
253
270
|
.text-primary {
|
|
254
271
|
color: color-mix(in srgb, var(--hub-sys-color-primary) calc(var(--hub-text-opacity, 1) * 100%), transparent);
|
|
@@ -158,6 +158,23 @@
|
|
|
158
158
|
@include typo.font-family(mono);
|
|
159
159
|
}
|
|
160
160
|
|
|
161
|
+
/* ── Numerals ──
|
|
162
|
+
*
|
|
163
|
+
* The one name here Bootstrap does not have, and it is deliberate: Bootstrap ships no
|
|
164
|
+
* `font-variant-numeric` utility at all, so there was nothing to mirror. Named into the
|
|
165
|
+
* `.font-*` family beside `.font-monospace`, because it is the same kind of decision —
|
|
166
|
+
* which shapes the glyphs take — rather than a colour or a weight.
|
|
167
|
+
*
|
|
168
|
+
* Proportional numerals give every digit its own width, so a 1 is narrower than a 0 and
|
|
169
|
+
* two amounts in a column have their units in different places. Money is read by
|
|
170
|
+
* comparing it downwards; a column whose units do not line up has to be read figure by
|
|
171
|
+
* figure instead. Consumers were writing the declaration by hand in their own sheets —
|
|
172
|
+
* five screens of one product, which is what asked for this.
|
|
173
|
+
*/
|
|
174
|
+
.font-tabular-nums {
|
|
175
|
+
font-variant-numeric: tabular-nums;
|
|
176
|
+
}
|
|
177
|
+
|
|
161
178
|
/* ── Semantic text colours ── */
|
|
162
179
|
$_accents: primary, secondary, success, danger, warning, info, neutral, light, dark;
|
|
163
180
|
|