Skip to content

Commit e8614c2

Browse files
CyanSaltCyanSalt
committed
feat: update system colors
1 parent ae2a77b commit e8614c2

File tree

5 files changed

+56
-21
lines changed

5 files changed

+56
-21
lines changed

‎addons/proxy/src/renderer/ProxyAnchor.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ function configure(event: MouseEvent) {
4848
&.active {
4949
color: var(--design-highlight-color);
5050
&.system {
51-
color: rgb(var(--system-magenta));
51+
color: rgb(var(--system-purple));
5252
}
5353
}
5454
}

‎src/main/lib/theme.ts‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,18 @@ const THEME_CSS_COLORS: Partial<Record<keyof ThemeDefinition, string>> = {
4545

4646
const EXTRA_CSS_COLORS: Partial<Record<Exclude<keyof Theme, keyof ThemeDefinition>, string>> = {
4747
systemRed: '--system-red',
48+
systemOrange: '--system-orange',
4849
systemYellow: '--system-yellow',
4950
systemGreen: '--system-green',
51+
systemMint: '--system-mint',
52+
systemTeal: '--system-teal',
5053
systemCyan: '--system-cyan',
5154
systemBlue: '--system-blue',
52-
systemMagenta: '--system-magenta',
55+
systemIndigo: '--system-indigo',
56+
systemPurple: '--system-purple',
57+
systemPink: '--system-pink',
58+
systemBrown: '--system-brown',
59+
systemGray: '--system-gray',
5360
systemAccent: '--system-accent',
5461
acrylicBackground: '--acrylic-background',
5562
}
@@ -168,13 +175,17 @@ const theme = $computed(() => {
168175
if (!userTheme.cursorAccent) {
169176
definition.cursorAccent = toCSSHEX({ ...backgroundRGBA, a: 1 })
170177
}
171-
if (process.platform === 'darwin') {
172-
definition.systemRed = systemPreferences.getSystemColor('red')
173-
definition.systemYellow = systemPreferences.getSystemColor('yellow')
174-
definition.systemGreen = systemPreferences.getSystemColor('green')
175-
definition.systemBlue = systemPreferences.getSystemColor('blue')
176-
definition.systemMagenta = systemPreferences.getSystemColor('pink')
177-
}
178+
// if (process.platform === 'darwin') {
179+
// definition.systemRed = systemPreferences.getSystemColor('red')
180+
// definition.systemOrange = systemPreferences.getSystemColor('orange')
181+
// definition.systemYellow = systemPreferences.getSystemColor('yellow')
182+
// definition.systemGreen = systemPreferences.getSystemColor('green')
183+
// definition.systemBlue = systemPreferences.getSystemColor('blue')
184+
// definition.systemPurple = systemPreferences.getSystemColor('purple')
185+
// definition.systemPink = systemPreferences.getSystemColor('pink')
186+
// definition.systemBrown = systemPreferences.getSystemColor('brown')
187+
// definition.systemGray = systemPreferences.getSystemColor('gray')
188+
// }
178189
definition.systemAccent = accentColor ? `#${accentColor.slice(0, 6)}` : ''
179190
const backgroundHSLA = toHSLA(backgroundRGBA)
180191
const accentRGBA = accentColor ? toRGBA(`#${accentColor.slice(0, 6)}`) : undefined

‎src/renderer/components/App.vue‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -115,15 +115,21 @@ onMounted(() => {
115115
116116
// https://developer.apple.com/design/human-interface-guidelines/color#macOS-system-colors
117117
:global(:root) {
118-
--system-red: 255 49 38;
119-
--system-yellow: 245 139 0;
120-
--system-green: 30 195 55;
121-
--system-cyan: 0 189 180;
122-
--system-blue: 0 122 245;
123-
--system-magenta: 245 35 75;
118+
--system-red: 255 59 48;
119+
--system-orange: 255 149 0;
120+
--system-yellow: 255 204 0;
121+
--system-green: 40 205 65;
122+
--system-mint: 0 199 190;
123+
--system-teal: 89 173 196;
124+
--system-cyan: 85 190 240;
125+
--system-blue: 0 122 255;
126+
--system-indigo: 88 86 214;
127+
--system-purple: 175 82 222;
128+
--system-pink: 255 45 85;
129+
--system-brown: 162 132 94;
130+
--system-gray: 142 142 147;
124131
--system-accent: var(--system-blue);
125132
--design-active-background: rgb(var(--theme-background) / var(--theme-opacity));
126-
--design-alert-color: rgb(var(--system-blue));
127133
--design-card-border-radius: var(--design-card-gap);
128134
--design-card-gap: 8px;
129135
--design-card-shadow: 0 2px 4px 0px rgb(0 0 0 / 10%);
@@ -132,10 +138,21 @@ onMounted(() => {
132138
--design-highlight-background: color-mix(in hsl, rgb(var(--theme-foreground) / 5%), rgb(var(--acrylic-background) / 5%));
133139
--design-input-background: color-mix(in hsl, rgb(var(--theme-foreground) / 10%) 75%, rgb(var(--acrylic-background) / 10%));
134140
@media (prefers-color-scheme: dark) {
135-
--system-cyan: 108 224 219;
141+
--system-red: 255 69 58;
142+
--system-orange: 255 159 10;
143+
--system-yellow: 255 214 10;
144+
--system-green: 50 215 75;
145+
--system-mint: 102 212 207;
146+
--system-teal: 106 196 220;
147+
--system-cyan: 90 200 245;
148+
--system-blue: 10 132 255;
149+
--system-indigo: 94 92 230;
150+
--system-purple: 191 90 242;
151+
--system-pink: 255 55 95;
152+
--system-brown: 172 142 104;
153+
--system-gray: 152 152 157;
136154
--design-active-background: rgb(255 255 255 / 16.667%);
137-
--design-alert-color: rgb(var(--system-yellow));
138-
--design-highlight-color: rgb(var(--system-cyan));
155+
--design-highlight-color: rgb(var(--system-mint));
139156
--design-highlight-background: rgb(255 255 255 / 5%);
140157
}
141158
}

‎src/renderer/components/TabItem.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ function close() {
259259
color: rgb(var(--system-green));
260260
}
261261
&.alerting {
262-
color: var(--design-alert-color);
262+
color: rgb(var(--system-yellow));
263263
opacity: 1;
264264
}
265265
.tab-item.virtual &:not(.alerting) {

‎src/types/theme.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,18 @@ export interface Theme extends Required<ThemeDefinition> {
1313
opacity: number,
1414
variables: Record<string, string>,
1515
systemRed: string,
16+
systemOrange: string,
1617
systemYellow: string,
1718
systemGreen: string,
19+
systemMint: string,
20+
systemTeal: string,
1821
systemCyan: string,
1922
systemBlue: string,
20-
systemMagenta: string,
23+
systemIndigo: string,
24+
systemPurple: string,
25+
systemPink: string,
26+
systemBrown: string,
27+
systemGray: string,
2128
systemAccent: string,
2229
vibrancy: BrowserWindowConstructorOptions['vibrancy'] | boolean,
2330
acrylicBackground: string,

0 commit comments

Comments
 (0)