@educarehq/solaris-ui 0.27.2 → 1.0.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 (41) hide show
  1. package/fesm2022/educarehq-solaris-ui-holidays-en-US-DcPJhM_F.mjs +99 -0
  2. package/fesm2022/educarehq-solaris-ui-holidays-en-US-DcPJhM_F.mjs.map +1 -0
  3. package/fesm2022/educarehq-solaris-ui-holidays-es-Ed4G0MdW.mjs +75 -0
  4. package/fesm2022/educarehq-solaris-ui-holidays-es-Ed4G0MdW.mjs.map +1 -0
  5. package/fesm2022/educarehq-solaris-ui-holidays-pt-BR-PbAFZhhU.mjs +129 -0
  6. package/fesm2022/educarehq-solaris-ui-holidays-pt-BR-PbAFZhhU.mjs.map +1 -0
  7. package/fesm2022/educarehq-solaris-ui.mjs +45991 -15021
  8. package/fesm2022/educarehq-solaris-ui.mjs.map +1 -1
  9. package/package.json +12 -6
  10. package/styles/_button.scss +494 -270
  11. package/styles/_core.scss +3 -0
  12. package/styles/_dropdown-menu.scss +3 -3
  13. package/styles/_form-field.scss +116 -0
  14. package/styles/_icon-button.scss +577 -210
  15. package/styles/_index.scss +3 -0
  16. package/styles/_input.scss +113 -63
  17. package/styles/_loading-zone.scss +7 -0
  18. package/styles/_motion.scss +14 -0
  19. package/styles/_popover.scss +5 -4
  20. package/styles/_textarea.scss +97 -47
  21. package/styles/_theme.scss +12 -0
  22. package/styles/token/color/_dark.scss +61 -51
  23. package/styles/token/color/_high-contrast.scss +157 -122
  24. package/styles/token/color/_light.scss +62 -52
  25. package/styles/token/density/_comfortable.scss +12 -12
  26. package/styles/token/density/_compact.scss +13 -13
  27. package/styles/token/density/_normal.scss +13 -13
  28. package/styles/token/focus/_focus.scss +4 -2
  29. package/styles/token/motion/_index.scss +2 -0
  30. package/styles/token/motion/_motion-keyframes.scss +188 -0
  31. package/styles/token/motion/_motion-mixins.scss +213 -0
  32. package/styles/token/motion/_motion.scss +4 -1
  33. package/styles/token/motion/_reduced-motion.scss +2 -0
  34. package/styles/token/radius/_radius.scss +1 -0
  35. package/styles/token/sizing/_control-height.scss +42 -0
  36. package/styles/token/sizing/_control-matrix.scss +37 -0
  37. package/styles/token/sizing/_index.scss +2 -0
  38. package/styles/token/spacing/_spacing.scss +19 -16
  39. package/styles/token/typography/_font-family.scss +1 -2
  40. package/styles/token/typography/_typography.scss +15 -11
  41. package/types/educarehq-solaris-ui.d.ts +5743 -322
package/styles/_button.scss CHANGED
@@ -1,37 +1,52 @@
1
+ :root {
2
+ --solaris-button-group-item-flex: 0 1 auto;
3
+ --solaris-button-group-item-shadow: none;
4
+ --solaris-button-group-separator-in-use: var(
5
+ --solaris-button-group-separator-color
6
+ );
7
+ --solaris-button-custom-color: var(--solaris-neutral-text-body);
8
+ --solaris-button-custom-background: var(--solaris-neutral-default);
9
+ --solaris-button-custom-border-color: var(--solaris-neutral-border-default);
10
+ --solaris-button-custom-hover-color: var(--solaris-button-custom-color);
11
+ --solaris-button-custom-active-color: var(--solaris-button-custom-color);
12
+ --solaris-button-custom-hover-background: var(
13
+ --solaris-button-custom-background
14
+ );
15
+ --solaris-button-custom-active-background: var(
16
+ --solaris-button-custom-background
17
+ );
18
+ --solaris-button-custom-hover-border-color: var(
19
+ --solaris-button-custom-border-color
20
+ );
21
+ --solaris-button-custom-active-border-color: var(
22
+ --solaris-button-custom-border-color
23
+ );
24
+ }
25
+
1
26
  [solaris-button] {
2
27
  --solaris-button-border-width: 0;
3
- --solaris-button-custom-color: initial;
4
28
  --solaris-button-border-color: transparent;
5
29
  --solaris-button-gap: var(--solaris-spacing-2);
6
30
  --solaris-button-hover-border-color: transparent;
7
- --solaris-button-radius: var(--solaris-radius-sm);
31
+ --solaris-button-radius: var(--solaris-radius-md);
8
32
  --solaris-button-active-border-color: transparent;
9
33
  --solaris-button-height: var(--solaris-spacing-10);
10
- --solaris-button-color: var(--solaris-text-inverse);
34
+ --solaris-button-color: var(--solaris-neutral-text-inverse);
11
35
  --solaris-button-icon-size: var(--solaris-spacing-4);
12
36
  --solaris-button-padding-x: var(--solaris-spacing-4);
13
37
  --solaris-button-padding-y: var(--solaris-spacing-2);
14
- --solaris-button-min-width: var(--solaris-spacing-20);
38
+ --solaris-button-min-width: var(--solaris-spacing-16);
15
39
  --solaris-button-font-size: var(--solaris-font-size-md);
16
- --solaris-button-hover-color: var(--solaris-text-inverse);
17
- --solaris-button-active-color: var(--solaris-text-inverse);
18
- --solaris-button-background: var(--solaris-surface-reverse);
19
- --solaris-button-icon-padding-end: var(--solaris-spacing-2);
40
+ --solaris-button-background: var(--solaris-neutral-inverse);
20
41
  --solaris-button-disabled-opacity: var(--solaris-opacity-50);
21
- --solaris-button-icon-padding-start: var(--solaris-spacing-2);
22
- --solaris-button-focus-ring-color: var(--solaris-text-default);
42
+ --solaris-button-icon-padding-start: var(--solaris-spacing-4);
23
43
  --solaris-button-font-weight: var(--solaris-font-weight-medium);
24
- --solaris-button-hover-background: var(--solaris-surface-reverse-subtle);
25
- --solaris-button-active-background: var(--solaris-surface-reverse-muted);
26
-
27
- --solaris-button-custom-background: initial;
28
- --solaris-button-custom-hover-color: initial;
29
- --solaris-button-custom-border-color: initial;
30
- --solaris-button-custom-active-color: initial;
31
- --solaris-button-custom-hover-background: initial;
32
- --solaris-button-custom-active-background: initial;
33
- --solaris-button-custom-hover-border-color: initial;
34
- --solaris-button-custom-active-border-color: initial;
44
+ --solaris-button-hover-color: var(--solaris-neutral-text-inverse);
45
+ --solaris-button-active-color: var(--solaris-neutral-text-inverse);
46
+ --solaris-button-focus-ring-color: var(--solaris-neutral-text-body);
47
+ --solaris-button-icon-padding-end: var(--solaris-density-padding-lg);
48
+ --solaris-button-hover-background: var(--solaris-neutral-inverse-subtle);
49
+ --solaris-button-active-background: var(--solaris-neutral-inverse-muted);
35
50
 
36
51
  cursor: pointer;
37
52
  user-select: none;
@@ -43,27 +58,36 @@
43
58
  gap: var(--solaris-button-gap);
44
59
  color: var(--solaris-button-color);
45
60
  height: var(--solaris-button-height);
46
- line-height: var(--solaris-line-height-sm);
61
+ flex: var(--solaris-button-group-item-flex);
62
+ line-height: var(--solaris-line-height-none);
47
63
  min-width: var(--solaris-button-min-width);
48
64
  font-size: var(--solaris-button-font-size);
49
65
  border-radius: var(--solaris-button-radius);
50
66
  background: var(--solaris-button-background);
67
+ box-shadow: var(--solaris-button-group-item-shadow);
51
68
  font-weight: var(--solaris-button-font-weight);
52
69
  font-family: var(--solaris-font-family-sans), system-ui;
53
70
  padding: var(--solaris-button-padding-y) var(--solaris-button-padding-x);
54
71
  border: var(--solaris-button-border-width) solid
55
72
  var(--solaris-button-border-color);
73
+ }
74
+
75
+ [solaris-button]:not([data-hydrated]) {
76
+ transition: none;
77
+ }
78
+
79
+ [solaris-button][data-hydrated] {
56
80
  transition:
57
- background var(--solaris-motion-duration-normal)
81
+ color var(--solaris-motion-duration-normal)
58
82
  var(--solaris-motion-easing-standard),
59
- border-color var(--solaris-motion-duration-normal)
83
+ background-color var(--solaris-motion-duration-normal)
60
84
  var(--solaris-motion-easing-standard),
61
- color var(--solaris-motion-duration-normal)
85
+ border-color var(--solaris-motion-duration-normal)
62
86
  var(--solaris-motion-easing-standard),
63
87
  box-shadow var(--solaris-motion-duration-normal)
64
88
  var(--solaris-motion-easing-standard),
65
- transform var(--solaris-motion-duration-normal)
66
- var(--solaris-motion-easing-standard);
89
+ transform var(--solaris-motion-duration-fast)
90
+ var(--solaris-motion-easing-decelerate);
67
91
  }
68
92
 
69
93
  [solaris-button]:hover {
@@ -73,10 +97,12 @@
73
97
  }
74
98
 
75
99
  [solaris-button]:active,
76
- [solaris-button][data-active] {
100
+ [solaris-button][data-active],
101
+ [solaris-button][data-pressed] {
77
102
  color: var(--solaris-button-active-color);
78
103
  background: var(--solaris-button-active-background);
79
104
  border-color: var(--solaris-button-active-border-color);
105
+ transform: scale(var(--solaris-motion-scale-active));
80
106
  }
81
107
 
82
108
  [solaris-button]:focus-visible {
@@ -88,12 +114,12 @@
88
114
  [solaris-button][aria-disabled='true'] {
89
115
  cursor: not-allowed;
90
116
  pointer-events: all;
91
- color: var(--solaris-text-muted);
117
+ color: var(--solaris-neutral-text-secondary);
92
118
  opacity: var(--solaris-button-disabled-opacity);
93
119
  }
94
120
 
95
121
  [solaris-button][data-loading] {
96
- cursor: wait;
122
+ cursor: progress;
97
123
  position: relative;
98
124
  pointer-events: all;
99
125
  }
@@ -112,6 +138,34 @@
112
138
 
113
139
  [solaris-button][data-full-width] {
114
140
  width: 100%;
141
+ max-width: 100%;
142
+ }
143
+
144
+ [solaris-button][data-group]:first-child {
145
+ border-start-start-radius: max(
146
+ var(--solaris-button-group-flush-inline),
147
+ var(--solaris-button-group-flush-block)
148
+ );
149
+ border-end-start-radius: var(--solaris-button-group-flush-inline);
150
+ border-start-end-radius: var(--solaris-button-group-flush-block);
151
+ }
152
+
153
+ [solaris-button][data-group]:last-child {
154
+ border-start-end-radius: var(--solaris-button-group-flush-inline);
155
+ border-end-start-radius: var(--solaris-button-group-flush-block);
156
+ border-end-end-radius: max(
157
+ var(--solaris-button-group-flush-inline),
158
+ var(--solaris-button-group-flush-block)
159
+ );
160
+ box-shadow: none;
161
+ }
162
+
163
+ [solaris-button][data-group]:only-child {
164
+ border-radius: max(
165
+ var(--solaris-button-group-flush-inline),
166
+ var(--solaris-button-group-flush-block)
167
+ );
168
+ box-shadow: none;
115
169
  }
116
170
 
117
171
  [solaris-button] [solaris-button-icon] {
@@ -139,6 +193,9 @@
139
193
 
140
194
  [solaris-button][data-appearance='solid'] {
141
195
  --solaris-button-border-width: var(--solaris-border-width-sm);
196
+ --solaris-button-group-separator-in-use: var(
197
+ --solaris-button-group-separator-on-solid
198
+ );
142
199
  }
143
200
 
144
201
  [solaris-button][data-appearance='outline'] {
@@ -161,314 +218,336 @@
161
218
  }
162
219
 
163
220
  [solaris-button][data-color='neutral'][data-appearance='solid'] {
164
- --solaris-button-color: var(--solaris-text-inverse);
165
- --solaris-button-hover-color: var(--solaris-text-inverse);
166
- --solaris-button-active-color: var(--solaris-text-inverse);
167
- --solaris-button-background: var(--solaris-surface-reverse);
168
- --solaris-button-focus-ring-color: var(--solaris-text-default);
169
- --solaris-button-hover-background: var(--solaris-surface-reverse-subtle);
170
- --solaris-button-active-background: var(--solaris-surface-reverse-muted);
221
+ --solaris-button-color: var(--solaris-neutral-text-inverse);
222
+ --solaris-button-hover-color: var(--solaris-neutral-text-inverse);
223
+ --solaris-button-active-color: var(--solaris-neutral-text-inverse);
224
+ --solaris-button-background: var(--solaris-neutral-inverse);
225
+ --solaris-button-focus-ring-color: var(--solaris-neutral-text-body);
226
+ --solaris-button-hover-background: var(--solaris-neutral-inverse-subtle);
227
+ --solaris-button-active-background: var(--solaris-neutral-inverse-muted);
171
228
  }
172
229
 
173
230
  [solaris-button][data-color='neutral'][data-appearance='outline'] {
174
- --solaris-button-color: var(--solaris-text-default);
175
- --solaris-button-hover-color: var(--solaris-text-inverse);
176
- --solaris-button-active-color: var(--solaris-text-inverse);
177
- --solaris-button-border-color: var(--solaris-border-default);
178
- --solaris-button-focus-ring-color: var(--solaris-text-default);
179
- --solaris-button-hover-border-color: var(--solaris-border-strong);
180
- --solaris-button-hover-background: var(--solaris-surface-reverse);
181
- --solaris-button-active-background: var(--solaris-surface-reverse-muted);
231
+ --solaris-button-color: var(--solaris-neutral-text-body);
232
+ --solaris-button-hover-color: var(--solaris-neutral-text-body);
233
+ --solaris-button-active-color: var(--solaris-neutral-text-body);
234
+ --solaris-button-border-color: var(--solaris-neutral-border-default);
235
+ --solaris-button-focus-ring-color: var(--solaris-neutral-text-body);
236
+ --solaris-button-hover-border-color: var(--solaris-neutral-border-strong);
237
+ --solaris-button-active-border-color: var(--solaris-neutral-border-strong);
238
+ --solaris-button-hover-background: var(--solaris-neutral-sunken);
239
+ --solaris-button-active-background: var(--solaris-neutral-sunken);
182
240
  }
183
241
 
184
242
  [solaris-button][data-color='neutral'][data-appearance='ghost'] {
185
- --solaris-button-color: var(--solaris-text-default);
186
- --solaris-button-hover-color: var(--solaris-text-inverse);
187
- --solaris-button-active-color: var(--solaris-text-inverse);
188
- --solaris-button-focus-ring-color: var(--solaris-text-default);
189
- --solaris-button-hover-background: var(--solaris-surface-reverse-subtle);
190
- --solaris-button-active-background: var(--solaris-surface-reverse-muted);
243
+ --solaris-button-color: var(--solaris-neutral-text-body);
244
+ --solaris-button-hover-color: var(--solaris-neutral-text-body);
245
+ --solaris-button-active-color: var(--solaris-neutral-text-body);
246
+ --solaris-button-focus-ring-color: var(--solaris-neutral-text-body);
247
+ --solaris-button-hover-background: var(--solaris-neutral-sunken);
248
+ --solaris-button-active-background: var(--solaris-neutral-sunken);
191
249
  }
192
250
 
193
251
  [solaris-button][data-color='neutral'][data-appearance='tonal'] {
194
- --solaris-button-color: var(--solaris-text-default);
195
- --solaris-button-background: var(--solaris-surface-muted);
196
- --solaris-button-hover-color: var(--solaris-text-inverse);
197
- --solaris-button-active-color: var(--solaris-text-inverse);
198
- --solaris-button-border-color: var(--solaris-border-default);
199
- --solaris-button-focus-ring-color: var(--solaris-text-default);
200
- --solaris-button-hover-border-color: var(--solaris-border-strong);
201
- --solaris-button-hover-background: var(--solaris-surface-reverse-subtle);
202
- --solaris-button-active-background: var(--solaris-surface-reverse-muted);
252
+ --solaris-button-color: var(--solaris-neutral-text-body);
253
+ --solaris-button-background: var(--solaris-neutral-sunken);
254
+ --solaris-button-hover-color: var(--solaris-neutral-text-body);
255
+ --solaris-button-active-color: var(--solaris-neutral-text-body);
256
+ --solaris-button-border-color: var(--solaris-neutral-border-default);
257
+ --solaris-button-focus-ring-color: var(--solaris-neutral-text-body);
258
+ --solaris-button-hover-border-color: var(--solaris-neutral-border-strong);
259
+ --solaris-button-active-border-color: var(--solaris-neutral-border-strong);
260
+ --solaris-button-hover-background: var(--solaris-neutral-sunken);
261
+ --solaris-button-active-background: var(--solaris-neutral-sunken);
203
262
  }
204
263
 
205
264
  [solaris-button][data-color='neutral'][data-appearance='surface'] {
206
- --solaris-button-color: var(--solaris-text-default);
207
- --solaris-button-background: var(--solaris-surface-muted);
208
- --solaris-button-hover-color: var(--solaris-text-default);
209
- --solaris-button-active-color: var(--solaris-text-default);
210
- --solaris-button-focus-ring-color: var(--solaris-text-default);
211
- --solaris-button-hover-background: var(--solaris-surface-subtle);
212
- --solaris-button-active-background: var(--solaris-surface-subtle);
265
+ --solaris-button-color: var(--solaris-neutral-text-body);
266
+ --solaris-button-background: var(--solaris-neutral-sunken);
267
+ --solaris-button-hover-color: var(--solaris-neutral-text-body);
268
+ --solaris-button-active-color: var(--solaris-neutral-text-body);
269
+ --solaris-button-focus-ring-color: var(--solaris-neutral-text-body);
270
+ --solaris-button-hover-background: var(--solaris-neutral-subtle);
271
+ --solaris-button-active-background: var(--solaris-neutral-subtle);
213
272
  }
214
273
 
215
274
  [solaris-button][data-color='primary'][data-appearance='solid'] {
216
275
  --solaris-button-color: var(--solaris-primary-on-solid);
217
- --solaris-button-background: var(--solaris-primary-base);
218
- --solaris-button-hover-color: var(--solaris-primary-text);
219
- --solaris-button-active-color: var(--solaris-primary-text);
276
+ --solaris-button-background: var(--solaris-primary-solid);
277
+ --solaris-button-hover-color: var(--solaris-primary-on-solid);
278
+ --solaris-button-active-color: var(--solaris-primary-on-solid);
220
279
  --solaris-button-border-color: var(--solaris-primary-border);
221
- --solaris-button-focus-ring-color: var(--solaris-primary-base);
222
- --solaris-button-hover-background: var(--solaris-primary-hover);
223
- --solaris-button-active-background: var(--solaris-primary-active);
280
+ --solaris-button-focus-ring-color: var(--solaris-primary-solid);
281
+ --solaris-button-hover-background: var(--solaris-primary-solid-hover);
282
+ --solaris-button-active-background: var(--solaris-primary-solid-active);
224
283
  }
225
284
 
226
285
  [solaris-button][data-color='primary'][data-appearance='outline'] {
227
- --solaris-button-color: var(--solaris-primary-base);
228
- --solaris-button-hover-color: var(--solaris-primary-text);
229
- --solaris-button-active-color: var(--solaris-primary-text);
286
+ --solaris-button-color: var(--solaris-primary-solid);
287
+ --solaris-button-hover-color: var(--solaris-primary-foreground);
288
+ --solaris-button-active-color: var(--solaris-primary-foreground);
230
289
  --solaris-button-border-color: var(--solaris-primary-border);
231
- --solaris-button-focus-ring-color: var(--solaris-primary-base);
232
- --solaris-button-hover-background: var(--solaris-primary-hover);
233
- --solaris-button-active-background: var(--solaris-primary-active);
290
+ --solaris-button-focus-ring-color: var(--solaris-primary-solid);
291
+ --solaris-button-hover-border-color: var(--solaris-primary-solid);
292
+ --solaris-button-active-border-color: var(--solaris-primary-solid);
293
+ --solaris-button-hover-background: var(--solaris-primary-soft);
294
+ --solaris-button-active-background: var(--solaris-primary-soft);
234
295
  }
235
296
 
236
297
  [solaris-button][data-color='primary'][data-appearance='ghost'] {
237
- --solaris-button-color: var(--solaris-primary-base);
238
- --solaris-button-hover-color: var(--solaris-primary-text);
239
- --solaris-button-active-color: var(--solaris-primary-text);
240
- --solaris-button-focus-ring-color: var(--solaris-primary-base);
241
- --solaris-button-hover-background: var(--solaris-primary-hover);
242
- --solaris-button-active-background: var(--solaris-primary-active);
298
+ --solaris-button-color: var(--solaris-primary-solid);
299
+ --solaris-button-hover-color: var(--solaris-primary-foreground);
300
+ --solaris-button-active-color: var(--solaris-primary-foreground);
301
+ --solaris-button-focus-ring-color: var(--solaris-primary-solid);
302
+ --solaris-button-hover-background: var(--solaris-primary-soft);
303
+ --solaris-button-active-background: var(--solaris-primary-soft);
243
304
  }
244
305
 
245
306
  [solaris-button][data-color='primary'][data-appearance='tonal'] {
246
- --solaris-button-color: var(--solaris-primary-text);
247
- --solaris-button-hover-color: var(--solaris-primary-text);
248
- --solaris-button-active-color: var(--solaris-primary-text);
249
- --solaris-button-background: var(--solaris-primary-surface);
307
+ --solaris-button-color: var(--solaris-primary-foreground);
308
+ --solaris-button-hover-color: var(--solaris-primary-foreground);
309
+ --solaris-button-active-color: var(--solaris-primary-foreground);
310
+ --solaris-button-background: var(--solaris-primary-soft);
250
311
  --solaris-button-border-color: var(--solaris-primary-border);
251
- --solaris-button-focus-ring-color: var(--solaris-primary-base);
252
- --solaris-button-hover-background: var(--solaris-primary-hover);
253
- --solaris-button-hover-border-color: var(--solaris-primary-base);
254
- --solaris-button-active-background: var(--solaris-primary-active);
312
+ --solaris-button-focus-ring-color: var(--solaris-primary-solid);
313
+ --solaris-button-hover-background: var(--solaris-primary-soft);
314
+ --solaris-button-hover-border-color: var(--solaris-primary-solid);
315
+ --solaris-button-active-background: var(--solaris-primary-soft);
316
+ --solaris-button-active-border-color: var(--solaris-primary-solid);
255
317
  }
256
318
 
257
319
  [solaris-button][data-color='primary'][data-appearance='surface'] {
258
- --solaris-button-color: var(--solaris-primary-text);
259
- --solaris-button-hover-color: var(--solaris-primary-text);
260
- --solaris-button-active-color: var(--solaris-primary-text);
261
- --solaris-button-background: var(--solaris-primary-surface);
262
- --solaris-button-focus-ring-color: var(--solaris-primary-base);
263
- --solaris-button-hover-background: var(--solaris-primary-hover);
264
- --solaris-button-active-background: var(--solaris-primary-active);
320
+ --solaris-button-color: var(--solaris-primary-foreground);
321
+ --solaris-button-hover-color: var(--solaris-primary-foreground);
322
+ --solaris-button-active-color: var(--solaris-primary-foreground);
323
+ --solaris-button-background: var(--solaris-primary-soft);
324
+ --solaris-button-focus-ring-color: var(--solaris-primary-solid);
325
+ --solaris-button-hover-background: var(--solaris-primary-soft);
326
+ --solaris-button-active-background: var(--solaris-primary-soft);
327
+ --solaris-button-active-border-color: var(--solaris-primary-border);
265
328
  }
266
329
 
267
330
  [solaris-button][data-color='success'][data-appearance='solid'] {
268
331
  --solaris-button-color: var(--solaris-success-on-solid);
269
- --solaris-button-background: var(--solaris-success-base);
332
+ --solaris-button-background: var(--solaris-success-solid);
270
333
  --solaris-button-border-color: var(--solaris-success-border);
271
334
  --solaris-button-hover-color: var(--solaris-success-on-solid);
272
335
  --solaris-button-active-color: var(--solaris-success-on-solid);
273
- --solaris-button-focus-ring-color: var(--solaris-success-base);
274
- --solaris-button-hover-background: var(--solaris-success-hover);
275
- --solaris-button-active-background: var(--solaris-success-active);
336
+ --solaris-button-focus-ring-color: var(--solaris-success-solid);
337
+ --solaris-button-hover-background: var(--solaris-success-solid-hover);
338
+ --solaris-button-active-background: var(--solaris-success-solid-active);
276
339
  }
277
340
 
278
341
  [solaris-button][data-color='success'][data-appearance='outline'] {
279
- --solaris-button-color: var(--solaris-success-text);
342
+ --solaris-button-color: var(--solaris-success-foreground);
280
343
  --solaris-button-border-color: var(--solaris-success-border);
281
- --solaris-button-hover-color: var(--solaris-success-on-solid);
282
- --solaris-button-active-color: var(--solaris-success-on-solid);
283
- --solaris-button-focus-ring-color: var(--solaris-success-base);
284
- --solaris-button-hover-background: var(--solaris-success-hover);
285
- --solaris-button-active-background: var(--solaris-success-active);
344
+ --solaris-button-hover-color: var(--solaris-success-foreground);
345
+ --solaris-button-active-color: var(--solaris-success-foreground);
346
+ --solaris-button-focus-ring-color: var(--solaris-success-solid);
347
+ --solaris-button-hover-border-color: var(--solaris-success-solid);
348
+ --solaris-button-active-border-color: var(--solaris-success-solid);
349
+ --solaris-button-hover-background: var(--solaris-success-soft);
350
+ --solaris-button-active-background: var(--solaris-success-soft);
286
351
  }
287
352
 
288
353
  [solaris-button][data-color='success'][data-appearance='ghost'] {
289
- --solaris-button-color: var(--solaris-success-text);
290
- --solaris-button-hover-color: var(--solaris-success-on-solid);
291
- --solaris-button-active-color: var(--solaris-success-on-solid);
292
- --solaris-button-focus-ring-color: var(--solaris-success-base);
293
- --solaris-button-hover-background: var(--solaris-success-hover);
294
- --solaris-button-active-background: var(--solaris-success-active);
354
+ --solaris-button-color: var(--solaris-success-foreground);
355
+ --solaris-button-hover-color: var(--solaris-success-foreground);
356
+ --solaris-button-active-color: var(--solaris-success-foreground);
357
+ --solaris-button-focus-ring-color: var(--solaris-success-solid);
358
+ --solaris-button-hover-background: var(--solaris-success-soft);
359
+ --solaris-button-active-background: var(--solaris-success-soft);
295
360
  }
296
361
 
297
362
  [solaris-button][data-color='success'][data-appearance='tonal'] {
298
- --solaris-button-color: var(--solaris-success-text);
299
- --solaris-button-background: var(--solaris-success-surface);
363
+ --solaris-button-color: var(--solaris-success-foreground);
364
+ --solaris-button-background: var(--solaris-success-soft);
300
365
  --solaris-button-border-color: var(--solaris-success-border);
301
- --solaris-button-hover-color: var(--solaris-success-on-solid);
302
- --solaris-button-active-color: var(--solaris-success-on-solid);
303
- --solaris-button-focus-ring-color: var(--solaris-success-base);
304
- --solaris-button-hover-background: var(--solaris-success-hover);
305
- --solaris-button-hover-border-color: var(--solaris-success-base);
306
- --solaris-button-active-background: var(--solaris-success-active);
366
+ --solaris-button-hover-color: var(--solaris-success-foreground);
367
+ --solaris-button-active-color: var(--solaris-success-foreground);
368
+ --solaris-button-focus-ring-color: var(--solaris-success-solid);
369
+ --solaris-button-hover-background: var(--solaris-success-soft);
370
+ --solaris-button-hover-border-color: var(--solaris-success-solid);
371
+ --solaris-button-active-background: var(--solaris-success-soft);
372
+ --solaris-button-active-border-color: var(--solaris-success-solid);
307
373
  }
308
374
 
309
375
  [solaris-button][data-color='success'][data-appearance='surface'] {
310
- --solaris-button-color: var(--solaris-success-text);
311
- --solaris-button-background: var(--solaris-success-surface);
312
- --solaris-button-hover-color: var(--solaris-success-on-solid);
313
- --solaris-button-active-color: var(--solaris-success-on-solid);
314
- --solaris-button-focus-ring-color: var(--solaris-success-base);
315
- --solaris-button-hover-background: var(--solaris-success-hover);
316
- --solaris-button-active-background: var(--solaris-success-active);
376
+ --solaris-button-color: var(--solaris-success-foreground);
377
+ --solaris-button-background: var(--solaris-success-soft);
378
+ --solaris-button-hover-color: var(--solaris-success-foreground);
379
+ --solaris-button-active-color: var(--solaris-success-foreground);
380
+ --solaris-button-focus-ring-color: var(--solaris-success-solid);
381
+ --solaris-button-hover-background: var(--solaris-success-soft);
382
+ --solaris-button-active-background: var(--solaris-success-soft);
383
+ --solaris-button-active-border-color: var(--solaris-success-border);
317
384
  }
318
385
 
319
386
  [solaris-button][data-color='warning'][data-appearance='solid'] {
320
387
  --solaris-button-color: var(--solaris-warning-on-solid);
321
- --solaris-button-background: var(--solaris-warning-base);
388
+ --solaris-button-background: var(--solaris-warning-solid);
322
389
  --solaris-button-border-color: var(--solaris-warning-border);
323
390
  --solaris-button-hover-color: var(--solaris-warning-on-solid);
324
391
  --solaris-button-active-color: var(--solaris-warning-on-solid);
325
- --solaris-button-focus-ring-color: var(--solaris-warning-base);
326
- --solaris-button-hover-background: var(--solaris-warning-hover);
327
- --solaris-button-active-background: var(--solaris-warning-active);
392
+ --solaris-button-focus-ring-color: var(--solaris-warning-solid);
393
+ --solaris-button-hover-background: var(--solaris-warning-solid-hover);
394
+ --solaris-button-active-background: var(--solaris-warning-solid-active);
328
395
  }
329
396
 
330
397
  [solaris-button][data-color='warning'][data-appearance='outline'] {
331
- --solaris-button-color: var(--solaris-warning-text);
398
+ --solaris-button-color: var(--solaris-warning-foreground);
332
399
  --solaris-button-border-color: var(--solaris-warning-border);
333
- --solaris-button-hover-color: var(--solaris-warning-on-solid);
334
- --solaris-button-active-color: var(--solaris-warning-on-solid);
335
- --solaris-button-focus-ring-color: var(--solaris-warning-base);
336
- --solaris-button-hover-background: var(--solaris-warning-hover);
337
- --solaris-button-active-background: var(--solaris-warning-active);
400
+ --solaris-button-hover-color: var(--solaris-warning-foreground);
401
+ --solaris-button-active-color: var(--solaris-warning-foreground);
402
+ --solaris-button-focus-ring-color: var(--solaris-warning-solid);
403
+ --solaris-button-hover-border-color: var(--solaris-warning-solid);
404
+ --solaris-button-active-border-color: var(--solaris-warning-solid);
405
+ --solaris-button-hover-background: var(--solaris-warning-soft);
406
+ --solaris-button-active-background: var(--solaris-warning-soft);
338
407
  }
339
408
 
340
409
  [solaris-button][data-color='warning'][data-appearance='ghost'] {
341
- --solaris-button-color: var(--solaris-warning-text);
342
- --solaris-button-hover-color: var(--solaris-warning-on-solid);
343
- --solaris-button-active-color: var(--solaris-warning-on-solid);
344
- --solaris-button-focus-ring-color: var(--solaris-warning-base);
345
- --solaris-button-hover-background: var(--solaris-warning-hover);
346
- --solaris-button-active-background: var(--solaris-warning-active);
410
+ --solaris-button-color: var(--solaris-warning-foreground);
411
+ --solaris-button-hover-color: var(--solaris-warning-foreground);
412
+ --solaris-button-active-color: var(--solaris-warning-foreground);
413
+ --solaris-button-focus-ring-color: var(--solaris-warning-solid);
414
+ --solaris-button-hover-background: var(--solaris-warning-soft);
415
+ --solaris-button-active-background: var(--solaris-warning-soft);
347
416
  }
348
417
 
349
418
  [solaris-button][data-color='warning'][data-appearance='tonal'] {
350
- --solaris-button-color: var(--solaris-warning-text);
351
- --solaris-button-background: var(--solaris-warning-surface);
419
+ --solaris-button-color: var(--solaris-warning-foreground);
420
+ --solaris-button-background: var(--solaris-warning-soft);
352
421
  --solaris-button-border-color: var(--solaris-warning-border);
353
- --solaris-button-hover-color: var(--solaris-warning-on-solid);
354
- --solaris-button-active-color: var(--solaris-warning-on-solid);
355
- --solaris-button-focus-ring-color: var(--solaris-warning-base);
356
- --solaris-button-hover-background: var(--solaris-warning-hover);
357
- --solaris-button-hover-border-color: var(--solaris-warning-base);
358
- --solaris-button-active-background: var(--solaris-warning-active);
422
+ --solaris-button-hover-color: var(--solaris-warning-foreground);
423
+ --solaris-button-active-color: var(--solaris-warning-foreground);
424
+ --solaris-button-focus-ring-color: var(--solaris-warning-solid);
425
+ --solaris-button-hover-background: var(--solaris-warning-soft);
426
+ --solaris-button-hover-border-color: var(--solaris-warning-solid);
427
+ --solaris-button-active-background: var(--solaris-warning-soft);
428
+ --solaris-button-active-border-color: var(--solaris-warning-solid);
359
429
  }
360
430
 
361
431
  [solaris-button][data-color='warning'][data-appearance='surface'] {
362
- --solaris-button-color: var(--solaris-warning-text);
363
- --solaris-button-hover-color: var(--solaris-warning-text);
364
- --solaris-button-active-color: var(--solaris-warning-text);
365
- --solaris-button-background: var(--solaris-warning-surface);
366
- --solaris-button-focus-ring-color: var(--solaris-warning-base);
367
- --solaris-button-hover-background: var(--solaris-warning-hover);
368
- --solaris-button-active-background: var(--solaris-warning-active);
432
+ --solaris-button-color: var(--solaris-warning-foreground);
433
+ --solaris-button-hover-color: var(--solaris-warning-foreground);
434
+ --solaris-button-active-color: var(--solaris-warning-foreground);
435
+ --solaris-button-background: var(--solaris-warning-soft);
436
+ --solaris-button-focus-ring-color: var(--solaris-warning-solid);
437
+ --solaris-button-hover-background: var(--solaris-warning-soft);
438
+ --solaris-button-active-background: var(--solaris-warning-soft);
439
+ --solaris-button-active-border-color: var(--solaris-warning-border);
369
440
  }
370
441
 
371
442
  [solaris-button][data-color='danger'][data-appearance='solid'] {
372
443
  --solaris-button-color: var(--solaris-danger-on-solid);
373
- --solaris-button-background: var(--solaris-danger-base);
444
+ --solaris-button-background: var(--solaris-danger-solid);
374
445
  --solaris-button-border-color: var(--solaris-danger-border);
375
446
  --solaris-button-hover-color: var(--solaris-danger-on-solid);
376
447
  --solaris-button-active-color: var(--solaris-danger-on-solid);
377
- --solaris-button-focus-ring-color: var(--solaris-danger-base);
378
- --solaris-button-hover-background: var(--solaris-danger-hover);
379
- --solaris-button-active-background: var(--solaris-danger-active);
448
+ --solaris-button-focus-ring-color: var(--solaris-danger-solid);
449
+ --solaris-button-hover-background: var(--solaris-danger-solid-hover);
450
+ --solaris-button-active-background: var(--solaris-danger-solid-active);
380
451
  }
381
452
 
382
453
  [solaris-button][data-color='danger'][data-appearance='outline'] {
383
- --solaris-button-color: var(--solaris-danger-text);
384
- --solaris-button-hover-color: var(--solaris-danger-on-solid);
385
- --solaris-button-active-color: var(--solaris-danger-on-solid);
454
+ --solaris-button-color: var(--solaris-danger-foreground);
455
+ --solaris-button-hover-color: var(--solaris-danger-foreground);
456
+ --solaris-button-active-color: var(--solaris-danger-foreground);
386
457
  --solaris-button-border-color: var(--solaris-danger-border);
387
- --solaris-button-focus-ring-color: var(--solaris-danger-base);
388
- --solaris-button-hover-background: var(--solaris-danger-hover);
389
- --solaris-button-active-background: var(--solaris-danger-active);
458
+ --solaris-button-focus-ring-color: var(--solaris-danger-solid);
459
+ --solaris-button-hover-border-color: var(--solaris-danger-solid);
460
+ --solaris-button-active-border-color: var(--solaris-danger-solid);
461
+ --solaris-button-hover-background: var(--solaris-danger-soft);
462
+ --solaris-button-active-background: var(--solaris-danger-soft);
390
463
  }
391
464
 
392
465
  [solaris-button][data-color='danger'][data-appearance='ghost'] {
393
- --solaris-button-color: var(--solaris-danger-text);
394
- --solaris-button-hover-color: var(--solaris-danger-on-solid);
395
- --solaris-button-active-color: var(--solaris-danger-on-solid);
396
- --solaris-button-focus-ring-color: var(--solaris-danger-base);
397
- --solaris-button-hover-background: var(--solaris-danger-hover);
398
- --solaris-button-active-background: var(--solaris-danger-active);
466
+ --solaris-button-color: var(--solaris-danger-foreground);
467
+ --solaris-button-hover-color: var(--solaris-danger-foreground);
468
+ --solaris-button-active-color: var(--solaris-danger-foreground);
469
+ --solaris-button-focus-ring-color: var(--solaris-danger-solid);
470
+ --solaris-button-hover-background: var(--solaris-danger-soft);
471
+ --solaris-button-active-background: var(--solaris-danger-soft);
399
472
  }
400
473
 
401
474
  [solaris-button][data-color='danger'][data-appearance='tonal'] {
402
- --solaris-button-color: var(--solaris-danger-text);
403
- --solaris-button-hover-color: var(--solaris-danger-on-solid);
404
- --solaris-button-active-color: var(--solaris-danger-on-solid);
405
- --solaris-button-background: var(--solaris-danger-surface);
475
+ --solaris-button-color: var(--solaris-danger-foreground);
476
+ --solaris-button-hover-color: var(--solaris-danger-foreground);
477
+ --solaris-button-active-color: var(--solaris-danger-foreground);
478
+ --solaris-button-background: var(--solaris-danger-soft);
406
479
  --solaris-button-border-color: var(--solaris-danger-border);
407
- --solaris-button-focus-ring-color: var(--solaris-danger-base);
408
- --solaris-button-hover-background: var(--solaris-danger-hover);
409
- --solaris-button-hover-border-color: var(--solaris-danger-base);
410
- --solaris-button-active-background: var(--solaris-danger-active);
480
+ --solaris-button-focus-ring-color: var(--solaris-danger-solid);
481
+ --solaris-button-hover-background: var(--solaris-danger-soft);
482
+ --solaris-button-hover-border-color: var(--solaris-danger-solid);
483
+ --solaris-button-active-background: var(--solaris-danger-soft);
484
+ --solaris-button-active-border-color: var(--solaris-danger-solid);
411
485
  }
412
486
 
413
487
  [solaris-button][data-color='danger'][data-appearance='surface'] {
414
- --solaris-button-color: var(--solaris-danger-text);
415
- --solaris-button-hover-color: var(--solaris-danger-on-solid);
416
- --solaris-button-active-color: var(--solaris-danger-on-solid);
417
- --solaris-button-background: var(--solaris-danger-surface);
418
- --solaris-button-focus-ring-color: var(--solaris-danger-base);
419
- --solaris-button-hover-background: var(--solaris-danger-hover);
420
- --solaris-button-active-background: var(--solaris-danger-active);
488
+ --solaris-button-color: var(--solaris-danger-foreground);
489
+ --solaris-button-hover-color: var(--solaris-danger-foreground);
490
+ --solaris-button-active-color: var(--solaris-danger-foreground);
491
+ --solaris-button-background: var(--solaris-danger-soft);
492
+ --solaris-button-focus-ring-color: var(--solaris-danger-solid);
493
+ --solaris-button-hover-background: var(--solaris-danger-soft);
494
+ --solaris-button-active-background: var(--solaris-danger-soft);
495
+ --solaris-button-active-border-color: var(--solaris-danger-border);
421
496
  }
422
497
 
423
498
  [solaris-button][data-color='info'][data-appearance='solid'] {
424
- --solaris-button-color: var(--solaris-info-text);
425
- --solaris-button-background: var(--solaris-info-base);
426
- --solaris-button-hover-color: var(--solaris-info-text);
427
- --solaris-button-active-color: var(--solaris-info-text);
428
- --solaris-button-focus-ring-color: var(--solaris-info-base);
429
- --solaris-button-hover-background: var(--solaris-info-hover);
430
- --solaris-button-active-background: var(--solaris-info-active);
499
+ --solaris-button-color: var(--solaris-info-on-solid);
500
+ --solaris-button-background: var(--solaris-info-solid);
501
+ --solaris-button-hover-color: var(--solaris-info-on-solid);
502
+ --solaris-button-active-color: var(--solaris-info-on-solid);
503
+ --solaris-button-focus-ring-color: var(--solaris-info-solid);
504
+ --solaris-button-hover-background: var(--solaris-info-solid-hover);
505
+ --solaris-button-active-background: var(--solaris-info-solid-active);
431
506
  }
432
507
 
433
508
  [solaris-button][data-color='info'][data-appearance='outline'] {
434
- --solaris-button-color: var(--solaris-info-text);
435
- --solaris-button-hover-color: var(--solaris-info-text);
436
- --solaris-button-active-color: var(--solaris-info-text);
509
+ --solaris-button-color: var(--solaris-info-foreground);
510
+ --solaris-button-hover-color: var(--solaris-info-foreground);
511
+ --solaris-button-active-color: var(--solaris-info-foreground);
437
512
  --solaris-button-border-color: var(--solaris-info-border);
438
- --solaris-button-focus-ring-color: var(--solaris-info-base);
439
- --solaris-button-hover-background: var(--solaris-info-hover);
440
- --solaris-button-active-background: var(--solaris-info-active);
513
+ --solaris-button-focus-ring-color: var(--solaris-info-solid);
514
+ --solaris-button-hover-border-color: var(--solaris-info-solid);
515
+ --solaris-button-active-border-color: var(--solaris-info-solid);
516
+ --solaris-button-hover-background: var(--solaris-info-soft);
517
+ --solaris-button-active-background: var(--solaris-info-soft);
441
518
  }
442
519
 
443
520
  [solaris-button][data-color='info'][data-appearance='ghost'] {
444
- --solaris-button-color: var(--solaris-info-text);
445
- --solaris-button-hover-color: var(--solaris-info-text);
446
- --solaris-button-active-color: var(--solaris-info-text);
447
- --solaris-button-focus-ring-color: var(--solaris-info-base);
448
- --solaris-button-hover-background: var(--solaris-info-hover);
449
- --solaris-button-active-background: var(--solaris-info-active);
521
+ --solaris-button-color: var(--solaris-info-foreground);
522
+ --solaris-button-hover-color: var(--solaris-info-foreground);
523
+ --solaris-button-active-color: var(--solaris-info-foreground);
524
+ --solaris-button-focus-ring-color: var(--solaris-info-solid);
525
+ --solaris-button-hover-background: var(--solaris-info-soft);
526
+ --solaris-button-active-background: var(--solaris-info-soft);
450
527
  }
451
528
 
452
529
  [solaris-button][data-color='info'][data-appearance='tonal'] {
453
- --solaris-button-color: var(--solaris-info-text);
454
- --solaris-button-hover-color: var(--solaris-info-text);
455
- --solaris-button-active-color: var(--solaris-info-text);
456
- --solaris-button-background: var(--solaris-info-surface);
530
+ --solaris-button-color: var(--solaris-info-foreground);
531
+ --solaris-button-hover-color: var(--solaris-info-foreground);
532
+ --solaris-button-active-color: var(--solaris-info-foreground);
533
+ --solaris-button-background: var(--solaris-info-soft);
457
534
  --solaris-button-border-color: var(--solaris-info-border);
458
- --solaris-button-focus-ring-color: var(--solaris-info-base);
459
- --solaris-button-hover-background: var(--solaris-info-hover);
460
- --solaris-button-hover-border-color: var(--solaris-info-base);
461
- --solaris-button-active-background: var(--solaris-info-active);
535
+ --solaris-button-focus-ring-color: var(--solaris-info-solid);
536
+ --solaris-button-hover-background: var(--solaris-info-soft);
537
+ --solaris-button-hover-border-color: var(--solaris-info-solid);
538
+ --solaris-button-active-background: var(--solaris-info-soft);
539
+ --solaris-button-active-border-color: var(--solaris-info-solid);
462
540
  }
463
541
 
464
542
  [solaris-button][data-color='info'][data-appearance='surface'] {
465
- --solaris-button-color: var(--solaris-info-text);
466
- --solaris-button-hover-color: var(--solaris-info-text);
467
- --solaris-button-active-color: var(--solaris-info-text);
468
- --solaris-button-background: var(--solaris-info-surface);
469
- --solaris-button-focus-ring-color: var(--solaris-info-base);
470
- --solaris-button-hover-background: var(--solaris-info-hover);
471
- --solaris-button-active-background: var(--solaris-info-active);
543
+ --solaris-button-color: var(--solaris-info-foreground);
544
+ --solaris-button-hover-color: var(--solaris-info-foreground);
545
+ --solaris-button-active-color: var(--solaris-info-foreground);
546
+ --solaris-button-background: var(--solaris-info-soft);
547
+ --solaris-button-focus-ring-color: var(--solaris-info-solid);
548
+ --solaris-button-hover-background: var(--solaris-info-soft);
549
+ --solaris-button-active-background: var(--solaris-info-soft);
550
+ --solaris-button-active-border-color: var(--solaris-info-border);
472
551
  }
473
552
 
474
553
  [solaris-button][data-color='custom'] {
@@ -484,68 +563,173 @@
484
563
  --solaris-button-active-border-color: var(
485
564
  --solaris-button-custom-active-border-color
486
565
  );
487
- --solaris-button-color: var(
488
- --solaris-button-custom-color,
489
- var(--solaris-text-default)
490
- );
491
- --solaris-button-background: var(
492
- --solaris-button-custom-background,
493
- var(--solaris-surface-base)
494
- );
495
- --solaris-button-focus-ring-color: var(
496
- --solaris-button-custom-color,
497
- var(--solaris-text-default)
498
- );
499
- --solaris-button-border-color: var(
500
- --solaris-button-custom-border-color,
501
- var(--solaris-border-default)
502
- );
503
- --solaris-button-hover-color: var(
504
- --solaris-button-custom-hover-color,
505
- var(--solaris-button-custom-color, var(--solaris-text-default))
506
- );
507
- --solaris-button-active-color: var(
508
- --solaris-button-custom-active-color,
509
- var(--solaris-button-custom-color, var(--solaris-text-default))
510
- );
566
+ --solaris-button-color: var(--solaris-button-custom-color);
567
+ --solaris-button-background: var(--solaris-button-custom-background);
568
+ --solaris-button-focus-ring-color: var(--solaris-button-custom-color);
569
+ --solaris-button-border-color: var(--solaris-button-custom-border-color);
570
+ --solaris-button-hover-color: var(--solaris-button-custom-hover-color);
571
+ --solaris-button-active-color: var(--solaris-button-custom-active-color);
511
572
  }
512
573
 
513
- [solaris-button][data-density='compact'] {
574
+ [solaris-button][data-size='sm'][data-density='compact'] {
514
575
  --solaris-button-gap: var(--solaris-density-gap-md);
515
- --solaris-button-height: var(--solaris-density-min-height);
576
+ --solaris-button-padding-y: var(--solaris-spacing-3);
577
+ --solaris-button-min-width: var(--solaris-spacing-16);
578
+ --solaris-button-icon-size: var(--solaris-font-size-xs);
579
+ --solaris-button-font-size: var(--solaris-font-size-xs);
516
580
  --solaris-button-padding-x: var(--solaris-density-padding-lg);
517
- --solaris-button-padding-y: var(--solaris-spacing-1);
581
+ --solaris-button-font-weight: var(--solaris-font-weight-medium);
582
+ --solaris-button-height: var(--solaris-control-height-compact-sm);
583
+ }
584
+
585
+ [solaris-button][data-size='md'][data-density='compact'] {
586
+ --solaris-button-gap: var(--solaris-density-gap-md);
587
+ --solaris-button-padding-y: var(--solaris-spacing-3);
588
+ --solaris-button-min-width: var(--solaris-spacing-16);
589
+ --solaris-button-icon-size: var(--solaris-font-size-sm);
590
+ --solaris-button-font-size: var(--solaris-font-size-sm);
591
+ --solaris-button-padding-x: var(--solaris-density-padding-lg);
592
+ --solaris-button-font-weight: var(--solaris-font-weight-medium);
593
+ --solaris-button-height: var(--solaris-control-height-compact-md);
594
+ }
595
+
596
+ [solaris-button][data-size='lg'][data-density='compact'] {
597
+ --solaris-button-gap: var(--solaris-density-gap-md);
598
+ --solaris-button-padding-y: var(--solaris-spacing-3);
518
599
  --solaris-button-min-width: var(--solaris-spacing-16);
519
- --solaris-button-icon-size: var(--solaris-density-font-size);
520
- --solaris-button-font-size: var(--solaris-density-font-size);
600
+ --solaris-button-icon-size: var(--solaris-font-size-sm);
601
+ --solaris-button-font-size: var(--solaris-font-size-md);
602
+ --solaris-button-padding-x: var(--solaris-density-padding-lg);
521
603
  --solaris-button-font-weight: var(--solaris-font-weight-medium);
604
+ --solaris-button-height: var(--solaris-control-height-compact-lg);
522
605
  }
523
606
 
524
- [solaris-button][data-density='normal'] {
607
+ [solaris-button][data-size='sm'][data-density='normal'] {
525
608
  --solaris-button-gap: var(--solaris-density-gap-md);
526
- --solaris-button-height: var(--solaris-density-min-height);
609
+ --solaris-button-padding-y: var(--solaris-spacing-4);
610
+ --solaris-button-min-width: var(--solaris-spacing-16);
611
+ --solaris-button-icon-size: var(--solaris-font-size-sm);
612
+ --solaris-button-font-size: var(--solaris-font-size-xs);
527
613
  --solaris-button-padding-x: var(--solaris-density-padding-lg);
528
- --solaris-button-padding-y: var(--solaris-spacing-2);
529
- --solaris-button-min-width: var(--solaris-spacing-20);
530
- --solaris-button-icon-size: var(--solaris-density-font-size);
531
- --solaris-button-font-size: var(--solaris-density-font-size);
532
614
  --solaris-button-font-weight: var(--solaris-font-weight-medium);
615
+ --solaris-button-height: var(--solaris-control-height-normal-sm);
533
616
  }
534
617
 
535
- [solaris-button][data-density='comfortable'] {
618
+ [solaris-button][data-size='md'][data-density='normal'] {
536
619
  --solaris-button-gap: var(--solaris-density-gap-md);
537
- --solaris-button-height: var(--solaris-density-min-height);
620
+ --solaris-button-padding-y: var(--solaris-spacing-4);
621
+ --solaris-button-min-width: var(--solaris-spacing-16);
622
+ --solaris-button-icon-size: var(--solaris-font-size-sm);
623
+ --solaris-button-font-size: var(--solaris-font-size-sm);
624
+ --solaris-button-padding-x: var(--solaris-density-padding-lg);
625
+ --solaris-button-font-weight: var(--solaris-font-weight-medium);
626
+ --solaris-button-height: var(--solaris-control-height-normal-md);
627
+ }
628
+
629
+ [solaris-button][data-size='lg'][data-density='normal'] {
630
+ --solaris-button-gap: var(--solaris-density-gap-md);
631
+ --solaris-button-padding-y: var(--solaris-spacing-4);
632
+ --solaris-button-min-width: var(--solaris-spacing-16);
633
+ --solaris-button-icon-size: var(--solaris-font-size-sm);
634
+ --solaris-button-font-size: var(--solaris-font-size-md);
635
+ --solaris-button-padding-x: var(--solaris-density-padding-lg);
636
+ --solaris-button-font-weight: var(--solaris-font-weight-medium);
637
+ --solaris-button-height: var(--solaris-control-height-normal-lg);
638
+ }
639
+
640
+ [solaris-button][data-size='sm'][data-density='comfortable'] {
641
+ --solaris-button-gap: var(--solaris-density-gap-md);
642
+ --solaris-button-padding-y: var(--solaris-spacing-4);
643
+ --solaris-button-min-width: var(--solaris-spacing-17);
644
+ --solaris-button-icon-size: var(--solaris-font-size-sm);
645
+ --solaris-button-font-size: var(--solaris-font-size-xs);
538
646
  --solaris-button-padding-x: var(--solaris-density-padding-lg);
539
- --solaris-button-padding-y: var(--solaris-spacing-2);
540
- --solaris-button-min-width: var(--solaris-spacing-24);
541
- --solaris-button-icon-size: var(--solaris-density-font-size);
542
- --solaris-button-font-size: var(--solaris-density-font-size);
543
647
  --solaris-button-font-weight: var(--solaris-font-weight-semibold);
648
+ --solaris-button-height: var(--solaris-control-height-comfortable-sm);
649
+ }
650
+
651
+ [solaris-button][data-size='md'][data-density='comfortable'] {
652
+ --solaris-button-gap: var(--solaris-density-gap-md);
653
+ --solaris-button-padding-y: var(--solaris-spacing-4);
654
+ --solaris-button-min-width: var(--solaris-spacing-17);
655
+ --solaris-button-icon-size: var(--solaris-font-size-sm);
656
+ --solaris-button-font-size: var(--solaris-font-size-sm);
657
+ --solaris-button-padding-x: var(--solaris-density-padding-lg);
658
+ --solaris-button-font-weight: var(--solaris-font-weight-semibold);
659
+ --solaris-button-height: var(--solaris-control-height-comfortable-md);
660
+ }
661
+
662
+ [solaris-button][data-size='lg'][data-density='comfortable'] {
663
+ --solaris-button-gap: var(--solaris-density-gap-md);
664
+ --solaris-button-padding-y: var(--solaris-spacing-4);
665
+ --solaris-button-min-width: var(--solaris-spacing-17);
666
+ --solaris-button-icon-size: var(--solaris-font-size-sm);
667
+ --solaris-button-font-size: var(--solaris-font-size-md);
668
+ --solaris-button-padding-x: var(--solaris-density-padding-lg);
669
+ --solaris-button-font-weight: var(--solaris-font-weight-semibold);
670
+ --solaris-button-height: var(--solaris-control-height-comfortable-lg);
671
+ }
672
+
673
+ [solaris-button][data-size='sm']:not([data-density]) {
674
+ --solaris-button-gap: var(--solaris-density-gap-md);
675
+ --solaris-button-padding-y: var(--solaris-spacing-4);
676
+ --solaris-button-min-width: var(--solaris-spacing-16);
677
+ --solaris-button-icon-size: var(--solaris-font-size-sm);
678
+ --solaris-button-font-size: var(--solaris-font-size-xs);
679
+ --solaris-button-padding-x: var(--solaris-density-padding-lg);
680
+ --solaris-button-font-weight: var(--solaris-font-weight-medium);
681
+ --solaris-button-height: var(--solaris-control-height-normal-sm);
682
+ }
683
+
684
+ [solaris-button][data-size='md']:not([data-density]) {
685
+ --solaris-button-gap: var(--solaris-density-gap-md);
686
+ --solaris-button-padding-y: var(--solaris-spacing-4);
687
+ --solaris-button-min-width: var(--solaris-spacing-16);
688
+ --solaris-button-icon-size: var(--solaris-font-size-sm);
689
+ --solaris-button-font-size: var(--solaris-font-size-sm);
690
+ --solaris-button-padding-x: var(--solaris-density-padding-lg);
691
+ --solaris-button-font-weight: var(--solaris-font-weight-medium);
692
+ --solaris-button-height: var(--solaris-control-height-normal-md);
693
+ }
694
+
695
+ [solaris-button][data-size='lg']:not([data-density]) {
696
+ --solaris-button-gap: var(--solaris-density-gap-md);
697
+ --solaris-button-padding-y: var(--solaris-spacing-4);
698
+ --solaris-button-min-width: var(--solaris-spacing-16);
699
+ --solaris-button-icon-size: var(--solaris-font-size-sm);
700
+ --solaris-button-font-size: var(--solaris-font-size-md);
701
+ --solaris-button-padding-x: var(--solaris-density-padding-lg);
702
+ --solaris-button-font-weight: var(--solaris-font-weight-medium);
703
+ --solaris-button-height: var(--solaris-control-height-normal-lg);
704
+ }
705
+
706
+ [solaris-button][data-appearance='surface']:not([data-color='neutral']):hover {
707
+ --solaris-button-border-width: var(--solaris-border-width-sm);
708
+ }
709
+
710
+ [solaris-button][data-color='primary'][data-appearance='surface']:hover {
711
+ --solaris-button-hover-border-color: var(--solaris-primary-border);
712
+ }
713
+
714
+ [solaris-button][data-color='success'][data-appearance='surface']:hover {
715
+ --solaris-button-hover-border-color: var(--solaris-success-border);
716
+ }
717
+
718
+ [solaris-button][data-color='warning'][data-appearance='surface']:hover {
719
+ --solaris-button-hover-border-color: var(--solaris-warning-border);
720
+ }
721
+
722
+ [solaris-button][data-color='danger'][data-appearance='surface']:hover {
723
+ --solaris-button-hover-border-color: var(--solaris-danger-border);
724
+ }
725
+
726
+ [solaris-button][data-color='info'][data-appearance='surface']:hover {
727
+ --solaris-button-hover-border-color: var(--solaris-info-border);
544
728
  }
545
729
 
546
730
  [solaris-button][data-shape='wide'] {
547
- --solaris-button-padding-x: calc(var(--solaris-density-padding-lg) * 2.5);
548
- --solaris-button-min-width: calc(var(--solaris-density-min-height) * 3);
731
+ min-width: calc(var(--solaris-density-min-height) * 3);
732
+ padding-inline: calc(var(--solaris-density-padding-lg) * 2.5);
549
733
  }
550
734
 
551
735
  [solaris-button][data-radius='none'] {
@@ -567,3 +751,43 @@
567
751
  [solaris-button][data-radius='full'] {
568
752
  --solaris-button-radius: var(--solaris-radius-full);
569
753
  }
754
+
755
+ [solaris-button][data-group='horizontal'][data-appearance] {
756
+ --solaris-button-radius: 0;
757
+ --solaris-button-border-width: 0;
758
+ --solaris-button-border-color: transparent;
759
+ --solaris-button-hover-border-color: transparent;
760
+ --solaris-button-active-border-color: transparent;
761
+ --solaris-button-group-item-shadow: inset
762
+ calc(-1 * var(--solaris-border-width-sm)) 0 0 0
763
+ var(--solaris-button-group-separator-in-use);
764
+ }
765
+
766
+ [solaris-button][data-group='vertical'][data-appearance] {
767
+ --solaris-button-radius: 0;
768
+ --solaris-button-border-width: 0;
769
+ --solaris-button-border-color: transparent;
770
+ --solaris-button-hover-border-color: transparent;
771
+ --solaris-button-active-border-color: transparent;
772
+ --solaris-button-group-item-shadow: inset 0
773
+ calc(-1 * var(--solaris-border-width-sm)) 0 0
774
+ var(--solaris-button-group-separator-in-use);
775
+ }
776
+
777
+ [solaris-button][data-group]:hover:not([disabled], [aria-disabled='true']) {
778
+ filter: brightness(1.07);
779
+ }
780
+
781
+ @media (prefers-reduced-motion: reduce) {
782
+ [solaris-button]:active,
783
+ [solaris-button][data-active],
784
+ [solaris-button][data-pressed] {
785
+ transform: none;
786
+ }
787
+ }
788
+
789
+ [data-reduced-motion='true'] [solaris-button]:active,
790
+ [data-reduced-motion='true'] [solaris-button][data-active],
791
+ [data-reduced-motion='true'] [solaris-button][data-pressed] {
792
+ transform: none;
793
+ }