@acorex/styles 7.21.0 → 7.21.3

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 (4) hide show
  1. package/index.css +491 -2770
  2. package/index.min.css +1 -1
  3. package/package.json +1 -1
  4. package/src/shared/_color-look.scss +217 -146
package/src/shared/_color-look.scss CHANGED
@@ -32,12 +32,19 @@
32
32
  border-bottom-color: transparent;
33
33
  }
34
34
  }
35
+ &:is(&:focus-visible, &.ax-state-focus) {
36
+ // @apply ax-outline-#{$color}-500;
37
+ outline-color: rgba(var(--ax-color-#{$color}-500));
38
+ }
35
39
  & > button {
36
40
  &:is(&:focus-visible, &.ax-state-focus) {
37
41
  // @apply ax-outline-#{$color}-500;
38
42
  outline-color: rgba(var(--ax-color-#{$color}-500));
39
43
  }
40
44
  }
45
+ &.ax-dropdown-button-marker {
46
+ border-inline-start-color: rgba(var(--ax-color-#{$color}-600));
47
+ }
41
48
  }
42
49
  }
43
50
 
@@ -74,6 +81,12 @@
74
81
  border-bottom-color: transparent;
75
82
  }
76
83
  }
84
+ &:is(&:focus-visible, &.ax-state-focus) {
85
+ // @apply ax-text-#{$color}-fore-tint ax-outline-#{$color}-fore-tint -ax-outline-offset-4;
86
+ outline-offset: -2px;
87
+ outline-color: rgba(var(--ax-color-#{$color}-500));
88
+ color: rgba(var(--ax-color-#{$color}-fore-tint));
89
+ }
77
90
  & > button {
78
91
  &:is(&:focus-visible, &.ax-state-focus) {
79
92
  // @apply ax-text-#{$color}-fore-tint ax-outline-#{$color}-fore-tint -ax-outline-offset-4;
@@ -82,6 +95,9 @@
82
95
  color: rgba(var(--ax-color-#{$color}-fore-tint));
83
96
  }
84
97
  }
98
+ &.ax-dropdown-button-marker {
99
+ border-inline-start-color: rgba(var(--ax-color-#{$color}-500));
100
+ }
85
101
  }
86
102
  }
87
103
 
@@ -115,6 +131,11 @@
115
131
  border-bottom-color: transparent;
116
132
  }
117
133
  }
134
+ &:is(&:focus-visible, &.ax-state-focus) {
135
+ // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
136
+ outline-color: rgba(var(--ax-color-#{$color}-300));
137
+ outline-offset: 0;
138
+ }
118
139
  & > button {
119
140
  &:is(&:focus-visible, &.ax-state-focus) {
120
141
  // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
@@ -122,6 +143,9 @@
122
143
  outline-offset: 0;
123
144
  }
124
145
  }
146
+ &.ax-dropdown-button-marker {
147
+ border-inline-start-color: transparent;
148
+ }
125
149
  }
126
150
  }
127
151
 
@@ -158,179 +182,211 @@
158
182
  }
159
183
  }
160
184
 
185
+ &:is(&:focus-visible, &.ax-state-focus) {
186
+ // @apply ax-outline-#{$color}-500;
187
+ outline-color: rgba(var(--ax-color-#{$color}-500));
188
+ }
161
189
  & > button {
162
190
  &:is(&:focus-visible, &.ax-state-focus) {
163
191
  // @apply ax-outline-#{$color}-500;
164
192
  outline-color: rgba(var(--ax-color-#{$color}-500));
165
193
  }
166
194
  }
167
- }
168
- }
169
- .ax-el-ghost-solid {
170
- // @apply ax-border ax-border-default ax-bg-ghost ax-text-ghost-fore ax-shadow-sm;
171
- border-width: 1px;
172
- border-color: rgba(var(--ax-color-border-default));
173
- background-color: rgba(var(--ax-color-ghost));
174
- color: rgba(var(--ax-color-ghost-fore));
175
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
176
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
177
- box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
178
- &.ax-el-interactive {
179
- &:hover {
180
- &:not(&.ax-state-selected, &.ax-state-disabled) {
181
- // @apply ax-border-primary-500 ax-text-primary-500;
182
- border-color: rgba(var(--ax-color-primary-500));
183
- color: rgba(var(--ax-color-primary-500));
184
- }
185
- }
186
- &:active {
187
- // @apply ax-border-primary-700 ax-text-primary-700;
188
- border-color: rgba(var(--ax-color-primary-700));
189
- color: rgba(var(--ax-color-primary-700));
195
+ &.ax-dropdown-button-marker {
196
+ border-inline-start-color: rgba(var(--ax-color-#{$color}-50));
190
197
  }
191
198
  }
199
+ }
200
+ }
201
+ }
192
202
 
193
- &.ax-state-selected {
194
- // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
203
+ .ax-el-ghost-solid {
204
+ // @apply ax-border ax-border-default ax-bg-ghost ax-text-ghost-fore ax-shadow-sm;
205
+ border-width: 1px;
206
+ border-color: rgba(var(--ax-color-border-default));
207
+ background-color: rgba(var(--ax-color-ghost));
208
+ color: rgba(var(--ax-color-ghost-fore));
209
+ --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
210
+ --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
211
+ box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
212
+ &.ax-el-interactive {
213
+ &:hover {
214
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
215
+ // @apply ax-border-primary-500 ax-text-primary-500;
195
216
  border-color: rgba(var(--ax-color-primary-500));
196
- background-color: rgba(var(--ax-color-primary-500));
197
- color: rgba(var(--ax-color-primary-fore));
217
+ color: rgba(var(--ax-color-primary-500));
198
218
  }
199
-
200
- .ax-ripple {
201
- // @apply ax-bg-primary-500/30 #{!important};
202
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
203
- }
204
- ax-loading-spinner {
205
- .ax-loader {
206
- // @apply ax-border-ghost-fore ax-border-b-transparent;
207
- border-color: rgba(var(--ax-color-ghost-fore));
208
- border-bottom-color: transparent;
209
- }
219
+ // + &.ax-dropdown-button-marker {
220
+ // border-inline-start-color: rgba(var(--ax-color-primary-500));
221
+ // }
222
+ & + .ax-dropdown-button-marker {
223
+ border-inline-start-color: rgba(var(--ax-color-primary-500));
210
224
  }
211
225
  }
212
- .ax-el-ghost-outline {
213
- // @apply ax-border ax-border-default ax-bg-transparent ax-text-ghost-fore;
214
- border-width: 1px;
215
- border-color: rgba(var(--ax-color-border-default));
216
- background-color: transparent;
217
- color: rgba(var(--ax-color-ghost-fore));
226
+ &:active {
227
+ // @apply ax-border-primary-700 ax-text-primary-700;
228
+ border-color: rgba(var(--ax-color-primary-700));
229
+ color: rgba(var(--ax-color-primary-700));
230
+ }
231
+ }
218
232
 
219
- &.ax-el-interactive {
220
- &:hover {
221
- &:not(&.ax-state-selected, &.ax-state-disabled) {
222
- // @apply ax-border-primary-500 ax-text-primary-500;
223
- border-color: rgba(var(--ax-color-primary-500));
224
- color: rgba(var(--ax-color-primary-500));
225
- }
226
- }
227
- }
233
+ &.ax-state-selected {
234
+ // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
235
+ border-color: rgba(var(--ax-color-primary-500));
236
+ background-color: rgba(var(--ax-color-primary-500));
237
+ color: rgba(var(--ax-color-primary-fore));
238
+ }
228
239
 
229
- &.ax-state-selected {
230
- // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
240
+ .ax-ripple {
241
+ // @apply ax-bg-primary-500/30 #{!important};
242
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
243
+ }
244
+ ax-loading-spinner {
245
+ .ax-loader {
246
+ // @apply ax-border-ghost-fore ax-border-b-transparent;
247
+ border-color: rgba(var(--ax-color-ghost-fore));
248
+ border-bottom-color: transparent;
249
+ }
250
+ }
251
+ &.ax-dropdown-button-marker {
252
+ border-inline-start-color: rgba(var(--ax-color-border-default));
253
+ }
254
+ }
255
+ .ax-el-ghost-outline {
256
+ // @apply ax-border ax-border-default ax-bg-transparent ax-text-ghost-fore;
257
+ border-width: 1px;
258
+ border-color: rgba(var(--ax-color-border-default));
259
+ background-color: transparent;
260
+ color: rgba(var(--ax-color-ghost-fore));
261
+
262
+ &.ax-el-interactive {
263
+ &:hover {
264
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
265
+ // @apply ax-border-primary-500 ax-text-primary-500;
231
266
  border-color: rgba(var(--ax-color-primary-500));
232
- color: rgba(var(--ax-color-primary-fore));
267
+ color: rgba(var(--ax-color-primary-500));
233
268
  }
234
- .ax-ripple {
235
- // @apply ax-bg-primary-500/30 #{!important};
236
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
237
- }
238
- ax-loading-spinner {
239
- .ax-loader {
240
- // @apply ax-border-ghost-fore ax-border-b-transparent;
241
- border-color: rgba(var(--ax-color-ghost-fore));
242
- border-bottom-color: transparent;
243
- }
269
+ & + .ax-dropdown-button-marker {
270
+ border-inline-start-color: rgba(var(--ax-color-primary-500));
244
271
  }
245
272
  }
246
- .ax-el-ghost-blank {
247
- // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
248
- border-style: none;
249
- background-color: transparent;
250
- color: rgba(var(--ax-color-ghost-fore));
251
-
252
- &.ax-state-selected {
253
- // @apply ax-bg-primary-500 ax-text-primary-fore;
254
- background-color: rgba(var(--ax-color-primary-500));
255
- color: rgba(var(--ax-color-primary-fore));
256
- }
257
- &.ax-el-interactive {
258
- &:hover {
259
- &:not(&.ax-state-selected, &.ax-state-disabled) {
260
- // @apply ax-border-primary-700 ax-text-primary-700;
261
- border-color: rgba(var(--ax-color-primary-700));
262
- color: rgba(var(--ax-color-primary-700));
263
- }
264
- }
265
- &:active {
266
- // @apply ax-border-primary-800 ax-text-primary-800;
267
- border-color: rgba(var(--ax-color-primary-800));
268
- color: rgba(var(--ax-color-primary-800));
269
- }
270
- }
273
+ }
271
274
 
272
- .ax-ripple {
273
- // @apply ax-bg-primary-500/30 #{!important};
274
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
275
- }
276
- ax-loading-spinner {
277
- .ax-loader {
278
- // @apply ax-border-ghost-fore ax-border-b-transparent;
279
- border-color: rgba(var(--ax-color-ghost-fore));
280
- border-bottom-color: transparent;
281
- }
282
- }
283
- & > button {
284
- &:is(&:focus-visible, &.ax-state-focus) {
285
- // @apply ax-outline-primary-500;
286
- outline-color: rgba(var(--ax-color-primary-500));
287
- }
275
+ &.ax-state-selected {
276
+ // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
277
+ border-color: rgba(var(--ax-color-primary-500));
278
+ color: rgba(var(--ax-color-primary-fore));
279
+ }
280
+ .ax-ripple {
281
+ // @apply ax-bg-primary-500/30 #{!important};
282
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
283
+ }
284
+ ax-loading-spinner {
285
+ .ax-loader {
286
+ // @apply ax-border-ghost-fore ax-border-b-transparent;
287
+ border-color: rgba(var(--ax-color-ghost-fore));
288
+ border-bottom-color: transparent;
289
+ }
290
+ }
291
+ &.ax-dropdown-button-marker {
292
+ border-inline-start-color: rgba(var(--ax-color-border-default));
293
+ }
294
+ }
295
+ .ax-el-ghost-blank {
296
+ // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
297
+ border-style: none;
298
+ background-color: transparent;
299
+ color: rgba(var(--ax-color-ghost-fore));
300
+
301
+ &.ax-state-selected {
302
+ // @apply ax-bg-primary-500 ax-text-primary-fore;
303
+ background-color: rgba(var(--ax-color-primary-500));
304
+ color: rgba(var(--ax-color-primary-fore));
305
+ }
306
+ &.ax-el-interactive {
307
+ &:hover {
308
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
309
+ // @apply ax-border-primary-700 ax-text-primary-700;
310
+ border-color: rgba(var(--ax-color-primary-700));
311
+ color: rgba(var(--ax-color-primary-700));
288
312
  }
289
313
  }
290
- .ax-el-ghost-twotone {
291
- // @apply ax-border-transparent ax-bg-ghost-fore/5 ax-text-ghost-fore;
292
- border-color: transparent;
293
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
294
- color: rgba(var(--ax-color-ghost-fore));
314
+ &:active {
315
+ // @apply ax-border-primary-800 ax-text-primary-800;
316
+ border-color: rgba(var(--ax-color-primary-800));
317
+ color: rgba(var(--ax-color-primary-800));
318
+ }
319
+ }
295
320
 
296
- &.ax-el-interactive {
297
- &:hover {
298
- &:not(&.ax-state-selected, &.ax-state-disabled) {
299
- // @apply ax-bg-primary-200 ax-text-primary-fore-tint;
300
- background-color: rgba(var(--ax-color-primary-200));
301
- color: rgba(var(--ax-color-primary-fore-tint));
302
- }
303
- }
304
- &:active {
305
- // @apply ax-bg-primary-300 ax-text-primary-fore-tint;
306
- background-color: rgba(var(--ax-color-primary-300));
307
- color: rgba(var(--ax-color-primary-fore-tint));
308
- }
309
- }
310
- &.ax-state-selected {
311
- // @apply ax-border-primary-300 ax-bg-primary-400 ax-text-primary-fore-tint;
312
- border-color: rgba(var(--ax-color-primary-300));
313
- background-color: rgba(var(--ax-color-primary-400));
321
+ .ax-ripple {
322
+ // @apply ax-bg-primary-500/30 #{!important};
323
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
324
+ }
325
+ ax-loading-spinner {
326
+ .ax-loader {
327
+ // @apply ax-border-ghost-fore ax-border-b-transparent;
328
+ border-color: rgba(var(--ax-color-ghost-fore));
329
+ border-bottom-color: transparent;
330
+ }
331
+ }
332
+ & > button {
333
+ &:is(&:focus-visible, &.ax-state-focus) {
334
+ // @apply ax-outline-primary-500;
335
+ outline-color: rgba(var(--ax-color-primary-500));
336
+ }
337
+ }
338
+ &.ax-dropdown-button-marker {
339
+ border-inline-start-color: rgba(var(--ax-color-border-default));
340
+ }
341
+ }
342
+ .ax-el-ghost-twotone {
343
+ // @apply ax-border-transparent ax-bg-ghost-fore/5 ax-text-ghost-fore;
344
+ border-color: transparent;
345
+ background-color: rgba(var(--ax-color-ghost-fore), 0.05);
346
+ color: rgba(var(--ax-color-ghost-fore));
347
+
348
+ &.ax-el-interactive {
349
+ &:hover {
350
+ &:not(&.ax-state-selected, &.ax-state-disabled) {
351
+ // @apply ax-bg-primary-200 ax-text-primary-fore-tint;
352
+ background-color: rgba(var(--ax-color-primary-200));
314
353
  color: rgba(var(--ax-color-primary-fore-tint));
315
354
  }
316
- .ax-ripple {
317
- // @apply ax-bg-primary-500/30 #{!important};
318
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
319
- }
320
- ax-loading-spinner {
321
- .ax-loader {
322
- // @apply ax-border-ghost-fore ax-border-b-transparent;
323
- border-color: rgba(var(--ax-color-ghost-fore));
324
- border-bottom-color: transparent;
325
- }
326
- }
327
- & > button {
328
- &:is(&:focus-visible, &.ax-state-focus) {
329
- // @apply ax-outline-primary-500;
330
- outline-color: rgba(var(--ax-color-primary-500));
331
- }
355
+ & + .ax-dropdown-button-marker {
356
+ border-inline-start-color: rgba(var(--ax-color-primary-500));
332
357
  }
333
358
  }
359
+ &:active {
360
+ // @apply ax-bg-primary-300 ax-text-primary-fore-tint;
361
+ background-color: rgba(var(--ax-color-primary-300));
362
+ color: rgba(var(--ax-color-primary-fore-tint));
363
+ }
364
+ }
365
+ &.ax-state-selected {
366
+ // @apply ax-border-primary-300 ax-bg-primary-400 ax-text-primary-fore-tint;
367
+ border-color: rgba(var(--ax-color-primary-300));
368
+ background-color: rgba(var(--ax-color-primary-400));
369
+ color: rgba(var(--ax-color-primary-fore-tint));
370
+ }
371
+ .ax-ripple {
372
+ // @apply ax-bg-primary-500/30 #{!important};
373
+ background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
374
+ }
375
+ ax-loading-spinner {
376
+ .ax-loader {
377
+ // @apply ax-border-ghost-fore ax-border-b-transparent;
378
+ border-color: rgba(var(--ax-color-ghost-fore));
379
+ border-bottom-color: transparent;
380
+ }
381
+ }
382
+ & > button {
383
+ &:is(&:focus-visible, &.ax-state-focus) {
384
+ // @apply ax-outline-primary-500;
385
+ outline-color: rgba(var(--ax-color-primary-500));
386
+ }
387
+ }
388
+ &.ax-dropdown-button-marker {
389
+ border-inline-start-color: rgba(var(--ax-color-border-default));
334
390
  }
335
391
  }
336
392
 
@@ -373,6 +429,9 @@
373
429
  outline-color: rgba(var(--ax-color-primary-200));
374
430
  }
375
431
  }
432
+ &.ax-dropdown-button-marker {
433
+ border-inline-start-color: rgba(var(--ax-color-#{$color}-900));
434
+ }
376
435
  }
377
436
  }
378
437
  @if ($look == 'outline') {
@@ -494,6 +553,9 @@
494
553
  // @apply ax-outline-#{$color}-500;
495
554
  }
496
555
  }
556
+ &.ax-dropdown-button-marker {
557
+ border-inline-start-color: rgba(var(--ax-color-#{$color}-950));
558
+ }
497
559
  }
498
560
  }
499
561
  }
@@ -505,6 +567,9 @@
505
567
  border-color: rgba(var(--ax-color-primary-200));
506
568
  color: rgba(var(--ax-color-primary-200));
507
569
  }
570
+ & + .ax-dropdown-button-marker {
571
+ border-inline-start-color: rgba(var(--ax-color-primary-200));
572
+ }
508
573
  }
509
574
  &:active {
510
575
  border-color: rgba(var(--ax-color-primary-300));
@@ -529,6 +594,9 @@
529
594
  border-color: rgba(var(--ax-color-primary-200));
530
595
  color: rgba(var(--ax-color-primary-200));
531
596
  }
597
+ & + .ax-dropdown-button-marker {
598
+ border-inline-start-color: rgba(var(--ax-color-primary-200));
599
+ }
532
600
  }
533
601
  }
534
602
 
@@ -591,6 +659,9 @@
591
659
  background-color: rgba(var(--ax-color-primary-200));
592
660
  color: rgba(var(--ax-color-primary-fore-tint));
593
661
  }
662
+ & + .ax-dropdown-button-marker {
663
+ border-inline-start-color: rgba(var(--ax-color-primary-200));
664
+ }
594
665
  }
595
666
  &:active {
596
667
  background-color: rgba(var(--ax-color-primary-300));