Skip to content

Commit 73be092

Browse files
pallyoungpallyoung
committed
feat: theme common icons by palette
1 parent 5cb4700 commit 73be092

2 files changed

Lines changed: 273 additions & 2 deletions

File tree

‎packages/web/src/theme/icon-theme.test.ts‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,4 +49,97 @@ describe("theme icon resolver", () => {
4949

5050
expect(new Set([diffIcon, pushIcon, pullIcon, refreshIcon]).size).toBe(4);
5151
});
52+
53+
it("applies richer common icon tones for mint themes", () => {
54+
for (const themeId of ["mint-dark", "mint-light"] as const) {
55+
expect(getIconPresentation(themeId, "nav.agent")).toEqual(
56+
expect.objectContaining({ tone: "accent" })
57+
);
58+
expect(getIconPresentation(themeId, "agent.provider.codex")).toEqual(
59+
expect.objectContaining({ tone: "accent" })
60+
);
61+
expect(getIconPresentation(themeId, "nav.panelTerminal")).toEqual(
62+
expect.objectContaining({ tone: "info" })
63+
);
64+
expect(getIconPresentation(themeId, "terminal.action.new")).toEqual(
65+
expect.objectContaining({ tone: "info" })
66+
);
67+
expect(getIconPresentation(themeId, "git.branch")).toEqual(
68+
expect.objectContaining({ tone: "info" })
69+
);
70+
expect(getIconPresentation(themeId, "git.action.diff")).toEqual(
71+
expect.objectContaining({ tone: "info" })
72+
);
73+
expect(getIconPresentation(themeId, "git.commit")).toEqual(
74+
expect.objectContaining({ tone: "info" })
75+
);
76+
expect(getIconPresentation(themeId, "nav.settings.appearance")).toEqual(
77+
expect.objectContaining({ tone: "accent" })
78+
);
79+
}
80+
});
81+
82+
it("keeps graphite themes restrained while highlighting key icons", () => {
83+
for (const themeId of ["graphite-dark", "graphite-light"] as const) {
84+
expect(getIconPresentation(themeId, "nav.agent")).toEqual(
85+
expect.objectContaining({ tone: "accent" })
86+
);
87+
expect(getIconPresentation(themeId, "agent.provider.codex")).toEqual(
88+
expect.objectContaining({ tone: "accent" })
89+
);
90+
expect(getIconPresentation(themeId, "git.branch")).toEqual(
91+
expect.objectContaining({ tone: "info" })
92+
);
93+
expect(getIconPresentation(themeId, "git.action.diff")).toEqual(
94+
expect.objectContaining({ tone: "info" })
95+
);
96+
expect(getIconPresentation(themeId, "nav.settings.appearance")).toEqual(
97+
expect.objectContaining({ tone: "accent" })
98+
);
99+
expect(getIconPresentation(themeId, "nav.panelTerminal")).toEqual(
100+
expect.objectContaining({ tone: "current" })
101+
);
102+
expect(getIconPresentation(themeId, "terminal.action.new")).toEqual(
103+
expect.objectContaining({ tone: "secondary" })
104+
);
105+
expect(getIconPresentation(themeId, "git.commit")).toEqual(
106+
expect.objectContaining({ tone: "secondary" })
107+
);
108+
}
109+
});
110+
111+
it("gives nord themes a cooler accent hierarchy", () => {
112+
for (const themeId of ["nord-dark", "nord-light"] as const) {
113+
expect(getIconPresentation(themeId, "nav.agent")).toEqual(
114+
expect.objectContaining({ tone: "accent" })
115+
);
116+
expect(getIconPresentation(themeId, "agent.provider.codex")).toEqual(
117+
expect.objectContaining({ tone: "accent" })
118+
);
119+
expect(getIconPresentation(themeId, "nav.panelTerminal")).toEqual(
120+
expect.objectContaining({ tone: "info" })
121+
);
122+
expect(getIconPresentation(themeId, "terminal.action.new")).toEqual(
123+
expect.objectContaining({ tone: "info" })
124+
);
125+
expect(getIconPresentation(themeId, "git.branch")).toEqual(
126+
expect.objectContaining({ tone: "accent" })
127+
);
128+
expect(getIconPresentation(themeId, "git.action.diff")).toEqual(
129+
expect.objectContaining({ tone: "accent" })
130+
);
131+
expect(getIconPresentation(themeId, "git.commit")).toEqual(
132+
expect.objectContaining({ tone: "accent" })
133+
);
134+
expect(getIconPresentation(themeId, "nav.settings.appearance")).toEqual(
135+
expect.objectContaining({ tone: "accent" })
136+
);
137+
expect(getIconPresentation(themeId, "nav.settings.providers")).toEqual(
138+
expect.objectContaining({ tone: "info" })
139+
);
140+
expect(getIconPresentation(themeId, "git.action.pull")).toEqual(
141+
expect.objectContaining({ tone: "secondary" })
142+
);
143+
}
144+
});
52145
});

‎packages/web/src/theme/registry.ts‎

Lines changed: 180 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,38 @@ const THEMES_REGISTRY: ReadonlyArray<AppThemeDefinition> = [
127127
...BASE_ICON_THEME.icons["file.folder.open"],
128128
strokeWidth: 1.8,
129129
},
130+
"nav.agent": {
131+
...BASE_ICON_THEME.icons["nav.agent"],
132+
tone: "accent",
133+
},
134+
"agent.provider.codex": {
135+
...BASE_ICON_THEME.icons["agent.provider.codex"],
136+
tone: "accent",
137+
},
138+
"nav.panelTerminal": {
139+
...BASE_ICON_THEME.icons["nav.panelTerminal"],
140+
tone: "info",
141+
},
142+
"terminal.action.new": {
143+
...BASE_ICON_THEME.icons["terminal.action.new"],
144+
tone: "info",
145+
},
146+
"git.branch": {
147+
...BASE_ICON_THEME.icons["git.branch"],
148+
tone: "info",
149+
},
150+
"git.action.diff": {
151+
...BASE_ICON_THEME.icons["git.action.diff"],
152+
tone: "info",
153+
},
154+
"git.commit": {
155+
...BASE_ICON_THEME.icons["git.commit"],
156+
tone: "info",
157+
},
158+
"nav.settings.appearance": {
159+
...BASE_ICON_THEME.icons["nav.settings.appearance"],
160+
tone: "accent",
161+
},
130162
}),
131163
monaco: {
132164
base: "vs-dark",
@@ -163,6 +195,38 @@ const THEMES_REGISTRY: ReadonlyArray<AppThemeDefinition> = [
163195
...BASE_ICON_THEME.icons["file.folder.open"],
164196
strokeWidth: 1.8,
165197
},
198+
"nav.agent": {
199+
...BASE_ICON_THEME.icons["nav.agent"],
200+
tone: "accent",
201+
},
202+
"agent.provider.codex": {
203+
...BASE_ICON_THEME.icons["agent.provider.codex"],
204+
tone: "accent",
205+
},
206+
"nav.panelTerminal": {
207+
...BASE_ICON_THEME.icons["nav.panelTerminal"],
208+
tone: "info",
209+
},
210+
"terminal.action.new": {
211+
...BASE_ICON_THEME.icons["terminal.action.new"],
212+
tone: "info",
213+
},
214+
"git.branch": {
215+
...BASE_ICON_THEME.icons["git.branch"],
216+
tone: "info",
217+
},
218+
"git.action.diff": {
219+
...BASE_ICON_THEME.icons["git.action.diff"],
220+
tone: "info",
221+
},
222+
"git.commit": {
223+
...BASE_ICON_THEME.icons["git.commit"],
224+
tone: "info",
225+
},
226+
"nav.settings.appearance": {
227+
...BASE_ICON_THEME.icons["nav.settings.appearance"],
228+
tone: "accent",
229+
},
166230
}),
167231
monaco: {
168232
base: "vs",
@@ -213,7 +277,28 @@ const THEMES_REGISTRY: ReadonlyArray<AppThemeDefinition> = [
213277
brightCyan: "#93ddd8",
214278
brightWhite: "#f0f3f6",
215279
},
216-
iconTheme: BASE_ICON_THEME,
280+
iconTheme: createIconTheme({
281+
"nav.agent": {
282+
...BASE_ICON_THEME.icons["nav.agent"],
283+
tone: "accent",
284+
},
285+
"agent.provider.codex": {
286+
...BASE_ICON_THEME.icons["agent.provider.codex"],
287+
tone: "accent",
288+
},
289+
"git.branch": {
290+
...BASE_ICON_THEME.icons["git.branch"],
291+
tone: "info",
292+
},
293+
"git.action.diff": {
294+
...BASE_ICON_THEME.icons["git.action.diff"],
295+
tone: "info",
296+
},
297+
"nav.settings.appearance": {
298+
...BASE_ICON_THEME.icons["nav.settings.appearance"],
299+
tone: "accent",
300+
},
301+
}),
217302
monaco: {
218303
base: "vs-dark",
219304
inherit: true,
@@ -263,7 +348,28 @@ const THEMES_REGISTRY: ReadonlyArray<AppThemeDefinition> = [
263348
brightCyan: "#2e86a5",
264349
brightWhite: "#111827",
265350
},
266-
iconTheme: BASE_ICON_THEME,
351+
iconTheme: createIconTheme({
352+
"nav.agent": {
353+
...BASE_ICON_THEME.icons["nav.agent"],
354+
tone: "accent",
355+
},
356+
"agent.provider.codex": {
357+
...BASE_ICON_THEME.icons["agent.provider.codex"],
358+
tone: "accent",
359+
},
360+
"git.branch": {
361+
...BASE_ICON_THEME.icons["git.branch"],
362+
tone: "info",
363+
},
364+
"git.action.diff": {
365+
...BASE_ICON_THEME.icons["git.action.diff"],
366+
tone: "info",
367+
},
368+
"nav.settings.appearance": {
369+
...BASE_ICON_THEME.icons["nav.settings.appearance"],
370+
tone: "accent",
371+
},
372+
}),
267373
monaco: {
268374
base: "vs",
269375
inherit: true,
@@ -314,6 +420,42 @@ const THEMES_REGISTRY: ReadonlyArray<AppThemeDefinition> = [
314420
brightWhite: "#eceff4",
315421
},
316422
iconTheme: createIconTheme({
423+
"nav.agent": {
424+
...BASE_ICON_THEME.icons["nav.agent"],
425+
tone: "accent",
426+
},
427+
"agent.provider.codex": {
428+
...BASE_ICON_THEME.icons["agent.provider.codex"],
429+
tone: "accent",
430+
},
431+
"nav.panelTerminal": {
432+
...BASE_ICON_THEME.icons["nav.panelTerminal"],
433+
tone: "info",
434+
},
435+
"terminal.action.new": {
436+
...BASE_ICON_THEME.icons["terminal.action.new"],
437+
tone: "info",
438+
},
439+
"git.branch": {
440+
...BASE_ICON_THEME.icons["git.branch"],
441+
tone: "accent",
442+
},
443+
"git.action.diff": {
444+
...BASE_ICON_THEME.icons["git.action.diff"],
445+
tone: "accent",
446+
},
447+
"git.commit": {
448+
...BASE_ICON_THEME.icons["git.commit"],
449+
tone: "accent",
450+
},
451+
"nav.settings.appearance": {
452+
...BASE_ICON_THEME.icons["nav.settings.appearance"],
453+
tone: "accent",
454+
},
455+
"nav.settings.providers": {
456+
...BASE_ICON_THEME.icons["nav.settings.providers"],
457+
tone: "info",
458+
},
317459
"state.warning": {
318460
...BASE_ICON_THEME.icons["state.warning"],
319461
},
@@ -373,6 +515,42 @@ const THEMES_REGISTRY: ReadonlyArray<AppThemeDefinition> = [
373515
brightWhite: "#2e3440",
374516
},
375517
iconTheme: createIconTheme({
518+
"nav.agent": {
519+
...BASE_ICON_THEME.icons["nav.agent"],
520+
tone: "accent",
521+
},
522+
"agent.provider.codex": {
523+
...BASE_ICON_THEME.icons["agent.provider.codex"],
524+
tone: "accent",
525+
},
526+
"nav.panelTerminal": {
527+
...BASE_ICON_THEME.icons["nav.panelTerminal"],
528+
tone: "info",
529+
},
530+
"terminal.action.new": {
531+
...BASE_ICON_THEME.icons["terminal.action.new"],
532+
tone: "info",
533+
},
534+
"git.branch": {
535+
...BASE_ICON_THEME.icons["git.branch"],
536+
tone: "accent",
537+
},
538+
"git.action.diff": {
539+
...BASE_ICON_THEME.icons["git.action.diff"],
540+
tone: "accent",
541+
},
542+
"git.commit": {
543+
...BASE_ICON_THEME.icons["git.commit"],
544+
tone: "accent",
545+
},
546+
"nav.settings.appearance": {
547+
...BASE_ICON_THEME.icons["nav.settings.appearance"],
548+
tone: "accent",
549+
},
550+
"nav.settings.providers": {
551+
...BASE_ICON_THEME.icons["nav.settings.providers"],
552+
tone: "info",
553+
},
376554
"state.warning": {
377555
...BASE_ICON_THEME.icons["state.warning"],
378556
},

0 commit comments

Comments
 (0)