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