Skip to content

Commit 7110b04

Browse files
mohammedahmed18mohammedahmed18
committed
style(desktop): refine dark switches
1 parent c6f0dc3 commit 7110b04

4 files changed

Lines changed: 61 additions & 18 deletions

File tree

‎apps/desktop/src/component-theme-contract.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ describe("desktop component theme contract", () => {
193193
expectToken(settingsNavState, "color", "--control-selected-text");
194194
expectToken(darkSettingsNavSmall, "color", "--control-muted");
195195
expectToken(darkSharedActive, "box-shadow", "--surface-shadow");
196-
expectToken(darkSourceCards, "border-color", "--control-border-hover");
196+
expectToken(darkSourceCards, "border-color", "--line");
197197
expectToken(darkSourceCards, "background", "--surface-muted");
198198
expectToken(darkSourceCards, "color", "--ink");
199199
expectToken(primaryButton, "box-shadow", "--surface-shadow");

‎apps/desktop/src/secondary-surface-theme.test.js‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -278,13 +278,19 @@ describe("desktop secondary surface theme contract", () => {
278278
expect(cssBlock(':root[data-theme="dark"] .search-state.conflict,\n:root[data-theme="dark"] .search-state.no_access,\n:root[data-theme="dark"] .search-state.not_found')).toContain("background: var(--status-danger-bg);");
279279
expect(cssBlock(':root[data-theme="dark"] .search-state.conflict,\n:root[data-theme="dark"] .search-state.no_access,\n:root[data-theme="dark"] .search-state.not_found')).toContain("color: var(--status-danger-text);");
280280
expect(cssBlock(':root[data-theme="dark"] .tray-section-heading button,\n:root[data-theme="dark"] .tray-result button,\n:root[data-theme="dark"] .tray-suggestion button,\n:root[data-theme="dark"] .tray-controls-row button,\n:root[data-theme="dark"] .tray-footer button,\n:root[data-theme="dark"] .tray-list-row em')).toContain("color: var(--accent);");
281-
expect(cssBlock(".toggle")).toContain("background: var(--control-disabled-bg);");
282-
expect(cssBlock(".toggle i")).toContain("background: var(--surface-raised);");
283-
expect(cssBlock(".toggle i")).toContain("box-shadow: var(--surface-shadow);");
284-
expect(cssBlock(".toggle.enabled")).toContain("background: var(--accent);");
285-
expect(cssBlock(".toggle.enabled i")).toContain("background: var(--accent-ink);");
286-
expect(cssBlock(':root[data-theme="dark"] .toggle')).toContain("background: var(--control-disabled-bg);");
287-
expect(cssBlock(':root[data-theme="dark"] .toggle i')).toContain("background: var(--surface-raised);");
281+
expect(cssBlock(".toggle")).toContain("background: var(--switch-track-bg);");
282+
expect(cssBlock(".toggle")).toContain("box-shadow: inset 0 0 0 1px var(--switch-track-border);");
283+
expect(cssBlock(".toggle i")).toContain("background: var(--switch-thumb-bg);");
284+
expect(cssBlock(".toggle i")).toContain("box-shadow: var(--switch-thumb-shadow);");
285+
expect(cssBlock(".toggle.enabled")).toContain("background: var(--switch-track-active-bg);");
286+
expect(cssBlock(".toggle.enabled i")).toContain("background: var(--switch-thumb-active-bg);");
287+
expect(cssBlock(':root[data-theme="dark"] .toggle')).toContain("background: var(--switch-track-bg);");
288+
expect(cssBlock(':root[data-theme="dark"] .toggle')).toContain("box-shadow: inset 0 0 0 1px var(--switch-track-border);");
289+
expect(cssBlock(':root[data-theme="dark"] .toggle i')).toContain("background: var(--switch-thumb-bg);");
290+
expect(cssBlock(':root[data-theme="dark"] .toggle i')).toContain("box-shadow: var(--switch-thumb-shadow);");
291+
expect(cssBlock(':root[data-theme="dark"] .toggle.enabled')).toContain("background: var(--switch-track-active-bg);");
292+
expect(cssBlock(':root[data-theme="dark"] .toggle.enabled')).toContain("box-shadow: inset 0 0 0 1px var(--switch-track-active-bg);");
293+
expect(cssBlock(':root[data-theme="dark"] .toggle.enabled i')).toContain("background: var(--switch-thumb-active-bg);");
288294

289295
expectNoRawSurfaceColors(cssBlock(".tray-live-mode-control:hover:not(:disabled)"));
290296
expectNoRawSurfaceColors(cssBlock(".tray-review-summary"));
@@ -294,6 +300,8 @@ describe("desktop secondary surface theme contract", () => {
294300
expectNoRawSurfaceColors(cssBlock(".toggle.enabled i"));
295301
expectNoRawSurfaceColors(cssBlock(':root[data-theme="dark"] .toggle'));
296302
expectNoRawSurfaceColors(cssBlock(':root[data-theme="dark"] .toggle i'));
303+
expectNoRawSurfaceColors(cssBlock(':root[data-theme="dark"] .toggle.enabled'));
304+
expectNoRawSurfaceColors(cssBlock(':root[data-theme="dark"] .toggle.enabled i'));
297305
expectNoRawSurfaceColors(cssBlock(".tray-quit-menu button:hover:not(:disabled)"));
298306
expectNoRawSurfaceColors(
299307
cssBlock(

‎apps/desktop/src/styles.css‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,12 @@
6565
--live-control-bg: rgba(229, 245, 238, 0.82);
6666
--live-control-hover-bg: rgba(219, 243, 232, 0.96);
6767
--live-control-active-bg: rgba(208, 239, 224, 0.98);
68+
--switch-track-bg: #dde5e0;
69+
--switch-track-border: rgba(25, 36, 31, 0.16);
70+
--switch-track-active-bg: var(--accent);
71+
--switch-thumb-bg: #ffffff;
72+
--switch-thumb-active-bg: var(--accent-ink);
73+
--switch-thumb-shadow: 0 1px 5px rgba(20, 30, 43, 0.22);
6874
--nav-hover-bg: rgba(229, 245, 238, 0.72);
6975
--nav-active-bg: rgba(15, 143, 98, 0.14);
7076
--nav-active-text: var(--accent);
@@ -164,6 +170,12 @@
164170
--live-control-bg: #2a2d2b;
165171
--live-control-hover-bg: #303532;
166172
--live-control-active-bg: rgba(0, 215, 124, 0.16);
173+
--switch-track-bg: #343936;
174+
--switch-track-border: rgba(255, 255, 255, 0.2);
175+
--switch-track-active-bg: var(--accent);
176+
--switch-thumb-bg: #f0f3ed;
177+
--switch-thumb-active-bg: var(--accent-ink);
178+
--switch-thumb-shadow: 0 1px 6px rgba(0, 0, 0, 0.34);
167179
--nav-hover-bg: #262927;
168180
--nav-active-bg: rgba(0, 215, 124, 0.12);
169181
--nav-active-text: var(--accent);
@@ -4596,7 +4608,7 @@ button.home-stat:hover {
45964608
:root[data-theme="dark"] .source-ready-card,
45974609
:root[data-theme="dark"] .connector-choice-card.active,
45984610
:root[data-theme="dark"] .mount-card.active {
4599-
border-color: var(--control-border-hover);
4611+
border-color: var(--line);
46004612
background: var(--surface-muted);
46014613
color: var(--ink);
46024614
}
@@ -4645,11 +4657,22 @@ button.home-stat:hover {
46454657
}
46464658

46474659
:root[data-theme="dark"] .toggle {
4648-
background: var(--control-disabled-bg);
4660+
background: var(--switch-track-bg);
4661+
box-shadow: inset 0 0 0 1px var(--switch-track-border);
46494662
}
46504663

46514664
:root[data-theme="dark"] .toggle i {
4652-
background: var(--surface-raised);
4665+
background: var(--switch-thumb-bg);
4666+
box-shadow: var(--switch-thumb-shadow);
4667+
}
4668+
4669+
:root[data-theme="dark"] .toggle.enabled {
4670+
background: var(--switch-track-active-bg);
4671+
box-shadow: inset 0 0 0 1px var(--switch-track-active-bg);
4672+
}
4673+
4674+
:root[data-theme="dark"] .toggle.enabled i {
4675+
background: var(--switch-thumb-active-bg);
46534676
}
46544677

46554678
.setting-link {
@@ -4674,8 +4697,11 @@ button.home-stat:hover {
46744697
height: 24px;
46754698
border: 0;
46764699
border-radius: 999px;
4677-
background: var(--control-disabled-bg);
4678-
transition: background-color 160ms ease;
4700+
background: var(--switch-track-bg);
4701+
box-shadow: inset 0 0 0 1px var(--switch-track-border);
4702+
transition:
4703+
background-color 160ms ease,
4704+
box-shadow 160ms ease;
46794705
}
46804706

46814707
.toggle i {
@@ -4685,22 +4711,25 @@ button.home-stat:hover {
46854711
width: 18px;
46864712
height: 18px;
46874713
border-radius: 50%;
4688-
background: var(--surface-raised);
4689-
box-shadow: var(--surface-shadow);
4690-
transition: left 160ms ease;
4714+
background: var(--switch-thumb-bg);
4715+
box-shadow: var(--switch-thumb-shadow);
4716+
transition:
4717+
background-color 160ms ease,
4718+
left 160ms ease;
46914719
}
46924720

46934721
.toggle:disabled {
46944722
opacity: 0.7;
46954723
}
46964724

46974725
.toggle.enabled {
4698-
background: var(--accent);
4726+
background: var(--switch-track-active-bg);
4727+
box-shadow: inset 0 0 0 1px var(--switch-track-active-bg);
46994728
}
47004729

47014730
.toggle.enabled i {
47024731
left: 21px;
4703-
background: var(--accent-ink);
4732+
background: var(--switch-thumb-active-bg);
47044733
}
47054734

47064735
.option-row {

‎apps/desktop/src/theme-token-coverage.test.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,12 @@ const roleTokens = [
7272
"--live-control-bg",
7373
"--live-control-hover-bg",
7474
"--live-control-active-bg",
75+
"--switch-track-bg",
76+
"--switch-track-border",
77+
"--switch-track-active-bg",
78+
"--switch-thumb-bg",
79+
"--switch-thumb-active-bg",
80+
"--switch-thumb-shadow",
7581
"--tooltip-bg",
7682
"--tooltip-text",
7783
"--modal-backdrop",

0 commit comments

Comments
 (0)