@educarehq/solaris-ui 0.3.2 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/fesm2022/educarehq-solaris-ui.mjs +1229 -911
  2. package/fesm2022/educarehq-solaris-ui.mjs.map +1 -1
  3. package/package.json +20 -1
  4. package/schematics/collection.json +16 -0
  5. package/schematics/init/fonts.js +18 -0
  6. package/schematics/init/index.js +77 -0
  7. package/schematics/init/messages.js +25 -0
  8. package/schematics/init/providers.js +89 -0
  9. package/schematics/init/schema.json +54 -0
  10. package/schematics/init/styles.js +75 -0
  11. package/schematics/init/workspace.js +45 -0
  12. package/schematics/ng-add/index.js +66 -0
  13. package/schematics/ng-add/schema.json +40 -0
  14. package/schematics/package.json +5 -0
  15. package/styles/_button.scss +584 -510
  16. package/styles/_core.scss +13 -37
  17. package/styles/_dropdown-menu.scss +70 -72
  18. package/styles/_icon-button.scss +486 -481
  19. package/styles/_index.scss +28 -19
  20. package/styles/_input.scss +257 -255
  21. package/styles/_popover.scss +73 -73
  22. package/styles/_textarea.scss +248 -0
  23. package/styles/_theme.scss +35 -1
  24. package/styles/_toast.scss +9 -9
  25. package/styles/_tooltip.scss +5 -3
  26. package/styles/token/border/_border.scss +4 -3
  27. package/styles/token/color/_dark.scss +5 -2
  28. package/styles/token/color/_high-contrast.scss +116 -0
  29. package/styles/token/color/_light.scss +3 -0
  30. package/styles/token/density/_comfortable.scss +11 -11
  31. package/styles/token/density/_compact.scss +11 -11
  32. package/styles/token/focus/_focus.scss +16 -0
  33. package/styles/token/focus/_index.scss +1 -0
  34. package/styles/token/glass/_glass.scss +17 -0
  35. package/styles/token/glass/_index.scss +1 -0
  36. package/styles/token/motion/_motion.scss +1 -0
  37. package/styles/token/opacity/_opacity.scss +9 -0
  38. package/styles/token/radius/_radius.scss +4 -4
  39. package/styles/token/shadow/_shadow.scss +34 -20
  40. package/styles/token/spacing/_spacing.scss +15 -12
  41. package/styles/token/typography/_typography.scss +10 -9
  42. package/styles/token/z-index/_z-index.scss +3 -0
  43. package/types/educarehq-solaris-ui.d.ts +282 -106
package/styles/_button.scss CHANGED
@@ -1,510 +1,584 @@
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-border-width: 0;
3
+ --solaris-button-custom-color: initial;
4
+ --solaris-button-border-color: transparent;
5
+ --solaris-button-custom-background: initial;
6
+ --solaris-button-custom-border-color: initial;
7
+ --solaris-button-gap: var(--solaris-spacing-2);
8
+ --solaris-button-hover-border-color: transparent;
9
+ --solaris-button-radius: var(--solaris-radius-sm);
10
+ --solaris-button-active-border-color: transparent;
11
+ --solaris-button-custom-hover-background: initial;
12
+ --solaris-button-height: var(--solaris-spacing-10);
13
+ --solaris-button-custom-active-background: initial;
14
+ --solaris-button-color: var(--solaris-primary-text);
15
+ --solaris-button-custom-hover-border-color: initial;
16
+ --solaris-button-icon-size: var(--solaris-spacing-4);
17
+ --solaris-button-padding-x: var(--solaris-spacing-4);
18
+ --solaris-button-padding-y: var(--solaris-spacing-2);
19
+ --solaris-button-custom-active-border-color: initial;
20
+ --solaris-button-custom-hover-color: initial;
21
+ --solaris-button-custom-active-color: initial;
22
+ --solaris-button-min-width: var(--solaris-spacing-20);
23
+ --solaris-button-font-size: var(--solaris-font-size-md);
24
+ --solaris-button-background: var(--solaris-primary-base);
25
+ --solaris-button-disabled-opacity: var(--solaris-opacity-50);
26
+ --solaris-button-hover-color: var(--solaris-primary-active);
27
+ --solaris-button-active-color: var(--solaris-primary-active);
28
+ --solaris-button-focus-ring-color: var(--solaris-primary-base);
29
+ --solaris-button-font-weight: var(--solaris-font-weight-medium);
30
+ --solaris-button-hover-background: var(--solaris-primary-hover);
31
+ --solaris-button-active-background: var(--solaris-primary-active);
32
+
33
+ cursor: pointer;
34
+ user-select: none;
35
+ align-items: center;
36
+ display: inline-flex;
37
+ text-decoration: none;
38
+ box-sizing: border-box;
39
+ justify-content: center;
40
+ gap: var(--solaris-button-gap);
41
+ color: var(--solaris-button-color);
42
+ height: var(--solaris-button-height);
43
+ line-height: var(--solaris-line-height-sm);
44
+ min-width: var(--solaris-button-min-width);
45
+ font-size: var(--solaris-button-font-size);
46
+ border-radius: var(--solaris-button-radius);
47
+ background: var(--solaris-button-background);
48
+ font-weight: var(--solaris-button-font-weight);
49
+ font-family: var(--solaris-font-family-sans), system-ui;
50
+ padding: var(--solaris-button-padding-y) var(--solaris-button-padding-x);
51
+ border: var(--solaris-button-border-width) solid
52
+ var(--solaris-button-border-color);
53
+ transition:
54
+ background var(--solaris-motion-duration-slow)
55
+ var(--solaris-motion-easing-standard),
56
+ border-color var(--solaris-motion-duration-slow)
57
+ var(--solaris-motion-easing-standard),
58
+ color var(--solaris-motion-duration-slow)
59
+ var(--solaris-motion-easing-standard),
60
+ box-shadow var(--solaris-motion-duration-slow)
61
+ var(--solaris-motion-easing-standard),
62
+ transform var(--solaris-motion-duration-slow)
63
+ var(--solaris-motion-easing-standard);
64
+ }
65
+
66
+ [solaris-button]:hover {
67
+ color: var(--solaris-button-hover-color);
68
+ background: var(--solaris-button-hover-background);
69
+ border-color: var(--solaris-button-hover-border-color);
70
+ }
71
+
72
+ [solaris-button]:active,
73
+ [solaris-button][data-active] {
74
+ color: var(--solaris-button-active-color);
75
+ background: var(--solaris-button-active-background);
76
+ border-color: var(--solaris-button-active-border-color);
77
+ }
78
+
79
+ [solaris-button]:focus-visible {
80
+ outline-offset: 2px;
81
+ outline: 2px solid var(--solaris-button-focus-ring-color);
82
+ }
83
+
84
+ [solaris-button][disabled],
85
+ [solaris-button][aria-disabled='true'] {
86
+ cursor: not-allowed;
87
+ pointer-events: all;
88
+ color: var(--solaris-text-muted);
89
+ opacity: var(--solaris-button-disabled-opacity);
90
+ }
91
+
92
+ [solaris-button][data-loading] {
93
+ cursor: wait;
94
+ position: relative;
95
+ pointer-events: all;
96
+ }
97
+
98
+ [solaris-button][data-loading]::before {
99
+ content: '';
100
+ flex-shrink: 0;
101
+ border-radius: 50%;
102
+ width: var(--solaris-button-icon-size);
103
+ height: var(--solaris-button-icon-size);
104
+ border: 2px solid var(--solaris-button-color);
105
+ border-top-color: transparent;
106
+ animation: solaris-button-spin 0.6s var(--solaris-motion-easing-linear)
107
+ infinite;
108
+ }
109
+
110
+ @media (prefers-reduced-motion: reduce) {
111
+ [solaris-button][data-loading]::before {
112
+ animation: none;
113
+ opacity: var(--solaris-opacity-50);
114
+ }
115
+ }
116
+
117
+ [data-reduced-motion='true'] [solaris-button][data-loading]::before {
118
+ animation: none;
119
+ opacity: var(--solaris-opacity-50);
120
+ }
121
+
122
+ @keyframes solaris-button-spin {
123
+ to {
124
+ transform: rotate(360deg);
125
+ }
126
+ }
127
+
128
+ [solaris-button][data-full-width] {
129
+ width: 100%;
130
+ }
131
+
132
+ [solaris-button] [solaris-button-icon] {
133
+ flex-shrink: 0;
134
+ align-items: center;
135
+ display: inline-flex;
136
+ justify-content: center;
137
+ width: var(--solaris-button-icon-size);
138
+ height: var(--solaris-button-icon-size);
139
+ }
140
+
141
+ [solaris-button] [solaris-button-icon] svg {
142
+ width: 100%;
143
+ height: 100%;
144
+ display: block;
145
+ }
146
+
147
+ [solaris-button][data-appearance='solid'] {
148
+ --solaris-button-border-width: 0;
149
+ }
150
+
151
+ [solaris-button][data-appearance='outline'] {
152
+ --solaris-button-background: transparent;
153
+ --solaris-button-border-width: var(--solaris-border-width-sm);
154
+ }
155
+
156
+ [solaris-button][data-appearance='ghost'] {
157
+ --solaris-button-border-width: 0;
158
+ --solaris-button-background: transparent;
159
+ --solaris-button-border-color: transparent;
160
+ }
161
+
162
+ [solaris-button][data-appearance='tonal'] {
163
+ --solaris-button-border-width: var(--solaris-border-width-sm);
164
+ }
165
+
166
+ [solaris-button][data-appearance='surface'] {
167
+ --solaris-button-border-width: 0;
168
+ }
169
+
170
+ [solaris-button][data-color='neutral'][data-appearance='solid'] {
171
+ --solaris-button-color: var(--solaris-text-inverse);
172
+ --solaris-button-hover-color: var(--solaris-text-inverse);
173
+ --solaris-button-active-color: var(--solaris-text-inverse);
174
+ --solaris-button-background: var(--solaris-surface-reverse);
175
+ --solaris-button-focus-ring-color: var(--solaris-text-default);
176
+ --solaris-button-hover-background: var(--solaris-surface-reverse-subtle);
177
+ --solaris-button-active-background: var(--solaris-surface-reverse-muted);
178
+ }
179
+
180
+ [solaris-button][data-color='neutral'][data-appearance='outline'] {
181
+ --solaris-button-color: var(--solaris-text-default);
182
+ --solaris-button-hover-color: var(--solaris-text-inverse);
183
+ --solaris-button-active-color: var(--solaris-text-inverse);
184
+ --solaris-button-border-color: var(--solaris-border-default);
185
+ --solaris-button-focus-ring-color: var(--solaris-text-default);
186
+ --solaris-button-hover-border-color: var(--solaris-border-strong);
187
+ --solaris-button-hover-background: var(--solaris-surface-reverse);
188
+ --solaris-button-active-background: var(--solaris-surface-reverse-muted);
189
+ }
190
+
191
+ [solaris-button][data-color='neutral'][data-appearance='ghost'] {
192
+ --solaris-button-color: var(--solaris-text-default);
193
+ --solaris-button-hover-color: var(--solaris-text-default);
194
+ --solaris-button-active-color: var(--solaris-text-default);
195
+ --solaris-button-focus-ring-color: var(--solaris-text-default);
196
+ --solaris-button-hover-background: var(--solaris-surface-muted);
197
+ --solaris-button-active-background: var(--solaris-surface-muted);
198
+ }
199
+
200
+ [solaris-button][data-color='neutral'][data-appearance='tonal'] {
201
+ --solaris-button-color: var(--solaris-text-default);
202
+ --solaris-button-background: var(--solaris-surface-muted);
203
+ --solaris-button-hover-color: var(--solaris-text-default);
204
+ --solaris-button-active-color: var(--solaris-text-default);
205
+ --solaris-button-border-color: var(--solaris-border-default);
206
+ --solaris-button-focus-ring-color: var(--solaris-text-default);
207
+ --solaris-button-hover-background: var(--solaris-surface-subtle);
208
+ --solaris-button-hover-border-color: var(--solaris-border-strong);
209
+ --solaris-button-active-background: var(--solaris-surface-subtle);
210
+ }
211
+
212
+ [solaris-button][data-color='neutral'][data-appearance='surface'] {
213
+ --solaris-button-color: var(--solaris-text-default);
214
+ --solaris-button-background: var(--solaris-surface-muted);
215
+ --solaris-button-hover-color: var(--solaris-text-default);
216
+ --solaris-button-active-color: var(--solaris-text-default);
217
+ --solaris-button-focus-ring-color: var(--solaris-text-default);
218
+ --solaris-button-hover-background: var(--solaris-surface-subtle);
219
+ --solaris-button-active-background: var(--solaris-surface-subtle);
220
+ }
221
+
222
+ [solaris-button][data-color='primary'][data-appearance='solid'] {
223
+ --solaris-button-color: var(--solaris-primary-text);
224
+ --solaris-button-hover-color: var(--solaris-primary-text);
225
+ --solaris-button-active-color: var(--solaris-primary-text);
226
+ --solaris-button-background: var(--solaris-primary-base);
227
+ --solaris-button-focus-ring-color: var(--solaris-primary-base);
228
+ --solaris-button-hover-background: var(--solaris-primary-hover);
229
+ --solaris-button-active-background: var(--solaris-primary-active);
230
+ }
231
+
232
+ [solaris-button][data-color='primary'][data-appearance='outline'] {
233
+ --solaris-button-color: var(--solaris-primary-base);
234
+ --solaris-button-hover-color: var(--solaris-primary-text);
235
+ --solaris-button-active-color: var(--solaris-primary-text);
236
+ --solaris-button-border-color: var(--solaris-primary-border);
237
+ --solaris-button-focus-ring-color: var(--solaris-primary-base);
238
+ --solaris-button-hover-background: var(--solaris-primary-surface);
239
+ --solaris-button-active-background: var(--solaris-primary-surface);
240
+ }
241
+
242
+ [solaris-button][data-color='primary'][data-appearance='ghost'] {
243
+ --solaris-button-color: var(--solaris-primary-base);
244
+ --solaris-button-hover-color: var(--solaris-primary-text);
245
+ --solaris-button-active-color: var(--solaris-primary-text);
246
+ --solaris-button-focus-ring-color: var(--solaris-primary-base);
247
+ --solaris-button-hover-background: var(--solaris-primary-surface);
248
+ --solaris-button-active-background: var(--solaris-primary-surface);
249
+ }
250
+
251
+ [solaris-button][data-color='primary'][data-appearance='tonal'] {
252
+ --solaris-button-color: var(--solaris-primary-text);
253
+ --solaris-button-hover-color: var(--solaris-primary-text);
254
+ --solaris-button-active-color: var(--solaris-primary-text);
255
+ --solaris-button-background: var(--solaris-primary-surface);
256
+ --solaris-button-border-color: var(--solaris-primary-border);
257
+ --solaris-button-focus-ring-color: var(--solaris-primary-base);
258
+ --solaris-button-hover-background: var(--solaris-primary-hover);
259
+ --solaris-button-hover-border-color: var(--solaris-primary-base);
260
+ --solaris-button-active-background: var(--solaris-primary-active);
261
+ }
262
+
263
+ [solaris-button][data-color='primary'][data-appearance='surface'] {
264
+ --solaris-button-color: var(--solaris-primary-text);
265
+ --solaris-button-hover-color: var(--solaris-primary-text);
266
+ --solaris-button-active-color: var(--solaris-primary-text);
267
+ --solaris-button-background: var(--solaris-primary-surface);
268
+ --solaris-button-focus-ring-color: var(--solaris-primary-base);
269
+ --solaris-button-hover-background: var(--solaris-primary-hover);
270
+ --solaris-button-active-background: var(--solaris-primary-active);
271
+ }
272
+
273
+ [solaris-button][data-color='success'][data-appearance='solid'] {
274
+ --solaris-button-color: var(--solaris-success-on-solid);
275
+ --solaris-button-background: var(--solaris-success-base);
276
+ --solaris-button-hover-color: var(--solaris-success-on-solid);
277
+ --solaris-button-active-color: var(--solaris-success-on-solid);
278
+ --solaris-button-focus-ring-color: var(--solaris-success-base);
279
+ --solaris-button-hover-background: var(--solaris-success-hover);
280
+ --solaris-button-active-background: var(--solaris-success-active);
281
+ }
282
+
283
+ [solaris-button][data-color='success'][data-appearance='outline'] {
284
+ --solaris-button-color: var(--solaris-success-text);
285
+ --solaris-button-hover-color: var(--solaris-success-text);
286
+ --solaris-button-active-color: var(--solaris-success-text);
287
+ --solaris-button-border-color: var(--solaris-success-border);
288
+ --solaris-button-focus-ring-color: var(--solaris-success-base);
289
+ --solaris-button-hover-background: var(--solaris-success-surface);
290
+ --solaris-button-active-background: var(--solaris-success-surface);
291
+ }
292
+
293
+ [solaris-button][data-color='success'][data-appearance='ghost'] {
294
+ --solaris-button-color: var(--solaris-success-text);
295
+ --solaris-button-hover-color: var(--solaris-success-text);
296
+ --solaris-button-active-color: var(--solaris-success-text);
297
+ --solaris-button-focus-ring-color: var(--solaris-success-base);
298
+ --solaris-button-hover-background: var(--solaris-success-surface);
299
+ --solaris-button-active-background: var(--solaris-success-surface);
300
+ }
301
+
302
+ [solaris-button][data-color='success'][data-appearance='tonal'] {
303
+ --solaris-button-color: var(--solaris-success-text);
304
+ --solaris-button-hover-color: var(--solaris-success-text);
305
+ --solaris-button-active-color: var(--solaris-success-text);
306
+ --solaris-button-background: var(--solaris-success-surface);
307
+ --solaris-button-border-color: var(--solaris-success-border);
308
+ --solaris-button-focus-ring-color: var(--solaris-success-base);
309
+ --solaris-button-hover-background: var(--solaris-success-hover);
310
+ --solaris-button-hover-border-color: var(--solaris-success-base);
311
+ --solaris-button-active-background: var(--solaris-success-active);
312
+ }
313
+
314
+ [solaris-button][data-color='success'][data-appearance='surface'] {
315
+ --solaris-button-color: var(--solaris-success-text);
316
+ --solaris-button-hover-color: var(--solaris-success-text);
317
+ --solaris-button-active-color: var(--solaris-success-text);
318
+ --solaris-button-background: var(--solaris-success-surface);
319
+ --solaris-button-focus-ring-color: var(--solaris-success-base);
320
+ --solaris-button-hover-background: var(--solaris-success-hover);
321
+ --solaris-button-active-background: var(--solaris-success-active);
322
+ }
323
+
324
+ [solaris-button][data-color='warning'][data-appearance='solid'] {
325
+ --solaris-button-color: var(--solaris-warning-on-solid);
326
+ --solaris-button-background: var(--solaris-warning-base);
327
+ --solaris-button-hover-color: var(--solaris-warning-on-solid);
328
+ --solaris-button-active-color: var(--solaris-success-on-solid);
329
+ --solaris-button-focus-ring-color: var(--solaris-warning-base);
330
+ --solaris-button-hover-background: var(--solaris-warning-hover);
331
+ --solaris-button-active-background: var(--solaris-warning-active);
332
+ }
333
+
334
+ [solaris-button][data-color='warning'][data-appearance='outline'] {
335
+ --solaris-button-color: var(--solaris-warning-text);
336
+ --solaris-button-border-color: var(--solaris-warning-border);
337
+ --solaris-button-hover-color: var(--solaris-warning-text);
338
+ --solaris-button-active-color: var(--solaris-warning-text);
339
+ --solaris-button-focus-ring-color: var(--solaris-warning-base);
340
+ --solaris-button-hover-background: var(--solaris-warning-surface);
341
+ --solaris-button-active-background: var(--solaris-warning-surface);
342
+ }
343
+
344
+ [solaris-button][data-color='warning'][data-appearance='ghost'] {
345
+ --solaris-button-color: var(--solaris-warning-text);
346
+ --solaris-button-hover-color: var(--solaris-warning-text);
347
+ --solaris-button-active-color: var(--solaris-warning-text);
348
+ --solaris-button-focus-ring-color: var(--solaris-warning-base);
349
+ --solaris-button-hover-background: var(--solaris-warning-surface);
350
+ --solaris-button-active-background: var(--solaris-warning-surface);
351
+ }
352
+
353
+ [solaris-button][data-color='warning'][data-appearance='tonal'] {
354
+ --solaris-button-color: var(--solaris-warning-text);
355
+ --solaris-button-hover-color: var(--solaris-warning-text);
356
+ --solaris-button-active-color: var(--solaris-warning-text);
357
+ --solaris-button-background: var(--solaris-warning-surface);
358
+ --solaris-button-border-color: var(--solaris-warning-border);
359
+ --solaris-button-focus-ring-color: var(--solaris-warning-base);
360
+ --solaris-button-hover-background: var(--solaris-warning-hover);
361
+ --solaris-button-hover-border-color: var(--solaris-warning-base);
362
+ --solaris-button-active-background: var(--solaris-warning-active);
363
+ }
364
+
365
+ [solaris-button][data-color='warning'][data-appearance='surface'] {
366
+ --solaris-button-color: var(--solaris-warning-text);
367
+ --solaris-button-hover-color: var(--solaris-warning-text);
368
+ --solaris-button-active-color: var(--solaris-warning-text);
369
+ --solaris-button-background: var(--solaris-warning-surface);
370
+ --solaris-button-focus-ring-color: var(--solaris-warning-base);
371
+ --solaris-button-hover-background: var(--solaris-warning-hover);
372
+ --solaris-button-active-background: var(--solaris-warning-active);
373
+ }
374
+
375
+ [solaris-button][data-color='danger'][data-appearance='solid'] {
376
+ --solaris-button-color: var(--solaris-danger-on-solid);
377
+ --solaris-button-background: var(--solaris-danger-base);
378
+ --solaris-button-hover-color: var(--solaris-danger-on-solid);
379
+ --solaris-button-active-color: var(--solaris-danger-on-solid);
380
+ --solaris-button-focus-ring-color: var(--solaris-danger-base);
381
+ --solaris-button-hover-background: var(--solaris-danger-hover);
382
+ --solaris-button-active-background: var(--solaris-danger-active);
383
+ }
384
+
385
+ [solaris-button][data-color='danger'][data-appearance='outline'] {
386
+ --solaris-button-color: var(--solaris-danger-text);
387
+ --solaris-button-hover-color: var(--solaris-danger-text);
388
+ --solaris-button-active-color: var(--solaris-danger-text);
389
+ --solaris-button-border-color: var(--solaris-danger-border);
390
+ --solaris-button-focus-ring-color: var(--solaris-danger-base);
391
+ --solaris-button-hover-background: var(--solaris-danger-surface);
392
+ --solaris-button-active-background: var(--solaris-danger-surface);
393
+ }
394
+
395
+ [solaris-button][data-color='danger'][data-appearance='ghost'] {
396
+ --solaris-button-color: var(--solaris-danger-text);
397
+ --solaris-button-hover-color: var(--solaris-danger-text);
398
+ --solaris-button-active-color: var(--solaris-danger-text);
399
+ --solaris-button-focus-ring-color: var(--solaris-danger-base);
400
+ --solaris-button-hover-background: var(--solaris-danger-surface);
401
+ --solaris-button-active-background: var(--solaris-danger-surface);
402
+ }
403
+
404
+ [solaris-button][data-color='danger'][data-appearance='tonal'] {
405
+ --solaris-button-color: var(--solaris-danger-text);
406
+ --solaris-button-hover-color: var(--solaris-danger-text);
407
+ --solaris-button-active-color: var(--solaris-danger-text);
408
+ --solaris-button-background: var(--solaris-danger-surface);
409
+ --solaris-button-border-color: var(--solaris-danger-border);
410
+ --solaris-button-focus-ring-color: var(--solaris-danger-base);
411
+ --solaris-button-hover-background: var(--solaris-danger-hover);
412
+ --solaris-button-hover-border-color: var(--solaris-danger-base);
413
+ --solaris-button-active-background: var(--solaris-danger-active);
414
+ }
415
+
416
+ [solaris-button][data-color='danger'][data-appearance='surface'] {
417
+ --solaris-button-color: var(--solaris-danger-text);
418
+ --solaris-button-hover-color: var(--solaris-danger-text);
419
+ --solaris-button-active-color: var(--solaris-danger-text);
420
+ --solaris-button-background: var(--solaris-danger-surface);
421
+ --solaris-button-focus-ring-color: var(--solaris-danger-base);
422
+ --solaris-button-hover-background: var(--solaris-danger-hover);
423
+ --solaris-button-active-background: var(--solaris-danger-active);
424
+ }
425
+
426
+ [solaris-button][data-color='info'][data-appearance='solid'] {
427
+ --solaris-button-color: var(--solaris-info-text);
428
+ --solaris-button-background: var(--solaris-info-base);
429
+ --solaris-button-hover-color: var(--solaris-info-text);
430
+ --solaris-button-active-color: var(--solaris-info-text);
431
+ --solaris-button-focus-ring-color: var(--solaris-info-base);
432
+ --solaris-button-hover-background: var(--solaris-info-hover);
433
+ --solaris-button-active-background: var(--solaris-info-active);
434
+ }
435
+
436
+ [solaris-button][data-color='info'][data-appearance='outline'] {
437
+ --solaris-button-color: var(--solaris-info-text);
438
+ --solaris-button-hover-color: var(--solaris-info-text);
439
+ --solaris-button-active-color: var(--solaris-info-text);
440
+ --solaris-button-border-color: var(--solaris-info-border);
441
+ --solaris-button-focus-ring-color: var(--solaris-info-base);
442
+ --solaris-button-hover-background: var(--solaris-info-surface);
443
+ --solaris-button-active-background: var(--solaris-info-surface);
444
+ }
445
+
446
+ [solaris-button][data-color='info'][data-appearance='ghost'] {
447
+ --solaris-button-color: var(--solaris-info-text);
448
+ --solaris-button-hover-color: var(--solaris-info-text);
449
+ --solaris-button-active-color: var(--solaris-info-text);
450
+ --solaris-button-focus-ring-color: var(--solaris-info-base);
451
+ --solaris-button-hover-background: var(--solaris-info-surface);
452
+ --solaris-button-active-background: var(--solaris-info-surface);
453
+ }
454
+
455
+ [solaris-button][data-color='info'][data-appearance='tonal'] {
456
+ --solaris-button-color: var(--solaris-info-text);
457
+ --solaris-button-hover-color: var(--solaris-info-text);
458
+ --solaris-button-active-color: var(--solaris-info-text);
459
+ --solaris-button-background: var(--solaris-info-surface);
460
+ --solaris-button-border-color: var(--solaris-info-border);
461
+ --solaris-button-focus-ring-color: var(--solaris-info-base);
462
+ --solaris-button-hover-background: var(--solaris-info-hover);
463
+ --solaris-button-hover-border-color: var(--solaris-info-base);
464
+ --solaris-button-active-background: var(--solaris-info-active);
465
+ }
466
+
467
+ [solaris-button][data-color='info'][data-appearance='surface'] {
468
+ --solaris-button-color: var(--solaris-info-text);
469
+ --solaris-button-hover-color: var(--solaris-info-text);
470
+ --solaris-button-active-color: var(--solaris-info-text);
471
+ --solaris-button-background: var(--solaris-info-surface);
472
+ --solaris-button-focus-ring-color: var(--solaris-info-base);
473
+ --solaris-button-hover-background: var(--solaris-info-hover);
474
+ --solaris-button-active-background: var(--solaris-info-active);
475
+ }
476
+
477
+ [solaris-button][data-color='custom'] {
478
+ --solaris-button-hover-background: var(
479
+ --solaris-button-custom-hover-background
480
+ );
481
+ --solaris-button-active-background: var(
482
+ --solaris-button-custom-active-background
483
+ );
484
+ --solaris-button-hover-border-color: var(
485
+ --solaris-button-custom-hover-border-color
486
+ );
487
+ --solaris-button-active-border-color: var(
488
+ --solaris-button-custom-active-border-color
489
+ );
490
+ --solaris-button-color: var(
491
+ --solaris-button-custom-color,
492
+ var(--solaris-text-default)
493
+ );
494
+ --solaris-button-background: var(
495
+ --solaris-button-custom-background,
496
+ var(--solaris-surface-base)
497
+ );
498
+ --solaris-button-focus-ring-color: var(
499
+ --solaris-button-custom-color,
500
+ var(--solaris-text-default)
501
+ );
502
+ --solaris-button-border-color: var(
503
+ --solaris-button-custom-border-color,
504
+ var(--solaris-border-default)
505
+ );
506
+ --solaris-button-hover-color: var(
507
+ --solaris-button-custom-hover-color,
508
+ var(--solaris-button-custom-color, var(--solaris-text-default))
509
+ );
510
+ --solaris-button-active-color: var(
511
+ --solaris-button-custom-active-color,
512
+ var(--solaris-button-custom-color, var(--solaris-text-default))
513
+ );
514
+ }
515
+
516
+ [solaris-button][data-size='sm'] {
517
+ --solaris-button-gap: var(--solaris-spacing-1);
518
+ --solaris-button-height: var(--solaris-spacing-8);
519
+ --solaris-button-padding-x: var(--solaris-spacing-3);
520
+ --solaris-button-padding-y: var(--solaris-spacing-1);
521
+ --solaris-button-min-width: var(--solaris-spacing-16);
522
+ --solaris-button-icon-size: var(--solaris-font-size-sm);
523
+ --solaris-button-font-size: var(--solaris-font-size-sm);
524
+ --solaris-button-font-weight: var(--solaris-font-weight-medium);
525
+ }
526
+
527
+ [solaris-button][data-size='md'] {
528
+ --solaris-button-gap: var(--solaris-spacing-2);
529
+ --solaris-button-height: var(--solaris-spacing-10);
530
+ --solaris-button-padding-y: var(--solaris-spacing-2);
531
+ --solaris-button-padding-x: var(--solaris-spacing-4);
532
+ --solaris-button-icon-size: var(--solaris-spacing-4);
533
+ --solaris-button-min-width: var(--solaris-spacing-20);
534
+ --solaris-button-font-size: var(--solaris-font-size-md);
535
+ --solaris-button-font-weight: var(--solaris-font-weight-medium);
536
+ }
537
+
538
+ [solaris-button][data-size='lg'] {
539
+ --solaris-button-gap: var(--solaris-spacing-2);
540
+ --solaris-button-height: var(--solaris-spacing-12);
541
+ --solaris-button-padding-y: var(--solaris-spacing-2);
542
+ --solaris-button-padding-x: var(--solaris-spacing-5);
543
+ --solaris-button-icon-size: var(--solaris-spacing-5);
544
+ --solaris-button-min-width: var(--solaris-spacing-24);
545
+ --solaris-button-font-size: var(--solaris-font-size-lg);
546
+ --solaris-button-font-weight: var(--solaris-font-weight-semibold);
547
+ }
548
+
549
+ [solaris-button][data-radius='none'] {
550
+ --solaris-button-radius: var(--solaris-radius-none);
551
+ }
552
+
553
+ [solaris-button][data-radius='sm'] {
554
+ --solaris-button-radius: var(--solaris-radius-sm);
555
+ }
556
+
557
+ [solaris-button][data-radius='md'] {
558
+ --solaris-button-radius: var(--solaris-radius-md);
559
+ }
560
+
561
+ [solaris-button][data-radius='lg'] {
562
+ --solaris-button-radius: var(--solaris-radius-lg);
563
+ }
564
+
565
+ [solaris-button][data-radius='full'] {
566
+ --solaris-button-radius: var(--solaris-radius-full);
567
+ }
568
+
569
+ [solaris-button][data-density='compact'] {
570
+ --solaris-button-gap: var(--solaris-density-gap-md);
571
+ --solaris-button-padding-y: var(--solaris-spacing-4);
572
+ --solaris-button-min-width: var(--solaris-spacing-10);
573
+ --solaris-button-icon-size: var(--solaris-font-size-sm);
574
+ --solaris-button-height: var(--solaris-density-min-height);
575
+ --solaris-button-padding-x: var(--solaris-density-padding-lg);
576
+ }
577
+
578
+ [solaris-button][data-density='comfortable'] {
579
+ --solaris-button-gap: var(--solaris-density-gap-md);
580
+ --solaris-button-icon-size: var(--solaris-spacing-4);
581
+ --solaris-button-padding-y: var(--solaris-spacing-4);
582
+ --solaris-button-height: var(--solaris-density-min-height);
583
+ --solaris-button-padding-x: var(--solaris-density-padding-lg);
584
+ }