@acorex/styles 22.1.0-next.0 → 22.1.0-next.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 (18) hide show
  1. package/components/_actionsheet.css +20 -3
  2. package/components/_drop-down.css +36 -11
  3. package/components/_editor-container.css +149 -4
  4. package/components/_floating-surface.css +24 -0
  5. package/components/_list.css +2 -1
  6. package/components/index.css +1 -0
  7. package/package.json +72 -1
  8. package/themes/appearance.contract.mjs +81 -0
  9. package/themes/appearance.contract.test.mjs +910 -0
  10. package/themes/appearance.css +15 -0
  11. package/themes/appearances/depth.css +377 -0
  12. package/themes/appearances/flat.css +63 -0
  13. package/themes/appearances/index.css +73 -0
  14. package/themes/appearances/translucent.css +77 -0
  15. package/themes/contrast/enhanced.css +85 -0
  16. package/themes/contrast/high.css +131 -0
  17. package/themes/contrast/index.css +10 -0
  18. package/themes/default.css +307 -10
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));
@@ -3228,6 +3347,91 @@ 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),
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
+
3231
3435
  @utility ax-fill {
3232
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));
3233
3437
  &.ax-default {
@@ -3313,13 +3517,19 @@ html.ax-dark {
3313
3517
  }
3314
3518
 
3315
3519
  @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));
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));
3317
3521
  &.ax-default {
3318
3522
  @apply border-border-surface border;
3319
3523
  }
3320
3524
  &.ax-state-selected {
3321
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));
3322
3526
  }
3527
+ &.ax-state-disabled,
3528
+ &:disabled {
3529
+ box-shadow: var(--ax-sys-elevation-0);
3530
+ background-image: none;
3531
+ transform: none;
3532
+ }
3323
3533
  &.ax-editor-container {
3324
3534
  &:focus-within {
3325
3535
  @apply ax-focus-ring-editor;
@@ -3331,13 +3541,14 @@ html.ax-dark {
3331
3541
  @supports (color: color-mix(in lab, red, red)) {
3332
3542
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg-lightest, var(--color-on-lightest)) 25%, transparent);
3333
3543
  }
3334
- @apply ax-solid transition-colors outline-none;
3544
+ @apply ax-solid outline-none;
3335
3545
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3336
3546
  &:hover,
3337
3547
  &:focus,
3338
3548
  &:focus-within,
3339
3549
  &:focus-visible,
3340
3550
  &.ax-state-focus {
3551
+ /* Color only — box-shadow/elevation owned by component (keeps Contrast border). */
3341
3552
  background-color: var(--ax-comp-bg-dark, var(--color-lighter));
3342
3553
  color: var(--ax-comp-text-dark, var(--color-on-lighter));
3343
3554
  @variant dark {
@@ -3353,23 +3564,30 @@ html.ax-dark {
3353
3564
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected):active {
3354
3565
  background-color: var(--ax-comp-bg-darker, var(--color-light));
3355
3566
  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
3567
  @variant dark {
3359
3568
  background-color: var(--ax-comp-bg-darker, var(--color-dark));
3360
3569
  color: var(--ax-comp-text-darker, var(--color-on-dark));
3361
3570
  }
3362
3571
  }
3572
+ &.ax-state-loading {
3573
+ transform: none;
3574
+ }
3363
3575
  }
3364
3576
 
3365
3577
  @utility ax-outline {
3366
- @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));
3367
3579
  &.ax-default {
3368
3580
  @apply border-border-lightest dark:border-border-darkest border;
3369
3581
  }
3370
3582
  &.ax-state-selected {
3371
3583
  @apply border-(--ax-comp-bg-darker,var(--color-border-light)) text-(--ax-comp-bg-darker,var(--color-on-light));
3372
3584
  }
3585
+ &.ax-state-disabled,
3586
+ &:disabled {
3587
+ box-shadow: var(--ax-sys-elevation-0);
3588
+ background-image: none;
3589
+ transform: none;
3590
+ }
3373
3591
  &.ax-editor-container {
3374
3592
  &:focus-within {
3375
3593
  @apply ax-focus-ring-editor;
@@ -3381,7 +3599,7 @@ html.ax-dark {
3381
3599
  @supports (color: color-mix(in lab, red, red)) {
3382
3600
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3383
3601
  }
3384
- @apply ax-outline transition-colors outline-none;
3602
+ @apply ax-outline outline-none;
3385
3603
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3386
3604
  &:hover,
3387
3605
  &:focus,
@@ -3400,20 +3618,29 @@ html.ax-dark {
3400
3618
  border-color: var(--ax-comp-bg-darker, var(--color-border-light));
3401
3619
  color: var(--ax-comp-bg-darker, var(--color-on-light));
3402
3620
  }
3621
+ &.ax-state-loading {
3622
+ transform: none;
3623
+ }
3403
3624
  }
3404
3625
 
3405
3626
  @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));
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));
3407
3628
  &.ax-state-selected {
3408
3629
  @apply bg-(--ax-comp-bg-light,var(--color-surface)) text-(--ax-comp-text-light,var(--color-on-surface));
3409
3630
  }
3631
+ &.ax-state-disabled,
3632
+ &:disabled {
3633
+ box-shadow: var(--ax-sys-elevation-0);
3634
+ background-image: none;
3635
+ transform: none;
3636
+ }
3410
3637
  }
3411
3638
 
3412
3639
  @utility ax-twotone-interactive {
3413
3640
  @supports (color: color-mix(in lab, red, red)) {
3414
3641
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3415
3642
  }
3416
- @apply ax-twotone transition-colors outline-none;
3643
+ @apply ax-twotone outline-none;
3417
3644
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3418
3645
  &:hover,
3419
3646
  &:focus,
@@ -3436,20 +3663,29 @@ html.ax-dark {
3436
3663
  background-color: var(--ax-comp-bg-light, var(--color-surface));
3437
3664
  color: var(--ax-comp-text-light, var(--color-on-surface));
3438
3665
  }
3666
+ &.ax-state-loading {
3667
+ transform: none;
3668
+ }
3439
3669
  }
3440
3670
 
3441
3671
  @utility ax-blank {
3442
- @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));
3443
3673
  &.ax-state-selected {
3444
3674
  @apply bg-(--ax-comp-bg-lighter,var(--color-surface)) text-(--ax-comp-text-lighter,var(--color-on-surface));
3445
3675
  }
3676
+ &.ax-state-disabled,
3677
+ &:disabled {
3678
+ box-shadow: var(--ax-sys-elevation-0);
3679
+ background-image: none;
3680
+ transform: none;
3681
+ }
3446
3682
  }
3447
3683
 
3448
3684
  @utility ax-blank-interactive {
3449
3685
  @supports (color: color-mix(in lab, red, red)) {
3450
3686
  --ax-comp-ripple-color: color-mix(in oklab, var(--ax-comp-bg, var(--color-on-lightest)) 25%, transparent);
3451
3687
  }
3452
- @apply ax-blank transition-colors outline-none;
3688
+ @apply ax-blank outline-none;
3453
3689
  &:not(.ax-state-disabled, .ax-state-loading, .ax-state-selected) {
3454
3690
  &:hover,
3455
3691
  &:focus,
@@ -3472,6 +3708,9 @@ html.ax-dark {
3472
3708
  background-color: var(--ax-comp-bg-lighter, var(--color-surface));
3473
3709
  color: var(--ax-comp-text-lighter, var(--color-on-surface));
3474
3710
  }
3711
+ &.ax-state-loading {
3712
+ transform: none;
3713
+ }
3475
3714
  }
3476
3715
 
3477
3716
  @utility ax-link {
@@ -3515,6 +3754,64 @@ html.ax-dark {
3515
3754
  @apply ax-link;
3516
3755
  }
3517
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
+
3518
3815
  @utility h1 {
3519
3816
  font-size: 2.5rem;
3520
3817
  font-weight: 500;