@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.
- package/components/_actionsheet.css +20 -3
- package/components/_drop-down.css +36 -11
- package/components/_editor-container.css +149 -4
- package/components/_floating-surface.css +24 -0
- package/components/_list.css +2 -1
- package/components/index.css +1 -0
- package/package.json +72 -1
- package/themes/appearance.contract.mjs +81 -0
- package/themes/appearance.contract.test.mjs +910 -0
- package/themes/appearance.css +15 -0
- package/themes/appearances/depth.css +377 -0
- package/themes/appearances/flat.css +63 -0
- package/themes/appearances/index.css +73 -0
- package/themes/appearances/translucent.css +77 -0
- package/themes/contrast/enhanced.css +85 -0
- package/themes/contrast/high.css +131 -0
- package/themes/contrast/index.css +10 -0
- package/themes/default.css +307 -10
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* ACoreX Appearance — backward-compatible aggregate entry point.
|
|
3
|
+
*
|
|
4
|
+
* Activation classes:
|
|
5
|
+
* .ax-appearance-flat — explicit flat (optional; flat is default)
|
|
6
|
+
* .ax-appearance-depth — dimensional depth
|
|
7
|
+
* .ax-appearance-translucent — floating/modal surfaces only (subtree)
|
|
8
|
+
*
|
|
9
|
+
* Apply on <html> or any subtree. Independent from theme, look, size, and APIs.
|
|
10
|
+
* Component styles consume semantic tokens via component-level variables.
|
|
11
|
+
*
|
|
12
|
+
* Selective import: @import "@acorex/styles/themes/appearances/depth.css";
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
@import './appearances/index.css';
|
|
@@ -0,0 +1,377 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Depth — tactile, beveled, skeuomorphic-lite appearance.
|
|
3
|
+
* Convex gradient + inner rim + bevel + contact/ambient shadows on controls.
|
|
4
|
+
* Fields are lightly recessed; floating/modal surfaces use elevation hierarchy only.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
.ax-appearance-depth {
|
|
8
|
+
--ax-ref-shadow-0: 0 0 #0000;
|
|
9
|
+
|
|
10
|
+
--ax-ref-shadow-100: 0 1px 1px rgb(15 23 42 / 0.14), 0 3px 5px rgb(15 23 42 / 0.09);
|
|
11
|
+
--ax-ref-shadow-200: 0 2px 2px rgb(15 23 42 / 0.16), 0 5px 9px rgb(15 23 42 / 0.11);
|
|
12
|
+
--ax-ref-shadow-300: 0 3px 3px rgb(15 23 42 / 0.22), 0 10px 18px rgb(15 23 42 / 0.15);
|
|
13
|
+
--ax-ref-shadow-400: 0 5px 6px rgb(15 23 42 / 0.22), 0 18px 36px rgb(15 23 42 / 0.17);
|
|
14
|
+
|
|
15
|
+
--ax-ref-inset-low: inset 0 1px 2px rgb(15 23 42 / 0.1), inset 0 0 0 1px rgb(15 23 42 / 0.035);
|
|
16
|
+
--ax-ref-inset-medium: inset 0 1px 3px rgb(15 23 42 / 0.13), inset 0 0 0 1px rgb(15 23 42 / 0.04);
|
|
17
|
+
--ax-ref-inset-high: inset 0 2px 4px rgb(15 23 42 / 0.2), inset 0 -1px 1px rgb(255 255 255 / 0.12);
|
|
18
|
+
|
|
19
|
+
--ax-ref-highlight-low: inset 0 1px 0 rgb(255 255 255 / 0.22);
|
|
20
|
+
--ax-ref-highlight-medium: inset 0 1px 0 rgb(255 255 255 / 0.28);
|
|
21
|
+
|
|
22
|
+
--ax-ref-gradient-control: linear-gradient(
|
|
23
|
+
180deg,
|
|
24
|
+
rgb(255 255 255 / 0.18) 0%,
|
|
25
|
+
rgb(255 255 255 / 0.08) 16%,
|
|
26
|
+
rgb(255 255 255 / 0.015) 45%,
|
|
27
|
+
rgb(15 23 42 / 0.035) 74%,
|
|
28
|
+
rgb(15 23 42 / 0.075) 100%
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
--ax-ref-gradient-control-hover: linear-gradient(
|
|
32
|
+
180deg,
|
|
33
|
+
rgb(255 255 255 / 0.22) 0%,
|
|
34
|
+
rgb(255 255 255 / 0.1) 16%,
|
|
35
|
+
rgb(255 255 255 / 0.02) 44%,
|
|
36
|
+
rgb(15 23 42 / 0.045) 74%,
|
|
37
|
+
rgb(15 23 42 / 0.09) 100%
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
--ax-ref-gradient-control-active: linear-gradient(
|
|
41
|
+
180deg,
|
|
42
|
+
rgb(15 23 42 / 0.1) 0%,
|
|
43
|
+
rgb(15 23 42 / 0.035) 45%,
|
|
44
|
+
rgb(255 255 255 / 0.05) 100%
|
|
45
|
+
);
|
|
46
|
+
|
|
47
|
+
--ax-ref-gradient-control-neutral: linear-gradient(
|
|
48
|
+
180deg,
|
|
49
|
+
rgb(255 255 255 / 0.42) 0%,
|
|
50
|
+
rgb(255 255 255 / 0.16) 22%,
|
|
51
|
+
rgb(255 255 255 / 0.02) 55%,
|
|
52
|
+
rgb(15 23 42 / 0.025) 80%,
|
|
53
|
+
rgb(15 23 42 / 0.055) 100%
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
--ax-ref-gradient-control-neutral-hover: linear-gradient(
|
|
57
|
+
180deg,
|
|
58
|
+
rgb(255 255 255 / 0.5) 0%,
|
|
59
|
+
rgb(255 255 255 / 0.2) 22%,
|
|
60
|
+
rgb(255 255 255 / 0.025) 55%,
|
|
61
|
+
rgb(15 23 42 / 0.03) 80%,
|
|
62
|
+
rgb(15 23 42 / 0.065) 100%
|
|
63
|
+
);
|
|
64
|
+
|
|
65
|
+
--ax-ref-gradient-control-neutral-active: linear-gradient(
|
|
66
|
+
180deg,
|
|
67
|
+
rgb(15 23 42 / 0.07) 0%,
|
|
68
|
+
rgb(15 23 42 / 0.02) 45%,
|
|
69
|
+
rgb(255 255 255 / 0.06) 100%
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
--ax-ref-gradient-surface: linear-gradient(180deg, rgb(255 255 255 / 0.04) 0%, rgb(255 255 255 / 0) 100%);
|
|
73
|
+
|
|
74
|
+
--ax-ref-motion-standard: 200ms;
|
|
75
|
+
|
|
76
|
+
/* Solid — full tactile treatment */
|
|
77
|
+
--ax-sys-effect-control-rest: var(--ax-ref-shadow-100);
|
|
78
|
+
/* Hover keeps rest elevation — do not lift further on hover */
|
|
79
|
+
--ax-sys-effect-control-hover: var(--ax-sys-effect-control-rest);
|
|
80
|
+
/* Outer elevation cleared on active — pressed structure owned by bevel-active */
|
|
81
|
+
--ax-sys-effect-control-active: var(--ax-ref-shadow-0);
|
|
82
|
+
/* Twotone — ~40% weaker outer elevation */
|
|
83
|
+
--ax-sys-effect-control-subtle-rest: 0 1px 1px rgb(15 23 42 / 0.1);
|
|
84
|
+
--ax-sys-effect-control-subtle-hover: var(--ax-sys-effect-control-subtle-rest);
|
|
85
|
+
|
|
86
|
+
/* Fields — lightly recessed (readable, not heavy) */
|
|
87
|
+
--ax-sys-effect-field-rest: var(--ax-ref-inset-low);
|
|
88
|
+
--ax-sys-effect-field-hover: var(--ax-ref-inset-medium);
|
|
89
|
+
--ax-sys-effect-field-focus: inset 0 1px 2px rgb(15 23 42 / 0.12), inset 0 0 0 1px rgb(15 23 42 / 0.03);
|
|
90
|
+
--ax-sys-effect-field-readonly: inset 0 1px 2px rgb(15 23 42 / 0.06);
|
|
91
|
+
--ax-sys-effect-field-disabled: var(--ax-ref-shadow-0);
|
|
92
|
+
|
|
93
|
+
/* Surfaces — elevation hierarchy without control bevel */
|
|
94
|
+
--ax-sys-effect-surface: var(--ax-ref-shadow-100);
|
|
95
|
+
--ax-sys-effect-floating: var(--ax-ref-shadow-200);
|
|
96
|
+
--ax-sys-effect-prominent-floating: var(--ax-ref-shadow-300);
|
|
97
|
+
--ax-sys-effect-overlay: var(--ax-ref-shadow-300);
|
|
98
|
+
--ax-sys-effect-modal: var(--ax-ref-shadow-400);
|
|
99
|
+
|
|
100
|
+
--ax-sys-gradient-control-rest: var(--ax-ref-gradient-control);
|
|
101
|
+
--ax-sys-gradient-control-hover: var(--ax-sys-gradient-control-rest);
|
|
102
|
+
--ax-sys-gradient-control-active: var(--ax-ref-gradient-control-active);
|
|
103
|
+
--ax-sys-gradient-surface: var(--ax-ref-gradient-surface);
|
|
104
|
+
|
|
105
|
+
--ax-sys-highlight-control: var(--ax-ref-highlight-medium);
|
|
106
|
+
--ax-sys-highlight-control-subtle: var(--ax-ref-highlight-low);
|
|
107
|
+
--ax-sys-highlight-surface: var(--ax-ref-highlight-low);
|
|
108
|
+
|
|
109
|
+
--ax-sys-inner-border-control: inset 0 0 0 1px rgb(15 23 42 / 0.14);
|
|
110
|
+
--ax-sys-inner-border-surface: inset 0 0 0 1px rgb(15 23 42 / 0.12);
|
|
111
|
+
|
|
112
|
+
--ax-sys-bevel-control-rest:
|
|
113
|
+
inset 0 1px 0 rgb(255 255 255 / 0.26), inset 0 -2px 2px rgb(15 23 42 / 0.1);
|
|
114
|
+
--ax-sys-bevel-control-hover: var(--ax-sys-bevel-control-rest);
|
|
115
|
+
--ax-sys-bevel-control-active: var(--ax-ref-inset-high);
|
|
116
|
+
--ax-sys-bevel-control-disabled: var(--ax-ref-shadow-0);
|
|
117
|
+
|
|
118
|
+
/*
|
|
119
|
+
* Default/Neutral — pale solid reference:
|
|
120
|
+
* CSS border + soft outer shadow + light convex gradient.
|
|
121
|
+
* No inset bevel/inner-border (those read as a grey bar on white fills).
|
|
122
|
+
* Hover mirrors rest.
|
|
123
|
+
*/
|
|
124
|
+
--ax-sys-effect-control-neutral-rest:
|
|
125
|
+
0 1px 2px rgb(15 23 42 / 0.08), 0 2px 4px rgb(15 23 42 / 0.05);
|
|
126
|
+
--ax-sys-effect-control-neutral-hover: var(--ax-sys-effect-control-neutral-rest);
|
|
127
|
+
--ax-sys-effect-control-neutral-active: var(--ax-ref-shadow-0);
|
|
128
|
+
--ax-sys-effect-control-neutral-disabled: var(--ax-ref-shadow-0);
|
|
129
|
+
--ax-sys-bevel-control-neutral-rest: 0 0 #0000;
|
|
130
|
+
--ax-sys-bevel-control-neutral-hover: 0 0 #0000;
|
|
131
|
+
--ax-sys-bevel-control-neutral-active: var(--ax-ref-inset-high);
|
|
132
|
+
--ax-sys-bevel-control-neutral-disabled: var(--ax-ref-shadow-0);
|
|
133
|
+
--ax-sys-inner-border-control-neutral-rest: 0 0 #0000;
|
|
134
|
+
--ax-sys-inner-border-control-neutral-hover: 0 0 #0000;
|
|
135
|
+
--ax-sys-inner-border-control-neutral-active: 0 0 #0000;
|
|
136
|
+
--ax-sys-gradient-control-neutral-rest: var(--ax-ref-gradient-control-neutral);
|
|
137
|
+
--ax-sys-gradient-control-neutral-hover: var(--ax-sys-gradient-control-neutral-rest);
|
|
138
|
+
--ax-sys-gradient-control-neutral-active: var(--ax-ref-gradient-control-neutral-active);
|
|
139
|
+
|
|
140
|
+
--ax-sys-transform-control-rest: none;
|
|
141
|
+
--ax-sys-transform-control-hover: none;
|
|
142
|
+
--ax-sys-transform-control-active: translateY(1px);
|
|
143
|
+
--ax-sys-transform-control-disabled: none;
|
|
144
|
+
|
|
145
|
+
--ax-sys-filter-surface: none;
|
|
146
|
+
--ax-sys-backdrop-filter-surface: none;
|
|
147
|
+
--ax-sys-surface-fill-opacity: 1;
|
|
148
|
+
|
|
149
|
+
--ax-sys-surface-overlay-control-rest: transparent;
|
|
150
|
+
--ax-sys-surface-overlay-control-hover: transparent;
|
|
151
|
+
--ax-sys-surface-overlay-control-active: transparent;
|
|
152
|
+
--ax-sys-surface-overlay-control-subtle-rest: transparent;
|
|
153
|
+
--ax-sys-surface-overlay-control-subtle-hover: transparent;
|
|
154
|
+
--ax-sys-surface-overlay-control-subtle-active: transparent;
|
|
155
|
+
|
|
156
|
+
--ax-sys-surface-overlay-field-rest: transparent;
|
|
157
|
+
--ax-sys-surface-overlay-field-hover: transparent;
|
|
158
|
+
--ax-sys-surface-overlay-field-focus: transparent;
|
|
159
|
+
--ax-sys-surface-overlay-field-readonly: transparent;
|
|
160
|
+
--ax-sys-surface-overlay-field-disabled: transparent;
|
|
161
|
+
|
|
162
|
+
--ax-sys-surface-overlay-surface: transparent;
|
|
163
|
+
--ax-sys-surface-overlay-floating: transparent;
|
|
164
|
+
--ax-sys-surface-overlay-prominent-floating: transparent;
|
|
165
|
+
--ax-sys-surface-overlay-overlay: transparent;
|
|
166
|
+
--ax-sys-surface-overlay-modal: transparent;
|
|
167
|
+
|
|
168
|
+
--ax-sys-motion-duration: var(--ax-ref-motion-standard);
|
|
169
|
+
--ax-sys-motion-timing: cubic-bezier(0.4, 0, 0.2, 1);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
/* Dark mode — Depth (separate tactile treatment) */
|
|
173
|
+
|
|
174
|
+
.ax-dark.ax-appearance-depth,
|
|
175
|
+
.ax-dark .ax-appearance-depth,
|
|
176
|
+
.ax-appearance-depth .ax-dark {
|
|
177
|
+
--ax-ref-shadow-100: 0 1px 1px rgb(0 0 0 / 0.42), 0 3px 5px rgb(0 0 0 / 0.32);
|
|
178
|
+
--ax-ref-shadow-200: 0 2px 2px rgb(0 0 0 / 0.46), 0 6px 10px rgb(0 0 0 / 0.36);
|
|
179
|
+
--ax-ref-shadow-300: 0 3px 3px rgb(0 0 0 / 0.5), 0 10px 18px rgb(0 0 0 / 0.38);
|
|
180
|
+
--ax-ref-shadow-400: 0 5px 6px rgb(0 0 0 / 0.52), 0 18px 36px rgb(0 0 0 / 0.42);
|
|
181
|
+
|
|
182
|
+
--ax-ref-inset-low: inset 0 1px 2px rgb(0 0 0 / 0.32), inset 0 0 0 1px rgb(255 255 255 / 0.05);
|
|
183
|
+
--ax-ref-inset-medium: inset 0 1px 3px rgb(0 0 0 / 0.38), inset 0 0 0 1px rgb(255 255 255 / 0.06);
|
|
184
|
+
--ax-ref-inset-high: inset 0 2px 4px rgb(0 0 0 / 0.56), inset 0 -1px 1px rgb(255 255 255 / 0.06);
|
|
185
|
+
|
|
186
|
+
--ax-ref-highlight-low: inset 0 1px 0 rgb(255 255 255 / 0.08);
|
|
187
|
+
--ax-ref-highlight-medium: inset 0 1px 0 rgb(255 255 255 / 0.1);
|
|
188
|
+
|
|
189
|
+
--ax-ref-gradient-control: linear-gradient(
|
|
190
|
+
180deg,
|
|
191
|
+
rgb(255 255 255 / 0.05) 0%,
|
|
192
|
+
rgb(255 255 255 / 0.015) 16%,
|
|
193
|
+
rgb(255 255 255 / 0.005) 45%,
|
|
194
|
+
rgb(0 0 0 / 0.08) 74%,
|
|
195
|
+
rgb(0 0 0 / 0.16) 100%
|
|
196
|
+
);
|
|
197
|
+
|
|
198
|
+
--ax-ref-gradient-control-hover: linear-gradient(
|
|
199
|
+
180deg,
|
|
200
|
+
rgb(255 255 255 / 0.07) 0%,
|
|
201
|
+
rgb(255 255 255 / 0.02) 16%,
|
|
202
|
+
rgb(255 255 255 / 0.008) 44%,
|
|
203
|
+
rgb(0 0 0 / 0.1) 74%,
|
|
204
|
+
rgb(0 0 0 / 0.19) 100%
|
|
205
|
+
);
|
|
206
|
+
|
|
207
|
+
--ax-ref-gradient-control-active: linear-gradient(
|
|
208
|
+
180deg,
|
|
209
|
+
rgb(0 0 0 / 0.18) 0%,
|
|
210
|
+
rgb(0 0 0 / 0.06) 45%,
|
|
211
|
+
rgb(255 255 255 / 0.04) 100%
|
|
212
|
+
);
|
|
213
|
+
|
|
214
|
+
--ax-ref-gradient-control-neutral: linear-gradient(
|
|
215
|
+
180deg,
|
|
216
|
+
rgb(255 255 255 / 0.06) 0%,
|
|
217
|
+
rgb(255 255 255 / 0.02) 18%,
|
|
218
|
+
rgb(255 255 255 / 0.006) 48%,
|
|
219
|
+
rgb(0 0 0 / 0.06) 76%,
|
|
220
|
+
rgb(0 0 0 / 0.12) 100%
|
|
221
|
+
);
|
|
222
|
+
|
|
223
|
+
--ax-ref-gradient-control-neutral-hover: linear-gradient(
|
|
224
|
+
180deg,
|
|
225
|
+
rgb(255 255 255 / 0.08) 0%,
|
|
226
|
+
rgb(255 255 255 / 0.025) 18%,
|
|
227
|
+
rgb(255 255 255 / 0.01) 48%,
|
|
228
|
+
rgb(0 0 0 / 0.08) 76%,
|
|
229
|
+
rgb(0 0 0 / 0.15) 100%
|
|
230
|
+
);
|
|
231
|
+
|
|
232
|
+
--ax-ref-gradient-control-neutral-active: linear-gradient(
|
|
233
|
+
180deg,
|
|
234
|
+
rgb(0 0 0 / 0.14) 0%,
|
|
235
|
+
rgb(0 0 0 / 0.05) 45%,
|
|
236
|
+
rgb(255 255 255 / 0.04) 100%
|
|
237
|
+
);
|
|
238
|
+
|
|
239
|
+
--ax-ref-gradient-surface: linear-gradient(180deg, rgb(255 255 255 / 0.025) 0%, rgb(255 255 255 / 0) 100%);
|
|
240
|
+
|
|
241
|
+
--ax-sys-effect-control-subtle-rest: 0 1px 1px rgb(0 0 0 / 0.28);
|
|
242
|
+
--ax-sys-effect-control-subtle-hover: var(--ax-sys-effect-control-subtle-rest);
|
|
243
|
+
--ax-sys-effect-field-focus: inset 0 1px 2px rgb(0 0 0 / 0.34), inset 0 0 0 1px rgb(255 255 255 / 0.04);
|
|
244
|
+
--ax-sys-effect-field-readonly: inset 0 1px 2px rgb(0 0 0 / 0.24);
|
|
245
|
+
|
|
246
|
+
--ax-sys-inner-border-control: inset 0 0 0 1px rgb(255 255 255 / 0.14);
|
|
247
|
+
--ax-sys-inner-border-surface: inset 0 0 0 1px rgb(255 255 255 / 0.1);
|
|
248
|
+
|
|
249
|
+
--ax-sys-bevel-control-rest:
|
|
250
|
+
inset 0 1px 0 rgb(255 255 255 / 0.08), inset 0 -2px 2px rgb(0 0 0 / 0.24);
|
|
251
|
+
--ax-sys-bevel-control-hover: var(--ax-sys-bevel-control-rest);
|
|
252
|
+
|
|
253
|
+
--ax-sys-effect-control-neutral-rest:
|
|
254
|
+
0 1px 2px rgb(0 0 0 / 0.35), 0 2px 4px rgb(0 0 0 / 0.22);
|
|
255
|
+
--ax-sys-effect-control-neutral-hover: var(--ax-sys-effect-control-neutral-rest);
|
|
256
|
+
--ax-sys-effect-control-neutral-active: var(--ax-ref-shadow-0);
|
|
257
|
+
--ax-sys-effect-control-neutral-disabled: var(--ax-ref-shadow-0);
|
|
258
|
+
--ax-sys-bevel-control-neutral-rest: 0 0 #0000;
|
|
259
|
+
--ax-sys-bevel-control-neutral-hover: 0 0 #0000;
|
|
260
|
+
--ax-sys-bevel-control-neutral-active: var(--ax-ref-inset-high);
|
|
261
|
+
--ax-sys-bevel-control-neutral-disabled: var(--ax-ref-shadow-0);
|
|
262
|
+
--ax-sys-inner-border-control-neutral-rest: 0 0 #0000;
|
|
263
|
+
--ax-sys-inner-border-control-neutral-hover: 0 0 #0000;
|
|
264
|
+
--ax-sys-inner-border-control-neutral-active: 0 0 #0000;
|
|
265
|
+
--ax-sys-gradient-control-neutral-rest: var(--ax-ref-gradient-control-neutral);
|
|
266
|
+
--ax-sys-gradient-control-neutral-hover: var(--ax-sys-gradient-control-neutral-rest);
|
|
267
|
+
--ax-sys-gradient-control-neutral-active: var(--ax-ref-gradient-control-neutral-active);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
/* Nested Light inside Dark — Depth */
|
|
271
|
+
|
|
272
|
+
.ax-dark .ax-light.ax-appearance-depth,
|
|
273
|
+
.ax-dark .ax-appearance-depth .ax-light,
|
|
274
|
+
.ax-dark.ax-appearance-depth .ax-light,
|
|
275
|
+
.ax-appearance-depth .ax-dark .ax-light {
|
|
276
|
+
--ax-ref-shadow-100: 0 1px 1px rgb(15 23 42 / 0.14), 0 3px 5px rgb(15 23 42 / 0.09);
|
|
277
|
+
--ax-ref-shadow-200: 0 2px 2px rgb(15 23 42 / 0.16), 0 5px 9px rgb(15 23 42 / 0.11);
|
|
278
|
+
--ax-ref-shadow-300: 0 3px 3px rgb(15 23 42 / 0.22), 0 10px 18px rgb(15 23 42 / 0.15);
|
|
279
|
+
--ax-ref-shadow-400: 0 5px 6px rgb(15 23 42 / 0.22), 0 18px 36px rgb(15 23 42 / 0.17);
|
|
280
|
+
|
|
281
|
+
--ax-ref-inset-low: inset 0 1px 2px rgb(15 23 42 / 0.1), inset 0 0 0 1px rgb(15 23 42 / 0.035);
|
|
282
|
+
--ax-ref-inset-medium: inset 0 1px 3px rgb(15 23 42 / 0.13), inset 0 0 0 1px rgb(15 23 42 / 0.04);
|
|
283
|
+
--ax-ref-inset-high: inset 0 2px 4px rgb(15 23 42 / 0.2), inset 0 -1px 1px rgb(255 255 255 / 0.12);
|
|
284
|
+
|
|
285
|
+
--ax-ref-highlight-low: inset 0 1px 0 rgb(255 255 255 / 0.22);
|
|
286
|
+
--ax-ref-highlight-medium: inset 0 1px 0 rgb(255 255 255 / 0.28);
|
|
287
|
+
|
|
288
|
+
--ax-ref-gradient-control: linear-gradient(
|
|
289
|
+
180deg,
|
|
290
|
+
rgb(255 255 255 / 0.18) 0%,
|
|
291
|
+
rgb(255 255 255 / 0.08) 16%,
|
|
292
|
+
rgb(255 255 255 / 0.015) 45%,
|
|
293
|
+
rgb(15 23 42 / 0.035) 74%,
|
|
294
|
+
rgb(15 23 42 / 0.075) 100%
|
|
295
|
+
);
|
|
296
|
+
|
|
297
|
+
--ax-ref-gradient-control-hover: linear-gradient(
|
|
298
|
+
180deg,
|
|
299
|
+
rgb(255 255 255 / 0.22) 0%,
|
|
300
|
+
rgb(255 255 255 / 0.1) 16%,
|
|
301
|
+
rgb(255 255 255 / 0.02) 44%,
|
|
302
|
+
rgb(15 23 42 / 0.045) 74%,
|
|
303
|
+
rgb(15 23 42 / 0.09) 100%
|
|
304
|
+
);
|
|
305
|
+
|
|
306
|
+
--ax-ref-gradient-control-active: linear-gradient(
|
|
307
|
+
180deg,
|
|
308
|
+
rgb(15 23 42 / 0.1) 0%,
|
|
309
|
+
rgb(15 23 42 / 0.035) 45%,
|
|
310
|
+
rgb(255 255 255 / 0.05) 100%
|
|
311
|
+
);
|
|
312
|
+
|
|
313
|
+
--ax-ref-gradient-control-neutral: linear-gradient(
|
|
314
|
+
180deg,
|
|
315
|
+
rgb(255 255 255 / 0.42) 0%,
|
|
316
|
+
rgb(255 255 255 / 0.16) 22%,
|
|
317
|
+
rgb(255 255 255 / 0.02) 55%,
|
|
318
|
+
rgb(15 23 42 / 0.025) 80%,
|
|
319
|
+
rgb(15 23 42 / 0.055) 100%
|
|
320
|
+
);
|
|
321
|
+
|
|
322
|
+
--ax-ref-gradient-control-neutral-hover: linear-gradient(
|
|
323
|
+
180deg,
|
|
324
|
+
rgb(255 255 255 / 0.5) 0%,
|
|
325
|
+
rgb(255 255 255 / 0.2) 22%,
|
|
326
|
+
rgb(255 255 255 / 0.025) 55%,
|
|
327
|
+
rgb(15 23 42 / 0.03) 80%,
|
|
328
|
+
rgb(15 23 42 / 0.065) 100%
|
|
329
|
+
);
|
|
330
|
+
|
|
331
|
+
--ax-ref-gradient-control-neutral-active: linear-gradient(
|
|
332
|
+
180deg,
|
|
333
|
+
rgb(15 23 42 / 0.07) 0%,
|
|
334
|
+
rgb(15 23 42 / 0.02) 45%,
|
|
335
|
+
rgb(255 255 255 / 0.06) 100%
|
|
336
|
+
);
|
|
337
|
+
|
|
338
|
+
--ax-ref-gradient-surface: linear-gradient(180deg, rgb(255 255 255 / 0.04) 0%, rgb(255 255 255 / 0) 100%);
|
|
339
|
+
|
|
340
|
+
--ax-sys-effect-control-subtle-rest: 0 1px 1px rgb(15 23 42 / 0.1);
|
|
341
|
+
--ax-sys-effect-control-subtle-hover: var(--ax-sys-effect-control-subtle-rest);
|
|
342
|
+
--ax-sys-effect-field-focus: inset 0 1px 2px rgb(15 23 42 / 0.12), inset 0 0 0 1px rgb(15 23 42 / 0.03);
|
|
343
|
+
--ax-sys-effect-field-readonly: inset 0 1px 2px rgb(15 23 42 / 0.06);
|
|
344
|
+
|
|
345
|
+
--ax-sys-inner-border-control: inset 0 0 0 1px rgb(15 23 42 / 0.14);
|
|
346
|
+
--ax-sys-inner-border-surface: inset 0 0 0 1px rgb(15 23 42 / 0.12);
|
|
347
|
+
|
|
348
|
+
--ax-sys-bevel-control-rest:
|
|
349
|
+
inset 0 1px 0 rgb(255 255 255 / 0.26), inset 0 -2px 2px rgb(15 23 42 / 0.1);
|
|
350
|
+
--ax-sys-bevel-control-hover: var(--ax-sys-bevel-control-rest);
|
|
351
|
+
|
|
352
|
+
--ax-sys-effect-control-neutral-rest:
|
|
353
|
+
0 1px 2px rgb(15 23 42 / 0.08), 0 2px 4px rgb(15 23 42 / 0.05);
|
|
354
|
+
--ax-sys-effect-control-neutral-hover: var(--ax-sys-effect-control-neutral-rest);
|
|
355
|
+
--ax-sys-effect-control-neutral-active: var(--ax-ref-shadow-0);
|
|
356
|
+
--ax-sys-effect-control-neutral-disabled: var(--ax-ref-shadow-0);
|
|
357
|
+
--ax-sys-bevel-control-neutral-rest: 0 0 #0000;
|
|
358
|
+
--ax-sys-bevel-control-neutral-hover: 0 0 #0000;
|
|
359
|
+
--ax-sys-bevel-control-neutral-active: var(--ax-ref-inset-high);
|
|
360
|
+
--ax-sys-bevel-control-neutral-disabled: var(--ax-ref-shadow-0);
|
|
361
|
+
--ax-sys-inner-border-control-neutral-rest: 0 0 #0000;
|
|
362
|
+
--ax-sys-inner-border-control-neutral-hover: 0 0 #0000;
|
|
363
|
+
--ax-sys-inner-border-control-neutral-active: 0 0 #0000;
|
|
364
|
+
--ax-sys-gradient-control-neutral-rest: var(--ax-ref-gradient-control-neutral);
|
|
365
|
+
--ax-sys-gradient-control-neutral-hover: var(--ax-sys-gradient-control-neutral-rest);
|
|
366
|
+
--ax-sys-gradient-control-neutral-active: var(--ax-ref-gradient-control-neutral-active);
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
@media (prefers-reduced-motion: reduce) {
|
|
370
|
+
.ax-appearance-depth,
|
|
371
|
+
.ax-dark.ax-appearance-depth,
|
|
372
|
+
.ax-dark .ax-appearance-depth,
|
|
373
|
+
.ax-appearance-depth .ax-dark {
|
|
374
|
+
--ax-sys-transform-control-active: none;
|
|
375
|
+
--ax-sys-motion-duration: 0ms;
|
|
376
|
+
}
|
|
377
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Flat — explicit flat appearance subtree override.
|
|
3
|
+
* Implicit default (no class) uses :root tokens from default.css.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
.ax-appearance-flat {
|
|
7
|
+
--ax-sys-effect-control-rest: 0 0 #0000;
|
|
8
|
+
--ax-sys-effect-control-hover: 0 0 #0000;
|
|
9
|
+
--ax-sys-effect-control-active: 0 0 #0000;
|
|
10
|
+
--ax-sys-effect-control-subtle-rest: 0 0 #0000;
|
|
11
|
+
--ax-sys-effect-control-subtle-hover: 0 0 #0000;
|
|
12
|
+
|
|
13
|
+
--ax-sys-effect-field-rest: 0 0 #0000;
|
|
14
|
+
--ax-sys-effect-field-hover: 0 0 #0000;
|
|
15
|
+
--ax-sys-effect-field-focus: 0 0 #0000;
|
|
16
|
+
--ax-sys-effect-field-readonly: 0 0 #0000;
|
|
17
|
+
--ax-sys-effect-field-disabled: 0 0 #0000;
|
|
18
|
+
|
|
19
|
+
--ax-sys-gradient-control-rest: none;
|
|
20
|
+
--ax-sys-gradient-control-hover: none;
|
|
21
|
+
--ax-sys-gradient-control-active: none;
|
|
22
|
+
--ax-sys-gradient-surface: none;
|
|
23
|
+
|
|
24
|
+
--ax-sys-highlight-control: 0 0 #0000;
|
|
25
|
+
--ax-sys-highlight-control-subtle: 0 0 #0000;
|
|
26
|
+
--ax-sys-highlight-surface: 0 0 #0000;
|
|
27
|
+
|
|
28
|
+
--ax-sys-inner-border-control: 0 0 #0000;
|
|
29
|
+
--ax-sys-inner-border-surface: 0 0 #0000;
|
|
30
|
+
|
|
31
|
+
--ax-sys-bevel-control-rest: 0 0 #0000;
|
|
32
|
+
--ax-sys-bevel-control-hover: 0 0 #0000;
|
|
33
|
+
--ax-sys-bevel-control-active: 0 0 #0000;
|
|
34
|
+
--ax-sys-bevel-control-disabled: 0 0 #0000;
|
|
35
|
+
|
|
36
|
+
--ax-sys-transform-control-rest: none;
|
|
37
|
+
--ax-sys-transform-control-hover: none;
|
|
38
|
+
--ax-sys-transform-control-active: none;
|
|
39
|
+
--ax-sys-transform-control-disabled: none;
|
|
40
|
+
|
|
41
|
+
--ax-sys-backdrop-filter-surface: none;
|
|
42
|
+
--ax-sys-filter-surface: none;
|
|
43
|
+
--ax-sys-surface-fill-opacity: 1;
|
|
44
|
+
|
|
45
|
+
--ax-sys-surface-overlay-control-rest: transparent;
|
|
46
|
+
--ax-sys-surface-overlay-control-hover: transparent;
|
|
47
|
+
--ax-sys-surface-overlay-control-active: transparent;
|
|
48
|
+
--ax-sys-surface-overlay-control-subtle-rest: transparent;
|
|
49
|
+
--ax-sys-surface-overlay-control-subtle-hover: transparent;
|
|
50
|
+
--ax-sys-surface-overlay-control-subtle-active: transparent;
|
|
51
|
+
|
|
52
|
+
--ax-sys-surface-overlay-field-rest: transparent;
|
|
53
|
+
--ax-sys-surface-overlay-field-hover: transparent;
|
|
54
|
+
--ax-sys-surface-overlay-field-focus: transparent;
|
|
55
|
+
--ax-sys-surface-overlay-field-readonly: transparent;
|
|
56
|
+
--ax-sys-surface-overlay-field-disabled: transparent;
|
|
57
|
+
|
|
58
|
+
--ax-sys-surface-overlay-surface: transparent;
|
|
59
|
+
--ax-sys-surface-overlay-floating: transparent;
|
|
60
|
+
--ax-sys-surface-overlay-prominent-floating: transparent;
|
|
61
|
+
--ax-sys-surface-overlay-overlay: transparent;
|
|
62
|
+
--ax-sys-surface-overlay-modal: transparent;
|
|
63
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* ACoreX Appearance — aggregate of all appearance token files.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
@import './flat.css';
|
|
6
|
+
@import './depth.css';
|
|
7
|
+
@import './translucent.css';
|
|
8
|
+
|
|
9
|
+
/* Accessibility — forced colors */
|
|
10
|
+
|
|
11
|
+
@media (forced-colors: active) {
|
|
12
|
+
.ax-appearance-depth,
|
|
13
|
+
.ax-appearance-translucent,
|
|
14
|
+
.ax-dark.ax-appearance-depth,
|
|
15
|
+
.ax-dark .ax-appearance-depth,
|
|
16
|
+
.ax-appearance-depth .ax-dark,
|
|
17
|
+
.ax-dark.ax-appearance-translucent,
|
|
18
|
+
.ax-dark .ax-appearance-translucent,
|
|
19
|
+
.ax-appearance-translucent .ax-dark,
|
|
20
|
+
.ax-dark .ax-light.ax-appearance-depth,
|
|
21
|
+
.ax-dark .ax-appearance-depth .ax-light,
|
|
22
|
+
.ax-dark.ax-appearance-depth .ax-light,
|
|
23
|
+
.ax-appearance-depth .ax-dark .ax-light {
|
|
24
|
+
--ax-ref-shadow-0: 0 0 #0000;
|
|
25
|
+
--ax-ref-shadow-100: 0 0 #0000;
|
|
26
|
+
--ax-ref-shadow-200: 0 0 #0000;
|
|
27
|
+
--ax-ref-shadow-300: 0 0 #0000;
|
|
28
|
+
--ax-ref-shadow-400: 0 0 #0000;
|
|
29
|
+
--ax-ref-inset-low: 0 0 #0000;
|
|
30
|
+
--ax-ref-inset-medium: 0 0 #0000;
|
|
31
|
+
--ax-ref-inset-high: 0 0 #0000;
|
|
32
|
+
--ax-ref-highlight-low: 0 0 #0000;
|
|
33
|
+
--ax-ref-highlight-medium: 0 0 #0000;
|
|
34
|
+
--ax-sys-effect-control-rest: 0 0 #0000;
|
|
35
|
+
--ax-sys-effect-control-hover: 0 0 #0000;
|
|
36
|
+
--ax-sys-effect-control-active: 0 0 #0000;
|
|
37
|
+
--ax-sys-effect-control-subtle-rest: 0 0 #0000;
|
|
38
|
+
--ax-sys-effect-control-subtle-hover: 0 0 #0000;
|
|
39
|
+
--ax-sys-effect-field-rest: 0 0 #0000;
|
|
40
|
+
--ax-sys-effect-field-hover: 0 0 #0000;
|
|
41
|
+
--ax-sys-effect-field-focus: 0 0 #0000;
|
|
42
|
+
--ax-sys-effect-field-readonly: 0 0 #0000;
|
|
43
|
+
--ax-sys-effect-field-disabled: 0 0 #0000;
|
|
44
|
+
--ax-sys-effect-surface: 0 0 #0000;
|
|
45
|
+
--ax-sys-effect-floating: 0 0 #0000;
|
|
46
|
+
--ax-sys-effect-prominent-floating: 0 0 #0000;
|
|
47
|
+
--ax-sys-effect-overlay: 0 0 #0000;
|
|
48
|
+
--ax-sys-effect-modal: 0 0 #0000;
|
|
49
|
+
--ax-sys-gradient-control-rest: none;
|
|
50
|
+
--ax-sys-gradient-control-hover: none;
|
|
51
|
+
--ax-sys-gradient-control-active: none;
|
|
52
|
+
--ax-sys-gradient-control-neutral-rest: none;
|
|
53
|
+
--ax-sys-gradient-control-neutral-hover: none;
|
|
54
|
+
--ax-sys-gradient-control-neutral-active: none;
|
|
55
|
+
--ax-sys-gradient-surface: none;
|
|
56
|
+
--ax-sys-highlight-control: 0 0 #0000;
|
|
57
|
+
--ax-sys-highlight-control-subtle: 0 0 #0000;
|
|
58
|
+
--ax-sys-highlight-surface: 0 0 #0000;
|
|
59
|
+
--ax-sys-bevel-control-rest: 0 0 #0000;
|
|
60
|
+
--ax-sys-bevel-control-hover: 0 0 #0000;
|
|
61
|
+
--ax-sys-bevel-control-active: 0 0 #0000;
|
|
62
|
+
--ax-sys-bevel-control-disabled: 0 0 #0000;
|
|
63
|
+
--ax-sys-bevel-control-neutral-rest: 0 0 #0000;
|
|
64
|
+
--ax-sys-bevel-control-neutral-hover: 0 0 #0000;
|
|
65
|
+
--ax-sys-bevel-control-neutral-active: 0 0 #0000;
|
|
66
|
+
--ax-sys-inner-border-control: 0 0 #0000;
|
|
67
|
+
--ax-sys-inner-border-surface: 0 0 #0000;
|
|
68
|
+
--ax-sys-transform-control-active: none;
|
|
69
|
+
--ax-sys-backdrop-filter-surface: none;
|
|
70
|
+
--ax-sys-filter-surface: none;
|
|
71
|
+
--ax-sys-surface-fill-opacity: 1;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Translucent — floating and modal surfaces only.
|
|
3
|
+
* Controls and fields remain flat.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
.ax-appearance-translucent {
|
|
7
|
+
--ax-sys-effect-control-rest: 0 0 #0000;
|
|
8
|
+
--ax-sys-effect-control-hover: 0 0 #0000;
|
|
9
|
+
--ax-sys-effect-control-active: 0 0 #0000;
|
|
10
|
+
--ax-sys-effect-control-subtle-rest: 0 0 #0000;
|
|
11
|
+
--ax-sys-effect-control-subtle-hover: 0 0 #0000;
|
|
12
|
+
|
|
13
|
+
--ax-sys-effect-field-rest: 0 0 #0000;
|
|
14
|
+
--ax-sys-effect-field-hover: 0 0 #0000;
|
|
15
|
+
--ax-sys-effect-field-focus: 0 0 #0000;
|
|
16
|
+
--ax-sys-effect-field-readonly: 0 0 #0000;
|
|
17
|
+
--ax-sys-effect-field-disabled: 0 0 #0000;
|
|
18
|
+
|
|
19
|
+
--ax-sys-gradient-control-rest: none;
|
|
20
|
+
--ax-sys-gradient-control-hover: none;
|
|
21
|
+
--ax-sys-gradient-control-active: none;
|
|
22
|
+
|
|
23
|
+
--ax-sys-transform-control-rest: none;
|
|
24
|
+
--ax-sys-transform-control-hover: none;
|
|
25
|
+
--ax-sys-transform-control-active: none;
|
|
26
|
+
|
|
27
|
+
--ax-sys-surface-overlay-control-rest: transparent;
|
|
28
|
+
--ax-sys-surface-overlay-control-hover: transparent;
|
|
29
|
+
--ax-sys-surface-overlay-control-active: transparent;
|
|
30
|
+
--ax-sys-surface-overlay-control-subtle-rest: transparent;
|
|
31
|
+
--ax-sys-surface-overlay-control-subtle-hover: transparent;
|
|
32
|
+
|
|
33
|
+
--ax-sys-surface-overlay-field-rest: transparent;
|
|
34
|
+
--ax-sys-surface-overlay-field-hover: transparent;
|
|
35
|
+
--ax-sys-surface-overlay-field-focus: transparent;
|
|
36
|
+
--ax-sys-surface-overlay-field-readonly: transparent;
|
|
37
|
+
--ax-sys-surface-overlay-field-disabled: transparent;
|
|
38
|
+
|
|
39
|
+
--ax-sys-surface-fill-opacity: 0.78;
|
|
40
|
+
--ax-sys-backdrop-filter-surface: blur(14px) saturate(125%);
|
|
41
|
+
--ax-sys-filter-surface: none;
|
|
42
|
+
|
|
43
|
+
--ax-sys-effect-floating: 0 4px 14px rgb(15 23 42 / 0.12);
|
|
44
|
+
--ax-sys-effect-prominent-floating: 0 10px 28px rgb(15 23 42 / 0.14);
|
|
45
|
+
--ax-sys-effect-overlay: 0 8px 24px rgb(15 23 42 / 0.13);
|
|
46
|
+
--ax-sys-effect-modal: 0 16px 40px rgb(15 23 42 / 0.18);
|
|
47
|
+
|
|
48
|
+
--ax-sys-inner-border-surface: inset 0 0 0 1px rgb(255 255 255 / 0.2);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
@supports not (backdrop-filter: blur(1px)) {
|
|
52
|
+
.ax-appearance-translucent {
|
|
53
|
+
--ax-sys-backdrop-filter-surface: none;
|
|
54
|
+
--ax-sys-surface-fill-opacity: 0.94;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Dark mode — Translucent */
|
|
59
|
+
|
|
60
|
+
.ax-dark.ax-appearance-translucent,
|
|
61
|
+
.ax-dark .ax-appearance-translucent,
|
|
62
|
+
.ax-appearance-translucent .ax-dark {
|
|
63
|
+
--ax-sys-inner-border-surface: inset 0 0 0 1px rgb(255 255 255 / 0.1);
|
|
64
|
+
--ax-sys-surface-fill-opacity: 0.84;
|
|
65
|
+
--ax-sys-effect-floating: 0 4px 14px rgb(0 0 0 / 0.36);
|
|
66
|
+
--ax-sys-effect-prominent-floating: 0 10px 28px rgb(0 0 0 / 0.42);
|
|
67
|
+
--ax-sys-effect-overlay: 0 8px 24px rgb(0 0 0 / 0.4);
|
|
68
|
+
--ax-sys-effect-modal: 0 16px 40px rgb(0 0 0 / 0.48);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@supports not (backdrop-filter: blur(1px)) {
|
|
72
|
+
.ax-dark.ax-appearance-translucent,
|
|
73
|
+
.ax-dark .ax-appearance-translucent,
|
|
74
|
+
.ax-appearance-translucent .ax-dark {
|
|
75
|
+
--ax-sys-surface-fill-opacity: 0.96;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Enhanced Contrast
|
|
3
|
+
* Improves boundary and field discoverability without the intensity of
|
|
4
|
+
* High Contrast.
|
|
5
|
+
*
|
|
6
|
+
* Activate with .ax-contrast-enhanced on <html> or any subtree.
|
|
7
|
+
* Preserves Appearance effects (Depth gradients/bevels, Translucent blur).
|
|
8
|
+
*
|
|
9
|
+
* Ownership:
|
|
10
|
+
* - Contrast owns boundaries, focus, field discoverability, disabled clarity
|
|
11
|
+
* - Appearance owns gradient, bevel, shadow, depth, translucency, surface fill
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
.ax-contrast-enhanced {
|
|
15
|
+
/* Controls — boundary only; do not tint control fills. */
|
|
16
|
+
--ax-sys-contrast-inner-border-control: inset 0 0 0 1px rgb(15 23 42 / 0.20);
|
|
17
|
+
--ax-sys-contrast-border-control: rgb(15 23 42 / 0.28);
|
|
18
|
+
--ax-sys-contrast-surface-overlay-control: transparent;
|
|
19
|
+
|
|
20
|
+
/* Fields are the strongest ordinary boundary. */
|
|
21
|
+
--ax-sys-contrast-inner-border-field: inset 0 0 0 1px rgb(15 23 42 / 0.34);
|
|
22
|
+
--ax-sys-contrast-border-field: rgb(15 23 42 / 0.40);
|
|
23
|
+
--ax-sys-contrast-surface-overlay-field: rgb(15 23 42 / 0.028);
|
|
24
|
+
|
|
25
|
+
/* Cards and floating/modal surface owners — prefer border over fill. */
|
|
26
|
+
--ax-sys-contrast-inner-border-surface: inset 0 0 0 1px rgb(15 23 42 / 0.16);
|
|
27
|
+
--ax-sys-contrast-border-surface: rgb(15 23 42 / 0.22);
|
|
28
|
+
--ax-sys-contrast-surface-overlay-surface: rgb(15 23 42 / 0.008);
|
|
29
|
+
|
|
30
|
+
/* Disabled remains visible while clearly inactive. */
|
|
31
|
+
--ax-sys-contrast-disabled-opacity: 0.72;
|
|
32
|
+
|
|
33
|
+
/* Validation — always danger red, never neutral field boundaries. */
|
|
34
|
+
--ax-sys-contrast-inner-border-invalid: inset 0 0 0 2px rgba(var(--ax-sys-color-danger-600));
|
|
35
|
+
--ax-sys-contrast-border-invalid: rgba(var(--ax-sys-color-danger-600));
|
|
36
|
+
--ax-sys-contrast-focus-ring-invalid: 0 0 0 2px rgba(var(--ax-sys-color-danger-600) / 0.55);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Dark — Enhanced Contrast */
|
|
40
|
+
|
|
41
|
+
.ax-dark.ax-contrast-enhanced,
|
|
42
|
+
.ax-dark .ax-contrast-enhanced,
|
|
43
|
+
.ax-contrast-enhanced .ax-dark {
|
|
44
|
+
--ax-sys-contrast-inner-border-control: inset 0 0 0 1px rgb(255 255 255 / 0.22);
|
|
45
|
+
--ax-sys-contrast-border-control: rgb(255 255 255 / 0.28);
|
|
46
|
+
--ax-sys-contrast-surface-overlay-control: transparent;
|
|
47
|
+
|
|
48
|
+
--ax-sys-contrast-inner-border-field: inset 0 0 0 1px rgb(255 255 255 / 0.34);
|
|
49
|
+
--ax-sys-contrast-border-field: rgb(255 255 255 / 0.42);
|
|
50
|
+
--ax-sys-contrast-surface-overlay-field: rgb(255 255 255 / 0.055);
|
|
51
|
+
|
|
52
|
+
--ax-sys-contrast-inner-border-surface: inset 0 0 0 1px rgb(255 255 255 / 0.18);
|
|
53
|
+
--ax-sys-contrast-border-surface: rgb(255 255 255 / 0.24);
|
|
54
|
+
--ax-sys-contrast-surface-overlay-surface: rgb(255 255 255 / 0.012);
|
|
55
|
+
|
|
56
|
+
--ax-sys-contrast-disabled-opacity: 0.72;
|
|
57
|
+
|
|
58
|
+
--ax-sys-contrast-inner-border-invalid: inset 0 0 0 2px rgba(var(--ax-sys-color-danger-600));
|
|
59
|
+
--ax-sys-contrast-border-invalid: rgba(var(--ax-sys-color-danger-600));
|
|
60
|
+
--ax-sys-contrast-focus-ring-invalid: 0 0 0 2px rgba(var(--ax-sys-color-danger-600) / 0.55);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Nested Light inside Dark — restore Light Enhanced Contrast */
|
|
64
|
+
|
|
65
|
+
.ax-dark .ax-light.ax-contrast-enhanced,
|
|
66
|
+
.ax-dark .ax-contrast-enhanced .ax-light,
|
|
67
|
+
.ax-contrast-enhanced .ax-dark .ax-light {
|
|
68
|
+
--ax-sys-contrast-inner-border-control: inset 0 0 0 1px rgb(15 23 42 / 0.20);
|
|
69
|
+
--ax-sys-contrast-border-control: rgb(15 23 42 / 0.28);
|
|
70
|
+
--ax-sys-contrast-surface-overlay-control: transparent;
|
|
71
|
+
|
|
72
|
+
--ax-sys-contrast-inner-border-field: inset 0 0 0 1px rgb(15 23 42 / 0.34);
|
|
73
|
+
--ax-sys-contrast-border-field: rgb(15 23 42 / 0.40);
|
|
74
|
+
--ax-sys-contrast-surface-overlay-field: rgb(15 23 42 / 0.028);
|
|
75
|
+
|
|
76
|
+
--ax-sys-contrast-inner-border-surface: inset 0 0 0 1px rgb(15 23 42 / 0.16);
|
|
77
|
+
--ax-sys-contrast-border-surface: rgb(15 23 42 / 0.22);
|
|
78
|
+
--ax-sys-contrast-surface-overlay-surface: rgb(15 23 42 / 0.008);
|
|
79
|
+
|
|
80
|
+
--ax-sys-contrast-disabled-opacity: 0.72;
|
|
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.55);
|
|
85
|
+
}
|