@acorex/styles 5.0.21 → 5.0.22

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 (23) hide show
  1. package/dark.scss +15 -3
  2. package/package.json +1 -1
  3. package/src/base/index.scss +1 -1
  4. package/src/components/_alert.scss +19 -18
  5. package/src/components/_badge.scss +1 -1
  6. package/src/components/_button.scss +55 -55
  7. package/src/components/_calendar.scss +11 -11
  8. package/src/components/_checkbox.scss +4 -4
  9. package/src/components/_dialog.scss +10 -10
  10. package/src/components/_dropdown.scss +9 -9
  11. package/src/components/_editor-container.scss +4 -4
  12. package/src/components/_form.scss +1 -1
  13. package/src/components/_input.scss +1 -1
  14. package/src/components/_list.scss +2 -2
  15. package/src/components/_loading.scss +2 -2
  16. package/src/components/_radio.scss +3 -3
  17. package/src/components/_selectbox.scss +3 -0
  18. package/src/components/_selection-list.scss +3 -3
  19. package/src/components/_side-menu.scss +1 -5
  20. package/src/components/_switch.scss +10 -11
  21. package/src/components/_tabs.scss +19 -19
  22. package/src/components/_toast.scss +5 -5
  23. package/src/variables/_colors.scss +1 -1
package/dark.scss CHANGED
@@ -1,5 +1,5 @@
1
- .ax-dark,
2
- .ax-dark * {
1
+ html.ax-dark,
2
+ html.ax-dark * {
3
3
  --tw-ring-offset-color: #151b24;
4
4
  --ax-color-default-background: 21 27 36;
5
5
  --ax-color-default-color: 255 255 255;
@@ -19,7 +19,7 @@
19
19
  background: rgba(0, 0, 0, 0.8) !important;
20
20
  }
21
21
 
22
- .ax-controll {
22
+ .ax-control {
23
23
  @apply ax-border-transparent ax-bg-white/[0.16] ax-backdrop-blur-3xl;
24
24
  }
25
25
 
@@ -27,6 +27,18 @@
27
27
  @apply ax-bg-white/20 ax-border-white/[0.1] ax-backdrop-blur-3xl;
28
28
  }
29
29
 
30
+ .ax-radio {
31
+ &:checked {
32
+ @apply ax-border-primary-500 ax-bg-primary-500;
33
+ }
34
+ }
35
+
36
+ .ax-checkbox {
37
+ &:checked,
38
+ &:indeterminate {
39
+ @apply ax-bg-primary-500;
40
+ }
41
+ }
30
42
  .cdk-overlay-pane {
31
43
  .ax-editor-container,
32
44
  input[type="checkbox"],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.0.21",
3
+ "version": "5.0.22",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/base/index.scss CHANGED
@@ -21,7 +21,7 @@ body {
21
21
  font-size: 16px
22
22
  }
23
23
 
24
- .ax-controll {
24
+ .ax-control {
25
25
  @apply ax-border-light-300 ax-bg-white;
26
26
  }
27
27
 
package/src/components/_alert.scss CHANGED
@@ -37,25 +37,26 @@
37
37
  }
38
38
  .ax-alert-footer {
39
39
  .ax-alert-buttons {
40
- @apply ax-flex ax-mt-2;
40
+ @apply ax-flex ax-mt-4;
41
41
  .ax-alert-button {
42
- @apply ax-font-bold ax-me-4 ax-cursor-pointer ax-rounded;
42
+ @apply ax-text-base lg:ax-text-sm ax-font-semibold ax-me-4 ax-cursor-pointer;
43
43
  }
44
44
  }
45
45
  }
46
+
46
47
  }
47
48
  .ax-alert-suffix {
48
49
  .ax-alert-buttons {
49
50
  .ax-alert-button {
50
- @apply ax-font-bold ax-me-0.5 ax-cursor-pointer ax-rounded;
51
+ @apply ax-me-0.5 ax-text-base lg:ax-text-sm ax-font-semibold ax-cursor-pointer;
51
52
  i {
52
53
  @apply ax-mx-1;
53
54
  }
54
55
  }
55
56
  }
56
57
  }
57
- &.ax-primary {
58
- @apply ax-bg-primary-50 ax-text-primary dark:ax-bg-primary-500 dark:ax-text-primary-50;
58
+ &.ax-primary-default {
59
+ @apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-50;
59
60
  .ax-alert-title {
60
61
  @apply ax-text-primary-700 dark:ax-text-primary-100;
61
62
  }
@@ -65,8 +66,8 @@
65
66
  }
66
67
  }
67
68
  }
68
- &.ax-secondary {
69
- @apply ax-bg-secondary-50 ax-text-secondary dark:ax-bg-secondary-500 dark:ax-text-secondary-50;
69
+ &.ax-secondary-default {
70
+ @apply ax-bg-secondary-50 ax-text-secondary-500 dark:ax-bg-secondary-500 dark:ax-text-secondary-50;
70
71
  .ax-alert-title {
71
72
  @apply ax-text-secondary-700 dark:ax-text-secondary-100;
72
73
  }
@@ -76,8 +77,8 @@
76
77
  }
77
78
  }
78
79
  }
79
- &.ax-success {
80
- @apply ax-bg-success-50 ax-text-success dark:ax-bg-success-500 dark:ax-text-success-50;
80
+ &.ax-success-default {
81
+ @apply ax-bg-success-50 ax-text-success-500 dark:ax-bg-success-500 dark:ax-text-success-50;
81
82
  .ax-alert-title {
82
83
  @apply ax-text-success-700 dark:ax-text-success-100;
83
84
  }
@@ -87,8 +88,8 @@
87
88
  }
88
89
  }
89
90
  }
90
- &.ax-warning {
91
- @apply ax-bg-warning-50 ax-text-warning dark:ax-bg-warning-500 dark:ax-text-warning-50;
91
+ &.ax-warning-default {
92
+ @apply ax-bg-warning-50 ax-text-warning-500 dark:ax-bg-warning-600 dark:ax-text-white;
92
93
  .ax-alert-title {
93
94
  @apply ax-text-warning-700 dark:ax-text-warning-100;
94
95
  }
@@ -98,8 +99,8 @@
98
99
  }
99
100
  }
100
101
  }
101
- &.ax-danger {
102
- @apply ax-bg-danger-50 ax-text-danger dark:ax-bg-danger-500 dark:ax-text-danger-50;
102
+ &.ax-danger-default {
103
+ @apply ax-bg-danger-50 ax-text-danger-500 dark:ax-bg-danger-500 dark:ax-text-danger-50;
103
104
  .ax-alert-title {
104
105
  @apply ax-text-danger-700 dark:ax-text-danger-100;
105
106
  }
@@ -109,8 +110,8 @@
109
110
  }
110
111
  }
111
112
  }
112
- &.ax-info {
113
- @apply ax-bg-info-50 ax-text-info dark:ax-bg-info-500 dark:ax-text-info-50;
113
+ &.ax-info-default {
114
+ @apply ax-bg-info-50 ax-text-info-500 dark:ax-bg-info-500 dark:ax-text-info-50;
114
115
  .ax-alert-title {
115
116
  @apply ax-text-info-700 dark:ax-text-info-100;
116
117
  }
@@ -120,7 +121,7 @@
120
121
  }
121
122
  }
122
123
  }
123
- &.ax-light {
124
+ &.ax-light-default {
124
125
  @apply ax-bg-light-50 ax-text-light-fore dark:ax-bg-light-500 dark:ax-text-light-50;
125
126
  .ax-alert-title {
126
127
  @apply ax-text-light-fore dark:ax-text-light-100;
@@ -131,8 +132,8 @@
131
132
  }
132
133
  }
133
134
  }
134
- &.ax-dark {
135
- @apply ax-bg-dark ax-text-dark-fore dark:ax-bg-dark-500 dark:ax-text-dark-50;
135
+ &.ax-dark-default {
136
+ @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-400 dark:ax-text-dark-50;
136
137
  .ax-alert-title {
137
138
  @apply ax-text-dark-fore dark:ax-text-dark-100;
138
139
  }
package/src/components/_badge.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @layer components {
2
2
  .ax-badge {
3
- @apply ax-rounded ax-py-1 ax-px-2 ax-align-middle ax-flex ax-justify-center ax-items-center ax-max-w-max ax-text-sm dark:ax-bg-white/[0.16] dark:ax-text-light-100;
3
+ @apply ax-rounded ax-py-1 ax-px-2 ax-align-middle ax-flex ax-justify-center ax-items-center ax-max-w-max ax-text-sm;
4
4
  ax-prefix {
5
5
  @apply ax-me-1.5
6
6
  }
package/src/components/_button.scss CHANGED
@@ -70,7 +70,7 @@
70
70
  @apply ax-cursor-not-allowed ax-opacity-60;
71
71
  }
72
72
  // normal
73
- &.ax-primary {
73
+ &.ax-primary-default {
74
74
  @apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
75
75
  &:not(.ax-state-disabled) {
76
76
  &:hover {
@@ -88,7 +88,7 @@
88
88
  @apply ax-bg-primary-700;
89
89
  }
90
90
  }
91
- &.ax-secondary {
91
+ &.ax-secondary-default {
92
92
  @apply ax-shadow-sm ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent;
93
93
  &:not(.ax-state-disabled) {
94
94
  &:hover {
@@ -106,7 +106,7 @@
106
106
  @apply ax-bg-secondary-700;
107
107
  }
108
108
  }
109
- &.ax-warning {
109
+ &.ax-warning-default {
110
110
  @apply ax-shadow-sm ax-bg-warning-500 ax-text-warning-fore ax-border-transparent;
111
111
  &:not(.ax-state-disabled) {
112
112
  &:hover {
@@ -124,7 +124,7 @@
124
124
  @apply ax-bg-warning-700 ax-text-warning-50;
125
125
  }
126
126
  }
127
- &.ax-danger {
127
+ &.ax-danger-default {
128
128
  @apply ax-shadow-sm ax-bg-danger-500 ax-text-danger-fore ax-border-transparent;
129
129
  &:not(.ax-state-disabled) {
130
130
  &:hover {
@@ -142,7 +142,7 @@
142
142
  @apply ax-bg-danger-700;
143
143
  }
144
144
  }
145
- &.ax-success {
145
+ &.ax-success-default {
146
146
  @apply ax-shadow-sm ax-bg-success-500 ax-text-success-fore ax-border-transparent;
147
147
  &:not(.ax-state-disabled) {
148
148
  &:hover {
@@ -160,7 +160,7 @@
160
160
  @apply ax-bg-success-700;
161
161
  }
162
162
  }
163
- &.ax-info {
163
+ &.ax-info-default {
164
164
  @apply ax-shadow-sm ax-bg-info-500 ax-text-info-fore ax-border-transparent;
165
165
  &:not(.ax-state-disabled) {
166
166
  &:hover {
@@ -178,17 +178,17 @@
178
178
  @apply ax-bg-info-700;
179
179
  }
180
180
  }
181
- &.ax-dark {
182
- @apply ax-shadow-sm ax-bg-dark-500 ax-text-dark-fore ax-border-transparent;
181
+ &.ax-dark-default {
182
+ @apply ax-shadow-sm ax-bg-dark-500 ax-text-dark-fore ax-border-transparent dark:ax-bg-dark-400;
183
183
  &:not(.ax-state-disabled) {
184
184
  &:hover {
185
- @apply ax-bg-dark-400;
185
+ @apply ax-bg-dark-400 dark:ax-bg-dark-400;
186
186
  }
187
187
  &:focus {
188
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500;
188
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500 dark:ax-ring-dark-300 dark:ax-bg-dark-300;
189
189
  }
190
190
  &:active {
191
- @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-700;
191
+ @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-200 dark:ax-ring-dark-300 dark:ax-bg-dark-300;
192
192
  }
193
193
  }
194
194
 
@@ -196,17 +196,17 @@
196
196
  @apply ax-bg-dark-300;
197
197
  }
198
198
  }
199
- &.ax-light {
200
- @apply ax-shadow-sm ax-bg-light-50 ax-text-light-fore ax-border ax-border-light-300;
199
+ &.ax-light-default {
200
+ @apply ax-shadow-sm ax-bg-light-50 ax-text-light-fore ax-border ax-border-light-300 dark:ax-bg-light-600 dark:ax-border-light-600 dark:ax-text-light-100;
201
201
  &:not(.ax-state-disabled) {
202
202
  &:hover {
203
- @apply ax-bg-light-100;
203
+ @apply ax-bg-light-100 dark:ax-bg-light-600;
204
204
  }
205
205
  &:focus {
206
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
206
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-200 dark:ax-bg-light-500 dark:ax-ring-light-500;
207
207
  }
208
208
  &:active {
209
- @apply ax-bg-light-200 ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
209
+ @apply ax-bg-light-200 ax-ring-2 ax-ring-offset-2 ax-ring-light-200 dark:ax-bg-light-500 dark:ax-ring-light-500;
210
210
  }
211
211
  }
212
212
 
@@ -216,7 +216,7 @@
216
216
  }
217
217
  // twotone
218
218
  &.ax-primary-twotone {
219
- @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent;
219
+ @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-300 dark:ax-text-primary-700;
220
220
  &:not(.ax-state-disabled) {
221
221
  &:hover,
222
222
  &:focus {
@@ -232,7 +232,7 @@
232
232
  }
233
233
  }
234
234
  &.ax-secondary-twotone {
235
- @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent;
235
+ @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-300 dark:ax-text-secondary-700;
236
236
  &:not(.ax-state-disabled) {
237
237
  &:hover,
238
238
  &:focus {
@@ -248,7 +248,7 @@
248
248
  }
249
249
  }
250
250
  &.ax-warning-twotone {
251
- @apply ax-bg-warning-100 ax-text-warning-500 ax-border-transparent;
251
+ @apply ax-bg-warning-100 ax-text-warning-500 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-700;
252
252
  &:not(.ax-state-disabled) {
253
253
  &:hover,
254
254
  &:focus {
@@ -264,7 +264,7 @@
264
264
  }
265
265
  }
266
266
  &.ax-danger-twotone {
267
- @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent;
267
+ @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-300 dark:ax-text-danger-700;
268
268
  &:not(.ax-state-disabled) {
269
269
  &:hover,
270
270
  &:focus {
@@ -280,7 +280,7 @@
280
280
  }
281
281
  }
282
282
  &.ax-success-twotone {
283
- @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent;
283
+ @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent dark:ax-bg-success-300 dark:ax-text-success-700;
284
284
  &:not(.ax-state-disabled) {
285
285
  &:hover,
286
286
  &:focus {
@@ -296,14 +296,14 @@
296
296
  }
297
297
  }
298
298
  &.ax-info-twotone {
299
- @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent;
299
+ @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent dark:ax-bg-info-300 dark:ax-text-info-700;
300
300
  &:not(.ax-state-disabled) {
301
301
  &:hover,
302
302
  &:focus {
303
- @apply ax-bg-info-200 ax-text-primary-700;
303
+ @apply ax-bg-info-200 ax-text-info-700;
304
304
  }
305
305
  &:active {
306
- @apply ax-bg-info-300 ax-text-primary-700;
306
+ @apply ax-bg-info-300 ax-text-info-700;
307
307
  }
308
308
  }
309
309
 
@@ -312,7 +312,7 @@
312
312
  }
313
313
  }
314
314
  &.ax-dark-twotone {
315
- @apply ax-bg-dark-100 ax-text-dark ax-border-transparent;
315
+ @apply ax-bg-dark-100 ax-text-dark-500 ax-border-transparent dark:ax-bg-dark-300 dark:ax-text-dark-700;
316
316
  &:not(.ax-state-disabled) {
317
317
  &:hover {
318
318
  }
@@ -328,7 +328,7 @@
328
328
  }
329
329
  }
330
330
  &.ax-light-twotone {
331
- @apply ax-bg-light-200 ax-text-light-fore ax-border-transparent;
331
+ @apply ax-bg-light-200 ax-text-light-fore ax-border-transparent dark:ax-bg-light-300 dark:ax-text-light-700;
332
332
  &:not(.ax-state-disabled) {
333
333
  &:hover {
334
334
  @apply ax-bg-light-300;
@@ -351,7 +351,7 @@
351
351
  &:not(.ax-state-disabled) {
352
352
  &:hover,
353
353
  &:focus {
354
- @apply ax-bg-primary ax-border-primary ax-text-primary-fore;
354
+ @apply ax-bg-primary-500 ax-border-primary-500 ax-text-primary-fore;
355
355
  }
356
356
  &:active {
357
357
  @apply ax-bg-primary-700 ax-border-primary-700 ax-text-primary-fore;
@@ -359,7 +359,7 @@
359
359
  }
360
360
 
361
361
  &.ax-state-selected {
362
- @apply ax-bg-primary ax-text-primary-fore;
362
+ @apply ax-bg-primary-500 ax-text-primary-fore;
363
363
  }
364
364
  }
365
365
  &.ax-secondary-outline {
@@ -367,7 +367,7 @@
367
367
  &:not(.ax-state-disabled) {
368
368
  &:hover,
369
369
  &:focus {
370
- @apply ax-bg-secondary ax-border-secondary ax-text-secondary-fore;
370
+ @apply ax-bg-secondary-500 ax-border-secondary-500 ax-text-secondary-fore;
371
371
  }
372
372
  &:active {
373
373
  @apply ax-bg-secondary-700 ax-border-secondary-700 ax-text-primary-fore;
@@ -375,7 +375,7 @@
375
375
  }
376
376
 
377
377
  &.ax-state-selected {
378
- @apply ax-bg-secondary ax-text-secondary-fore;
378
+ @apply ax-bg-secondary-500 ax-text-secondary-fore;
379
379
  }
380
380
  }
381
381
  &.ax-warning-outline {
@@ -383,7 +383,7 @@
383
383
  &:not(.ax-state-disabled) {
384
384
  &:hover,
385
385
  &:focus {
386
- @apply ax-bg-warning ax-border-warning ax-text-warning-fore;
386
+ @apply ax-bg-warning-500 ax-border-warning-500 ax-text-warning-fore;
387
387
  }
388
388
  &:active {
389
389
  @apply ax-bg-warning-700 ax-border-warning-700 ax-text-primary-fore;
@@ -391,7 +391,7 @@
391
391
  }
392
392
 
393
393
  &.ax-state-selected {
394
- @apply ax-bg-warning ax-text-warning-fore;
394
+ @apply ax-bg-warning-500 ax-text-warning-fore;
395
395
  }
396
396
  }
397
397
  &.ax-danger-outline {
@@ -399,7 +399,7 @@
399
399
  &:not(.ax-state-disabled) {
400
400
  &:hover,
401
401
  &:focus {
402
- @apply ax-bg-danger ax-border-danger ax-text-danger-fore;
402
+ @apply ax-bg-danger-500 ax-border-danger-500 ax-text-danger-fore;
403
403
  }
404
404
  &:active {
405
405
  @apply ax-bg-danger-700 ax-border-danger-700 ax-text-primary-fore;
@@ -407,7 +407,7 @@
407
407
  }
408
408
 
409
409
  &.ax-state-selected {
410
- @apply ax-bg-danger ax-text-danger-fore;
410
+ @apply ax-bg-danger-500 ax-text-danger-fore;
411
411
  }
412
412
  }
413
413
  &.ax-success-outline {
@@ -415,7 +415,7 @@
415
415
  &:not(.ax-state-disabled) {
416
416
  &:hover,
417
417
  &:focus {
418
- @apply ax-bg-success ax-border-success ax-text-success-fore;
418
+ @apply ax-bg-success-500 ax-border-success-500 ax-text-success-fore;
419
419
  }
420
420
  &:active {
421
421
  @apply ax-bg-success-700 ax-border-success-700 ax-text-success-fore;
@@ -423,7 +423,7 @@
423
423
  }
424
424
 
425
425
  &.ax-state-selected {
426
- @apply ax-bg-success ax-text-success-fore;
426
+ @apply ax-bg-success-500 ax-text-success-fore;
427
427
  }
428
428
  }
429
429
  &.ax-info-outline {
@@ -431,7 +431,7 @@
431
431
  &:not(.ax-state-disabled) {
432
432
  &:hover,
433
433
  &:focus {
434
- @apply ax-bg-info ax-border-info ax-text-info-fore;
434
+ @apply ax-bg-info-500 ax-border-info-500 ax-text-info-fore;
435
435
  }
436
436
  &:active {
437
437
  @apply ax-bg-info-700 ax-border-info-700 ax-text-info-fore;
@@ -439,29 +439,29 @@
439
439
  }
440
440
 
441
441
  &.ax-state-selected {
442
- @apply ax-bg-info ax-text-info-fore;
442
+ @apply ax-bg-info-500 ax-text-info-fore;
443
443
  }
444
444
  }
445
445
  &.ax-dark-outline {
446
- @apply ax-bg-transparent ax-text-dark-500 ax-border-dark-500 hover:ax-bg-danger-500 dark:ax-text-dark-fore dark:ax-border-dark-50;
446
+ @apply ax-bg-transparent ax-text-dark-500 ax-border-dark-500 hover:ax-bg-danger-500 dark:ax-text-dark-100 dark:ax-border-dark-100;
447
447
  &:not(.ax-state-disabled) {
448
448
  &:hover {
449
- @apply ax-bg-dark-50 ax-border-dark ax-text-dark;
449
+ @apply ax-bg-dark-50 ax-border-dark-500 ax-text-dark-500 dark:ax-border-dark-300 dark:ax-bg-dark-300 dark:ax-text-light-100;
450
450
  }
451
451
  &:focus {
452
- @apply ax-bg-dark-500 ax-border-dark-500 ax-text-dark-fore;
452
+ @apply ax-bg-dark-500 ax-border-dark-500 ax-text-dark-fore dark:ax-border-dark-300 dark:ax-bg-dark-300 dark:ax-text-light-100;
453
453
  }
454
454
  &:active {
455
- @apply ax-bg-dark-700 ax-border-dark-700 ax-text-dark-fore;
455
+ @apply ax-bg-dark-700 ax-border-dark-700 ax-text-dark-fore dark:ax-bg-dark-200 ;
456
456
  }
457
457
  }
458
458
 
459
459
  &.ax-state-selected {
460
- @apply ax-bg-dark ax-text-dark-fore;
460
+ @apply ax-bg-dark-500 ax-text-dark-fore;
461
461
  }
462
462
  }
463
463
  &.ax-light-outline {
464
- @apply ax-bg-transparent ax-text-light-fore ax-border-light-300 dark:ax-text-light-200;
464
+ @apply ax-bg-transparent ax-text-light-fore ax-border-light-300 dark:ax-text-light-200 dark:ax-border-light-400;
465
465
  &:not(.ax-state-disabled) {
466
466
  &:hover,
467
467
  &:focus {
@@ -590,11 +590,11 @@
590
590
  }
591
591
  }
592
592
  &.ax-light-blank {
593
- @apply ax-bg-transparent ax-text-light-400 ax-border-transparent dark:ax-text-light-300;
593
+ @apply ax-bg-transparent ax-text-light-600 ax-border-transparent dark:ax-text-light-300;
594
594
  &:not(.ax-state-disabled) {
595
595
  &:hover,
596
596
  &:focus {
597
- @apply ax-bg-light-100 ax-text-light-500 dark:ax-bg-transparent dark:ax-text-light-500;
597
+ @apply ax-bg-light-50 ax-text-light-500 dark:ax-bg-transparent dark:ax-text-light-500;
598
598
  }
599
599
  &:active {
600
600
  @apply ax-bg-light-200 ax-text-light-700 dark:ax-text-light-300;
@@ -607,7 +607,7 @@
607
607
  }
608
608
  // link
609
609
  &.ax-primary-link {
610
- @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-primary-500 ax-border-primary;
610
+ @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-primary-500 ax-border-primary-500;
611
611
  &:not(.ax-state-disabled) {
612
612
  &:hover,
613
613
  &:focus {
@@ -623,7 +623,7 @@
623
623
  }
624
624
  }
625
625
  &.ax-secondary-link {
626
- @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-secondary-500 ax-border-secondary;
626
+ @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-secondary-500 ax-border-secondary-500;
627
627
  &:not(.ax-state-disabled) {
628
628
  &:hover,
629
629
  &:focus {
@@ -639,7 +639,7 @@
639
639
  }
640
640
  }
641
641
  &.ax-warning-link {
642
- @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-warning-500 ax-border-warning;
642
+ @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-warning-500 ax-border-warning-500;
643
643
  &:not(.ax-state-disabled) {
644
644
  &:hover,
645
645
  &:focus {
@@ -655,7 +655,7 @@
655
655
  }
656
656
  }
657
657
  &.ax-danger-link {
658
- @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-danger-500 ax-border-danger;
658
+ @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-danger-500 ax-border-danger-500;
659
659
  &:not(.ax-state-disabled) {
660
660
  &:hover,
661
661
  &:focus {
@@ -671,7 +671,7 @@
671
671
  }
672
672
  }
673
673
  &.ax-success-link {
674
- @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-success-500 ax-border-success;
674
+ @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-success-500 ax-border-success-500;
675
675
  &:not(.ax-state-disabled) {
676
676
  &:hover,
677
677
  &:focus {
@@ -687,7 +687,7 @@
687
687
  }
688
688
  }
689
689
  &.ax-info-link {
690
- @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-info-500 ax-border-info;
690
+ @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-info-500 ax-border-info-500;
691
691
  &:not(.ax-state-disabled) {
692
692
  &:hover,
693
693
  &:focus {
@@ -703,11 +703,11 @@
703
703
  }
704
704
  }
705
705
  &.ax-dark-link {
706
- @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-dark-500 ax-border-dark dark:ax-border-dark-50 dark:ax-text-dark-50;
706
+ @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-dark-500 ax-border-dark-500 dark:ax-border-dark-50 dark:ax-text-dark-50;
707
707
  &:not(.ax-state-disabled) {
708
708
  &:hover,
709
709
  &:focus {
710
- @apply ax-text-dark-600 ax-border-dark-600 dark:ax-border-dark-300 dark:ax-text-dark-300;
710
+ @apply ax-text-dark-600 ax-border-dark-600 dark:ax-border-dark-200 dark:ax-text-dark-200;
711
711
  }
712
712
  &:active {
713
713
  @apply ax-text-dark-300 ax-border-dark-300 dark:ax-border-dark-100 dark:ax-text-dark-100;
@@ -728,7 +728,7 @@
728
728
  @apply ax-text-light-500 ax-border-y-light-500;
729
729
  }
730
730
  &:active {
731
- @apply ax-text-light-600 ax-border-light-600;
731
+ @apply ax-text-light-600 ax-border-light-600 dark:ax-border-light-200 dark:ax-text-light-200;
732
732
  }
733
733
  }
734
734
 
package/src/components/_calendar.scss CHANGED
@@ -60,16 +60,16 @@
60
60
  }
61
61
 
62
62
  &.ax-state-holiday {
63
- @apply ax-text-danger;
63
+ @apply ax-text-danger-500;
64
64
  &:hover {
65
65
  @apply ax-text-black dark:ax-text-light-100;
66
66
  }
67
67
  }
68
68
 
69
69
  &.ax-state-today {
70
- @apply ax-bg-opacity-70 ax-bg-primary-100 ax-text-primary dark:ax-bg-primary dark:ax-text-primary-fore;
70
+ @apply ax-bg-opacity-70 ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
71
71
  &:hover {
72
- @apply ax-text-primary dark:ax-text-primary-fore;
72
+ @apply ax-text-primary-500 dark:ax-text-primary-fore;
73
73
  }
74
74
  }
75
75
 
@@ -78,7 +78,7 @@
78
78
  }
79
79
 
80
80
  &.ax-state-selected {
81
- @apply ax-bg-primary ax-text-primary-fore ax-opacity-100;
81
+ @apply ax-bg-primary-500 ax-text-primary-fore ax-opacity-100;
82
82
 
83
83
  &:hover {
84
84
  @apply ax-text-primary-fore;
@@ -87,43 +87,43 @@
87
87
 
88
88
  &.ax-state-event {
89
89
  &::after {
90
- @apply ax-absolute ax-bottom-0.5 ax-rounded-full ax-h-0.5 ax-w-4 ax-bg-dark;
90
+ @apply ax-absolute ax-bottom-0.5 ax-rounded-full ax-h-0.5 ax-w-4 ax-bg-dark-500;
91
91
  content: "";
92
92
  }
93
93
 
94
94
  &.ax-state-event-primary {
95
95
  &::after {
96
- @apply ax-bg-primary;
96
+ @apply ax-bg-primary-500;
97
97
  }
98
98
  }
99
99
 
100
100
  &.ax-state-event-secondary {
101
101
  &::after {
102
- @apply ax-bg-secondary;
102
+ @apply ax-bg-secondary-500;
103
103
  }
104
104
  }
105
105
 
106
106
  &.ax-state-event-success {
107
107
  &::after {
108
- @apply ax-bg-success;
108
+ @apply ax-bg-success-500;
109
109
  }
110
110
  }
111
111
 
112
112
  &.ax-state-event-warning {
113
113
  &::after {
114
- @apply ax-bg-warning;
114
+ @apply ax-bg-warning-500;
115
115
  }
116
116
  }
117
117
 
118
118
  &.ax-state-event-danger {
119
119
  &::after {
120
- @apply ax-bg-danger;
120
+ @apply ax-bg-danger-500;
121
121
  }
122
122
  }
123
123
 
124
124
  &.ax-state-event-info {
125
125
  &::after {
126
- @apply ax-bg-info;
126
+ @apply ax-bg-info-500;
127
127
  }
128
128
  }
129
129
  }
package/src/components/_checkbox.scss CHANGED
@@ -4,17 +4,17 @@
4
4
 
5
5
  .ax-wrapper {
6
6
  &.ax-state-disabled {
7
- @apply ax-cursor-not-allowed ax-opacity-60;
7
+ @apply ax-cursor-not-allowed ax-opacity-80;
8
8
  input[type=checkbox] {
9
9
  @apply ax-cursor-not-allowed;
10
10
  }
11
11
  }
12
12
  }
13
13
  input[type=checkbox] {
14
- @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded ax-bg-white ax-text-primary ax-m-0 ax-outline-none ax-align-middle ax-appearance-none ax-controll;
14
+ @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none ax-control;
15
15
  &:checked,
16
16
  &:indeterminate {
17
- @apply ax-border-primary ax-bg-no-repeat ax-bg-current ax-bg-contain;
17
+ @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-primary-500 ax-bg-contain #{!important};
18
18
  }
19
19
  &:checked {
20
20
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
@@ -23,7 +23,7 @@
23
23
  background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
24
24
  }
25
25
  &:focus {
26
- @apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
26
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
27
27
  }
28
28
  }
29
29
  ax-label {
package/src/components/_dialog.scss CHANGED
@@ -30,29 +30,29 @@
30
30
  .ax-dialog-footer {
31
31
  @apply ax-col-span-12 ax-flex ax-justify-end;
32
32
  }
33
- &.ax-primary {
33
+ &.ax-primary-default {
34
34
  .ax-dialog-icon {
35
- @apply ax-text-primary ax-bg-primary-200;
35
+ @apply ax-text-primary-500 ax-bg-primary-200;
36
36
  }
37
37
  }
38
- &.ax-success {
38
+ &.ax-success-default {
39
39
  .ax-dialog-icon {
40
- @apply ax-text-success ax-bg-success-200;
40
+ @apply ax-text-success-500 ax-bg-success-200;
41
41
  }
42
42
  }
43
- &.ax-danger {
43
+ &.ax-danger-default {
44
44
  .ax-dialog-icon {
45
- @apply ax-text-danger ax-bg-danger-200;
45
+ @apply ax-text-danger-500 ax-bg-danger-200;
46
46
  }
47
47
  }
48
- &.ax-warning {
48
+ &.ax-warning-default {
49
49
  .ax-dialog-icon {
50
- @apply ax-text-warning ax-bg-warning-200;
50
+ @apply ax-text-warning-500 ax-bg-warning-200;
51
51
  }
52
52
  }
53
- &.ax-info {
53
+ &.ax-info-default {
54
54
  .ax-dialog-icon {
55
- @apply ax-text-info ax-bg-info-200;
55
+ @apply ax-text-info-500 ax-bg-info-200;
56
56
  }
57
57
  }
58
58
 
package/src/components/_dropdown.scss CHANGED
@@ -18,7 +18,7 @@
18
18
  }
19
19
 
20
20
  .ax-overlay-pane {
21
- @apply ax-bg-white ax-controll;
21
+ @apply ax-bg-white ax-control;
22
22
 
23
23
  &.ax-dropdown-list {
24
24
  @apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
@@ -44,7 +44,7 @@
44
44
  @apply ax-flex ax-flex-row ax-ps-2;
45
45
  }
46
46
 
47
- &.ax-primary {
47
+ &.ax-primary-default {
48
48
  @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
49
49
 
50
50
  &:hover,
@@ -61,7 +61,7 @@
61
61
  }
62
62
  }
63
63
 
64
- &.ax-secondary {
64
+ &.ax-secondary-default {
65
65
  @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
66
66
 
67
67
  &:hover,
@@ -78,7 +78,7 @@
78
78
  }
79
79
  }
80
80
 
81
- &.ax-warning {
81
+ &.ax-warning-default {
82
82
  @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
83
83
 
84
84
  &:hover,
@@ -95,7 +95,7 @@
95
95
  }
96
96
  }
97
97
 
98
- &.ax-danger {
98
+ &.ax-danger-default {
99
99
  @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
100
100
 
101
101
  &:hover,
@@ -112,7 +112,7 @@
112
112
  }
113
113
  }
114
114
 
115
- &.ax-success {
115
+ &.ax-success-default {
116
116
  @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
117
117
 
118
118
  &:hover,
@@ -129,7 +129,7 @@
129
129
  }
130
130
  }
131
131
 
132
- &.ax-info {
132
+ &.ax-info-default {
133
133
  @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
134
134
 
135
135
  &:hover,
@@ -146,7 +146,7 @@
146
146
  }
147
147
  }
148
148
 
149
- &.ax-dark {
149
+ &.ax-dark-default {
150
150
  @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent;
151
151
 
152
152
  &:hover,
@@ -163,7 +163,7 @@
163
163
  }
164
164
  }
165
165
 
166
- &.ax-light {
166
+ &.ax-light-default {
167
167
  @apply ax-bg-transparent ax-text-light-fore ax-border-transparent;
168
168
 
169
169
  &:hover,
package/src/components/_editor-container.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  @layer components {
2
2
  .ax-editor-container {
3
3
  height: calc(var(--ax-base-size) * var(--ax-base-ratio));
4
- @apply ax-flex ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-controll;
4
+ @apply ax-flex ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-control;
5
5
  &:focus-within {
6
- @apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
6
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
7
7
  }
8
8
  &.ax-button-icon {
9
9
  @apply ax-px-2;
@@ -65,9 +65,9 @@
65
65
  }
66
66
  }
67
67
  &.ax-state-error {
68
- @apply ax-border-danger;
68
+ @apply ax-border-danger-500;
69
69
  .ax-input {
70
- @apply ax-placeholder-danger;
70
+ @apply ax-placeholder-danger-500;
71
71
  }
72
72
  &:focus-within {
73
73
  @apply ax-ring-0 ax-ring-transparent;
package/src/components/_form.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  .ax-form-field {
3
3
  @apply ax-mb-2 ax-relative;
4
4
  .ax-error-msg {
5
- @apply ax-absolute ax--bottom-5 ax-text-danger ax-text-xs;
5
+ @apply ax-absolute ax--bottom-5 ax-text-danger-500 ax-text-xs;
6
6
  }
7
7
  }
8
8
  }
package/src/components/_input.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @apply ax-outline-none ax-text-base ax-p-0;
4
4
  line-height: 20px;
5
5
  &:focus {
6
- @apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
6
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
7
7
  }
8
8
  &.ax-state-disabled {
9
9
  background-color: rgb(var(--ax-color-disabled)) !important;
package/src/components/_list.scss CHANGED
@@ -26,12 +26,12 @@
26
26
  }
27
27
  }
28
28
  &.ax-state-selected {
29
- @apply ax-bg-primary-100 ax-text-primary ax-font-medium dark:ax-bg-primary dark:ax-text-primary-50;
29
+ @apply ax-bg-primary-100 ax-text-primary-500 ax-font-medium dark:ax-bg-primary-500 dark:ax-text-primary-50;
30
30
  }
31
31
  &:focus,
32
32
  &.ax-state-focus {
33
33
  &:not(.ax-state-selected) {
34
- @apply ax-outline-none ax-bg-primary-50 ax-text-primary;
34
+ @apply ax-outline-none ax-bg-primary-50 ax-text-primary-500;
35
35
  }
36
36
  }
37
37
  }
package/src/components/_loading.scss CHANGED
@@ -23,12 +23,12 @@
23
23
  }
24
24
 
25
25
  &::before {
26
- @apply ax-bg-primary;
26
+ @apply ax-bg-primary-500;
27
27
  animation: pulse2 2s ease-in-out infinite;
28
28
  }
29
29
 
30
30
  &::after {
31
- @apply ax-bg-primary;
31
+ @apply ax-bg-primary-500;
32
32
  animation: pulse2 2s 1s ease-in-out infinite;
33
33
  }
34
34
  }
package/src/components/_radio.scss CHANGED
@@ -3,13 +3,13 @@
3
3
  @apply ax-text-sm ax-font-medium ax-text-light-700;
4
4
 
5
5
  .ax-radio {
6
- @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded-full ax-bg-white ax-text-primary ax-m-0 ax-outline-none ax-align-middle ax-appearance-none ax-controll;
6
+ @apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded-full ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none ax-control;
7
7
  &:checked {
8
- @apply ax-border-primary ax-bg-no-repeat ax-bg-current ax-bg-contain;
8
+ @apply ax-border-primary-500 ax-bg-no-repeat ax-bg-current ax-bg-contain;
9
9
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
10
10
  }
11
11
  &:focus {
12
- @apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
12
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
13
13
  }
14
14
  }
15
15
  ax-label {
package/src/components/_selectbox.scss CHANGED
@@ -3,6 +3,9 @@
3
3
  .ax-select-box-selection {
4
4
  @apply ax-flex ax-justify-center ax-items-center ax-outline-none;
5
5
 
6
+ .ax-badge{
7
+ @apply dark:ax-bg-white/[0.16] dark:ax-text-light-100;
8
+ }
6
9
  .ax-dropdown-chips {
7
10
  @apply ax-flex ax-overflow-x-auto;
8
11
  }
package/src/components/_selection-list.scss CHANGED
@@ -15,13 +15,13 @@
15
15
  }
16
16
 
17
17
  &.ax-state-error {
18
- @apply ax-text-danger;
18
+ @apply ax-text-danger-500;
19
19
  .ax-checkbox-checkmark {
20
- @apply ax-border-danger;
20
+ @apply ax-border-danger-500;
21
21
  }
22
22
 
23
23
  .ax-radio-checkmark {
24
- @apply ax-border-danger;
24
+ @apply ax-border-danger-500;
25
25
  }
26
26
  }
27
27
  }
package/src/components/_side-menu.scss CHANGED
@@ -7,11 +7,7 @@
7
7
  @apply ax-bg-light-100;
8
8
  }
9
9
  &:focus {
10
- @apply ax-outline-none
11
- ax-ring-2
12
- ax-ring-primary
13
- ax-ring-opacity-100
14
- ax-border-transparent;
10
+ @apply ax-outline-none ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
15
11
  }
16
12
  .ax-side-menu-icon {
17
13
  @apply ax-pr-2 ax-h-full ax-flex ax-items-center;
package/src/components/_switch.scss CHANGED
@@ -28,11 +28,10 @@
28
28
  left: 0;
29
29
  right: 0;
30
30
  bottom: 0;
31
- background-color: rgb(var(--ax-color-light-400));
32
31
  -webkit-transition: 0.2s;
33
32
  transition: 0.2s;
34
33
  border-radius: 25px;
35
- @apply ax-controll;
34
+ @apply ax-bg-light-400 dark:ax-border-transparent dark:ax-bg-white/[0.16] dark:ax-backdrop-blur-3xl;
36
35
  &::before {
37
36
  content: "";
38
37
  position: absolute;
@@ -47,7 +46,7 @@
47
46
  }
48
47
  }
49
48
  input:focus~.ax-switch-slider {
50
- @apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
49
+ @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
51
50
  }
52
51
  &.ax-sm {
53
52
  width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 6px);
@@ -93,7 +92,7 @@
93
92
  }
94
93
  &.ax-state-error {
95
94
  .ax-switch-slider {
96
- @apply ax-ring-2 ax-ring-danger ax-ring-opacity-100 ax-border-transparent;
95
+ @apply ax-ring-2 ax-ring-danger-500 ax-ring-opacity-100 ax-border-transparent;
97
96
  }
98
97
  }
99
98
  &.ax-state-disabled {
@@ -123,7 +122,7 @@
123
122
  }
124
123
  }
125
124
  input:focus~.ax-switch-slider {
126
- @apply ax-ring-success;
125
+ @apply ax-ring-success-500;
127
126
  }
128
127
  }
129
128
  &.ax-secondary {
@@ -135,7 +134,7 @@
135
134
  }
136
135
  }
137
136
  input:focus~.ax-switch-slider {
138
- @apply ax-ring-secondary;
137
+ @apply ax-ring-secondary-500;
139
138
  }
140
139
  }
141
140
  &.ax-danger {
@@ -147,7 +146,7 @@
147
146
  }
148
147
  }
149
148
  input:focus~.ax-switch-slider {
150
- @apply ax-ring-danger;
149
+ @apply ax-ring-danger-500;
151
150
  }
152
151
  }
153
152
  &.ax-warning {
@@ -159,7 +158,7 @@
159
158
  }
160
159
  }
161
160
  input:focus~.ax-switch-slider {
162
- @apply ax-ring-warning;
161
+ @apply ax-ring-warning-500;
163
162
  }
164
163
  }
165
164
  &.ax-info {
@@ -171,7 +170,7 @@
171
170
  }
172
171
  }
173
172
  input:focus~.ax-switch-slider {
174
- @apply ax-ring-info;
173
+ @apply ax-ring-info-500;
175
174
  }
176
175
  }
177
176
  &.ax-light {
@@ -183,7 +182,7 @@
183
182
  }
184
183
  }
185
184
  input:focus~.ax-switch-slider {
186
- @apply ax-ring-light;
185
+ @apply ax-ring-light-500;
187
186
  }
188
187
  }
189
188
  &.ax-dark {
@@ -195,7 +194,7 @@
195
194
  }
196
195
  }
197
196
  input:focus~.ax-switch-slider {
198
- @apply ax-ring-dark;
197
+ @apply ax-ring-dark-500;
199
198
  }
200
199
  }
201
200
  }
package/src/components/_tabs.scss CHANGED
@@ -54,7 +54,7 @@
54
54
  }
55
55
 
56
56
  &.ax-look-default {
57
- @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded ax-controll ;
57
+ @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded ax-control ;
58
58
 
59
59
  ax-tab-item {
60
60
  @apply ax-bg-white ax-border-s ax-border-solid ax-border-light-300 ax-border-b-0 dark:ax-text-light-200;
@@ -71,15 +71,15 @@
71
71
  @apply ax-border-s-2 ax-border-solid ax-border-light-300 dark:ax-border-black/50;
72
72
 
73
73
  &.ax-state-active {
74
- @apply ax-border-primary ax-text-primary;
74
+ @apply ax-border-primary-500 ax-text-primary-500;
75
75
 
76
76
  &:hover {
77
- @apply ax-border-primary;
77
+ @apply ax-border-primary-500;
78
78
  }
79
79
  }
80
80
 
81
81
  &:hover {
82
- @apply ax-border-primary ax-text-primary;
82
+ @apply ax-border-primary-500 ax-text-primary-500;
83
83
  }
84
84
  }
85
85
  }
@@ -89,15 +89,15 @@
89
89
  @apply ax-border-e-2 ax-border-solid ax-border-light-300 dark:ax-border-black/50;
90
90
 
91
91
  &.ax-state-active {
92
- @apply ax-border-primary ax-text-primary;
92
+ @apply ax-border-primary-500 ax-text-primary-500;
93
93
 
94
94
  &:hover {
95
- @apply ax-border-primary;
95
+ @apply ax-border-primary-500;
96
96
  }
97
97
  }
98
98
 
99
99
  &:hover {
100
- @apply ax-border-primary ax-text-primary;
100
+ @apply ax-border-primary-500 ax-text-primary-500;
101
101
  }
102
102
  }
103
103
  }
@@ -121,11 +121,11 @@
121
121
  @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-light-200;
122
122
 
123
123
  &:hover {
124
- @apply ax-bg-primary-100 ax-text-primary dark:ax-text-light-100;
124
+ @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-light-100;
125
125
  }
126
126
 
127
127
  &.ax-state-active {
128
- @apply ax-bg-primary-100 ax-text-primary dark:ax-text-light-50;
128
+ @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-light-50;
129
129
  }
130
130
  }
131
131
  }
@@ -133,10 +133,10 @@
133
133
 
134
134
  &.ax-horizontal {
135
135
  &.ax-look-default {
136
- @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded ax-controll;
136
+ @apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded ax-control;
137
137
 
138
138
  ax-tab-item {
139
- @apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid ax-border-light-300 ax-controll dark:ax-text-light-200;
139
+ @apply ax-bg-white ax-border-r ax-border-b-2 ax-border-solid ax-border-light-300 ax-control dark:ax-text-light-200;
140
140
  border-bottom-color: transparent !important;
141
141
 
142
142
  &:first-child {
@@ -159,15 +159,15 @@
159
159
  @apply ax-border-t-2 ax-border-solid ax-border-light-300 dark:ax-border-black/50;
160
160
 
161
161
  &.ax-state-active {
162
- @apply ax-border-primary ax-text-primary;
162
+ @apply ax-border-primary-500 ax-text-primary-500;
163
163
 
164
164
  &:hover {
165
- @apply ax-border-primary;
165
+ @apply ax-border-primary-500;
166
166
  }
167
167
  }
168
168
 
169
169
  &:hover {
170
- @apply ax-border-primary ax-text-primary;
170
+ @apply ax-border-primary-500 ax-text-primary-500;
171
171
  }
172
172
  }
173
173
  }
@@ -177,15 +177,15 @@
177
177
  @apply ax-border-b-2 ax-border-solid ax-border-light-300 dark:ax-border-black/50;
178
178
 
179
179
  &.ax-state-active {
180
- @apply ax-border-primary ax-text-primary;
180
+ @apply ax-border-primary-500 ax-text-primary-500;
181
181
 
182
182
  &:hover {
183
- @apply ax-border-primary;
183
+ @apply ax-border-primary-500;
184
184
  }
185
185
  }
186
186
 
187
187
  &:hover {
188
- @apply ax-border-primary ax-text-primary;
188
+ @apply ax-border-primary-500 ax-text-primary-500;
189
189
  }
190
190
  }
191
191
  }
@@ -209,11 +209,11 @@
209
209
  @apply ax-text-light-fore ax-mr-1 ax-rounded dark:ax-text-primary-200;
210
210
 
211
211
  &:hover {
212
- @apply ax-bg-primary-100 ax-text-primary dark:ax-text-primary-50 dark:ax-bg-primary;
212
+ @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-primary-50 dark:ax-bg-primary-500;
213
213
  }
214
214
 
215
215
  &.ax-state-active {
216
- @apply ax-bg-primary-100 ax-text-primary dark:ax-text-primary-50 dark:ax-bg-primary;
216
+ @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-text-primary-50 dark:ax-bg-primary-500;
217
217
  }
218
218
  }
219
219
  }
package/src/components/_toast.scss CHANGED
@@ -48,15 +48,15 @@
48
48
  }
49
49
  &.ax-success {
50
50
  .ax-toast-icon {
51
- @apply ax-text-success;
51
+ @apply ax-text-success-500;
52
52
  }
53
53
  .ax-toast-progress {
54
- @apply ax-bg-success;
54
+ @apply ax-bg-success-400;
55
55
  }
56
56
  }
57
57
  &.ax-danger {
58
58
  .ax-toast-icon {
59
- @apply ax-text-danger;
59
+ @apply ax-text-danger-500;
60
60
  }
61
61
  .ax-toast-progress {
62
62
  @apply ax-bg-danger-400;
@@ -64,7 +64,7 @@
64
64
  }
65
65
  &.ax-warning {
66
66
  .ax-toast-icon {
67
- @apply ax-text-warning;
67
+ @apply ax-text-warning-500;
68
68
  }
69
69
  .ax-toast-progress {
70
70
  @apply ax-bg-warning-400;
@@ -72,7 +72,7 @@
72
72
  }
73
73
  &.ax-info {
74
74
  .ax-toast-icon {
75
- @apply ax-text-info;
75
+ @apply ax-text-info-500;
76
76
  }
77
77
  .ax-toast-progress {
78
78
  @apply ax-bg-info-400;
package/src/variables/_colors.scss CHANGED
@@ -81,7 +81,7 @@ $theme-colors: (
81
81
  "fore": "255 255 255",
82
82
  "50": "245 243 255",
83
83
  "100": "237 233 254",
84
- "200": "221 214,254",
84
+ "200": "221 214 254",
85
85
  "300": "196 181 253",
86
86
  "400": "167 139 250",
87
87
  "500": "139 92 246",