@acorex/styles 7.21.0 → 7.21.2

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 +488 -2749
  2. package/index.min.css +1 -1
  3. package/package.json +1 -1
  4. package/src/shared/_color-look.scss +220 -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') {
@@ -416,6 +475,9 @@
416
475
  color: rgba(var(--ax-color-#{$color}-300));
417
476
  }
418
477
  }
478
+ &.ax-dropdown-button-marker {
479
+ border-inline-start-color: rgba(var(--ax-color-#{$color}-800));
480
+ }
419
481
  }
420
482
  }
421
483
 
@@ -494,6 +556,9 @@
494
556
  // @apply ax-outline-#{$color}-500;
495
557
  }
496
558
  }
559
+ &.ax-dropdown-button-marker {
560
+ border-inline-start-color: rgba(var(--ax-color-#{$color}-950));
561
+ }
497
562
  }
498
563
  }
499
564
  }
@@ -505,6 +570,9 @@
505
570
  border-color: rgba(var(--ax-color-primary-200));
506
571
  color: rgba(var(--ax-color-primary-200));
507
572
  }
573
+ & + .ax-dropdown-button-marker {
574
+ border-inline-start-color: rgba(var(--ax-color-primary-200));
575
+ }
508
576
  }
509
577
  &:active {
510
578
  border-color: rgba(var(--ax-color-primary-300));
@@ -529,6 +597,9 @@
529
597
  border-color: rgba(var(--ax-color-primary-200));
530
598
  color: rgba(var(--ax-color-primary-200));
531
599
  }
600
+ & + .ax-dropdown-button-marker {
601
+ border-inline-start-color: rgba(var(--ax-color-primary-200));
602
+ }
532
603
  }
533
604
  }
534
605
 
@@ -591,6 +662,9 @@
591
662
  background-color: rgba(var(--ax-color-primary-200));
592
663
  color: rgba(var(--ax-color-primary-fore-tint));
593
664
  }
665
+ & + .ax-dropdown-button-marker {
666
+ border-inline-start-color: rgba(var(--ax-color-primary-200));
667
+ }
594
668
  }
595
669
  &:active {
596
670
  background-color: rgba(var(--ax-color-primary-300));