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