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