@acorex/styles 22.1.0-next.0 → 22.1.0-next.10

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 (17) hide show
  1. package/components/_action-item.css +0 -4
  2. package/components/_actionsheet.css +20 -3
  3. package/components/_drop-down.css +36 -15
  4. package/components/_editor-container.css +149 -4
  5. package/components/_floating-surface.css +24 -0
  6. package/components/_list.css +2 -5
  7. package/components/index.css +1 -0
  8. package/package.json +72 -1
  9. package/themes/appearance.css +15 -0
  10. package/themes/appearances/depth.css +377 -0
  11. package/themes/appearances/flat.css +63 -0
  12. package/themes/appearances/index.css +73 -0
  13. package/themes/appearances/translucent.css +77 -0
  14. package/themes/contrast/enhanced.css +85 -0
  15. package/themes/contrast/high.css +131 -0
  16. package/themes/contrast/index.css +10 -0
  17. package/themes/default.css +306 -11
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));
@@ -3217,7 +3336,7 @@ html.ax-dark {
3217
3336
  }
3218
3337
 
3219
3338
  @utility ax-state-readonly {
3220
- @apply cursor-text opacity-70 *:cursor-text;
3339
+ @apply cursor-text *:cursor-text;
3221
3340
  }
3222
3341
 
3223
3342
  @utility ax-focus-ring {
@@ -3228,6 +3347,89 @@ html.ax-dark {
3228
3347
  @apply outline-2 outline-offset-0 outline-(--ax-comp-bg-light,var(--color-primary-light));
3229
3348
  }
3230
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), var(--ax-sys-effect-control-rest);
3355
+ background-image: var(--ax-sys-gradient-control-rest);
3356
+ }
3357
+
3358
+ @utility ax-effect-control-hover {
3359
+ box-shadow:
3360
+ var(--ax-sys-contrast-inner-border-control), var(--ax-sys-highlight-control), var(--ax-sys-effect-control-hover);
3361
+ background-image: var(--ax-sys-gradient-control-hover);
3362
+ }
3363
+
3364
+ @utility ax-effect-control-active {
3365
+ box-shadow: var(--ax-sys-contrast-inner-border-control), var(--ax-sys-effect-control-active);
3366
+ background-image: var(--ax-sys-gradient-control-active);
3367
+ transform: var(--ax-sys-transform-control-active);
3368
+ }
3369
+
3370
+ @utility ax-effect-control-subtle {
3371
+ box-shadow:
3372
+ var(--ax-sys-contrast-inner-border-control), var(--ax-sys-highlight-control-subtle),
3373
+ var(--ax-sys-effect-control-subtle-rest);
3374
+ }
3375
+
3376
+ @utility ax-effect-control-subtle-hover {
3377
+ box-shadow:
3378
+ var(--ax-sys-contrast-inner-border-control), var(--ax-sys-highlight-control-subtle),
3379
+ var(--ax-sys-effect-control-subtle-hover);
3380
+ }
3381
+
3382
+ @utility ax-effect-blank-hover {
3383
+ /* Keep contrast boundary; blank look has no elevation fill. */
3384
+ box-shadow: var(--ax-sys-contrast-inner-border-control);
3385
+ background-image: none;
3386
+ transform: none;
3387
+ }
3388
+
3389
+ @utility ax-effect-field {
3390
+ box-shadow: var(--ax-sys-effect-field-rest);
3391
+ }
3392
+
3393
+ @utility ax-effect-field-hover {
3394
+ box-shadow: var(--ax-sys-effect-field-hover);
3395
+ }
3396
+
3397
+ @utility ax-effect-field-focus {
3398
+ box-shadow: var(--ax-sys-effect-field-focus);
3399
+ }
3400
+
3401
+ @utility ax-effect-field-readonly {
3402
+ box-shadow: var(--ax-sys-effect-field-readonly);
3403
+ }
3404
+
3405
+ @utility ax-effect-field-disabled {
3406
+ box-shadow: var(--ax-sys-effect-field-disabled);
3407
+ }
3408
+
3409
+ @utility ax-effect-surface {
3410
+ box-shadow: var(--ax-sys-highlight-surface), var(--ax-sys-effect-surface);
3411
+ background-image: var(--ax-sys-gradient-surface);
3412
+ }
3413
+
3414
+ @utility ax-effect-floating {
3415
+ box-shadow: var(--ax-sys-effect-floating);
3416
+ }
3417
+
3418
+ @utility ax-effect-overlay {
3419
+ box-shadow: var(--ax-sys-effect-overlay);
3420
+ }
3421
+
3422
+ @utility ax-effect-modal {
3423
+ box-shadow: var(--ax-sys-effect-modal);
3424
+ }
3425
+
3426
+ @utility ax-effect-transition {
3427
+ transition-property:
3428
+ box-shadow, background-image, border-color, background-color, color, transform, filter, backdrop-filter;
3429
+ transition-duration: var(--ax-sys-motion-duration);
3430
+ transition-timing-function: var(--ax-sys-motion-timing);
3431
+ }
3432
+
3231
3433
  @utility ax-fill {
3232
3434
  @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));
3233
3435
  &.ax-default {
@@ -3313,13 +3515,19 @@ html.ax-dark {
3313
3515
  }
3314
3516
 
3315
3517
  @utility ax-solid {
3316
- @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));
3518
+ @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));
3317
3519
  &.ax-default {
3318
3520
  @apply border-border-surface border;
3319
3521
  }
3320
3522
  &.ax-state-selected {
3321
3523
  @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));
3322
3524
  }
3525
+ &.ax-state-disabled,
3526
+ &:disabled {
3527
+ box-shadow: var(--ax-sys-elevation-0);
3528
+ background-image: none;
3529
+ transform: none;
3530
+ }
3323
3531
  &.ax-editor-container {
3324
3532
  &:focus-within {
3325
3533
  @apply ax-focus-ring-editor;
@@ -3331,13 +3539,14 @@ html.ax-dark {
3331
3539
  @supports (color: color-mix(in lab, red, red)) {
3332
3540
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg-lightest, var(--color-on-lightest)) 25%, transparent);
3333
3541
  }
3334
- @apply ax-solid transition-colors outline-none;
3542
+ @apply ax-solid outline-none;
3335
3543
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3336
3544
  &:hover,
3337
3545
  &:focus,
3338
3546
  &:focus-within,
3339
3547
  &:focus-visible,
3340
3548
  &.ax-state-focus {
3549
+ /* Color only — box-shadow/elevation owned by component (keeps Contrast border). */
3341
3550
  background-color: var(--ax-comp-bg-dark, var(--color-lighter));
3342
3551
  color: var(--ax-comp-text-dark, var(--color-on-lighter));
3343
3552
  @variant dark {
@@ -3353,23 +3562,30 @@ html.ax-dark {
3353
3562
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
3354
3563
  background-color: var(--ax-comp-bg-darker, var(--color-light));
3355
3564
  color: var(--ax-comp-text-darker, var(--color-on-light));
3356
- @apply ring-1 ring-offset-1;
3357
- --tw-ring-color: var(--ax-comp-bg-dark, var(--color-primary-dark));
3358
3565
  @variant dark {
3359
3566
  background-color: var(--ax-comp-bg-darker, var(--color-dark));
3360
3567
  color: var(--ax-comp-text-darker, var(--color-on-dark));
3361
3568
  }
3362
3569
  }
3570
+ &.ax-state-loading {
3571
+ transform: none;
3572
+ }
3363
3573
  }
3364
3574
 
3365
3575
  @utility ax-outline {
3366
- @apply border border-(--ax-comp-bg,var(--color-border-lightest)) bg-transparent text-(--ax-comp-bg,var(--color-on-lightest));
3576
+ @apply ax-effect-transition border border-(--ax-comp-bg,var(--color-border-lightest)) bg-transparent text-(--ax-comp-bg,var(--color-on-lightest));
3367
3577
  &.ax-default {
3368
3578
  @apply border-border-lightest dark:border-border-darkest border;
3369
3579
  }
3370
3580
  &.ax-state-selected {
3371
3581
  @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
3372
3582
  }
3583
+ &.ax-state-disabled,
3584
+ &:disabled {
3585
+ box-shadow: var(--ax-sys-elevation-0);
3586
+ background-image: none;
3587
+ transform: none;
3588
+ }
3373
3589
  &.ax-editor-container {
3374
3590
  &:focus-within {
3375
3591
  @apply ax-focus-ring-editor;
@@ -3381,7 +3597,7 @@ html.ax-dark {
3381
3597
  @supports (color: color-mix(in lab, red, red)) {
3382
3598
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3383
3599
  }
3384
- @apply ax-outline transition-colors outline-none;
3600
+ @apply ax-outline outline-none;
3385
3601
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3386
3602
  &:hover,
3387
3603
  &:focus,
@@ -3400,20 +3616,29 @@ html.ax-dark {
3400
3616
  border-color: var(--ax-comp-bg-darker, var(--color-border-light));
3401
3617
  color: var(--ax-comp-bg-darker, var(--color-on-light));
3402
3618
  }
3619
+ &.ax-state-loading {
3620
+ transform: none;
3621
+ }
3403
3622
  }
3404
3623
 
3405
3624
  @utility ax-twotone {
3406
- @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));
3625
+ @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));
3407
3626
  &.ax-state-selected {
3408
3627
  @apply bg-(--ax-comp-bg-light,var(--color-surface)) text-(--ax-comp-text-light,var(--color-on-surface));
3409
3628
  }
3629
+ &.ax-state-disabled,
3630
+ &:disabled {
3631
+ box-shadow: var(--ax-sys-elevation-0);
3632
+ background-image: none;
3633
+ transform: none;
3634
+ }
3410
3635
  }
3411
3636
 
3412
3637
  @utility ax-twotone-interactive {
3413
3638
  @supports (color: color-mix(in lab, red, red)) {
3414
3639
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3415
3640
  }
3416
- @apply ax-twotone transition-colors outline-none;
3641
+ @apply ax-twotone outline-none;
3417
3642
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3418
3643
  &:hover,
3419
3644
  &:focus,
@@ -3436,20 +3661,29 @@ html.ax-dark {
3436
3661
  background-color: var(--ax-comp-bg-light, var(--color-surface));
3437
3662
  color: var(--ax-comp-text-light, var(--color-on-surface));
3438
3663
  }
3664
+ &.ax-state-loading {
3665
+ transform: none;
3666
+ }
3439
3667
  }
3440
3668
 
3441
3669
  @utility ax-blank {
3442
- @apply bg-transparent text-(--ax-comp-bg,var(--color-on-surface));
3670
+ @apply ax-effect-transition bg-transparent text-(--ax-comp-bg,var(--color-on-surface));
3443
3671
  &.ax-state-selected {
3444
3672
  @apply bg-(--ax-comp-bg-lighter,var(--color-surface)) text-(--ax-comp-text-lighter,var(--color-on-surface));
3445
3673
  }
3674
+ &.ax-state-disabled,
3675
+ &:disabled {
3676
+ box-shadow: var(--ax-sys-elevation-0);
3677
+ background-image: none;
3678
+ transform: none;
3679
+ }
3446
3680
  }
3447
3681
 
3448
3682
  @utility ax-blank-interactive {
3449
3683
  @supports (color: color-mix(in lab, red, red)) {
3450
3684
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3451
3685
  }
3452
- @apply ax-blank transition-colors outline-none;
3686
+ @apply ax-blank outline-none;
3453
3687
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3454
3688
  &:hover,
3455
3689
  &:focus,
@@ -3472,6 +3706,9 @@ html.ax-dark {
3472
3706
  background-color: var(--ax-comp-bg-lighter, var(--color-surface));
3473
3707
  color: var(--ax-comp-text-lighter, var(--color-on-surface));
3474
3708
  }
3709
+ &.ax-state-loading {
3710
+ transform: none;
3711
+ }
3475
3712
  }
3476
3713
 
3477
3714
  @utility ax-link {
@@ -3515,6 +3752,64 @@ html.ax-dark {
3515
3752
  @apply ax-link;
3516
3753
  }
3517
3754
 
3755
+ /*
3756
+ * Editor / input containers must stay recessed (inset), never raised.
3757
+ * Look utilities apply control elevation; this resets them for editors.
3758
+ *
3759
+ * Host box-shadow = Appearance field effect only. Contrast field border is
3760
+ * painted on .ax-editor-container::after (see _editor-container.css) so
3761
+ * opaque native controls (textarea) cannot cover it.
3762
+ * Do not wipe background-image overlays owned by _editor-container.css.
3763
+ */
3764
+ @layer utilities {
3765
+ .ax-editor-container.ax-solid,
3766
+ .ax-editor-container.ax-outline,
3767
+ .ax-editor-container.ax-twotone,
3768
+ .ax-editor-container.ax-fill,
3769
+ .ax-editor-container.ax-flat,
3770
+ .ax-editor-container.ax-blank {
3771
+ box-shadow: var(--ax-sys-effect-field-rest);
3772
+ transform: none;
3773
+ }
3774
+
3775
+ .ax-editor-container.ax-solid:hover:not(.ax-state-disabled, .ax-state-readonly),
3776
+ .ax-editor-container.ax-outline:hover:not(.ax-state-disabled, .ax-state-readonly),
3777
+ .ax-editor-container.ax-twotone:hover:not(.ax-state-disabled, .ax-state-readonly),
3778
+ .ax-editor-container.ax-fill:hover:not(.ax-state-disabled, .ax-state-readonly),
3779
+ .ax-editor-container.ax-flat:hover:not(.ax-state-disabled, .ax-state-readonly),
3780
+ .ax-editor-container.ax-blank:hover:not(.ax-state-disabled, .ax-state-readonly) {
3781
+ box-shadow: var(--ax-sys-effect-field-hover);
3782
+ }
3783
+
3784
+ .ax-editor-container.ax-solid.ax-state-readonly,
3785
+ .ax-editor-container.ax-outline.ax-state-readonly,
3786
+ .ax-editor-container.ax-twotone.ax-state-readonly,
3787
+ .ax-editor-container.ax-fill.ax-state-readonly,
3788
+ .ax-editor-container.ax-flat.ax-state-readonly,
3789
+ .ax-editor-container.ax-blank.ax-state-readonly {
3790
+ box-shadow: var(--ax-sys-effect-field-readonly);
3791
+ }
3792
+
3793
+ .ax-editor-container.ax-solid.ax-state-disabled,
3794
+ .ax-editor-container.ax-outline.ax-state-disabled,
3795
+ .ax-editor-container.ax-twotone.ax-state-disabled,
3796
+ .ax-editor-container.ax-fill.ax-state-disabled,
3797
+ .ax-editor-container.ax-flat.ax-state-disabled,
3798
+ .ax-editor-container.ax-blank.ax-state-disabled {
3799
+ box-shadow: var(--ax-sys-elevation-0);
3800
+ }
3801
+
3802
+ .ax-editor-container.ax-solid:focus-within:not(.ax-state-disabled),
3803
+ .ax-editor-container.ax-outline:focus-within:not(.ax-state-disabled),
3804
+ .ax-editor-container.ax-twotone:focus-within:not(.ax-state-disabled),
3805
+ .ax-editor-container.ax-fill:focus-within:not(.ax-state-disabled),
3806
+ .ax-editor-container.ax-flat:focus-within:not(.ax-state-disabled),
3807
+ .ax-editor-container.ax-blank:focus-within:not(.ax-state-disabled) {
3808
+ /* Keep recessed inset; focus ring uses outline (ax-focus-ring-editor) */
3809
+ box-shadow: var(--ax-sys-effect-field-focus);
3810
+ }
3811
+ }
3812
+
3518
3813
  @utility h1 {
3519
3814
  font-size: 2.5rem;
3520
3815
  font-weight: 500;