astralkit 0.8.0 → 0.9.0

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 (12) hide show
  1. package/astralkit-theme-v4.css +60 -44
  2. package/astralkit-theme.css +52 -44
  3. package/astralkit-utilities.css +5 -3
  4. package/lib/presets/dials.js +365 -330
  5. package/lib/presets/index.js +1 -1
  6. package/lib/presets/materials.js +8 -226
  7. package/lib/presets/theme-palettes.d.ts +2 -0
  8. package/lib/presets/theme-palettes.js +143 -65
  9. package/package.json +65 -65
  10. package/palettes.css +1110 -788
  11. package/primitives/typography.css +21 -0
  12. package/tailwind.cjs +55 -26
package/astralkit-theme-v4.css CHANGED
@@ -26,35 +26,35 @@
26
26
  --color-ak-neutral-950: #0a0a0a;
27
27
 
28
28
  /* ── Primary scale (full 11-shade ramp) ── */
29
- --color-ak-primary-50: #f6f6f3;
30
- --color-ak-primary-100: #eeeeea;
31
- --color-ak-primary-200: #deded6;
32
- --color-ak-primary-300: #c8c8bd;
33
- --color-ak-primary-400: #8a8a84;
34
- --color-ak-primary-500: #55564f;
35
- --color-ak-primary-600: #3b3c37;
36
- --color-ak-primary-700: #272823;
37
- --color-ak-primary-800: #171814;
38
- --color-ak-primary-900: #0b0b0b;
39
- --color-ak-primary-950: #050505;
29
+ --color-ak-primary-50: #f9fafb;
30
+ --color-ak-primary-100: #f3f4f6;
31
+ --color-ak-primary-200: #e5e7eb;
32
+ --color-ak-primary-300: #d1d5db;
33
+ --color-ak-primary-400: #9ca3af;
34
+ --color-ak-primary-500: #6b7280;
35
+ --color-ak-primary-600: #4b5563;
36
+ --color-ak-primary-700: #374151;
37
+ --color-ak-primary-800: #1f2937;
38
+ --color-ak-primary-900: #111827;
39
+ --color-ak-primary-950: #030712;
40
40
 
41
41
  /* ── Primary action colors ── */
42
- --color-ak-primary: #0b0b0b;
43
- --color-ak-primary-hover: #1f1f1d;
44
- --color-ak-primary-active: #33332f;
42
+ --color-ak-primary: #111827;
43
+ --color-ak-primary-hover: #1f2937;
44
+ --color-ak-primary-active: #374151;
45
45
  --color-ak-primary-outline: var(--color-ak-primary-400);
46
46
  --color-ak-secondary-outline: var(--color-ak-primary-400);
47
- --color-ak-primary-selection: #1f1f1d;
47
+ --color-ak-primary-selection: #1f2937;
48
48
  --color-ak-on-primary-selection: var(--color-ak-on-primary);
49
49
 
50
50
  /* ── Semantic color aliases ── */
51
- --color-ak-bg: #ffffff;
51
+ --color-ak-bg: #f6f8fb;
52
52
  --color-ak-surface: #ffffff;
53
- --color-ak-surface-2: #eeeeea;
54
- --color-ak-surface-3: #e7e7e0;
55
- --color-ak-surface-4: #ddddd6;
56
- --color-ak-hover: #f3f3f0;
57
- --color-ak-active: #ecece6;
53
+ --color-ak-surface-2: #f9fafb;
54
+ --color-ak-surface-3: #f3f4f6;
55
+ --color-ak-surface-4: #e5e7eb;
56
+ --color-ak-hover: #f3f4f6;
57
+ --color-ak-active: #e5e7eb;
58
58
  --color-ak-elevated: #ffffff;
59
59
  --color-ak-surface-raised: #ffffff;
60
60
  --color-ak-surface-raised-soft: rgba(255, 255, 255, 0.78);
@@ -62,15 +62,15 @@
62
62
  --color-ak-surface-glass-strong: rgba(255, 255, 255, 0.84);
63
63
 
64
64
  /* == M3 role layer (additive - old names remain working aliases forever) == */
65
- --color-ak-inverse-surface: #171717;
66
- --color-ak-inverse-on-surface: #fafafa;
65
+ --color-ak-inverse-surface: #111827;
66
+ --color-ak-inverse-on-surface: #ffffff;
67
67
  --color-ak-on-error: #ffffff;
68
68
  --color-ak-on-tertiary: #ffffff;
69
69
  /* Selection accent: defaults to brand primary; palettes may split it
70
70
  (e.g. Pulse: ink CTAs via primary, volt-lime selection via accent). */
71
71
  --color-ak-accent: var(--color-ak-primary);
72
72
  --color-ak-on-accent: var(--color-ak-on-primary);
73
- --color-ak-accent-soft: #f8f8f5;
73
+ --color-ak-accent-soft: #f9fafb;
74
74
  /* M3 names as alias vars (follow their targets in dark automatically) */
75
75
  --color-ak-surface-container-lowest: var(--color-ak-bg);
76
76
  --color-ak-surface-container-low: var(--color-ak-surface);
@@ -99,28 +99,28 @@
99
99
  --color-ak-scrim: var(--color-ak-overlay);
100
100
  --color-ak-highlight-soft: rgba(255, 255, 255, 0.45);
101
101
  --color-ak-highlight-strong: rgba(255, 255, 255, 0.72);
102
- --color-ak-skeleton-base: #eeeeea;
102
+ --color-ak-skeleton-base: #f3f4f6;
103
103
  --color-ak-skeleton-shine: rgba(255, 255, 255, 0.72);
104
104
  --color-ak-overlay: rgba(0, 0, 0, 0.5);
105
105
  --color-ak-on-primary: #ffffff;
106
- --color-ak-primary-subtle: #eeeeea;
107
- --color-ak-primary-subtle-hover: #deded6;
106
+ --color-ak-primary-subtle: #f3f4f6;
107
+ --color-ak-primary-subtle-hover: #e5e7eb;
108
108
 
109
109
  /* ── Semantic text ── */
110
- --color-ak-text: #0b0b0b;
111
- --color-ak-text-emphasis: #171814;
112
- --color-ak-text-secondary: #55564f;
113
- --color-ak-text-muted: #8a8a84;
114
- --color-ak-text-disabled: #c8c8bd;
110
+ --color-ak-text: #111827;
111
+ --color-ak-text-emphasis: #030712;
112
+ --color-ak-text-secondary: #626b79;
113
+ --color-ak-text-muted: #9ca3af;
114
+ --color-ak-text-disabled: #d1d5db;
115
115
  --color-ak-text-inverse: #ffffff;
116
- --color-ak-text-link: #0b0b0b;
117
- --color-ak-text-placeholder:#6f7068;
116
+ --color-ak-text-link: #111827;
117
+ --color-ak-text-placeholder:#6b7280;
118
118
 
119
119
  /* ── Semantic border ── */
120
- --color-ak-border: #deded6;
121
- --color-ak-border-subtle: #e8e8e2;
122
- --color-ak-border-strong: #55564f;
123
- --color-ak-border-focus: #0b0b0b;
120
+ --color-ak-border: #e5e7eb;
121
+ --color-ak-border-subtle: #f3f4f6;
122
+ --color-ak-border-strong: #d1d5db;
123
+ --color-ak-border-focus: #111827;
124
124
 
125
125
  /* ── Status colors ── */
126
126
  --color-ak-success: #16a34a;
@@ -203,6 +203,8 @@
203
203
  --text-ak-display-3xl: clamp(1.875rem, 1.42rem + 1.67vw, 3rem);
204
204
  --text-ak-display-4xl: clamp(2.25rem, 1.58rem + 2.5vw, 3.75rem);
205
205
  --text-ak-display-5xl: clamp(3rem, 2.07rem + 3.47vw, 5.25rem);
206
+ /* half-step between 5xl and 6xl — hero headlines that outgrow 5xl but drown at 6xl */
207
+ --text-ak-display-5xl_5: clamp(3.4rem, 2.3rem + 4.2vw, 6.35rem);
206
208
  --text-ak-display-6xl: clamp(3.75rem, 2.5rem + 4.63vw, 7rem);
207
209
  --text-ak-display-7xl: clamp(4.5rem, 3.06rem + 5.56vw, 8rem);
208
210
  --text-ak-display-8xl: clamp(5rem, 3.06rem + 6.94vw, 9rem);
@@ -280,7 +282,7 @@
280
282
  --spacing-ak-mobile-bar: 4.5rem;
281
283
  --size-ak-sheet-handle-width: 2.25rem;
282
284
  --size-ak-sheet-handle-height: 0.25rem;
283
- --color-ak-sheet-handle: #d4d4d4;
285
+ --color-ak-sheet-handle: #d1d5db;
284
286
 
285
287
  /* ── Layout sizes ──
286
288
  Uses Tailwind v4 native namespaces so they generate real utilities:
@@ -356,7 +358,7 @@
356
358
  /* ── Shadows ── */
357
359
  --shadow-ak-xs: 0 1px 2px rgba(0,0,0,0.04);
358
360
  --shadow-ak-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
359
- --shadow-ak-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
361
+ --shadow-ak-md: 0 4px 10px rgba(16,24,40,0.05), 0 2px 4px rgba(16,24,40,0.04);
360
362
  --shadow-ak-lg: 0 8px 30px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
361
363
  --shadow-ak-xl: 0 16px 50px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05);
362
364
  --shadow-ak-2xl: 0 24px 60px rgba(0,0,0,0.14);
@@ -507,6 +509,20 @@
507
509
  --container-ak-3xl: 48rem;
508
510
  --container-ak-4xl: 56rem;
509
511
  --container-ak-prose: 65ch;
512
+ /* measure scale — ch line-lengths for non-prose copy (labels, blurbs, standfirsts) */
513
+ --container-ak-measure-xs: 15ch;
514
+ --container-ak-measure-sm: 26ch;
515
+ --container-ak-measure-md: 42ch;
516
+ --container-ak-measure-lg: 50ch;
517
+ --container-ak-measure-xl: 58ch;
518
+
519
+ /* ── Breakpoints ──
520
+ Core names/values untouched; custom screens are ak- prefixed + hyphenated
521
+ (unprefixed names squat on global variant space; underscores are reserved
522
+ for type/spacing fraction tokens). Rule: use these, never min-[NNNpx]. */
523
+ --breakpoint-ak-xs: 480px;
524
+ --breakpoint-ak-md-5: 896px;
525
+ --breakpoint-ak-lg-5: 1152px;
510
526
 
511
527
  /* ── Animation ── */
512
528
  --duration-ak-fast: 110ms;
@@ -711,17 +727,17 @@
711
727
  /* ── Status (lighter for dark bg readability) ── */
712
728
  --color-ak-success: #4ade80;
713
729
  --color-ak-success-subtle: rgba(34, 197, 94, 0.12);
714
- --color-ak-success-text: #4ade80;
730
+ --color-ak-success-text: #86efac;
715
731
  --color-ak-warning: #fbbf24;
716
732
  --color-ak-warning-subtle: rgba(251, 191, 36, 0.12);
717
- --color-ak-warning-text: #fbbf24;
733
+ --color-ak-warning-text: #fcd34d;
718
734
  --color-ak-danger: #dc2626;
719
735
  --color-ak-danger-hover: #b91c1c;
720
736
  --color-ak-danger-subtle: rgba(248, 113, 113, 0.12);
721
- --color-ak-danger-text: #f87171;
737
+ --color-ak-danger-text: #fca5a5;
722
738
  --color-ak-info: #60a5fa;
723
739
  --color-ak-info-subtle: rgba(96, 165, 250, 0.12);
724
- --color-ak-info-text: #60a5fa;
740
+ --color-ak-info-text: #93c5fd;
725
741
 
726
742
  /* ── Shadows (mostly invisible on dark — reduce or remove) ── */
727
743
  --shadow-ak-xs: none;
package/astralkit-theme.css CHANGED
@@ -28,35 +28,35 @@
28
28
  --color-ak-neutral-950: #0a0a0a;
29
29
 
30
30
  /* ── Primary scale (full 11-shade ramp) ── */
31
- --color-ak-primary-50: #f6f6f3;
32
- --color-ak-primary-100: #eeeeea;
33
- --color-ak-primary-200: #deded6;
34
- --color-ak-primary-300: #c8c8bd;
35
- --color-ak-primary-400: #8a8a84;
36
- --color-ak-primary-500: #55564f;
37
- --color-ak-primary-600: #3b3c37;
38
- --color-ak-primary-700: #272823;
39
- --color-ak-primary-800: #171814;
40
- --color-ak-primary-900: #0b0b0b;
41
- --color-ak-primary-950: #050505;
31
+ --color-ak-primary-50: #f9fafb;
32
+ --color-ak-primary-100: #f3f4f6;
33
+ --color-ak-primary-200: #e5e7eb;
34
+ --color-ak-primary-300: #d1d5db;
35
+ --color-ak-primary-400: #9ca3af;
36
+ --color-ak-primary-500: #6b7280;
37
+ --color-ak-primary-600: #4b5563;
38
+ --color-ak-primary-700: #374151;
39
+ --color-ak-primary-800: #1f2937;
40
+ --color-ak-primary-900: #111827;
41
+ --color-ak-primary-950: #030712;
42
42
 
43
43
  /* ── Primary action colors ── */
44
- --color-ak-primary: #0b0b0b;
45
- --color-ak-primary-hover: #1f1f1d;
46
- --color-ak-primary-active: #33332f;
44
+ --color-ak-primary: #111827;
45
+ --color-ak-primary-hover: #1f2937;
46
+ --color-ak-primary-active: #374151;
47
47
  --color-ak-primary-outline: var(--color-ak-primary-400);
48
48
  --color-ak-secondary-outline: var(--color-ak-primary-400);
49
- --color-ak-primary-selection: #1f1f1d;
49
+ --color-ak-primary-selection: #1f2937;
50
50
  --color-ak-on-primary-selection: var(--color-ak-on-primary);
51
51
 
52
52
  /* ── Semantic color aliases ── */
53
- --color-ak-bg: #ffffff;
53
+ --color-ak-bg: #f6f8fb;
54
54
  --color-ak-surface: #ffffff;
55
- --color-ak-surface-2: #eeeeea;
56
- --color-ak-surface-3: #e7e7e0;
57
- --color-ak-surface-4: #ddddd6;
58
- --color-ak-hover: #f3f3f0;
59
- --color-ak-active: #ecece6;
55
+ --color-ak-surface-2: #f9fafb;
56
+ --color-ak-surface-3: #f3f4f6;
57
+ --color-ak-surface-4: #e5e7eb;
58
+ --color-ak-hover: #f3f4f6;
59
+ --color-ak-active: #e5e7eb;
60
60
  --color-ak-elevated: #ffffff;
61
61
  --color-ak-surface-raised: #ffffff;
62
62
  --color-ak-surface-raised-soft: rgba(255, 255, 255, 0.78);
@@ -64,15 +64,15 @@
64
64
  --color-ak-surface-glass-strong: rgba(255, 255, 255, 0.84);
65
65
 
66
66
  /* == M3 role layer (additive - old names remain working aliases forever) == */
67
- --color-ak-inverse-surface: #171717;
68
- --color-ak-inverse-on-surface: #fafafa;
67
+ --color-ak-inverse-surface: #111827;
68
+ --color-ak-inverse-on-surface: #ffffff;
69
69
  --color-ak-on-error: #ffffff;
70
70
  --color-ak-on-tertiary: #ffffff;
71
71
  /* Selection accent: defaults to brand primary; palettes may split it
72
72
  (e.g. Pulse: ink CTAs via primary, volt-lime selection via accent). */
73
73
  --color-ak-accent: var(--color-ak-primary);
74
74
  --color-ak-on-accent: var(--color-ak-on-primary);
75
- --color-ak-accent-soft: #f8f8f5;
75
+ --color-ak-accent-soft: #f9fafb;
76
76
  /* M3 names as alias vars (follow their targets in dark automatically) */
77
77
  --color-ak-surface-container-lowest: var(--color-ak-bg);
78
78
  --color-ak-surface-container-low: var(--color-ak-surface);
@@ -101,28 +101,28 @@
101
101
  --color-ak-scrim: var(--color-ak-overlay);
102
102
  --color-ak-highlight-soft: rgba(255, 255, 255, 0.45);
103
103
  --color-ak-highlight-strong: rgba(255, 255, 255, 0.72);
104
- --color-ak-skeleton-base: #eeeeea;
104
+ --color-ak-skeleton-base: #f3f4f6;
105
105
  --color-ak-skeleton-shine: rgba(255, 255, 255, 0.72);
106
106
  --color-ak-overlay: rgba(0, 0, 0, 0.5);
107
107
  --color-ak-on-primary: #ffffff;
108
- --color-ak-primary-subtle: #eeeeea;
109
- --color-ak-primary-subtle-hover: #deded6;
108
+ --color-ak-primary-subtle: #f3f4f6;
109
+ --color-ak-primary-subtle-hover: #e5e7eb;
110
110
 
111
111
  /* ── Semantic text ── */
112
- --color-ak-text: #0b0b0b;
113
- --color-ak-text-emphasis: #171814;
114
- --color-ak-text-secondary: #55564f;
115
- --color-ak-text-muted: #8a8a84;
116
- --color-ak-text-disabled: #c8c8bd;
112
+ --color-ak-text: #111827;
113
+ --color-ak-text-emphasis: #030712;
114
+ --color-ak-text-secondary: #626b79;
115
+ --color-ak-text-muted: #9ca3af;
116
+ --color-ak-text-disabled: #d1d5db;
117
117
  --color-ak-text-inverse: #ffffff;
118
- --color-ak-text-link: #0b0b0b;
119
- --color-ak-text-placeholder:#6f7068;
118
+ --color-ak-text-link: #111827;
119
+ --color-ak-text-placeholder:#6b7280;
120
120
 
121
121
  /* ── Semantic border ── */
122
- --color-ak-border: #deded6;
123
- --color-ak-border-subtle: #e8e8e2;
124
- --color-ak-border-strong: #55564f;
125
- --color-ak-border-focus: #0b0b0b;
122
+ --color-ak-border: #e5e7eb;
123
+ --color-ak-border-subtle: #f3f4f6;
124
+ --color-ak-border-strong: #d1d5db;
125
+ --color-ak-border-focus: #111827;
126
126
 
127
127
  /* ── Status colors ── */
128
128
  --color-ak-success: #16a34a;
@@ -205,6 +205,8 @@
205
205
  --text-ak-display-3xl: clamp(1.875rem, 1.42rem + 1.67vw, 3rem);
206
206
  --text-ak-display-4xl: clamp(2.25rem, 1.58rem + 2.5vw, 3.75rem);
207
207
  --text-ak-display-5xl: clamp(3rem, 2.07rem + 3.47vw, 5.25rem);
208
+ /* half-step between 5xl and 6xl — hero headlines that outgrow 5xl but drown at 6xl */
209
+ --text-ak-display-5xl_5: clamp(3.4rem, 2.3rem + 4.2vw, 6.35rem);
208
210
  --text-ak-display-6xl: clamp(3.75rem, 2.5rem + 4.63vw, 7rem);
209
211
  --text-ak-display-7xl: clamp(4.5rem, 3.06rem + 5.56vw, 8rem);
210
212
  --text-ak-display-8xl: clamp(5rem, 3.06rem + 6.94vw, 9rem);
@@ -282,7 +284,7 @@
282
284
  --spacing-ak-mobile-bar: 4.5rem;
283
285
  --size-ak-sheet-handle-width: 2.25rem;
284
286
  --size-ak-sheet-handle-height: 0.25rem;
285
- --color-ak-sheet-handle: #d4d4d4;
287
+ --color-ak-sheet-handle: #d1d5db;
286
288
 
287
289
  /* ── Layout sizes ──
288
290
  Uses Tailwind v4 native namespaces so they generate real utilities:
@@ -358,7 +360,7 @@
358
360
  /* ── Shadows ── */
359
361
  --shadow-ak-xs: 0 1px 2px rgba(0,0,0,0.04);
360
362
  --shadow-ak-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
361
- --shadow-ak-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
363
+ --shadow-ak-md: 0 4px 10px rgba(16,24,40,0.05), 0 2px 4px rgba(16,24,40,0.04);
362
364
  --shadow-ak-lg: 0 8px 30px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
363
365
  --shadow-ak-xl: 0 16px 50px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.05);
364
366
  --shadow-ak-2xl: 0 24px 60px rgba(0,0,0,0.14);
@@ -507,6 +509,12 @@
507
509
  --container-ak-3xl: 48rem;
508
510
  --container-ak-4xl: 56rem;
509
511
  --container-ak-prose: 65ch;
512
+ /* measure scale — ch line-lengths for non-prose copy (labels, blurbs, standfirsts) */
513
+ --container-ak-measure-xs: 15ch;
514
+ --container-ak-measure-sm: 26ch;
515
+ --container-ak-measure-md: 42ch;
516
+ --container-ak-measure-lg: 50ch;
517
+ --container-ak-measure-xl: 58ch;
510
518
 
511
519
  /* ── Animation ── */
512
520
  --duration-ak-fast: 110ms;
@@ -711,17 +719,17 @@
711
719
  /* ── Status (lighter for dark bg readability) ── */
712
720
  --color-ak-success: #4ade80;
713
721
  --color-ak-success-subtle: rgba(34, 197, 94, 0.12);
714
- --color-ak-success-text: #4ade80;
722
+ --color-ak-success-text: #86efac;
715
723
  --color-ak-warning: #fbbf24;
716
724
  --color-ak-warning-subtle: rgba(251, 191, 36, 0.12);
717
- --color-ak-warning-text: #fbbf24;
725
+ --color-ak-warning-text: #fcd34d;
718
726
  --color-ak-danger: #dc2626;
719
727
  --color-ak-danger-hover: #b91c1c;
720
728
  --color-ak-danger-subtle: rgba(248, 113, 113, 0.12);
721
- --color-ak-danger-text: #f87171;
729
+ --color-ak-danger-text: #fca5a5;
722
730
  --color-ak-info: #60a5fa;
723
731
  --color-ak-info-subtle: rgba(96, 165, 250, 0.12);
724
- --color-ak-info-text: #60a5fa;
732
+ --color-ak-info-text: #93c5fd;
725
733
 
726
734
  /* ── Shadows (mostly invisible on dark — reduce or remove) ── */
727
735
  --shadow-ak-xs: none;
package/astralkit-utilities.css CHANGED
@@ -434,6 +434,8 @@ html {
434
434
  font-size: var(--text-ak-fl-lg); font-weight: 700; color: var(--color-ak-text);
435
435
  }
436
436
  .ak-switch-helper { font-size: var(--text-ak-fl-base); color: var(--color-ak-text-secondary); }
437
+ /* Active switch cards tint their surface — helpers step up to full ink. */
438
+ .ak-switch-card-active .ak-switch-helper { color: var(--color-ak-text); }
437
439
  .ak-switch-label-icon {
438
440
  font-size: 1.5rem; color: var(--color-ak-text-secondary); line-height: 1; flex-shrink: 0;
439
441
  width: 2.75rem; height: 2.75rem;
@@ -858,7 +860,7 @@ body.ak-ew-resizing, body.ak-ew-resizing * {
858
860
 
859
861
  /* ── Material recipes (2026-08-02) ──────────────────────────────
860
862
  The consumption layer for material appearances (astralkit/presets
861
- MATERIAL_APPEARANCES). Components carry these classes; appearance packs
863
+ the SDK defaults). Components carry these classes; the default slot values
862
864
  fill the --ak-* slots. Every default reproduces the pre-material look,
863
865
  so unthemed apps are pixel-identical. */
864
866
  .ak-material-control {
@@ -878,7 +880,7 @@ body.ak-ew-resizing, body.ak-ew-resizing * {
878
880
  top-left light source) over the fill. Defaults collapse to plain fill. */
879
881
  background: var(--ak-surface-sheen, none), var(--ak-surface-fill, var(--color-ak-surface));
880
882
  border: var(--ak-surface-border-w, 1px) solid var(--ak-surface-border-color, var(--color-ak-border));
881
- box-shadow: var(--ak-surface-shadow, none);
883
+ box-shadow: var(--ak-surface-shadow, var(--shadow-ak-xs, none));
882
884
  -webkit-backdrop-filter: var(--ak-surface-blur, none);
883
885
  backdrop-filter: var(--ak-surface-blur, none);
884
886
  }
@@ -903,7 +905,7 @@ body.ak-ew-resizing, body.ak-ew-resizing * {
903
905
  .ak-material-surface .ak-material-surface {
904
906
  background: var(--ak-surface-sheen-2, var(--ak-surface-sheen, none)),
905
907
  var(--ak-surface-fill-2, var(--ak-surface-fill, var(--color-ak-surface-2)));
906
- box-shadow: var(--ak-surface-shadow-2, var(--ak-surface-shadow, none));
908
+ box-shadow: var(--ak-surface-shadow-2, var(--ak-surface-shadow, var(--shadow-ak-xs, none)));
907
909
  }
908
910
 
909
911
  /* ── Small-control material parts (batch 2) ─────────────────────────────