@educarehq/solaris-ui 0.3.2 → 0.3.3

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 (36) hide show
  1. package/package.json +3 -1
  2. package/styles/_button.scss +510 -510
  3. package/styles/_dropdown-menu.scss +72 -72
  4. package/styles/_icon-button.scss +481 -481
  5. package/styles/_index.scss +27 -19
  6. package/styles/_input.scss +255 -255
  7. package/styles/_popover.scss +73 -73
  8. package/styles/_textarea.scss +242 -0
  9. package/styles/_theme.scss +46 -46
  10. package/styles/_toast.scss +9 -9
  11. package/styles/_tooltip.scss +3 -3
  12. package/styles/token/border/_border.scss +5 -5
  13. package/styles/token/border/_index.scss +1 -1
  14. package/styles/token/color/_dark.scss +78 -78
  15. package/styles/token/color/_high-contrast.scss +27 -27
  16. package/styles/token/color/_index.scss +3 -3
  17. package/styles/token/color/_light.scss +69 -69
  18. package/styles/token/density/_comfortable.scss +15 -15
  19. package/styles/token/density/_compact.scss +15 -15
  20. package/styles/token/density/_index.scss +2 -2
  21. package/styles/token/motion/_index.scss +2 -2
  22. package/styles/token/motion/_motion.scss +15 -15
  23. package/styles/token/motion/_reduced-motion.scss +15 -15
  24. package/styles/token/opacity/_index.scss +1 -1
  25. package/styles/token/opacity/_opacity.scss +4 -4
  26. package/styles/token/radius/_index.scss +1 -1
  27. package/styles/token/radius/_radius.scss +8 -8
  28. package/styles/token/shadow/_index.scss +1 -1
  29. package/styles/token/shadow/_shadow.scss +26 -26
  30. package/styles/token/spacing/_index.scss +1 -1
  31. package/styles/token/spacing/_spacing.scss +15 -15
  32. package/styles/token/typography/_font-family.scss +13 -13
  33. package/styles/token/typography/_index.scss +2 -2
  34. package/styles/token/typography/_typography.scss +25 -25
  35. package/styles/token/z-index/_index.scss +1 -1
  36. package/styles/token/z-index/_z-index.scss +10 -10
package/styles/_icon-button.scss CHANGED
@@ -1,481 +1,481 @@
1
- [solaris-icon-button] {
2
- --solaris-icon-button-size: initial;
3
- --solaris-icon-button-color: initial;
4
- --solaris-icon-button-radius: initial;
5
- --solaris-icon-button-background: initial;
6
- --solaris-icon-button-border-color: initial;
7
- --solaris-icon-button-border-width: initial;
8
- --solaris-icon-button-disabled-opacity: 0.5;
9
- --solaris-icon-button-focus-ring-color: initial;
10
- --solaris-icon-button-hover-background: initial;
11
- --solaris-icon-button-active-background: initial;
12
- --solaris-icon-button-hover-border-color: initial;
13
- --solaris-icon-button-active-border-color: initial;
14
-
15
- --solaris-icon-button-custom-color: initial;
16
- --solaris-icon-button-custom-background: initial;
17
- --solaris-icon-button-custom-border-color: initial;
18
- --solaris-icon-button-custom-hover-background: initial;
19
- --solaris-icon-button-custom-hover-border-color: initial;
20
- --solaris-icon-button-custom-active-background: initial;
21
- --solaris-icon-button-custom-active-border-color: initial;
22
-
23
- padding: 0;
24
- flex-shrink: 0;
25
- line-height: 1;
26
- cursor: pointer;
27
- user-select: none;
28
- position: relative;
29
- align-items: center;
30
- display: inline-flex;
31
- text-decoration: none;
32
- box-sizing: border-box;
33
- justify-content: center;
34
- width: var(--solaris-icon-button-size);
35
- height: var(--solaris-icon-button-size);
36
- color: var(--solaris-icon-button-color);
37
- min-width: var(--solaris-icon-button-size);
38
- min-height: var(--solaris-icon-button-size);
39
- border-radius: var(--solaris-icon-button-radius);
40
- background: var(--solaris-icon-button-background);
41
- font-family: var(--solaris-font-family-sans), system-ui;
42
- border: var(--solaris-icon-button-border-width) solid
43
- var(--solaris-icon-button-border-color);
44
- transition:
45
- background var(--solaris-motion-duration-normal)
46
- var(--solaris-motion-easing-standard),
47
- border-color var(--solaris-motion-duration-normal)
48
- var(--solaris-motion-easing-standard),
49
- color var(--solaris-motion-duration-normal)
50
- var(--solaris-motion-easing-standard),
51
- box-shadow var(--solaris-motion-duration-normal)
52
- var(--solaris-motion-easing-standard),
53
- transform var(--solaris-motion-duration-fast)
54
- var(--solaris-motion-easing-standard);
55
- }
56
-
57
- [solaris-icon-button]:hover {
58
- background: var(--solaris-icon-button-hover-background);
59
- border-color: var(--solaris-icon-button-hover-border-color);
60
- }
61
-
62
- [solaris-icon-button]:active,
63
- [solaris-icon-button][data-active] {
64
- background: var(--solaris-icon-button-active-background);
65
- border-color: var(--solaris-icon-button-active-border-color);
66
- }
67
-
68
- [solaris-icon-button]:focus-visible {
69
- outline-offset: 2px;
70
- outline: 2px solid var(--solaris-icon-button-focus-ring-color);
71
- }
72
-
73
- [solaris-icon-button][disabled],
74
- [solaris-icon-button][aria-disabled='true'] {
75
- cursor: not-allowed;
76
- pointer-events: all;
77
- opacity: var(--solaris-icon-button-disabled-opacity);
78
- }
79
-
80
- [solaris-icon-button][data-loading] {
81
- cursor: wait;
82
- position: relative;
83
- pointer-events: all;
84
- }
85
-
86
- [solaris-icon-button] solaris-icon {
87
- width: 1em;
88
- height: 1em;
89
- }
90
-
91
- [solaris-icon-button] solaris-icon svg {
92
- width: 100%;
93
- height: 100%;
94
- }
95
-
96
- [solaris-icon-button][data-loading] solaris-icon {
97
- display: none;
98
- }
99
-
100
- [solaris-icon-button][data-loading]::before {
101
- width: 1em;
102
- height: 1em;
103
- content: '';
104
- flex-shrink: 0;
105
- border-radius: 50%;
106
- border: 2px solid var(--solaris-icon-button-color);
107
- border-top-color: transparent;
108
- animation: solaris-icon-button-spin 0.6s linear infinite;
109
- }
110
-
111
- @media (prefers-reduced-motion: reduce) {
112
- [solaris-icon-button][data-loading]::before {
113
- opacity: 0.5;
114
- animation: none;
115
- }
116
- }
117
-
118
- [data-reduced-motion='true'] [solaris-icon-button][data-loading]::before {
119
- animation: none;
120
- opacity: 0.5;
121
- }
122
-
123
- @keyframes solaris-icon-button-spin {
124
- to {
125
- transform: rotate(360deg);
126
- }
127
- }
128
-
129
- [solaris-icon-button] .solaris-icon-button-badge {
130
- top: 0;
131
- right: 0;
132
- position: absolute;
133
- pointer-events: none;
134
- transform: translate(50%, -50%);
135
- }
136
-
137
- [solaris-icon-button][data-appearance='solid'] {
138
- --solaris-icon-button-border-width: 0;
139
- }
140
-
141
- [solaris-icon-button][data-appearance='outline'] {
142
- --solaris-icon-button-background: transparent;
143
- --solaris-icon-button-border-width: var(--solaris-border-width-sm);
144
- }
145
-
146
- [solaris-icon-button][data-appearance='ghost'] {
147
- --solaris-icon-button-border-width: 0;
148
- --solaris-icon-button-background: transparent;
149
- --solaris-icon-button-border-color: transparent;
150
- }
151
-
152
- [solaris-icon-button][data-appearance='tonal'] {
153
- --solaris-icon-button-border-width: var(--solaris-border-width-sm);
154
- }
155
-
156
- [solaris-icon-button][data-appearance='surface'] {
157
- --solaris-icon-button-border-width: 0;
158
- }
159
-
160
- [solaris-icon-button][data-color='neutral'][data-appearance='solid'] {
161
- --solaris-icon-button-color: var(--solaris-text-inverse);
162
- --solaris-icon-button-background: var(--solaris-text-default);
163
- --solaris-icon-button-hover-background: var(--solaris-text-strong);
164
- --solaris-icon-button-active-background: var(--solaris-text-strong);
165
- --solaris-icon-button-focus-ring-color: var(--solaris-text-default);
166
- }
167
-
168
- [solaris-icon-button][data-color='neutral'][data-appearance='outline'] {
169
- --solaris-icon-button-color: var(--solaris-text-default);
170
- --solaris-icon-button-border-color: var(--solaris-border-default);
171
- --solaris-icon-button-focus-ring-color: var(--solaris-text-default);
172
- --solaris-icon-button-hover-background: var(--solaris-surface-muted);
173
- --solaris-icon-button-active-background: var(--solaris-surface-muted);
174
- --solaris-icon-button-hover-border-color: var(--solaris-border-strong);
175
- }
176
-
177
- [solaris-icon-button][data-color='neutral'][data-appearance='ghost'] {
178
- --solaris-icon-button-color: var(--solaris-text-default);
179
- --solaris-icon-button-focus-ring-color: var(--solaris-text-default);
180
- --solaris-icon-button-hover-background: var(--solaris-surface-muted);
181
- --solaris-icon-button-active-background: var(--solaris-surface-muted);
182
- }
183
-
184
- [solaris-icon-button][data-color='neutral'][data-appearance='tonal'] {
185
- --solaris-icon-button-color: var(--solaris-text-default);
186
- --solaris-icon-button-background: var(--solaris-surface-muted);
187
- --solaris-icon-button-border-color: var(--solaris-border-default);
188
- --solaris-icon-button-focus-ring-color: var(--solaris-text-default);
189
- --solaris-icon-button-hover-background: var(--solaris-surface-subtle);
190
- --solaris-icon-button-hover-border-color: var(--solaris-border-strong);
191
- --solaris-icon-button-active-background: var(--solaris-surface-subtle);
192
- }
193
-
194
- [solaris-icon-button][data-color='neutral'][data-appearance='surface'] {
195
- --solaris-icon-button-color: var(--solaris-text-default);
196
- --solaris-icon-button-background: var(--solaris-surface-muted);
197
- --solaris-icon-button-focus-ring-color: var(--solaris-text-default);
198
- --solaris-icon-button-hover-background: var(--solaris-surface-subtle);
199
- --solaris-icon-button-active-background: var(--solaris-surface-subtle);
200
- }
201
-
202
- [solaris-icon-button][data-color='primary'][data-appearance='solid'] {
203
- --solaris-icon-button-color: var(--solaris-primary-text);
204
- --solaris-icon-button-background: var(--solaris-primary-base);
205
- --solaris-icon-button-focus-ring-color: var(--solaris-primary-base);
206
- --solaris-icon-button-hover-background: var(--solaris-primary-hover);
207
- --solaris-icon-button-active-background: var(--solaris-primary-active);
208
- }
209
-
210
- [solaris-icon-button][data-color='primary'][data-appearance='outline'] {
211
- --solaris-icon-button-color: var(--solaris-primary-text);
212
- --solaris-icon-button-border-color: var(--solaris-primary-border);
213
- --solaris-icon-button-focus-ring-color: var(--solaris-primary-base);
214
- --solaris-icon-button-hover-background: var(--solaris-primary-surface);
215
- --solaris-icon-button-active-background: var(--solaris-primary-surface);
216
- }
217
-
218
- [solaris-icon-button][data-color='primary'][data-appearance='ghost'] {
219
- --solaris-icon-button-color: var(--solaris-primary-text);
220
- --solaris-icon-button-focus-ring-color: var(--solaris-primary-base);
221
- --solaris-icon-button-hover-background: var(--solaris-primary-surface);
222
- --solaris-icon-button-active-background: var(--solaris-primary-surface);
223
- }
224
-
225
- [solaris-icon-button][data-color='primary'][data-appearance='tonal'] {
226
- --solaris-icon-button-color: var(--solaris-primary-text);
227
- --solaris-icon-button-background: var(--solaris-primary-surface);
228
- --solaris-icon-button-border-color: var(--solaris-primary-border);
229
- --solaris-icon-button-focus-ring-color: var(--solaris-primary-base);
230
- --solaris-icon-button-hover-background: var(--solaris-primary-hover);
231
- --solaris-icon-button-hover-border-color: var(--solaris-primary-base);
232
- --solaris-icon-button-active-background: var(--solaris-primary-active);
233
- }
234
-
235
- [solaris-icon-button][data-color='primary'][data-appearance='surface'] {
236
- --solaris-icon-button-color: var(--solaris-primary-text);
237
- --solaris-icon-button-background: var(--solaris-primary-surface);
238
- --solaris-icon-button-focus-ring-color: var(--solaris-primary-base);
239
- --solaris-icon-button-hover-background: var(--solaris-primary-hover);
240
- --solaris-icon-button-active-background: var(--solaris-primary-active);
241
- }
242
-
243
- [solaris-icon-button][data-color='success'][data-appearance='solid'] {
244
- --solaris-icon-button-background: var(--solaris-success-base);
245
- --solaris-icon-button-color: var(--solaris-success-on-solid);
246
- --solaris-icon-button-focus-ring-color: var(--solaris-success-base);
247
- --solaris-icon-button-hover-background: var(--solaris-success-hover);
248
- --solaris-icon-button-active-background: var(--solaris-success-active);
249
- }
250
-
251
- [solaris-icon-button][data-color='success'][data-appearance='outline'] {
252
- --solaris-icon-button-color: var(--solaris-success-text);
253
- --solaris-icon-button-border-color: var(--solaris-success-border);
254
- --solaris-icon-button-focus-ring-color: var(--solaris-success-base);
255
- --solaris-icon-button-hover-background: var(--solaris-success-surface);
256
- --solaris-icon-button-active-background: var(--solaris-success-surface);
257
- }
258
-
259
- [solaris-icon-button][data-color='success'][data-appearance='ghost'] {
260
- --solaris-icon-button-color: var(--solaris-success-text);
261
- --solaris-icon-button-focus-ring-color: var(--solaris-success-base);
262
- --solaris-icon-button-hover-background: var(--solaris-success-surface);
263
- --solaris-icon-button-active-background: var(--solaris-success-surface);
264
- }
265
-
266
- [solaris-icon-button][data-color='success'][data-appearance='tonal'] {
267
- --solaris-icon-button-color: var(--solaris-success-text);
268
- --solaris-icon-button-background: var(--solaris-success-surface);
269
- --solaris-icon-button-border-color: var(--solaris-success-border);
270
- --solaris-icon-button-focus-ring-color: var(--solaris-success-base);
271
- --solaris-icon-button-hover-background: var(--solaris-success-hover);
272
- --solaris-icon-button-hover-border-color: var(--solaris-success-base);
273
- --solaris-icon-button-active-background: var(--solaris-success-active);
274
- }
275
-
276
- [solaris-icon-button][data-color='success'][data-appearance='surface'] {
277
- --solaris-icon-button-color: var(--solaris-success-text);
278
- --solaris-icon-button-background: var(--solaris-success-surface);
279
- --solaris-icon-button-focus-ring-color: var(--solaris-success-base);
280
- --solaris-icon-button-hover-background: var(--solaris-success-hover);
281
- --solaris-icon-button-active-background: var(--solaris-success-active);
282
- }
283
-
284
- [solaris-icon-button][data-color='warning'][data-appearance='solid'] {
285
- --solaris-icon-button-background: var(--solaris-warning-base);
286
- --solaris-icon-button-color: var(--solaris-warning-on-solid);
287
- --solaris-icon-button-hover-background: var(--solaris-warning-hover);
288
- --solaris-icon-button-active-background: var(--solaris-warning-active);
289
- --solaris-icon-button-focus-ring-color: var(--solaris-warning-base);
290
- }
291
-
292
- [solaris-icon-button][data-color='warning'][data-appearance='outline'] {
293
- --solaris-icon-button-color: var(--solaris-warning-text);
294
- --solaris-icon-button-border-color: var(--solaris-warning-border);
295
- --solaris-icon-button-focus-ring-color: var(--solaris-warning-base);
296
- --solaris-icon-button-hover-background: var(--solaris-warning-surface);
297
- --solaris-icon-button-active-background: var(--solaris-warning-surface);
298
- }
299
-
300
- [solaris-icon-button][data-color='warning'][data-appearance='ghost'] {
301
- --solaris-icon-button-color: var(--solaris-warning-text);
302
- --solaris-icon-button-focus-ring-color: var(--solaris-warning-base);
303
- --solaris-icon-button-hover-background: var(--solaris-warning-surface);
304
- --solaris-icon-button-active-background: var(--solaris-warning-surface);
305
- }
306
-
307
- [solaris-icon-button][data-color='warning'][data-appearance='tonal'] {
308
- --solaris-icon-button-color: var(--solaris-warning-text);
309
- --solaris-icon-button-background: var(--solaris-warning-surface);
310
- --solaris-icon-button-border-color: var(--solaris-warning-border);
311
- --solaris-icon-button-focus-ring-color: var(--solaris-warning-base);
312
- --solaris-icon-button-hover-background: var(--solaris-warning-hover);
313
- --solaris-icon-button-hover-border-color: var(--solaris-warning-base);
314
- --solaris-icon-button-active-background: var(--solaris-warning-active);
315
- }
316
-
317
- [solaris-icon-button][data-color='warning'][data-appearance='surface'] {
318
- --solaris-icon-button-color: var(--solaris-warning-text);
319
- --solaris-icon-button-background: var(--solaris-warning-surface);
320
- --solaris-icon-button-focus-ring-color: var(--solaris-warning-base);
321
- --solaris-icon-button-hover-background: var(--solaris-warning-hover);
322
- --solaris-icon-button-active-background: var(--solaris-warning-active);
323
- }
324
-
325
- [solaris-icon-button][data-color='danger'][data-appearance='solid'] {
326
- --solaris-icon-button-background: var(--solaris-danger-base);
327
- --solaris-icon-button-color: var(--solaris-danger-on-solid);
328
- --solaris-icon-button-focus-ring-color: var(--solaris-danger-base);
329
- --solaris-icon-button-hover-background: var(--solaris-danger-hover);
330
- --solaris-icon-button-active-background: var(--solaris-danger-active);
331
- }
332
-
333
- [solaris-icon-button][data-color='danger'][data-appearance='outline'] {
334
- --solaris-icon-button-color: var(--solaris-danger-text);
335
- --solaris-icon-button-border-color: var(--solaris-danger-border);
336
- --solaris-icon-button-focus-ring-color: var(--solaris-danger-base);
337
- --solaris-icon-button-hover-background: var(--solaris-danger-surface);
338
- --solaris-icon-button-active-background: var(--solaris-danger-surface);
339
- }
340
-
341
- [solaris-icon-button][data-color='danger'][data-appearance='ghost'] {
342
- --solaris-icon-button-color: var(--solaris-danger-text);
343
- --solaris-icon-button-focus-ring-color: var(--solaris-danger-base);
344
- --solaris-icon-button-hover-background: var(--solaris-danger-surface);
345
- --solaris-icon-button-active-background: var(--solaris-danger-surface);
346
- }
347
-
348
- [solaris-icon-button][data-color='danger'][data-appearance='tonal'] {
349
- --solaris-icon-button-color: var(--solaris-danger-text);
350
- --solaris-icon-button-background: var(--solaris-danger-surface);
351
- --solaris-icon-button-border-color: var(--solaris-danger-border);
352
- --solaris-icon-button-focus-ring-color: var(--solaris-danger-base);
353
- --solaris-icon-button-hover-background: var(--solaris-danger-hover);
354
- --solaris-icon-button-hover-border-color: var(--solaris-danger-base);
355
- --solaris-icon-button-active-background: var(--solaris-danger-active);
356
- }
357
-
358
- [solaris-icon-button][data-color='danger'][data-appearance='surface'] {
359
- --solaris-icon-button-color: var(--solaris-danger-text);
360
- --solaris-icon-button-background: var(--solaris-danger-surface);
361
- --solaris-icon-button-focus-ring-color: var(--solaris-danger-base);
362
- --solaris-icon-button-hover-background: var(--solaris-danger-hover);
363
- --solaris-icon-button-active-background: var(--solaris-danger-active);
364
- }
365
-
366
- [solaris-icon-button][data-color='info'][data-appearance='solid'] {
367
- --solaris-icon-button-color: var(--solaris-info-text);
368
- --solaris-icon-button-background: var(--solaris-info-base);
369
- --solaris-icon-button-focus-ring-color: var(--solaris-info-base);
370
- --solaris-icon-button-hover-background: var(--solaris-info-hover);
371
- --solaris-icon-button-active-background: var(--solaris-info-active);
372
- }
373
-
374
- [solaris-icon-button][data-color='info'][data-appearance='outline'] {
375
- --solaris-icon-button-color: var(--solaris-info-text);
376
- --solaris-icon-button-border-color: var(--solaris-info-border);
377
- --solaris-icon-button-focus-ring-color: var(--solaris-info-base);
378
- --solaris-icon-button-hover-background: var(--solaris-info-surface);
379
- --solaris-icon-button-active-background: var(--solaris-info-surface);
380
- }
381
-
382
- [solaris-icon-button][data-color='info'][data-appearance='ghost'] {
383
- --solaris-icon-button-color: var(--solaris-info-text);
384
- --solaris-icon-button-focus-ring-color: var(--solaris-info-base);
385
- --solaris-icon-button-hover-background: var(--solaris-info-surface);
386
- --solaris-icon-button-active-background: var(--solaris-info-surface);
387
- }
388
-
389
- [solaris-icon-button][data-color='info'][data-appearance='tonal'] {
390
- --solaris-icon-button-color: var(--solaris-info-text);
391
- --solaris-icon-button-background: var(--solaris-info-surface);
392
- --solaris-icon-button-border-color: var(--solaris-info-border);
393
- --solaris-icon-button-focus-ring-color: var(--solaris-info-base);
394
- --solaris-icon-button-hover-background: var(--solaris-info-hover);
395
- --solaris-icon-button-hover-border-color: var(--solaris-info-base);
396
- --solaris-icon-button-active-background: var(--solaris-info-active);
397
- }
398
-
399
- [solaris-icon-button][data-color='info'][data-appearance='surface'] {
400
- --solaris-icon-button-color: var(--solaris-info-text);
401
- --solaris-icon-button-background: var(--solaris-info-surface);
402
- --solaris-icon-button-focus-ring-color: var(--solaris-info-base);
403
- --solaris-icon-button-hover-background: var(--solaris-info-hover);
404
- --solaris-icon-button-active-background: var(--solaris-info-active);
405
- }
406
-
407
- [solaris-icon-button][data-color='custom'] {
408
- --solaris-icon-button-hover-background: var(
409
- --solaris-icon-button-custom-hover-background
410
- );
411
- --solaris-icon-button-active-background: var(
412
- --solaris-icon-button-custom-active-background
413
- );
414
- --solaris-icon-button-hover-border-color: var(
415
- --solaris-icon-button-custom-hover-border-color
416
- );
417
- --solaris-icon-button-active-border-color: var(
418
- --solaris-icon-button-custom-active-border-color
419
- );
420
- --solaris-icon-button-color: var(
421
- --solaris-icon-button-custom-color,
422
- var(--solaris-text-default)
423
- );
424
- --solaris-icon-button-background: var(
425
- --solaris-icon-button-custom-background,
426
- var(--solaris-surface-base)
427
- );
428
- --solaris-icon-button-focus-ring-color: var(
429
- --solaris-icon-button-custom-color,
430
- var(--solaris-text-default)
431
- );
432
- --solaris-icon-button-border-color: var(
433
- --solaris-icon-button-custom-border-color,
434
- var(--solaris-border-default)
435
- );
436
- }
437
-
438
- [solaris-icon-button][data-size='sm'] {
439
- font-size: var(--solaris-font-size-sm);
440
- --solaris-icon-button-size: var(--solaris-spacing-8);
441
- }
442
-
443
- [solaris-icon-button][data-size='md'] {
444
- font-size: var(--solaris-font-size-md);
445
- --solaris-icon-button-size: var(--solaris-spacing-10);
446
- }
447
-
448
- [solaris-icon-button][data-size='lg'] {
449
- font-size: var(--solaris-font-size-lg);
450
- --solaris-icon-button-size: var(--solaris-spacing-12);
451
- }
452
-
453
- [solaris-icon-button][data-radius='none'] {
454
- --solaris-icon-button-radius: var(--solaris-radius-none);
455
- }
456
-
457
- [solaris-icon-button][data-radius='sm'] {
458
- --solaris-icon-button-radius: var(--solaris-radius-sm);
459
- }
460
-
461
- [solaris-icon-button][data-radius='md'] {
462
- --solaris-icon-button-radius: var(--solaris-radius-md);
463
- }
464
-
465
- [solaris-icon-button][data-radius='lg'] {
466
- --solaris-icon-button-radius: var(--solaris-radius-lg);
467
- }
468
-
469
- [solaris-icon-button][data-radius='full'] {
470
- --solaris-icon-button-radius: var(--solaris-radius-full);
471
- }
472
-
473
- [solaris-icon-button][data-density='compact'] {
474
- font-size: var(--solaris-font-size-sm);
475
- --solaris-icon-button-size: var(--solaris-density-min-height);
476
- }
477
-
478
- [solaris-icon-button][data-density='comfortable'] {
479
- font-size: var(--solaris-font-size-md);
480
- --solaris-icon-button-size: var(--solaris-density-min-height);
481
- }
1
+ [solaris-icon-button] {
2
+ --solaris-icon-button-size: initial;
3
+ --solaris-icon-button-color: initial;
4
+ --solaris-icon-button-radius: initial;
5
+ --solaris-icon-button-background: initial;
6
+ --solaris-icon-button-border-color: initial;
7
+ --solaris-icon-button-border-width: initial;
8
+ --solaris-icon-button-disabled-opacity: 0.5;
9
+ --solaris-icon-button-focus-ring-color: initial;
10
+ --solaris-icon-button-hover-background: initial;
11
+ --solaris-icon-button-active-background: initial;
12
+ --solaris-icon-button-hover-border-color: initial;
13
+ --solaris-icon-button-active-border-color: initial;
14
+
15
+ --solaris-icon-button-custom-color: initial;
16
+ --solaris-icon-button-custom-background: initial;
17
+ --solaris-icon-button-custom-border-color: initial;
18
+ --solaris-icon-button-custom-hover-background: initial;
19
+ --solaris-icon-button-custom-hover-border-color: initial;
20
+ --solaris-icon-button-custom-active-background: initial;
21
+ --solaris-icon-button-custom-active-border-color: initial;
22
+
23
+ padding: 0;
24
+ flex-shrink: 0;
25
+ line-height: 1;
26
+ cursor: pointer;
27
+ user-select: none;
28
+ position: relative;
29
+ align-items: center;
30
+ display: inline-flex;
31
+ text-decoration: none;
32
+ box-sizing: border-box;
33
+ justify-content: center;
34
+ width: var(--solaris-icon-button-size);
35
+ height: var(--solaris-icon-button-size);
36
+ color: var(--solaris-icon-button-color);
37
+ min-width: var(--solaris-icon-button-size);
38
+ min-height: var(--solaris-icon-button-size);
39
+ border-radius: var(--solaris-icon-button-radius);
40
+ background: var(--solaris-icon-button-background);
41
+ font-family: var(--solaris-font-family-sans), system-ui;
42
+ border: var(--solaris-icon-button-border-width) solid
43
+ var(--solaris-icon-button-border-color);
44
+ transition:
45
+ background var(--solaris-motion-duration-normal)
46
+ var(--solaris-motion-easing-standard),
47
+ border-color var(--solaris-motion-duration-normal)
48
+ var(--solaris-motion-easing-standard),
49
+ color var(--solaris-motion-duration-normal)
50
+ var(--solaris-motion-easing-standard),
51
+ box-shadow var(--solaris-motion-duration-normal)
52
+ var(--solaris-motion-easing-standard),
53
+ transform var(--solaris-motion-duration-fast)
54
+ var(--solaris-motion-easing-standard);
55
+ }
56
+
57
+ [solaris-icon-button]:hover {
58
+ background: var(--solaris-icon-button-hover-background);
59
+ border-color: var(--solaris-icon-button-hover-border-color);
60
+ }
61
+
62
+ [solaris-icon-button]:active,
63
+ [solaris-icon-button][data-active] {
64
+ background: var(--solaris-icon-button-active-background);
65
+ border-color: var(--solaris-icon-button-active-border-color);
66
+ }
67
+
68
+ [solaris-icon-button]:focus-visible {
69
+ outline-offset: 2px;
70
+ outline: 2px solid var(--solaris-icon-button-focus-ring-color);
71
+ }
72
+
73
+ [solaris-icon-button][disabled],
74
+ [solaris-icon-button][aria-disabled='true'] {
75
+ cursor: not-allowed;
76
+ pointer-events: all;
77
+ opacity: var(--solaris-icon-button-disabled-opacity);
78
+ }
79
+
80
+ [solaris-icon-button][data-loading] {
81
+ cursor: wait;
82
+ position: relative;
83
+ pointer-events: all;
84
+ }
85
+
86
+ [solaris-icon-button] solaris-icon {
87
+ width: 1em;
88
+ height: 1em;
89
+ }
90
+
91
+ [solaris-icon-button] solaris-icon svg {
92
+ width: 100%;
93
+ height: 100%;
94
+ }
95
+
96
+ [solaris-icon-button][data-loading] solaris-icon {
97
+ display: none;
98
+ }
99
+
100
+ [solaris-icon-button][data-loading]::before {
101
+ width: 1em;
102
+ height: 1em;
103
+ content: '';
104
+ flex-shrink: 0;
105
+ border-radius: 50%;
106
+ border: 2px solid var(--solaris-icon-button-color);
107
+ border-top-color: transparent;
108
+ animation: solaris-icon-button-spin 0.6s linear infinite;
109
+ }
110
+
111
+ @media (prefers-reduced-motion: reduce) {
112
+ [solaris-icon-button][data-loading]::before {
113
+ opacity: 0.5;
114
+ animation: none;
115
+ }
116
+ }
117
+
118
+ [data-reduced-motion='true'] [solaris-icon-button][data-loading]::before {
119
+ animation: none;
120
+ opacity: 0.5;
121
+ }
122
+
123
+ @keyframes solaris-icon-button-spin {
124
+ to {
125
+ transform: rotate(360deg);
126
+ }
127
+ }
128
+
129
+ [solaris-icon-button] .solaris-icon-button-badge {
130
+ top: 0;
131
+ right: 0;
132
+ position: absolute;
133
+ pointer-events: none;
134
+ transform: translate(50%, -50%);
135
+ }
136
+
137
+ [solaris-icon-button][data-appearance='solid'] {
138
+ --solaris-icon-button-border-width: 0;
139
+ }
140
+
141
+ [solaris-icon-button][data-appearance='outline'] {
142
+ --solaris-icon-button-background: transparent;
143
+ --solaris-icon-button-border-width: var(--solaris-border-width-sm);
144
+ }
145
+
146
+ [solaris-icon-button][data-appearance='ghost'] {
147
+ --solaris-icon-button-border-width: 0;
148
+ --solaris-icon-button-background: transparent;
149
+ --solaris-icon-button-border-color: transparent;
150
+ }
151
+
152
+ [solaris-icon-button][data-appearance='tonal'] {
153
+ --solaris-icon-button-border-width: var(--solaris-border-width-sm);
154
+ }
155
+
156
+ [solaris-icon-button][data-appearance='surface'] {
157
+ --solaris-icon-button-border-width: 0;
158
+ }
159
+
160
+ [solaris-icon-button][data-color='neutral'][data-appearance='solid'] {
161
+ --solaris-icon-button-color: var(--solaris-text-inverse);
162
+ --solaris-icon-button-background: var(--solaris-text-default);
163
+ --solaris-icon-button-hover-background: var(--solaris-text-strong);
164
+ --solaris-icon-button-active-background: var(--solaris-text-strong);
165
+ --solaris-icon-button-focus-ring-color: var(--solaris-text-default);
166
+ }
167
+
168
+ [solaris-icon-button][data-color='neutral'][data-appearance='outline'] {
169
+ --solaris-icon-button-color: var(--solaris-text-default);
170
+ --solaris-icon-button-border-color: var(--solaris-border-default);
171
+ --solaris-icon-button-focus-ring-color: var(--solaris-text-default);
172
+ --solaris-icon-button-hover-background: var(--solaris-surface-muted);
173
+ --solaris-icon-button-active-background: var(--solaris-surface-muted);
174
+ --solaris-icon-button-hover-border-color: var(--solaris-border-strong);
175
+ }
176
+
177
+ [solaris-icon-button][data-color='neutral'][data-appearance='ghost'] {
178
+ --solaris-icon-button-color: var(--solaris-text-default);
179
+ --solaris-icon-button-focus-ring-color: var(--solaris-text-default);
180
+ --solaris-icon-button-hover-background: var(--solaris-surface-muted);
181
+ --solaris-icon-button-active-background: var(--solaris-surface-muted);
182
+ }
183
+
184
+ [solaris-icon-button][data-color='neutral'][data-appearance='tonal'] {
185
+ --solaris-icon-button-color: var(--solaris-text-default);
186
+ --solaris-icon-button-background: var(--solaris-surface-muted);
187
+ --solaris-icon-button-border-color: var(--solaris-border-default);
188
+ --solaris-icon-button-focus-ring-color: var(--solaris-text-default);
189
+ --solaris-icon-button-hover-background: var(--solaris-surface-subtle);
190
+ --solaris-icon-button-hover-border-color: var(--solaris-border-strong);
191
+ --solaris-icon-button-active-background: var(--solaris-surface-subtle);
192
+ }
193
+
194
+ [solaris-icon-button][data-color='neutral'][data-appearance='surface'] {
195
+ --solaris-icon-button-color: var(--solaris-text-default);
196
+ --solaris-icon-button-background: var(--solaris-surface-muted);
197
+ --solaris-icon-button-focus-ring-color: var(--solaris-text-default);
198
+ --solaris-icon-button-hover-background: var(--solaris-surface-subtle);
199
+ --solaris-icon-button-active-background: var(--solaris-surface-subtle);
200
+ }
201
+
202
+ [solaris-icon-button][data-color='primary'][data-appearance='solid'] {
203
+ --solaris-icon-button-color: var(--solaris-primary-text);
204
+ --solaris-icon-button-background: var(--solaris-primary-base);
205
+ --solaris-icon-button-focus-ring-color: var(--solaris-primary-base);
206
+ --solaris-icon-button-hover-background: var(--solaris-primary-hover);
207
+ --solaris-icon-button-active-background: var(--solaris-primary-active);
208
+ }
209
+
210
+ [solaris-icon-button][data-color='primary'][data-appearance='outline'] {
211
+ --solaris-icon-button-color: var(--solaris-primary-text);
212
+ --solaris-icon-button-border-color: var(--solaris-primary-border);
213
+ --solaris-icon-button-focus-ring-color: var(--solaris-primary-base);
214
+ --solaris-icon-button-hover-background: var(--solaris-primary-surface);
215
+ --solaris-icon-button-active-background: var(--solaris-primary-surface);
216
+ }
217
+
218
+ [solaris-icon-button][data-color='primary'][data-appearance='ghost'] {
219
+ --solaris-icon-button-color: var(--solaris-primary-text);
220
+ --solaris-icon-button-focus-ring-color: var(--solaris-primary-base);
221
+ --solaris-icon-button-hover-background: var(--solaris-primary-surface);
222
+ --solaris-icon-button-active-background: var(--solaris-primary-surface);
223
+ }
224
+
225
+ [solaris-icon-button][data-color='primary'][data-appearance='tonal'] {
226
+ --solaris-icon-button-color: var(--solaris-primary-text);
227
+ --solaris-icon-button-background: var(--solaris-primary-surface);
228
+ --solaris-icon-button-border-color: var(--solaris-primary-border);
229
+ --solaris-icon-button-focus-ring-color: var(--solaris-primary-base);
230
+ --solaris-icon-button-hover-background: var(--solaris-primary-hover);
231
+ --solaris-icon-button-hover-border-color: var(--solaris-primary-base);
232
+ --solaris-icon-button-active-background: var(--solaris-primary-active);
233
+ }
234
+
235
+ [solaris-icon-button][data-color='primary'][data-appearance='surface'] {
236
+ --solaris-icon-button-color: var(--solaris-primary-text);
237
+ --solaris-icon-button-background: var(--solaris-primary-surface);
238
+ --solaris-icon-button-focus-ring-color: var(--solaris-primary-base);
239
+ --solaris-icon-button-hover-background: var(--solaris-primary-hover);
240
+ --solaris-icon-button-active-background: var(--solaris-primary-active);
241
+ }
242
+
243
+ [solaris-icon-button][data-color='success'][data-appearance='solid'] {
244
+ --solaris-icon-button-background: var(--solaris-success-base);
245
+ --solaris-icon-button-color: var(--solaris-success-on-solid);
246
+ --solaris-icon-button-focus-ring-color: var(--solaris-success-base);
247
+ --solaris-icon-button-hover-background: var(--solaris-success-hover);
248
+ --solaris-icon-button-active-background: var(--solaris-success-active);
249
+ }
250
+
251
+ [solaris-icon-button][data-color='success'][data-appearance='outline'] {
252
+ --solaris-icon-button-color: var(--solaris-success-text);
253
+ --solaris-icon-button-border-color: var(--solaris-success-border);
254
+ --solaris-icon-button-focus-ring-color: var(--solaris-success-base);
255
+ --solaris-icon-button-hover-background: var(--solaris-success-surface);
256
+ --solaris-icon-button-active-background: var(--solaris-success-surface);
257
+ }
258
+
259
+ [solaris-icon-button][data-color='success'][data-appearance='ghost'] {
260
+ --solaris-icon-button-color: var(--solaris-success-text);
261
+ --solaris-icon-button-focus-ring-color: var(--solaris-success-base);
262
+ --solaris-icon-button-hover-background: var(--solaris-success-surface);
263
+ --solaris-icon-button-active-background: var(--solaris-success-surface);
264
+ }
265
+
266
+ [solaris-icon-button][data-color='success'][data-appearance='tonal'] {
267
+ --solaris-icon-button-color: var(--solaris-success-text);
268
+ --solaris-icon-button-background: var(--solaris-success-surface);
269
+ --solaris-icon-button-border-color: var(--solaris-success-border);
270
+ --solaris-icon-button-focus-ring-color: var(--solaris-success-base);
271
+ --solaris-icon-button-hover-background: var(--solaris-success-hover);
272
+ --solaris-icon-button-hover-border-color: var(--solaris-success-base);
273
+ --solaris-icon-button-active-background: var(--solaris-success-active);
274
+ }
275
+
276
+ [solaris-icon-button][data-color='success'][data-appearance='surface'] {
277
+ --solaris-icon-button-color: var(--solaris-success-text);
278
+ --solaris-icon-button-background: var(--solaris-success-surface);
279
+ --solaris-icon-button-focus-ring-color: var(--solaris-success-base);
280
+ --solaris-icon-button-hover-background: var(--solaris-success-hover);
281
+ --solaris-icon-button-active-background: var(--solaris-success-active);
282
+ }
283
+
284
+ [solaris-icon-button][data-color='warning'][data-appearance='solid'] {
285
+ --solaris-icon-button-background: var(--solaris-warning-base);
286
+ --solaris-icon-button-color: var(--solaris-warning-on-solid);
287
+ --solaris-icon-button-hover-background: var(--solaris-warning-hover);
288
+ --solaris-icon-button-active-background: var(--solaris-warning-active);
289
+ --solaris-icon-button-focus-ring-color: var(--solaris-warning-base);
290
+ }
291
+
292
+ [solaris-icon-button][data-color='warning'][data-appearance='outline'] {
293
+ --solaris-icon-button-color: var(--solaris-warning-text);
294
+ --solaris-icon-button-border-color: var(--solaris-warning-border);
295
+ --solaris-icon-button-focus-ring-color: var(--solaris-warning-base);
296
+ --solaris-icon-button-hover-background: var(--solaris-warning-surface);
297
+ --solaris-icon-button-active-background: var(--solaris-warning-surface);
298
+ }
299
+
300
+ [solaris-icon-button][data-color='warning'][data-appearance='ghost'] {
301
+ --solaris-icon-button-color: var(--solaris-warning-text);
302
+ --solaris-icon-button-focus-ring-color: var(--solaris-warning-base);
303
+ --solaris-icon-button-hover-background: var(--solaris-warning-surface);
304
+ --solaris-icon-button-active-background: var(--solaris-warning-surface);
305
+ }
306
+
307
+ [solaris-icon-button][data-color='warning'][data-appearance='tonal'] {
308
+ --solaris-icon-button-color: var(--solaris-warning-text);
309
+ --solaris-icon-button-background: var(--solaris-warning-surface);
310
+ --solaris-icon-button-border-color: var(--solaris-warning-border);
311
+ --solaris-icon-button-focus-ring-color: var(--solaris-warning-base);
312
+ --solaris-icon-button-hover-background: var(--solaris-warning-hover);
313
+ --solaris-icon-button-hover-border-color: var(--solaris-warning-base);
314
+ --solaris-icon-button-active-background: var(--solaris-warning-active);
315
+ }
316
+
317
+ [solaris-icon-button][data-color='warning'][data-appearance='surface'] {
318
+ --solaris-icon-button-color: var(--solaris-warning-text);
319
+ --solaris-icon-button-background: var(--solaris-warning-surface);
320
+ --solaris-icon-button-focus-ring-color: var(--solaris-warning-base);
321
+ --solaris-icon-button-hover-background: var(--solaris-warning-hover);
322
+ --solaris-icon-button-active-background: var(--solaris-warning-active);
323
+ }
324
+
325
+ [solaris-icon-button][data-color='danger'][data-appearance='solid'] {
326
+ --solaris-icon-button-background: var(--solaris-danger-base);
327
+ --solaris-icon-button-color: var(--solaris-danger-on-solid);
328
+ --solaris-icon-button-focus-ring-color: var(--solaris-danger-base);
329
+ --solaris-icon-button-hover-background: var(--solaris-danger-hover);
330
+ --solaris-icon-button-active-background: var(--solaris-danger-active);
331
+ }
332
+
333
+ [solaris-icon-button][data-color='danger'][data-appearance='outline'] {
334
+ --solaris-icon-button-color: var(--solaris-danger-text);
335
+ --solaris-icon-button-border-color: var(--solaris-danger-border);
336
+ --solaris-icon-button-focus-ring-color: var(--solaris-danger-base);
337
+ --solaris-icon-button-hover-background: var(--solaris-danger-surface);
338
+ --solaris-icon-button-active-background: var(--solaris-danger-surface);
339
+ }
340
+
341
+ [solaris-icon-button][data-color='danger'][data-appearance='ghost'] {
342
+ --solaris-icon-button-color: var(--solaris-danger-text);
343
+ --solaris-icon-button-focus-ring-color: var(--solaris-danger-base);
344
+ --solaris-icon-button-hover-background: var(--solaris-danger-surface);
345
+ --solaris-icon-button-active-background: var(--solaris-danger-surface);
346
+ }
347
+
348
+ [solaris-icon-button][data-color='danger'][data-appearance='tonal'] {
349
+ --solaris-icon-button-color: var(--solaris-danger-text);
350
+ --solaris-icon-button-background: var(--solaris-danger-surface);
351
+ --solaris-icon-button-border-color: var(--solaris-danger-border);
352
+ --solaris-icon-button-focus-ring-color: var(--solaris-danger-base);
353
+ --solaris-icon-button-hover-background: var(--solaris-danger-hover);
354
+ --solaris-icon-button-hover-border-color: var(--solaris-danger-base);
355
+ --solaris-icon-button-active-background: var(--solaris-danger-active);
356
+ }
357
+
358
+ [solaris-icon-button][data-color='danger'][data-appearance='surface'] {
359
+ --solaris-icon-button-color: var(--solaris-danger-text);
360
+ --solaris-icon-button-background: var(--solaris-danger-surface);
361
+ --solaris-icon-button-focus-ring-color: var(--solaris-danger-base);
362
+ --solaris-icon-button-hover-background: var(--solaris-danger-hover);
363
+ --solaris-icon-button-active-background: var(--solaris-danger-active);
364
+ }
365
+
366
+ [solaris-icon-button][data-color='info'][data-appearance='solid'] {
367
+ --solaris-icon-button-color: var(--solaris-info-text);
368
+ --solaris-icon-button-background: var(--solaris-info-base);
369
+ --solaris-icon-button-focus-ring-color: var(--solaris-info-base);
370
+ --solaris-icon-button-hover-background: var(--solaris-info-hover);
371
+ --solaris-icon-button-active-background: var(--solaris-info-active);
372
+ }
373
+
374
+ [solaris-icon-button][data-color='info'][data-appearance='outline'] {
375
+ --solaris-icon-button-color: var(--solaris-info-text);
376
+ --solaris-icon-button-border-color: var(--solaris-info-border);
377
+ --solaris-icon-button-focus-ring-color: var(--solaris-info-base);
378
+ --solaris-icon-button-hover-background: var(--solaris-info-surface);
379
+ --solaris-icon-button-active-background: var(--solaris-info-surface);
380
+ }
381
+
382
+ [solaris-icon-button][data-color='info'][data-appearance='ghost'] {
383
+ --solaris-icon-button-color: var(--solaris-info-text);
384
+ --solaris-icon-button-focus-ring-color: var(--solaris-info-base);
385
+ --solaris-icon-button-hover-background: var(--solaris-info-surface);
386
+ --solaris-icon-button-active-background: var(--solaris-info-surface);
387
+ }
388
+
389
+ [solaris-icon-button][data-color='info'][data-appearance='tonal'] {
390
+ --solaris-icon-button-color: var(--solaris-info-text);
391
+ --solaris-icon-button-background: var(--solaris-info-surface);
392
+ --solaris-icon-button-border-color: var(--solaris-info-border);
393
+ --solaris-icon-button-focus-ring-color: var(--solaris-info-base);
394
+ --solaris-icon-button-hover-background: var(--solaris-info-hover);
395
+ --solaris-icon-button-hover-border-color: var(--solaris-info-base);
396
+ --solaris-icon-button-active-background: var(--solaris-info-active);
397
+ }
398
+
399
+ [solaris-icon-button][data-color='info'][data-appearance='surface'] {
400
+ --solaris-icon-button-color: var(--solaris-info-text);
401
+ --solaris-icon-button-background: var(--solaris-info-surface);
402
+ --solaris-icon-button-focus-ring-color: var(--solaris-info-base);
403
+ --solaris-icon-button-hover-background: var(--solaris-info-hover);
404
+ --solaris-icon-button-active-background: var(--solaris-info-active);
405
+ }
406
+
407
+ [solaris-icon-button][data-color='custom'] {
408
+ --solaris-icon-button-hover-background: var(
409
+ --solaris-icon-button-custom-hover-background
410
+ );
411
+ --solaris-icon-button-active-background: var(
412
+ --solaris-icon-button-custom-active-background
413
+ );
414
+ --solaris-icon-button-hover-border-color: var(
415
+ --solaris-icon-button-custom-hover-border-color
416
+ );
417
+ --solaris-icon-button-active-border-color: var(
418
+ --solaris-icon-button-custom-active-border-color
419
+ );
420
+ --solaris-icon-button-color: var(
421
+ --solaris-icon-button-custom-color,
422
+ var(--solaris-text-default)
423
+ );
424
+ --solaris-icon-button-background: var(
425
+ --solaris-icon-button-custom-background,
426
+ var(--solaris-surface-base)
427
+ );
428
+ --solaris-icon-button-focus-ring-color: var(
429
+ --solaris-icon-button-custom-color,
430
+ var(--solaris-text-default)
431
+ );
432
+ --solaris-icon-button-border-color: var(
433
+ --solaris-icon-button-custom-border-color,
434
+ var(--solaris-border-default)
435
+ );
436
+ }
437
+
438
+ [solaris-icon-button][data-size='sm'] {
439
+ font-size: var(--solaris-font-size-sm);
440
+ --solaris-icon-button-size: var(--solaris-spacing-8);
441
+ }
442
+
443
+ [solaris-icon-button][data-size='md'] {
444
+ font-size: var(--solaris-font-size-md);
445
+ --solaris-icon-button-size: var(--solaris-spacing-10);
446
+ }
447
+
448
+ [solaris-icon-button][data-size='lg'] {
449
+ font-size: var(--solaris-font-size-lg);
450
+ --solaris-icon-button-size: var(--solaris-spacing-12);
451
+ }
452
+
453
+ [solaris-icon-button][data-radius='none'] {
454
+ --solaris-icon-button-radius: var(--solaris-radius-none);
455
+ }
456
+
457
+ [solaris-icon-button][data-radius='sm'] {
458
+ --solaris-icon-button-radius: var(--solaris-radius-sm);
459
+ }
460
+
461
+ [solaris-icon-button][data-radius='md'] {
462
+ --solaris-icon-button-radius: var(--solaris-radius-md);
463
+ }
464
+
465
+ [solaris-icon-button][data-radius='lg'] {
466
+ --solaris-icon-button-radius: var(--solaris-radius-lg);
467
+ }
468
+
469
+ [solaris-icon-button][data-radius='full'] {
470
+ --solaris-icon-button-radius: var(--solaris-radius-full);
471
+ }
472
+
473
+ [solaris-icon-button][data-density='compact'] {
474
+ font-size: var(--solaris-font-size-sm);
475
+ --solaris-icon-button-size: var(--solaris-density-min-height);
476
+ }
477
+
478
+ [solaris-icon-button][data-density='comfortable'] {
479
+ font-size: var(--solaris-font-size-md);
480
+ --solaris-icon-button-size: var(--solaris-density-min-height);
481
+ }