ng-hub-ui-ds 22.8.0 → 22.8.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 +43 -0
- package/docs/variables-css-library.en.md +118 -83
- package/package.json +64 -64
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.8.2] - 2026-09-02
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- **The thirty-four table variables of `ng-hub-ui-paginable` 22.17.0 are documented.** Twenty-six
|
|
13
|
+
of them exist because that release stopped naming Bootstrap classes in the filter row: the
|
|
14
|
+
controls and the clear-filters button had promised a stylesheet the family does not ship, so in
|
|
15
|
+
a product without Bootstrap the whole row was invisible. They are now drawn from
|
|
16
|
+
`--hub-table-filter-control-*` and `--hub-table-delete-filters-*`, which is what a consumer has
|
|
17
|
+
to reach for to theme them — and the only way back to the old red-at-rest clear button.
|
|
18
|
+
|
|
19
|
+
The remaining eight cover the filter row itself (`--hub-table-filter-row-bg`,
|
|
20
|
+
`--hub-table-filter-cell-padding-x` / `-y`), the search box's new clear affordance
|
|
21
|
+
(`--hub-table-search-clear-*`) and the close glyph it uses (`--hub-table-icon-close`).
|
|
22
|
+
|
|
23
|
+
Documentation-only, as always for another library's tokens: nothing in the ds's own tokens or
|
|
24
|
+
compiled CSS changes. It earns a release because this package ships its `docs/` folder, so the
|
|
25
|
+
reference table travels to consumers — and a token nobody can find is one nobody can theme.
|
|
26
|
+
|
|
27
|
+
## [22.8.1] - 2026-09-01
|
|
28
|
+
|
|
29
|
+
### Changed
|
|
30
|
+
|
|
31
|
+
- **`--hub-table-action-disabled-opacity` is documented as covering menu items too.** Following
|
|
32
|
+
`ng-hub-ui-paginable` 22.16.0, a row's dropdown reads the same token for an item it refuses, so
|
|
33
|
+
the description named two of the three places it now applies. This package ships its `docs/`
|
|
34
|
+
folder and the table travels to consumers, which is the whole reason a partial description is
|
|
35
|
+
worth a release: a reader tuning the token would have been surprised by what else moved.
|
|
36
|
+
|
|
8
37
|
## [22.8.0] - 2026-09-01
|
|
9
38
|
|
|
10
39
|
### Added
|
|
@@ -20,6 +49,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
20
49
|
instead. Consumers were writing the declaration by hand in their own sheets — five screens
|
|
21
50
|
of one product, which is what asked for this.
|
|
22
51
|
|
|
52
|
+
- **docs (table)** — `--hub-table-action-disabled-opacity`, how far a refused action button is
|
|
53
|
+
faded (`ng-hub-ui-paginable` 22.15.0), defaulting to `0.5`. Consumed-only. It exists because
|
|
54
|
+
the table draws its own action buttons, so the browser's default disabled rendering never
|
|
55
|
+
reaches them: without a declaration a refused action kept its full tint and its pointer and
|
|
56
|
+
read as pressable.
|
|
57
|
+
|
|
58
|
+
### Fixed
|
|
59
|
+
|
|
60
|
+
- **Two `Source` lines point at the right rows again**: `--hub-table-cell-bar-width` and
|
|
61
|
+
`--hub-table-cell-bar-color` moved seventeen lines down when the table's stylesheet gained
|
|
62
|
+
its disabled-action block. This package ships its `docs/` folder, so the citations travel to
|
|
63
|
+
consumers and a stale line number sends a reader to the wrong rule. Nothing else moved —
|
|
64
|
+
every value, description and status is unchanged, which the parity check confirms.
|
|
65
|
+
|
|
23
66
|
## [22.7.20] - 2026-09-01
|
|
24
67
|
|
|
25
68
|
### Added
|
|
@@ -1731,15 +1731,16 @@ The standalone `tabs` proposal was **superseded**: the tabs UI shipped inside `n
|
|
|
1731
1731
|
|
|
1732
1732
|
| Token | Initial value | Usage | Status | Source |
|
|
1733
1733
|
| ----------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------- | --------- | ------------------------------------------------------------ |
|
|
1734
|
-
| `--hub-table-container-bg` | `var(--hub-ref-color-white, #fff)` | Background of the outer container | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1735
|
-
| `--hub-table-container-color` | `var(--hub-sys-text-primary, #212529)` | Base text color of the container | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1734
|
+
| `--hub-table-container-bg` | `var(--hub-ref-color-white, #fff)` | Background of the outer container | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:145` |
|
|
1735
|
+
| `--hub-table-container-color` | `var(--hub-sys-text-primary, #212529)` | Base text color of the container | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:147` |
|
|
1736
1736
|
| `--hub-table-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Border color of container and cells | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:17` |
|
|
1737
1737
|
| `--hub-table-border-radius` | `var(--hub-ref-radius-md, 0.375rem)` | Border radius of the container | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:18` |
|
|
1738
1738
|
| `--hub-table-border-width` | `var(--hub-ref-border-width, 1px)` | Border thickness | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:19` |
|
|
1739
1739
|
| `--hub-table-action-accent` | `—` | Accent an action button paints with. Written on the element by the component from `PaginableActionButton.color` through `resolveHubAccent`, so any system role or literal colour resolves — not a fixed list | `IN_USE` | `paginable/src/lib/components/table/table.component.ts` |
|
|
1740
|
-
| `--hub-table-action-subtle` | `color-mix(in oklch, var(--hub-table-action-accent) 12%, var(--hub-sys-surface-page, #ffffff))` | The soft variant's fill: the accent at 12% over the page surface, the formula `hubButton` uses, so a row action and a real soft button read alike side by side | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1741
|
-
| `--hub-table-action-emphasis` | `color-mix(in oklch, var(--hub-table-action-accent) 80%, var(--hub-sys-color-ink, #212529))` | The accent at 80% over the ink, for the text of a tinted action | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1740
|
+
| `--hub-table-action-subtle` | `color-mix(in oklch, var(--hub-table-action-accent) 12%, var(--hub-sys-surface-page, #ffffff))` | The soft variant's fill: the accent at 12% over the page surface, the formula `hubButton` uses, so a row action and a real soft button read alike side by side | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:362` |
|
|
1741
|
+
| `--hub-table-action-emphasis` | `color-mix(in oklch, var(--hub-table-action-accent) 80%, var(--hub-sys-color-ink, #212529))` | The accent at 80% over the ink, for the text of a tinted action | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:367` |
|
|
1742
1742
|
| `--hub-table-sort-btn-hover-color` | `var(--hub-sys-color-primary)` | Colour of a sort control under the pointer | `IN_USE` | `paginable/src/lib/components/table/table.component.scss` |
|
|
1743
|
+
| `--hub-table-action-disabled-opacity` | `0.5` | How far a refused action button is faded — a row action refused by `PaginableActionButton.disabled`, a menu item refused inside a row dropdown, or a batch action refused by an empty selection. The table draws its own buttons, so the browser's default disabled rendering never reaches them and the fading has to be declared; the hover response is cancelled alongside it, since a control that lights up under the cursor is promising something it will not do | `IN_USE` | `paginable/src/lib/components/table/table.component.scss` |
|
|
1743
1744
|
| `--hub-table-row-divider-color` | `var(--hub-table-border-color)` | Color of the divider between body rows (independent of the outer frame/vertical borders) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:22` |
|
|
1744
1745
|
| `--hub-table-container-max-block-size` | `none` | Max block-size (height) of the scroll container; set it together with `options.scrollable` to cap the body height and engage the sticky header | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:26` |
|
|
1745
1746
|
| `--hub-table-container-overflow` | `auto` | Scroll behaviour of the built-in table container; `[stickyHeader]` flips it to `visible` so the header pins to the consumer's own scroll ancestor | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:34` |
|
|
@@ -1767,66 +1768,100 @@ The standalone `tabs` proposal was **superseded**: the tabs UI shipped inside `n
|
|
|
1767
1768
|
| `--hub-table-icon-search` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E")`| Table search icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:67` |
|
|
1768
1769
|
| `--hub-table-icon-filter` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z'/%3E%3C/svg%3E")`| Table filter icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:68` |
|
|
1769
1770
|
| `--hub-table-icon-eraser` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M290.7 57.4L57.4 290.7c-25 25-25 65.5 0 90.5l80 80c12 12 28.3 18.7 45.3 18.7H288h9.4H512c17.7 0 32-14.3 32-32s-14.3-32-32-32H387.9L518.6 285.3c25-25 25-65.5 0-90.5L381.3 57.4c-25-25-65.5-25-90.5 0zM297.4 416H288l-105.4 0-80-80L227.3 211.3 364.7 348.7 297.4 416z'/%3E%3C/svg%3E")`| Table eraser icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:69` |
|
|
1770
|
-
| `--hub-table-icon-
|
|
1771
|
-
| `--hub-table-icon-
|
|
1772
|
-
| `--hub-table-icon-chevron-
|
|
1773
|
-
| `--hub-table-icon-chevron-
|
|
1774
|
-
| `--hub-table-icon-chevron-
|
|
1775
|
-
| `--hub-table-icon-
|
|
1776
|
-
| `--hub-table-icon-angle-
|
|
1777
|
-
| `--hub-table-icon-angle-
|
|
1778
|
-
| `--hub-table-icon-angle-double-
|
|
1779
|
-
| `--hub-table-icon-
|
|
1780
|
-
| `--hub-table-icon-
|
|
1781
|
-
| `--hub-table-icon-
|
|
1782
|
-
| `--hub-table-
|
|
1783
|
-
| `--hub-table-accent
|
|
1784
|
-
| `--hub-table-
|
|
1785
|
-
| `--hub-table-selected-
|
|
1786
|
-
| `--hub-table-selected-
|
|
1787
|
-
| `--hub-table-selected-bar-
|
|
1788
|
-
| `--hub-table-
|
|
1789
|
-
| `--hub-table-cell-bar-
|
|
1790
|
-
| `--hub-table-
|
|
1791
|
-
| `--hub-table-
|
|
1792
|
-
| `--hub-table-active-
|
|
1771
|
+
| `--hub-table-icon-close` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/%3E%3C/svg%3E")` | Table close/dismiss icon, used by the search box's clear affordance (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:70` |
|
|
1772
|
+
| `--hub-table-icon-info` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E")`| Table info icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:71` |
|
|
1773
|
+
| `--hub-table-icon-chevron-up` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z'/%3E%3C/svg%3E")`| Table chevron-up icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:72` |
|
|
1774
|
+
| `--hub-table-icon-chevron-down` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5 12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E")`| Table chevron-down icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:73` |
|
|
1775
|
+
| `--hub-table-icon-chevron-left` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E")`| Table chevron-left icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:74` |
|
|
1776
|
+
| `--hub-table-icon-chevron-right` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 105.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E")`| Table chevron-right icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:75` |
|
|
1777
|
+
| `--hub-table-icon-angle-left` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E")`| Table angle-left icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:76` |
|
|
1778
|
+
| `--hub-table-icon-angle-right` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z'/%3E%3C/svg%3E")`| Table angle-right icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:77` |
|
|
1779
|
+
| `--hub-table-icon-angle-double-left` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 246.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160zm352-160l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L301.3 256 438.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0z'/%3E%3C/svg%3E")`| Table angle-double-left icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:78` |
|
|
1780
|
+
| `--hub-table-icon-angle-double-right` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M470.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 256 265.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160zm-352 160l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L210.7 256 73.4 393.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0z'/%3E%3C/svg%3E")`| Table angle-double-right icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:79` |
|
|
1781
|
+
| `--hub-table-icon-ellipsis-v` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 512'%3E%3Cpath d='M64 360a56 56 0 1 0 0 112 56 56 0 1 0 0-112zm0-160a56 56 0 1 0 0 112 56 56 0 1 0 0-112zM120 96A56 56 0 1 0 8 96a56 56 0 1 0 112 0z'/%3E%3C/svg%3E")`| Table ellipsis-v icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:80` |
|
|
1782
|
+
| `--hub-table-icon-trash` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z'/%3E%3C/svg%3E")`| Table trash icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:81` |
|
|
1783
|
+
| `--hub-table-icon-plus` | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z'/%3E%3C/svg%3E")`| Table plus icon (SVG, overridable via mask-image) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:82` |
|
|
1784
|
+
| `--hub-table-accent` | `var(--hub-sys-color-primary, #0d6efd)` | Semantic accent for the selected row — re-based per `variant` | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:94` |
|
|
1785
|
+
| `--hub-table-accent-subtle` | `color-mix(in oklch, var(--hub-table-accent) 12%, var(--hub-sys-surface-page, #ffffff))` | Soft accent tint for the selected-row background | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:96` |
|
|
1786
|
+
| `--hub-table-selected-bg` | `var(--hub-table-accent-subtle)` | Selected row background (soft accent tint) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:99` |
|
|
1787
|
+
| `--hub-table-selected-color` | `var(--hub-sys-text-primary, #212529)` | Selected row text color | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:100` |
|
|
1788
|
+
| `--hub-table-selected-bar-width` | `0` | Width of the optional accent bar on the selected row's leading edge (`0` = hidden) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:106` |
|
|
1789
|
+
| `--hub-table-selected-bar-color` | `var(--hub-table-accent)` | Colour of the selected-row accent bar | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:107` |
|
|
1790
|
+
| `--hub-table-cell-bar-width` | `var(--hub-table-selected-bar-width)` | Internal per-cell relay of the selected-row bar width (mirrored/negated for RTL); theme via `--hub-table-selected-bar-width` | `INTERNAL` | `paginable/src/lib/components/table/table.component.scss:1151` |
|
|
1791
|
+
| `--hub-table-cell-bar-color` | `var(--hub-table-selected-bar-color, var(--hub-table-accent))` | Internal per-cell relay of the selected-row bar colour; theme via `--hub-table-selected-bar-color` | `INTERNAL` | `paginable/src/lib/components/table/table.component.scss:1152` |
|
|
1792
|
+
| `--hub-table-accent-bg` | `transparent` | Accent layer applied via `box-shadow inset` on cells | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:83` |
|
|
1793
|
+
| `--hub-table-active-bg` | `var(--hub-sys-state-active-bg, rgba(0,0,0,0.1))` | Cell background in active row state | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:84` |
|
|
1794
|
+
| `--hub-table-active-color` | `var(--hub-sys-text-primary, #212529)` | Cell text color in active row state | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:85` |
|
|
1793
1795
|
| `--hub-table-bg` | `var(--hub-ref-color-white, #fff)` | Base background of table cells | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:7` |
|
|
1794
|
-
| `--hub-table-head-bg` | `var(--hub-table-bg, var(--hub-ref-color-white, #fff))` | Header (thead) surface; defaults to the table surface so a sticky header stays opaque over the scrolling body | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1795
|
-
| `--hub-table-head-color` | `var(--hub-table-color, var(--hub-sys-text-primary, #212529))` | Header (thead) text color | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1796
|
-
| `--hub-table-head-font-size` | `inherit` | Header (thead) cell font size | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1797
|
-
| `--hub-table-head-font-weight` | `bold` | Header (thead) cell font weight (defaults to the browser `th` weight; set to `var(--hub-ref-font-weight-semibold, 600)` for the DS look) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1798
|
-
| `--hub-table-head-padding-x` | `var(--hub-table-cell-padding-x)` | Header (thead) cell horizontal padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1799
|
-
| `--hub-table-head-padding-y` | `var(--hub-table-cell-padding-y)` | Header (thead) cell vertical padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1800
|
-
| `--hub-table-head-position` | `sticky` | CSS `position` of the header when `[stickyHeader]` is set; override to `static` to opt a table out | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1801
|
-
| `--hub-table-head-border-width` | `var(--hub-table-border-width)` | Header bottom-border thickness (defaults to the shared cell border — zero change; set to `calc(var(--hub-table-border-width) * 2)` for the Bootstrap-style thicker header) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1802
|
-
| `--hub-table-head-text-transform` | `none` | `text-transform` of header titles (uppercase columns without a `th` rule) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1803
|
-
| `--hub-table-head-letter-spacing` | `normal` | `letter-spacing` of header titles | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1804
|
-
| `--hub-table-bg-state` | `initial` | State layer (active/hover) applied over cell background via cascade | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1805
|
-
| `--hub-table-bg-type` | `initial` | Variant layer (striped) applied over cell background via cascade | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1806
|
-
| `--hub-table-cell-padding-x` | `var(--hub-ref-space-3, 1rem)` | Horizontal cell padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1807
|
-
| `--hub-table-cell-padding-x-sm` | `var(--hub-ref-space-2, 0.5rem)` | Horizontal cell padding in compact mode | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1808
|
-
| `--hub-table-cell-padding-y` | `var(--hub-ref-space-2, 0.5rem)` | Vertical cell padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1809
|
-
| `--hub-table-cell-padding-y-sm` | `var(--hub-ref-space-1, 0.25rem)` | Vertical cell padding in compact mode | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1810
|
-
| `--hub-table-cell-vertical-align` | `middle` | Vertical alignment of cell content | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1796
|
+
| `--hub-table-head-bg` | `var(--hub-table-bg, var(--hub-ref-color-white, #fff))` | Header (thead) surface; defaults to the table surface so a sticky header stays opaque over the scrolling body | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:111` |
|
|
1797
|
+
| `--hub-table-head-color` | `var(--hub-table-color, var(--hub-sys-text-primary, #212529))` | Header (thead) text color | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:112` |
|
|
1798
|
+
| `--hub-table-head-font-size` | `inherit` | Header (thead) cell font size | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:117` |
|
|
1799
|
+
| `--hub-table-head-font-weight` | `bold` | Header (thead) cell font weight (defaults to the browser `th` weight; set to `var(--hub-ref-font-weight-semibold, 600)` for the DS look) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:120` |
|
|
1800
|
+
| `--hub-table-head-padding-x` | `var(--hub-table-cell-padding-x)` | Header (thead) cell horizontal padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:121` |
|
|
1801
|
+
| `--hub-table-head-padding-y` | `var(--hub-table-cell-padding-y)` | Header (thead) cell vertical padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:122` |
|
|
1802
|
+
| `--hub-table-head-position` | `sticky` | CSS `position` of the header when `[stickyHeader]` is set; override to `static` to opt a table out | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:134` |
|
|
1803
|
+
| `--hub-table-head-border-width` | `var(--hub-table-border-width)` | Header bottom-border thickness (defaults to the shared cell border — zero change; set to `calc(var(--hub-table-border-width) * 2)` for the Bootstrap-style thicker header) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:127` |
|
|
1804
|
+
| `--hub-table-head-text-transform` | `none` | `text-transform` of header titles (uppercase columns without a `th` rule) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:130` |
|
|
1805
|
+
| `--hub-table-head-letter-spacing` | `normal` | `letter-spacing` of header titles | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:131` |
|
|
1806
|
+
| `--hub-table-bg-state` | `initial` | State layer (active/hover) applied over cell background via cascade | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:135` |
|
|
1807
|
+
| `--hub-table-bg-type` | `initial` | Variant layer (striped) applied over cell background via cascade | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:136` |
|
|
1808
|
+
| `--hub-table-cell-padding-x` | `var(--hub-ref-space-3, 1rem)` | Horizontal cell padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:137` |
|
|
1809
|
+
| `--hub-table-cell-padding-x-sm` | `var(--hub-ref-space-2, 0.5rem)` | Horizontal cell padding in compact mode | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:138` |
|
|
1810
|
+
| `--hub-table-cell-padding-y` | `var(--hub-ref-space-2, 0.5rem)` | Vertical cell padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:139` |
|
|
1811
|
+
| `--hub-table-cell-padding-y-sm` | `var(--hub-ref-space-1, 0.25rem)` | Vertical cell padding in compact mode | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:140` |
|
|
1812
|
+
| `--hub-table-cell-vertical-align` | `middle` | Vertical alignment of cell content | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:141` |
|
|
1811
1813
|
| `--hub-table-color` | `var(--hub-sys-text-primary, #212529)` | Base text color of cells | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:7` |
|
|
1812
|
-
| `--hub-table-color-state` | `initial` | State layer (active/hover) applied over cell text color via cascade | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1813
|
-
| `--hub-table-color-type` | `initial` | Variant layer (striped) applied over cell text color via cascade | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1814
|
-
| `--hub-table-group-separator-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Color of the row-group divider border | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1815
|
-
| `--hub-table-search-button-bg` | `var(--hub-table-container-bg, var(--hub-ref-color-white, #fff))` | Background of the search trigger button | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1816
|
-
| `--hub-table-search-button-border-color` | `var(--hub-table-border-color)` | Border of the search trigger button | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1817
|
-
| `--hub-table-search-button-color` | `var(--hub-table-container-color, var(--hub-sys-text-primary, #212529))` | Text/icon color of the search trigger button | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1818
|
-
| `--hub-table-search-input-bg` | `var(--hub-table-container-bg, var(--hub-ref-color-white, #fff))` | Background of the search input field | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1819
|
-
| `--hub-table-search-input-border-color` | `var(--hub-table-border-color)` | Border of the search input field | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1820
|
-
| `--hub-table-search-input-color` | `var(--hub-table-container-color, var(--hub-sys-text-primary, #212529))` | Text color of the search input field | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1821
|
-
| `--hub-table-
|
|
1822
|
-
| `--hub-table-
|
|
1823
|
-
| `--hub-table-
|
|
1824
|
-
| `--hub-table-
|
|
1825
|
-
| `--hub-table-filter-button-
|
|
1826
|
-
| `--hub-table-
|
|
1827
|
-
| `--hub-table-hover-
|
|
1828
|
-
| `--hub-table-
|
|
1829
|
-
| `--hub-table-
|
|
1814
|
+
| `--hub-table-color-state` | `initial` | State layer (active/hover) applied over cell text color via cascade | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:142` |
|
|
1815
|
+
| `--hub-table-color-type` | `initial` | Variant layer (striped) applied over cell text color via cascade | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:143` |
|
|
1816
|
+
| `--hub-table-group-separator-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Color of the row-group divider border | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:144` |
|
|
1817
|
+
| `--hub-table-search-button-bg` | `var(--hub-table-container-bg, var(--hub-ref-color-white, #fff))` | Background of the search trigger button | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:145` |
|
|
1818
|
+
| `--hub-table-search-button-border-color` | `var(--hub-table-border-color)` | Border of the search trigger button | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:146` |
|
|
1819
|
+
| `--hub-table-search-button-color` | `var(--hub-table-container-color, var(--hub-sys-text-primary, #212529))` | Text/icon color of the search trigger button | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:147` |
|
|
1820
|
+
| `--hub-table-search-input-bg` | `var(--hub-table-container-bg, var(--hub-ref-color-white, #fff))` | Background of the search input field | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:149` |
|
|
1821
|
+
| `--hub-table-search-input-border-color` | `var(--hub-table-border-color)` | Border of the search input field | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:150` |
|
|
1822
|
+
| `--hub-table-search-input-color` | `var(--hub-table-container-color, var(--hub-sys-text-primary, #212529))` | Text color of the search input field | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:151` |
|
|
1823
|
+
| `--hub-table-search-clear-color` | `var(--hub-sys-text-muted, #6c757d)` | Colour of the clear affordance inside the search box | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:159` |
|
|
1824
|
+
| `--hub-table-search-clear-hover-color` | `var(--hub-table-container-color, var(--hub-sys-text-primary, #212529))` | Colour of the clear affordance on hover/focus | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:160` |
|
|
1825
|
+
| `--hub-table-search-clear-icon-size` | `0.75em` | Size of the clear affordance's glyph | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:161` |
|
|
1826
|
+
| `--hub-table-search-clear-padding-x` | `var(--hub-ref-space-2, 0.5rem)` | Horizontal padding of the clear affordance | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:162` |
|
|
1827
|
+
| `--hub-table-filter-button-active-bg` | `color-mix(in oklch, var(--hub-sys-color-success, #198754) 10%, transparent)` | Background of filter button when filters are active | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:185` |
|
|
1828
|
+
| `--hub-table-filter-button-active-border-color` | `var(--hub-sys-color-success, #198754)` | Border of filter button when filters are active | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:186` |
|
|
1829
|
+
| `--hub-table-filter-button-hover-bg` | `rgba(0, 0, 0, 0.05)` | Background of filter button on hover | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:187` |
|
|
1830
|
+
| `--hub-table-filter-button-icon-active-color` | `var(--hub-sys-color-success, #198754)` | Icon color inside filter button when filters are active | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:188` |
|
|
1831
|
+
| `--hub-table-filter-button-icon-color` | `var(--hub-sys-text-muted, #6c757d)` | Default icon color inside filter button | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:189` |
|
|
1832
|
+
| `--hub-table-filter-row-bg` | `var(--hub-table-head-bg)` | Background of the inline column-filter row under the header | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:166` |
|
|
1833
|
+
| `--hub-table-filter-cell-padding-x` | `var(--hub-table-head-padding-x)` | Horizontal padding of a column-filter cell | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:167` |
|
|
1834
|
+
| `--hub-table-filter-cell-padding-y` | `var(--hub-table-head-padding-y)` | Vertical padding of a column-filter cell | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:168` |
|
|
1835
|
+
| `--hub-table-filter-control-bg` | `var(--hub-table-container-bg, var(--hub-ref-color-white, #fff))` | Background of an inline column-filter control | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:169` |
|
|
1836
|
+
| `--hub-table-filter-control-color` | `var(--hub-table-container-color, var(--hub-sys-text-primary, #212529))` | Text color of an inline column-filter control | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:170` |
|
|
1837
|
+
| `--hub-table-filter-control-placeholder-color` | `var(--hub-sys-text-muted, #6c757d)` | Placeholder and range-label color inside a column-filter control | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:171` |
|
|
1838
|
+
| `--hub-table-filter-control-border-color` | `var(--hub-table-border-color)` | Border color of an inline column-filter control | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:172` |
|
|
1839
|
+
| `--hub-table-filter-control-border-width` | `var(--hub-table-border-width)` | Border width of an inline column-filter control | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:173` |
|
|
1840
|
+
| `--hub-table-filter-control-border-radius` | `var(--hub-ref-radius-sm, 0.25rem)` | Border radius of an inline column-filter control | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:174` |
|
|
1841
|
+
| `--hub-table-filter-control-padding-x` | `var(--hub-ref-space-2, 0.5rem)` | Horizontal padding inside an inline column-filter control | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:175` |
|
|
1842
|
+
| `--hub-table-filter-control-padding-y` | `var(--hub-ref-space-1, 0.25rem)` | Vertical padding inside an inline column-filter control | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:176` |
|
|
1843
|
+
| `--hub-table-filter-control-font-size` | `var(--hub-ref-font-size-sm, 0.875rem)` | Font size of an inline column-filter control | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:177` |
|
|
1844
|
+
| `--hub-table-filter-control-focus-border-color` | `var(--hub-table-accent)` | Border color of a focused column-filter control | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:178` |
|
|
1845
|
+
| `--hub-table-filter-control-focus-shadow` | `0 0 0 0.2rem color-mix(in oklch, var(--hub-table-accent) 25%, transparent)` | Focus ring of a column-filter control | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:179` |
|
|
1846
|
+
| `--hub-table-filter-control-active-bg` | `var(--hub-table-filter-button-active-bg)` | Background of a column-filter control that currently holds a value | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:183` |
|
|
1847
|
+
| `--hub-table-filter-control-active-border-color` | `var(--hub-table-filter-button-active-border-color)` | Border color of a column-filter control that currently holds a value | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:184` |
|
|
1848
|
+
| `--hub-table-delete-filters-bg` | `var(--hub-table-container-bg, var(--hub-ref-color-white, #fff))` | Background of the clear-filters button | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:207` |
|
|
1849
|
+
| `--hub-table-delete-filters-color` | `var(--hub-table-container-color, var(--hub-sys-text-primary, #212529))` | Text/icon color of the clear-filters button | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:208` |
|
|
1850
|
+
| `--hub-table-delete-filters-border-color` | `var(--hub-table-border-color)` | Border color of the clear-filters button | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:209` |
|
|
1851
|
+
| `--hub-table-delete-filters-border-width` | `var(--hub-table-border-width)` | Border width of the clear-filters button | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:210` |
|
|
1852
|
+
| `--hub-table-delete-filters-border-radius` | `var(--hub-table-border-radius)` | Border radius of the clear-filters button | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:211` |
|
|
1853
|
+
| `--hub-table-delete-filters-padding-x` | `0.75rem` | Horizontal padding of the clear-filters button | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:212` |
|
|
1854
|
+
| `--hub-table-delete-filters-padding-y` | `0.375rem` | Vertical padding of the clear-filters button | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:213` |
|
|
1855
|
+
| `--hub-table-delete-filters-font-size` | `var(--hub-table-search-input-font-size)` | Font size of the clear-filters button | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:214` |
|
|
1856
|
+
| `--hub-table-delete-filters-gap` | `var(--hub-ref-space-2, 0.5rem)` | Gap between the clear-filters icon and its label | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:215` |
|
|
1857
|
+
| `--hub-table-delete-filters-hover-bg` | `color-mix(in oklch, var(--hub-sys-color-danger, #dc3545) 10%, transparent)` | Background of the clear-filters button on hover/focus | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:216` |
|
|
1858
|
+
| `--hub-table-delete-filters-hover-border-color` | `var(--hub-sys-color-danger, #dc3545)` | Border color of the clear-filters button on hover/focus | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:217` |
|
|
1859
|
+
| `--hub-table-delete-filters-hover-color` | `var(--hub-sys-color-danger, #dc3545)` | Text/icon color of the clear-filters button on hover/focus | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:218` |
|
|
1860
|
+
| `--hub-table-delete-filters-disabled-opacity` | `0.5` | Opacity of the clear-filters button while a filter request is in flight | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:219` |
|
|
1861
|
+
| `--hub-table-hover-bg` | `var(--hub-sys-state-hover-bg, rgba(0,0,0,0.075))` | Cell background on row hover | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:221` |
|
|
1862
|
+
| `--hub-table-hover-color` | `var(--hub-sys-text-primary, #212529)` | Cell text color on row hover | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:222` |
|
|
1863
|
+
| `--hub-table-striped-bg` | `var(--hub-sys-state-striped-bg, rgba(0,0,0,0.05))` | Cell background for striped rows | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:223` |
|
|
1864
|
+
| `--hub-table-striped-color` | `var(--hub-sys-text-primary, #212529)` | Cell text color for striped rows | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:224` |
|
|
1830
1865
|
| `--hub-table-title-font-size` | `var(--hub-ref-font-size-lg, 1.25rem)` | Font size of the table title | `PENDING` | `UX-EXCEL` |
|
|
1831
1866
|
| `--hub-table-cell-additional-padding` | `calc(var(--hub-table-cell-padding-x) + var(--hub-ref-space-1, 0.25rem))` | Additional cell padding offset | `PENDING` | `UX-EXCEL` |
|
|
1832
1867
|
| `--hub-table-cell-font-size` | `var(--hub-ref-font-size-sm, 0.875rem)` | Font size of cell content | `PENDING` | `UX-EXCEL` |
|
|
@@ -1834,34 +1869,34 @@ The standalone `tabs` proposal was **superseded**: the tabs UI shipped inside `n
|
|
|
1834
1869
|
| `--hub-table-container-border-radius` | `var(--hub-table-border-radius, var(--hub-ref-radius-md, 0.375rem))` | Border radius of table container | `PENDING` | `UX-EXCEL` |
|
|
1835
1870
|
| `--hub-table-container-padding-x` | `var(--hub-ref-space-3, 1rem)` | Horizontal padding of table container | `PENDING` | `UX-EXCEL` |
|
|
1836
1871
|
| `--hub-table-container-padding-y` | `var(--hub-ref-space-3, 1rem)` | Vertical padding of table container | `PENDING` | `UX-EXCEL` |
|
|
1837
|
-
| `--hub-table-filter-count-bg` | `var(--hub-sys-color-success, #198754)` | Background of the active-filters count badge | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1838
|
-
| `--hub-table-filter-count-color` | `var(--hub-ref-color-white, #fff)` | Text color of the active-filters count badge | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1872
|
+
| `--hub-table-filter-count-bg` | `var(--hub-sys-color-success, #198754)` | Background of the active-filters count badge | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:197` |
|
|
1873
|
+
| `--hub-table-filter-count-color` | `var(--hub-ref-color-white, #fff)` | Text color of the active-filters count badge | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:198` |
|
|
1839
1874
|
| `--hub-table-head-border-radius` | `var(--hub-table-border-radius, var(--hub-ref-radius-md, 0.375rem))` | Border radius of the table header row | `PENDING` | `UX-EXCEL` |
|
|
1840
1875
|
| `--hub-table-tooltip-bg` | `var(--hub-sys-text-primary, #212529)` | Background of column tooltips | `PENDING` | `INVENTORY` |
|
|
1841
1876
|
| `--hub-table-tooltip-border-radius` | `var(--hub-ref-radius-sm, 0.25rem)` | Border radius of column tooltips | `PENDING` | `INVENTORY` |
|
|
1842
1877
|
| `--hub-table-tooltip-color` | `var(--hub-ref-color-white, #fff)` | Text color of column tooltips | `PENDING` | `INVENTORY` |
|
|
1843
1878
|
| `--hub-table-tooltip-padding-x` | `var(--hub-ref-space-2, 0.5rem)` | Horizontal padding of column tooltips | `PENDING` | `INVENTORY` |
|
|
1844
1879
|
| `--hub-table-tooltip-padding-y` | `var(--hub-ref-space-1, 0.25rem)` | Vertical padding of column tooltips | `PENDING` | `INVENTORY` |
|
|
1845
|
-
| `--hub-table-batch-actions-btn-icon-gap` | `var(--hub-ref-space-1, 0.25rem)` | Batch action button icon gap | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1880
|
+
| `--hub-table-batch-actions-btn-icon-gap` | `var(--hub-ref-space-1, 0.25rem)` | Batch action button icon gap | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:220` |
|
|
1846
1881
|
| `--hub-table-batch-actions-margin-inline-end` | `auto` | Batch actions inline-end margin | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:45` |
|
|
1847
|
-
| `--hub-table-filter-button-border-color` | `transparent` | Filter button border color | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1848
|
-
| `--hub-table-filter-button-border-radius` | `var(--hub-ref-radius-sm, 0.25rem)` | Filter button border radius | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1849
|
-
| `--hub-table-filter-button-border-width` | `1px` | Filter button border width | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1850
|
-
| `--hub-table-filter-button-gap` | `var(--hub-ref-space-2, 0.5rem)` | Filter button content gap | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1851
|
-
| `--hub-table-filter-button-padding-x` | `0.75rem` | Filter button horizontal padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1852
|
-
| `--hub-table-filter-button-padding-y` | `0.375rem` | Filter button vertical padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1853
|
-
| `--hub-table-filter-button-transition` | `all 0.2s ease` | Filter button transition | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1854
|
-
| `--hub-table-filter-count-border-radius` | `var(--hub-ref-radius-pill, 50rem)` | Filter count badge border radius | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1855
|
-
| `--hub-table-filter-count-font-size` | `0.7rem` | Filter count badge font size | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1856
|
-
| `--hub-table-filter-count-font-weight` | `var(--hub-ref-font-weight-bold, 700)` | Filter count badge font weight | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1857
|
-
| `--hub-table-filter-count-padding-x` | `0.4em` | Filter count badge horizontal padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1858
|
-
| `--hub-table-filter-count-size` | `1.25rem` | Filter count badge size | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1859
|
-
| `--hub-table-search-border-radius` | `var(--hub-table-border-radius)` | Search field border radius | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1860
|
-
| `--hub-table-search-border-width` | `var(--hub-table-border-width)` | Search field border width | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1861
|
-
| `--hub-table-search-button-min-width` | `2.75rem` | Search button minimum width | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1862
|
-
| `--hub-table-search-input-font-size` | `1rem` | Search input font size | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1863
|
-
| `--hub-table-search-input-padding-x` | `0.75rem` | Search input horizontal padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1864
|
-
| `--hub-table-search-input-padding-y` | `0.375rem` | Search input vertical padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:
|
|
1882
|
+
| `--hub-table-filter-button-border-color` | `transparent` | Filter button border color | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:194` |
|
|
1883
|
+
| `--hub-table-filter-button-border-radius` | `var(--hub-ref-radius-sm, 0.25rem)` | Filter button border radius | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:195` |
|
|
1884
|
+
| `--hub-table-filter-button-border-width` | `1px` | Filter button border width | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:193` |
|
|
1885
|
+
| `--hub-table-filter-button-gap` | `var(--hub-ref-space-2, 0.5rem)` | Filter button content gap | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:190` |
|
|
1886
|
+
| `--hub-table-filter-button-padding-x` | `0.75rem` | Filter button horizontal padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:191` |
|
|
1887
|
+
| `--hub-table-filter-button-padding-y` | `0.375rem` | Filter button vertical padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:192` |
|
|
1888
|
+
| `--hub-table-filter-button-transition` | `all 0.2s ease` | Filter button transition | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:196` |
|
|
1889
|
+
| `--hub-table-filter-count-border-radius` | `var(--hub-ref-radius-pill, 50rem)` | Filter count badge border radius | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:203` |
|
|
1890
|
+
| `--hub-table-filter-count-font-size` | `0.7rem` | Filter count badge font size | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:201` |
|
|
1891
|
+
| `--hub-table-filter-count-font-weight` | `var(--hub-ref-font-weight-bold, 700)` | Filter count badge font weight | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:202` |
|
|
1892
|
+
| `--hub-table-filter-count-padding-x` | `0.4em` | Filter count badge horizontal padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:200` |
|
|
1893
|
+
| `--hub-table-filter-count-size` | `1.25rem` | Filter count badge size | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:199` |
|
|
1894
|
+
| `--hub-table-search-border-radius` | `var(--hub-table-border-radius)` | Search field border radius | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:153` |
|
|
1895
|
+
| `--hub-table-search-border-width` | `var(--hub-table-border-width)` | Search field border width | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:152` |
|
|
1896
|
+
| `--hub-table-search-button-min-width` | `2.75rem` | Search button minimum width | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:148` |
|
|
1897
|
+
| `--hub-table-search-input-font-size` | `1rem` | Search input font size | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:156` |
|
|
1898
|
+
| `--hub-table-search-input-padding-x` | `0.75rem` | Search input horizontal padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:154` |
|
|
1899
|
+
| `--hub-table-search-input-padding-y` | `0.375rem` | Search input vertical padding | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:155` |
|
|
1865
1900
|
| `--hub-table-top-bar-align-items` | `center` | Top bar cross-axis alignment | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:42` |
|
|
1866
1901
|
| `--hub-table-top-bar-justify-content` | `end` | Top bar content justification | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:41` |
|
|
1867
1902
|
| `--hub-table-top-bar-wrap` | `wrap` | Top bar flex wrapping | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:43` |
|
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.2",
|
|
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
|
}
|