@acorex/styles 5.6.0 → 5.7.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 (29) hide show
  1. package/package.json +1 -1
  2. package/src/components/_alert.scss +17 -27
  3. package/src/components/_button.scss +309 -401
  4. package/src/components/_calendar.scss +36 -18
  5. package/src/components/_color-palette.scss +45 -19
  6. package/src/components/_data-table.scss +30 -5
  7. package/src/components/_datapager.scss +35 -26
  8. package/src/components/_decoration.scss +17 -9
  9. package/src/components/_drawer.scss +5 -1
  10. package/src/components/_dropdown.scss +6 -2
  11. package/src/components/_editor-container.scss +6 -1
  12. package/src/components/_fieldset.scss +1 -1
  13. package/src/components/_popup.scss +5 -1
  14. package/src/components/_range-slider.scss +59 -2
  15. package/src/components/_table.scss +40 -7
  16. package/src/components/_tabs.scss +3 -3
  17. package/src/icons/demo-files/demo.css +152 -152
  18. package/src/icons/demo-files/demo.js +30 -30
  19. package/src/icons/demo.html +15 -1
  20. package/src/icons/fonts/acorex-icon.eot +0 -0
  21. package/src/icons/fonts/acorex-icon.svg +1 -0
  22. package/src/icons/fonts/acorex-icon.ttf +0 -0
  23. package/src/icons/fonts/acorex-icon.woff +0 -0
  24. package/src/icons/selection.json +1 -1
  25. package/src/icons/style.css +8 -5
  26. package/src/icons/style.scss +10 -5
  27. package/src/icons/variables.scss +1 -0
  28. package/src/utility/_mixins.scss +31 -31
  29. package/src/variables/_colors.scss +15 -14
package/src/components/_button.scss CHANGED
@@ -1,21 +1,20 @@
1
1
  @layer components {
2
2
  ax-button {
3
- @apply ax-text-sm ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-border-light-300 ax-select-none ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis;
3
+ @apply ax-text-sm ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-md ax-select-none ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-transition-all;
4
4
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
5
5
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
6
6
 
7
- &>button {
8
- @apply ax-inline-flex ax-items-center ax-justify-center ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-px-4 ax-w-full ax-h-full;
7
+ & > button {
8
+ @apply ax-inline-flex ax-items-center ax-justify-center ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-px-4 ax-w-full ax-h-full;
9
9
  &:focus,
10
10
  &:focus-visible {
11
- @apply ax-outline-none ax-z-10;
12
- outline:none;
11
+ @apply ax-outline-none;
12
+ outline: none;
13
13
  }
14
14
  }
15
- &:focus,
16
- &:focus-visible {
17
- @apply ax-outline-none ax-z-10;
18
- outline:none;
15
+ &:focus {
16
+ @apply ax-outline-none;
17
+ outline: none;
19
18
  }
20
19
  ax-prefix {
21
20
  @apply ax-flex ax-flex-row ax-pe-2;
@@ -24,7 +23,9 @@
24
23
  ax-suffix {
25
24
  @apply ax-flex ax-flex-row ax-ps-2;
26
25
  }
27
-
26
+ &[class*="-outline"] {
27
+ @apply ax-border;
28
+ }
28
29
  .ax-badge {
29
30
  @apply ax-text-xs;
30
31
  }
@@ -35,7 +36,7 @@
35
36
 
36
37
  &.ax-button-icon {
37
38
  width: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
38
- &>button{
39
+ & > button {
39
40
  @apply ax-px-3;
40
41
  }
41
42
 
@@ -44,7 +45,8 @@
44
45
  @apply ax-p-0;
45
46
  }
46
47
 
47
- ax-icon {
48
+ ax-icon,
49
+ i {
48
50
  @apply ax-text-base;
49
51
  }
50
52
  }
@@ -60,9 +62,6 @@
60
62
  }
61
63
 
62
64
  // states
63
- &.ax-state-selected {
64
- @apply ax-z-10;
65
- }
66
65
 
67
66
  &.ax-state-loading {
68
67
  @apply ax-cursor-not-allowed;
@@ -72,11 +71,11 @@
72
71
  @apply ax-cursor-not-allowed ax-opacity-60;
73
72
  }
74
73
 
75
- // normal
76
- &.ax-primary-default {
77
- @apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
74
+ // primary
75
+ &.ax-primary-normal {
76
+ @apply ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
78
77
 
79
- &:not(.ax-state-disabled) {
78
+ &:not(.ax-state-disabled, .ax-state-selected) {
80
79
  &:hover {
81
80
  @apply ax-bg-primary-600;
82
81
  }
@@ -90,864 +89,773 @@
90
89
  @apply ax-bg-primary-800 ax-ring-2 ax-ring-offset-2 ax-ring-primary-800;
91
90
  }
92
91
  }
93
-
94
92
  &.ax-state-selected {
95
- @apply ax-bg-primary-700;
93
+ @apply ax-bg-primary-800;
96
94
  }
97
95
  }
96
+ &.ax-primary-twotone {
97
+ @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-300 dark:ax-text-primary-700;
98
98
 
99
- &.ax-secondary-default {
100
- @apply ax-shadow-sm ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent;
101
-
102
- &:not(.ax-state-disabled) {
103
- &:hover {
104
- @apply ax-bg-secondary-600;
105
- }
106
-
99
+ &:not(.ax-state-disabled, .ax-state-selected) {
100
+ &:hover,
107
101
  &:focus,
108
102
  &:focus-within {
109
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-secondary-500;
103
+ @apply ax-bg-primary-200 ax-text-primary-700;
110
104
  }
111
105
 
112
106
  &:active {
113
- @apply ax-bg-secondary-700 ax-ring-2 ax-ring-offset-2 ax-ring-secondary-700;
107
+ @apply ax-bg-primary-300 ax-text-primary-700;
114
108
  }
115
109
  }
116
-
117
110
  &.ax-state-selected {
118
- @apply ax-bg-secondary-700;
111
+ @apply ax-bg-primary-500 ax-text-primary-fore;
119
112
  }
120
113
  }
114
+ &.ax-primary-outline {
115
+ @apply ax-text-primary-500 ax-border-primary-500;
121
116
 
122
- &.ax-warning-default {
123
- @apply ax-shadow-sm ax-bg-warning-500 ax-text-warning-fore ax-border-transparent;
124
-
125
- &:not(.ax-state-disabled) {
126
- &:hover {
127
- @apply ax-bg-warning-400;
128
- }
129
-
117
+ &:not(.ax-state-disabled, .ax-state-selected) {
118
+ &:hover,
130
119
  &:focus,
131
120
  &:focus-within {
132
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-warning-500;
121
+ @apply ax-border-primary-300 ax-text-primary-300;
133
122
  }
134
123
 
135
124
  &:active {
136
- @apply ax-bg-warning-600 ax-text-warning-fore ax-ring-2 ax-ring-offset-2 ax-ring-warning-700;
125
+ @apply ax-border-primary-600 ax-text-primary-800;
137
126
  }
138
127
  }
139
-
140
128
  &.ax-state-selected {
141
- @apply ax-bg-warning-700 ax-text-warning-50;
129
+ @apply ax-bg-primary-800 ax-text-primary-fore ax-border-primary-800;
142
130
  }
143
131
  }
132
+ &.ax-primary-blank {
133
+ @apply ax-text-primary-500 ax-border-transparent;
144
134
 
145
- &.ax-danger-default {
146
- @apply ax-shadow-sm ax-bg-danger-500 ax-text-danger-fore ax-border-transparent;
147
-
148
- &:not(.ax-state-disabled) {
149
- &:hover {
150
- @apply ax-bg-danger-600;
151
- }
152
-
135
+ &:not(.ax-state-disabled, .ax-state-selected) {
136
+ &:hover,
153
137
  &:focus,
154
138
  &:focus-within {
155
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-danger-500;
139
+ @apply ax-bg-primary-50 ax-text-primary-600 dark:ax-bg-transparent;
156
140
  }
157
141
 
158
142
  &:active {
159
- @apply ax-bg-danger-700 ax-ring-2 ax-ring-offset-2 ax-ring-danger-700;
143
+ @apply ax-bg-primary-100 ax-text-primary-700;
160
144
  }
161
145
  }
162
-
163
146
  &.ax-state-selected {
164
- @apply ax-bg-danger-700;
147
+ @apply ax-bg-primary-800 ax-text-primary-fore;
165
148
  }
166
149
  }
150
+ &.ax-primary-link {
151
+ @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-primary-500 ax-border-primary-500;
167
152
 
168
- &.ax-success-default {
169
- @apply ax-shadow-sm ax-bg-success-500 ax-text-success-fore ax-border-transparent;
170
-
171
- &:not(.ax-state-disabled) {
172
- &:hover {
173
- @apply ax-bg-success-600;
174
- }
175
-
153
+ &:not(.ax-state-disabled, .ax-state-selected) {
154
+ &:hover,
176
155
  &:focus,
177
156
  &:focus-within {
178
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-success-500;
157
+ @apply ax-text-primary-800 ax-border-primary-800;
179
158
  }
180
159
 
181
160
  &:active {
182
- @apply ax-bg-success-700 ax-ring-2 ax-ring-offset-2 ax-ring-success-700;
161
+ @apply ax-text-primary-500 ax-border-primary-500;
183
162
  }
184
163
  }
185
-
186
164
  &.ax-state-selected {
187
- @apply ax-bg-success-700;
165
+ @apply ax-bg-primary-800 ax-text-primary-fore;
188
166
  }
189
167
  }
190
168
 
191
- &.ax-info-default {
192
- @apply ax-shadow-sm ax-bg-info-500 ax-text-info-fore ax-border-transparent;
169
+ // secondary
170
+ &.ax-secondary-normal {
171
+ @apply ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent;
193
172
 
194
- &:not(.ax-state-disabled) {
173
+ &:not(.ax-state-disabled, .ax-state-selected) {
195
174
  &:hover {
196
- @apply ax-bg-info-600;
175
+ @apply ax-bg-secondary-600;
197
176
  }
198
177
 
199
178
  &:focus,
200
179
  &:focus-within {
201
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-info-500;
180
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-secondary-500;
202
181
  }
203
182
 
204
183
  &:active {
205
- @apply ax-bg-info-700 ax-ring-2 ax-ring-offset-2 ax-ring-info-700;
184
+ @apply ax-bg-secondary-800 ax-ring-2 ax-ring-offset-2 ax-ring-secondary-800;
206
185
  }
207
186
  }
208
-
209
187
  &.ax-state-selected {
210
- @apply ax-bg-info-700;
188
+ @apply ax-bg-secondary-800;
211
189
  }
212
190
  }
191
+ &.ax-secondary-twotone {
192
+ @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-300 dark:ax-text-secondary-700;
213
193
 
214
- &.ax-dark-default {
215
- @apply ax-shadow-sm ax-bg-dark-500 ax-text-dark-fore ax-border-transparent dark:ax-bg-dark-400;
216
-
217
- &:not(.ax-state-disabled) {
218
- &:hover {
219
- @apply ax-bg-dark-400 dark:ax-bg-dark-400;
220
- }
221
-
194
+ &:not(.ax-state-disabled, .ax-state-selected) {
195
+ &:hover,
222
196
  &:focus,
223
197
  &:focus-within {
224
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500 dark:ax-ring-dark-300 dark:ax-bg-dark-300;
198
+ @apply ax-bg-secondary-200 ax-text-secondary-700;
225
199
  }
226
200
 
227
201
  &:active {
228
- @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-500 dark:ax-ring-dark-300 dark:ax-bg-dark-300;
202
+ @apply ax-bg-secondary-300 ax-text-secondary-700;
229
203
  }
230
204
  }
231
-
232
205
  &.ax-state-selected {
233
- @apply ax-bg-dark-300;
206
+ @apply ax-bg-secondary-500 ax-text-secondary-fore;
234
207
  }
235
208
  }
209
+ &.ax-secondary-outline {
210
+ @apply ax-text-secondary-500 ax-border-secondary-500;
236
211
 
237
- &.ax-light-default {
238
- @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;
239
-
240
- &:not(.ax-state-disabled) {
241
- &:hover {
242
- @apply ax-bg-light-100 dark:ax-bg-light-600;
243
- }
244
-
212
+ &:not(.ax-state-disabled, .ax-state-selected) {
213
+ &:hover,
245
214
  &:focus,
246
215
  &:focus-within {
247
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-300 dark:ax-bg-light-500 dark:ax-ring-light-500;
216
+ @apply ax-border-secondary-300 ax-text-secondary-300;
248
217
  }
249
218
 
250
219
  &:active {
251
- @apply ax-bg-light-200 ax-ring-2 ax-ring-offset-2 ax-ring-light-300 dark:ax-bg-light-500 dark:ax-ring-light-500;
220
+ @apply ax-border-secondary-600 ax-text-secondary-800;
252
221
  }
253
222
  }
254
-
255
223
  &.ax-state-selected {
256
- @apply ax-bg-light-600 ax-text-light-50;
224
+ @apply ax-bg-secondary-800 ax-text-secondary-fore ax-border-secondary-800;
257
225
  }
258
226
  }
227
+ &.ax-secondary-blank {
228
+ @apply ax-text-secondary-500 ax-border-transparent;
259
229
 
260
- // twotone
261
- &.ax-primary-twotone {
262
- @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-300 dark:ax-text-primary-700;
263
-
264
- &:not(.ax-state-disabled) {
265
-
230
+ &:not(.ax-state-disabled, .ax-state-selected) {
266
231
  &:hover,
267
232
  &:focus,
268
233
  &:focus-within {
269
- @apply ax-bg-primary-200 ax-text-primary-700;
234
+ @apply ax-bg-secondary-50 ax-text-secondary-600 dark:ax-bg-transparent;
270
235
  }
271
236
 
272
237
  &:active {
273
- @apply ax-bg-primary-300 ax-text-primary-700;
238
+ @apply ax-bg-secondary-100 ax-text-secondary-700;
274
239
  }
275
240
  }
276
-
277
241
  &.ax-state-selected {
278
- @apply ax-bg-primary-300 ax-text-primary-700;
242
+ @apply ax-bg-secondary-800 ax-text-secondary-fore;
279
243
  }
280
244
  }
245
+ &.ax-secondary-link {
246
+ @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-secondary-500 ax-border-secondary-500;
281
247
 
282
- &.ax-secondary-twotone {
283
- @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-300 dark:ax-text-secondary-700;
284
-
285
- &:not(.ax-state-disabled) {
286
-
248
+ &:not(.ax-state-disabled, .ax-state-selected) {
287
249
  &:hover,
288
250
  &:focus,
289
251
  &:focus-within {
290
- @apply ax-bg-secondary-200 ax-text-secondary-700;
252
+ @apply ax-text-secondary-800 ax-border-secondary-800;
291
253
  }
292
254
 
293
255
  &:active {
294
- @apply ax-bg-secondary-300 ax-text-secondary-700;
256
+ @apply ax-text-secondary-500 ax-border-secondary-500;
295
257
  }
296
258
  }
297
-
298
259
  &.ax-state-selected {
299
- @apply ax-bg-secondary-300 ax-text-secondary-700;
260
+ @apply ax-bg-secondary-800 ax-text-secondary-fore;
300
261
  }
301
262
  }
302
263
 
303
- &.ax-warning-twotone {
304
- @apply ax-bg-warning-100 ax-text-warning-900 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-fore;
264
+ // success
265
+ &.ax-success-normal {
266
+ @apply ax-bg-success-500 ax-text-success-fore ax-border-transparent;
305
267
 
306
- &:not(.ax-state-disabled) {
268
+ &:not(.ax-state-disabled, .ax-state-selected) {
269
+ &:hover {
270
+ @apply ax-bg-success-600;
271
+ }
307
272
 
308
- &:hover,
309
273
  &:focus,
310
274
  &:focus-within {
311
- @apply ax-bg-warning-200 ax-text-warning-fore;
275
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-success-500;
312
276
  }
313
277
 
314
278
  &:active {
315
- @apply ax-bg-warning-300 ax-text-warning-fore;
279
+ @apply ax-bg-success-800 ax-ring-2 ax-ring-offset-2 ax-ring-success-800;
316
280
  }
317
281
  }
318
-
319
282
  &.ax-state-selected {
320
- @apply ax-bg-warning-300 ax-text-warning-fore;
283
+ @apply ax-bg-success-800;
321
284
  }
322
285
  }
286
+ &.ax-success-twotone {
287
+ @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent dark:ax-bg-success-300 dark:ax-text-success-700;
323
288
 
324
- &.ax-danger-twotone {
325
- @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-300 dark:ax-text-danger-700;
326
-
327
- &:not(.ax-state-disabled) {
328
-
289
+ &:not(.ax-state-disabled, .ax-state-selected) {
329
290
  &:hover,
330
291
  &:focus,
331
292
  &:focus-within {
332
- @apply ax-bg-danger-200 ax-text-danger-700;
293
+ @apply ax-bg-success-200 ax-text-success-700;
333
294
  }
334
295
 
335
296
  &:active {
336
- @apply ax-bg-danger-300 ax-text-danger-700;
297
+ @apply ax-bg-success-300 ax-text-success-700;
337
298
  }
338
299
  }
339
-
340
300
  &.ax-state-selected {
341
- @apply ax-bg-danger-300 ax-text-danger-700;
301
+ @apply ax-bg-success-500 ax-text-success-fore;
342
302
  }
343
303
  }
304
+ &.ax-success-outline {
305
+ @apply ax-text-success-500 ax-border-success-500;
344
306
 
345
- &.ax-success-twotone {
346
- @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent dark:ax-bg-success-300 dark:ax-text-success-700;
347
-
348
- &:not(.ax-state-disabled) {
349
-
307
+ &:not(.ax-state-disabled, .ax-state-selected) {
350
308
  &:hover,
351
309
  &:focus,
352
310
  &:focus-within {
353
- @apply ax-bg-success-200 ax-text-success-700;
311
+ @apply ax-border-success-300 ax-text-success-300;
354
312
  }
355
313
 
356
314
  &:active {
357
- @apply ax-bg-success-300 ax-text-success-700;
315
+ @apply ax-border-success-600 ax-text-success-800;
358
316
  }
359
317
  }
360
-
361
318
  &.ax-state-selected {
362
- @apply ax-bg-success-300 ax-text-success-700;
319
+ @apply ax-bg-success-800 ax-text-success-fore ax-border-success-800;
363
320
  }
364
321
  }
322
+ &.ax-success-blank {
323
+ @apply ax-text-success-500 ax-border-transparent;
365
324
 
366
- &.ax-info-twotone {
367
- @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent dark:ax-bg-info-300 dark:ax-text-info-700;
368
-
369
- &:not(.ax-state-disabled) {
370
-
325
+ &:not(.ax-state-disabled, .ax-state-selected) {
371
326
  &:hover,
372
327
  &:focus,
373
328
  &:focus-within {
374
- @apply ax-bg-info-200 ax-text-info-700;
329
+ @apply ax-bg-success-50 ax-text-success-600 dark:ax-bg-transparent;
375
330
  }
376
331
 
377
332
  &:active {
378
- @apply ax-bg-info-300 ax-text-info-700;
333
+ @apply ax-bg-success-100 ax-text-success-700;
379
334
  }
380
335
  }
381
-
382
336
  &.ax-state-selected {
383
- @apply ax-bg-info-300 ax-text-primary-700;
337
+ @apply ax-bg-success-800 ax-text-success-fore;
384
338
  }
385
339
  }
340
+ &.ax-success-link {
341
+ @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-success-500 ax-border-success-500;
386
342
 
387
- &.ax-dark-twotone {
388
- @apply ax-bg-dark-50 ax-text-dark-500 ax-border-transparent dark:ax-bg-dark-300 dark:ax-text-dark-700;
389
-
390
- &:not(.ax-state-disabled) {
391
- &:hover {}
392
-
343
+ &:not(.ax-state-disabled, .ax-state-selected) {
344
+ &:hover,
393
345
  &:focus,
394
346
  &:focus-within {
395
- @apply ax-bg-dark-100 ax-text-dark-700;
347
+ @apply ax-text-success-800 ax-border-success-800;
396
348
  }
397
349
 
398
350
  &:active {
399
- @apply ax-bg-dark-200 ax-text-dark-700;
400
- }
401
-
402
- &.ax-state-selected {
403
- @apply ax-bg-dark-300 ax-text-dark-fore;
351
+ @apply ax-text-success-500 ax-border-success-500;
404
352
  }
405
353
  }
354
+ &.ax-state-selected {
355
+ @apply ax-bg-success-800 ax-text-success-fore;
356
+ }
406
357
  }
407
358
 
408
- &.ax-light-twotone {
409
- @apply ax-bg-light-200 ax-text-light-fore ax-border-transparent dark:ax-bg-light-300 dark:ax-text-light-700;
359
+ // warning
360
+ &.ax-warning-normal {
361
+ @apply ax-bg-warning-500 ax-text-warning-fore ax-border-transparent;
410
362
 
411
- &:not(.ax-state-disabled) {
363
+ &:not(.ax-state-disabled, .ax-state-selected) {
412
364
  &:hover {
413
- @apply ax-bg-light-300;
365
+ @apply ax-bg-warning-600;
414
366
  }
415
367
 
416
368
  &:focus,
417
369
  &:focus-within {
418
- @apply ax-bg-light-200;
370
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-warning-500;
419
371
  }
420
372
 
421
373
  &:active {
422
- @apply ax-bg-light-300;
374
+ @apply ax-bg-warning-800 ax-ring-2 ax-ring-offset-2 ax-ring-warning-800;
423
375
  }
424
376
  }
425
-
426
377
  &.ax-state-selected {
427
- @apply ax-bg-light-400;
378
+ @apply ax-bg-warning-800;
428
379
  }
429
380
  }
381
+ &.ax-warning-twotone {
382
+ @apply ax-bg-warning-100 ax-text-warning-900 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-700;
430
383
 
431
- // outline
432
- &.ax-primary-outline {
433
- @apply ax-bg-transparent ax-text-primary-500 ax-border-primary-500;
434
-
435
- &:not(.ax-state-disabled) {
436
-
384
+ &:not(.ax-state-disabled, .ax-state-selected) {
437
385
  &:hover,
438
386
  &:focus,
439
387
  &:focus-within {
440
- @apply ax-bg-primary-500 ax-border-primary-500 ax-text-primary-fore;
388
+ @apply ax-bg-warning-200 ax-text-warning-800;
441
389
  }
442
390
 
443
391
  &:active {
444
- @apply ax-bg-primary-700 ax-border-primary-700 ax-text-primary-fore;
392
+ @apply ax-bg-warning-300 ax-text-warning-fore;
445
393
  }
446
394
  }
447
-
448
395
  &.ax-state-selected {
449
- @apply ax-bg-primary-500 ax-text-primary-fore;
396
+ @apply ax-bg-warning-500 ax-text-warning-fore;
450
397
  }
451
398
  }
399
+ &.ax-warning-outline {
400
+ @apply ax-text-warning-500 ax-border-warning-500;
452
401
 
453
- &.ax-secondary-outline {
454
- @apply ax-bg-transparent ax-text-secondary-500 ax-border-secondary-500;
455
-
456
- &:not(.ax-state-disabled) {
457
-
402
+ &:not(.ax-state-disabled, .ax-state-selected) {
458
403
  &:hover,
459
404
  &:focus,
460
405
  &:focus-within {
461
- @apply ax-bg-secondary-500 ax-border-secondary-500 ax-text-secondary-fore;
406
+ @apply ax-border-warning-300 ax-text-warning-300;
462
407
  }
463
408
 
464
409
  &:active {
465
- @apply ax-bg-secondary-700 ax-border-secondary-700 ax-text-primary-fore;
410
+ @apply ax-border-warning-600 ax-text-warning-800;
466
411
  }
467
412
  }
468
-
469
413
  &.ax-state-selected {
470
- @apply ax-bg-secondary-500 ax-text-secondary-fore;
414
+ @apply ax-bg-warning-800 ax-text-warning-fore ax-border-warning-800;
471
415
  }
472
416
  }
417
+ &.ax-warning-blank {
418
+ @apply ax-text-warning-500 ax-border-transparent;
473
419
 
474
- &.ax-warning-outline {
475
- @apply ax-bg-transparent ax-text-warning-500 ax-border-warning-500;
476
-
477
- &:not(.ax-state-disabled) {
478
-
420
+ &:not(.ax-state-disabled, .ax-state-selected) {
479
421
  &:hover,
480
422
  &:focus,
481
423
  &:focus-within {
482
- @apply ax-bg-warning-500 ax-border-warning-500 ax-text-warning-fore;
424
+ @apply ax-bg-warning-50 ax-text-warning-600 dark:ax-bg-transparent;
483
425
  }
484
426
 
485
427
  &:active {
486
- @apply ax-bg-warning-700 ax-border-warning-700 ax-text-primary-fore;
428
+ @apply ax-bg-warning-100 ax-text-warning-700;
487
429
  }
488
430
  }
489
-
490
431
  &.ax-state-selected {
491
- @apply ax-bg-warning-500 ax-text-warning-fore;
432
+ @apply ax-bg-warning-800 ax-text-warning-fore;
492
433
  }
493
434
  }
435
+ &.ax-warning-link {
436
+ @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-warning-500 ax-border-warning-500;
494
437
 
495
- &.ax-danger-outline {
496
- @apply ax-bg-transparent ax-text-danger-500 ax-border-danger-500;
497
-
498
- &:not(.ax-state-disabled) {
499
-
438
+ &:not(.ax-state-disabled, .ax-state-selected) {
500
439
  &:hover,
501
440
  &:focus,
502
441
  &:focus-within {
503
- @apply ax-bg-danger-500 ax-border-danger-500 ax-text-danger-fore;
442
+ @apply ax-text-warning-800 ax-border-warning-800;
504
443
  }
505
444
 
506
445
  &:active {
507
- @apply ax-bg-danger-700 ax-border-danger-700 ax-text-primary-fore;
446
+ @apply ax-text-warning-500 ax-border-warning-500;
508
447
  }
509
448
  }
510
-
511
449
  &.ax-state-selected {
512
- @apply ax-bg-danger-500 ax-text-danger-fore;
450
+ @apply ax-bg-warning-800 ax-text-warning-fore;
513
451
  }
514
452
  }
515
453
 
516
- &.ax-success-outline {
517
- @apply ax-bg-transparent ax-text-success-500 ax-border-success-500;
454
+ // danger
455
+ &.ax-danger-normal {
456
+ @apply ax-bg-danger-500 ax-text-danger-fore ax-border-transparent;
518
457
 
519
- &:not(.ax-state-disabled) {
458
+ &:not(.ax-state-disabled, .ax-state-selected) {
459
+ &:hover {
460
+ @apply ax-bg-danger-600;
461
+ }
520
462
 
521
- &:hover,
522
463
  &:focus,
523
464
  &:focus-within {
524
- @apply ax-bg-success-500 ax-border-success-500 ax-text-success-fore;
465
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-danger-500;
525
466
  }
526
467
 
527
468
  &:active {
528
- @apply ax-bg-success-700 ax-border-success-700 ax-text-success-fore;
469
+ @apply ax-bg-danger-800 ax-ring-2 ax-ring-offset-2 ax-ring-danger-800;
529
470
  }
530
471
  }
531
-
532
472
  &.ax-state-selected {
533
- @apply ax-bg-success-500 ax-text-success-fore;
473
+ @apply ax-bg-danger-800;
534
474
  }
535
475
  }
476
+ &.ax-danger-twotone {
477
+ @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-300 dark:ax-text-danger-700;
536
478
 
537
- &.ax-info-outline {
538
- @apply ax-bg-transparent ax-text-info-500 ax-border-info-500;
539
-
540
- &:not(.ax-state-disabled) {
541
-
479
+ &:not(.ax-state-disabled, .ax-state-selected) {
542
480
  &:hover,
543
481
  &:focus,
544
482
  &:focus-within {
545
- @apply ax-bg-info-500 ax-border-info-500 ax-text-info-fore;
483
+ @apply ax-bg-danger-200 ax-text-danger-700;
546
484
  }
547
485
 
548
486
  &:active {
549
- @apply ax-bg-info-700 ax-border-info-700 ax-text-info-fore;
487
+ @apply ax-bg-danger-300 ax-text-danger-700;
550
488
  }
551
489
  }
552
-
553
490
  &.ax-state-selected {
554
- @apply ax-bg-info-500 ax-text-info-fore;
491
+ @apply ax-bg-danger-500 ax-text-danger-fore;
555
492
  }
556
493
  }
494
+ &.ax-danger-outline {
495
+ @apply ax-text-danger-500 ax-border-danger-500;
557
496
 
558
- &.ax-dark-outline {
559
- @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;
560
-
561
- &:not(.ax-state-disabled) {
562
- &:hover {
563
- @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;
564
- }
565
-
497
+ &:not(.ax-state-disabled, .ax-state-selected) {
498
+ &:hover,
566
499
  &:focus,
567
500
  &:focus-within {
568
- @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;
501
+ @apply ax-border-danger-300 ax-text-danger-300;
569
502
  }
570
503
 
571
504
  &:active {
572
- @apply ax-bg-dark-700 ax-border-dark-700 ax-text-dark-fore dark:ax-bg-dark-200;
505
+ @apply ax-border-danger-600 ax-text-danger-800;
573
506
  }
574
507
  }
575
-
576
508
  &.ax-state-selected {
577
- @apply ax-bg-dark-500 ax-text-dark-fore;
509
+ @apply ax-bg-danger-800 ax-text-danger-fore ax-border-danger-800;
578
510
  }
579
511
  }
512
+ &.ax-danger-blank {
513
+ @apply ax-text-danger-500 ax-border-transparent;
580
514
 
581
- &.ax-light-outline {
582
- @apply ax-bg-transparent ax-text-light-fore ax-border-light-300 dark:ax-text-light-200 dark:ax-border-light-400;
583
-
584
- &:not(.ax-state-disabled) {
585
-
515
+ &:not(.ax-state-disabled, .ax-state-selected) {
586
516
  &:hover,
587
517
  &:focus,
588
518
  &:focus-within {
589
- @apply ax-bg-light-200 ax-border-light-300 ax-text-light-fore;
519
+ @apply ax-bg-danger-50 ax-text-danger-600 dark:ax-bg-transparent;
590
520
  }
591
521
 
592
522
  &:active {
593
- @apply ax-bg-light-300 ax-border-light-300 ax-text-light-fore;
523
+ @apply ax-bg-danger-100 ax-text-danger-700;
594
524
  }
595
525
  }
596
-
597
526
  &.ax-state-selected {
598
- @apply ax-bg-light-300 ax-text-light-fore;
527
+ @apply ax-bg-danger-800 ax-text-danger-fore;
599
528
  }
600
529
  }
530
+ &.ax-danger-link {
531
+ @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-danger-500 ax-border-danger-500;
601
532
 
602
- // blank
603
- &.ax-primary-blank {
604
- @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
605
-
606
- &:not(.ax-state-disabled) {
607
-
533
+ &:not(.ax-state-disabled, .ax-state-selected) {
608
534
  &:hover,
609
535
  &:focus,
610
536
  &:focus-within {
611
- @apply ax-bg-primary-50 ax-text-primary-600 dark:ax-bg-transparent;
537
+ @apply ax-text-danger-800 ax-border-danger-800;
612
538
  }
613
539
 
614
540
  &:active {
615
- @apply ax-bg-primary-100 ax-text-primary-700;
541
+ @apply ax-text-danger-500 ax-border-danger-500;
616
542
  }
617
543
  }
618
-
619
544
  &.ax-state-selected {
620
- @apply ax-bg-primary-200;
545
+ @apply ax-bg-danger-800 ax-text-danger-fore;
621
546
  }
622
547
  }
623
548
 
624
- &.ax-secondary-blank {
625
- @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
549
+ // info
550
+ &.ax-info-normal {
551
+ @apply ax-bg-info-500 ax-text-info-fore ax-border-transparent;
626
552
 
627
- &:not(.ax-state-disabled) {
553
+ &:not(.ax-state-disabled, .ax-state-selected) {
554
+ &:hover {
555
+ @apply ax-bg-info-600;
556
+ }
628
557
 
629
- &:hover,
630
558
  &:focus,
631
559
  &:focus-within {
632
- @apply ax-bg-secondary-50 ax-text-secondary-600 dark:ax-bg-transparent;
560
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-info-500;
633
561
  }
634
562
 
635
563
  &:active {
636
- @apply ax-bg-secondary-100 ax-text-secondary-700;
564
+ @apply ax-bg-info-800 ax-ring-2 ax-ring-offset-2 ax-ring-info-800;
637
565
  }
638
566
  }
639
-
640
567
  &.ax-state-selected {
641
- @apply ax-bg-secondary-200;
568
+ @apply ax-bg-info-800;
642
569
  }
643
570
  }
571
+ &.ax-info-twotone {
572
+ @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent dark:ax-bg-info-300 dark:ax-text-info-700;
644
573
 
645
- &.ax-warning-blank {
646
- @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
647
-
648
- &:not(.ax-state-disabled) {
649
-
574
+ &:not(.ax-state-disabled, .ax-state-selected) {
650
575
  &:hover,
651
576
  &:focus,
652
577
  &:focus-within {
653
- @apply ax-bg-warning-50 ax-text-warning-fore dark:ax-bg-transparent;
578
+ @apply ax-bg-info-200 ax-text-info-700;
654
579
  }
655
580
 
656
581
  &:active {
657
- @apply ax-bg-warning-100 ax-text-warning-fore;
582
+ @apply ax-bg-info-300 ax-text-info-700;
658
583
  }
659
584
  }
660
-
661
585
  &.ax-state-selected {
662
- @apply ax-bg-warning-200;
586
+ @apply ax-bg-info-500 ax-text-info-fore;
663
587
  }
664
588
  }
589
+ &.ax-info-outline {
590
+ @apply ax-text-info-500 ax-border-info-500;
665
591
 
666
- &.ax-danger-blank {
667
- @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
668
-
669
- &:not(.ax-state-disabled) {
670
-
592
+ &:not(.ax-state-disabled, .ax-state-selected) {
671
593
  &:hover,
672
594
  &:focus,
673
595
  &:focus-within {
674
- @apply ax-bg-danger-50 ax-text-danger-600 dark:ax-bg-transparent;
596
+ @apply ax-border-info-300 ax-text-info-300;
675
597
  }
676
598
 
677
599
  &:active {
678
- @apply ax-bg-danger-100 ax-text-danger-700;
600
+ @apply ax-border-info-600 ax-text-info-800;
679
601
  }
680
602
  }
681
-
682
603
  &.ax-state-selected {
683
- @apply ax-bg-danger-200;
604
+ @apply ax-bg-info-800 ax-text-info-fore ax-border-info-800;
684
605
  }
685
606
  }
607
+ &.ax-info-blank {
608
+ @apply ax-text-info-500 ax-border-transparent;
686
609
 
687
- &.ax-success-blank {
688
- @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
689
-
690
- &:not(.ax-state-disabled) {
691
-
610
+ &:not(.ax-state-disabled, .ax-state-selected) {
692
611
  &:hover,
693
612
  &:focus,
694
613
  &:focus-within {
695
- @apply ax-bg-success-50 ax-text-success-600 dark:ax-bg-transparent;
614
+ @apply ax-bg-info-50 ax-text-info-600 dark:ax-bg-transparent;
696
615
  }
697
616
 
698
617
  &:active {
699
- @apply ax-bg-success-100 ax-text-success-700;
618
+ @apply ax-bg-info-100 ax-text-info-700;
700
619
  }
701
620
  }
702
-
703
621
  &.ax-state-selected {
704
- @apply ax-bg-success-200;
622
+ @apply ax-bg-info-800 ax-text-info-fore;
705
623
  }
706
624
  }
625
+ &.ax-info-link {
626
+ @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-info-500 ax-border-info-500;
707
627
 
708
- &.ax-info-blank {
709
- @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
710
-
711
- &:not(.ax-state-disabled) {
712
-
628
+ &:not(.ax-state-disabled, .ax-state-selected) {
713
629
  &:hover,
714
630
  &:focus,
715
631
  &:focus-within {
716
- @apply ax-bg-info-50 ax-text-info-600 dark:ax-bg-transparent;
632
+ @apply ax-text-info-800 ax-border-info-800;
717
633
  }
718
634
 
719
635
  &:active {
720
- @apply ax-bg-info-100 ax-text-info-700;
636
+ @apply ax-text-info-500 ax-border-info-500;
721
637
  }
722
638
  }
723
-
724
639
  &.ax-state-selected {
725
- @apply ax-bg-info-200;
640
+ @apply ax-bg-info-800 ax-text-info-fore;
726
641
  }
727
642
  }
728
643
 
729
- &.ax-dark-blank {
730
- @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent dark:ax-text-dark-50;
644
+ // dark
645
+ &.ax-dark-normal {
646
+ @apply ax-bg-dark-500 ax-text-dark-fore ax-border-transparent dark:ax-bg-dark-600;
731
647
 
732
- &:not(.ax-state-disabled) {
648
+ &:not(.ax-state-disabled, .ax-state-selected) {
649
+ &:hover {
650
+ @apply ax-bg-dark-500 dark:ax-bg-dark-400;
651
+ }
733
652
 
734
- &:hover,
735
653
  &:focus,
736
654
  &:focus-within {
737
- @apply ax-bg-dark-400 ax-text-dark-fore dark:ax-bg-transparent dark:ax-text-dark-100;
655
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500 dark:ax-ring-dark-400 dark:ax-bg-dark-400;
738
656
  }
739
657
 
740
658
  &:active {
741
- @apply ax-bg-dark-600 ax-text-dark-fore dark:ax-text-dark-50;
659
+ @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-500 dark:ax-ring-dark-500 dark:ax-bg-dark-500;
742
660
  }
743
661
  }
744
-
745
- &.ax-state-selected {
746
- @apply ax-bg-dark-200;
662
+ &.ax-state-selected{
663
+ @apply ax-bg-dark-300 ax-text-dark-fore;
747
664
  }
748
665
  }
666
+ &.ax-dark-twotone {
667
+ @apply ax-bg-dark-50 ax-text-dark-500 ax-border-transparent dark:ax-bg-dark-300 dark:ax-text-dark-700;
749
668
 
750
- &.ax-light-blank {
751
- @apply ax-bg-transparent ax-text-light-600 ax-border-transparent dark:ax-text-light-300;
752
-
753
- &:not(.ax-state-disabled) {
669
+ &:not(.ax-state-disabled, .ax-state-selected) {
670
+ &:hover {
671
+ }
754
672
 
755
- &:hover,
756
673
  &:focus,
757
674
  &:focus-within {
758
- @apply ax-bg-light-50 ax-text-light-500 dark:ax-bg-transparent dark:ax-text-light-500;
675
+ @apply ax-bg-dark-100 ax-text-dark-700;
759
676
  }
760
677
 
761
678
  &:active {
762
- @apply ax-bg-light-200 ax-text-light-700 dark:ax-text-light-300;
679
+ @apply ax-bg-dark-200 ax-text-dark-700;
763
680
  }
764
681
  }
765
-
766
- &.ax-state-selected {
767
- @apply ax-bg-light-600;
682
+ &.ax-state-selected{
683
+ @apply ax-bg-dark-300 ax-text-dark-fore;
768
684
  }
769
685
  }
686
+ &.ax-dark-outline {
687
+ @apply ax-text-dark-500 ax-border-dark-500 dark:ax-text-dark-100 dark:ax-border-dark-100;
770
688
 
771
- // link
772
- &.ax-primary-link {
773
- @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;
774
-
775
- &:not(.ax-state-disabled) {
689
+ &:not(.ax-state-disabled, .ax-state-selected) {
690
+ &:hover {
691
+ @apply ax-border-dark-100 ax-text-dark-100 dark:ax-border-dark-300 dark:ax-text-light-100;
692
+ }
776
693
 
777
- &:hover,
778
694
  &:focus,
779
695
  &:focus-within {
780
- @apply ax-text-primary-800 ax-border-primary-800;
696
+ @apply ax-border-dark-200 ax-text-dark-200 dark:ax-border-dark-300;
781
697
  }
782
698
 
783
699
  &:active {
784
- @apply ax-text-primary-500 ax-border-primary-500;
700
+ @apply ax-border-dark-100;
785
701
  }
786
702
  }
787
-
788
- &.ax-state-selected {
789
- @apply ax-bg-primary-200;
703
+ &.ax-state-selected{
704
+ @apply ax-bg-dark-300 ax-border-dark-300 ax-text-dark-fore;
790
705
  }
791
706
  }
707
+ &.ax-dark-blank {
708
+ @apply ax-text-dark-500 ax-border-transparent dark:ax-text-dark-50;
792
709
 
793
- &.ax-secondary-link {
794
- @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;
795
-
796
- &:not(.ax-state-disabled) {
797
-
710
+ &:not(.ax-state-disabled, .ax-state-selected) {
798
711
  &:hover,
799
712
  &:focus,
800
713
  &:focus-within {
801
- @apply ax-text-secondary-600 ax-border-secondary-600;
714
+ @apply ax-bg-dark-400 ax-text-dark-fore dark:ax-bg-transparent dark:ax-text-dark-100;
802
715
  }
803
716
 
804
717
  &:active {
805
- @apply ax-text-secondary-500 ax-border-secondary-500;
718
+ @apply ax-bg-dark-600 ax-text-dark-fore dark:ax-text-dark-50;
806
719
  }
807
720
  }
808
-
809
- &.ax-state-selected {
810
- @apply ax-bg-secondary-200;
721
+ &.ax-state-selected{
722
+ @apply ax-bg-dark-300 ax-text-dark-fore;
811
723
  }
812
724
  }
725
+ &.ax-dark-link {
726
+ @apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-dark-500 ax-border-dark-500 dark:ax-border-dark-50 dark:ax-text-dark-50;
813
727
 
814
- &.ax-warning-link {
815
- @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;
816
-
817
- &:not(.ax-state-disabled) {
818
-
728
+ &:not(.ax-state-disabled, .ax-state-selected) {
819
729
  &:hover,
820
730
  &:focus,
821
731
  &:focus-within {
822
- @apply ax-text-warning-fore ax-border-warning-600;
732
+ @apply ax-text-dark-200 ax-border-dark-200 dark:ax-border-dark-200 dark:ax-text-dark-200;
823
733
  }
824
734
 
825
735
  &:active {
826
- @apply ax-text-warning-fore ax-border-warning-500;
736
+ @apply ax-text-dark-300 ax-border-dark-300 dark:ax-border-dark-100 dark:ax-text-dark-100;
827
737
  }
828
738
  }
829
-
830
- &.ax-state-selected {
831
- @apply ax-bg-warning-200;
739
+ &.ax-state-selected{
740
+ @apply ax-bg-dark-300 ax-text-dark-fore;
832
741
  }
833
742
  }
834
743
 
835
- &.ax-danger-link {
836
- @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;
744
+ // light
745
+ &.ax-light-normal {
746
+ @apply ax-bg-light-100 ax-text-light-fore dark:ax-bg-light-800 dark:ax-border-light-800 dark:ax-text-light-100;
837
747
 
838
- &:not(.ax-state-disabled) {
748
+ &:not(.ax-state-disabled, .ax-state-selected) {
749
+ &:hover {
750
+ @apply ax-bg-light-200 dark:ax-bg-light-700;
751
+ }
839
752
 
840
- &:hover,
841
753
  &:focus,
842
754
  &:focus-within {
843
- @apply ax-text-danger-600 ax-border-danger-600;
755
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-300 dark:ax-ring-light-600 dark:ax-bg-light-600;
844
756
  }
845
757
 
846
758
  &:active {
847
- @apply ax-text-danger-500 ax-border-danger-500;
759
+ @apply ax-bg-light-300 ax-ring-2 ax-ring-offset-2 ax-ring-light-300 dark:ax-bg-light-800 dark:ax-ring-light-800;
848
760
  }
849
761
  }
850
-
851
762
  &.ax-state-selected {
852
- @apply ax-bg-danger-200;
763
+ @apply ax-bg-light-300 dark:ax-bg-light-500;
853
764
  }
854
765
  }
766
+ &.ax-light-twotone {
767
+ @apply ax-bg-light-200 ax-text-light-fore dark:ax-bg-light-600 dark:ax-border-light-600 dark:ax-text-light-100;
855
768
 
856
- &.ax-success-link {
857
- @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;
858
-
859
- &:not(.ax-state-disabled) {
769
+ &:not(.ax-state-disabled, .ax-state-selected) {
770
+ &:hover {
771
+ @apply ax-bg-light-100 dark:ax-bg-light-700;
772
+ }
860
773
 
861
- &:hover,
862
774
  &:focus,
863
775
  &:focus-within {
864
- @apply ax-text-success-600 ax-border-success-600;
776
+ @apply ax-bg-light-300 dark:ax-bg-light-700;
865
777
  }
866
778
 
867
779
  &:active {
868
- @apply ax-text-success-500 ax-border-success-500;
780
+ @apply ax-bg-light-300 ax-ring-light-400 dark:ax-bg-light-600;
869
781
  }
870
782
  }
871
-
872
783
  &.ax-state-selected {
873
- @apply ax-bg-success-200;
784
+ @apply ax-bg-light-300 dark:ax-bg-light-500;
874
785
  }
875
786
  }
787
+ &.ax-light-outline {
788
+ @apply ax-text-light-fore ax-border ax-border-light-300 dark:ax-border-light-500 dark:ax-text-light-100;
876
789
 
877
- &.ax-info-link {
878
- @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;
879
-
880
- &:not(.ax-state-disabled) {
790
+ &:not(.ax-state-disabled, .ax-state-selected) {
791
+ &:hover {
792
+ @apply ax-border-light-400 ax-text-light-500 dark:ax-border-light-700 dark:ax-text-light-300;
793
+ }
881
794
 
882
- &:hover,
883
795
  &:focus,
884
796
  &:focus-within {
885
- @apply ax-text-info-600 ax-border-info-600;
797
+ @apply ax-border-light-600 ax-text-light-600 dark:ax-border-light-700 dark:ax-text-light-400;
886
798
  }
887
799
 
888
800
  &:active {
889
- @apply ax-text-info-500 ax-border-info-500;
801
+ @apply ax-border-light-300 ax-text-light-400 dark:ax-border-light-600 dark:ax-text-light-300;
890
802
  }
891
803
  }
892
-
893
804
  &.ax-state-selected {
894
- @apply ax-bg-info-200;
805
+ @apply ax-bg-light-400 ax-border-light-400 dark:ax-bg-light-500 dark:ax-border-light-500;
895
806
  }
896
807
  }
808
+ &.ax-light-link {
809
+ @apply ax-text-light-fore ax-border-b ax-rounded-none ax-border-light-300 dark:ax-text-light-100 dark:ax-border-light-500;
897
810
 
898
- &.ax-dark-link {
899
- @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;
900
-
901
- &:not(.ax-state-disabled) {
811
+ &:not(.ax-state-disabled, .ax-state-selected) {
812
+ &:hover {
813
+ @apply ax-border-light-500 ax-text-light-500 dark:ax-border-light-300 dark:ax-text-light-300;
814
+ }
902
815
 
903
- &:hover,
904
816
  &:focus,
905
817
  &:focus-within {
906
- @apply ax-text-dark-600 ax-border-dark-600 dark:ax-border-dark-200 dark:ax-text-dark-200;
818
+ @apply ax-border-light-600 ax-text-light-600 dark:ax-border-light-400 dark:ax-text-light-400;
907
819
  }
908
820
 
909
821
  &:active {
910
- @apply ax-text-dark-300 ax-border-dark-300 dark:ax-border-dark-100 dark:ax-text-dark-100;
822
+ @apply ax-border-light-400 ax-text-light-400 dark:ax-border-light-300 dark:ax-text-light-300;
911
823
  }
912
824
  }
913
-
914
825
  &.ax-state-selected {
915
- @apply ax-bg-dark-200;
826
+ @apply ax-bg-light-300 ax-border-light-400 dark:ax-bg-light-500;
916
827
  }
917
828
  }
829
+ &.ax-light-blank {
830
+ @apply ax-text-light-fore dark:ax-border-light-600 dark:ax-text-light-100;
918
831
 
919
- &.ax-light-link {
920
- @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-light-400 ax-border-light-400 dark:ax-border-light-50 dark:ax-text-light-50;
921
-
922
- &:not(.ax-state-disabled) {
832
+ &:not(.ax-state-disabled, .ax-state-selected) {
923
833
  &:hover {
924
- @apply ax-text-light-300 ax-border-light-300;
834
+ @apply ax-bg-light-100 dark:ax-bg-light-800;
925
835
  }
926
836
 
927
837
  &:focus,
928
838
  &:focus-within {
929
- @apply ax-text-light-500 ax-border-y-light-500;
839
+ @apply ax-bg-light-200 dark:ax-bg-light-700;
930
840
  }
931
841
 
932
842
  &:active {
933
- @apply ax-text-light-600 ax-border-light-600 dark:ax-border-light-200 dark:ax-text-light-200;
843
+ @apply ax-bg-light-200 dark:ax-bg-light-600;
934
844
  }
935
845
  }
936
-
937
846
  &.ax-state-selected {
938
- @apply ax-bg-light-600;
847
+ @apply ax-bg-light-300 dark:ax-bg-light-500;
939
848
  }
940
849
  }
941
850
  }
942
851
 
943
- .ax-button-group {
852
+ ax-button-group {
944
853
  @apply ax-flex;
945
854
 
946
855
  ax-button {
947
856
  @apply ax-rounded-none;
948
857
 
949
858
  &[class*="-link"] {
950
-
951
859
  &:first-child,
952
860
  &:last-child {
953
861
  @apply ax-rounded-s-none ax-rounded-e-none;
@@ -967,4 +875,4 @@
967
875
  }
968
876
  }
969
877
  }
970
- }
878
+ }