@uncinq/css-components 1.25.0 → 1.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/css/components/alert.css +1 -1
  2. package/css/components/badge.css +10 -10
  3. package/css/components/button.css +20 -20
  4. package/css/components/list.css +1 -1
  5. package/css/components/push.css +2 -2
  6. package/docs/buttons/btn.md +4 -4
  7. package/docs/content/alert.md +1 -1
  8. package/docs/content/badge.md +2 -2
  9. package/docs/content/list.md +1 -1
  10. package/docs/content/overview.md +1 -1
  11. package/package.json +1 -1
package/css/components/alert.css CHANGED
@@ -57,7 +57,7 @@
57
57
  .alert-dark {
58
58
  --alert-color-background: var(--color-dark-muted);
59
59
  --alert-color-border: var(--color-dark-muted);
60
- --alert-color-text: var(--color-text-on-dark);
60
+ --alert-color-text: var(--color-on-dark);
61
61
  }
62
62
  .alert-info {
63
63
  --alert-color-background: var(--color-info-muted);
package/css/components/badge.css CHANGED
@@ -26,51 +26,51 @@
26
26
  .badge-brand {
27
27
  --badge-color-background: var(--color-brand);
28
28
  --badge-color-background-hover: var(--color-brand-hover);
29
- --badge-color-text: var(--color-text-on-brand);
29
+ --badge-color-text: var(--color-on-brand);
30
30
  }
31
31
  .badge-danger {
32
32
  --badge-color-background: var(--color-danger);
33
33
  --badge-color-background-hover: var(--color-danger-hover);
34
- --badge-color-text: var(--color-text-on-danger);
34
+ --badge-color-text: var(--color-on-danger);
35
35
  }
36
36
  .badge-dark {
37
37
  --badge-color-background: var(--color-dark);
38
38
  --badge-color-background-hover: var(--color-dark-hover);
39
- --badge-color-text: var(--color-text-on-dark);
39
+ --badge-color-text: var(--color-on-dark);
40
40
  }
41
41
  .badge-info {
42
42
  --badge-color-background: var(--color-info);
43
43
  --badge-color-background-hover: var(--color-info-hover);
44
- --badge-color-text: var(--color-text-on-info);
44
+ --badge-color-text: var(--color-on-info);
45
45
  }
46
46
  .badge-light {
47
47
  --badge-color-background: var(--color-light);
48
48
  --badge-color-background-hover: var(--color-light-hover);
49
- --badge-color-text: var(--color-text-on-light);
49
+ --badge-color-text: var(--color-on-light);
50
50
  }
51
51
  .badge-neutral {
52
52
  --badge-color-background: var(--color-neutral);
53
53
  --badge-color-background-hover: var(--color-neutral-hover);
54
- --badge-color-text: var(--color-text-on-neutral);
54
+ --badge-color-text: var(--color-on-neutral);
55
55
  }
56
56
  .badge-primary {
57
57
  --badge-color-background: var(--color-brand);
58
58
  --badge-color-background-hover: var(--color-brand-hover);
59
- --badge-color-text: var(--color-text-on-brand);
59
+ --badge-color-text: var(--color-on-brand);
60
60
  }
61
61
  .badge-secondary {
62
62
  --badge-color-background: var(--color-neutral);
63
63
  --badge-color-background-hover: var(--color-neutral-hover);
64
- --badge-color-text: var(--color-text-on-neutral);
64
+ --badge-color-text: var(--color-on-neutral);
65
65
  }
66
66
  .badge-success {
67
67
  --badge-color-background: var(--color-success);
68
68
  --badge-color-background-hover: var(--color-success-hover);
69
- --badge-color-text: var(--color-text-on-success);
69
+ --badge-color-text: var(--color-on-success);
70
70
  }
71
71
  .badge-warning {
72
72
  --badge-color-background: var(--color-warning);
73
73
  --badge-color-background-hover: var(--color-warning-hover);
74
- --badge-color-text: var(--color-text-on-warning);
74
+ --badge-color-text: var(--color-on-warning);
75
75
  }
76
76
  }
package/css/components/button.css CHANGED
@@ -64,8 +64,8 @@
64
64
  --btn-color-background-hover: var(--color-brand-hover);
65
65
  --btn-color-border: var(--color-brand);
66
66
  --btn-color-border-hover: var(--color-brand-hover);
67
- --btn-color-text: var(--color-text-on-brand);
68
- --btn-color-text-hover: var(--color-text-on-brand);
67
+ --btn-color-text: var(--color-on-brand);
68
+ --btn-color-text-hover: var(--color-on-brand);
69
69
  }
70
70
 
71
71
  .btn-control {
@@ -82,8 +82,8 @@
82
82
  --btn-color-background-hover: var(--color-danger-hover);
83
83
  --btn-color-border: var(--color-danger);
84
84
  --btn-color-border-hover: var(--color-danger-hover);
85
- --btn-color-text: var(--color-text-on-danger);
86
- --btn-color-text-hover: var(--color-text-on-danger);
85
+ --btn-color-text: var(--color-on-danger);
86
+ --btn-color-text-hover: var(--color-on-danger);
87
87
  }
88
88
 
89
89
  .btn-dark {
@@ -91,8 +91,8 @@
91
91
  --btn-color-background-hover: var(--color-dark-hover);
92
92
  --btn-color-border: var(--color-dark);
93
93
  --btn-color-border-hover: var(--color-dark-hover);
94
- --btn-color-text: var(--color-text-on-dark);
95
- --btn-color-text-hover: var(--color-text-on-dark);
94
+ --btn-color-text: var(--color-on-dark);
95
+ --btn-color-text-hover: var(--color-on-dark);
96
96
  }
97
97
 
98
98
  .btn-ghost {
@@ -109,8 +109,8 @@
109
109
  --btn-color-background-hover: var(--color-info-hover);
110
110
  --btn-color-border: var(--color-info);
111
111
  --btn-color-border-hover: var(--color-info-hover);
112
- --btn-color-text: var(--color-text-on-info);
113
- --btn-color-text-hover: var(--color-text-on-info);
112
+ --btn-color-text: var(--color-on-info);
113
+ --btn-color-text-hover: var(--color-on-info);
114
114
  }
115
115
 
116
116
  .btn-light {
@@ -118,8 +118,8 @@
118
118
  --btn-color-background-hover: var(--color-light-hover);
119
119
  --btn-color-border: var(--color-light);
120
120
  --btn-color-border-hover: var(--color-light-hover);
121
- --btn-color-text: var(--color-text-on-light);
122
- --btn-color-text-hover: var(--color-text-on-light);
121
+ --btn-color-text: var(--color-on-light);
122
+ --btn-color-text-hover: var(--color-on-light);
123
123
  }
124
124
 
125
125
  .btn-link {
@@ -143,8 +143,8 @@
143
143
  --btn-color-background-hover: var(--color-neutral-hover);
144
144
  --btn-color-border: var(--color-neutral);
145
145
  --btn-color-border-hover: var(--color-neutral-hover);
146
- --btn-color-text: var(--color-text-on-neutral);
147
- --btn-color-text-hover: var(--color-text-on-neutral);
146
+ --btn-color-text: var(--color-on-neutral);
147
+ --btn-color-text-hover: var(--color-on-neutral);
148
148
  }
149
149
 
150
150
  .btn-primary {
@@ -152,8 +152,8 @@
152
152
  --btn-color-background-hover: var(--color-brand-hover);
153
153
  --btn-color-border: var(--color-brand);
154
154
  --btn-color-border-hover: var(--color-brand-hover);
155
- --btn-color-text: var(--color-text-on-brand);
156
- --btn-color-text-hover: var(--color-text-on-brand);
155
+ --btn-color-text: var(--color-on-brand);
156
+ --btn-color-text-hover: var(--color-on-brand);
157
157
  }
158
158
 
159
159
  .btn-secondary {
@@ -161,8 +161,8 @@
161
161
  --btn-color-background-hover: var(--color-neutral-hover);
162
162
  --btn-color-border: var(--color-neutral);
163
163
  --btn-color-border-hover: var(--color-neutral-hover);
164
- --btn-color-text: var(--color-text-on-neutral);
165
- --btn-color-text-hover: var(--color-text-on-neutral);
164
+ --btn-color-text: var(--color-on-neutral);
165
+ --btn-color-text-hover: var(--color-on-neutral);
166
166
  }
167
167
 
168
168
  .btn-success {
@@ -170,8 +170,8 @@
170
170
  --btn-color-background-hover: var(--color-success-hover);
171
171
  --btn-color-border: var(--color-success);
172
172
  --btn-color-border-hover: var(--color-success-hover);
173
- --btn-color-text: var(--color-text-on-success);
174
- --btn-color-text-hover: var(--color-text-on-success);
173
+ --btn-color-text: var(--color-on-success);
174
+ --btn-color-text-hover: var(--color-on-success);
175
175
  }
176
176
 
177
177
  .btn-warning {
@@ -179,8 +179,8 @@
179
179
  --btn-color-background-hover: var(--color-warning-hover);
180
180
  --btn-color-border: var(--color-warning);
181
181
  --btn-color-border-hover: var(--color-warning-hover);
182
- --btn-color-text: var(--color-text-on-warning);
183
- --btn-color-text-hover: var(--color-text-on-warning);
182
+ --btn-color-text: var(--color-on-warning);
183
+ --btn-color-text-hover: var(--color-on-warning);
184
184
  }
185
185
 
186
186
  /* Sizes */
package/css/components/list.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /* components/list.css */
2
2
  /*
3
- * .list — compact labelled list with dash markers.
3
+ * .list: compact labelled list. Markers and indent come from css-base.
4
4
  *
5
5
  * Structure:
6
6
  * div.list
package/css/components/push.css CHANGED
@@ -72,8 +72,8 @@
72
72
  --btn-color-background-hover: var(--color-light-hover);
73
73
  --btn-color-border: var(--color-light);
74
74
  --btn-color-border-hover: var(--color-light-hover);
75
- --btn-color-text: var(--color-text-on-light);
76
- --btn-color-text-hover: var(--color-text-on-light);
75
+ --btn-color-text: var(--color-on-light);
76
+ --btn-color-text-hover: var(--color-on-light);
77
77
  --color-heading: var(--push-color);
78
78
  --color-link: var(--push-color);
79
79
  --color-link-hover: var(--push-color);
package/docs/buttons/btn.md CHANGED
@@ -38,14 +38,14 @@ Each sets its background, border and text colour, with their hover values.
38
38
  --btn-color-background-hover: var(--color-danger-hover);
39
39
  --btn-color-border: var(--color-danger);
40
40
  --btn-color-border-hover: var(--color-danger-hover);
41
- --btn-color-text: var(--color-text-on-danger);
42
- --btn-color-text-hover: var(--color-text-on-danger);
41
+ --btn-color-text: var(--color-on-danger);
42
+ --btn-color-text-hover: var(--color-on-danger);
43
43
  }
44
44
  ```
45
45
 
46
- The text colour always comes from the matching `--color-text-on-*` semantic token, so contrast survives a change to the underlying colour. That pairing is the reason to rebrand by redefining `--color-brand` rather than `--btn-color-background`.
46
+ The text colour always comes from the matching `--color-on-*` semantic token, so contrast survives a change to the underlying colour. That pairing is the reason to rebrand by redefining `--color-brand` rather than `--btn-color-background`.
47
47
 
48
- The hover text colour has to be set alongside the text colour, even when the two are the same. The `--btn-color-text-hover` token defaults to `var(--btn-color-text)`, but on `:root`, where it resolves to the default text colour once and for all: a variant or a context that only changes `--btn-color-text`, as a push over a dark media does, would see its text turn back to `--color-text-on-brand` on hover.
48
+ The hover text colour has to be set alongside the text colour, even when the two are the same. The `--btn-color-text-hover` token defaults to `var(--btn-color-text)`, but on `:root`, where it resolves to the default text colour once and for all: a variant or a context that only changes `--btn-color-text`, as a push over a dark media does, would see its text turn back to `--color-on-brand` on hover.
49
49
 
50
50
  `.btn-primary` and `.btn-brand` resolve to exactly the same values, as do `.btn-secondary` and `.btn-neutral`. The intent names exist so a page can say *primary action* without deciding which colour that is.
51
51
 
package/docs/content/alert.md CHANGED
@@ -29,7 +29,7 @@ Each sets background, border and text colour from the matching `-muted` and `-st
29
29
  }
30
30
  ```
31
31
 
32
- `.alert-primary` and `.alert-brand` resolve identically, as do `.alert-secondary` and `.alert-neutral`. `.alert-dark` is the one exception to the muted pattern: it takes `--color-text-on-dark` rather than `--color-dark-strong`.
32
+ `.alert-primary` and `.alert-brand` resolve identically, as do `.alert-secondary` and `.alert-neutral`. `.alert-dark` is the one exception to the muted pattern: it takes `--color-on-dark` rather than `--color-dark-strong`.
33
33
 
34
34
  The base `.alert` declares no colours of its own, so an alert with no variant class shows whatever `--alert-color-*` resolves to in your token set.
35
35
 
package/docs/content/badge.md CHANGED
@@ -25,11 +25,11 @@ The colours do not. A badge is a **solid** chip, not a tinted block:
25
25
  .badge-success {
26
26
  --badge-color-background: var(--color-success);
27
27
  --badge-color-background-hover: var(--color-success-strong);
28
- --badge-color-text: var(--color-text-on-success);
28
+ --badge-color-text: var(--color-on-success);
29
29
  }
30
30
  ```
31
31
 
32
- Full colour for the background, and the matching `--color-text-on-*` token for the text, which is the pair that guarantees contrast when the underlying colour is overridden. Compare with `.alert-*`, which uses `-muted` and `-strong` because it has to remain readable behind a paragraph.
32
+ Full colour for the background, and the matching `--color-on-*` token for the text, which is the pair that guarantees contrast when the underlying colour is overridden. Compare with `.alert-*`, which uses `-muted` and `-strong` because it has to remain readable behind a paragraph.
33
33
 
34
34
  Note that a variant sets no border colour. `--badge-color-border` keeps whatever the base token resolves to, so a bordered badge needs that token set explicitly.
35
35
 
package/docs/content/list.md CHANGED
@@ -34,7 +34,7 @@ Item spacing is a **margin**, not a `gap`, because the list is not a flex contai
34
34
 
35
35
  ## Markers come from css-base
36
36
 
37
- The dash marker is not declared in this file. Bullets, numbering and the marker colour all come from the native list styling in [css-base](../../../css-base/base/), which is also why the component works on `ol` without a variant.
37
+ No marker is declared in this file. Bullets and numbering are the user agent's, and the indent comes from the native list styling in [css-base](../../../css-base/base/), sized in em by `--list-padding-inline-start` and `--list-ordered-padding-inline-start`. That is also why the component works on `ol` without a variant.
38
38
 
39
39
  ## Where it fits
40
40
 
package/docs/content/overview.md CHANGED
@@ -35,6 +35,6 @@ Several source comments describe `.card` as a backwards-compatible alias for `.i
35
35
  | | Background | Text |
36
36
  | --- | --- | --- |
37
37
  | `.alert-*` | `--color-*-muted` | `--color-*-strong` |
38
- | `.badge-*` | `--color-*` | `--color-text-on-*` |
38
+ | `.badge-*` | `--color-*` | `--color-on-*` |
39
39
 
40
40
  An alert is a tinted block meant to hold a paragraph, so it uses the muted pair. A badge is a solid chip meant to be read at a glance, so it uses the full colour with its guaranteed-contrast text token. Neither ever hardcodes a colour, which is what makes a rebrand a token change rather than a search and replace.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uncinq/css-components",
3
- "version": "1.25.0",
3
+ "version": "1.26.0",
4
4
  "description": "Framework-agnostic CSS component implementations.",
5
5
  "license": "MIT",
6
6
  "repository": {