@acorex/styles 18.12.29 → 18.12.33

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 (54) hide show
  1. package/README.md +32 -32
  2. package/icons/fontawesome/_variables.scss +185 -185
  3. package/icons/fontawesome/fontawesome.scss +17 -17
  4. package/icons/huge/huge-bulk/_variables.scss +185 -185
  5. package/icons/huge/huge-bulk/bulk-rounded.scss +13 -13
  6. package/icons/huge/huge-duotone/_variables.scss +185 -185
  7. package/icons/huge/huge-duotone/duotone-rounded.scss +13 -13
  8. package/icons/huge/huge-solid/solid-rounded.scss +13 -13
  9. package/icons/huge/huge-solid/solid-sharp.scss +13 -13
  10. package/icons/huge/huge-solid/solid-standard.scss +13 -13
  11. package/icons/huge/huge-solid/variables/_rounded-variables.scss +185 -185
  12. package/icons/huge/huge-solid/variables/_sharp-variables.scss +185 -185
  13. package/icons/huge/huge-solid/variables/_standard-variables.scss +185 -185
  14. package/icons/huge/huge-stroke/stroke-rounded.scss +13 -13
  15. package/icons/huge/huge-stroke/stroke-sharp.scss +13 -13
  16. package/icons/huge/huge-stroke/stroke-standard.scss +13 -13
  17. package/icons/huge/huge-stroke/variables/_rounded-variables.scss +185 -185
  18. package/icons/huge/huge-stroke/variables/_sharp-variables.scss +185 -185
  19. package/icons/huge/huge-stroke/variables/_standard-variables.scss +185 -185
  20. package/icons/huge/huge-twotone/_variables.scss +185 -185
  21. package/icons/huge/huge-twotone/twotone-rounded.scss +13 -13
  22. package/icons/index.scss +570 -570
  23. package/icons/material/_variables.scss +185 -185
  24. package/icons/material/material.scss +22 -22
  25. package/index.css +3058 -0
  26. package/index.min.css +1 -0
  27. package/index.scss +9 -9
  28. package/package.json +11 -11
  29. package/src/base/_preflight.scss +405 -405
  30. package/src/base/index.scss +13 -13
  31. package/src/mixins/_look.scss +83 -83
  32. package/src/mixins/_media.scss +73 -73
  33. package/src/mixins/_util.scss +19 -19
  34. package/src/mixins/index.scss +3 -3
  35. package/src/shared/_action-item.scss +109 -109
  36. package/src/shared/_actionsheet.scss +20 -20
  37. package/src/shared/_check-box.scss +60 -60
  38. package/src/shared/_color-look.scss +864 -864
  39. package/src/shared/_drop-down.scss +76 -76
  40. package/src/shared/_editor-container.scss +258 -258
  41. package/src/shared/_general-button.scss +87 -87
  42. package/src/shared/_inputs.scss +16 -16
  43. package/src/shared/_list.scss +199 -199
  44. package/src/shared/_radio.scss +57 -57
  45. package/src/shared/_table.scss +149 -149
  46. package/src/shared/_utils.scss +84 -84
  47. package/src/shared/index.scss +12 -12
  48. package/src/utility/index.scss +24 -24
  49. package/src/variables/_colors.scss +2 -2
  50. package/src/variables/_degrees.scss +1 -1
  51. package/src/variables/index.scss +2 -2
  52. package/tailwind-base.js +234 -234
  53. package/themes/default.css +1 -0
  54. package/themes/default.scss +143 -143
package/src/shared/_color-look.scss CHANGED
@@ -1,864 +1,864 @@
1
- @import '../variables/index.scss';
2
-
3
- @each $color in $color_names {
4
- @each $look in $look_names {
5
- @if ($look == 'solid') {
6
- .ax-el-#{$color}-#{$look} {
7
- // @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore ax-border-#{$color}-500;
8
- background-color: rgba(var(--ax-color-#{$color}-500));
9
- color: rgba(var(--ax-color-#{$color}-fore));
10
- border-color: rgba(var(--ax-color-#{$color}-500));
11
- &.ax-el-interactive {
12
- &:hover {
13
- &:not(.ax-state-disabled) {
14
- // @apply ax-bg-#{$color}-600;
15
- background-color: rgba(var(--ax-color-#{$color}-600));
16
- }
17
- }
18
- }
19
-
20
- &.ax-state-selected {
21
- // @apply ax-bg-#{$color}-700;
22
- background-color: rgba(var(--ax-color-#{$color}-700));
23
- }
24
- .ax-ripple {
25
- // @apply ax-bg-#{$color}-300/30 #{!important};
26
- background-color: rgba(var(--ax-color-#{$color}-300), 0.3) !important;
27
- }
28
- ax-loading-spinner {
29
- .ax-loader {
30
- // @apply ax-border-#{$color}-fore ax-border-b-transparent;
31
- border-color: rgba(var(--ax-color-#{$color}-fore));
32
- border-bottom-color: transparent;
33
- }
34
- }
35
- &:is(&:focus-visible, &.ax-state-focus) {
36
- // @apply ax-outline-#{$color}-500;
37
- outline-color: rgba(var(--ax-color-#{$color}-500));
38
- }
39
- & > button {
40
- &:is(&:focus-visible, &.ax-state-focus) {
41
- // @apply ax-outline-#{$color}-500;
42
- outline-color: rgba(var(--ax-color-#{$color}-500));
43
- }
44
- }
45
- &.ax-dropdown-button-marker {
46
- border-inline-start-color: rgba(var(--ax-color-#{$color}-600));
47
- }
48
- }
49
- }
50
-
51
- @if ($look == 'outline') {
52
- .ax-el-#{$color}-#{$look} {
53
- // @apply ax-border-#{$color}-500 ax-text-#{$color}-500 ax-border ax-bg-transparent;
54
- background-color: transparent;
55
- color: rgba(var(--ax-color-#{$color}-500));
56
- border-color: rgba(var(--ax-color-#{$color}-500));
57
- border-width: 1px;
58
- &.ax-el-interactive {
59
- &:hover {
60
- &:not(.ax-state-disabled) {
61
- // @apply ax-border-#{$color}-700 ax-text-#{$color}-700;
62
- color: rgba(var(--ax-color-#{$color}-700));
63
- border-color: rgba(var(--ax-color-#{$color}-700));
64
- }
65
- }
66
- }
67
- &.ax-state-selected {
68
- // @apply ax-border-#{$color}-500 ax-text-#{$color}-fore ax-bg-#{$color}-500;
69
- border-color: rgba(var(--ax-color-#{$color}-500));
70
- color: rgba(var(--ax-color-#{$color}-fore));
71
- background-color: rgba(var(--ax-color-#{$color}-500));
72
- }
73
- .ax-ripple {
74
- // @apply ax-bg-#{$color}-500/30 #{!important};
75
- background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
76
- }
77
- ax-loading-spinner {
78
- .ax-loader {
79
- // @apply ax-border-#{$color}-500 ax-border-b-transparent;
80
- border-color: rgba(var(--ax-color-#{$color}-500));
81
- border-bottom-color: transparent;
82
- }
83
- }
84
- &:is(&:focus-visible, &.ax-state-focus) {
85
- // @apply ax-text-#{$color}-fore-tint ax-outline-#{$color}-fore-tint -ax-outline-offset-4;
86
- outline-offset: -2px;
87
- outline-color: rgba(var(--ax-color-#{$color}-500));
88
- color: rgba(var(--ax-color-#{$color}-fore-tint));
89
- }
90
- & > button {
91
- &:is(&:focus-visible, &.ax-state-focus) {
92
- // @apply ax-text-#{$color}-fore-tint ax-outline-#{$color}-fore-tint -ax-outline-offset-4;
93
- outline-offset: -2px;
94
- outline-color: rgba(var(--ax-color-#{$color}-500));
95
- color: rgba(var(--ax-color-#{$color}-fore-tint));
96
- }
97
- }
98
- &.ax-dropdown-button-marker {
99
- border-inline-start-color: rgba(var(--ax-color-#{$color}-500));
100
- }
101
- }
102
- }
103
-
104
- @if ($look == 'blank') {
105
- .ax-el-#{$color}-#{$look} {
106
- // @apply ax-text-#{$color}-500;
107
- color: rgba(var(--ax-color-#{$color}-500));
108
-
109
- &.ax-el-interactive {
110
- &:hover {
111
- &:not(.ax-state-disabled) {
112
- // @apply ax-text-#{$color}-fore-tint;
113
- background-color: rgba(var(--ax-color-#{$color}-100));
114
- color: rgba(var(--ax-color-#{$color}-fore-tint));
115
- }
116
- }
117
- }
118
-
119
- &.ax-state-selected {
120
- // @apply ax-bg-#{$color}-700 ax-text-#{$color}-fore;
121
- background-color: rgba(var(--ax-color-#{$color}-700));
122
- color: rgba(var(--ax-color-#{$color}-fore));
123
- }
124
- .ax-ripple {
125
- // @apply ax-bg-#{$color}-500/30 #{!important};
126
- background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
127
- }
128
- ax-loading-spinner {
129
- .ax-loader {
130
- // @apply ax-border-#{$color}-500 ax-border-b-transparent;
131
- border-color: rgba(var(--ax-color-#{$color}-500));
132
- border-bottom-color: transparent;
133
- }
134
- }
135
- &:is(&:focus-visible, &.ax-state-focus) {
136
- // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
137
- outline-color: rgba(var(--ax-color-#{$color}-300));
138
- outline-offset: 0;
139
- }
140
- & > button {
141
- &:is(&:focus-visible, &.ax-state-focus) {
142
- // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
143
- outline-color: rgba(var(--ax-color-#{$color}-300));
144
- outline-offset: 0;
145
- }
146
- }
147
- &.ax-dropdown-button-marker {
148
- border-inline-start-color: transparent;
149
- }
150
- }
151
- }
152
-
153
- @if ($look == 'twotone') {
154
- .ax-el-#{$color}-#{$look} {
155
- // @apply ax-bg-#{$color}-100 ax-text-#{$color}-fore-tint ax-border-#{$color}-100;
156
- background-color: rgba(var(--ax-color-#{$color}-100));
157
- color: rgba(var(--ax-color-#{$color}-fore-tint));
158
- border-color: rgba(var(--ax-color-#{$color}-100));
159
-
160
- &.ax-el-interactive {
161
- &:hover {
162
- &:not(.ax-state-disabled) {
163
- // @apply ax-bg-#{$color}-200;
164
- background-color: rgba(var(--ax-color-#{$color}-200));
165
- }
166
- }
167
- }
168
-
169
- &.ax-state-selected {
170
- // @apply ax-bg-#{$color}-300;
171
- background-color: rgba(var(--ax-color-#{$color}-300));
172
- }
173
-
174
- .ax-ripple {
175
- // @apply ax-bg-#{$color}-500/30 #{!important};
176
- background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
177
- }
178
- ax-loading-spinner {
179
- .ax-loader {
180
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
181
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
182
- border-bottom-color: transparent;
183
- }
184
- }
185
-
186
- &:is(&:focus-visible, &.ax-state-focus) {
187
- // @apply ax-outline-#{$color}-500;
188
- outline-color: rgba(var(--ax-color-#{$color}-500));
189
- }
190
- & > button {
191
- &:is(&:focus-visible, &.ax-state-focus) {
192
- // @apply ax-outline-#{$color}-500;
193
- outline-color: rgba(var(--ax-color-#{$color}-500));
194
- }
195
- }
196
- &.ax-dropdown-button-marker {
197
- border-inline-start-color: rgba(var(--ax-color-#{$color}-50));
198
- }
199
- }
200
- }
201
-
202
- @if ($look == 'link') {
203
- .ax-el-#{$color}-#{$look} {
204
- // @apply ax-text-#{$color}-500;
205
- color: rgba(var(--ax-color-#{$color}-500));
206
-
207
- &.ax-el-interactive {
208
- &:hover {
209
- &:not(.ax-state-disabled) {
210
- // @apply ax-text-#{$color}-fore-tint;
211
- color: rgba(var(--ax-color-#{$color}-700));
212
- }
213
- }
214
- }
215
-
216
- &.ax-state-selected {
217
- // @apply ax-bg-#{$color}-700 ax-text-#{$color}-fore;
218
- background-color: rgba(var(--ax-color-#{$color}-700));
219
- color: rgba(var(--ax-color-#{$color}-fore));
220
- }
221
- .ax-ripple {
222
- // @apply ax-bg-#{$color}-500/30 #{!important};
223
- background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
224
- }
225
- ax-loading-spinner {
226
- .ax-loader {
227
- // @apply ax-border-#{$color}-500 ax-border-b-transparent;
228
- border-color: rgba(var(--ax-color-#{$color}-500));
229
- border-bottom-color: transparent;
230
- }
231
- }
232
- &:is(&:focus-visible, &.ax-state-focus) {
233
- // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
234
- outline-color: rgba(var(--ax-color-#{$color}-300));
235
- outline-offset: 0;
236
- }
237
- & > button {
238
- &:is(&:focus-visible, &.ax-state-focus) {
239
- // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
240
- outline-color: rgba(var(--ax-color-#{$color}-300));
241
- outline-offset: 0;
242
- }
243
- }
244
- &.ax-dropdown-button-marker {
245
- border-inline-start-color: transparent;
246
- }
247
- }
248
- }
249
- }
250
- }
251
-
252
- .ax-el-ghost-solid {
253
- // @apply ax-border ax-border-default ax-bg-ghost ax-text-ghost-fore ax-shadow-sm;
254
- border-width: 1px;
255
- border-color: rgba(var(--ax-color-border-default));
256
- background-color: rgba(var(--ax-color-ghost));
257
- color: rgba(var(--ax-color-ghost-fore));
258
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
259
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
260
- box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
261
- &.ax-el-interactive {
262
- &:hover {
263
- &:not(&.ax-state-selected, &.ax-state-disabled) {
264
- // @apply ax-border-primary-500 ax-text-primary-500;
265
- border-color: rgba(var(--ax-color-primary-500));
266
- color: rgba(var(--ax-color-primary-500));
267
- }
268
- // + &.ax-dropdown-button-marker {
269
- // border-inline-start-color: rgba(var(--ax-color-primary-500));
270
- // }
271
- & + .ax-dropdown-button-marker {
272
- border-inline-start-color: rgba(var(--ax-color-primary-500));
273
- }
274
- }
275
- &:active {
276
- // @apply ax-border-primary-700 ax-text-primary-700;
277
- &:not(&.ax-state-disabled) {
278
- border-color: rgba(var(--ax-color-primary-700));
279
- color: rgba(var(--ax-color-primary-700));
280
- }
281
- }
282
- }
283
-
284
- &.ax-state-selected {
285
- // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
286
- border-color: rgba(var(--ax-color-primary-500));
287
- background-color: rgba(var(--ax-color-primary-500));
288
- color: rgba(var(--ax-color-primary-fore));
289
- }
290
-
291
- .ax-ripple {
292
- // @apply ax-bg-primary-500/30 #{!important};
293
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
294
- }
295
- ax-loading-spinner {
296
- .ax-loader {
297
- // @apply ax-border-ghost-fore ax-border-b-transparent;
298
- border-color: rgba(var(--ax-color-ghost-fore));
299
- border-bottom-color: transparent;
300
- }
301
- }
302
- &.ax-dropdown-button-marker {
303
- border-inline-start-color: rgba(var(--ax-color-border-default));
304
- }
305
- }
306
- .ax-el-ghost-outline {
307
- // @apply ax-border ax-border-default ax-bg-transparent ax-text-ghost-fore;
308
- border-width: 1px;
309
- border-color: rgba(var(--ax-color-border-default));
310
- background-color: transparent;
311
- color: rgba(var(--ax-color-ghost-fore));
312
-
313
- &.ax-el-interactive {
314
- &:hover {
315
- &:not(&.ax-state-selected, &.ax-state-disabled) {
316
- // @apply ax-border-primary-500 ax-text-primary-500;
317
- border-color: rgba(var(--ax-color-primary-500));
318
- color: rgba(var(--ax-color-primary-500));
319
- }
320
- & + .ax-dropdown-button-marker {
321
- border-inline-start-color: rgba(var(--ax-color-primary-500));
322
- }
323
- }
324
- }
325
-
326
- &.ax-state-selected {
327
- // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
328
- border-color: rgba(var(--ax-color-primary-500));
329
- color: rgba(var(--ax-color-primary-fore));
330
- }
331
- .ax-ripple {
332
- // @apply ax-bg-primary-500/30 #{!important};
333
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
334
- }
335
- ax-loading-spinner {
336
- .ax-loader {
337
- // @apply ax-border-ghost-fore ax-border-b-transparent;
338
- border-color: rgba(var(--ax-color-ghost-fore));
339
- border-bottom-color: transparent;
340
- }
341
- }
342
- &.ax-dropdown-button-marker {
343
- border-inline-start-color: rgba(var(--ax-color-border-default));
344
- }
345
- }
346
- .ax-el-ghost-blank {
347
- // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
348
- border-style: none;
349
- background-color: transparent;
350
- color: rgba(var(--ax-color-ghost-fore));
351
-
352
- &.ax-state-selected {
353
- // @apply ax-bg-primary-500 ax-text-primary-fore;
354
- background-color: rgba(var(--ax-color-primary-500));
355
- color: rgba(var(--ax-color-primary-fore));
356
- }
357
- &.ax-el-interactive {
358
- &:hover {
359
- &:not(&.ax-state-selected, &.ax-state-disabled) {
360
- // @apply ax-border-primary-700 ax-text-primary-700;
361
- background-color: rgba(var(--ax-color-primary-200));
362
- border-color: rgba(var(--ax-color-primary-700));
363
- color: rgba(var(--ax-color-primary-700));
364
- }
365
- }
366
- &:active {
367
- // @apply ax-border-primary-800 ax-text-primary-800;
368
- border-color: rgba(var(--ax-color-primary-800));
369
- color: rgba(var(--ax-color-primary-800));
370
- }
371
- }
372
-
373
- .ax-ripple {
374
- // @apply ax-bg-primary-500/30 #{!important};
375
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
376
- }
377
- ax-loading-spinner {
378
- .ax-loader {
379
- // @apply ax-border-ghost-fore ax-border-b-transparent;
380
- border-color: rgba(var(--ax-color-ghost-fore));
381
- border-bottom-color: transparent;
382
- }
383
- }
384
- & > button {
385
- &:is(&:focus-visible, &.ax-state-focus) {
386
- // @apply ax-outline-primary-500;
387
- outline-color: rgba(var(--ax-color-primary-500));
388
- }
389
- }
390
- &.ax-dropdown-button-marker {
391
- border-inline-start-color: rgba(var(--ax-color-border-default));
392
- }
393
- }
394
- .ax-el-ghost-twotone {
395
- // @apply ax-border-transparent ax-bg-ghost-fore/5 ax-text-ghost-fore;
396
- border-color: transparent;
397
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
398
- color: rgba(var(--ax-color-ghost-fore));
399
-
400
- &.ax-el-interactive {
401
- &:hover {
402
- &:not(&.ax-state-selected, &.ax-state-disabled) {
403
- // @apply ax-bg-primary-200 ax-text-primary-fore-tint;
404
- background-color: rgba(var(--ax-color-primary-200));
405
- color: rgba(var(--ax-color-primary-fore-tint));
406
- }
407
- & + .ax-dropdown-button-marker {
408
- border-inline-start-color: rgba(var(--ax-color-primary-500));
409
- }
410
- }
411
- &:active {
412
- // @apply ax-bg-primary-300 ax-text-primary-fore-tint;
413
- &:not(&.ax-state-disabled) {
414
- background-color: rgba(var(--ax-color-primary-300));
415
- color: rgba(var(--ax-color-primary-fore-tint));
416
- }
417
- }
418
- }
419
- &.ax-state-selected {
420
- // @apply ax-border-primary-300 ax-bg-primary-400 ax-text-primary-fore-tint;
421
- border-color: rgba(var(--ax-color-primary-300));
422
- background-color: rgba(var(--ax-color-primary-400));
423
- color: rgba(var(--ax-color-primary-fore-tint));
424
- }
425
- .ax-ripple {
426
- // @apply ax-bg-primary-500/30 #{!important};
427
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
428
- }
429
- ax-loading-spinner {
430
- .ax-loader {
431
- // @apply ax-border-ghost-fore ax-border-b-transparent;
432
- border-color: rgba(var(--ax-color-ghost-fore));
433
- border-bottom-color: transparent;
434
- }
435
- }
436
- & > button {
437
- &:is(&:focus-visible, &.ax-state-focus) {
438
- // @apply ax-outline-primary-500;
439
- outline-color: rgba(var(--ax-color-primary-500));
440
- }
441
- }
442
- &.ax-dropdown-button-marker {
443
- border-inline-start-color: rgba(var(--ax-color-border-default));
444
- }
445
- }
446
- .ax-el-ghost-link {
447
- // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
448
- border-style: none;
449
- background-color: transparent;
450
- color: rgba(var(--ax-color-ghost-fore));
451
-
452
- &.ax-state-selected {
453
- // @apply ax-bg-primary-500 ax-text-primary-fore;
454
- background-color: rgba(var(--ax-color-primary-500));
455
- color: rgba(var(--ax-color-primary-fore));
456
- }
457
- &.ax-el-interactive {
458
- &:hover {
459
- &:not(&.ax-state-selected, &.ax-state-disabled) {
460
- // @apply ax-border-primary-700 ax-text-primary-700;
461
- border-color: rgba(var(--ax-color-primary-700));
462
- color: rgba(var(--ax-color-primary-700));
463
- }
464
- }
465
- &:active {
466
- // @apply ax-border-primary-800 ax-text-primary-800;
467
- border-color: rgba(var(--ax-color-primary-800));
468
- color: rgba(var(--ax-color-primary-800));
469
- }
470
- }
471
-
472
- .ax-ripple {
473
- // @apply ax-bg-primary-500/30 #{!important};
474
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
475
- }
476
- ax-loading-spinner {
477
- .ax-loader {
478
- // @apply ax-border-ghost-fore ax-border-b-transparent;
479
- border-color: rgba(var(--ax-color-ghost-fore));
480
- border-bottom-color: transparent;
481
- }
482
- }
483
- & > button {
484
- &:is(&:focus-visible, &.ax-state-focus) {
485
- // @apply ax-outline-primary-500;
486
- outline-color: rgba(var(--ax-color-primary-500));
487
- }
488
- }
489
- &.ax-dropdown-button-marker {
490
- border-inline-start-color: rgba(var(--ax-color-border-default));
491
- }
492
- }
493
-
494
- @mixin color-look-dark-mode {
495
- @each $color in $color_names {
496
- @each $look in $look_names {
497
- @if ($look == 'solid') {
498
- .ax-el-#{$color}-#{$look} {
499
- // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
500
- background-color: rgba(var(--ax-color-#{$color}-200));
501
- color: rgba(var(--ax-color-#{$color}-fore-tint));
502
- border-color: rgba(var(--ax-color-#{$color}-200));
503
- &.ax-el-interactive {
504
- &:hover {
505
- &:not(.ax-state-disabled) {
506
- // @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore-tint;
507
- background-color: rgba(var(--ax-color-#{$color}-300));
508
- color: rgba(var(--ax-color-#{$color}-fore-tint));
509
- }
510
- }
511
- }
512
-
513
- &.ax-state-selected {
514
- // @apply ax-bg-#{$color}-400;
515
- background-color: rgba(var(--ax-color-#{$color}-400));
516
- }
517
- .ax-ripple {
518
- // @apply ax-bg-#{$color}-200/30 #{!important};
519
- background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
520
- }
521
- ax-loading-spinner {
522
- .ax-loader {
523
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
524
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
525
- border-bottom-color: transparent;
526
- }
527
- }
528
- & > button {
529
- &:is(&:focus-visible, &.ax-state-focus) {
530
- outline-color: rgba(var(--ax-color-primary-200));
531
- }
532
- }
533
- &.ax-dropdown-button-marker {
534
- border-inline-start-color: rgba(var(--ax-color-#{$color}-900));
535
- }
536
- }
537
- }
538
- @if ($look == 'outline') {
539
- .ax-el-#{$color}-#{$look} {
540
- // @apply ax-border-#{$color}-200 ax-text-#{$color}-200;
541
-
542
- border-color: rgba(var(--ax-color-#{$color}-200));
543
- color: rgba(var(--ax-color-#{$color}-200));
544
-
545
- &.ax-el-interactive {
546
- &:hover {
547
- &:not(.ax-state-disabled) {
548
- // @apply ax-border-#{$color}-300 ax-text-#{$color}-300 ax-bg-transparent;
549
- border-color: rgba(var(--ax-color-#{$color}-300));
550
- color: rgba(var(--ax-color-#{$color}-300));
551
- background-color: transparent;
552
- }
553
- }
554
- }
555
-
556
- &.ax-state-selected {
557
- // @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore;
558
- border-color: rgba(var(--ax-color-#{$color}-300));
559
- color: rgba(var(--ax-color-#{$color}-300));
560
- }
561
- .ax-ripple {
562
- // @apply ax-bg-#{$color}-500/30 #{!important};
563
- border-color: rgba(var(--ax-color-#{$color}-500), 0.3);
564
- }
565
- ax-loading-spinner {
566
- .ax-loader {
567
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
568
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
569
- border-bottom-color: transparent;
570
- }
571
- }
572
- & > button {
573
- &:is(&:focus-visible, &.ax-state-focus) {
574
- // @apply ax-text-#{$color}-300 ax-outline-#{$color}-300 -ax-outline-offset-4;
575
- border-color: rgba(var(--ax-color-#{$color}-300));
576
- color: rgba(var(--ax-color-#{$color}-300));
577
- }
578
- }
579
- }
580
- }
581
- @if ($look == 'blank') {
582
- .ax-el-#{$color}-#{$look} {
583
- // @apply ax-text-#{$color}-300 ax-bg-transparent;
584
-
585
- color: rgba(var(--ax-color-#{$color}-300));
586
- background-color: transparent;
587
- &.ax-el-interactive {
588
- &:hover {
589
- &:not(.ax-state-disabled) {
590
- // @apply ax-text-#{$color}-500;
591
- background-color: rgba(var(--ax-color-#{$color}-200));
592
- color: rgba(var(--ax-color-#{$color}-fore-tint));
593
- }
594
- }
595
- }
596
-
597
- &.ax-state-selected {
598
- // @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
599
- background-color: rgba(var(--ax-color-#{$color}-500));
600
- color: rgba(var(--ax-color-#{$color}-fore));
601
- }
602
- .ax-ripple {
603
- // @apply ax-bg-#{$color}-500/30 #{!important};
604
- background-color: rgba(var(--ax-color-#{$color}-300), 0.3) !important;
605
- }
606
- ax-loading-spinner {
607
- .ax-loader {
608
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
609
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
610
- border-bottom-color: transparent;
611
- }
612
- }
613
- & > button {
614
- &:is(&:focus-visible, &.ax-state-focus) {
615
- // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
616
- }
617
- }
618
- }
619
- }
620
- @if ($look == 'twotone') {
621
- .ax-el-#{$color}-#{$look} {
622
- // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
623
-
624
- background-color: rgba(var(--ax-color-#{$color}-200));
625
- color: rgba(var(--ax-color-#{$color}-fore-tint));
626
- border-color: rgba(var(--ax-color-#{$color}-200));
627
-
628
- &.ax-state-interactive {
629
- &:hover {
630
- &:not(.ax-state-disabled) {
631
- background-color: rgba(var(--ax-color-#{$color}-300));
632
- // @apply ax-bg-#{$color}-300;
633
- }
634
- }
635
- }
636
-
637
- &.ax-state-selected {
638
- // @apply ax-bg-#{$color}-400;
639
- background-color: rgba(var(--ax-color-#{$color}-400));
640
- }
641
- .ax-ripple {
642
- // @apply ax-bg-#{$color}-500/30 #{!important};
643
- background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
644
- }
645
- ax-loading-spinner {
646
- .ax-loader {
647
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
648
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
649
- border-bottom-color: transparent;
650
- }
651
- }
652
- & > button {
653
- &:is(&:focus-visible, &.ax-state-focus) {
654
- // @apply ax-outline-#{$color}-500;
655
- }
656
- }
657
- &.ax-dropdown-button-marker {
658
- border-inline-start-color: rgba(var(--ax-color-#{$color}-950));
659
- }
660
- }
661
- }
662
- @if ($look == 'link') {
663
- .ax-el-#{$color}-#{$look} {
664
- // @apply ax-text-#{$color}-300 ax-bg-transparent;
665
-
666
- color: rgba(var(--ax-color-#{$color}-300));
667
- background-color: transparent;
668
- &.ax-el-interactive {
669
- &:hover {
670
- &:not(.ax-state-disabled) {
671
- // @apply ax-text-#{$color}-500;
672
- color: rgba(var(--ax-color-#{$color}-400));
673
- }
674
- }
675
- }
676
-
677
- &.ax-state-selected {
678
- // @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
679
- background-color: rgba(var(--ax-color-#{$color}-500));
680
- color: rgba(var(--ax-color-#{$color}-fore));
681
- }
682
- .ax-ripple {
683
- // @apply ax-bg-#{$color}-500/30 #{!important};
684
- background-color: rgba(var(--ax-color-#{$color}-300), 0.3) !important;
685
- }
686
- ax-loading-spinner {
687
- .ax-loader {
688
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
689
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
690
- border-bottom-color: transparent;
691
- }
692
- }
693
- & > button {
694
- &:is(&:focus-visible, &.ax-state-focus) {
695
- // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
696
- }
697
- }
698
- }
699
- }
700
- }
701
- }
702
- .ax-el-ghost-solid {
703
- &.ax-el-interactive {
704
- &:hover {
705
- &:not(&.ax-state-selected, &.ax-state-disabled) {
706
- border-color: rgba(var(--ax-color-primary-200));
707
- color: rgba(var(--ax-color-primary-200));
708
- }
709
- & + .ax-dropdown-button-marker {
710
- border-inline-start-color: rgba(var(--ax-color-primary-200));
711
- }
712
- }
713
- &:active {
714
- border-color: rgba(var(--ax-color-primary-300));
715
- color: rgba(var(--ax-color-primary-300));
716
- }
717
- }
718
-
719
- &.ax-state-selected {
720
- border-color: rgba(var(--ax-color-primary-200));
721
- background-color: rgba(var(--ax-color-primary-200));
722
- color: rgba(var(--ax-color-primary-fore));
723
- }
724
-
725
- .ax-ripple {
726
- background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
727
- }
728
- }
729
- .ax-el-ghost-outline {
730
- &.ax-el-interactive {
731
- &:hover {
732
- &:not(&.ax-state-selected, &.ax-state-disabled) {
733
- border-color: rgba(var(--ax-color-primary-200));
734
- color: rgba(var(--ax-color-primary-200));
735
- }
736
- & + .ax-dropdown-button-marker {
737
- border-inline-start-color: rgba(var(--ax-color-primary-200));
738
- }
739
- }
740
- }
741
-
742
- &.ax-state-selected {
743
- border-color: rgba(var(--ax-color-primary-200));
744
- color: rgba(var(--ax-color-primary-fore-tint));
745
- }
746
- .ax-ripple {
747
- background-color: rgba(var(--ax-color-primary-200), 0.3);
748
- }
749
- ax-loading-spinner {
750
- .ax-loader {
751
- border-color: rgba(var(--ax-color-ghost-fore));
752
- border-bottom-color: transparent;
753
- }
754
- }
755
- }
756
- .ax-el-ghost-blank {
757
- // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
758
- border-style: none;
759
- background-color: transparent;
760
- color: rgba(var(--ax-color-ghost-fore));
761
-
762
- &.ax-state-selected {
763
- // @apply ax-bg-primary-500 ax-text-primary-fore;
764
- background-color: rgba(var(--ax-color-primary-500));
765
- color: rgba(var(--ax-color-primary-fore));
766
- }
767
- &.ax-el-interactive {
768
- &:hover {
769
- &:not(&.ax-state-selected, &.ax-state-disabled) {
770
- border-color: rgba(var(--ax-color-primary-300));
771
- background-color: rgba(var(--ax-color-primary-200));
772
- color: rgba(var(--ax-color-primary-fore-tint));
773
- }
774
- }
775
- &:active {
776
- border-color: rgba(var(--ax-color-primary-400));
777
- color: rgba(var(--ax-color-primary-400));
778
- }
779
- }
780
-
781
- .ax-ripple {
782
- background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
783
- }
784
-
785
- & > button {
786
- &:is(&:focus-visible, &.ax-state-focus) {
787
- outline-color: rgba(var(--ax-color-primary-200));
788
- }
789
- }
790
- }
791
-
792
- .ax-el-ghost-twotone {
793
- border-color: transparent;
794
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
795
- color: rgba(var(--ax-color-ghost-fore));
796
-
797
- &.ax-el-interactive {
798
- &:hover {
799
- &:not(&.ax-state-selected, &.ax-state-disabled) {
800
- background-color: rgba(var(--ax-color-primary-200));
801
- color: rgba(var(--ax-color-primary-fore-tint));
802
- }
803
- & + .ax-dropdown-button-marker {
804
- border-inline-start-color: rgba(var(--ax-color-primary-200));
805
- }
806
- }
807
- &:active {
808
- background-color: rgba(var(--ax-color-primary-300));
809
- color: rgba(var(--ax-color-primary-fore-tint));
810
- }
811
- }
812
- &.ax-state-selected {
813
- border-color: rgba(var(--ax-color-primary-300));
814
- background-color: rgba(var(--ax-color-primary-300));
815
- }
816
- .ax-ripple {
817
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
818
- }
819
-
820
- & > button {
821
- &:is(&:focus-visible, &.ax-state-focus) {
822
- outline-color: rgba(var(--ax-color-primary-200));
823
- }
824
- }
825
- }
826
- .ax-el-ghost-link {
827
- // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
828
- border-style: none;
829
- background-color: transparent;
830
- color: rgba(var(--ax-color-ghost-fore));
831
-
832
- &.ax-state-selected {
833
- // @apply ax-bg-primary-500 ax-text-primary-fore;
834
- background-color: rgba(var(--ax-color-primary-500));
835
- color: rgba(var(--ax-color-primary-fore));
836
- }
837
- &.ax-el-interactive {
838
- &:hover {
839
- &:not(&.ax-state-selected, &.ax-state-disabled) {
840
- border-color: rgba(var(--ax-color-primary-300));
841
- color: rgba(var(--ax-color-primary-300));
842
- }
843
- }
844
- &:active {
845
- border-color: rgba(var(--ax-color-primary-400));
846
- color: rgba(var(--ax-color-primary-400));
847
- }
848
- }
849
-
850
- .ax-ripple {
851
- background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
852
- }
853
-
854
- & > button {
855
- &:is(&:focus-visible, &.ax-state-focus) {
856
- outline-color: rgba(var(--ax-color-primary-200));
857
- }
858
- }
859
- }
860
- }
861
-
862
- @include darkMode() {
863
- @include color-look-dark-mode();
864
- }
1
+ @import '../variables/index.scss';
2
+
3
+ @each $color in $color_names {
4
+ @each $look in $look_names {
5
+ @if ($look == 'solid') {
6
+ .ax-el-#{$color}-#{$look} {
7
+ // @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore ax-border-#{$color}-500;
8
+ background-color: rgba(var(--ax-color-#{$color}-500));
9
+ color: rgba(var(--ax-color-#{$color}-fore));
10
+ border-color: rgba(var(--ax-color-#{$color}-500));
11
+ &.ax-el-interactive {
12
+ &:hover {
13
+ &:not(.ax-state-disabled) {
14
+ // @apply ax-bg-#{$color}-600;
15
+ background-color: rgba(var(--ax-color-#{$color}-600));
16
+ }
17
+ }
18
+ }
19
+
20
+ &.ax-state-selected {
21
+ // @apply ax-bg-#{$color}-700;
22
+ background-color: rgba(var(--ax-color-#{$color}-700));
23
+ }
24
+ .ax-ripple {
25
+ // @apply ax-bg-#{$color}-300/30 #{!important};
26
+ background-color: rgba(var(--ax-color-#{$color}-300), 0.3) !important;
27
+ }
28
+ ax-loading-spinner {
29
+ .ax-loader {
30
+ // @apply ax-border-#{$color}-fore ax-border-b-transparent;
31
+ border-color: rgba(var(--ax-color-#{$color}-fore));
32
+ border-bottom-color: transparent;
33
+ }
34
+ }
35
+ &:is(&:focus-visible, &.ax-state-focus) {
36
+ // @apply ax-outline-#{$color}-500;
37
+ outline-color: rgba(var(--ax-color-#{$color}-500));
38
+ }
39
+ & > button {
40
+ &:is(&:focus-visible, &.ax-state-focus) {
41
+ // @apply ax-outline-#{$color}-500;
42
+ outline-color: rgba(var(--ax-color-#{$color}-500));
43
+ }
44
+ }
45
+ &.ax-dropdown-button-marker {
46
+ border-inline-start-color: rgba(var(--ax-color-#{$color}-600));
47
+ }
48
+ }
49
+ }
50
+
51
+ @if ($look == 'outline') {
52
+ .ax-el-#{$color}-#{$look} {
53
+ // @apply ax-border-#{$color}-500 ax-text-#{$color}-500 ax-border ax-bg-transparent;
54
+ background-color: transparent;
55
+ color: rgba(var(--ax-color-#{$color}-500));
56
+ border-color: rgba(var(--ax-color-#{$color}-500));
57
+ border-width: 1px;
58
+ &.ax-el-interactive {
59
+ &:hover {
60
+ &:not(.ax-state-disabled) {
61
+ // @apply ax-border-#{$color}-700 ax-text-#{$color}-700;
62
+ color: rgba(var(--ax-color-#{$color}-700));
63
+ border-color: rgba(var(--ax-color-#{$color}-700));
64
+ }
65
+ }
66
+ }
67
+ &.ax-state-selected {
68
+ // @apply ax-border-#{$color}-500 ax-text-#{$color}-fore ax-bg-#{$color}-500;
69
+ border-color: rgba(var(--ax-color-#{$color}-500));
70
+ color: rgba(var(--ax-color-#{$color}-fore));
71
+ background-color: rgba(var(--ax-color-#{$color}-500));
72
+ }
73
+ .ax-ripple {
74
+ // @apply ax-bg-#{$color}-500/30 #{!important};
75
+ background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
76
+ }
77
+ ax-loading-spinner {
78
+ .ax-loader {
79
+ // @apply ax-border-#{$color}-500 ax-border-b-transparent;
80
+ border-color: rgba(var(--ax-color-#{$color}-500));
81
+ border-bottom-color: transparent;
82
+ }
83
+ }
84
+ &:is(&:focus-visible, &.ax-state-focus) {
85
+ // @apply ax-text-#{$color}-fore-tint ax-outline-#{$color}-fore-tint -ax-outline-offset-4;
86
+ outline-offset: -2px;
87
+ outline-color: rgba(var(--ax-color-#{$color}-500));
88
+ color: rgba(var(--ax-color-#{$color}-fore-tint));
89
+ }
90
+ & > button {
91
+ &:is(&:focus-visible, &.ax-state-focus) {
92
+ // @apply ax-text-#{$color}-fore-tint ax-outline-#{$color}-fore-tint -ax-outline-offset-4;
93
+ outline-offset: -2px;
94
+ outline-color: rgba(var(--ax-color-#{$color}-500));
95
+ color: rgba(var(--ax-color-#{$color}-fore-tint));
96
+ }
97
+ }
98
+ &.ax-dropdown-button-marker {
99
+ border-inline-start-color: rgba(var(--ax-color-#{$color}-500));
100
+ }
101
+ }
102
+ }
103
+
104
+ @if ($look == 'blank') {
105
+ .ax-el-#{$color}-#{$look} {
106
+ // @apply ax-text-#{$color}-500;
107
+ color: rgba(var(--ax-color-#{$color}-500));
108
+
109
+ &.ax-el-interactive {
110
+ &:hover {
111
+ &:not(.ax-state-disabled) {
112
+ // @apply ax-text-#{$color}-fore-tint;
113
+ background-color: rgba(var(--ax-color-#{$color}-100));
114
+ color: rgba(var(--ax-color-#{$color}-fore-tint));
115
+ }
116
+ }
117
+ }
118
+
119
+ &.ax-state-selected {
120
+ // @apply ax-bg-#{$color}-700 ax-text-#{$color}-fore;
121
+ background-color: rgba(var(--ax-color-#{$color}-700));
122
+ color: rgba(var(--ax-color-#{$color}-fore));
123
+ }
124
+ .ax-ripple {
125
+ // @apply ax-bg-#{$color}-500/30 #{!important};
126
+ background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
127
+ }
128
+ ax-loading-spinner {
129
+ .ax-loader {
130
+ // @apply ax-border-#{$color}-500 ax-border-b-transparent;
131
+ border-color: rgba(var(--ax-color-#{$color}-500));
132
+ border-bottom-color: transparent;
133
+ }
134
+ }
135
+ &:is(&:focus-visible, &.ax-state-focus) {
136
+ // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
137
+ outline-color: rgba(var(--ax-color-#{$color}-300));
138
+ outline-offset: 0;
139
+ }
140
+ & > button {
141
+ &:is(&:focus-visible, &.ax-state-focus) {
142
+ // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
143
+ outline-color: rgba(var(--ax-color-#{$color}-300));
144
+ outline-offset: 0;
145
+ }
146
+ }
147
+ &.ax-dropdown-button-marker {
148
+ border-inline-start-color: transparent;
149
+ }
150
+ }
151
+ }
152
+
153
+ @if ($look == 'twotone') {
154
+ .ax-el-#{$color}-#{$look} {
155
+ // @apply ax-bg-#{$color}-100 ax-text-#{$color}-fore-tint ax-border-#{$color}-100;
156
+ background-color: rgba(var(--ax-color-#{$color}-100));
157
+ color: rgba(var(--ax-color-#{$color}-fore-tint));
158
+ border-color: rgba(var(--ax-color-#{$color}-100));
159
+
160
+ &.ax-el-interactive {
161
+ &:hover {
162
+ &:not(.ax-state-disabled) {
163
+ // @apply ax-bg-#{$color}-200;
164
+ background-color: rgba(var(--ax-color-#{$color}-200));
165
+ }
166
+ }
167
+ }
168
+
169
+ &.ax-state-selected {
170
+ // @apply ax-bg-#{$color}-300;
171
+ background-color: rgba(var(--ax-color-#{$color}-300));
172
+ }
173
+
174
+ .ax-ripple {
175
+ // @apply ax-bg-#{$color}-500/30 #{!important};
176
+ background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
177
+ }
178
+ ax-loading-spinner {
179
+ .ax-loader {
180
+ // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
181
+ border-color: rgba(var(--ax-color-#{$color}-fore-tint));
182
+ border-bottom-color: transparent;
183
+ }
184
+ }
185
+
186
+ &:is(&:focus-visible, &.ax-state-focus) {
187
+ // @apply ax-outline-#{$color}-500;
188
+ outline-color: rgba(var(--ax-color-#{$color}-500));
189
+ }
190
+ & > button {
191
+ &:is(&:focus-visible, &.ax-state-focus) {
192
+ // @apply ax-outline-#{$color}-500;
193
+ outline-color: rgba(var(--ax-color-#{$color}-500));
194
+ }
195
+ }
196
+ &.ax-dropdown-button-marker {
197
+ border-inline-start-color: rgba(var(--ax-color-#{$color}-50));
198
+ }
199
+ }
200
+ }
201
+
202
+ @if ($look == 'link') {
203
+ .ax-el-#{$color}-#{$look} {
204
+ // @apply ax-text-#{$color}-500;
205
+ color: rgba(var(--ax-color-#{$color}-500));
206
+
207
+ &.ax-el-interactive {
208
+ &:hover {
209
+ &:not(.ax-state-disabled) {
210
+ // @apply ax-text-#{$color}-fore-tint;
211
+ color: rgba(var(--ax-color-#{$color}-700));
212
+ }
213
+ }
214
+ }
215
+
216
+ &.ax-state-selected {
217
+ // @apply ax-bg-#{$color}-700 ax-text-#{$color}-fore;
218
+ background-color: rgba(var(--ax-color-#{$color}-700));
219
+ color: rgba(var(--ax-color-#{$color}-fore));
220
+ }
221
+ .ax-ripple {
222
+ // @apply ax-bg-#{$color}-500/30 #{!important};
223
+ background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
224
+ }
225
+ ax-loading-spinner {
226
+ .ax-loader {
227
+ // @apply ax-border-#{$color}-500 ax-border-b-transparent;
228
+ border-color: rgba(var(--ax-color-#{$color}-500));
229
+ border-bottom-color: transparent;
230
+ }
231
+ }
232
+ &:is(&:focus-visible, &.ax-state-focus) {
233
+ // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
234
+ outline-color: rgba(var(--ax-color-#{$color}-300));
235
+ outline-offset: 0;
236
+ }
237
+ & > button {
238
+ &:is(&:focus-visible, &.ax-state-focus) {
239
+ // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
240
+ outline-color: rgba(var(--ax-color-#{$color}-300));
241
+ outline-offset: 0;
242
+ }
243
+ }
244
+ &.ax-dropdown-button-marker {
245
+ border-inline-start-color: transparent;
246
+ }
247
+ }
248
+ }
249
+ }
250
+ }
251
+
252
+ .ax-el-ghost-solid {
253
+ // @apply ax-border ax-border-default ax-bg-ghost ax-text-ghost-fore ax-shadow-sm;
254
+ border-width: 1px;
255
+ border-color: rgba(var(--ax-color-border-default));
256
+ background-color: rgba(var(--ax-color-ghost));
257
+ color: rgba(var(--ax-color-ghost-fore));
258
+ --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
259
+ --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
260
+ box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
261
+ &.ax-el-interactive {
262
+ &:hover {
263
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
264
+ // @apply ax-border-primary-500 ax-text-primary-500;
265
+ border-color: rgba(var(--ax-color-primary-500));
266
+ color: rgba(var(--ax-color-primary-500));
267
+ }
268
+ // + &.ax-dropdown-button-marker {
269
+ // border-inline-start-color: rgba(var(--ax-color-primary-500));
270
+ // }
271
+ & + .ax-dropdown-button-marker {
272
+ border-inline-start-color: rgba(var(--ax-color-primary-500));
273
+ }
274
+ }
275
+ &:active {
276
+ // @apply ax-border-primary-700 ax-text-primary-700;
277
+ &:not(&.ax-state-disabled) {
278
+ border-color: rgba(var(--ax-color-primary-700));
279
+ color: rgba(var(--ax-color-primary-700));
280
+ }
281
+ }
282
+ }
283
+
284
+ &.ax-state-selected {
285
+ // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
286
+ border-color: rgba(var(--ax-color-primary-500));
287
+ background-color: rgba(var(--ax-color-primary-500));
288
+ color: rgba(var(--ax-color-primary-fore));
289
+ }
290
+
291
+ .ax-ripple {
292
+ // @apply ax-bg-primary-500/30 #{!important};
293
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
294
+ }
295
+ ax-loading-spinner {
296
+ .ax-loader {
297
+ // @apply ax-border-ghost-fore ax-border-b-transparent;
298
+ border-color: rgba(var(--ax-color-ghost-fore));
299
+ border-bottom-color: transparent;
300
+ }
301
+ }
302
+ &.ax-dropdown-button-marker {
303
+ border-inline-start-color: rgba(var(--ax-color-border-default));
304
+ }
305
+ }
306
+ .ax-el-ghost-outline {
307
+ // @apply ax-border ax-border-default ax-bg-transparent ax-text-ghost-fore;
308
+ border-width: 1px;
309
+ border-color: rgba(var(--ax-color-border-default));
310
+ background-color: transparent;
311
+ color: rgba(var(--ax-color-ghost-fore));
312
+
313
+ &.ax-el-interactive {
314
+ &:hover {
315
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
316
+ // @apply ax-border-primary-500 ax-text-primary-500;
317
+ border-color: rgba(var(--ax-color-primary-500));
318
+ color: rgba(var(--ax-color-primary-500));
319
+ }
320
+ & + .ax-dropdown-button-marker {
321
+ border-inline-start-color: rgba(var(--ax-color-primary-500));
322
+ }
323
+ }
324
+ }
325
+
326
+ &.ax-state-selected {
327
+ // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
328
+ border-color: rgba(var(--ax-color-primary-500));
329
+ color: rgba(var(--ax-color-primary-fore));
330
+ }
331
+ .ax-ripple {
332
+ // @apply ax-bg-primary-500/30 #{!important};
333
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
334
+ }
335
+ ax-loading-spinner {
336
+ .ax-loader {
337
+ // @apply ax-border-ghost-fore ax-border-b-transparent;
338
+ border-color: rgba(var(--ax-color-ghost-fore));
339
+ border-bottom-color: transparent;
340
+ }
341
+ }
342
+ &.ax-dropdown-button-marker {
343
+ border-inline-start-color: rgba(var(--ax-color-border-default));
344
+ }
345
+ }
346
+ .ax-el-ghost-blank {
347
+ // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
348
+ border-style: none;
349
+ background-color: transparent;
350
+ color: rgba(var(--ax-color-ghost-fore));
351
+
352
+ &.ax-state-selected {
353
+ // @apply ax-bg-primary-500 ax-text-primary-fore;
354
+ background-color: rgba(var(--ax-color-primary-500));
355
+ color: rgba(var(--ax-color-primary-fore));
356
+ }
357
+ &.ax-el-interactive {
358
+ &:hover {
359
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
360
+ // @apply ax-border-primary-700 ax-text-primary-700;
361
+ background-color: rgba(var(--ax-color-primary-200));
362
+ border-color: rgba(var(--ax-color-primary-700));
363
+ color: rgba(var(--ax-color-primary-700));
364
+ }
365
+ }
366
+ &:active {
367
+ // @apply ax-border-primary-800 ax-text-primary-800;
368
+ border-color: rgba(var(--ax-color-primary-800));
369
+ color: rgba(var(--ax-color-primary-800));
370
+ }
371
+ }
372
+
373
+ .ax-ripple {
374
+ // @apply ax-bg-primary-500/30 #{!important};
375
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
376
+ }
377
+ ax-loading-spinner {
378
+ .ax-loader {
379
+ // @apply ax-border-ghost-fore ax-border-b-transparent;
380
+ border-color: rgba(var(--ax-color-ghost-fore));
381
+ border-bottom-color: transparent;
382
+ }
383
+ }
384
+ & > button {
385
+ &:is(&:focus-visible, &.ax-state-focus) {
386
+ // @apply ax-outline-primary-500;
387
+ outline-color: rgba(var(--ax-color-primary-500));
388
+ }
389
+ }
390
+ &.ax-dropdown-button-marker {
391
+ border-inline-start-color: rgba(var(--ax-color-border-default));
392
+ }
393
+ }
394
+ .ax-el-ghost-twotone {
395
+ // @apply ax-border-transparent ax-bg-ghost-fore/5 ax-text-ghost-fore;
396
+ border-color: transparent;
397
+ background-color: rgba(var(--ax-color-ghost-fore), 0.05);
398
+ color: rgba(var(--ax-color-ghost-fore));
399
+
400
+ &.ax-el-interactive {
401
+ &:hover {
402
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
403
+ // @apply ax-bg-primary-200 ax-text-primary-fore-tint;
404
+ background-color: rgba(var(--ax-color-primary-200));
405
+ color: rgba(var(--ax-color-primary-fore-tint));
406
+ }
407
+ & + .ax-dropdown-button-marker {
408
+ border-inline-start-color: rgba(var(--ax-color-primary-500));
409
+ }
410
+ }
411
+ &:active {
412
+ // @apply ax-bg-primary-300 ax-text-primary-fore-tint;
413
+ &:not(&.ax-state-disabled) {
414
+ background-color: rgba(var(--ax-color-primary-300));
415
+ color: rgba(var(--ax-color-primary-fore-tint));
416
+ }
417
+ }
418
+ }
419
+ &.ax-state-selected {
420
+ // @apply ax-border-primary-300 ax-bg-primary-400 ax-text-primary-fore-tint;
421
+ border-color: rgba(var(--ax-color-primary-300));
422
+ background-color: rgba(var(--ax-color-primary-400));
423
+ color: rgba(var(--ax-color-primary-fore-tint));
424
+ }
425
+ .ax-ripple {
426
+ // @apply ax-bg-primary-500/30 #{!important};
427
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
428
+ }
429
+ ax-loading-spinner {
430
+ .ax-loader {
431
+ // @apply ax-border-ghost-fore ax-border-b-transparent;
432
+ border-color: rgba(var(--ax-color-ghost-fore));
433
+ border-bottom-color: transparent;
434
+ }
435
+ }
436
+ & > button {
437
+ &:is(&:focus-visible, &.ax-state-focus) {
438
+ // @apply ax-outline-primary-500;
439
+ outline-color: rgba(var(--ax-color-primary-500));
440
+ }
441
+ }
442
+ &.ax-dropdown-button-marker {
443
+ border-inline-start-color: rgba(var(--ax-color-border-default));
444
+ }
445
+ }
446
+ .ax-el-ghost-link {
447
+ // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
448
+ border-style: none;
449
+ background-color: transparent;
450
+ color: rgba(var(--ax-color-ghost-fore));
451
+
452
+ &.ax-state-selected {
453
+ // @apply ax-bg-primary-500 ax-text-primary-fore;
454
+ background-color: rgba(var(--ax-color-primary-500));
455
+ color: rgba(var(--ax-color-primary-fore));
456
+ }
457
+ &.ax-el-interactive {
458
+ &:hover {
459
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
460
+ // @apply ax-border-primary-700 ax-text-primary-700;
461
+ border-color: rgba(var(--ax-color-primary-700));
462
+ color: rgba(var(--ax-color-primary-700));
463
+ }
464
+ }
465
+ &:active {
466
+ // @apply ax-border-primary-800 ax-text-primary-800;
467
+ border-color: rgba(var(--ax-color-primary-800));
468
+ color: rgba(var(--ax-color-primary-800));
469
+ }
470
+ }
471
+
472
+ .ax-ripple {
473
+ // @apply ax-bg-primary-500/30 #{!important};
474
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
475
+ }
476
+ ax-loading-spinner {
477
+ .ax-loader {
478
+ // @apply ax-border-ghost-fore ax-border-b-transparent;
479
+ border-color: rgba(var(--ax-color-ghost-fore));
480
+ border-bottom-color: transparent;
481
+ }
482
+ }
483
+ & > button {
484
+ &:is(&:focus-visible, &.ax-state-focus) {
485
+ // @apply ax-outline-primary-500;
486
+ outline-color: rgba(var(--ax-color-primary-500));
487
+ }
488
+ }
489
+ &.ax-dropdown-button-marker {
490
+ border-inline-start-color: rgba(var(--ax-color-border-default));
491
+ }
492
+ }
493
+
494
+ @mixin color-look-dark-mode {
495
+ @each $color in $color_names {
496
+ @each $look in $look_names {
497
+ @if ($look == 'solid') {
498
+ .ax-el-#{$color}-#{$look} {
499
+ // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
500
+ background-color: rgba(var(--ax-color-#{$color}-200));
501
+ color: rgba(var(--ax-color-#{$color}-fore-tint));
502
+ border-color: rgba(var(--ax-color-#{$color}-200));
503
+ &.ax-el-interactive {
504
+ &:hover {
505
+ &:not(.ax-state-disabled) {
506
+ // @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore-tint;
507
+ background-color: rgba(var(--ax-color-#{$color}-300));
508
+ color: rgba(var(--ax-color-#{$color}-fore-tint));
509
+ }
510
+ }
511
+ }
512
+
513
+ &.ax-state-selected {
514
+ // @apply ax-bg-#{$color}-400;
515
+ background-color: rgba(var(--ax-color-#{$color}-400));
516
+ }
517
+ .ax-ripple {
518
+ // @apply ax-bg-#{$color}-200/30 #{!important};
519
+ background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
520
+ }
521
+ ax-loading-spinner {
522
+ .ax-loader {
523
+ // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
524
+ border-color: rgba(var(--ax-color-#{$color}-fore-tint));
525
+ border-bottom-color: transparent;
526
+ }
527
+ }
528
+ & > button {
529
+ &:is(&:focus-visible, &.ax-state-focus) {
530
+ outline-color: rgba(var(--ax-color-primary-200));
531
+ }
532
+ }
533
+ &.ax-dropdown-button-marker {
534
+ border-inline-start-color: rgba(var(--ax-color-#{$color}-900));
535
+ }
536
+ }
537
+ }
538
+ @if ($look == 'outline') {
539
+ .ax-el-#{$color}-#{$look} {
540
+ // @apply ax-border-#{$color}-200 ax-text-#{$color}-200;
541
+
542
+ border-color: rgba(var(--ax-color-#{$color}-200));
543
+ color: rgba(var(--ax-color-#{$color}-200));
544
+
545
+ &.ax-el-interactive {
546
+ &:hover {
547
+ &:not(.ax-state-disabled) {
548
+ // @apply ax-border-#{$color}-300 ax-text-#{$color}-300 ax-bg-transparent;
549
+ border-color: rgba(var(--ax-color-#{$color}-300));
550
+ color: rgba(var(--ax-color-#{$color}-300));
551
+ background-color: transparent;
552
+ }
553
+ }
554
+ }
555
+
556
+ &.ax-state-selected {
557
+ // @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore;
558
+ border-color: rgba(var(--ax-color-#{$color}-300));
559
+ color: rgba(var(--ax-color-#{$color}-300));
560
+ }
561
+ .ax-ripple {
562
+ // @apply ax-bg-#{$color}-500/30 #{!important};
563
+ border-color: rgba(var(--ax-color-#{$color}-500), 0.3);
564
+ }
565
+ ax-loading-spinner {
566
+ .ax-loader {
567
+ // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
568
+ border-color: rgba(var(--ax-color-#{$color}-fore-tint));
569
+ border-bottom-color: transparent;
570
+ }
571
+ }
572
+ & > button {
573
+ &:is(&:focus-visible, &.ax-state-focus) {
574
+ // @apply ax-text-#{$color}-300 ax-outline-#{$color}-300 -ax-outline-offset-4;
575
+ border-color: rgba(var(--ax-color-#{$color}-300));
576
+ color: rgba(var(--ax-color-#{$color}-300));
577
+ }
578
+ }
579
+ }
580
+ }
581
+ @if ($look == 'blank') {
582
+ .ax-el-#{$color}-#{$look} {
583
+ // @apply ax-text-#{$color}-300 ax-bg-transparent;
584
+
585
+ color: rgba(var(--ax-color-#{$color}-300));
586
+ background-color: transparent;
587
+ &.ax-el-interactive {
588
+ &:hover {
589
+ &:not(.ax-state-disabled) {
590
+ // @apply ax-text-#{$color}-500;
591
+ background-color: rgba(var(--ax-color-#{$color}-200));
592
+ color: rgba(var(--ax-color-#{$color}-fore-tint));
593
+ }
594
+ }
595
+ }
596
+
597
+ &.ax-state-selected {
598
+ // @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
599
+ background-color: rgba(var(--ax-color-#{$color}-500));
600
+ color: rgba(var(--ax-color-#{$color}-fore));
601
+ }
602
+ .ax-ripple {
603
+ // @apply ax-bg-#{$color}-500/30 #{!important};
604
+ background-color: rgba(var(--ax-color-#{$color}-300), 0.3) !important;
605
+ }
606
+ ax-loading-spinner {
607
+ .ax-loader {
608
+ // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
609
+ border-color: rgba(var(--ax-color-#{$color}-fore-tint));
610
+ border-bottom-color: transparent;
611
+ }
612
+ }
613
+ & > button {
614
+ &:is(&:focus-visible, &.ax-state-focus) {
615
+ // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
616
+ }
617
+ }
618
+ }
619
+ }
620
+ @if ($look == 'twotone') {
621
+ .ax-el-#{$color}-#{$look} {
622
+ // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
623
+
624
+ background-color: rgba(var(--ax-color-#{$color}-200));
625
+ color: rgba(var(--ax-color-#{$color}-fore-tint));
626
+ border-color: rgba(var(--ax-color-#{$color}-200));
627
+
628
+ &.ax-state-interactive {
629
+ &:hover {
630
+ &:not(.ax-state-disabled) {
631
+ background-color: rgba(var(--ax-color-#{$color}-300));
632
+ // @apply ax-bg-#{$color}-300;
633
+ }
634
+ }
635
+ }
636
+
637
+ &.ax-state-selected {
638
+ // @apply ax-bg-#{$color}-400;
639
+ background-color: rgba(var(--ax-color-#{$color}-400));
640
+ }
641
+ .ax-ripple {
642
+ // @apply ax-bg-#{$color}-500/30 #{!important};
643
+ background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
644
+ }
645
+ ax-loading-spinner {
646
+ .ax-loader {
647
+ // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
648
+ border-color: rgba(var(--ax-color-#{$color}-fore-tint));
649
+ border-bottom-color: transparent;
650
+ }
651
+ }
652
+ & > button {
653
+ &:is(&:focus-visible, &.ax-state-focus) {
654
+ // @apply ax-outline-#{$color}-500;
655
+ }
656
+ }
657
+ &.ax-dropdown-button-marker {
658
+ border-inline-start-color: rgba(var(--ax-color-#{$color}-950));
659
+ }
660
+ }
661
+ }
662
+ @if ($look == 'link') {
663
+ .ax-el-#{$color}-#{$look} {
664
+ // @apply ax-text-#{$color}-300 ax-bg-transparent;
665
+
666
+ color: rgba(var(--ax-color-#{$color}-300));
667
+ background-color: transparent;
668
+ &.ax-el-interactive {
669
+ &:hover {
670
+ &:not(.ax-state-disabled) {
671
+ // @apply ax-text-#{$color}-500;
672
+ color: rgba(var(--ax-color-#{$color}-400));
673
+ }
674
+ }
675
+ }
676
+
677
+ &.ax-state-selected {
678
+ // @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
679
+ background-color: rgba(var(--ax-color-#{$color}-500));
680
+ color: rgba(var(--ax-color-#{$color}-fore));
681
+ }
682
+ .ax-ripple {
683
+ // @apply ax-bg-#{$color}-500/30 #{!important};
684
+ background-color: rgba(var(--ax-color-#{$color}-300), 0.3) !important;
685
+ }
686
+ ax-loading-spinner {
687
+ .ax-loader {
688
+ // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
689
+ border-color: rgba(var(--ax-color-#{$color}-fore-tint));
690
+ border-bottom-color: transparent;
691
+ }
692
+ }
693
+ & > button {
694
+ &:is(&:focus-visible, &.ax-state-focus) {
695
+ // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
696
+ }
697
+ }
698
+ }
699
+ }
700
+ }
701
+ }
702
+ .ax-el-ghost-solid {
703
+ &.ax-el-interactive {
704
+ &:hover {
705
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
706
+ border-color: rgba(var(--ax-color-primary-200));
707
+ color: rgba(var(--ax-color-primary-200));
708
+ }
709
+ & + .ax-dropdown-button-marker {
710
+ border-inline-start-color: rgba(var(--ax-color-primary-200));
711
+ }
712
+ }
713
+ &:active {
714
+ border-color: rgba(var(--ax-color-primary-300));
715
+ color: rgba(var(--ax-color-primary-300));
716
+ }
717
+ }
718
+
719
+ &.ax-state-selected {
720
+ border-color: rgba(var(--ax-color-primary-200));
721
+ background-color: rgba(var(--ax-color-primary-200));
722
+ color: rgba(var(--ax-color-primary-fore));
723
+ }
724
+
725
+ .ax-ripple {
726
+ background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
727
+ }
728
+ }
729
+ .ax-el-ghost-outline {
730
+ &.ax-el-interactive {
731
+ &:hover {
732
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
733
+ border-color: rgba(var(--ax-color-primary-200));
734
+ color: rgba(var(--ax-color-primary-200));
735
+ }
736
+ & + .ax-dropdown-button-marker {
737
+ border-inline-start-color: rgba(var(--ax-color-primary-200));
738
+ }
739
+ }
740
+ }
741
+
742
+ &.ax-state-selected {
743
+ border-color: rgba(var(--ax-color-primary-200));
744
+ color: rgba(var(--ax-color-primary-fore-tint));
745
+ }
746
+ .ax-ripple {
747
+ background-color: rgba(var(--ax-color-primary-200), 0.3);
748
+ }
749
+ ax-loading-spinner {
750
+ .ax-loader {
751
+ border-color: rgba(var(--ax-color-ghost-fore));
752
+ border-bottom-color: transparent;
753
+ }
754
+ }
755
+ }
756
+ .ax-el-ghost-blank {
757
+ // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
758
+ border-style: none;
759
+ background-color: transparent;
760
+ color: rgba(var(--ax-color-ghost-fore));
761
+
762
+ &.ax-state-selected {
763
+ // @apply ax-bg-primary-500 ax-text-primary-fore;
764
+ background-color: rgba(var(--ax-color-primary-500));
765
+ color: rgba(var(--ax-color-primary-fore));
766
+ }
767
+ &.ax-el-interactive {
768
+ &:hover {
769
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
770
+ border-color: rgba(var(--ax-color-primary-300));
771
+ background-color: rgba(var(--ax-color-primary-200));
772
+ color: rgba(var(--ax-color-primary-fore-tint));
773
+ }
774
+ }
775
+ &:active {
776
+ border-color: rgba(var(--ax-color-primary-400));
777
+ color: rgba(var(--ax-color-primary-400));
778
+ }
779
+ }
780
+
781
+ .ax-ripple {
782
+ background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
783
+ }
784
+
785
+ & > button {
786
+ &:is(&:focus-visible, &.ax-state-focus) {
787
+ outline-color: rgba(var(--ax-color-primary-200));
788
+ }
789
+ }
790
+ }
791
+
792
+ .ax-el-ghost-twotone {
793
+ border-color: transparent;
794
+ background-color: rgba(var(--ax-color-ghost-fore), 0.05);
795
+ color: rgba(var(--ax-color-ghost-fore));
796
+
797
+ &.ax-el-interactive {
798
+ &:hover {
799
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
800
+ background-color: rgba(var(--ax-color-primary-200));
801
+ color: rgba(var(--ax-color-primary-fore-tint));
802
+ }
803
+ & + .ax-dropdown-button-marker {
804
+ border-inline-start-color: rgba(var(--ax-color-primary-200));
805
+ }
806
+ }
807
+ &:active {
808
+ background-color: rgba(var(--ax-color-primary-300));
809
+ color: rgba(var(--ax-color-primary-fore-tint));
810
+ }
811
+ }
812
+ &.ax-state-selected {
813
+ border-color: rgba(var(--ax-color-primary-300));
814
+ background-color: rgba(var(--ax-color-primary-300));
815
+ }
816
+ .ax-ripple {
817
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
818
+ }
819
+
820
+ & > button {
821
+ &:is(&:focus-visible, &.ax-state-focus) {
822
+ outline-color: rgba(var(--ax-color-primary-200));
823
+ }
824
+ }
825
+ }
826
+ .ax-el-ghost-link {
827
+ // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
828
+ border-style: none;
829
+ background-color: transparent;
830
+ color: rgba(var(--ax-color-ghost-fore));
831
+
832
+ &.ax-state-selected {
833
+ // @apply ax-bg-primary-500 ax-text-primary-fore;
834
+ background-color: rgba(var(--ax-color-primary-500));
835
+ color: rgba(var(--ax-color-primary-fore));
836
+ }
837
+ &.ax-el-interactive {
838
+ &:hover {
839
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
840
+ border-color: rgba(var(--ax-color-primary-300));
841
+ color: rgba(var(--ax-color-primary-300));
842
+ }
843
+ }
844
+ &:active {
845
+ border-color: rgba(var(--ax-color-primary-400));
846
+ color: rgba(var(--ax-color-primary-400));
847
+ }
848
+ }
849
+
850
+ .ax-ripple {
851
+ background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
852
+ }
853
+
854
+ & > button {
855
+ &:is(&:focus-visible, &.ax-state-focus) {
856
+ outline-color: rgba(var(--ax-color-primary-200));
857
+ }
858
+ }
859
+ }
860
+ }
861
+
862
+ @include darkMode() {
863
+ @include color-look-dark-mode();
864
+ }