shelving 1.282.1 → 1.282.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/package.json
CHANGED
package/ui/button/Button.md
CHANGED
|
@@ -48,6 +48,8 @@ import { getButtonClass } from "shelving/ui";
|
|
|
48
48
|
|
|
49
49
|
`Button` paints from the [tint ladder](/ui/TINT_CLASS). Override these hooks at `:root` or any ancestor scope; apply `color=` / `status=` (on the button or an ancestor scope) to recolour the whole button, or use a per-property hook for one change.
|
|
50
50
|
|
|
51
|
+
`--button-padding` and `--button-small-padding` set the `padding` shorthand, so a single value pads both axes equally and a two-value override pads block and inline separately (e.g. `var(--space-small) var(--space-normal)`).
|
|
52
|
+
|
|
51
53
|
| Variable | Styles | Default |
|
|
52
54
|
|---|---|---|
|
|
53
55
|
| `--button-background` | Surface fill | `var(--tint-90)` |
|
|
@@ -76,8 +78,9 @@ import { getButtonClass } from "shelving/ui";
|
|
|
76
78
|
**Global tokens it reads:** the tint ladder `--tint-50` / `--tint-80` / `--tint-90` / `--tint-95` / `--tint-100` / `--tint-55`, plus `--space-small`, `--space-xxsmall`, `--radius-xsmall`, `--stroke-normal`, `--stroke-focus`, `--color-focus`, `--font-body`, `--weight-strong`, `--size-normal`, `--leading`, and `--duration-fast`.
|
|
77
79
|
|
|
78
80
|
```css
|
|
79
|
-
/* Theme: pill-shaped buttons. */
|
|
81
|
+
/* Theme: pill-shaped buttons, with roomier inline padding. */
|
|
80
82
|
:root {
|
|
81
83
|
--button-radius: 999px;
|
|
84
|
+
--button-padding: var(--space-small) var(--space-normal);
|
|
82
85
|
}
|
|
83
86
|
```
|
|
@@ -17,8 +17,7 @@
|
|
|
17
17
|
max-inline-size: 100%;
|
|
18
18
|
border-radius: var(--button-radius, var(--radius-xsmall));
|
|
19
19
|
border: var(--button-border, var(--button-stroke, var(--stroke-normal)) solid var(--tint-80));
|
|
20
|
-
padding
|
|
21
|
-
padding-inline: var(--button-padding, var(--space-small));
|
|
20
|
+
padding: var(--button-padding, var(--space-small));
|
|
22
21
|
margin-inline: 0;
|
|
23
22
|
margin-block: var(--button-space, var(--space-small));
|
|
24
23
|
|
|
@@ -61,8 +60,7 @@
|
|
|
61
60
|
/* Variants */
|
|
62
61
|
&.small {
|
|
63
62
|
gap: var(--button-small-gap, var(--space-xxsmall));
|
|
64
|
-
padding
|
|
65
|
-
padding-inline: var(--button-small-padding, var(--space-xxsmall));
|
|
63
|
+
padding: var(--button-small-padding, var(--space-xxsmall));
|
|
66
64
|
}
|
|
67
65
|
|
|
68
66
|
&.full {
|
package/ui/table/Table.md
CHANGED
|
@@ -34,10 +34,12 @@ import { Table } from "shelving/ui";
|
|
|
34
34
|
|
|
35
35
|
`Table` exposes hooks for its rhythm, cell padding, and border; it paints no surface of its own, so it inherits the surrounding tint.
|
|
36
36
|
|
|
37
|
+
`--table-padding` sets the `padding` shorthand on each cell, so a single value pads both axes equally and a two-value override pads block and inline separately (e.g. `var(--space-xxsmall) var(--space-small)`). The outermost columns still drop their outer inline padding, and `<thead>` / `<tfoot>` their outer block padding, so the table stays flush with its container.
|
|
38
|
+
|
|
37
39
|
| Variable | Styles | Default |
|
|
38
40
|
|---|---|---|
|
|
39
41
|
| `--table-space` | Outer block margin (top + bottom) | `var(--space-paragraph)` (16px) |
|
|
40
|
-
| `--table-padding` | Cell padding
|
|
42
|
+
| `--table-padding` | Cell padding | `var(--space-xsmall)` |
|
|
41
43
|
| `--table-border` | Cell border shorthand | `var(--table-stroke)` |
|
|
42
44
|
| `--table-stroke` | Cell border thickness/colour | `var(--stroke-normal) solid var(--tint-80)` |
|
|
43
45
|
| `--table-header-weight` | Weight of `<thead>` / `<tfoot>` / `<tbody> <th>` cells | `var(--weight-strong)` |
|
|
@@ -20,8 +20,7 @@
|
|
|
20
20
|
/* Children */
|
|
21
21
|
th,
|
|
22
22
|
td {
|
|
23
|
-
padding
|
|
24
|
-
padding-inline: var(--table-padding, var(--space-xsmall));
|
|
23
|
+
padding: var(--table-padding, var(--space-xsmall));
|
|
25
24
|
border-block: var(--table-border, var(--table-stroke, var(--stroke-normal) solid var(--tint-80)));
|
|
26
25
|
}
|
|
27
26
|
|