@mohamedatia/fly-design-system 2.4.0 → 2.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/mohamedatia-fly-design-system.mjs +1446 -122
- package/fesm2022/mohamedatia-fly-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/scss/_business-app-buttons.scss +209 -208
- package/scss/_theme-auto.scss +10 -9
- package/scss/_theme-dark-vars.scss +50 -0
- package/scss/_theme-dark.scss +142 -79
- package/scss/_theme-light.scss +60 -47
- package/scss/_theme-spatial-vars.scss +56 -66
- package/scss/_theme-spatial.scss +23 -22
- package/scss/_tokens.scss +115 -126
- package/scss/apps.scss +886 -0
- package/types/mohamedatia-fly-design-system.d.ts +626 -3
- package/types/mohamedatia-fly-design-system.d.ts.map +1 -1
package/scss/_theme-dark.scss
CHANGED
|
@@ -1,79 +1,142 @@
|
|
|
1
|
-
// ─── Dark theme (`html.dark-theme`, persisted `dark`) ────────────────────────
|
|
2
|
-
// Shell Appearance label "Dark" / i18n `settings.theme.dark`.
|
|
3
|
-
//
|
|
4
|
-
html.dark-theme {
|
|
5
|
-
/* Native selects / scrollbars follow OS form appearance; keep in sync with light-on-glass labels. */
|
|
6
|
-
color-scheme: dark;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
--
|
|
14
|
-
|
|
15
|
-
--
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
--
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
|
|
30
|
-
--
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
--
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
--
|
|
38
|
-
--
|
|
39
|
-
--
|
|
40
|
-
--
|
|
41
|
-
|
|
42
|
-
--
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
--
|
|
46
|
-
--
|
|
47
|
-
--
|
|
48
|
-
|
|
49
|
-
--
|
|
50
|
-
--
|
|
51
|
-
--
|
|
52
|
-
--
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
--
|
|
56
|
-
|
|
57
|
-
--
|
|
58
|
-
|
|
59
|
-
--
|
|
60
|
-
--
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
--
|
|
64
|
-
--
|
|
65
|
-
--
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
--
|
|
69
|
-
--
|
|
70
|
-
|
|
71
|
-
--
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
1
|
+
// ─── Dark theme (`html.dark-theme`, persisted `dark`) ────────────────────────
|
|
2
|
+
// Shell Appearance label "Dark" / i18n `settings.theme.dark`.
|
|
3
|
+
// VisionOS-style translucent dark glass: semi-transparent surfaces + backdrop blur.
|
|
4
|
+
html.dark-theme {
|
|
5
|
+
/* Native selects / scrollbars follow OS form appearance; keep in sync with light-on-glass labels. */
|
|
6
|
+
color-scheme: dark;
|
|
7
|
+
|
|
8
|
+
--primary-light: rgb(232 115 42 / 20%);
|
|
9
|
+
|
|
10
|
+
// ── Circles brand ───────────────────────────────────────────────────────────
|
|
11
|
+
// App-specific brand palette. Theme-agnostic — same in light and dark.
|
|
12
|
+
--circles-primary: #4575fe;
|
|
13
|
+
--circles-secondary: #60c293;
|
|
14
|
+
--circles-gradient: linear-gradient(135deg, #4575fe 0%, #60c293 100%);
|
|
15
|
+
--circles-gradient-hover: linear-gradient(135deg, #3a66e8 0%, #4fb482 100%);
|
|
16
|
+
|
|
17
|
+
// ── Material glass primitives ───────────────────────────────────────────────
|
|
18
|
+
--material-glass: rgb(28 28 31 / 65%);
|
|
19
|
+
--material-glass-blur: 40px;
|
|
20
|
+
--material-glass-stroke: rgb(255 255 255 / 16%);
|
|
21
|
+
--material-glass-specular: inset 0 1px 0 rgb(255 255 255 / 10%),
|
|
22
|
+
inset 0 -1px 0 rgb(255 255 255 / 5%);
|
|
23
|
+
|
|
24
|
+
// ── Surfaces ────────────────────────────────────────────────────────────────
|
|
25
|
+
--app-content-plate: transparent;
|
|
26
|
+
--surface-ground: #0e0e10;
|
|
27
|
+
--surface-section: rgb(22 22 26 / 78%);
|
|
28
|
+
--surface-card: rgba(28, 28, 32, 0.55);
|
|
29
|
+
--surface-border: rgb(255 255 255 / 14%);
|
|
30
|
+
--surface-hover: rgb(255 255 255 / 8%);
|
|
31
|
+
|
|
32
|
+
// ── Labels & text ───────────────────────────────────────────────────────────
|
|
33
|
+
/* `:root` / `html.light-theme` set dark `--label-*`; dark shell must force light-on-dark. */
|
|
34
|
+
--label-primary: rgb(255 255 255 / 96%);
|
|
35
|
+
--label-secondary: rgb(255 255 255 / 65%);
|
|
36
|
+
--label-tertiary: rgb(255 255 255 / 42%);
|
|
37
|
+
--separator-primary: rgb(255 255 255 / 14%);
|
|
38
|
+
--separator: var(--separator-primary);
|
|
39
|
+
--fill-secondary: rgb(255 255 255 / 10%);
|
|
40
|
+
--fill-tertiary: rgb(255 255 255 / 6%);
|
|
41
|
+
--text-color: var(--label-primary);
|
|
42
|
+
--text-color-secondary: var(--label-secondary);
|
|
43
|
+
|
|
44
|
+
// ── Fly alias tokens ────────────────────────────────────────────────────────
|
|
45
|
+
--fly-color-surface: #1c1c1f;
|
|
46
|
+
--fly-color-surface-alt: #242428;
|
|
47
|
+
--fly-color-border: rgb(255 255 255 / 14%);
|
|
48
|
+
--fly-color-text-muted: var(--text-color-secondary);
|
|
49
|
+
--fly-color-primary: var(--primary-color);
|
|
50
|
+
--fly-color-primary-hover: var(--primary-hover);
|
|
51
|
+
--fly-color-danger: var(--system-red);
|
|
52
|
+
--fly-shadow-md: 0 4px 16px rgb(0 0 0 / 42%);
|
|
53
|
+
|
|
54
|
+
// ── Glass system ────────────────────────────────────────────────────────────
|
|
55
|
+
--glass-bg: rgb(22 22 26 / 72%);
|
|
56
|
+
--glass-bg-elevated: rgb(30 30 36 / 82%);
|
|
57
|
+
--glass-blur: 40px;
|
|
58
|
+
--glass-border: var(--material-glass-stroke);
|
|
59
|
+
--glass-shadow: 0 16px 60px rgb(0 0 0 / 50%);
|
|
60
|
+
--glass-inner-glow: var(--material-glass-specular);
|
|
61
|
+
|
|
62
|
+
// ── Layout metrics (size, not color — same as light) ────────────────────────
|
|
63
|
+
--card-radius: 16px;
|
|
64
|
+
--card-padding: 20px;
|
|
65
|
+
--card-gap: 14px;
|
|
66
|
+
|
|
67
|
+
// ── Apps launcher card tokens — dark glass variant ──────────────────────────
|
|
68
|
+
--launcher-card-bg: rgba(28, 28, 32, 0.45);
|
|
69
|
+
--launcher-card-border: rgba(255, 255, 255, 0.12);
|
|
70
|
+
--launcher-card-blur: 50px;
|
|
71
|
+
--launcher-card-radius: 16px;
|
|
72
|
+
--launcher-card-icon-bg: rgba(255, 255, 255, 0.08);
|
|
73
|
+
--launcher-card-icon-border: rgba(255, 255, 255, 0.14);
|
|
74
|
+
--launcher-card-icon-blur: 4px;
|
|
75
|
+
--launcher-card-title: rgb(255 255 255 / 92%);
|
|
76
|
+
--launcher-card-desc: rgb(255 255 255 / 58%);
|
|
77
|
+
|
|
78
|
+
// ── Window chrome ───────────────────────────────────────────────────────────
|
|
79
|
+
--window-bg: rgb(20 20 24 / 42%);
|
|
80
|
+
--window-radius: 24px;
|
|
81
|
+
--window-blur: 60px;
|
|
82
|
+
--window-backdrop-saturate: 160%;
|
|
83
|
+
--window-shadow: 0 36px 120px rgb(0 0 0 / 52%);
|
|
84
|
+
--window-border: var(--material-glass-stroke);
|
|
85
|
+
--window-specular: inset 0 1px 0 rgb(255 255 255 / 12%),
|
|
86
|
+
inset 0 -1px 0 rgb(255 255 255 / 6%);
|
|
87
|
+
--window-content-scrim: transparent;
|
|
88
|
+
|
|
89
|
+
// ── Titlebar ────────────────────────────────────────────────────────────────
|
|
90
|
+
--titlebar-bg: transparent;
|
|
91
|
+
--titlebar-height: 44px;
|
|
92
|
+
--titlebar-padding: 0 14px;
|
|
93
|
+
|
|
94
|
+
// ── Dock ────────────────────────────────────────────────────────────────────
|
|
95
|
+
--dock-bg: rgb(18 18 22 / 60%);
|
|
96
|
+
--dock-border: var(--material-glass-stroke);
|
|
97
|
+
--dock-blur: 50px;
|
|
98
|
+
|
|
99
|
+
// ── Menubar ─────────────────────────────────────────────────────────────────
|
|
100
|
+
--menubar-bg: rgb(14 14 18 / 80%);
|
|
101
|
+
--menubar-border: var(--material-glass-stroke);
|
|
102
|
+
--menubar-text: var(--label-primary);
|
|
103
|
+
--menubar-blur: 40px;
|
|
104
|
+
--menubar-radius: 24px;
|
|
105
|
+
|
|
106
|
+
// ── Sidebar ─────────────────────────────────────────────────────────────────
|
|
107
|
+
--sidebar-bg: rgb(18 18 22 / 72%);
|
|
108
|
+
--sidebar-border: var(--material-glass-stroke);
|
|
109
|
+
--sidebar-width: 60px;
|
|
110
|
+
--sidebar-icon-size: 36px;
|
|
111
|
+
--sidebar-radius: 28px;
|
|
112
|
+
|
|
113
|
+
--focus-ring: rgb(232 115 42 / 60%);
|
|
114
|
+
|
|
115
|
+
// ── Button selected state — white-tint pill on dark surface ─────────────────
|
|
116
|
+
--btn-selected-bg: rgba(255, 255, 255, 0.15);
|
|
117
|
+
--btn-selected-text: #fff;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// ── Reduced-transparency fallback — restore fully opaque / zero-blur values ──
|
|
121
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
122
|
+
html.dark-theme {
|
|
123
|
+
--material-glass: #1c1c1f;
|
|
124
|
+
--material-glass-blur: 0px;
|
|
125
|
+
--app-content-plate: #121214;
|
|
126
|
+
--surface-section: #161618;
|
|
127
|
+
--surface-card: #1c1c1f;
|
|
128
|
+
--glass-bg: #161618;
|
|
129
|
+
--glass-bg-elevated: #1e1e22;
|
|
130
|
+
--glass-blur: 0px;
|
|
131
|
+
--window-bg: #141416;
|
|
132
|
+
--window-blur: 0px;
|
|
133
|
+
--window-backdrop-saturate: 100%;
|
|
134
|
+
--dock-bg: #121214;
|
|
135
|
+
--dock-blur: 0px;
|
|
136
|
+
--menubar-bg: #0e0e10;
|
|
137
|
+
--menubar-blur: 0px;
|
|
138
|
+
--sidebar-bg: #121214;
|
|
139
|
+
--launcher-card-bg: #1c1c1f;
|
|
140
|
+
--launcher-card-blur: 0px;
|
|
141
|
+
}
|
|
142
|
+
}
|
package/scss/_theme-light.scss
CHANGED
|
@@ -2,88 +2,101 @@
|
|
|
2
2
|
:root,
|
|
3
3
|
html.light-theme {
|
|
4
4
|
color-scheme: light;
|
|
5
|
+
|
|
5
6
|
--primary-color: #E8732A;
|
|
6
7
|
--primary-hover: #D4631E;
|
|
7
|
-
--primary-light:
|
|
8
|
+
--primary-light: rgb(232 115 42 / 12%);
|
|
8
9
|
|
|
10
|
+
// ── Circles brand ─────────────────────────────────────────────────────────
|
|
11
|
+
// App-specific brand palette. Theme-agnostic — same in light and dark.
|
|
12
|
+
--circles-primary: #4575fe;
|
|
13
|
+
--circles-secondary: #60c293;
|
|
14
|
+
--circles-gradient: linear-gradient(135deg, #4575fe 0%, #60c293 100%);
|
|
15
|
+
--circles-gradient-hover: linear-gradient(135deg, #3a66e8 0%, #4fb482 100%);
|
|
9
16
|
--accent-green: var(--system-green);
|
|
10
17
|
--accent-red: var(--system-red);
|
|
11
18
|
--accent-blue: var(--system-blue);
|
|
12
19
|
--accent-orange: #E8732A;
|
|
13
20
|
--accent-yellow: var(--system-yellow);
|
|
14
|
-
|
|
15
21
|
--surface-ground: #f8f9fa;
|
|
16
|
-
--surface-section: #
|
|
17
|
-
--surface-card:
|
|
18
|
-
--surface-border:
|
|
19
|
-
--surface-hover:
|
|
20
|
-
--text-color: #
|
|
21
|
-
--text-color-secondary:
|
|
22
|
-
|
|
23
|
-
--glass-bg:
|
|
24
|
-
--glass-
|
|
25
|
-
--glass-
|
|
26
|
-
--glass-
|
|
27
|
-
--glass-
|
|
28
|
-
--
|
|
29
|
-
|
|
30
|
-
--card-radius: 20px;
|
|
22
|
+
--surface-section: #fff;
|
|
23
|
+
--surface-card:linear-gradient(0deg, rgb(0 0 0 / 10%) 0%, rgb(0 0 0 / 10%) 100%), rgb(255 255 255 / 10%);
|
|
24
|
+
--surface-border: rgb(0 0 0 / 6%);
|
|
25
|
+
--surface-hover: rgb(0 0 0 / 4%);
|
|
26
|
+
--text-color: #fff;
|
|
27
|
+
--text-color-secondary: rgb(17 24 39 / 55%);
|
|
28
|
+
--glass-bg: rgb(255 255 255 / 10%);
|
|
29
|
+
--glass-bg-elevated: rgb(255 255 255 / 72%);
|
|
30
|
+
--glass-blur: 50px;
|
|
31
|
+
--glass-border: rgba(255, 255, 255, 0.4);
|
|
32
|
+
--glass-shadow: 0 8px 40px rgb(0 0 0 / 8%);
|
|
33
|
+
--glass-inner-glow: inset 0 1px 0 rgb(255 255 255 / 50%);
|
|
34
|
+
--card-radius: 16px;
|
|
31
35
|
--card-padding: 20px;
|
|
32
36
|
--card-gap: 14px;
|
|
33
37
|
|
|
34
|
-
|
|
38
|
+
// Apps launcher card tokens — matches Figma frosted glass card spec
|
|
39
|
+
--launcher-card-bg: rgba(224, 224, 224, 0.3);
|
|
40
|
+
--launcher-card-border: rgba(255, 255, 255, 0.4);
|
|
41
|
+
--launcher-card-blur: 50px;
|
|
42
|
+
--launcher-card-radius: 16px;
|
|
43
|
+
--launcher-card-icon-bg: rgba(255, 255, 255, 0.1);
|
|
44
|
+
--launcher-card-icon-border: rgba(255, 255, 255, 0.1);
|
|
45
|
+
--launcher-card-icon-blur: 4px;
|
|
46
|
+
--launcher-card-title: #ffffff;
|
|
47
|
+
--launcher-card-desc: rgb(255, 255, 255 , 0.8);
|
|
48
|
+
|
|
49
|
+
// Window chrome — light frosted glass similar to Figma spec (soft white plate,
|
|
50
|
+
// strong background blur, subtle luminous border).
|
|
51
|
+
--window-bg: rgb(255 255 255 / 6%);
|
|
35
52
|
--window-radius: 24px;
|
|
36
|
-
--window-blur:
|
|
37
|
-
--window-backdrop-saturate:
|
|
38
|
-
--window-shadow: 0
|
|
39
|
-
--window-border:
|
|
40
|
-
--window-specular:
|
|
53
|
+
--window-blur: 64px;
|
|
54
|
+
--window-backdrop-saturate: 175%;
|
|
55
|
+
--window-shadow: 0 28px 96px rgb(0 0 0 / 18%);
|
|
56
|
+
--window-border: rgb(255 255 255 / 50%);
|
|
57
|
+
--window-specular: inset 0 1px 0 rgb(255 255 255 / 30%),
|
|
58
|
+
inset 0 -1px 0 rgb(255 255 255 / 16%);
|
|
41
59
|
--window-content-scrim: transparent;
|
|
42
60
|
--app-content-plate: transparent;
|
|
43
|
-
|
|
44
61
|
--titlebar-bg: transparent;
|
|
45
62
|
--titlebar-height: 44px;
|
|
46
63
|
--titlebar-padding: 0 14px;
|
|
47
|
-
|
|
48
|
-
--dock-
|
|
49
|
-
--dock-
|
|
50
|
-
--
|
|
51
|
-
|
|
52
|
-
--menubar-
|
|
53
|
-
--menubar-border: rgba(0, 0, 0, 0.06);
|
|
54
|
-
--menubar-text: rgba(17, 24, 39, 1);
|
|
64
|
+
--dock-bg: rgb(255 255 255 / 15%);
|
|
65
|
+
--dock-border: rgb(255 255 255 / 30%);
|
|
66
|
+
--dock-blur:50px;
|
|
67
|
+
--menubar-bg: rgb(255 255 255 / 55%);
|
|
68
|
+
--menubar-border: rgb(0 0 0 / 6%);
|
|
69
|
+
--menubar-text: #fff;
|
|
55
70
|
--menubar-blur: 40px;
|
|
56
71
|
--menubar-radius: 24px;
|
|
57
|
-
|
|
58
|
-
--sidebar-
|
|
59
|
-
--sidebar-border: rgba(255, 255, 255, 0.25);
|
|
72
|
+
--sidebar-bg: rgb(255 255 255 / 35%);
|
|
73
|
+
--sidebar-border: rgb(255 255 255 / 25%);
|
|
60
74
|
--sidebar-width: 60px;
|
|
61
75
|
--sidebar-icon-size: 36px;
|
|
62
76
|
--sidebar-radius: 28px;
|
|
63
|
-
|
|
64
|
-
--focus-ring: rgba(232, 115, 42, 0.5);
|
|
77
|
+
--focus-ring: rgb(232 115 42 / 50%);
|
|
65
78
|
|
|
66
79
|
// Segmented `.vos-btn.selected` / `.active` (Settings theme row, clock, weather, etc.): dark pill on light UI.
|
|
67
80
|
--btn-selected-bg: #111827;
|
|
68
|
-
--btn-selected-text: #
|
|
81
|
+
--btn-selected-text: #fff;
|
|
69
82
|
|
|
70
83
|
// Business Apps / opaque content: :root visionOS tokens use white labels; override for light surfaces.
|
|
71
|
-
--label-primary: #
|
|
72
|
-
--label-secondary:
|
|
73
|
-
--label-tertiary:
|
|
74
|
-
--separator-primary:
|
|
84
|
+
--label-primary: #fff;
|
|
85
|
+
--label-secondary: rgb(17 24 39 / 65%);
|
|
86
|
+
--label-tertiary: rgb(17 24 39 / 45%);
|
|
87
|
+
--separator-primary: rgb(0 0 0 / 10%);
|
|
75
88
|
--separator: var(--separator-primary);
|
|
76
89
|
--fill-secondary: #e5e7eb;
|
|
77
|
-
--fill-tertiary:
|
|
78
|
-
--material-glass: #
|
|
90
|
+
--fill-tertiary: rgb(0 0 0 / 4%);
|
|
91
|
+
--material-glass: #fff;
|
|
79
92
|
|
|
80
93
|
// Aliases used by some Business App SCSS (not part of core visionOS tokens).
|
|
81
|
-
--fly-color-surface: #
|
|
94
|
+
--fly-color-surface: #fff;
|
|
82
95
|
--fly-color-surface-alt: #f3f4f6;
|
|
83
96
|
--fly-color-border: #e5e7eb;
|
|
84
|
-
--fly-color-text-muted:
|
|
97
|
+
--fly-color-text-muted: rgb(17 24 39 / 55%);
|
|
85
98
|
--fly-color-primary: var(--primary-color);
|
|
86
99
|
--fly-color-primary-hover: var(--primary-hover);
|
|
87
100
|
--fly-color-danger: var(--system-red);
|
|
88
|
-
--fly-shadow-md: 0 4px 12px
|
|
101
|
+
--fly-shadow-md: 0 4px 12px rgb(0 0 0 / 8%);
|
|
89
102
|
}
|
|
@@ -1,66 +1,56 @@
|
|
|
1
|
-
// ─── Spatial Theme Variables (shared mixin to avoid duplication) ─────────────
|
|
2
|
-
// Used by `html.spatial-theme` (Settings label **Spatial**, persisted `spatial`):
|
|
3
|
-
// **silver frosted glass** — cool translucent plates + blur over the wallpaper.
|
|
4
|
-
@mixin spatial-theme-vars {
|
|
5
|
-
--primary-light:
|
|
6
|
-
|
|
7
|
-
--surface-
|
|
8
|
-
--surface-
|
|
9
|
-
--surface-
|
|
10
|
-
--surface-
|
|
11
|
-
--
|
|
12
|
-
--text-color:
|
|
13
|
-
--
|
|
14
|
-
|
|
15
|
-
--glass-
|
|
16
|
-
--glass-
|
|
17
|
-
--glass-
|
|
18
|
-
--glass-
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
|
|
22
|
-
--window-
|
|
23
|
-
--window-
|
|
24
|
-
--window-
|
|
25
|
-
--window-
|
|
26
|
-
--
|
|
27
|
-
--
|
|
28
|
-
--
|
|
29
|
-
--
|
|
30
|
-
|
|
31
|
-
--
|
|
32
|
-
--
|
|
33
|
-
--
|
|
34
|
-
|
|
35
|
-
--
|
|
36
|
-
--
|
|
37
|
-
--
|
|
38
|
-
|
|
39
|
-
--
|
|
40
|
-
--
|
|
41
|
-
--
|
|
42
|
-
--
|
|
43
|
-
|
|
44
|
-
--
|
|
45
|
-
--
|
|
46
|
-
|
|
47
|
-
--
|
|
48
|
-
|
|
49
|
-
--
|
|
50
|
-
--
|
|
51
|
-
--
|
|
52
|
-
--
|
|
53
|
-
--
|
|
54
|
-
--
|
|
55
|
-
--
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
--fly-color-surface: rgba(26, 30, 40, 0.45);
|
|
59
|
-
--fly-color-surface-alt: rgba(34, 40, 52, 0.5);
|
|
60
|
-
--fly-color-border: rgba(255, 255, 255, 0.14);
|
|
61
|
-
--fly-color-text-muted: var(--text-color-secondary);
|
|
62
|
-
--fly-color-primary: var(--primary-color);
|
|
63
|
-
--fly-color-primary-hover: var(--primary-hover);
|
|
64
|
-
--fly-color-danger: var(--system-red);
|
|
65
|
-
--fly-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.35);
|
|
66
|
-
}
|
|
1
|
+
// ─── Spatial Theme Variables (shared mixin to avoid duplication) ─────────────
|
|
2
|
+
// Used by `html.spatial-theme` (Settings label **Spatial**, persisted `spatial`):
|
|
3
|
+
// **silver frosted glass** — cool translucent plates + blur over the wallpaper.
|
|
4
|
+
@mixin spatial-theme-vars {
|
|
5
|
+
--primary-light: rgb(232 115 42 / 18%);
|
|
6
|
+
--surface-ground: rgb(12 14 20 / 52%);
|
|
7
|
+
--surface-section: rgb(218 226 238 / 12%);
|
|
8
|
+
--surface-card: rgb(208 218 234 / 14%);
|
|
9
|
+
--surface-border: rgb(255 255 255 / 16%);
|
|
10
|
+
--surface-hover: rgb(255 255 255 / 10%);
|
|
11
|
+
--text-color: #f2f2f7;
|
|
12
|
+
--text-color-secondary: rgb(242 242 247 / 65%);
|
|
13
|
+
--glass-bg: rgb(200 212 228 / 28%);
|
|
14
|
+
--glass-bg-elevated: rgb(225 232 245 / 24%);
|
|
15
|
+
--glass-border: rgb(255 255 255 / 20%);
|
|
16
|
+
--glass-blur: 52px;
|
|
17
|
+
--glass-shadow: 0 12px 48px rgb(0 0 0 / 32%);
|
|
18
|
+
--glass-inner-glow: inset 0 1px 0 rgb(255 255 255 / 22%);
|
|
19
|
+
--window-bg: rgb(210 220 236 / 48%);
|
|
20
|
+
--window-radius: 24px;
|
|
21
|
+
--window-blur: 56px;
|
|
22
|
+
--window-backdrop-saturate: 175%;
|
|
23
|
+
--window-shadow: 0 28px 90px rgb(0 0 0 / 38%);
|
|
24
|
+
--window-border: rgb(255 255 255 / 22%);
|
|
25
|
+
--window-content-scrim: rgb(6 8 12 / 50%);
|
|
26
|
+
--app-content-plate: rgb(14 16 22 / 58%);
|
|
27
|
+
--titlebar-bg: transparent;
|
|
28
|
+
--titlebar-height: 44px;
|
|
29
|
+
--titlebar-padding: 0 14px;
|
|
30
|
+
--dock-bg: rgb(198 210 226 / 15%);
|
|
31
|
+
--dock-border: rgb(255 255 255 / 18%);
|
|
32
|
+
--dock-blur: 48px;
|
|
33
|
+
--menubar-bg: rgb(190 204 222 / 14%);
|
|
34
|
+
--menubar-border: rgb(255 255 255 / 14%);
|
|
35
|
+
--menubar-blur: 44px;
|
|
36
|
+
--menubar-text: rgb(242 242 247 / 100%);
|
|
37
|
+
--sidebar-bg: rgb(205 216 232 / 24%);
|
|
38
|
+
--sidebar-border: rgb(255 255 255 / 16%);
|
|
39
|
+
--focus-ring: rgb(232 115 42 / 60%);
|
|
40
|
+
--label-primary: var(--text-color);
|
|
41
|
+
--label-secondary: var(--text-color-secondary);
|
|
42
|
+
--label-tertiary: rgb(242 242 247 / 42%);
|
|
43
|
+
--separator-primary: rgb(255 255 255 / 16%);
|
|
44
|
+
--separator: var(--separator-primary);
|
|
45
|
+
--fill-secondary: rgb(255 255 255 / 12%);
|
|
46
|
+
--fill-tertiary: rgb(255 255 255 / 7%);
|
|
47
|
+
--material-glass: rgb(212 222 236 / 30%);
|
|
48
|
+
--fly-color-surface: rgb(26 30 40 / 45%);
|
|
49
|
+
--fly-color-surface-alt: rgb(34 40 52 / 50%);
|
|
50
|
+
--fly-color-border: rgb(255 255 255 / 14%);
|
|
51
|
+
--fly-color-text-muted: var(--text-color-secondary);
|
|
52
|
+
--fly-color-primary: var(--primary-color);
|
|
53
|
+
--fly-color-primary-hover: var(--primary-hover);
|
|
54
|
+
--fly-color-danger: var(--system-red);
|
|
55
|
+
--fly-shadow-md: 0 4px 20px rgb(0 0 0 / 35%);
|
|
56
|
+
}
|
package/scss/_theme-spatial.scss
CHANGED
|
@@ -1,22 +1,23 @@
|
|
|
1
|
-
@use 'theme-spatial-vars' as *;
|
|
2
|
-
|
|
3
|
-
// ─── Spatial Theme — applied to <html> via FlyThemeService (shell or standalone) ─
|
|
4
|
-
// Settings label **Spatial**: silver frosted glass (`spatial-theme-vars`).
|
|
5
|
-
html.spatial-theme {
|
|
6
|
-
color-scheme: dark;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
--
|
|
14
|
-
--window-
|
|
15
|
-
--window-
|
|
16
|
-
--window-
|
|
17
|
-
--
|
|
18
|
-
--
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
|
|
22
|
-
}
|
|
1
|
+
@use 'theme-spatial-vars' as *;
|
|
2
|
+
|
|
3
|
+
// ─── Spatial Theme — applied to <html> via FlyThemeService (shell or standalone) ─
|
|
4
|
+
// Settings label **Spatial**: silver frosted glass (`spatial-theme-vars`).
|
|
5
|
+
html.spatial-theme {
|
|
6
|
+
color-scheme: dark;
|
|
7
|
+
|
|
8
|
+
@include spatial-theme-vars;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
12
|
+
html.spatial-theme {
|
|
13
|
+
--material-glass: rgb(212 222 236 / 40%);
|
|
14
|
+
--window-bg: rgb(210 220 236 / 62%);
|
|
15
|
+
--window-blur: 22px;
|
|
16
|
+
--window-backdrop-saturate: 125%;
|
|
17
|
+
--window-content-scrim: rgb(6 8 12 / 65%);
|
|
18
|
+
--glass-blur: 22px;
|
|
19
|
+
--dock-blur: 20px;
|
|
20
|
+
--menubar-blur: 20px;
|
|
21
|
+
--app-content-plate: rgb(14 16 22 / 78%);
|
|
22
|
+
}
|
|
23
|
+
}
|