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