@acorex/styles 7.23.2 → 7.24.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 (32) hide show
  1. package/icons/fontawesome/fontawesome.scss +68 -68
  2. package/icons/index.scss +207 -207
  3. package/icons/material/material.scss +73 -73
  4. package/index.css +2623 -0
  5. package/index.min.css +1 -0
  6. package/index.scss +9 -9
  7. package/package.json +1 -1
  8. package/src/base/_preflight.scss +417 -417
  9. package/src/base/index.scss +13 -13
  10. package/src/mixins/_look.scss +84 -84
  11. package/src/mixins/_media.scss +27 -27
  12. package/src/mixins/_util.scss +19 -19
  13. package/src/mixins/index.scss +3 -3
  14. package/src/shared/_actionsheet.scss +23 -23
  15. package/src/shared/_check-box.scss +59 -59
  16. package/src/shared/_color-look.scss +696 -696
  17. package/src/shared/_drop-down.scss +76 -76
  18. package/src/shared/_editor-container.scss +257 -257
  19. package/src/shared/_general-button.scss +87 -87
  20. package/src/shared/_inputs.scss +16 -16
  21. package/src/shared/_list.scss +211 -211
  22. package/src/shared/_radio.scss +56 -56
  23. package/src/shared/_table.scss +149 -149
  24. package/src/shared/_utils.scss +75 -75
  25. package/src/shared/index.scss +11 -11
  26. package/src/utility/index.scss +24 -24
  27. package/src/variables/_colors.scss +2 -2
  28. package/src/variables/_degrees.scss +1 -1
  29. package/src/variables/index.scss +2 -2
  30. package/tailwind-base.js +235 -235
  31. package/themes/default.css +1 -0
  32. package/themes/default.scss +141 -141
package/src/shared/_color-look.scss CHANGED
@@ -1,696 +1,696 @@
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
- color: rgba(var(--ax-color-#{$color}-fore-tint));
114
- }
115
- }
116
- }
117
-
118
- &.ax-state-selected {
119
- // @apply ax-bg-#{$color}-700 ax-text-#{$color}-fore;
120
- background-color: rgba(var(--ax-color-#{$color}-700));
121
- color: rgba(var(--ax-color-#{$color}-fore));
122
- }
123
- .ax-ripple {
124
- // @apply ax-bg-#{$color}-500/30 #{!important};
125
- background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
126
- }
127
- ax-loading-spinner {
128
- .ax-loader {
129
- // @apply ax-border-#{$color}-500 ax-border-b-transparent;
130
- border-color: rgba(var(--ax-color-#{$color}-500));
131
- border-bottom-color: transparent;
132
- }
133
- }
134
- &:is(&:focus-visible, &.ax-state-focus) {
135
- // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
136
- outline-color: rgba(var(--ax-color-#{$color}-300));
137
- outline-offset: 0;
138
- }
139
- & > button {
140
- &:is(&:focus-visible, &.ax-state-focus) {
141
- // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
142
- outline-color: rgba(var(--ax-color-#{$color}-300));
143
- outline-offset: 0;
144
- }
145
- }
146
- &.ax-dropdown-button-marker {
147
- border-inline-start-color: transparent;
148
- }
149
- }
150
- }
151
-
152
- @if ($look == 'twotone') {
153
- .ax-el-#{$color}-#{$look} {
154
- // @apply ax-bg-#{$color}-100 ax-text-#{$color}-fore-tint ax-border-#{$color}-100;
155
- background-color: rgba(var(--ax-color-#{$color}-100));
156
- color: rgba(var(--ax-color-#{$color}-fore-tint));
157
- border-color: rgba(var(--ax-color-#{$color}-100));
158
-
159
- &.ax-el-interactive {
160
- &:hover {
161
- &:not(.ax-state-disabled) {
162
- // @apply ax-bg-#{$color}-200;
163
- background-color: rgba(var(--ax-color-#{$color}-200));
164
- }
165
- }
166
- }
167
-
168
- &.ax-state-selected {
169
- // @apply ax-bg-#{$color}-300;
170
- background-color: rgba(var(--ax-color-#{$color}-300));
171
- }
172
-
173
- .ax-ripple {
174
- // @apply ax-bg-#{$color}-500/30 #{!important};
175
- background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
176
- }
177
- ax-loading-spinner {
178
- .ax-loader {
179
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
180
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
181
- border-bottom-color: transparent;
182
- }
183
- }
184
-
185
- &:is(&:focus-visible, &.ax-state-focus) {
186
- // @apply ax-outline-#{$color}-500;
187
- outline-color: rgba(var(--ax-color-#{$color}-500));
188
- }
189
- & > button {
190
- &:is(&:focus-visible, &.ax-state-focus) {
191
- // @apply ax-outline-#{$color}-500;
192
- outline-color: rgba(var(--ax-color-#{$color}-500));
193
- }
194
- }
195
- &.ax-dropdown-button-marker {
196
- border-inline-start-color: rgba(var(--ax-color-#{$color}-50));
197
- }
198
- }
199
- }
200
- }
201
- }
202
-
203
- .ax-el-ghost-solid {
204
- // @apply ax-border ax-border-default ax-bg-ghost ax-text-ghost-fore ax-shadow-sm;
205
- border-width: 1px;
206
- border-color: rgba(var(--ax-color-border-default));
207
- background-color: rgba(var(--ax-color-ghost));
208
- color: rgba(var(--ax-color-ghost-fore));
209
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
210
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
211
- box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000),
212
- var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
213
- &.ax-el-interactive {
214
- &:hover {
215
- &:not(&.ax-state-selected, &.ax-state-disabled) {
216
- // @apply ax-border-primary-500 ax-text-primary-500;
217
- border-color: rgba(var(--ax-color-primary-500));
218
- color: rgba(var(--ax-color-primary-500));
219
- }
220
- // + &.ax-dropdown-button-marker {
221
- // border-inline-start-color: rgba(var(--ax-color-primary-500));
222
- // }
223
- & + .ax-dropdown-button-marker {
224
- border-inline-start-color: rgba(var(--ax-color-primary-500));
225
- }
226
- }
227
- &:active {
228
- // @apply ax-border-primary-700 ax-text-primary-700;
229
- border-color: rgba(var(--ax-color-primary-700));
230
- color: rgba(var(--ax-color-primary-700));
231
- }
232
- }
233
-
234
- &.ax-state-selected {
235
- // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
236
- border-color: rgba(var(--ax-color-primary-500));
237
- background-color: rgba(var(--ax-color-primary-500));
238
- color: rgba(var(--ax-color-primary-fore));
239
- }
240
-
241
- .ax-ripple {
242
- // @apply ax-bg-primary-500/30 #{!important};
243
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
244
- }
245
- ax-loading-spinner {
246
- .ax-loader {
247
- // @apply ax-border-ghost-fore ax-border-b-transparent;
248
- border-color: rgba(var(--ax-color-ghost-fore));
249
- border-bottom-color: transparent;
250
- }
251
- }
252
- &.ax-dropdown-button-marker {
253
- border-inline-start-color: rgba(var(--ax-color-border-default));
254
- }
255
- }
256
- .ax-el-ghost-outline {
257
- // @apply ax-border ax-border-default ax-bg-transparent ax-text-ghost-fore;
258
- border-width: 1px;
259
- border-color: rgba(var(--ax-color-border-default));
260
- background-color: transparent;
261
- color: rgba(var(--ax-color-ghost-fore));
262
-
263
- &.ax-el-interactive {
264
- &:hover {
265
- &:not(&.ax-state-selected, &.ax-state-disabled) {
266
- // @apply ax-border-primary-500 ax-text-primary-500;
267
- border-color: rgba(var(--ax-color-primary-500));
268
- color: rgba(var(--ax-color-primary-500));
269
- }
270
- & + .ax-dropdown-button-marker {
271
- border-inline-start-color: rgba(var(--ax-color-primary-500));
272
- }
273
- }
274
- }
275
-
276
- &.ax-state-selected {
277
- // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
278
- border-color: rgba(var(--ax-color-primary-500));
279
- color: rgba(var(--ax-color-primary-fore));
280
- }
281
- .ax-ripple {
282
- // @apply ax-bg-primary-500/30 #{!important};
283
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
284
- }
285
- ax-loading-spinner {
286
- .ax-loader {
287
- // @apply ax-border-ghost-fore ax-border-b-transparent;
288
- border-color: rgba(var(--ax-color-ghost-fore));
289
- border-bottom-color: transparent;
290
- }
291
- }
292
- &.ax-dropdown-button-marker {
293
- border-inline-start-color: rgba(var(--ax-color-border-default));
294
- }
295
- }
296
- .ax-el-ghost-blank {
297
- // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
298
- border-style: none;
299
- background-color: transparent;
300
- color: rgba(var(--ax-color-ghost-fore));
301
-
302
- &.ax-state-selected {
303
- // @apply ax-bg-primary-500 ax-text-primary-fore;
304
- background-color: rgba(var(--ax-color-primary-500));
305
- color: rgba(var(--ax-color-primary-fore));
306
- }
307
- &.ax-el-interactive {
308
- &:hover {
309
- &:not(&.ax-state-selected, &.ax-state-disabled) {
310
- // @apply ax-border-primary-700 ax-text-primary-700;
311
- border-color: rgba(var(--ax-color-primary-700));
312
- color: rgba(var(--ax-color-primary-700));
313
- }
314
- }
315
- &:active {
316
- // @apply ax-border-primary-800 ax-text-primary-800;
317
- border-color: rgba(var(--ax-color-primary-800));
318
- color: rgba(var(--ax-color-primary-800));
319
- }
320
- }
321
-
322
- .ax-ripple {
323
- // @apply ax-bg-primary-500/30 #{!important};
324
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
325
- }
326
- ax-loading-spinner {
327
- .ax-loader {
328
- // @apply ax-border-ghost-fore ax-border-b-transparent;
329
- border-color: rgba(var(--ax-color-ghost-fore));
330
- border-bottom-color: transparent;
331
- }
332
- }
333
- & > button {
334
- &:is(&:focus-visible, &.ax-state-focus) {
335
- // @apply ax-outline-primary-500;
336
- outline-color: rgba(var(--ax-color-primary-500));
337
- }
338
- }
339
- &.ax-dropdown-button-marker {
340
- border-inline-start-color: rgba(var(--ax-color-border-default));
341
- }
342
- }
343
- .ax-el-ghost-twotone {
344
- // @apply ax-border-transparent ax-bg-ghost-fore/5 ax-text-ghost-fore;
345
- border-color: transparent;
346
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
347
- color: rgba(var(--ax-color-ghost-fore));
348
-
349
- &.ax-el-interactive {
350
- &:hover {
351
- &:not(&.ax-state-selected, &.ax-state-disabled) {
352
- // @apply ax-bg-primary-200 ax-text-primary-fore-tint;
353
- background-color: rgba(var(--ax-color-primary-200));
354
- color: rgba(var(--ax-color-primary-fore-tint));
355
- }
356
- & + .ax-dropdown-button-marker {
357
- border-inline-start-color: rgba(var(--ax-color-primary-500));
358
- }
359
- }
360
- &:active {
361
- // @apply ax-bg-primary-300 ax-text-primary-fore-tint;
362
- background-color: rgba(var(--ax-color-primary-300));
363
- color: rgba(var(--ax-color-primary-fore-tint));
364
- }
365
- }
366
- &.ax-state-selected {
367
- // @apply ax-border-primary-300 ax-bg-primary-400 ax-text-primary-fore-tint;
368
- border-color: rgba(var(--ax-color-primary-300));
369
- background-color: rgba(var(--ax-color-primary-400));
370
- color: rgba(var(--ax-color-primary-fore-tint));
371
- }
372
- .ax-ripple {
373
- // @apply ax-bg-primary-500/30 #{!important};
374
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
375
- }
376
- ax-loading-spinner {
377
- .ax-loader {
378
- // @apply ax-border-ghost-fore ax-border-b-transparent;
379
- border-color: rgba(var(--ax-color-ghost-fore));
380
- border-bottom-color: transparent;
381
- }
382
- }
383
- & > button {
384
- &:is(&:focus-visible, &.ax-state-focus) {
385
- // @apply ax-outline-primary-500;
386
- outline-color: rgba(var(--ax-color-primary-500));
387
- }
388
- }
389
- &.ax-dropdown-button-marker {
390
- border-inline-start-color: rgba(var(--ax-color-border-default));
391
- }
392
- }
393
-
394
- @mixin color-look-dark-mode {
395
- @each $color in $color_names {
396
- @each $look in $look_names {
397
- @if ($look == 'solid') {
398
- .ax-el-#{$color}-#{$look} {
399
- // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
400
- background-color: rgba(var(--ax-color-#{$color}-200));
401
- color: rgba(var(--ax-color-#{$color}-fore-tint));
402
- border-color: rgba(var(--ax-color-#{$color}-200));
403
- &.ax-el-interactive {
404
- &:hover {
405
- &:not(.ax-state-disabled) {
406
- // @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore-tint;
407
- background-color: rgba(var(--ax-color-#{$color}-300));
408
- color: rgba(var(--ax-color-#{$color}-fore-tint));
409
- }
410
- }
411
- }
412
-
413
- &.ax-state-selected {
414
- // @apply ax-bg-#{$color}-400;
415
- background-color: rgba(var(--ax-color-#{$color}-400));
416
- }
417
- .ax-ripple {
418
- // @apply ax-bg-#{$color}-200/30 #{!important};
419
- background-color: rgba(
420
- var(--ax-color-#{$color}-500),
421
- 0.3
422
- ) !important;
423
- }
424
- ax-loading-spinner {
425
- .ax-loader {
426
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
427
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
428
- border-bottom-color: transparent;
429
- }
430
- }
431
- & > button {
432
- &:is(&:focus-visible, &.ax-state-focus) {
433
- outline-color: rgba(var(--ax-color-primary-200));
434
- }
435
- }
436
- &.ax-dropdown-button-marker {
437
- border-inline-start-color: rgba(var(--ax-color-#{$color}-900));
438
- }
439
- }
440
- }
441
- @if ($look == 'outline') {
442
- .ax-el-#{$color}-#{$look} {
443
- // @apply ax-border-#{$color}-200 ax-text-#{$color}-200;
444
-
445
- border-color: rgba(var(--ax-color-#{$color}-200));
446
- color: rgba(var(--ax-color-#{$color}-200));
447
-
448
- &.ax-el-interactive {
449
- &:hover {
450
- &:not(.ax-state-disabled) {
451
- // @apply ax-border-#{$color}-300 ax-text-#{$color}-300 ax-bg-transparent;
452
- border-color: rgba(var(--ax-color-#{$color}-300));
453
- color: rgba(var(--ax-color-#{$color}-300));
454
- background-color: transparent;
455
- }
456
- }
457
- }
458
-
459
- &.ax-state-selected {
460
- // @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore;
461
- border-color: rgba(var(--ax-color-#{$color}-300));
462
- color: rgba(var(--ax-color-#{$color}-300));
463
- }
464
- .ax-ripple {
465
- // @apply ax-bg-#{$color}-500/30 #{!important};
466
- border-color: rgba(var(--ax-color-#{$color}-500), 0.3);
467
- }
468
- ax-loading-spinner {
469
- .ax-loader {
470
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
471
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
472
- border-bottom-color: transparent;
473
- }
474
- }
475
- & > button {
476
- &:is(&:focus-visible, &.ax-state-focus) {
477
- // @apply ax-text-#{$color}-300 ax-outline-#{$color}-300 -ax-outline-offset-4;
478
- border-color: rgba(var(--ax-color-#{$color}-300));
479
- color: rgba(var(--ax-color-#{$color}-300));
480
- }
481
- }
482
- }
483
- }
484
-
485
- @if ($look == 'blank') {
486
- .ax-el-#{$color}-#{$look} {
487
- // @apply ax-text-#{$color}-300 ax-bg-transparent;
488
-
489
- color: rgba(var(--ax-color-#{$color}-300));
490
- background-color: transparent;
491
- &.ax-el-interactive {
492
- &:hover {
493
- &:not(.ax-state-disabled) {
494
- // @apply ax-text-#{$color}-500;
495
- color: rgba(var(--ax-color-#{$color}-400));
496
- }
497
- }
498
- }
499
-
500
- &.ax-state-selected {
501
- // @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
502
- background-color: rgba(var(--ax-color-#{$color}-500));
503
- color: rgba(var(--ax-color-#{$color}-fore));
504
- }
505
- .ax-ripple {
506
- // @apply ax-bg-#{$color}-500/30 #{!important};
507
- background-color: rgba(
508
- var(--ax-color-#{$color}-300),
509
- 0.3
510
- ) !important;
511
- }
512
- ax-loading-spinner {
513
- .ax-loader {
514
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
515
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
516
- border-bottom-color: transparent;
517
- }
518
- }
519
- & > button {
520
- &:is(&:focus-visible, &.ax-state-focus) {
521
- // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
522
- }
523
- }
524
- }
525
- }
526
- @if ($look == 'twotone') {
527
- .ax-el-#{$color}-#{$look} {
528
- // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
529
-
530
- background-color: rgba(var(--ax-color-#{$color}-200));
531
- color: rgba(var(--ax-color-#{$color}-fore-tint));
532
- border-color: rgba(var(--ax-color-#{$color}-200));
533
-
534
- &.ax-state-interactive {
535
- &:hover {
536
- &:not(.ax-state-disabled) {
537
- background-color: rgba(var(--ax-color-#{$color}-300));
538
- // @apply ax-bg-#{$color}-300;
539
- }
540
- }
541
- }
542
-
543
- &.ax-state-selected {
544
- // @apply ax-bg-#{$color}-400;
545
- background-color: rgba(var(--ax-color-#{$color}-400));
546
- }
547
- .ax-ripple {
548
- // @apply ax-bg-#{$color}-500/30 #{!important};
549
- background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
550
- }
551
- ax-loading-spinner {
552
- .ax-loader {
553
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
554
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
555
- border-bottom-color: transparent;
556
- }
557
- }
558
- & > button {
559
- &:is(&:focus-visible, &.ax-state-focus) {
560
- // @apply ax-outline-#{$color}-500;
561
- }
562
- }
563
- &.ax-dropdown-button-marker {
564
- border-inline-start-color: rgba(var(--ax-color-#{$color}-950));
565
- }
566
- }
567
- }
568
- }
569
- }
570
- .ax-el-ghost-solid {
571
- &.ax-el-interactive {
572
- &:hover {
573
- &:not(&.ax-state-selected, &.ax-state-disabled) {
574
- border-color: rgba(var(--ax-color-primary-200));
575
- color: rgba(var(--ax-color-primary-200));
576
- }
577
- & + .ax-dropdown-button-marker {
578
- border-inline-start-color: rgba(var(--ax-color-primary-200));
579
- }
580
- }
581
- &:active {
582
- border-color: rgba(var(--ax-color-primary-300));
583
- color: rgba(var(--ax-color-primary-300));
584
- }
585
- }
586
-
587
- &.ax-state-selected {
588
- border-color: rgba(var(--ax-color-primary-200));
589
- background-color: rgba(var(--ax-color-primary-200));
590
- color: rgba(var(--ax-color-primary-fore));
591
- }
592
-
593
- .ax-ripple {
594
- background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
595
- }
596
- }
597
- .ax-el-ghost-outline {
598
- &.ax-el-interactive {
599
- &:hover {
600
- &:not(&.ax-state-selected, &.ax-state-disabled) {
601
- border-color: rgba(var(--ax-color-primary-200));
602
- color: rgba(var(--ax-color-primary-200));
603
- }
604
- & + .ax-dropdown-button-marker {
605
- border-inline-start-color: rgba(var(--ax-color-primary-200));
606
- }
607
- }
608
- }
609
-
610
- &.ax-state-selected {
611
- border-color: rgba(var(--ax-color-primary-200));
612
- color: rgba(var(--ax-color-primary-fore-tint));
613
- }
614
- .ax-ripple {
615
- background-color: rgba(var(--ax-color-primary-200), 0.3);
616
- }
617
- ax-loading-spinner {
618
- .ax-loader {
619
- border-color: rgba(var(--ax-color-ghost-fore));
620
- border-bottom-color: transparent;
621
- }
622
- }
623
- }
624
- .ax-el-ghost-blank {
625
- // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
626
- border-style: none;
627
- background-color: transparent;
628
- color: rgba(var(--ax-color-ghost-fore));
629
-
630
- &.ax-state-selected {
631
- // @apply ax-bg-primary-500 ax-text-primary-fore;
632
- background-color: rgba(var(--ax-color-primary-500));
633
- color: rgba(var(--ax-color-primary-fore));
634
- }
635
- &.ax-el-interactive {
636
- &:hover {
637
- &:not(&.ax-state-selected, &.ax-state-disabled) {
638
- border-color: rgba(var(--ax-color-primary-300));
639
- color: rgba(var(--ax-color-primary-300));
640
- }
641
- }
642
- &:active {
643
- border-color: rgba(var(--ax-color-primary-400));
644
- color: rgba(var(--ax-color-primary-400));
645
- }
646
- }
647
-
648
- .ax-ripple {
649
- background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
650
- }
651
-
652
- & > button {
653
- &:is(&:focus-visible, &.ax-state-focus) {
654
- outline-color: rgba(var(--ax-color-primary-200));
655
- }
656
- }
657
- }
658
- .ax-el-ghost-twotone {
659
- border-color: transparent;
660
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
661
- color: rgba(var(--ax-color-ghost-fore));
662
-
663
- &.ax-el-interactive {
664
- &:hover {
665
- &:not(&.ax-state-selected, &.ax-state-disabled) {
666
- background-color: rgba(var(--ax-color-primary-200));
667
- color: rgba(var(--ax-color-primary-fore-tint));
668
- }
669
- & + .ax-dropdown-button-marker {
670
- border-inline-start-color: rgba(var(--ax-color-primary-200));
671
- }
672
- }
673
- &:active {
674
- background-color: rgba(var(--ax-color-primary-300));
675
- color: rgba(var(--ax-color-primary-fore-tint));
676
- }
677
- }
678
- &.ax-state-selected {
679
- border-color: rgba(var(--ax-color-primary-300));
680
- background-color: rgba(var(--ax-color-primary-300));
681
- }
682
- .ax-ripple {
683
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
684
- }
685
-
686
- & > button {
687
- &:is(&:focus-visible, &.ax-state-focus) {
688
- outline-color: rgba(var(--ax-color-primary-200));
689
- }
690
- }
691
- }
692
- }
693
-
694
- @include darkMode() {
695
- @include color-look-dark-mode();
696
- }
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
+ color: rgba(var(--ax-color-#{$color}-fore-tint));
114
+ }
115
+ }
116
+ }
117
+
118
+ &.ax-state-selected {
119
+ // @apply ax-bg-#{$color}-700 ax-text-#{$color}-fore;
120
+ background-color: rgba(var(--ax-color-#{$color}-700));
121
+ color: rgba(var(--ax-color-#{$color}-fore));
122
+ }
123
+ .ax-ripple {
124
+ // @apply ax-bg-#{$color}-500/30 #{!important};
125
+ background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
126
+ }
127
+ ax-loading-spinner {
128
+ .ax-loader {
129
+ // @apply ax-border-#{$color}-500 ax-border-b-transparent;
130
+ border-color: rgba(var(--ax-color-#{$color}-500));
131
+ border-bottom-color: transparent;
132
+ }
133
+ }
134
+ &:is(&:focus-visible, &.ax-state-focus) {
135
+ // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
136
+ outline-color: rgba(var(--ax-color-#{$color}-300));
137
+ outline-offset: 0;
138
+ }
139
+ & > button {
140
+ &:is(&:focus-visible, &.ax-state-focus) {
141
+ // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
142
+ outline-color: rgba(var(--ax-color-#{$color}-300));
143
+ outline-offset: 0;
144
+ }
145
+ }
146
+ &.ax-dropdown-button-marker {
147
+ border-inline-start-color: transparent;
148
+ }
149
+ }
150
+ }
151
+
152
+ @if ($look == 'twotone') {
153
+ .ax-el-#{$color}-#{$look} {
154
+ // @apply ax-bg-#{$color}-100 ax-text-#{$color}-fore-tint ax-border-#{$color}-100;
155
+ background-color: rgba(var(--ax-color-#{$color}-100));
156
+ color: rgba(var(--ax-color-#{$color}-fore-tint));
157
+ border-color: rgba(var(--ax-color-#{$color}-100));
158
+
159
+ &.ax-el-interactive {
160
+ &:hover {
161
+ &:not(.ax-state-disabled) {
162
+ // @apply ax-bg-#{$color}-200;
163
+ background-color: rgba(var(--ax-color-#{$color}-200));
164
+ }
165
+ }
166
+ }
167
+
168
+ &.ax-state-selected {
169
+ // @apply ax-bg-#{$color}-300;
170
+ background-color: rgba(var(--ax-color-#{$color}-300));
171
+ }
172
+
173
+ .ax-ripple {
174
+ // @apply ax-bg-#{$color}-500/30 #{!important};
175
+ background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
176
+ }
177
+ ax-loading-spinner {
178
+ .ax-loader {
179
+ // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
180
+ border-color: rgba(var(--ax-color-#{$color}-fore-tint));
181
+ border-bottom-color: transparent;
182
+ }
183
+ }
184
+
185
+ &:is(&:focus-visible, &.ax-state-focus) {
186
+ // @apply ax-outline-#{$color}-500;
187
+ outline-color: rgba(var(--ax-color-#{$color}-500));
188
+ }
189
+ & > button {
190
+ &:is(&:focus-visible, &.ax-state-focus) {
191
+ // @apply ax-outline-#{$color}-500;
192
+ outline-color: rgba(var(--ax-color-#{$color}-500));
193
+ }
194
+ }
195
+ &.ax-dropdown-button-marker {
196
+ border-inline-start-color: rgba(var(--ax-color-#{$color}-50));
197
+ }
198
+ }
199
+ }
200
+ }
201
+ }
202
+
203
+ .ax-el-ghost-solid {
204
+ // @apply ax-border ax-border-default ax-bg-ghost ax-text-ghost-fore ax-shadow-sm;
205
+ border-width: 1px;
206
+ border-color: rgba(var(--ax-color-border-default));
207
+ background-color: rgba(var(--ax-color-ghost));
208
+ color: rgba(var(--ax-color-ghost-fore));
209
+ --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
210
+ --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
211
+ box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000),
212
+ var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
213
+ &.ax-el-interactive {
214
+ &:hover {
215
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
216
+ // @apply ax-border-primary-500 ax-text-primary-500;
217
+ border-color: rgba(var(--ax-color-primary-500));
218
+ color: rgba(var(--ax-color-primary-500));
219
+ }
220
+ // + &.ax-dropdown-button-marker {
221
+ // border-inline-start-color: rgba(var(--ax-color-primary-500));
222
+ // }
223
+ & + .ax-dropdown-button-marker {
224
+ border-inline-start-color: rgba(var(--ax-color-primary-500));
225
+ }
226
+ }
227
+ &:active {
228
+ // @apply ax-border-primary-700 ax-text-primary-700;
229
+ border-color: rgba(var(--ax-color-primary-700));
230
+ color: rgba(var(--ax-color-primary-700));
231
+ }
232
+ }
233
+
234
+ &.ax-state-selected {
235
+ // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
236
+ border-color: rgba(var(--ax-color-primary-500));
237
+ background-color: rgba(var(--ax-color-primary-500));
238
+ color: rgba(var(--ax-color-primary-fore));
239
+ }
240
+
241
+ .ax-ripple {
242
+ // @apply ax-bg-primary-500/30 #{!important};
243
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
244
+ }
245
+ ax-loading-spinner {
246
+ .ax-loader {
247
+ // @apply ax-border-ghost-fore ax-border-b-transparent;
248
+ border-color: rgba(var(--ax-color-ghost-fore));
249
+ border-bottom-color: transparent;
250
+ }
251
+ }
252
+ &.ax-dropdown-button-marker {
253
+ border-inline-start-color: rgba(var(--ax-color-border-default));
254
+ }
255
+ }
256
+ .ax-el-ghost-outline {
257
+ // @apply ax-border ax-border-default ax-bg-transparent ax-text-ghost-fore;
258
+ border-width: 1px;
259
+ border-color: rgba(var(--ax-color-border-default));
260
+ background-color: transparent;
261
+ color: rgba(var(--ax-color-ghost-fore));
262
+
263
+ &.ax-el-interactive {
264
+ &:hover {
265
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
266
+ // @apply ax-border-primary-500 ax-text-primary-500;
267
+ border-color: rgba(var(--ax-color-primary-500));
268
+ color: rgba(var(--ax-color-primary-500));
269
+ }
270
+ & + .ax-dropdown-button-marker {
271
+ border-inline-start-color: rgba(var(--ax-color-primary-500));
272
+ }
273
+ }
274
+ }
275
+
276
+ &.ax-state-selected {
277
+ // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
278
+ border-color: rgba(var(--ax-color-primary-500));
279
+ color: rgba(var(--ax-color-primary-fore));
280
+ }
281
+ .ax-ripple {
282
+ // @apply ax-bg-primary-500/30 #{!important};
283
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
284
+ }
285
+ ax-loading-spinner {
286
+ .ax-loader {
287
+ // @apply ax-border-ghost-fore ax-border-b-transparent;
288
+ border-color: rgba(var(--ax-color-ghost-fore));
289
+ border-bottom-color: transparent;
290
+ }
291
+ }
292
+ &.ax-dropdown-button-marker {
293
+ border-inline-start-color: rgba(var(--ax-color-border-default));
294
+ }
295
+ }
296
+ .ax-el-ghost-blank {
297
+ // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
298
+ border-style: none;
299
+ background-color: transparent;
300
+ color: rgba(var(--ax-color-ghost-fore));
301
+
302
+ &.ax-state-selected {
303
+ // @apply ax-bg-primary-500 ax-text-primary-fore;
304
+ background-color: rgba(var(--ax-color-primary-500));
305
+ color: rgba(var(--ax-color-primary-fore));
306
+ }
307
+ &.ax-el-interactive {
308
+ &:hover {
309
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
310
+ // @apply ax-border-primary-700 ax-text-primary-700;
311
+ border-color: rgba(var(--ax-color-primary-700));
312
+ color: rgba(var(--ax-color-primary-700));
313
+ }
314
+ }
315
+ &:active {
316
+ // @apply ax-border-primary-800 ax-text-primary-800;
317
+ border-color: rgba(var(--ax-color-primary-800));
318
+ color: rgba(var(--ax-color-primary-800));
319
+ }
320
+ }
321
+
322
+ .ax-ripple {
323
+ // @apply ax-bg-primary-500/30 #{!important};
324
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
325
+ }
326
+ ax-loading-spinner {
327
+ .ax-loader {
328
+ // @apply ax-border-ghost-fore ax-border-b-transparent;
329
+ border-color: rgba(var(--ax-color-ghost-fore));
330
+ border-bottom-color: transparent;
331
+ }
332
+ }
333
+ & > button {
334
+ &:is(&:focus-visible, &.ax-state-focus) {
335
+ // @apply ax-outline-primary-500;
336
+ outline-color: rgba(var(--ax-color-primary-500));
337
+ }
338
+ }
339
+ &.ax-dropdown-button-marker {
340
+ border-inline-start-color: rgba(var(--ax-color-border-default));
341
+ }
342
+ }
343
+ .ax-el-ghost-twotone {
344
+ // @apply ax-border-transparent ax-bg-ghost-fore/5 ax-text-ghost-fore;
345
+ border-color: transparent;
346
+ background-color: rgba(var(--ax-color-ghost-fore), 0.05);
347
+ color: rgba(var(--ax-color-ghost-fore));
348
+
349
+ &.ax-el-interactive {
350
+ &:hover {
351
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
352
+ // @apply ax-bg-primary-200 ax-text-primary-fore-tint;
353
+ background-color: rgba(var(--ax-color-primary-200));
354
+ color: rgba(var(--ax-color-primary-fore-tint));
355
+ }
356
+ & + .ax-dropdown-button-marker {
357
+ border-inline-start-color: rgba(var(--ax-color-primary-500));
358
+ }
359
+ }
360
+ &:active {
361
+ // @apply ax-bg-primary-300 ax-text-primary-fore-tint;
362
+ background-color: rgba(var(--ax-color-primary-300));
363
+ color: rgba(var(--ax-color-primary-fore-tint));
364
+ }
365
+ }
366
+ &.ax-state-selected {
367
+ // @apply ax-border-primary-300 ax-bg-primary-400 ax-text-primary-fore-tint;
368
+ border-color: rgba(var(--ax-color-primary-300));
369
+ background-color: rgba(var(--ax-color-primary-400));
370
+ color: rgba(var(--ax-color-primary-fore-tint));
371
+ }
372
+ .ax-ripple {
373
+ // @apply ax-bg-primary-500/30 #{!important};
374
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
375
+ }
376
+ ax-loading-spinner {
377
+ .ax-loader {
378
+ // @apply ax-border-ghost-fore ax-border-b-transparent;
379
+ border-color: rgba(var(--ax-color-ghost-fore));
380
+ border-bottom-color: transparent;
381
+ }
382
+ }
383
+ & > button {
384
+ &:is(&:focus-visible, &.ax-state-focus) {
385
+ // @apply ax-outline-primary-500;
386
+ outline-color: rgba(var(--ax-color-primary-500));
387
+ }
388
+ }
389
+ &.ax-dropdown-button-marker {
390
+ border-inline-start-color: rgba(var(--ax-color-border-default));
391
+ }
392
+ }
393
+
394
+ @mixin color-look-dark-mode {
395
+ @each $color in $color_names {
396
+ @each $look in $look_names {
397
+ @if ($look == 'solid') {
398
+ .ax-el-#{$color}-#{$look} {
399
+ // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
400
+ background-color: rgba(var(--ax-color-#{$color}-200));
401
+ color: rgba(var(--ax-color-#{$color}-fore-tint));
402
+ border-color: rgba(var(--ax-color-#{$color}-200));
403
+ &.ax-el-interactive {
404
+ &:hover {
405
+ &:not(.ax-state-disabled) {
406
+ // @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore-tint;
407
+ background-color: rgba(var(--ax-color-#{$color}-300));
408
+ color: rgba(var(--ax-color-#{$color}-fore-tint));
409
+ }
410
+ }
411
+ }
412
+
413
+ &.ax-state-selected {
414
+ // @apply ax-bg-#{$color}-400;
415
+ background-color: rgba(var(--ax-color-#{$color}-400));
416
+ }
417
+ .ax-ripple {
418
+ // @apply ax-bg-#{$color}-200/30 #{!important};
419
+ background-color: rgba(
420
+ var(--ax-color-#{$color}-500),
421
+ 0.3
422
+ ) !important;
423
+ }
424
+ ax-loading-spinner {
425
+ .ax-loader {
426
+ // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
427
+ border-color: rgba(var(--ax-color-#{$color}-fore-tint));
428
+ border-bottom-color: transparent;
429
+ }
430
+ }
431
+ & > button {
432
+ &:is(&:focus-visible, &.ax-state-focus) {
433
+ outline-color: rgba(var(--ax-color-primary-200));
434
+ }
435
+ }
436
+ &.ax-dropdown-button-marker {
437
+ border-inline-start-color: rgba(var(--ax-color-#{$color}-900));
438
+ }
439
+ }
440
+ }
441
+ @if ($look == 'outline') {
442
+ .ax-el-#{$color}-#{$look} {
443
+ // @apply ax-border-#{$color}-200 ax-text-#{$color}-200;
444
+
445
+ border-color: rgba(var(--ax-color-#{$color}-200));
446
+ color: rgba(var(--ax-color-#{$color}-200));
447
+
448
+ &.ax-el-interactive {
449
+ &:hover {
450
+ &:not(.ax-state-disabled) {
451
+ // @apply ax-border-#{$color}-300 ax-text-#{$color}-300 ax-bg-transparent;
452
+ border-color: rgba(var(--ax-color-#{$color}-300));
453
+ color: rgba(var(--ax-color-#{$color}-300));
454
+ background-color: transparent;
455
+ }
456
+ }
457
+ }
458
+
459
+ &.ax-state-selected {
460
+ // @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore;
461
+ border-color: rgba(var(--ax-color-#{$color}-300));
462
+ color: rgba(var(--ax-color-#{$color}-300));
463
+ }
464
+ .ax-ripple {
465
+ // @apply ax-bg-#{$color}-500/30 #{!important};
466
+ border-color: rgba(var(--ax-color-#{$color}-500), 0.3);
467
+ }
468
+ ax-loading-spinner {
469
+ .ax-loader {
470
+ // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
471
+ border-color: rgba(var(--ax-color-#{$color}-fore-tint));
472
+ border-bottom-color: transparent;
473
+ }
474
+ }
475
+ & > button {
476
+ &:is(&:focus-visible, &.ax-state-focus) {
477
+ // @apply ax-text-#{$color}-300 ax-outline-#{$color}-300 -ax-outline-offset-4;
478
+ border-color: rgba(var(--ax-color-#{$color}-300));
479
+ color: rgba(var(--ax-color-#{$color}-300));
480
+ }
481
+ }
482
+ }
483
+ }
484
+
485
+ @if ($look == 'blank') {
486
+ .ax-el-#{$color}-#{$look} {
487
+ // @apply ax-text-#{$color}-300 ax-bg-transparent;
488
+
489
+ color: rgba(var(--ax-color-#{$color}-300));
490
+ background-color: transparent;
491
+ &.ax-el-interactive {
492
+ &:hover {
493
+ &:not(.ax-state-disabled) {
494
+ // @apply ax-text-#{$color}-500;
495
+ color: rgba(var(--ax-color-#{$color}-400));
496
+ }
497
+ }
498
+ }
499
+
500
+ &.ax-state-selected {
501
+ // @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
502
+ background-color: rgba(var(--ax-color-#{$color}-500));
503
+ color: rgba(var(--ax-color-#{$color}-fore));
504
+ }
505
+ .ax-ripple {
506
+ // @apply ax-bg-#{$color}-500/30 #{!important};
507
+ background-color: rgba(
508
+ var(--ax-color-#{$color}-300),
509
+ 0.3
510
+ ) !important;
511
+ }
512
+ ax-loading-spinner {
513
+ .ax-loader {
514
+ // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
515
+ border-color: rgba(var(--ax-color-#{$color}-fore-tint));
516
+ border-bottom-color: transparent;
517
+ }
518
+ }
519
+ & > button {
520
+ &:is(&:focus-visible, &.ax-state-focus) {
521
+ // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
522
+ }
523
+ }
524
+ }
525
+ }
526
+ @if ($look == 'twotone') {
527
+ .ax-el-#{$color}-#{$look} {
528
+ // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
529
+
530
+ background-color: rgba(var(--ax-color-#{$color}-200));
531
+ color: rgba(var(--ax-color-#{$color}-fore-tint));
532
+ border-color: rgba(var(--ax-color-#{$color}-200));
533
+
534
+ &.ax-state-interactive {
535
+ &:hover {
536
+ &:not(.ax-state-disabled) {
537
+ background-color: rgba(var(--ax-color-#{$color}-300));
538
+ // @apply ax-bg-#{$color}-300;
539
+ }
540
+ }
541
+ }
542
+
543
+ &.ax-state-selected {
544
+ // @apply ax-bg-#{$color}-400;
545
+ background-color: rgba(var(--ax-color-#{$color}-400));
546
+ }
547
+ .ax-ripple {
548
+ // @apply ax-bg-#{$color}-500/30 #{!important};
549
+ background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
550
+ }
551
+ ax-loading-spinner {
552
+ .ax-loader {
553
+ // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
554
+ border-color: rgba(var(--ax-color-#{$color}-fore-tint));
555
+ border-bottom-color: transparent;
556
+ }
557
+ }
558
+ & > button {
559
+ &:is(&:focus-visible, &.ax-state-focus) {
560
+ // @apply ax-outline-#{$color}-500;
561
+ }
562
+ }
563
+ &.ax-dropdown-button-marker {
564
+ border-inline-start-color: rgba(var(--ax-color-#{$color}-950));
565
+ }
566
+ }
567
+ }
568
+ }
569
+ }
570
+ .ax-el-ghost-solid {
571
+ &.ax-el-interactive {
572
+ &:hover {
573
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
574
+ border-color: rgba(var(--ax-color-primary-200));
575
+ color: rgba(var(--ax-color-primary-200));
576
+ }
577
+ & + .ax-dropdown-button-marker {
578
+ border-inline-start-color: rgba(var(--ax-color-primary-200));
579
+ }
580
+ }
581
+ &:active {
582
+ border-color: rgba(var(--ax-color-primary-300));
583
+ color: rgba(var(--ax-color-primary-300));
584
+ }
585
+ }
586
+
587
+ &.ax-state-selected {
588
+ border-color: rgba(var(--ax-color-primary-200));
589
+ background-color: rgba(var(--ax-color-primary-200));
590
+ color: rgba(var(--ax-color-primary-fore));
591
+ }
592
+
593
+ .ax-ripple {
594
+ background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
595
+ }
596
+ }
597
+ .ax-el-ghost-outline {
598
+ &.ax-el-interactive {
599
+ &:hover {
600
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
601
+ border-color: rgba(var(--ax-color-primary-200));
602
+ color: rgba(var(--ax-color-primary-200));
603
+ }
604
+ & + .ax-dropdown-button-marker {
605
+ border-inline-start-color: rgba(var(--ax-color-primary-200));
606
+ }
607
+ }
608
+ }
609
+
610
+ &.ax-state-selected {
611
+ border-color: rgba(var(--ax-color-primary-200));
612
+ color: rgba(var(--ax-color-primary-fore-tint));
613
+ }
614
+ .ax-ripple {
615
+ background-color: rgba(var(--ax-color-primary-200), 0.3);
616
+ }
617
+ ax-loading-spinner {
618
+ .ax-loader {
619
+ border-color: rgba(var(--ax-color-ghost-fore));
620
+ border-bottom-color: transparent;
621
+ }
622
+ }
623
+ }
624
+ .ax-el-ghost-blank {
625
+ // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
626
+ border-style: none;
627
+ background-color: transparent;
628
+ color: rgba(var(--ax-color-ghost-fore));
629
+
630
+ &.ax-state-selected {
631
+ // @apply ax-bg-primary-500 ax-text-primary-fore;
632
+ background-color: rgba(var(--ax-color-primary-500));
633
+ color: rgba(var(--ax-color-primary-fore));
634
+ }
635
+ &.ax-el-interactive {
636
+ &:hover {
637
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
638
+ border-color: rgba(var(--ax-color-primary-300));
639
+ color: rgba(var(--ax-color-primary-300));
640
+ }
641
+ }
642
+ &:active {
643
+ border-color: rgba(var(--ax-color-primary-400));
644
+ color: rgba(var(--ax-color-primary-400));
645
+ }
646
+ }
647
+
648
+ .ax-ripple {
649
+ background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
650
+ }
651
+
652
+ & > button {
653
+ &:is(&:focus-visible, &.ax-state-focus) {
654
+ outline-color: rgba(var(--ax-color-primary-200));
655
+ }
656
+ }
657
+ }
658
+ .ax-el-ghost-twotone {
659
+ border-color: transparent;
660
+ background-color: rgba(var(--ax-color-ghost-fore), 0.05);
661
+ color: rgba(var(--ax-color-ghost-fore));
662
+
663
+ &.ax-el-interactive {
664
+ &:hover {
665
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
666
+ background-color: rgba(var(--ax-color-primary-200));
667
+ color: rgba(var(--ax-color-primary-fore-tint));
668
+ }
669
+ & + .ax-dropdown-button-marker {
670
+ border-inline-start-color: rgba(var(--ax-color-primary-200));
671
+ }
672
+ }
673
+ &:active {
674
+ background-color: rgba(var(--ax-color-primary-300));
675
+ color: rgba(var(--ax-color-primary-fore-tint));
676
+ }
677
+ }
678
+ &.ax-state-selected {
679
+ border-color: rgba(var(--ax-color-primary-300));
680
+ background-color: rgba(var(--ax-color-primary-300));
681
+ }
682
+ .ax-ripple {
683
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
684
+ }
685
+
686
+ & > button {
687
+ &:is(&:focus-visible, &.ax-state-focus) {
688
+ outline-color: rgba(var(--ax-color-primary-200));
689
+ }
690
+ }
691
+ }
692
+ }
693
+
694
+ @include darkMode() {
695
+ @include color-look-dark-mode();
696
+ }