@mohamedatia/fly-design-system 2.14.0 → 2.15.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 +172 -126
- package/fesm2022/mohamedatia-fly-design-system.mjs.map +1 -1
- package/package.json +4 -1
- package/scss/_business-app-buttons.scss +213 -213
- package/scss/_fly-theme.scss +8 -8
- package/scss/_theme-auto.scss +6 -6
- package/scss/_theme-dark-vars.scss +49 -49
- package/scss/_theme-dark.scss +142 -142
- package/scss/_theme-light.scss +108 -108
- package/scss/_tokens.scss +115 -115
- package/types/mohamedatia-fly-design-system.d.ts +41 -2
- package/types/mohamedatia-fly-design-system.d.ts.map +1 -1
package/scss/_theme-dark.scss
CHANGED
|
@@ -1,142 +1,142 @@
|
|
|
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
|
-
}
|
|
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
|
@@ -1,108 +1,108 @@
|
|
|
1
|
-
// ─── Light Theme (default) ───────────────────────────────────────────────────
|
|
2
|
-
:root,
|
|
3
|
-
html.light-theme {
|
|
4
|
-
color-scheme: light;
|
|
5
|
-
|
|
6
|
-
--primary-color: #E8732A;
|
|
7
|
-
--primary-hover: #D4631E;
|
|
8
|
-
--primary-light: rgb(232 115 42 / 12%);
|
|
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
|
-
--circles-bg-2: rgb(69 117 254 / 8%);
|
|
17
|
-
--accent:#75ecff;
|
|
18
|
-
--ink:#fff;
|
|
19
|
-
--ink-2:#fdfdfd;
|
|
20
|
-
--ink-3:rgb(255, 255, 255 , 0.8);
|
|
21
|
-
--line: rgb(0, 0, 0 , 0.08);
|
|
22
|
-
--accent-green: var(--system-green);
|
|
23
|
-
--accent-red: var(--system-red);
|
|
24
|
-
--accent-blue: var(--system-blue);
|
|
25
|
-
--accent-orange: #E8732A;
|
|
26
|
-
--accent-yellow: var(--system-yellow);
|
|
27
|
-
--surface-ground: #f8f9fa;
|
|
28
|
-
--surface-section: #fff;
|
|
29
|
-
--surface-card:linear-gradient(0deg, rgb(0 0 0 / 10%) 0%, rgb(0 0 0 / 10%) 100%), rgb(255 255 255 / 10%);
|
|
30
|
-
--surface-border: rgb(0 0 0 / 6%);
|
|
31
|
-
--surface-hover: rgb(0 0 0 / 4%);
|
|
32
|
-
--text-color: #fff;
|
|
33
|
-
--text-color-secondary: rgb(17 24 39 / 55%);
|
|
34
|
-
--glass-bg: rgb(255 255 255 / 10%);
|
|
35
|
-
--glass-bg-elevated: rgb(255 255 255 / 72%);
|
|
36
|
-
--glass-blur: 50px;
|
|
37
|
-
--glass-border: rgba(255, 255, 255, 0.4);
|
|
38
|
-
--glass-shadow: 0 8px 40px rgb(0 0 0 / 8%);
|
|
39
|
-
--glass-inner-glow: inset 0 1px 0 rgb(255 255 255 / 50%);
|
|
40
|
-
--card-radius: 16px;
|
|
41
|
-
--card-padding: 20px;
|
|
42
|
-
--card-gap: 14px;
|
|
43
|
-
|
|
44
|
-
// Apps launcher card tokens — matches Figma frosted glass card spec
|
|
45
|
-
--launcher-card-bg: rgba(224, 224, 224, 0.3);
|
|
46
|
-
--launcher-card-border: rgba(255, 255, 255, 0.4);
|
|
47
|
-
--launcher-card-blur: 50px;
|
|
48
|
-
--launcher-card-radius: 16px;
|
|
49
|
-
--launcher-card-icon-bg: rgba(255, 255, 255, 0.1);
|
|
50
|
-
--launcher-card-icon-border: rgba(255, 255, 255, 0.1);
|
|
51
|
-
--launcher-card-icon-blur: 4px;
|
|
52
|
-
--launcher-card-title: #ffffff;
|
|
53
|
-
--launcher-card-desc: rgb(255, 255, 255 , 0.8);
|
|
54
|
-
|
|
55
|
-
// Window chrome — light frosted glass similar to Figma spec (soft white plate,
|
|
56
|
-
// strong background blur, subtle luminous border).
|
|
57
|
-
--window-bg: rgb(255 255 255 / 6%);
|
|
58
|
-
--window-radius: 24px;
|
|
59
|
-
--window-blur: 64px;
|
|
60
|
-
--window-backdrop-saturate: 175%;
|
|
61
|
-
--window-shadow: 0 28px 96px rgb(0 0 0 / 18%);
|
|
62
|
-
--window-border: rgb(255 255 255 / 17%);
|
|
63
|
-
--window-specular: inset 0 1px 0 rgb(255 255 255 / 30%),
|
|
64
|
-
inset 0 -1px 0 rgb(255 255 255 / 16%);
|
|
65
|
-
--window-content-scrim: transparent;
|
|
66
|
-
--app-content-plate: transparent;
|
|
67
|
-
--titlebar-bg: transparent;
|
|
68
|
-
--titlebar-height: 44px;
|
|
69
|
-
--titlebar-padding: 0 14px;
|
|
70
|
-
--dock-bg: rgb(255 255 255 / 15%);
|
|
71
|
-
--dock-border: rgb(255 255 255 / 30%);
|
|
72
|
-
--dock-blur:50px;
|
|
73
|
-
--menubar-bg: rgb(255 255 255 / 55%);
|
|
74
|
-
--menubar-border: rgb(0 0 0 / 6%);
|
|
75
|
-
--menubar-text: #fff;
|
|
76
|
-
--menubar-blur: 40px;
|
|
77
|
-
--menubar-radius: 24px;
|
|
78
|
-
--sidebar-bg: rgb(255 255 255 / 35%);
|
|
79
|
-
--sidebar-border: rgb(255 255 255 / 25%);
|
|
80
|
-
--sidebar-width: 60px;
|
|
81
|
-
--sidebar-icon-size: 36px;
|
|
82
|
-
--sidebar-radius: 28px;
|
|
83
|
-
--focus-ring: rgb(232 115 42 / 50%);
|
|
84
|
-
|
|
85
|
-
// Segmented `.vos-btn.selected` / `.active` (Settings theme row, clock, weather, etc.): dark pill on light UI.
|
|
86
|
-
--btn-selected-bg: #111827;
|
|
87
|
-
--btn-selected-text: #fff;
|
|
88
|
-
|
|
89
|
-
// Business Apps / opaque content: :root visionOS tokens use white labels; override for light surfaces.
|
|
90
|
-
--label-primary: #fff;
|
|
91
|
-
--label-secondary: rgb(17 24 39 / 65%);
|
|
92
|
-
--label-tertiary: rgb(17 24 39 / 45%);
|
|
93
|
-
--separator-primary: rgb(0 0 0 / 10%);
|
|
94
|
-
--separator: var(--separator-primary);
|
|
95
|
-
--fill-secondary: #e5e7eb;
|
|
96
|
-
--fill-tertiary: rgb(0 0 0 / 4%);
|
|
97
|
-
--material-glass: #fff;
|
|
98
|
-
|
|
99
|
-
// Aliases used by some Business App SCSS (not part of core visionOS tokens).
|
|
100
|
-
--fly-color-surface: #fff;
|
|
101
|
-
--fly-color-surface-alt: #f3f4f6;
|
|
102
|
-
--fly-color-border: #e5e7eb;
|
|
103
|
-
--fly-color-text-muted: rgb(17 24 39 / 55%);
|
|
104
|
-
--fly-color-primary: var(--primary-color);
|
|
105
|
-
--fly-color-primary-hover: var(--primary-hover);
|
|
106
|
-
--fly-color-danger: var(--system-red);
|
|
107
|
-
--fly-shadow-md: 0 4px 12px rgb(0 0 0 / 8%);
|
|
108
|
-
}
|
|
1
|
+
// ─── Light Theme (default) ───────────────────────────────────────────────────
|
|
2
|
+
:root,
|
|
3
|
+
html.light-theme {
|
|
4
|
+
color-scheme: light;
|
|
5
|
+
|
|
6
|
+
--primary-color: #E8732A;
|
|
7
|
+
--primary-hover: #D4631E;
|
|
8
|
+
--primary-light: rgb(232 115 42 / 12%);
|
|
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
|
+
--circles-bg-2: rgb(69 117 254 / 8%);
|
|
17
|
+
--accent:#75ecff;
|
|
18
|
+
--ink:#fff;
|
|
19
|
+
--ink-2:#fdfdfd;
|
|
20
|
+
--ink-3:rgb(255, 255, 255 , 0.8);
|
|
21
|
+
--line: rgb(0, 0, 0 , 0.08);
|
|
22
|
+
--accent-green: var(--system-green);
|
|
23
|
+
--accent-red: var(--system-red);
|
|
24
|
+
--accent-blue: var(--system-blue);
|
|
25
|
+
--accent-orange: #E8732A;
|
|
26
|
+
--accent-yellow: var(--system-yellow);
|
|
27
|
+
--surface-ground: #f8f9fa;
|
|
28
|
+
--surface-section: #fff;
|
|
29
|
+
--surface-card:linear-gradient(0deg, rgb(0 0 0 / 10%) 0%, rgb(0 0 0 / 10%) 100%), rgb(255 255 255 / 10%);
|
|
30
|
+
--surface-border: rgb(0 0 0 / 6%);
|
|
31
|
+
--surface-hover: rgb(0 0 0 / 4%);
|
|
32
|
+
--text-color: #fff;
|
|
33
|
+
--text-color-secondary: rgb(17 24 39 / 55%);
|
|
34
|
+
--glass-bg: rgb(255 255 255 / 10%);
|
|
35
|
+
--glass-bg-elevated: rgb(255 255 255 / 72%);
|
|
36
|
+
--glass-blur: 50px;
|
|
37
|
+
--glass-border: rgba(255, 255, 255, 0.4);
|
|
38
|
+
--glass-shadow: 0 8px 40px rgb(0 0 0 / 8%);
|
|
39
|
+
--glass-inner-glow: inset 0 1px 0 rgb(255 255 255 / 50%);
|
|
40
|
+
--card-radius: 16px;
|
|
41
|
+
--card-padding: 20px;
|
|
42
|
+
--card-gap: 14px;
|
|
43
|
+
|
|
44
|
+
// Apps launcher card tokens — matches Figma frosted glass card spec
|
|
45
|
+
--launcher-card-bg: rgba(224, 224, 224, 0.3);
|
|
46
|
+
--launcher-card-border: rgba(255, 255, 255, 0.4);
|
|
47
|
+
--launcher-card-blur: 50px;
|
|
48
|
+
--launcher-card-radius: 16px;
|
|
49
|
+
--launcher-card-icon-bg: rgba(255, 255, 255, 0.1);
|
|
50
|
+
--launcher-card-icon-border: rgba(255, 255, 255, 0.1);
|
|
51
|
+
--launcher-card-icon-blur: 4px;
|
|
52
|
+
--launcher-card-title: #ffffff;
|
|
53
|
+
--launcher-card-desc: rgb(255, 255, 255 , 0.8);
|
|
54
|
+
|
|
55
|
+
// Window chrome — light frosted glass similar to Figma spec (soft white plate,
|
|
56
|
+
// strong background blur, subtle luminous border).
|
|
57
|
+
--window-bg: rgb(255 255 255 / 6%);
|
|
58
|
+
--window-radius: 24px;
|
|
59
|
+
--window-blur: 64px;
|
|
60
|
+
--window-backdrop-saturate: 175%;
|
|
61
|
+
--window-shadow: 0 28px 96px rgb(0 0 0 / 18%);
|
|
62
|
+
--window-border: rgb(255 255 255 / 17%);
|
|
63
|
+
--window-specular: inset 0 1px 0 rgb(255 255 255 / 30%),
|
|
64
|
+
inset 0 -1px 0 rgb(255 255 255 / 16%);
|
|
65
|
+
--window-content-scrim: transparent;
|
|
66
|
+
--app-content-plate: transparent;
|
|
67
|
+
--titlebar-bg: transparent;
|
|
68
|
+
--titlebar-height: 44px;
|
|
69
|
+
--titlebar-padding: 0 14px;
|
|
70
|
+
--dock-bg: rgb(255 255 255 / 15%);
|
|
71
|
+
--dock-border: rgb(255 255 255 / 30%);
|
|
72
|
+
--dock-blur:50px;
|
|
73
|
+
--menubar-bg: rgb(255 255 255 / 55%);
|
|
74
|
+
--menubar-border: rgb(0 0 0 / 6%);
|
|
75
|
+
--menubar-text: #fff;
|
|
76
|
+
--menubar-blur: 40px;
|
|
77
|
+
--menubar-radius: 24px;
|
|
78
|
+
--sidebar-bg: rgb(255 255 255 / 35%);
|
|
79
|
+
--sidebar-border: rgb(255 255 255 / 25%);
|
|
80
|
+
--sidebar-width: 60px;
|
|
81
|
+
--sidebar-icon-size: 36px;
|
|
82
|
+
--sidebar-radius: 28px;
|
|
83
|
+
--focus-ring: rgb(232 115 42 / 50%);
|
|
84
|
+
|
|
85
|
+
// Segmented `.vos-btn.selected` / `.active` (Settings theme row, clock, weather, etc.): dark pill on light UI.
|
|
86
|
+
--btn-selected-bg: #111827;
|
|
87
|
+
--btn-selected-text: #fff;
|
|
88
|
+
|
|
89
|
+
// Business Apps / opaque content: :root visionOS tokens use white labels; override for light surfaces.
|
|
90
|
+
--label-primary: #fff;
|
|
91
|
+
--label-secondary: rgb(17 24 39 / 65%);
|
|
92
|
+
--label-tertiary: rgb(17 24 39 / 45%);
|
|
93
|
+
--separator-primary: rgb(0 0 0 / 10%);
|
|
94
|
+
--separator: var(--separator-primary);
|
|
95
|
+
--fill-secondary: #e5e7eb;
|
|
96
|
+
--fill-tertiary: rgb(0 0 0 / 4%);
|
|
97
|
+
--material-glass: #fff;
|
|
98
|
+
|
|
99
|
+
// Aliases used by some Business App SCSS (not part of core visionOS tokens).
|
|
100
|
+
--fly-color-surface: #fff;
|
|
101
|
+
--fly-color-surface-alt: #f3f4f6;
|
|
102
|
+
--fly-color-border: #e5e7eb;
|
|
103
|
+
--fly-color-text-muted: rgb(17 24 39 / 55%);
|
|
104
|
+
--fly-color-primary: var(--primary-color);
|
|
105
|
+
--fly-color-primary-hover: var(--primary-hover);
|
|
106
|
+
--fly-color-danger: var(--system-red);
|
|
107
|
+
--fly-shadow-md: 0 4px 12px rgb(0 0 0 / 8%);
|
|
108
|
+
}
|