@acorex/styles 22.0.0-next.9 → 22.1.0-next.1

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 (23) hide show
  1. package/components/_actionsheet.css +20 -3
  2. package/components/_drop-down.css +36 -11
  3. package/components/_editor-container.css +177 -10
  4. package/components/_floating-surface.css +24 -0
  5. package/components/_list.css +2 -1
  6. package/components/index.css +2 -2
  7. package/icons/lucide/_variables.css +229 -0
  8. package/icons/lucide/index.css +543 -0
  9. package/package.json +15 -1
  10. package/themes/appearance.contract.mjs +81 -0
  11. package/themes/appearance.contract.test.mjs +910 -0
  12. package/themes/appearance.css +15 -0
  13. package/themes/appearances/depth.css +377 -0
  14. package/themes/appearances/flat.css +63 -0
  15. package/themes/appearances/index.css +73 -0
  16. package/themes/appearances/translucent.css +77 -0
  17. package/themes/contrast/enhanced.css +85 -0
  18. package/themes/contrast/high.css +131 -0
  19. package/themes/contrast/index.css +10 -0
  20. package/themes/default.css +319 -14
  21. package/components/_conversation-picker-popup.css +0 -34
  22. package/icons/lucide/_variables.scss +0 -227
  23. package/icons/lucide/index.scss +0 -693
package/themes/contrast/high.css ADDED
@@ -0,0 +1,131 @@
1
+ /*
2
+ * High Contrast — composable contrast profile (not an Appearance).
3
+ * Activate with .ax-contrast-high on <html> or any subtree.
4
+ *
5
+ * Ownership:
6
+ * - Contrast owns boundaries, focus, field discoverability, disabled clarity
7
+ * - Appearance owns gradient, bevel, shadow, depth, translucency, surface fill
8
+ *
9
+ * High must not redefine Depth or Translucent identity in ordinary rendering.
10
+ * Decorative neutralization belongs under forced-colors only.
11
+ */
12
+
13
+ .ax-contrast-high {
14
+ --ax-sys-contrast-inner-border-control: inset 0 0 0 1px rgb(15 23 42 / 0.75);
15
+ --ax-sys-contrast-inner-border-field: inset 0 0 0 1px rgb(15 23 42 / 0.78);
16
+ --ax-sys-contrast-inner-border-surface: inset 0 0 0 1px rgb(15 23 42 / 0.65);
17
+
18
+ --ax-sys-contrast-border-control: rgb(15 23 42 / 0.75);
19
+ --ax-sys-contrast-border-field: rgb(15 23 42 / 0.78);
20
+ --ax-sys-contrast-border-surface: rgb(15 23 42 / 0.65);
21
+
22
+ --ax-sys-contrast-focus-ring: 0 0 0 2px rgb(15 23 42 / 0.95);
23
+ --ax-sys-contrast-focus-ring-offset: 0 0 0 2px rgb(255 255 255 / 1);
24
+
25
+ /* Controls — boundary/focus only; do not recolor Button fills. */
26
+ --ax-sys-contrast-surface-overlay-control: transparent;
27
+ --ax-sys-contrast-surface-overlay-field: rgb(15 23 42 / 0.045);
28
+ --ax-sys-contrast-surface-overlay-surface: rgb(15 23 42 / 0.016);
29
+
30
+ --ax-sys-contrast-disabled-opacity: 0.62;
31
+
32
+ --ax-sys-contrast-inner-border-invalid: inset 0 0 0 2px rgba(var(--ax-sys-color-danger-600));
33
+ --ax-sys-contrast-border-invalid: rgba(var(--ax-sys-color-danger-600));
34
+ --ax-sys-contrast-focus-ring-invalid: 0 0 0 2px rgba(var(--ax-sys-color-danger-600) / 0.65);
35
+ }
36
+
37
+ /* Dark — High Contrast */
38
+
39
+ .ax-dark.ax-contrast-high,
40
+ .ax-dark .ax-contrast-high,
41
+ .ax-contrast-high .ax-dark {
42
+ --ax-sys-contrast-inner-border-control: inset 0 0 0 1px rgb(255 255 255 / 0.78);
43
+ --ax-sys-contrast-inner-border-field: inset 0 0 0 1px rgb(255 255 255 / 0.82);
44
+ --ax-sys-contrast-inner-border-surface: inset 0 0 0 1px rgb(255 255 255 / 0.65);
45
+
46
+ --ax-sys-contrast-border-control: rgb(255 255 255 / 0.78);
47
+ --ax-sys-contrast-border-field: rgb(255 255 255 / 0.82);
48
+ --ax-sys-contrast-border-surface: rgb(255 255 255 / 0.65);
49
+
50
+ --ax-sys-contrast-focus-ring: 0 0 0 2px rgb(255 255 255 / 0.95);
51
+ --ax-sys-contrast-focus-ring-offset: 0 0 0 2px rgb(15 23 42 / 1);
52
+
53
+ --ax-sys-contrast-surface-overlay-control: transparent;
54
+ --ax-sys-contrast-surface-overlay-field: rgb(255 255 255 / 0.06);
55
+ --ax-sys-contrast-surface-overlay-surface: rgb(255 255 255 / 0.02);
56
+
57
+ --ax-sys-contrast-inner-border-invalid: inset 0 0 0 2px rgba(var(--ax-sys-color-danger-600));
58
+ --ax-sys-contrast-border-invalid: rgba(var(--ax-sys-color-danger-600));
59
+ --ax-sys-contrast-focus-ring-invalid: 0 0 0 2px rgba(var(--ax-sys-color-danger-600) / 0.65);
60
+ }
61
+
62
+ /* Nested Light inside Dark — restore Light High Contrast */
63
+
64
+ .ax-dark .ax-light.ax-contrast-high,
65
+ .ax-dark .ax-contrast-high .ax-light,
66
+ .ax-contrast-high .ax-dark .ax-light {
67
+ --ax-sys-contrast-inner-border-control: inset 0 0 0 1px rgb(15 23 42 / 0.75);
68
+ --ax-sys-contrast-inner-border-field: inset 0 0 0 1px rgb(15 23 42 / 0.78);
69
+ --ax-sys-contrast-inner-border-surface: inset 0 0 0 1px rgb(15 23 42 / 0.65);
70
+
71
+ --ax-sys-contrast-border-control: rgb(15 23 42 / 0.75);
72
+ --ax-sys-contrast-border-field: rgb(15 23 42 / 0.78);
73
+ --ax-sys-contrast-border-surface: rgb(15 23 42 / 0.65);
74
+
75
+ --ax-sys-contrast-focus-ring: 0 0 0 2px rgb(15 23 42 / 0.95);
76
+ --ax-sys-contrast-focus-ring-offset: 0 0 0 2px rgb(255 255 255 / 1);
77
+
78
+ --ax-sys-contrast-surface-overlay-control: transparent;
79
+ --ax-sys-contrast-surface-overlay-field: rgb(15 23 42 / 0.045);
80
+ --ax-sys-contrast-surface-overlay-surface: rgb(15 23 42 / 0.016);
81
+
82
+ --ax-sys-contrast-inner-border-invalid: inset 0 0 0 2px rgba(var(--ax-sys-color-danger-600));
83
+ --ax-sys-contrast-border-invalid: rgba(var(--ax-sys-color-danger-600));
84
+ --ax-sys-contrast-focus-ring-invalid: 0 0 0 2px rgba(var(--ax-sys-color-danger-600) / 0.65);
85
+ }
86
+
87
+ /*
88
+ * Forced colors — decorative Appearance treatments may be neutralized here.
89
+ * Ordinary .ax-contrast-high must not behave like Forced Colors.
90
+ */
91
+
92
+ @media (forced-colors: active) {
93
+ .ax-contrast-high,
94
+ .ax-contrast-high * {
95
+ forced-color-adjust: auto;
96
+ }
97
+
98
+ .ax-contrast-high {
99
+ --ax-sys-gradient-control-rest: none;
100
+ --ax-sys-gradient-control-hover: none;
101
+ --ax-sys-gradient-control-active: none;
102
+ --ax-sys-gradient-control-neutral-rest: none;
103
+ --ax-sys-gradient-control-neutral-hover: none;
104
+ --ax-sys-gradient-control-neutral-active: none;
105
+ --ax-sys-gradient-surface: none;
106
+
107
+ --ax-sys-highlight-control: 0 0 #0000;
108
+ --ax-sys-highlight-control-subtle: 0 0 #0000;
109
+
110
+ --ax-sys-bevel-control-rest: var(--ax-sys-contrast-inner-border-control);
111
+ --ax-sys-bevel-control-hover: var(--ax-sys-contrast-inner-border-control);
112
+ --ax-sys-bevel-control-active: var(--ax-sys-contrast-inner-border-control);
113
+ --ax-sys-bevel-control-disabled: 0 0 #0000;
114
+ --ax-sys-bevel-control-neutral-rest: var(--ax-sys-contrast-inner-border-control);
115
+ --ax-sys-bevel-control-neutral-hover: var(--ax-sys-contrast-inner-border-control);
116
+ --ax-sys-bevel-control-neutral-active: var(--ax-sys-contrast-inner-border-control);
117
+
118
+ --ax-sys-effect-control-rest: 0 0 #0000;
119
+ --ax-sys-effect-control-hover: 0 0 #0000;
120
+ --ax-sys-effect-control-active: 0 0 #0000;
121
+ --ax-sys-effect-field-rest: 0 0 #0000;
122
+ --ax-sys-effect-surface: 0 0 #0000;
123
+ --ax-sys-effect-floating: 0 0 #0000;
124
+ --ax-sys-effect-overlay: 0 0 #0000;
125
+ --ax-sys-effect-modal: 0 0 #0000;
126
+
127
+ --ax-sys-backdrop-filter-surface: none;
128
+ --ax-sys-surface-fill-opacity: 1;
129
+ --ax-sys-filter-surface: none;
130
+ }
131
+ }
package/themes/contrast/index.css ADDED
@@ -0,0 +1,10 @@
1
+ /*
2
+ * ACoreX Contrast — aggregate of contrast profile token files.
3
+ *
4
+ * Standard: no class
5
+ * Enhanced: .ax-contrast-enhanced
6
+ * High: .ax-contrast-high
7
+ */
8
+
9
+ @import './enhanced.css';
10
+ @import './high.css';
package/themes/default.css CHANGED
@@ -618,6 +618,116 @@ html.ax-dark {
618
618
  --ax-sys-color-bg-default: var(--ax-sys-color-lightest-surface);
619
619
  --ax-sys-color-text-default: var(--ax-sys-color-on-lightest-surface);
620
620
  --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);
621
+
622
+ /*
623
+ * Appearance contract (Flat defaults).
624
+ * Shadow no-ops use `0 0 #0000` (not `none`) so tokens compose into
625
+ * comma-separated box-shadow lists. Depth/Tonal/Translucent live in appearance.css.
626
+ */
627
+ --ax-sys-effect-control-rest: 0 0 #0000;
628
+ --ax-sys-effect-control-hover: 0 0 #0000;
629
+ --ax-sys-effect-control-active: 0 0 #0000;
630
+ --ax-sys-effect-control-subtle-rest: 0 0 #0000;
631
+ --ax-sys-effect-control-subtle-hover: 0 0 #0000;
632
+
633
+ --ax-sys-effect-field-rest: 0 0 #0000;
634
+ --ax-sys-effect-field-hover: 0 0 #0000;
635
+ --ax-sys-effect-field-focus: 0 0 #0000;
636
+ --ax-sys-effect-field-readonly: 0 0 #0000;
637
+ --ax-sys-effect-field-disabled: 0 0 #0000;
638
+
639
+ --ax-sys-effect-surface: 0 0 #0000;
640
+ /* Flat functional separation — preserved from feat/tailwindcss-4 hardcoded overlay shadows */
641
+ --ax-sys-effect-floating: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
642
+ /* Tailwind shadow-xl — exact value from notification on feat/tailwindcss-4 */
643
+ --ax-sys-effect-prominent-floating: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
644
+ --ax-sys-effect-overlay: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
645
+ --ax-sys-effect-modal: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
646
+
647
+ --ax-sys-gradient-control-rest: none;
648
+ --ax-sys-gradient-control-hover: none;
649
+ --ax-sys-gradient-control-active: none;
650
+ --ax-sys-gradient-surface: none;
651
+
652
+ --ax-sys-highlight-control: 0 0 #0000;
653
+ --ax-sys-highlight-control-subtle: 0 0 #0000;
654
+ --ax-sys-highlight-surface: 0 0 #0000;
655
+
656
+ --ax-sys-inner-border-control: 0 0 #0000;
657
+ --ax-sys-inner-border-surface: 0 0 #0000;
658
+
659
+ --ax-sys-bevel-control-rest: 0 0 #0000;
660
+ --ax-sys-bevel-control-hover: 0 0 #0000;
661
+ --ax-sys-bevel-control-active: 0 0 #0000;
662
+ --ax-sys-bevel-control-disabled: 0 0 #0000;
663
+
664
+ --ax-sys-effect-control-neutral-rest: var(--ax-sys-effect-control-rest);
665
+ --ax-sys-effect-control-neutral-hover: var(--ax-sys-effect-control-hover);
666
+ --ax-sys-effect-control-neutral-active: var(--ax-sys-effect-control-active);
667
+ --ax-sys-effect-control-neutral-disabled: var(--ax-sys-effect-control-disabled, 0 0 #0000);
668
+ --ax-sys-bevel-control-neutral-rest: var(--ax-sys-bevel-control-rest);
669
+ --ax-sys-bevel-control-neutral-hover: var(--ax-sys-bevel-control-hover);
670
+ --ax-sys-bevel-control-neutral-active: var(--ax-sys-bevel-control-active);
671
+ --ax-sys-bevel-control-neutral-disabled: var(--ax-sys-bevel-control-disabled);
672
+ --ax-sys-inner-border-control-neutral-rest: var(--ax-sys-inner-border-control);
673
+ --ax-sys-inner-border-control-neutral-hover: var(--ax-sys-inner-border-control);
674
+ --ax-sys-inner-border-control-neutral-active: var(--ax-sys-inner-border-control);
675
+ --ax-sys-gradient-control-neutral-rest: var(--ax-sys-gradient-control-rest);
676
+ --ax-sys-gradient-control-neutral-hover: var(--ax-sys-gradient-control-hover);
677
+ --ax-sys-gradient-control-neutral-active: var(--ax-sys-gradient-control-active);
678
+
679
+ /* Contrast contract — Standard defaults (neutral, composable with High Contrast profile) */
680
+ --ax-sys-contrast-border-control: transparent;
681
+ --ax-sys-contrast-border-field: transparent;
682
+ --ax-sys-contrast-border-surface: transparent;
683
+
684
+ --ax-sys-contrast-inner-border-control: 0 0 #0000;
685
+ --ax-sys-contrast-inner-border-field: 0 0 #0000;
686
+ --ax-sys-contrast-inner-border-surface: 0 0 #0000;
687
+ --ax-sys-contrast-inner-border-invalid: inset 0 0 0 1px rgba(var(--ax-sys-color-danger-600));
688
+ --ax-sys-contrast-border-invalid: rgba(var(--ax-sys-color-danger-600));
689
+
690
+ --ax-sys-contrast-focus-ring: 0 0 #0000;
691
+ --ax-sys-contrast-focus-ring-offset: 0 0 #0000;
692
+ --ax-sys-contrast-focus-ring-invalid: 0 0 0 2px rgba(var(--ax-sys-color-danger-600) / 0.45);
693
+
694
+ --ax-sys-contrast-surface-overlay-control: transparent;
695
+ --ax-sys-contrast-surface-overlay-field: transparent;
696
+ --ax-sys-contrast-surface-overlay-surface: transparent;
697
+
698
+ --ax-sys-contrast-disabled-opacity: 1;
699
+
700
+ --ax-sys-transform-control-rest: none;
701
+ --ax-sys-transform-control-hover: none;
702
+ --ax-sys-transform-control-active: none;
703
+ --ax-sys-transform-control-disabled: none;
704
+
705
+ --ax-sys-filter-surface: none;
706
+ --ax-sys-backdrop-filter-surface: none;
707
+
708
+ --ax-sys-surface-fill-opacity: 1;
709
+
710
+ --ax-sys-surface-overlay-control-rest: transparent;
711
+ --ax-sys-surface-overlay-control-hover: transparent;
712
+ --ax-sys-surface-overlay-control-active: transparent;
713
+ --ax-sys-surface-overlay-control-subtle-rest: transparent;
714
+ --ax-sys-surface-overlay-control-subtle-hover: transparent;
715
+ --ax-sys-surface-overlay-control-subtle-active: transparent;
716
+
717
+ --ax-sys-surface-overlay-field-rest: transparent;
718
+ --ax-sys-surface-overlay-field-hover: transparent;
719
+ --ax-sys-surface-overlay-field-focus: transparent;
720
+ --ax-sys-surface-overlay-field-readonly: transparent;
721
+ --ax-sys-surface-overlay-field-disabled: transparent;
722
+
723
+ --ax-sys-surface-overlay-surface: transparent;
724
+ --ax-sys-surface-overlay-floating: transparent;
725
+ --ax-sys-surface-overlay-prominent-floating: transparent;
726
+ --ax-sys-surface-overlay-overlay: transparent;
727
+ --ax-sys-surface-overlay-modal: transparent;
728
+
729
+ --ax-sys-motion-duration: var(--ax-sys-transition-duration);
730
+ --ax-sys-motion-timing: var(--ax-sys-transition-timing-function);
621
731
  }
622
732
 
623
733
  .ax-dark {
@@ -1148,6 +1258,13 @@ html.ax-dark {
1148
1258
  --ax-sys-color-bg-default: var(--ax-sys-color-darkest-surface);
1149
1259
  --ax-sys-color-text-default: var(--ax-sys-color-on-darkest-surface);
1150
1260
  --ax-sys-color-border-default: var(--ax-sys-color-border-darkest-surface);
1261
+
1262
+ /*
1263
+ * Inherited `color` is a computed value from ancestors (e.g. light html).
1264
+ * Localized `.ax-dark` (preview panels, portaled overlays) must reset it so
1265
+ * list/menu text does not stay dark-on-dark.
1266
+ */
1267
+ color: rgba(var(--ax-sys-color-on-darkest-surface));
1151
1268
  }
1152
1269
 
1153
1270
  /*
@@ -1219,6 +1336,8 @@ html.ax-dark {
1219
1336
  --ax-sys-color-text-default: var(--ax-sys-color-on-lightest-surface);
1220
1337
  --ax-sys-color-border-default: var(--ax-sys-color-border-lightest-surface);
1221
1338
 
1339
+ color: rgba(var(--ax-sys-color-on-lightest-surface));
1340
+
1222
1341
  --color-bg-default: rgba(var(--ax-sys-color-bg-default));
1223
1342
  --color-text-default: rgba(var(--ax-sys-color-text-default));
1224
1343
  --color-border-default: rgba(var(--ax-sys-color-border-default));
@@ -2247,7 +2366,15 @@ html.ax-dark {
2247
2366
  }
2248
2367
 
2249
2368
  @utility text-muted {
2250
- @apply text-text-default/60;
2369
+ @apply text-text-default/80;
2370
+ }
2371
+
2372
+ @utility bg-muted {
2373
+ @apply bg-bg-default/80;
2374
+ }
2375
+
2376
+ @utility border-muted {
2377
+ @apply border-border-default/80;
2251
2378
  }
2252
2379
 
2253
2380
  @utility bg-default {
@@ -2491,9 +2618,9 @@ html.ax-dark {
2491
2618
  }
2492
2619
 
2493
2620
  @utility success-darkest-surface {
2494
- background-color: var(--color-success-darkest-surface);
2495
- color: var(--color-on-success-darkest-surface);
2496
- border-color: var(--color-border-success-darkest-surface);
2621
+ background-color: var(--color-success-darkest);
2622
+ color: var(--color-on-success-darkest);
2623
+ border-color: var(--color-border-success-darkest);
2497
2624
  }
2498
2625
 
2499
2626
  @utility ax-success {
@@ -3220,6 +3347,91 @@ html.ax-dark {
3220
3347
  @apply outline-2 outline-offset-0 outline-(--ax-comp-bg-light,var(--color-primary-light));
3221
3348
  }
3222
3349
 
3350
+ /* Generic appearance effect utilities — consume semantic tokens only.
3351
+ * Always compose Contrast control border so High/Enhanced stay visible. */
3352
+ @utility ax-effect-control {
3353
+ box-shadow:
3354
+ var(--ax-sys-contrast-inner-border-control), var(--ax-sys-highlight-control),
3355
+ var(--ax-sys-effect-control-rest);
3356
+ background-image: var(--ax-sys-gradient-control-rest);
3357
+ }
3358
+
3359
+ @utility ax-effect-control-hover {
3360
+ box-shadow:
3361
+ var(--ax-sys-contrast-inner-border-control), var(--ax-sys-highlight-control),
3362
+ var(--ax-sys-effect-control-hover);
3363
+ background-image: var(--ax-sys-gradient-control-hover);
3364
+ }
3365
+
3366
+ @utility ax-effect-control-active {
3367
+ box-shadow: var(--ax-sys-contrast-inner-border-control), var(--ax-sys-effect-control-active);
3368
+ background-image: var(--ax-sys-gradient-control-active);
3369
+ transform: var(--ax-sys-transform-control-active);
3370
+ }
3371
+
3372
+ @utility ax-effect-control-subtle {
3373
+ box-shadow:
3374
+ var(--ax-sys-contrast-inner-border-control), var(--ax-sys-highlight-control-subtle),
3375
+ var(--ax-sys-effect-control-subtle-rest);
3376
+ }
3377
+
3378
+ @utility ax-effect-control-subtle-hover {
3379
+ box-shadow:
3380
+ var(--ax-sys-contrast-inner-border-control), var(--ax-sys-highlight-control-subtle),
3381
+ var(--ax-sys-effect-control-subtle-hover);
3382
+ }
3383
+
3384
+ @utility ax-effect-blank-hover {
3385
+ /* Keep contrast boundary; blank look has no elevation fill. */
3386
+ box-shadow: var(--ax-sys-contrast-inner-border-control);
3387
+ background-image: none;
3388
+ transform: none;
3389
+ }
3390
+
3391
+ @utility ax-effect-field {
3392
+ box-shadow: var(--ax-sys-effect-field-rest);
3393
+ }
3394
+
3395
+ @utility ax-effect-field-hover {
3396
+ box-shadow: var(--ax-sys-effect-field-hover);
3397
+ }
3398
+
3399
+ @utility ax-effect-field-focus {
3400
+ box-shadow: var(--ax-sys-effect-field-focus);
3401
+ }
3402
+
3403
+ @utility ax-effect-field-readonly {
3404
+ box-shadow: var(--ax-sys-effect-field-readonly);
3405
+ }
3406
+
3407
+ @utility ax-effect-field-disabled {
3408
+ box-shadow: var(--ax-sys-effect-field-disabled);
3409
+ }
3410
+
3411
+ @utility ax-effect-surface {
3412
+ box-shadow: var(--ax-sys-highlight-surface), var(--ax-sys-effect-surface);
3413
+ background-image: var(--ax-sys-gradient-surface);
3414
+ }
3415
+
3416
+ @utility ax-effect-floating {
3417
+ box-shadow: var(--ax-sys-effect-floating);
3418
+ }
3419
+
3420
+ @utility ax-effect-overlay {
3421
+ box-shadow: var(--ax-sys-effect-overlay);
3422
+ }
3423
+
3424
+ @utility ax-effect-modal {
3425
+ box-shadow: var(--ax-sys-effect-modal);
3426
+ }
3427
+
3428
+ @utility ax-effect-transition {
3429
+ transition-property:
3430
+ box-shadow, background-image, border-color, background-color, color, transform, filter, backdrop-filter;
3431
+ transition-duration: var(--ax-sys-motion-duration);
3432
+ transition-timing-function: var(--ax-sys-motion-timing);
3433
+ }
3434
+
3223
3435
  @utility ax-fill {
3224
3436
  @apply bg-(--ax-comp-bg-lightest,var(--color-lighter)) text-(--ax-comp-text-lightest,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-lightest,var(--color-darker)) dark:text-(--ax-comp-text-lightest,var(--color-on-darker));
3225
3437
  &.ax-default {
@@ -3305,13 +3517,19 @@ html.ax-dark {
3305
3517
  }
3306
3518
 
3307
3519
  @utility ax-solid {
3308
- @apply bg-(--ax-comp-bg,var(--color-lightest)) text-(--ax-comp-text,var(--color-on-lightest)) dark:bg-(--ax-comp-bg,var(--color-darkest)) dark:text-(--ax-comp-text,var(--color-on-darkest));
3520
+ @apply ax-effect-transition bg-(--ax-comp-bg,var(--color-lightest)) text-(--ax-comp-text,var(--color-on-lightest)) dark:bg-(--ax-comp-bg,var(--color-darkest)) dark:text-(--ax-comp-text,var(--color-on-darkest));
3309
3521
  &.ax-default {
3310
3522
  @apply border-border-surface border;
3311
3523
  }
3312
3524
  &.ax-state-selected {
3313
3525
  @apply bg-(--ax-comp-bg-darker,var(--color-light)) text-(--ax-comp-text-darker,var(--color-on-light)) dark:bg-(--ax-comp-bg-darker,var(--color-dark)) dark:text-(--ax-comp-text-darker,var(--color-on-dark));
3314
3526
  }
3527
+ &.ax-state-disabled,
3528
+ &:disabled {
3529
+ box-shadow: var(--ax-sys-elevation-0);
3530
+ background-image: none;
3531
+ transform: none;
3532
+ }
3315
3533
  &.ax-editor-container {
3316
3534
  &:focus-within {
3317
3535
  @apply ax-focus-ring-editor;
@@ -3323,13 +3541,14 @@ html.ax-dark {
3323
3541
  @supports (color: color-mix(in lab, red, red)) {
3324
3542
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg-lightest, var(--color-on-lightest)) 25%, transparent);
3325
3543
  }
3326
- @apply ax-solid transition-colors outline-none;
3544
+ @apply ax-solid outline-none;
3327
3545
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3328
3546
  &:hover,
3329
3547
  &:focus,
3330
3548
  &:focus-within,
3331
3549
  &:focus-visible,
3332
3550
  &.ax-state-focus {
3551
+ /* Color only — box-shadow/elevation owned by component (keeps Contrast border). */
3333
3552
  background-color: var(--ax-comp-bg-dark, var(--color-lighter));
3334
3553
  color: var(--ax-comp-text-dark, var(--color-on-lighter));
3335
3554
  @variant dark {
@@ -3345,23 +3564,30 @@ html.ax-dark {
3345
3564
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
3346
3565
  background-color: var(--ax-comp-bg-darker, var(--color-light));
3347
3566
  color: var(--ax-comp-text-darker, var(--color-on-light));
3348
- @apply ring-1 ring-offset-1;
3349
- --tw-ring-color: var(--ax-comp-bg-dark, var(--color-primary-dark));
3350
3567
  @variant dark {
3351
3568
  background-color: var(--ax-comp-bg-darker, var(--color-dark));
3352
3569
  color: var(--ax-comp-text-darker, var(--color-on-dark));
3353
3570
  }
3354
3571
  }
3572
+ &.ax-state-loading {
3573
+ transform: none;
3574
+ }
3355
3575
  }
3356
3576
 
3357
3577
  @utility ax-outline {
3358
- @apply border border-(--ax-comp-bg,var(--color-border-lightest)) bg-transparent text-(--ax-comp-bg,var(--color-on-lightest));
3578
+ @apply ax-effect-transition border border-(--ax-comp-bg,var(--color-border-lightest)) bg-transparent text-(--ax-comp-bg,var(--color-on-lightest));
3359
3579
  &.ax-default {
3360
3580
  @apply border-border-lightest dark:border-border-darkest border;
3361
3581
  }
3362
3582
  &.ax-state-selected {
3363
3583
  @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
3364
3584
  }
3585
+ &.ax-state-disabled,
3586
+ &:disabled {
3587
+ box-shadow: var(--ax-sys-elevation-0);
3588
+ background-image: none;
3589
+ transform: none;
3590
+ }
3365
3591
  &.ax-editor-container {
3366
3592
  &:focus-within {
3367
3593
  @apply ax-focus-ring-editor;
@@ -3373,7 +3599,7 @@ html.ax-dark {
3373
3599
  @supports (color: color-mix(in lab, red, red)) {
3374
3600
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3375
3601
  }
3376
- @apply ax-outline transition-colors outline-none;
3602
+ @apply ax-outline outline-none;
3377
3603
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3378
3604
  &:hover,
3379
3605
  &:focus,
@@ -3392,20 +3618,29 @@ html.ax-dark {
3392
3618
  border-color: var(--ax-comp-bg-darker, var(--color-border-light));
3393
3619
  color: var(--ax-comp-bg-darker, var(--color-on-light));
3394
3620
  }
3621
+ &.ax-state-loading {
3622
+ transform: none;
3623
+ }
3395
3624
  }
3396
3625
 
3397
3626
  @utility ax-twotone {
3398
- @apply bg-(--ax-comp-bg-lightest,var(--color-lighter)) text-(--ax-comp-text-lightest,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-lightest,var(--color-darker)) dark:text-(--ax-comp-text-lightest,var(--color-on-darker));
3627
+ @apply ax-effect-transition bg-(--ax-comp-bg-lightest,var(--color-lighter)) text-(--ax-comp-text-lightest,var(--color-on-lighter)) dark:bg-(--ax-comp-bg-lightest,var(--color-darker)) dark:text-(--ax-comp-text-lightest,var(--color-on-darker));
3399
3628
  &.ax-state-selected {
3400
3629
  @apply bg-(--ax-comp-bg-light,var(--color-surface)) text-(--ax-comp-text-light,var(--color-on-surface));
3401
3630
  }
3631
+ &.ax-state-disabled,
3632
+ &:disabled {
3633
+ box-shadow: var(--ax-sys-elevation-0);
3634
+ background-image: none;
3635
+ transform: none;
3636
+ }
3402
3637
  }
3403
3638
 
3404
3639
  @utility ax-twotone-interactive {
3405
3640
  @supports (color: color-mix(in lab, red, red)) {
3406
3641
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3407
3642
  }
3408
- @apply ax-twotone transition-colors outline-none;
3643
+ @apply ax-twotone outline-none;
3409
3644
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3410
3645
  &:hover,
3411
3646
  &:focus,
@@ -3428,20 +3663,29 @@ html.ax-dark {
3428
3663
  background-color: var(--ax-comp-bg-light, var(--color-surface));
3429
3664
  color: var(--ax-comp-text-light, var(--color-on-surface));
3430
3665
  }
3666
+ &.ax-state-loading {
3667
+ transform: none;
3668
+ }
3431
3669
  }
3432
3670
 
3433
3671
  @utility ax-blank {
3434
- @apply bg-transparent text-(--ax-comp-bg,var(--color-on-surface));
3672
+ @apply ax-effect-transition bg-transparent text-(--ax-comp-bg,var(--color-on-surface));
3435
3673
  &.ax-state-selected {
3436
3674
  @apply bg-(--ax-comp-bg-lighter,var(--color-surface)) text-(--ax-comp-text-lighter,var(--color-on-surface));
3437
3675
  }
3676
+ &.ax-state-disabled,
3677
+ &:disabled {
3678
+ box-shadow: var(--ax-sys-elevation-0);
3679
+ background-image: none;
3680
+ transform: none;
3681
+ }
3438
3682
  }
3439
3683
 
3440
3684
  @utility ax-blank-interactive {
3441
3685
  @supports (color: color-mix(in lab, red, red)) {
3442
3686
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3443
3687
  }
3444
- @apply ax-blank transition-colors outline-none;
3688
+ @apply ax-blank outline-none;
3445
3689
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3446
3690
  &:hover,
3447
3691
  &:focus,
@@ -3464,6 +3708,9 @@ html.ax-dark {
3464
3708
  background-color: var(--ax-comp-bg-lighter, var(--color-surface));
3465
3709
  color: var(--ax-comp-text-lighter, var(--color-on-surface));
3466
3710
  }
3711
+ &.ax-state-loading {
3712
+ transform: none;
3713
+ }
3467
3714
  }
3468
3715
 
3469
3716
  @utility ax-link {
@@ -3507,6 +3754,64 @@ html.ax-dark {
3507
3754
  @apply ax-link;
3508
3755
  }
3509
3756
 
3757
+ /*
3758
+ * Editor / input containers must stay recessed (inset), never raised.
3759
+ * Look utilities apply control elevation; this resets them for editors.
3760
+ *
3761
+ * Host box-shadow = Appearance field effect only. Contrast field border is
3762
+ * painted on .ax-editor-container::after (see _editor-container.css) so
3763
+ * opaque native controls (textarea) cannot cover it.
3764
+ * Do not wipe background-image overlays owned by _editor-container.css.
3765
+ */
3766
+ @layer utilities {
3767
+ .ax-editor-container.ax-solid,
3768
+ .ax-editor-container.ax-outline,
3769
+ .ax-editor-container.ax-twotone,
3770
+ .ax-editor-container.ax-fill,
3771
+ .ax-editor-container.ax-flat,
3772
+ .ax-editor-container.ax-blank {
3773
+ box-shadow: var(--ax-sys-effect-field-rest);
3774
+ transform: none;
3775
+ }
3776
+
3777
+ .ax-editor-container.ax-solid:hover:not(.ax-state-disabled, .ax-state-readonly),
3778
+ .ax-editor-container.ax-outline:hover:not(.ax-state-disabled, .ax-state-readonly),
3779
+ .ax-editor-container.ax-twotone:hover:not(.ax-state-disabled, .ax-state-readonly),
3780
+ .ax-editor-container.ax-fill:hover:not(.ax-state-disabled, .ax-state-readonly),
3781
+ .ax-editor-container.ax-flat:hover:not(.ax-state-disabled, .ax-state-readonly),
3782
+ .ax-editor-container.ax-blank:hover:not(.ax-state-disabled, .ax-state-readonly) {
3783
+ box-shadow: var(--ax-sys-effect-field-hover);
3784
+ }
3785
+
3786
+ .ax-editor-container.ax-solid.ax-state-readonly,
3787
+ .ax-editor-container.ax-outline.ax-state-readonly,
3788
+ .ax-editor-container.ax-twotone.ax-state-readonly,
3789
+ .ax-editor-container.ax-fill.ax-state-readonly,
3790
+ .ax-editor-container.ax-flat.ax-state-readonly,
3791
+ .ax-editor-container.ax-blank.ax-state-readonly {
3792
+ box-shadow: var(--ax-sys-effect-field-readonly);
3793
+ }
3794
+
3795
+ .ax-editor-container.ax-solid.ax-state-disabled,
3796
+ .ax-editor-container.ax-outline.ax-state-disabled,
3797
+ .ax-editor-container.ax-twotone.ax-state-disabled,
3798
+ .ax-editor-container.ax-fill.ax-state-disabled,
3799
+ .ax-editor-container.ax-flat.ax-state-disabled,
3800
+ .ax-editor-container.ax-blank.ax-state-disabled {
3801
+ box-shadow: var(--ax-sys-elevation-0);
3802
+ }
3803
+
3804
+ .ax-editor-container.ax-solid:focus-within:not(.ax-state-disabled),
3805
+ .ax-editor-container.ax-outline:focus-within:not(.ax-state-disabled),
3806
+ .ax-editor-container.ax-twotone:focus-within:not(.ax-state-disabled),
3807
+ .ax-editor-container.ax-fill:focus-within:not(.ax-state-disabled),
3808
+ .ax-editor-container.ax-flat:focus-within:not(.ax-state-disabled),
3809
+ .ax-editor-container.ax-blank:focus-within:not(.ax-state-disabled) {
3810
+ /* Keep recessed inset; focus ring uses outline (ax-focus-ring-editor) */
3811
+ box-shadow: var(--ax-sys-effect-field-focus);
3812
+ }
3813
+ }
3814
+
3510
3815
  @utility h1 {
3511
3816
  font-size: 2.5rem;
3512
3817
  font-weight: 500;
package/components/_conversation-picker-popup.css DELETED
@@ -1,34 +0,0 @@
1
- .ax-popup-overlay.ax-conversation-composer-picker-popup {
2
- .ax-popup {
3
- max-height: min(32rem, 90dvh);
4
- width: min(28rem, 93vw);
5
- }
6
-
7
- .ax-popup-main-container {
8
- min-height: 0;
9
- }
10
-
11
- .ax-popup-body-container {
12
- display: flex;
13
- flex-direction: column;
14
- overflow: hidden;
15
- min-height: 0;
16
- padding: 0;
17
- }
18
-
19
- .ax-popup-body-container > ng-component {
20
- display: flex;
21
- flex-direction: column;
22
- min-height: 0;
23
- width: 100%;
24
- }
25
- }
26
-
27
- @media (max-width: 480px) {
28
- .ax-popup-overlay.ax-conversation-composer-picker-popup {
29
- .ax-popup {
30
- max-height: min(28rem, 92dvh);
31
- width: 93vw;
32
- }
33
- }
34
- }