@acorex/styles 5.0.12 → 5.0.13

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 (28) hide show
  1. package/dark.scss +37 -0
  2. package/index.scss +8 -5
  3. package/package.json +1 -1
  4. package/src/base/index.scss +5 -3
  5. package/src/components/_alert.scss +19 -30
  6. package/src/components/_badge.scss +1 -1
  7. package/src/components/_button.scss +408 -289
  8. package/src/components/_calendar.scss +20 -24
  9. package/src/components/_checkbox.scss +2 -5
  10. package/src/components/_datapager.scss +1 -1
  11. package/src/components/_datepicker.scss +1 -1
  12. package/src/components/_dialog.scss +17 -19
  13. package/src/components/_dropdown.scss +47 -3
  14. package/src/components/_editor-container.scss +4 -5
  15. package/src/components/_label.scss +1 -1
  16. package/src/components/_list.scss +3 -3
  17. package/src/components/_popup.scss +3 -3
  18. package/src/components/_radio.scss +2 -5
  19. package/src/components/_range-slider.scss +4 -3
  20. package/src/components/_skeleton.scss +1 -3
  21. package/src/components/_switch.scss +2 -0
  22. package/src/components/_tabs.scss +29 -28
  23. package/src/components/_toast.scss +7 -9
  24. package/src/utility/_mixins.scss +38 -0
  25. package/src/utility/index.scss +0 -180
  26. package/src/variables/_colors.scss +121 -2
  27. package/src/base/_colors.scss +0 -20
  28. package/src/variables/_mixins.scss +0 -18
package/src/components/_button.scss CHANGED
@@ -1,11 +1,10 @@
1
- @import "../variables/mixins";
2
1
  @layer components {
3
2
  ax-button {
4
3
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
5
4
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
6
- @apply ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-px-4 ax-text-sm ax-font-medium ax-border-light-300 ax-text-light-600 ax-select-none ax-whitespace-nowrap;
7
- @include respond(mobile) {
8
- @apply ax-text-base;
5
+ @apply ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-px-4 ax-text-base ax-font-medium ax-border-light-300 ax-text-light-600 ax-select-none ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis;
6
+ @screen md {
7
+ @apply ax-text-sm;
9
8
  }
10
9
  ax-prefix {
11
10
  @apply ax-flex ax-flex-row ax-pe-2;
@@ -23,14 +22,14 @@
23
22
  @apply ax-rounded-full;
24
23
  }
25
24
  &.ax-button-icon {
25
+ @apply ax-px-3;
26
+
26
27
  ax-prefix,
27
28
  ax-suffix {
28
29
  @apply ax-p-0;
29
30
  }
30
- @apply ax-px-2;
31
- [class*=" ax-ic-"],
32
- [class^=ax-ic-] {
33
- @apply ax-text-2xl;
31
+ ax-icon {
32
+ @apply ax-text-base;
34
33
  }
35
34
  }
36
35
  &.ax-sm {
@@ -72,228 +71,276 @@
72
71
  }
73
72
  // normal
74
73
  &.ax-primary {
75
- @apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent hover:ax-bg-danger;
76
- &:hover {
77
- @apply ax-bg-primary-600;
78
- }
79
- &:focus {
80
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-primary-500;
81
- }
82
- &:active {
83
- @apply ax-bg-primary-700 ax-ring-2 ax-ring-offset-2 ax-ring-primary-700;
74
+ @apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
75
+ &:not(.ax-state-disabled) {
76
+ &:hover {
77
+ @apply ax-bg-primary-600;
78
+ }
79
+ &:focus {
80
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-primary-500;
81
+ }
82
+ &:active {
83
+ @apply ax-bg-primary-700 ax-ring-2 ax-ring-offset-2 ax-ring-primary-700;
84
+ }
84
85
  }
86
+
85
87
  &.ax-state-selected {
86
88
  @apply ax-bg-primary-700;
87
89
  }
88
90
  }
89
91
  &.ax-secondary {
90
92
  @apply ax-shadow-sm ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent;
91
- &:hover {
92
- @apply ax-bg-secondary-600;
93
- }
94
- &:focus {
95
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-secondary-500;
96
- }
97
- &:active {
98
- @apply ax-bg-secondary-700 ax-ring-2 ax-ring-offset-2 ax-ring-secondary-700;
93
+ &:not(.ax-state-disabled) {
94
+ &:hover {
95
+ @apply ax-bg-secondary-600;
96
+ }
97
+ &:focus {
98
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-secondary-500;
99
+ }
100
+ &:active {
101
+ @apply ax-bg-secondary-700 ax-ring-2 ax-ring-offset-2 ax-ring-secondary-700;
102
+ }
99
103
  }
104
+
100
105
  &.ax-state-selected {
101
106
  @apply ax-bg-secondary-700;
102
107
  }
103
108
  }
104
109
  &.ax-warning {
105
110
  @apply ax-shadow-sm ax-bg-warning-500 ax-text-warning-fore ax-border-transparent;
106
- &:hover {
107
- @apply ax-bg-warning-400;
108
- }
109
- &:focus {
110
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-warning-500;
111
- }
112
- &:active {
113
- @apply ax-bg-warning-600 ax-text-warning-100 ax-ring-2 ax-ring-offset-2 ax-ring-warning-700;
111
+ &:not(.ax-state-disabled) {
112
+ &:hover {
113
+ @apply ax-bg-warning-400;
114
+ }
115
+ &:focus {
116
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-warning-500;
117
+ }
118
+ &:active {
119
+ @apply ax-bg-warning-600 ax-text-warning-100 ax-ring-2 ax-ring-offset-2 ax-ring-warning-700;
120
+ }
114
121
  }
122
+
115
123
  &.ax-state-selected {
116
124
  @apply ax-bg-warning-700 ax-text-warning-50;
117
125
  }
118
126
  }
119
127
  &.ax-danger {
120
128
  @apply ax-shadow-sm ax-bg-danger-500 ax-text-danger-fore ax-border-transparent;
121
- &:hover {
122
- @apply ax-bg-danger-600;
123
- }
124
- &:focus {
125
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-danger-500;
126
- }
127
- &:active {
128
- @apply ax-bg-danger-700 ax-ring-2 ax-ring-offset-2 ax-ring-danger-700;
129
+ &:not(.ax-state-disabled) {
130
+ &:hover {
131
+ @apply ax-bg-danger-600;
132
+ }
133
+ &:focus {
134
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-danger-500;
135
+ }
136
+ &:active {
137
+ @apply ax-bg-danger-700 ax-ring-2 ax-ring-offset-2 ax-ring-danger-700;
138
+ }
129
139
  }
140
+
130
141
  &.ax-state-selected {
131
142
  @apply ax-bg-danger-700;
132
143
  }
133
144
  }
134
145
  &.ax-success {
135
146
  @apply ax-shadow-sm ax-bg-success-500 ax-text-success-fore ax-border-transparent;
136
- &:hover {
137
- @apply ax-bg-success-600;
138
- }
139
- &:focus {
140
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-success-500;
141
- }
142
- &:active {
143
- @apply ax-bg-success-700 ax-ring-2 ax-ring-offset-2 ax-ring-success-700;
147
+ &:not(.ax-state-disabled) {
148
+ &:hover {
149
+ @apply ax-bg-success-600;
150
+ }
151
+ &:focus {
152
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-success-500;
153
+ }
154
+ &:active {
155
+ @apply ax-bg-success-700 ax-ring-2 ax-ring-offset-2 ax-ring-success-700;
156
+ }
144
157
  }
158
+
145
159
  &.ax-state-selected {
146
160
  @apply ax-bg-success-700;
147
161
  }
148
162
  }
149
163
  &.ax-info {
150
164
  @apply ax-shadow-sm ax-bg-info-500 ax-text-info-fore ax-border-transparent;
151
- &:hover {
152
- @apply ax-bg-info-600;
153
- }
154
- &:focus {
155
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-info-500;
156
- }
157
- &:active {
158
- @apply ax-bg-info-700 ax-ring-2 ax-ring-offset-2 ax-ring-info-700;
165
+ &:not(.ax-state-disabled) {
166
+ &:hover {
167
+ @apply ax-bg-info-600;
168
+ }
169
+ &:focus {
170
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-info-500;
171
+ }
172
+ &:active {
173
+ @apply ax-bg-info-700 ax-ring-2 ax-ring-offset-2 ax-ring-info-700;
174
+ }
159
175
  }
176
+
160
177
  &.ax-state-selected {
161
178
  @apply ax-bg-info-700;
162
179
  }
163
180
  }
164
181
  &.ax-dark {
165
182
  @apply ax-shadow-sm ax-bg-dark-500 ax-text-dark-fore ax-border-transparent;
166
- &:hover {
167
- @apply ax-bg-dark-400;
168
- }
169
- &:focus {
170
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500;
171
- }
172
- &:active {
173
- @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-700;
183
+ &:not(.ax-state-disabled) {
184
+ &:hover {
185
+ @apply ax-bg-dark-400;
186
+ }
187
+ &:focus {
188
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500;
189
+ }
190
+ &:active {
191
+ @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-700;
192
+ }
174
193
  }
194
+
175
195
  &.ax-state-selected {
176
196
  @apply ax-bg-dark-300;
177
197
  }
178
198
  }
179
199
  &.ax-light {
180
- @apply ax-shadow-sm ax-bg-light-50 ax-text-light-fore ax-border ax-border-default;
181
- &:hover {
182
- @apply ax-bg-light-100;
183
- }
184
- &:focus {
185
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
186
- }
187
- &:active {
188
- @apply ax-bg-light-200 ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
200
+ @apply ax-shadow-sm ax-bg-light-50 ax-text-light-fore ax-border ax-border-light-300;
201
+ &:not(.ax-state-disabled) {
202
+ &:hover {
203
+ @apply ax-bg-light-100;
204
+ }
205
+ &:focus {
206
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
207
+ }
208
+ &:active {
209
+ @apply ax-bg-light-200 ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
210
+ }
189
211
  }
212
+
190
213
  &.ax-state-selected {
191
214
  @apply ax-bg-light-600 ax-text-light-50;
192
215
  }
193
216
  }
194
217
  // twotone
195
218
  &.ax-primary-twotone {
196
- @apply ax-bg-primary-50 ax-text-primary-500 ax-border-transparent;
197
- &:hover,
198
- &:focus {
199
- @apply ax-bg-primary-100 ax-text-primary-700;
200
- }
201
- &:active {
202
- @apply ax-bg-primary-200 ax-text-primary-700;
219
+ @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent;
220
+ &:not(.ax-state-disabled) {
221
+ &:hover,
222
+ &:focus {
223
+ @apply ax-bg-primary-200 ax-text-primary-700;
224
+ }
225
+ &:active {
226
+ @apply ax-bg-primary-300 ax-text-primary-700;
227
+ }
203
228
  }
229
+
204
230
  &.ax-state-selected {
205
231
  @apply ax-bg-primary-200 ax-text-primary-700;
206
232
  }
207
233
  }
208
234
  &.ax-secondary-twotone {
209
- @apply ax-bg-secondary-50 ax-text-secondary-500 ax-border-transparent;
210
- &:hover,
211
- &:focus {
212
- @apply ax-bg-secondary-100 ax-text-secondary-700;
213
- }
214
- &:active {
215
- @apply ax-bg-secondary-200 ax-text-secondary-700;
235
+ @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent;
236
+ &:not(.ax-state-disabled) {
237
+ &:hover,
238
+ &:focus {
239
+ @apply ax-bg-secondary-200 ax-text-secondary-700;
240
+ }
241
+ &:active {
242
+ @apply ax-bg-secondary-300 ax-text-secondary-700;
243
+ }
216
244
  }
245
+
217
246
  &.ax-state-selected {
218
247
  @apply ax-bg-secondary-200 ax-text-secondary-700;
219
248
  }
220
249
  }
221
250
  &.ax-warning-twotone {
222
- @apply ax-bg-warning-50 ax-text-warning-500 ax-border-transparent;
223
- &:hover,
224
- &:focus {
225
- @apply ax-bg-warning-100 ax-text-warning-700;
226
- }
227
- &:active {
228
- @apply ax-bg-warning-200 ax-text-warning-700;
251
+ @apply ax-bg-warning-100 ax-text-warning-500 ax-border-transparent;
252
+ &:not(.ax-state-disabled) {
253
+ &:hover,
254
+ &:focus {
255
+ @apply ax-bg-warning-200 ax-text-warning-700;
256
+ }
257
+ &:active {
258
+ @apply ax-bg-warning-300 ax-text-warning-700;
259
+ }
229
260
  }
261
+
230
262
  &.ax-state-selected {
231
263
  @apply ax-bg-warning-200 ax-text-warning-700;
232
264
  }
233
265
  }
234
266
  &.ax-danger-twotone {
235
- @apply ax-bg-danger-50 ax-text-danger-500 ax-border-transparent;
236
- &:hover,
237
- &:focus {
238
- @apply ax-bg-danger-100 ax-text-danger-700;
239
- }
240
- &:active {
241
- @apply ax-bg-danger-200 ax-text-danger-700;
267
+ @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent;
268
+ &:not(.ax-state-disabled) {
269
+ &:hover,
270
+ &:focus {
271
+ @apply ax-bg-danger-200 ax-text-danger-700;
272
+ }
273
+ &:active {
274
+ @apply ax-bg-danger-300 ax-text-danger-700;
275
+ }
242
276
  }
277
+
243
278
  &.ax-state-selected {
244
279
  @apply ax-bg-danger-200 ax-text-danger-700;
245
280
  }
246
281
  }
247
282
  &.ax-success-twotone {
248
- @apply ax-bg-success-50 ax-text-success-500 ax-border-transparent;
249
- &:hover,
250
- &:focus {
251
- @apply ax-bg-success-100 ax-text-success-700;
252
- }
253
- &:active {
254
- @apply ax-bg-success-200 ax-text-success-700;
283
+ @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent;
284
+ &:not(.ax-state-disabled) {
285
+ &:hover,
286
+ &:focus {
287
+ @apply ax-bg-success-200 ax-text-success-700;
288
+ }
289
+ &:active {
290
+ @apply ax-bg-success-300 ax-text-success-700;
291
+ }
255
292
  }
293
+
256
294
  &.ax-state-selected {
257
295
  @apply ax-bg-success-200 ax-text-success-700;
258
296
  }
259
297
  }
260
298
  &.ax-info-twotone {
261
- @apply ax-bg-info-50 ax-text-info-500 ax-border-transparent;
262
- &:hover,
263
- &:focus {
264
- @apply ax-bg-info-100 ax-text-primary-700;
265
- }
266
- &:active {
267
- @apply ax-bg-info-200 ax-text-primary-700;
299
+ @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent;
300
+ &:not(.ax-state-disabled) {
301
+ &:hover,
302
+ &:focus {
303
+ @apply ax-bg-info-200 ax-text-primary-700;
304
+ }
305
+ &:active {
306
+ @apply ax-bg-info-300 ax-text-primary-700;
307
+ }
268
308
  }
309
+
269
310
  &.ax-state-selected {
270
311
  @apply ax-bg-info-200 ax-text-primary-700;
271
312
  }
272
313
  }
273
314
  &.ax-dark-twotone {
274
- @apply ax-bg-dark-300 ax-text-dark-fore ax-border-transparent;
275
- &:hover {}
276
- &:focus {
277
- @apply ax-bg-dark-100;
278
- }
279
- &:active {
280
- @apply ax-bg-dark-200;
281
- }
282
- &.ax-state-selected {
283
- @apply ax-bg-dark-300 ax-text-dark-fore;
315
+ @apply ax-bg-dark-100 ax-text-dark ax-border-transparent;
316
+ &:not(.ax-state-disabled) {
317
+ &:hover {
318
+ }
319
+ &:focus {
320
+ @apply ax-bg-dark-200 ax-text-dark-700;
321
+ }
322
+ &:active {
323
+ @apply ax-bg-dark-300 ax-text-dark-700;
324
+ }
325
+ &.ax-state-selected {
326
+ @apply ax-bg-dark-300 ax-text-dark-fore;
327
+ }
284
328
  }
285
329
  }
286
330
  &.ax-light-twotone {
287
331
  @apply ax-bg-light-200 ax-text-light-fore ax-border-transparent;
288
- &:hover {
289
- @apply ax-bg-light-300;
290
- }
291
- &:focus {
292
- @apply ax-bg-light-200;
293
- }
294
- &:active {
295
- @apply ax-bg-light-300;
332
+ &:not(.ax-state-disabled) {
333
+ &:hover {
334
+ @apply ax-bg-light-300;
335
+ }
336
+ &:focus {
337
+ @apply ax-bg-light-200;
338
+ }
339
+ &:active {
340
+ @apply ax-bg-light-300;
341
+ }
296
342
  }
343
+
297
344
  &.ax-state-selected {
298
345
  @apply ax-bg-light-400;
299
346
  }
@@ -301,106 +348,130 @@
301
348
  // outline
302
349
  &.ax-primary-outline {
303
350
  @apply ax-bg-transparent ax-text-primary-500 ax-border-primary-500;
304
- &:hover,
305
- &:focus {
306
- @apply ax-bg-primary ax-border-primary ax-text-primary-fore;
307
- }
308
- &:active {
309
- @apply ax-bg-primary-700 ax-border-primary-700 ax-text-primary-fore;
351
+ &:not(.ax-state-disabled) {
352
+ &:hover,
353
+ &:focus {
354
+ @apply ax-bg-primary ax-border-primary ax-text-primary-fore;
355
+ }
356
+ &:active {
357
+ @apply ax-bg-primary-700 ax-border-primary-700 ax-text-primary-fore;
358
+ }
310
359
  }
360
+
311
361
  &.ax-state-selected {
312
362
  @apply ax-bg-primary ax-text-primary-fore;
313
363
  }
314
364
  }
315
365
  &.ax-secondary-outline {
316
366
  @apply ax-bg-transparent ax-text-secondary-500 ax-border-secondary-500;
317
- &:hover,
318
- &:focus {
319
- @apply ax-bg-secondary ax-border-secondary ax-text-secondary-fore;
320
- }
321
- &:active {
322
- @apply ax-bg-secondary-700 ax-border-secondary-700 ax-text-primary-fore;
367
+ &:not(.ax-state-disabled) {
368
+ &:hover,
369
+ &:focus {
370
+ @apply ax-bg-secondary ax-border-secondary ax-text-secondary-fore;
371
+ }
372
+ &:active {
373
+ @apply ax-bg-secondary-700 ax-border-secondary-700 ax-text-primary-fore;
374
+ }
323
375
  }
376
+
324
377
  &.ax-state-selected {
325
378
  @apply ax-bg-secondary ax-text-secondary-fore;
326
379
  }
327
380
  }
328
381
  &.ax-warning-outline {
329
382
  @apply ax-bg-transparent ax-text-warning-500 ax-border-warning-500;
330
- &:hover,
331
- &:focus {
332
- @apply ax-bg-warning ax-border-warning ax-text-warning-fore;
333
- }
334
- &:active {
335
- @apply ax-bg-warning-700 ax-border-warning-700 ax-text-primary-fore;
383
+ &:not(.ax-state-disabled) {
384
+ &:hover,
385
+ &:focus {
386
+ @apply ax-bg-warning ax-border-warning ax-text-warning-fore;
387
+ }
388
+ &:active {
389
+ @apply ax-bg-warning-700 ax-border-warning-700 ax-text-primary-fore;
390
+ }
336
391
  }
392
+
337
393
  &.ax-state-selected {
338
394
  @apply ax-bg-warning ax-text-warning-fore;
339
395
  }
340
396
  }
341
397
  &.ax-danger-outline {
342
398
  @apply ax-bg-transparent ax-text-danger-500 ax-border-danger-500;
343
- &:hover,
344
- &:focus {
345
- @apply ax-bg-danger ax-border-danger ax-text-danger-fore;
346
- }
347
- &:active {
348
- @apply ax-bg-danger-700 ax-border-danger-700 ax-text-primary-fore;
399
+ &:not(.ax-state-disabled) {
400
+ &:hover,
401
+ &:focus {
402
+ @apply ax-bg-danger ax-border-danger ax-text-danger-fore;
403
+ }
404
+ &:active {
405
+ @apply ax-bg-danger-700 ax-border-danger-700 ax-text-primary-fore;
406
+ }
349
407
  }
408
+
350
409
  &.ax-state-selected {
351
410
  @apply ax-bg-danger ax-text-danger-fore;
352
411
  }
353
412
  }
354
413
  &.ax-success-outline {
355
414
  @apply ax-bg-transparent ax-text-success-500 ax-border-success-500;
356
- &:hover,
357
- &:focus {
358
- @apply ax-bg-success ax-border-success ax-text-success-fore;
359
- }
360
- &:active {
361
- @apply ax-bg-success-700 ax-border-success-700 ax-text-success-fore;
415
+ &:not(.ax-state-disabled) {
416
+ &:hover,
417
+ &:focus {
418
+ @apply ax-bg-success ax-border-success ax-text-success-fore;
419
+ }
420
+ &:active {
421
+ @apply ax-bg-success-700 ax-border-success-700 ax-text-success-fore;
422
+ }
362
423
  }
424
+
363
425
  &.ax-state-selected {
364
426
  @apply ax-bg-success ax-text-success-fore;
365
427
  }
366
428
  }
367
429
  &.ax-info-outline {
368
430
  @apply ax-bg-transparent ax-text-info-500 ax-border-info-500;
369
- &:hover,
370
- &:focus {
371
- @apply ax-bg-info ax-border-info ax-text-info-fore;
372
- }
373
- &:active {
374
- @apply ax-bg-info-700 ax-border-info-700 ax-text-info-fore;
431
+ &:not(.ax-state-disabled) {
432
+ &:hover,
433
+ &:focus {
434
+ @apply ax-bg-info ax-border-info ax-text-info-fore;
435
+ }
436
+ &:active {
437
+ @apply ax-bg-info-700 ax-border-info-700 ax-text-info-fore;
438
+ }
375
439
  }
440
+
376
441
  &.ax-state-selected {
377
442
  @apply ax-bg-info ax-text-info-fore;
378
443
  }
379
444
  }
380
445
  &.ax-dark-outline {
381
- @apply ax-bg-transparent ax-text-dark-500 ax-border-dark-500;
382
- &:hover {
383
- @apply ax-bg-dark-50 ax-border-dark ax-text-dark;
384
- }
385
- &:focus {
386
- @apply ax-bg-dark-500 ax-border-dark-500 ax-text-dark-fore;
387
- }
388
- &:active {
389
- @apply ax-bg-dark-700 ax-border-dark-700 ax-text-dark-fore;
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;
447
+ &:not(.ax-state-disabled) {
448
+ &:hover {
449
+ @apply ax-bg-dark-50 ax-border-dark ax-text-dark;
450
+ }
451
+ &:focus {
452
+ @apply ax-bg-dark-500 ax-border-dark-500 ax-text-dark-fore;
453
+ }
454
+ &:active {
455
+ @apply ax-bg-dark-700 ax-border-dark-700 ax-text-dark-fore;
456
+ }
390
457
  }
458
+
391
459
  &.ax-state-selected {
392
460
  @apply ax-bg-dark ax-text-dark-fore;
393
461
  }
394
462
  }
395
463
  &.ax-light-outline {
396
- @apply ax-bg-transparent ax-text-light-fore ax-border-light-200;
397
- &:hover,
398
- &:focus {
399
- @apply ax-bg-light-200 ax-border-light-200 ax-text-light-fore;
400
- }
401
- &:active {
402
- @apply ax-bg-light-300 ax-border-light-300 ax-text-light-fore;
464
+ @apply ax-bg-transparent ax-text-light-fore ax-border-light-300 dark:ax-text-light-200;
465
+ &:not(.ax-state-disabled) {
466
+ &:hover,
467
+ &:focus {
468
+ @apply ax-bg-light-200 ax-border-light-300 ax-text-light-fore;
469
+ }
470
+ &:active {
471
+ @apply ax-bg-light-300 ax-border-light-300 ax-text-light-fore;
472
+ }
403
473
  }
474
+
404
475
  &.ax-state-selected {
405
476
  @apply ax-bg-light-300 ax-text-light-fore;
406
477
  }
@@ -408,104 +479,128 @@
408
479
  // blank
409
480
  &.ax-primary-blank {
410
481
  @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
411
- &:hover,
412
- &:focus {
413
- @apply ax-bg-primary-50 ax-text-primary-600;
414
- }
415
- &:active {
416
- @apply ax-bg-primary-100 ax-text-primary-700;
482
+ &:not(.ax-state-disabled) {
483
+ &:hover,
484
+ &:focus {
485
+ @apply ax-bg-primary-50 ax-text-primary-600 dark:ax-bg-transparent;
486
+ }
487
+ &:active {
488
+ @apply ax-bg-primary-100 ax-text-primary-700;
489
+ }
417
490
  }
491
+
418
492
  &.ax-state-selected {
419
493
  @apply ax-bg-primary-200;
420
494
  }
421
495
  }
422
496
  &.ax-secondary-blank {
423
497
  @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
424
- &:hover,
425
- &:focus {
426
- @apply ax-bg-secondary-50 ax-text-secondary-600;
427
- }
428
- &:active {
429
- @apply ax-bg-secondary-100 ax-text-secondary-700;
498
+ &:not(.ax-state-disabled) {
499
+ &:hover,
500
+ &:focus {
501
+ @apply ax-bg-secondary-50 ax-text-secondary-600 dark:ax-bg-transparent;
502
+ }
503
+ &:active {
504
+ @apply ax-bg-secondary-100 ax-text-secondary-700;
505
+ }
430
506
  }
507
+
431
508
  &.ax-state-selected {
432
509
  @apply ax-bg-secondary-200;
433
510
  }
434
511
  }
435
512
  &.ax-warning-blank {
436
513
  @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
437
- &:hover,
438
- &:focus {
439
- @apply ax-bg-warning-50 ax-text-warning-600;
440
- }
441
- &:active {
442
- @apply ax-bg-warning-100 ax-text-warning-700;
514
+ &:not(.ax-state-disabled) {
515
+ &:hover,
516
+ &:focus {
517
+ @apply ax-bg-warning-50 ax-text-warning-600 dark:ax-bg-transparent;
518
+ }
519
+ &:active {
520
+ @apply ax-bg-warning-100 ax-text-warning-700;
521
+ }
443
522
  }
523
+
444
524
  &.ax-state-selected {
445
525
  @apply ax-bg-warning-200;
446
526
  }
447
527
  }
448
528
  &.ax-danger-blank {
449
529
  @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
450
- &:hover,
451
- &:focus {
452
- @apply ax-bg-danger-50 ax-text-danger-600;
453
- }
454
- &:active {
455
- @apply ax-bg-danger-100 ax-text-danger-700;
530
+ &:not(.ax-state-disabled) {
531
+ &:hover,
532
+ &:focus {
533
+ @apply ax-bg-danger-50 ax-text-danger-600 dark:ax-bg-transparent;
534
+ }
535
+ &:active {
536
+ @apply ax-bg-danger-100 ax-text-danger-700;
537
+ }
456
538
  }
539
+
457
540
  &.ax-state-selected {
458
541
  @apply ax-bg-danger-200;
459
542
  }
460
543
  }
461
544
  &.ax-success-blank {
462
545
  @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
463
- &:hover,
464
- &:focus {
465
- @apply ax-bg-success-50 ax-text-success-600;
466
- }
467
- &:active {
468
- @apply ax-bg-success-100 ax-text-success-700;
546
+ &:not(.ax-state-disabled) {
547
+ &:hover,
548
+ &:focus {
549
+ @apply ax-bg-success-50 ax-text-success-600 dark:ax-bg-transparent;
550
+ }
551
+ &:active {
552
+ @apply ax-bg-success-100 ax-text-success-700;
553
+ }
469
554
  }
555
+
470
556
  &.ax-state-selected {
471
557
  @apply ax-bg-success-200;
472
558
  }
473
559
  }
474
560
  &.ax-info-blank {
475
561
  @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
476
- &:hover,
477
- &:focus {
478
- @apply ax-bg-info-50 ax-text-info-600;
479
- }
480
- &:active {
481
- @apply ax-bg-info-100 ax-text-info-700;
562
+ &:not(.ax-state-disabled) {
563
+ &:hover,
564
+ &:focus {
565
+ @apply ax-bg-info-50 ax-text-info-600 dark:ax-bg-transparent;
566
+ }
567
+ &:active {
568
+ @apply ax-bg-info-100 ax-text-info-700;
569
+ }
482
570
  }
571
+
483
572
  &.ax-state-selected {
484
573
  @apply ax-bg-info-200;
485
574
  }
486
575
  }
487
576
  &.ax-dark-blank {
488
- @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent;
489
- &:hover,
490
- &:focus {
491
- @apply ax-bg-dark-400 ax-text-dark-fore;
492
- }
493
- &:active {
494
- @apply ax-bg-dark-600 ax-text-dark-fore;
577
+ @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent dark:ax-text-dark-50;
578
+ &:not(.ax-state-disabled) {
579
+ &:hover,
580
+ &:focus {
581
+ @apply ax-bg-dark-400 ax-text-dark-fore dark:ax-bg-transparent dark:ax-text-dark-100;
582
+ }
583
+ &:active {
584
+ @apply ax-bg-dark-600 ax-text-dark-fore dark:ax-text-dark-50;
585
+ }
495
586
  }
587
+
496
588
  &.ax-state-selected {
497
589
  @apply ax-bg-dark-200;
498
590
  }
499
591
  }
500
592
  &.ax-light-blank {
501
- @apply ax-bg-transparent ax-text-light-fore ax-border-transparent;
502
- &:hover,
503
- &:focus {
504
- @apply ax-bg-light-100 ax-text-light-500;
505
- }
506
- &:active {
507
- @apply ax-bg-light-200 ax-text-light-700;
593
+ @apply ax-bg-transparent ax-text-light-400 ax-border-transparent dark:ax-text-light-300;
594
+ &:not(.ax-state-disabled) {
595
+ &:hover,
596
+ &:focus {
597
+ @apply ax-bg-light-100 ax-text-light-500 dark:ax-bg-transparent dark:ax-text-light-500;
598
+ }
599
+ &:active {
600
+ @apply ax-bg-light-200 ax-text-light-700 dark:ax-text-light-300;
601
+ }
508
602
  }
603
+
509
604
  &.ax-state-selected {
510
605
  @apply ax-bg-light-600;
511
606
  }
@@ -513,106 +608,130 @@
513
608
  // link
514
609
  &.ax-primary-link {
515
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;
516
- &:hover,
517
- &:focus {
518
- @apply ax-text-primary-600 ax-border-primary-600;
519
- }
520
- &:active {
521
- @apply ax-text-primary-500 ax-border-primary-500;
611
+ &:not(.ax-state-disabled) {
612
+ &:hover,
613
+ &:focus {
614
+ @apply ax-text-primary-600 ax-border-primary-600;
615
+ }
616
+ &:active {
617
+ @apply ax-text-primary-500 ax-border-primary-500;
618
+ }
522
619
  }
620
+
523
621
  &.ax-state-selected {
524
622
  @apply ax-bg-primary-200;
525
623
  }
526
624
  }
527
625
  &.ax-secondary-link {
528
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;
529
- &:hover,
530
- &:focus {
531
- @apply ax-text-secondary-600 ax-border-secondary-600;
532
- }
533
- &:active {
534
- @apply ax-text-secondary-500 ax-border-secondary-500;
627
+ &:not(.ax-state-disabled) {
628
+ &:hover,
629
+ &:focus {
630
+ @apply ax-text-secondary-600 ax-border-secondary-600;
631
+ }
632
+ &:active {
633
+ @apply ax-text-secondary-500 ax-border-secondary-500;
634
+ }
535
635
  }
636
+
536
637
  &.ax-state-selected {
537
638
  @apply ax-bg-secondary-200;
538
639
  }
539
640
  }
540
641
  &.ax-warning-link {
541
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;
542
- &:hover,
543
- &:focus {
544
- @apply ax-text-warning-600 ax-border-warning-600;
545
- }
546
- &:active {
547
- @apply ax-text-warning-500 ax-border-warning-500;
643
+ &:not(.ax-state-disabled) {
644
+ &:hover,
645
+ &:focus {
646
+ @apply ax-text-warning-600 ax-border-warning-600;
647
+ }
648
+ &:active {
649
+ @apply ax-text-warning-500 ax-border-warning-500;
650
+ }
548
651
  }
652
+
549
653
  &.ax-state-selected {
550
654
  @apply ax-bg-warning-200;
551
655
  }
552
656
  }
553
657
  &.ax-danger-link {
554
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;
555
- &:hover,
556
- &:focus {
557
- @apply ax-text-danger-600 ax-border-danger-600;
558
- }
559
- &:active {
560
- @apply ax-text-danger-500 ax-border-danger-500;
659
+ &:not(.ax-state-disabled) {
660
+ &:hover,
661
+ &:focus {
662
+ @apply ax-text-danger-600 ax-border-danger-600;
663
+ }
664
+ &:active {
665
+ @apply ax-text-danger-500 ax-border-danger-500;
666
+ }
561
667
  }
668
+
562
669
  &.ax-state-selected {
563
670
  @apply ax-bg-danger-200;
564
671
  }
565
672
  }
566
673
  &.ax-success-link {
567
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;
568
- &:hover,
569
- &:focus {
570
- @apply ax-text-success-600 ax-border-success-600;
571
- }
572
- &:active {
573
- @apply ax-text-success-500 ax-border-success-500;
675
+ &:not(.ax-state-disabled) {
676
+ &:hover,
677
+ &:focus {
678
+ @apply ax-text-success-600 ax-border-success-600;
679
+ }
680
+ &:active {
681
+ @apply ax-text-success-500 ax-border-success-500;
682
+ }
574
683
  }
684
+
575
685
  &.ax-state-selected {
576
686
  @apply ax-bg-success-200;
577
687
  }
578
688
  }
579
689
  &.ax-info-link {
580
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;
581
- &:hover,
582
- &:focus {
583
- @apply ax-text-info-600 ax-border-info-600;
584
- }
585
- &:active {
586
- @apply ax-text-info-500 ax-border-info-500;
691
+ &:not(.ax-state-disabled) {
692
+ &:hover,
693
+ &:focus {
694
+ @apply ax-text-info-600 ax-border-info-600;
695
+ }
696
+ &:active {
697
+ @apply ax-text-info-500 ax-border-info-500;
698
+ }
587
699
  }
700
+
588
701
  &.ax-state-selected {
589
702
  @apply ax-bg-info-200;
590
703
  }
591
704
  }
592
705
  &.ax-dark-link {
593
- @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;
594
- &:hover,
595
- &:focus {
596
- @apply ax-text-dark-600 ax-border-dark-600;
597
- }
598
- &:active {
599
- @apply ax-text-dark-300 ax-border-dark-300;
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;
707
+ &:not(.ax-state-disabled) {
708
+ &:hover,
709
+ &:focus {
710
+ @apply ax-text-dark-600 ax-border-dark-600 dark:ax-border-dark-300 dark:ax-text-dark-300;
711
+ }
712
+ &:active {
713
+ @apply ax-text-dark-300 ax-border-dark-300 dark:ax-border-dark-100 dark:ax-text-dark-100;
714
+ }
600
715
  }
716
+
601
717
  &.ax-state-selected {
602
718
  @apply ax-bg-dark-200;
603
719
  }
604
720
  }
605
721
  &.ax-light-link {
606
- @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;
607
- &:hover {
608
- @apply ax-text-light-300 ax-border-light-300;
609
- }
610
- &:focus {
611
- @apply ax-text-light-500 ax-border-light-500;
612
- }
613
- &:active {
614
- @apply ax-text-light-600 ax-border-light-600;
722
+ @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;
723
+ &:not(.ax-state-disabled) {
724
+ &:hover {
725
+ @apply ax-text-light-300 ax-border-light-300;
726
+ }
727
+ &:focus {
728
+ @apply ax-text-light-500 ax-border-y-light-500;
729
+ }
730
+ &:active {
731
+ @apply ax-text-light-600 ax-border-light-600;
732
+ }
615
733
  }
734
+
616
735
  &.ax-state-selected {
617
736
  @apply ax-bg-light-600;
618
737
  }
@@ -639,4 +758,4 @@
639
758
  }
640
759
  }
641
760
  }
642
- }
761
+ }