@acorex/styles 5.7.0 → 5.8.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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/_alert.scss +310 -28
  3. package/src/components/_button.scss +151 -116
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "5.7.0",
3
+ "version": "5.8.0",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/components/_alert.scss CHANGED
@@ -15,7 +15,6 @@
15
15
 
16
16
  ax-header {
17
17
  @apply ax-flex ax-px-3.5 ax-items-center ax-py-3 ax-bg-transparent ax-border-none ax-justify-start;
18
-
19
18
  ax-icon {
20
19
  @apply ax-text-2xl;
21
20
  }
@@ -23,13 +22,15 @@
23
22
 
24
23
  .ax-alert-body {
25
24
  @apply ax-flex-1 ax-p-3.5;
26
-
27
25
  ax-icon {
28
26
  @apply ax-me-3 ax-text-2xl;
29
27
  }
30
-
28
+ ax-button {
29
+ --ax-base-size: 6px;
30
+ @apply ax-ring-offset-0 #{!important};
31
+ }
31
32
  ax-content {
32
- @apply ax-flex ax-items-center ax-break-words;
33
+ @apply ax-flex ax-items-center ax-break-words ax-whitespace-pre;
33
34
 
34
35
  ul {
35
36
  @apply ax-my-2 ax-ms-5 ax-list-disc;
@@ -45,11 +46,10 @@
45
46
  }
46
47
 
47
48
  ax-suffix {
48
- --ax-base-size: 6px;
49
49
  @apply ax-block;
50
50
 
51
51
  ax-button {
52
- @apply ax-ring-offset-0 ax-ms-2 #{!important};
52
+ @apply ax-ms-2 #{!important};
53
53
  }
54
54
  }
55
55
 
@@ -58,8 +58,6 @@
58
58
 
59
59
  ax-suffix {
60
60
  ax-button {
61
- --ax-base-size: 6px;
62
-
63
61
  @apply ax-ms-0 ax-me-2 #{!important};
64
62
  }
65
63
 
@@ -68,45 +66,329 @@
68
66
  }
69
67
  }
70
68
 
71
- &.ax-light-default {
72
- ax-header {
73
- @apply ax-bg-light-200;
69
+ .ax-alert-progress {
70
+ @apply ax-absolute ax-start-0 ax-bottom-0 ax-h-1.5 ax-w-0;
71
+ animation-duration: 4s;
72
+ animation-timing-function: linear;
73
+ animation-name: progressBar;
74
+ }
75
+
76
+ @keyframes progressBar {
77
+ 0% {
78
+ width: 100%;
74
79
  }
75
80
 
76
- .ax-alert-body {
77
- @apply ax-bg-light-200;
81
+ 100% {
82
+ width: 0%;
78
83
  }
84
+ }
85
+
86
+ // @include button-on-colorful-bg();
79
87
 
88
+ // @include color-look-generator();
89
+
90
+ // primary
91
+ &.ax-primary-default {
92
+ @apply ax-bg-primary-500 ax-text-primary-fore dark:ax-bg-primary-800 dark:ax-text-primary-100;
93
+ ax-header {
94
+ @apply ax-bg-primary-600;
95
+ }
96
+ .ax-alert-progress {
97
+ @apply ax-bg-primary-800 dark:ax-bg-primary-500;
98
+ }
99
+ }
100
+ &.ax-primary-twotone {
101
+ @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-800 dark:ax-text-primary-100;
102
+ ax-header {
103
+ @apply ax-bg-primary-200 dark:ax-bg-primary-600;
104
+ }
80
105
  .ax-alert-progress {
81
- @apply ax-absolute ax-bg-light-400;
106
+ @apply ax-bg-primary-300 dark:ax-bg-primary-500;
107
+ }
108
+ }
109
+ &.ax-primary-outline {
110
+ @apply ax-bg-transparent ax-text-primary-500 ax-border ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
111
+ ax-header {
112
+ @apply ax-bg-primary-100 dark:ax-bg-transparent;
113
+ }
114
+ .ax-alert-progress {
115
+ @apply ax-bg-primary-500 ax-h-1 dark:ax-bg-primary-400;
116
+ }
117
+ }
118
+ &.ax-primary-blank {
119
+ @apply ax-bg-transparent ax-text-primary-500 dark:ax-text-primary-300 ax-rounded-none;
120
+ ax-header {
121
+ @apply ax-border-b ax-border-solid ax-border-primary-200 dark:ax-border-primary-800;
122
+ }
123
+ .ax-alert-progress {
124
+ @apply ax-bg-primary-200 dark:ax-bg-primary-800;
82
125
  }
83
126
  }
84
127
 
85
- &[class*="dark"] {
128
+ // secondary
129
+ &.ax-secondary-default {
130
+ @apply ax-bg-secondary-500 ax-text-secondary-fore dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
131
+ ax-header {
132
+ @apply ax-bg-secondary-600;
133
+ }
134
+ .ax-alert-progress {
135
+ @apply ax-bg-secondary-800 dark:ax-bg-secondary-500;
136
+ }
137
+ }
138
+ &.ax-secondary-twotone {
139
+ @apply ax-bg-secondary-100 ax-text-secondary-500 dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
140
+ ax-header {
141
+ @apply ax-bg-secondary-200 dark:ax-bg-secondary-600;
142
+ }
143
+ .ax-alert-progress {
144
+ @apply ax-bg-secondary-300 dark:ax-bg-secondary-500;
145
+ }
146
+ }
147
+ &.ax-secondary-outline {
148
+ @apply ax-bg-transparent ax-text-secondary-500 ax-border ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
149
+ ax-header {
150
+ @apply ax-bg-secondary-100 dark:ax-bg-transparent;
151
+ }
152
+ .ax-alert-progress {
153
+ @apply ax-bg-secondary-500 ax-h-1 dark:ax-bg-secondary-400;
154
+ }
155
+ }
156
+ &.ax-secondary-blank {
157
+ @apply ax-bg-transparent ax-text-secondary-500 dark:ax-text-secondary-300 ax-rounded-none;
158
+ ax-header {
159
+ @apply ax-border-b ax-border-solid ax-border-secondary-200 dark:ax-border-secondary-800;
160
+ }
86
161
  .ax-alert-progress {
87
- @apply ax-bg-white/50 #{!important};
162
+ @apply ax-bg-secondary-200 dark:ax-bg-secondary-800;
88
163
  }
89
164
  }
90
165
 
91
- .ax-alert-progress {
92
- @apply ax-absolute ax-start-0 ax-bottom-0 ax-h-1.5 ax-w-0;
93
- animation-duration: 4s;
94
- animation-timing-function: linear;
95
- animation-name: progressBar;
166
+ // success
167
+ &.ax-success-default {
168
+ @apply ax-bg-success-500 ax-text-success-fore dark:ax-bg-success-800 dark:ax-text-success-100;
169
+ ax-header {
170
+ @apply ax-bg-success-600;
171
+ }
172
+ .ax-alert-progress {
173
+ @apply ax-bg-success-800 dark:ax-bg-success-500;
174
+ }
175
+ }
176
+ &.ax-success-twotone {
177
+ @apply ax-bg-success-100 ax-text-success-500 dark:ax-bg-success-800 dark:ax-text-success-100;
178
+ ax-header {
179
+ @apply ax-bg-success-200 dark:ax-bg-success-600;
180
+ }
181
+ .ax-alert-progress {
182
+ @apply ax-bg-success-300 dark:ax-bg-success-500;
183
+ }
184
+ }
185
+ &.ax-success-outline {
186
+ @apply ax-bg-transparent ax-text-success-500 ax-border ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
187
+ ax-header {
188
+ @apply ax-bg-success-100 dark:ax-bg-transparent;
189
+ }
190
+ .ax-alert-progress {
191
+ @apply ax-bg-success-500 ax-h-1 dark:ax-bg-success-400;
192
+ }
193
+ }
194
+ &.ax-success-blank {
195
+ @apply ax-bg-transparent ax-text-success-500 dark:ax-text-success-300 ax-rounded-none;
196
+ ax-header {
197
+ @apply ax-border-b ax-border-solid ax-border-success-200 dark:ax-border-success-800;
198
+ }
199
+ .ax-alert-progress {
200
+ @apply ax-bg-success-200 dark:ax-bg-success-800;
201
+ }
96
202
  }
97
203
 
98
- @keyframes progressBar {
99
- 0% {
100
- width: 100%;
204
+ // warning
205
+ &.ax-warning-default {
206
+ @apply ax-bg-warning-800 ax-text-warning-fore dark:ax-bg-warning-800;
207
+ ax-header {
208
+ @apply ax-bg-warning-600;
209
+ }
210
+ .ax-alert-progress {
211
+ @apply ax-bg-warning-800 dark:ax-bg-warning-500;
212
+ }
213
+ }
214
+ &.ax-warning-twotone {
215
+ @apply ax-bg-warning-100 ax-text-warning-900 dark:ax-bg-warning-800 dark:ax-text-warning-fore;
216
+ ax-header {
217
+ @apply ax-bg-warning-200 dark:ax-bg-warning-600;
218
+ }
219
+ .ax-alert-progress {
220
+ @apply ax-bg-warning-300 dark:ax-bg-warning-500;
101
221
  }
222
+
223
+ }
224
+ &.ax-warning-outline {
225
+ @apply ax-bg-transparent ax-text-warning-900 ax-border ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
226
+ ax-header {
227
+ @apply ax-bg-warning-100 dark:ax-bg-transparent;
228
+ }
229
+ .ax-alert-progress {
230
+ @apply ax-bg-warning-500 ax-h-1 dark:ax-bg-warning-400;
231
+ }
232
+ }
233
+ &.ax-warning-blank {
234
+ @apply ax-bg-transparent ax-text-warning-500 dark:ax-text-warning-300 ax-rounded-none;
235
+ ax-header {
236
+ @apply ax-border-b ax-border-solid ax-border-warning-200 dark:ax-border-warning-800;
237
+ }
238
+ .ax-alert-progress {
239
+ @apply ax-bg-warning-200 dark:ax-bg-warning-800;
240
+ }
241
+ }
102
242
 
103
- 100% {
104
- width: 0%;
243
+ // danger
244
+ &.ax-danger-default {
245
+ @apply ax-bg-danger-500 ax-text-danger-fore dark:ax-bg-danger-800 dark:ax-text-danger-100;
246
+ ax-header {
247
+ @apply ax-bg-danger-600;
248
+ }
249
+ .ax-alert-progress {
250
+ @apply ax-bg-danger-800 dark:ax-bg-danger-500;
251
+ }
252
+ }
253
+ &.ax-danger-twotone {
254
+ @apply ax-bg-danger-100 ax-text-danger-500 dark:ax-bg-danger-800 dark:ax-text-danger-100;
255
+ ax-header {
256
+ @apply ax-bg-danger-200 dark:ax-bg-danger-600;
257
+ }
258
+ .ax-alert-progress {
259
+ @apply ax-bg-danger-300 dark:ax-bg-danger-500;
260
+ }
261
+ }
262
+ &.ax-danger-outline {
263
+ @apply ax-bg-transparent ax-text-danger-500 ax-border ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
264
+ ax-header {
265
+ @apply ax-bg-danger-100 dark:ax-bg-transparent;
266
+ }
267
+ .ax-alert-progress {
268
+ @apply ax-bg-danger-500 ax-h-1 dark:ax-bg-danger-400;
269
+ }
270
+ }
271
+ &.ax-danger-blank {
272
+ @apply ax-bg-transparent ax-text-danger-500 dark:ax-text-danger-300 ax-rounded-none;
273
+ ax-header {
274
+ @apply ax-border-b ax-border-solid ax-border-danger-200 dark:ax-border-danger-800;
275
+ }
276
+ .ax-alert-progress {
277
+ @apply ax-bg-danger-200 dark:ax-bg-danger-800;
105
278
  }
106
279
  }
107
280
 
108
- // @include button-on-colorful-bg();
281
+ // info
282
+ &.ax-info-default {
283
+ @apply ax-bg-info-500 ax-text-info-fore dark:ax-bg-info-800 dark:ax-text-info-100;
284
+ ax-header {
285
+ @apply ax-bg-info-600;
286
+ }
287
+ .ax-alert-progress {
288
+ @apply ax-bg-info-800 dark:ax-bg-info-500;
289
+ }
290
+ }
291
+ &.ax-info-twotone {
292
+ @apply ax-bg-info-100 ax-text-info-500 dark:ax-bg-info-800 dark:ax-text-info-100;
293
+ ax-header {
294
+ @apply ax-bg-info-200 dark:ax-bg-info-600;
295
+ }
296
+ .ax-alert-progress {
297
+ @apply ax-bg-info-300 dark:ax-bg-info-500;
298
+ }
299
+ }
300
+ &.ax-info-outline {
301
+ @apply ax-bg-transparent ax-text-info-500 ax-border ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
302
+ ax-header {
303
+ @apply ax-bg-info-100 dark:ax-bg-transparent;
304
+ }
305
+ .ax-alert-progress {
306
+ @apply ax-bg-info-500 ax-h-1 dark:ax-bg-info-400;
307
+ }
308
+ }
309
+ &.ax-info-blank {
310
+ @apply ax-bg-transparent ax-text-info-500 dark:ax-text-info-300 ax-rounded-none;
311
+ ax-header {
312
+ @apply ax-border-b ax-border-solid ax-border-info-200 dark:ax-border-info-800;
313
+ }
314
+ .ax-alert-progress {
315
+ @apply ax-bg-info-200 dark:ax-bg-info-800;
316
+ }
317
+ }
109
318
 
110
- @include color-look-generator();
319
+ // light
320
+ &.ax-light-default {
321
+ @apply ax-bg-light-100 dark:ax-bg-light-800 ax-text-light-fore dark:ax-text-light-100 ax-border ax-border-light-200 dark:ax-border-light-900;
322
+ ax-header {
323
+ @apply ax-bg-light-200 dark:ax-bg-light-600 ;
324
+ }
325
+ .ax-alert-progress {
326
+ @apply ax-bg-light-300 dark:ax-bg-light-600;
327
+ }
328
+ }
329
+ &.ax-light-twotone {
330
+ @apply ax-bg-light-100 ax-text-light-500 dark:ax-bg-light-800 dark:ax-text-light-100;
331
+ ax-header {
332
+ @apply ax-bg-light-200 dark:ax-bg-light-600 ;
333
+ }
334
+ .ax-alert-progress {
335
+ @apply ax-bg-light-300 dark:ax-bg-light-600;
336
+ }
337
+ }
338
+ &.ax-light-outline {
339
+ @apply ax-bg-transparent ax-text-light-500 ax-border ax-border-light-200 dark:ax-border-light-400 dark:ax-text-light-300;
340
+ ax-header {
341
+ @apply ax-bg-light-100;
342
+ }
343
+ .ax-alert-progress {
344
+ @apply ax-bg-light-300;
345
+ }
346
+ }
347
+ &.ax-light-blank {
348
+ @apply ax-bg-transparent ax-text-light-500 dark:ax-text-light-300;
349
+ ax-header {
350
+ @apply ax-border-b ax-border-solid ax-border-light-200 dark:ax-border-light-500;
351
+ }
352
+ .ax-alert-progress {
353
+ @apply ax-bg-light-200 dark:ax-bg-light-500;
354
+ }
355
+ }
356
+ // dark
357
+ &.ax-dark-default {
358
+ @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-800 dark:ax-text-dark-100;
359
+ ax-header {
360
+ @apply ax-bg-dark-600;
361
+ }
362
+ .ax-alert-progress {
363
+ @apply ax-bg-dark-600;
364
+ }
365
+ }
366
+ &.ax-dark-twotone {
367
+ @apply ax-bg-dark-100 ax-text-dark-500 dark:ax-bg-dark-800 dark:ax-text-dark-100;
368
+ ax-header {
369
+ @apply ax-bg-dark-200;
370
+ }
371
+ .ax-alert-progress {
372
+ @apply ax-bg-dark-100;
373
+ }
374
+ }
375
+ &.ax-dark-outline {
376
+ @apply ax-bg-transparent ax-text-dark-500 ax-border ax-border-dark-100 dark:ax-border-dark-400 dark:ax-text-dark-300;
377
+ ax-header {
378
+ @apply ax-bg-dark-50;
379
+ }
380
+ .ax-alert-progress {
381
+ @apply ax-bg-dark-100;
382
+ }
383
+ }
384
+ &.ax-dark-blank {
385
+ @apply ax-bg-transparent ax-text-dark-500 dark:ax-text-dark-100;
386
+ ax-header {
387
+ @apply ax-border-b ax-border-solid ax-border-dark-200 dark:ax-border-dark-200;
388
+ }
389
+ .ax-alert-progress {
390
+ @apply ax-bg-dark-200 dark:ax-bg-dark-200;
391
+ }
392
+ }
111
393
  }
112
394
  }
package/src/components/_button.scss CHANGED
@@ -14,7 +14,6 @@
14
14
  }
15
15
  &:focus {
16
16
  @apply ax-outline-none;
17
- outline: none;
18
17
  }
19
18
  ax-prefix {
20
19
  @apply ax-flex ax-flex-row ax-pe-2;
@@ -72,8 +71,8 @@
72
71
  }
73
72
 
74
73
  // primary
75
- &.ax-primary-normal {
76
- @apply ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
74
+ &.ax-primary-default {
75
+ @apply ax-bg-primary-500 ax-text-primary-fore ax-border-transparent dark:ax-bg-primary-800;
77
76
 
78
77
  &:not(.ax-state-disabled, .ax-state-selected) {
79
78
  &:hover {
@@ -90,21 +89,21 @@
90
89
  }
91
90
  }
92
91
  &.ax-state-selected {
93
- @apply ax-bg-primary-800;
92
+ @apply ax-bg-primary-800 dark:ax-bg-primary-500;
94
93
  }
95
94
  }
96
95
  &.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;
96
+ @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-800 dark:ax-text-primary-100;
98
97
 
99
98
  &:not(.ax-state-disabled, .ax-state-selected) {
100
99
  &:hover,
101
100
  &:focus,
102
101
  &:focus-within {
103
- @apply ax-bg-primary-200 ax-text-primary-700;
102
+ @apply ax-bg-primary-200 ax-text-primary-700 dark:ax-bg-primary-700 dark:ax-text-primary-100;
104
103
  }
105
104
 
106
105
  &:active {
107
- @apply ax-bg-primary-300 ax-text-primary-700;
106
+ @apply ax-bg-primary-300 ax-text-primary-700 dark:ax-bg-primary-500;
108
107
  }
109
108
  }
110
109
  &.ax-state-selected {
@@ -112,17 +111,19 @@
112
111
  }
113
112
  }
114
113
  &.ax-primary-outline {
115
- @apply ax-text-primary-500 ax-border-primary-500;
114
+ @apply ax-text-primary-500 ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
116
115
 
117
116
  &:not(.ax-state-disabled, .ax-state-selected) {
118
- &:hover,
117
+ &:hover {
118
+ @apply ax-border-primary-300 ax-text-primary-300 dark:ax-text-primary-200 dark:ax-border-primary-500;
119
+ }
119
120
  &:focus,
120
121
  &:focus-within {
121
- @apply ax-border-primary-300 ax-text-primary-300;
122
+ @apply ax-border-primary-400 ax-ring-2 ax-text-primary-400 dark:ax-text-primary-200 dark:ax-border-primary-500 ax-ring-primary-100 dark:ax-ring-primary-900;
122
123
  }
123
124
 
124
125
  &:active {
125
- @apply ax-border-primary-600 ax-text-primary-800;
126
+ @apply ax-border-primary-600 ax-text-primary-800 dark:ax-border-primary-400 dark:ax-text-primary-100;
126
127
  }
127
128
  }
128
129
  &.ax-state-selected {
@@ -130,17 +131,19 @@
130
131
  }
131
132
  }
132
133
  &.ax-primary-blank {
133
- @apply ax-text-primary-500 ax-border-transparent;
134
+ @apply ax-text-primary-500 ax-border-transparent dark:ax-text-primary-300;
134
135
 
135
136
  &:not(.ax-state-disabled, .ax-state-selected) {
136
- &:hover,
137
+ &:hover {
138
+ @apply ax-text-primary-600 dark:ax-text-primary-100;
139
+ }
137
140
  &:focus,
138
141
  &:focus-within {
139
- @apply ax-bg-primary-50 ax-text-primary-600 dark:ax-bg-transparent;
142
+ @apply ax-text-primary-700 dark:ax-text-primary-200 ax-ring-2 ax-ring-primary-100 dark:ax-ring-primary-900;
140
143
  }
141
144
 
142
145
  &:active {
143
- @apply ax-bg-primary-100 ax-text-primary-700;
146
+ @apply ax-text-primary-700 ax-ring-0 dark:ax-text-primary-300;
144
147
  }
145
148
  }
146
149
  &.ax-state-selected {
@@ -148,17 +151,19 @@
148
151
  }
149
152
  }
150
153
  &.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;
154
+ @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 dark:ax-border-primary-400 dark:ax-text-primary-300;
152
155
 
153
156
  &:not(.ax-state-disabled, .ax-state-selected) {
154
- &:hover,
157
+ &:hover {
158
+ @apply ax-text-primary-700 ax-border-primary-800 dark:ax-border-primary-200 dark:ax-text-primary-200;
159
+ }
155
160
  &:focus,
156
161
  &:focus-within {
157
- @apply ax-text-primary-800 ax-border-primary-800;
162
+ @apply ax-text-primary-900 dark:ax-text-primary-500 ax-border-primary-800 dark:ax-border-primary-500 ax-ring-2 ax-ring-primary-100 dark:ax-ring-primary-900;
158
163
  }
159
164
 
160
165
  &:active {
161
- @apply ax-text-primary-500 ax-border-primary-500;
166
+ @apply ax-text-primary-500 dark:ax-text-primary-400 ax-border-primary-500 dark:ax-border-primary-400;
162
167
  }
163
168
  }
164
169
  &.ax-state-selected {
@@ -167,8 +172,8 @@
167
172
  }
168
173
 
169
174
  // secondary
170
- &.ax-secondary-normal {
171
- @apply ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent;
175
+ &.ax-secondary-default {
176
+ @apply ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent dark:ax-bg-secondary-800;
172
177
 
173
178
  &:not(.ax-state-disabled, .ax-state-selected) {
174
179
  &:hover {
@@ -185,21 +190,21 @@
185
190
  }
186
191
  }
187
192
  &.ax-state-selected {
188
- @apply ax-bg-secondary-800;
193
+ @apply ax-bg-secondary-800 dark:ax-bg-secondary-500;
189
194
  }
190
195
  }
191
196
  &.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;
197
+ @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
193
198
 
194
199
  &:not(.ax-state-disabled, .ax-state-selected) {
195
200
  &:hover,
196
201
  &:focus,
197
202
  &:focus-within {
198
- @apply ax-bg-secondary-200 ax-text-secondary-700;
203
+ @apply ax-bg-secondary-200 ax-text-secondary-700 dark:ax-bg-secondary-700 dark:ax-text-secondary-100;
199
204
  }
200
205
 
201
206
  &:active {
202
- @apply ax-bg-secondary-300 ax-text-secondary-700;
207
+ @apply ax-bg-secondary-300 ax-text-secondary-700 dark:ax-bg-secondary-500;
203
208
  }
204
209
  }
205
210
  &.ax-state-selected {
@@ -207,17 +212,19 @@
207
212
  }
208
213
  }
209
214
  &.ax-secondary-outline {
210
- @apply ax-text-secondary-500 ax-border-secondary-500;
215
+ @apply ax-text-secondary-500 ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
211
216
 
212
217
  &:not(.ax-state-disabled, .ax-state-selected) {
213
- &:hover,
218
+ &:hover {
219
+ @apply ax-border-secondary-300 ax-text-secondary-300 dark:ax-text-secondary-200 dark:ax-border-secondary-500;
220
+ }
214
221
  &:focus,
215
222
  &:focus-within {
216
- @apply ax-border-secondary-300 ax-text-secondary-300;
223
+ @apply ax-border-secondary-400 ax-ring-2 ax-text-secondary-400 dark:ax-text-secondary-200 dark:ax-border-secondary-500 ax-ring-secondary-100 dark:ax-ring-secondary-900;
217
224
  }
218
225
 
219
226
  &:active {
220
- @apply ax-border-secondary-600 ax-text-secondary-800;
227
+ @apply ax-border-secondary-600 ax-text-secondary-800 dark:ax-border-secondary-400 dark:ax-text-secondary-100;
221
228
  }
222
229
  }
223
230
  &.ax-state-selected {
@@ -225,17 +232,19 @@
225
232
  }
226
233
  }
227
234
  &.ax-secondary-blank {
228
- @apply ax-text-secondary-500 ax-border-transparent;
235
+ @apply ax-text-secondary-500 ax-border-transparent dark:ax-text-secondary-300;
229
236
 
230
237
  &:not(.ax-state-disabled, .ax-state-selected) {
231
- &:hover,
238
+ &:hover {
239
+ @apply ax-text-secondary-600 dark:ax-text-secondary-100;
240
+ }
232
241
  &:focus,
233
242
  &:focus-within {
234
- @apply ax-bg-secondary-50 ax-text-secondary-600 dark:ax-bg-transparent;
243
+ @apply ax-text-secondary-700 dark:ax-text-secondary-200 ax-ring-2 ax-ring-secondary-100 dark:ax-ring-secondary-900;
235
244
  }
236
245
 
237
246
  &:active {
238
- @apply ax-bg-secondary-100 ax-text-secondary-700;
247
+ @apply ax-text-secondary-700 ax-ring-0 dark:ax-text-secondary-300;
239
248
  }
240
249
  }
241
250
  &.ax-state-selected {
@@ -243,17 +252,19 @@
243
252
  }
244
253
  }
245
254
  &.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;
255
+ @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 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
247
256
 
248
257
  &:not(.ax-state-disabled, .ax-state-selected) {
249
- &:hover,
258
+ &:hover {
259
+ @apply ax-text-secondary-700 ax-border-secondary-800 dark:ax-border-secondary-200 dark:ax-text-secondary-200;
260
+ }
250
261
  &:focus,
251
262
  &:focus-within {
252
- @apply ax-text-secondary-800 ax-border-secondary-800;
263
+ @apply ax-text-secondary-900 dark:ax-text-secondary-500 ax-border-secondary-800 dark:ax-border-secondary-500 ax-ring-2 ax-ring-secondary-100 dark:ax-ring-secondary-900;
253
264
  }
254
265
 
255
266
  &:active {
256
- @apply ax-text-secondary-500 ax-border-secondary-500;
267
+ @apply ax-text-secondary-500 dark:ax-text-secondary-400 ax-border-secondary-500 dark:ax-border-secondary-400;
257
268
  }
258
269
  }
259
270
  &.ax-state-selected {
@@ -262,8 +273,8 @@
262
273
  }
263
274
 
264
275
  // success
265
- &.ax-success-normal {
266
- @apply ax-bg-success-500 ax-text-success-fore ax-border-transparent;
276
+ &.ax-success-default {
277
+ @apply ax-bg-success-500 ax-text-success-fore ax-border-transparent dark:ax-bg-success-800;
267
278
 
268
279
  &:not(.ax-state-disabled, .ax-state-selected) {
269
280
  &:hover {
@@ -280,21 +291,21 @@
280
291
  }
281
292
  }
282
293
  &.ax-state-selected {
283
- @apply ax-bg-success-800;
294
+ @apply ax-bg-success-800 dark:ax-bg-success-500;
284
295
  }
285
296
  }
286
297
  &.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;
298
+ @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent dark:ax-bg-success-800 dark:ax-text-success-100;
288
299
 
289
300
  &:not(.ax-state-disabled, .ax-state-selected) {
290
301
  &:hover,
291
302
  &:focus,
292
303
  &:focus-within {
293
- @apply ax-bg-success-200 ax-text-success-700;
304
+ @apply ax-bg-success-200 ax-text-success-700 dark:ax-bg-success-700 dark:ax-text-success-100;
294
305
  }
295
306
 
296
307
  &:active {
297
- @apply ax-bg-success-300 ax-text-success-700;
308
+ @apply ax-bg-success-300 ax-text-success-700 dark:ax-bg-success-500;
298
309
  }
299
310
  }
300
311
  &.ax-state-selected {
@@ -302,17 +313,19 @@
302
313
  }
303
314
  }
304
315
  &.ax-success-outline {
305
- @apply ax-text-success-500 ax-border-success-500;
316
+ @apply ax-text-success-500 ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
306
317
 
307
318
  &:not(.ax-state-disabled, .ax-state-selected) {
308
- &:hover,
319
+ &:hover {
320
+ @apply ax-border-success-300 ax-text-success-300 dark:ax-text-success-200 dark:ax-border-success-500;
321
+ }
309
322
  &:focus,
310
323
  &:focus-within {
311
- @apply ax-border-success-300 ax-text-success-300;
324
+ @apply ax-border-success-400 ax-ring-2 ax-text-success-400 dark:ax-text-success-200 dark:ax-border-success-500 ax-ring-success-100 dark:ax-ring-success-900;
312
325
  }
313
326
 
314
327
  &:active {
315
- @apply ax-border-success-600 ax-text-success-800;
328
+ @apply ax-border-success-600 ax-text-success-800 dark:ax-border-success-400 dark:ax-text-success-100;
316
329
  }
317
330
  }
318
331
  &.ax-state-selected {
@@ -320,17 +333,19 @@
320
333
  }
321
334
  }
322
335
  &.ax-success-blank {
323
- @apply ax-text-success-500 ax-border-transparent;
336
+ @apply ax-text-success-500 ax-border-transparent dark:ax-text-success-300;
324
337
 
325
338
  &:not(.ax-state-disabled, .ax-state-selected) {
326
- &:hover,
339
+ &:hover {
340
+ @apply ax-text-success-600 dark:ax-text-success-100;
341
+ }
327
342
  &:focus,
328
343
  &:focus-within {
329
- @apply ax-bg-success-50 ax-text-success-600 dark:ax-bg-transparent;
344
+ @apply ax-text-success-700 dark:ax-text-success-200 ax-ring-2 ax-ring-success-100 dark:ax-ring-success-900;
330
345
  }
331
346
 
332
347
  &:active {
333
- @apply ax-bg-success-100 ax-text-success-700;
348
+ @apply ax-text-success-700 ax-ring-0 dark:ax-text-success-300;
334
349
  }
335
350
  }
336
351
  &.ax-state-selected {
@@ -338,17 +353,19 @@
338
353
  }
339
354
  }
340
355
  &.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;
356
+ @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 dark:ax-border-success-400 dark:ax-text-success-300;
342
357
 
343
358
  &:not(.ax-state-disabled, .ax-state-selected) {
344
- &:hover,
359
+ &:hover {
360
+ @apply ax-text-success-700 ax-border-success-800 dark:ax-border-success-200 dark:ax-text-success-200;
361
+ }
345
362
  &:focus,
346
363
  &:focus-within {
347
- @apply ax-text-success-800 ax-border-success-800;
364
+ @apply ax-text-success-900 dark:ax-text-success-500 ax-border-success-800 dark:ax-border-success-500 ax-ring-2 ax-ring-success-100 dark:ax-ring-success-900;
348
365
  }
349
366
 
350
367
  &:active {
351
- @apply ax-text-success-500 ax-border-success-500;
368
+ @apply ax-text-success-500 dark:ax-text-success-400 ax-border-success-500 dark:ax-border-success-400;
352
369
  }
353
370
  }
354
371
  &.ax-state-selected {
@@ -357,8 +374,8 @@
357
374
  }
358
375
 
359
376
  // warning
360
- &.ax-warning-normal {
361
- @apply ax-bg-warning-500 ax-text-warning-fore ax-border-transparent;
377
+ &.ax-warning-default {
378
+ @apply ax-bg-warning-500 ax-text-warning-fore ax-border-transparent dark:ax-bg-warning-800;
362
379
 
363
380
  &:not(.ax-state-disabled, .ax-state-selected) {
364
381
  &:hover {
@@ -375,21 +392,21 @@
375
392
  }
376
393
  }
377
394
  &.ax-state-selected {
378
- @apply ax-bg-warning-800;
395
+ @apply ax-bg-warning-800 dark:ax-bg-warning-500;
379
396
  }
380
397
  }
381
398
  &.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;
399
+ @apply ax-bg-warning-100 ax-text-warning-900 ax-border-transparent dark:ax-bg-warning-700 dark:ax-text-warning-fore;
383
400
 
384
401
  &:not(.ax-state-disabled, .ax-state-selected) {
385
402
  &:hover,
386
403
  &:focus,
387
404
  &:focus-within {
388
- @apply ax-bg-warning-200 ax-text-warning-800;
405
+ @apply ax-bg-warning-200 ax-text-warning-fore dark:ax-bg-warning-700 dark:ax-text-warning-fore;
389
406
  }
390
407
 
391
408
  &:active {
392
- @apply ax-bg-warning-300 ax-text-warning-fore;
409
+ @apply ax-bg-warning-300 ax-text-warning-fore dark:ax-bg-warning-500 dark:ax-text-warning-fore;
393
410
  }
394
411
  }
395
412
  &.ax-state-selected {
@@ -397,17 +414,19 @@
397
414
  }
398
415
  }
399
416
  &.ax-warning-outline {
400
- @apply ax-text-warning-500 ax-border-warning-500;
417
+ @apply ax-text-warning-500 ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
401
418
 
402
419
  &:not(.ax-state-disabled, .ax-state-selected) {
403
- &:hover,
420
+ &:hover {
421
+ @apply ax-border-warning-300 ax-text-warning-300 dark:ax-text-warning-200 dark:ax-border-warning-500;
422
+ }
404
423
  &:focus,
405
424
  &:focus-within {
406
- @apply ax-border-warning-300 ax-text-warning-300;
425
+ @apply ax-border-warning-400 ax-ring-2 ax-text-warning-400 dark:ax-text-warning-200 dark:ax-border-warning-500 ax-ring-warning-100 dark:ax-ring-warning-900;
407
426
  }
408
427
 
409
428
  &:active {
410
- @apply ax-border-warning-600 ax-text-warning-800;
429
+ @apply ax-border-warning-600 ax-text-warning-800 dark:ax-border-warning-400 dark:ax-text-warning-100;
411
430
  }
412
431
  }
413
432
  &.ax-state-selected {
@@ -415,17 +434,19 @@
415
434
  }
416
435
  }
417
436
  &.ax-warning-blank {
418
- @apply ax-text-warning-500 ax-border-transparent;
437
+ @apply ax-text-warning-500 ax-border-transparent dark:ax-text-warning-300;
419
438
 
420
439
  &:not(.ax-state-disabled, .ax-state-selected) {
421
- &:hover,
440
+ &:hover {
441
+ @apply ax-text-warning-600 dark:ax-text-warning-100;
442
+ }
422
443
  &:focus,
423
444
  &:focus-within {
424
- @apply ax-bg-warning-50 ax-text-warning-600 dark:ax-bg-transparent;
445
+ @apply ax-text-warning-700 dark:ax-text-warning-200 ax-ring-2 ax-ring-warning-100 dark:ax-ring-warning-900;
425
446
  }
426
447
 
427
448
  &:active {
428
- @apply ax-bg-warning-100 ax-text-warning-700;
449
+ @apply ax-text-warning-700 ax-ring-0 dark:ax-text-warning-300;
429
450
  }
430
451
  }
431
452
  &.ax-state-selected {
@@ -433,17 +454,19 @@
433
454
  }
434
455
  }
435
456
  &.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;
457
+ @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 dark:ax-border-warning-400 dark:ax-text-warning-300;
437
458
 
438
459
  &:not(.ax-state-disabled, .ax-state-selected) {
439
- &:hover,
460
+ &:hover {
461
+ @apply ax-text-warning-700 ax-border-warning-800 dark:ax-border-warning-200 dark:ax-text-warning-200;
462
+ }
440
463
  &:focus,
441
464
  &:focus-within {
442
- @apply ax-text-warning-800 ax-border-warning-800;
465
+ @apply ax-text-warning-900 dark:ax-text-warning-500 ax-border-warning-800 dark:ax-border-warning-500 ax-ring-2 ax-ring-warning-100 dark:ax-ring-warning-900;
443
466
  }
444
467
 
445
468
  &:active {
446
- @apply ax-text-warning-500 ax-border-warning-500;
469
+ @apply ax-text-warning-500 dark:ax-text-warning-400 ax-border-warning-500 dark:ax-border-warning-400;
447
470
  }
448
471
  }
449
472
  &.ax-state-selected {
@@ -452,8 +475,8 @@
452
475
  }
453
476
 
454
477
  // danger
455
- &.ax-danger-normal {
456
- @apply ax-bg-danger-500 ax-text-danger-fore ax-border-transparent;
478
+ &.ax-danger-default {
479
+ @apply ax-bg-danger-500 ax-text-danger-fore ax-border-transparent dark:ax-bg-danger-800;
457
480
 
458
481
  &:not(.ax-state-disabled, .ax-state-selected) {
459
482
  &:hover {
@@ -470,21 +493,21 @@
470
493
  }
471
494
  }
472
495
  &.ax-state-selected {
473
- @apply ax-bg-danger-800;
496
+ @apply ax-bg-danger-800 dark:ax-bg-danger-500;
474
497
  }
475
498
  }
476
499
  &.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;
500
+ @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-800 dark:ax-text-danger-100;
478
501
 
479
502
  &:not(.ax-state-disabled, .ax-state-selected) {
480
503
  &:hover,
481
504
  &:focus,
482
505
  &:focus-within {
483
- @apply ax-bg-danger-200 ax-text-danger-700;
506
+ @apply ax-bg-danger-200 ax-text-danger-700 dark:ax-bg-danger-700 dark:ax-text-danger-100;
484
507
  }
485
508
 
486
509
  &:active {
487
- @apply ax-bg-danger-300 ax-text-danger-700;
510
+ @apply ax-bg-danger-300 ax-text-danger-700 dark:ax-bg-danger-500;
488
511
  }
489
512
  }
490
513
  &.ax-state-selected {
@@ -492,17 +515,19 @@
492
515
  }
493
516
  }
494
517
  &.ax-danger-outline {
495
- @apply ax-text-danger-500 ax-border-danger-500;
518
+ @apply ax-text-danger-500 ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
496
519
 
497
520
  &:not(.ax-state-disabled, .ax-state-selected) {
498
- &:hover,
521
+ &:hover {
522
+ @apply ax-border-danger-300 ax-text-danger-300 dark:ax-text-danger-200 dark:ax-border-danger-500;
523
+ }
499
524
  &:focus,
500
525
  &:focus-within {
501
- @apply ax-border-danger-300 ax-text-danger-300;
526
+ @apply ax-border-danger-400 ax-ring-2 ax-text-danger-400 dark:ax-text-danger-200 dark:ax-border-danger-500 ax-ring-danger-100 dark:ax-ring-danger-900;
502
527
  }
503
528
 
504
529
  &:active {
505
- @apply ax-border-danger-600 ax-text-danger-800;
530
+ @apply ax-border-danger-600 ax-text-danger-800 dark:ax-border-danger-400 dark:ax-text-danger-100;
506
531
  }
507
532
  }
508
533
  &.ax-state-selected {
@@ -510,17 +535,19 @@
510
535
  }
511
536
  }
512
537
  &.ax-danger-blank {
513
- @apply ax-text-danger-500 ax-border-transparent;
538
+ @apply ax-text-danger-500 ax-border-transparent dark:ax-text-danger-300;
514
539
 
515
540
  &:not(.ax-state-disabled, .ax-state-selected) {
516
- &:hover,
541
+ &:hover {
542
+ @apply ax-text-danger-600 dark:ax-text-danger-100;
543
+ }
517
544
  &:focus,
518
545
  &:focus-within {
519
- @apply ax-bg-danger-50 ax-text-danger-600 dark:ax-bg-transparent;
546
+ @apply ax-text-danger-700 dark:ax-text-danger-200 ax-ring-2 ax-ring-danger-100 dark:ax-ring-danger-900;
520
547
  }
521
548
 
522
549
  &:active {
523
- @apply ax-bg-danger-100 ax-text-danger-700;
550
+ @apply ax-text-danger-700 ax-ring-0 dark:ax-text-danger-300;
524
551
  }
525
552
  }
526
553
  &.ax-state-selected {
@@ -528,17 +555,19 @@
528
555
  }
529
556
  }
530
557
  &.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;
558
+ @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 dark:ax-border-danger-400 dark:ax-text-danger-300;
532
559
 
533
560
  &:not(.ax-state-disabled, .ax-state-selected) {
534
- &:hover,
561
+ &:hover {
562
+ @apply ax-text-danger-700 ax-border-danger-800 dark:ax-border-danger-200 dark:ax-text-danger-200;
563
+ }
535
564
  &:focus,
536
565
  &:focus-within {
537
- @apply ax-text-danger-800 ax-border-danger-800;
566
+ @apply ax-text-danger-900 dark:ax-text-danger-500 ax-border-danger-800 dark:ax-border-danger-500 ax-ring-2 ax-ring-danger-100 dark:ax-ring-danger-900;
538
567
  }
539
568
 
540
569
  &:active {
541
- @apply ax-text-danger-500 ax-border-danger-500;
570
+ @apply ax-text-danger-500 dark:ax-text-danger-400 ax-border-danger-500 dark:ax-border-danger-400;
542
571
  }
543
572
  }
544
573
  &.ax-state-selected {
@@ -547,8 +576,8 @@
547
576
  }
548
577
 
549
578
  // info
550
- &.ax-info-normal {
551
- @apply ax-bg-info-500 ax-text-info-fore ax-border-transparent;
579
+ &.ax-info-default {
580
+ @apply ax-bg-info-500 ax-text-info-fore ax-border-transparent dark:ax-bg-info-800;
552
581
 
553
582
  &:not(.ax-state-disabled, .ax-state-selected) {
554
583
  &:hover {
@@ -565,21 +594,21 @@
565
594
  }
566
595
  }
567
596
  &.ax-state-selected {
568
- @apply ax-bg-info-800;
597
+ @apply ax-bg-info-800 dark:ax-bg-info-500;
569
598
  }
570
599
  }
571
600
  &.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;
601
+ @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent dark:ax-bg-info-800 dark:ax-text-info-100;
573
602
 
574
603
  &:not(.ax-state-disabled, .ax-state-selected) {
575
604
  &:hover,
576
605
  &:focus,
577
606
  &:focus-within {
578
- @apply ax-bg-info-200 ax-text-info-700;
607
+ @apply ax-bg-info-200 ax-text-info-700 dark:ax-bg-info-700 dark:ax-text-info-100;
579
608
  }
580
609
 
581
610
  &:active {
582
- @apply ax-bg-info-300 ax-text-info-700;
611
+ @apply ax-bg-info-300 ax-text-info-700 dark:ax-bg-info-500;
583
612
  }
584
613
  }
585
614
  &.ax-state-selected {
@@ -587,17 +616,19 @@
587
616
  }
588
617
  }
589
618
  &.ax-info-outline {
590
- @apply ax-text-info-500 ax-border-info-500;
619
+ @apply ax-text-info-500 ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
591
620
 
592
621
  &:not(.ax-state-disabled, .ax-state-selected) {
593
- &:hover,
622
+ &:hover {
623
+ @apply ax-border-info-300 ax-text-info-300 dark:ax-text-info-200 dark:ax-border-info-500;
624
+ }
594
625
  &:focus,
595
626
  &:focus-within {
596
- @apply ax-border-info-300 ax-text-info-300;
627
+ @apply ax-border-info-400 ax-ring-2 ax-text-info-400 dark:ax-text-info-200 dark:ax-border-info-500 ax-ring-info-100 dark:ax-ring-info-900;
597
628
  }
598
629
 
599
630
  &:active {
600
- @apply ax-border-info-600 ax-text-info-800;
631
+ @apply ax-border-info-600 ax-text-info-800 dark:ax-border-info-400 dark:ax-text-info-100;
601
632
  }
602
633
  }
603
634
  &.ax-state-selected {
@@ -605,17 +636,19 @@
605
636
  }
606
637
  }
607
638
  &.ax-info-blank {
608
- @apply ax-text-info-500 ax-border-transparent;
639
+ @apply ax-text-info-500 ax-border-transparent dark:ax-text-info-300;
609
640
 
610
641
  &:not(.ax-state-disabled, .ax-state-selected) {
611
- &:hover,
642
+ &:hover {
643
+ @apply ax-text-info-600 dark:ax-text-info-100;
644
+ }
612
645
  &:focus,
613
646
  &:focus-within {
614
- @apply ax-bg-info-50 ax-text-info-600 dark:ax-bg-transparent;
647
+ @apply ax-text-info-700 dark:ax-text-info-200 ax-ring-2 ax-ring-info-100 dark:ax-ring-info-900;
615
648
  }
616
649
 
617
650
  &:active {
618
- @apply ax-bg-info-100 ax-text-info-700;
651
+ @apply ax-text-info-700 ax-ring-0 dark:ax-text-info-300;
619
652
  }
620
653
  }
621
654
  &.ax-state-selected {
@@ -623,17 +656,19 @@
623
656
  }
624
657
  }
625
658
  &.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;
659
+ @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 dark:ax-border-info-400 dark:ax-text-info-300;
627
660
 
628
661
  &:not(.ax-state-disabled, .ax-state-selected) {
629
- &:hover,
662
+ &:hover {
663
+ @apply ax-text-info-700 ax-border-info-800 dark:ax-border-info-200 dark:ax-text-info-200;
664
+ }
630
665
  &:focus,
631
666
  &:focus-within {
632
- @apply ax-text-info-800 ax-border-info-800;
667
+ @apply ax-text-info-900 dark:ax-text-info-500 ax-border-info-800 dark:ax-border-info-500 ax-ring-2 ax-ring-info-100 dark:ax-ring-info-900;
633
668
  }
634
669
 
635
670
  &:active {
636
- @apply ax-text-info-500 ax-border-info-500;
671
+ @apply ax-text-info-500 dark:ax-text-info-400 ax-border-info-500 dark:ax-border-info-400;
637
672
  }
638
673
  }
639
674
  &.ax-state-selected {
@@ -642,7 +677,7 @@
642
677
  }
643
678
 
644
679
  // dark
645
- &.ax-dark-normal {
680
+ &.ax-dark-default {
646
681
  @apply ax-bg-dark-500 ax-text-dark-fore ax-border-transparent dark:ax-bg-dark-600;
647
682
 
648
683
  &:not(.ax-state-disabled, .ax-state-selected) {
@@ -659,7 +694,7 @@
659
694
  @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;
660
695
  }
661
696
  }
662
- &.ax-state-selected{
697
+ &.ax-state-selected {
663
698
  @apply ax-bg-dark-300 ax-text-dark-fore;
664
699
  }
665
700
  }
@@ -679,7 +714,7 @@
679
714
  @apply ax-bg-dark-200 ax-text-dark-700;
680
715
  }
681
716
  }
682
- &.ax-state-selected{
717
+ &.ax-state-selected {
683
718
  @apply ax-bg-dark-300 ax-text-dark-fore;
684
719
  }
685
720
  }
@@ -700,7 +735,7 @@
700
735
  @apply ax-border-dark-100;
701
736
  }
702
737
  }
703
- &.ax-state-selected{
738
+ &.ax-state-selected {
704
739
  @apply ax-bg-dark-300 ax-border-dark-300 ax-text-dark-fore;
705
740
  }
706
741
  }
@@ -718,7 +753,7 @@
718
753
  @apply ax-bg-dark-600 ax-text-dark-fore dark:ax-text-dark-50;
719
754
  }
720
755
  }
721
- &.ax-state-selected{
756
+ &.ax-state-selected {
722
757
  @apply ax-bg-dark-300 ax-text-dark-fore;
723
758
  }
724
759
  }
@@ -736,13 +771,13 @@
736
771
  @apply ax-text-dark-300 ax-border-dark-300 dark:ax-border-dark-100 dark:ax-text-dark-100;
737
772
  }
738
773
  }
739
- &.ax-state-selected{
774
+ &.ax-state-selected {
740
775
  @apply ax-bg-dark-300 ax-text-dark-fore;
741
776
  }
742
777
  }
743
778
 
744
779
  // light
745
- &.ax-light-normal {
780
+ &.ax-light-default {
746
781
  @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
782
 
748
783
  &:not(.ax-state-disabled, .ax-state-selected) {