Skip to content

Commit e316f4e

Browse files
aseembits93aseembits93
committed
Merge origin/main into initial-mount-file-progress
2 parents c907892 + 0bede7e commit e316f4e

2 files changed

Lines changed: 123 additions & 50 deletions

File tree

‎apps/desktop/src/dark-theme-ui.test.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,14 @@ const appSource = readFileSync(new URL("./App.tsx", import.meta.url), "utf8");
66
const styles = readFileSync(new URL("./styles.css", import.meta.url), "utf8");
77

88
describe("dark theme UI contrast", () => {
9+
it("keeps light and dark control tokens in the designer-facing theme block", () => {
10+
expect(styles).toMatch(/Designer-facing theme tokens live here/);
11+
expect(styles).toMatch(/:root\s*\{[\s\S]*?--control-bg:[\s\S]*?--control-disabled-text:[\s\S]*?--chip-bg:/s);
12+
expect(styles).toMatch(
13+
/:root\[data-theme="dark"\]\s*\{[\s\S]*?--control-bg:[\s\S]*?--control-disabled-text:[\s\S]*?--chip-bg:/s,
14+
);
15+
});
16+
917
it("uses a stable title hook for the desktop chrome", () => {
1018
expect(appSource).toMatch(/className="window-title"/);
1119
expect(styles).toMatch(/:root\[data-theme="dark"\] \.window-chrome\s*\{/);
@@ -34,4 +42,13 @@ describe("dark theme UI contrast", () => {
3442
/:root\[data-theme="dark"\] \.mount-details-button:hover:not\(:disabled\),/,
3543
);
3644
});
45+
46+
it("uses readable control tokens for Sources page actions", () => {
47+
expect(styles).toMatch(/\.secondary-button\s*\{[\s\S]*?background:\s*var\(--control-bg\);[\s\S]*?color:\s*var\(--control-text\);/s);
48+
expect(styles).toMatch(/\.mount-details-button\s*\{[\s\S]*?background:\s*var\(--control-bg\);[\s\S]*?color:\s*var\(--control-text\);/s);
49+
expect(styles).toMatch(/\.source-view-toggle button\.active\s*\{[\s\S]*?background:\s*var\(--control-selected-bg\);/s);
50+
expect(styles).toMatch(
51+
/:root\[data-theme="dark"\] \.secondary-button:disabled,[\s\S]*?background:\s*var\(--control-disabled-bg\);[\s\S]*?color:\s*var\(--control-disabled-text\);/s,
52+
);
53+
});
3754
});

‎apps/desktop/src/styles.css‎

Lines changed: 106 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* Designer-facing theme tokens live here. Component rules should prefer these
2+
semantic tokens over one-off hex or rgba colors. */
13
:root {
24
--canvas: #f2f4f5;
35
--paper: #ffffff;
@@ -28,6 +30,20 @@
2830
--surface-strong: var(--paper);
2931
--accent: var(--teal);
3032
--accent-soft: var(--teal-wash);
33+
--control-bg: rgba(255, 255, 255, 0.9);
34+
--control-bg-hover: rgba(248, 252, 251, 0.98);
35+
--control-text: #334756;
36+
--control-muted: #526575;
37+
--control-border: rgba(86, 107, 125, 0.24);
38+
--control-border-hover: rgba(8, 123, 114, 0.3);
39+
--control-disabled-bg: #edf3f2;
40+
--control-disabled-text: #72817e;
41+
--control-selected-bg: rgba(15, 118, 110, 0.1);
42+
--control-selected-text: var(--accent);
43+
--chip-bg: rgba(247, 249, 251, 0.9);
44+
--chip-text: #536273;
45+
--chip-border: rgba(148, 163, 184, 0.28);
46+
--field-bg: #ffffff;
3147
--green: #23845f;
3248
--green-soft: #e8f4ee;
3349
--shadow: 0 24px 70px rgba(20, 30, 43, 0.14);
@@ -71,6 +87,20 @@
7187
--bg: var(--canvas);
7288
--surface: rgba(32, 43, 47, 0.94);
7389
--surface-strong: #263338;
90+
--control-bg: rgba(31, 42, 46, 0.98);
91+
--control-bg-hover: rgba(35, 50, 54, 0.98);
92+
--control-text: #eef7f4;
93+
--control-muted: #c8d6d2;
94+
--control-border: rgba(163, 183, 190, 0.28);
95+
--control-border-hover: rgba(42, 161, 152, 0.44);
96+
--control-disabled-bg: rgba(42, 54, 58, 0.82);
97+
--control-disabled-text: #aebfbb;
98+
--control-selected-bg: rgba(42, 161, 152, 0.18);
99+
--control-selected-text: #e8fbf7;
100+
--chip-bg: rgba(39, 52, 57, 0.92);
101+
--chip-text: #c8d6d2;
102+
--chip-border: rgba(163, 183, 190, 0.22);
103+
--field-bg: rgba(22, 31, 34, 0.92);
74104
--shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
75105
--tight-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
76106
}
@@ -677,8 +707,8 @@ p {
677707
}
678708

679709
.primary-button:disabled {
680-
background: #dbe7e5;
681-
color: #6c7d7a;
710+
background: var(--control-disabled-bg);
711+
color: var(--control-disabled-text);
682712
box-shadow: none;
683713
}
684714

@@ -711,14 +741,14 @@ p {
711741

712742
.secondary-button {
713743
padding: 0 18px;
714-
border: 1px solid rgba(86, 107, 125, 0.22);
715-
background: rgba(255, 255, 255, 0.86);
716-
color: #405563;
744+
border: 1px solid var(--control-border);
745+
background: var(--control-bg);
746+
color: var(--control-text);
717747
}
718748

719749
.secondary-button:hover:not(:disabled) {
720-
border-color: rgba(8, 123, 114, 0.24);
721-
background: rgba(248, 252, 251, 0.98);
750+
border-color: var(--control-border-hover);
751+
background: var(--control-bg-hover);
722752
color: var(--accent);
723753
box-shadow: 0 8px 20px rgba(8, 123, 114, 0.1);
724754
}
@@ -818,8 +848,18 @@ p {
818848
}
819849

820850
.secondary-button:disabled,
851+
.mount-details-button:disabled,
852+
.icon-button:disabled {
853+
border-color: var(--control-border);
854+
background: var(--control-disabled-bg);
855+
color: var(--control-disabled-text);
856+
opacity: 1;
857+
box-shadow: none;
858+
}
859+
821860
.text-button:disabled {
822-
opacity: 0.58;
861+
color: var(--control-disabled-text);
862+
opacity: 1;
823863
}
824864

825865
.text-button {
@@ -2326,9 +2366,9 @@ button.home-stat:hover {
23262366
gap: 10px;
23272367
min-width: 0;
23282368
padding: 10px;
2329-
border: 1px solid rgba(8, 123, 114, 0.18);
2369+
border: 1px solid var(--control-border-hover);
23302370
border-radius: 8px;
2331-
background: rgba(248, 252, 251, 0.94);
2371+
background: var(--surface);
23322372
}
23332373

23342374
.source-ready-card strong,
@@ -2364,8 +2404,8 @@ button.home-stat:hover {
23642404
}
23652405

23662406
.mount-card.active {
2367-
border-color: rgba(8, 123, 114, 0.28);
2368-
background: rgba(248, 252, 251, 0.96);
2407+
border-color: var(--control-border-hover);
2408+
background: var(--surface-strong);
23692409
}
23702410

23712411
.mount-card-top {
@@ -2444,7 +2484,7 @@ button.home-stat:hover {
24442484
padding: 5px 6px 5px 9px;
24452485
border: 1px solid var(--line);
24462486
border-radius: 8px;
2447-
background: #ffffff;
2487+
background: var(--field-bg);
24482488
}
24492489

24502490
.mount-card-path code {
@@ -2467,17 +2507,18 @@ button.home-stat:hover {
24672507
.mount-card-meta span {
24682508
min-height: 23px;
24692509
padding: 4px 7px;
2470-
border: 1px solid var(--line);
2510+
border: 1px solid var(--chip-border);
24712511
border-radius: 999px;
2472-
background: rgba(247, 249, 251, 0.86);
2473-
color: var(--muted);
2512+
background: var(--chip-bg);
2513+
color: var(--chip-text);
24742514
font-size: 10px;
24752515
font-weight: 850;
24762516
}
24772517

24782518
.mount-card-meta span.primary {
2479-
background: var(--accent-soft);
2480-
color: var(--accent);
2519+
border-color: var(--control-border-hover);
2520+
background: var(--control-selected-bg);
2521+
color: var(--control-selected-text);
24812522
}
24822523

24832524
.mount-card-footer {
@@ -2504,17 +2545,17 @@ button.home-stat:hover {
25042545
gap: 4px;
25052546
min-height: 28px;
25062547
padding: 0 8px;
2507-
border: 1px solid rgba(86, 107, 125, 0.2);
2548+
border: 1px solid var(--control-border);
25082549
border-radius: 8px;
2509-
background: #fff;
2510-
color: #4f6170;
2550+
background: var(--control-bg);
2551+
color: var(--control-text);
25112552
font-size: 11px;
25122553
font-weight: 850;
25132554
}
25142555

25152556
.mount-details-button:hover:not(:disabled) {
2516-
border-color: rgba(8, 123, 114, 0.26);
2517-
background: rgba(248, 252, 251, 0.98);
2557+
border-color: var(--control-border-hover);
2558+
background: var(--control-bg-hover);
25182559
color: var(--accent);
25192560
}
25202561

@@ -2830,7 +2871,7 @@ button.home-stat:hover {
28302871
padding: 0 11px;
28312872
border: 1px solid var(--line);
28322873
border-radius: 10px;
2833-
background: #ffffff;
2874+
background: var(--field-bg);
28342875
}
28352876

28362877
.source-search-row svg {
@@ -2854,7 +2895,7 @@ button.home-stat:hover {
28542895
padding: 3px;
28552896
border: 1px solid var(--line);
28562897
border-radius: 10px;
2857-
background: #ffffff;
2898+
background: var(--field-bg);
28582899
}
28592900

28602901
.source-view-toggle button {
@@ -2867,17 +2908,17 @@ button.home-stat:hover {
28672908
border: 0;
28682909
border-radius: 8px;
28692910
background: transparent;
2870-
color: var(--muted);
2911+
color: var(--control-muted);
28712912
font: inherit;
28722913
font-size: 12px;
28732914
font-weight: 850;
28742915
cursor: pointer;
28752916
}
28762917

28772918
.source-view-toggle button.active {
2878-
background: rgba(8, 123, 114, 0.1);
2879-
color: var(--teal);
2880-
box-shadow: inset 0 0 0 1px rgba(8, 123, 114, 0.14);
2919+
background: var(--control-selected-bg);
2920+
color: var(--control-selected-text);
2921+
box-shadow: inset 0 0 0 1px var(--control-border-hover);
28812922
}
28822923

28832924
.source-view-toggle button:focus-visible {
@@ -2913,7 +2954,7 @@ button.home-stat:hover {
29132954
padding: 12px;
29142955
border: 1px solid var(--line);
29152956
border-radius: 10px;
2916-
background: rgba(255, 255, 255, 0.84);
2957+
background: var(--surface);
29172958
}
29182959

29192960
.connector-choice-grid.tiles .connector-choice-card {
@@ -2924,13 +2965,13 @@ button.home-stat:hover {
29242965
}
29252966

29262967
.connector-choice-card.active {
2927-
border-color: rgba(8, 123, 114, 0.24);
2928-
background: rgba(248, 252, 251, 0.98);
2968+
border-color: var(--control-border-hover);
2969+
background: var(--surface-strong);
29292970
}
29302971

29312972
.connector-choice-card.mounted {
2932-
border-color: rgba(37, 124, 93, 0.18);
2933-
background: rgba(247, 249, 251, 0.86);
2973+
border-color: var(--chip-border);
2974+
background: var(--chip-bg);
29342975
}
29352976

29362977
.connector-choice-card.disabled {
@@ -3386,10 +3427,10 @@ button.home-stat:hover {
33863427
flex: 0 0 32px;
33873428
width: 32px;
33883429
height: 32px;
3389-
border: 1px solid rgba(86, 107, 125, 0.2);
3430+
border: 1px solid var(--control-border);
33903431
border-radius: 8px;
3391-
background: rgba(255, 255, 255, 0.82);
3392-
color: #526575;
3432+
background: var(--control-bg);
3433+
color: var(--control-text);
33933434
transition:
33943435
background-color 170ms ease,
33953436
border-color 170ms ease,
@@ -3400,8 +3441,8 @@ button.home-stat:hover {
34003441
}
34013442

34023443
.icon-button:hover:not(:disabled) {
3403-
border-color: rgba(8, 123, 114, 0.26);
3404-
background: rgba(248, 252, 251, 0.98);
3444+
border-color: var(--control-border-hover);
3445+
background: var(--control-bg-hover);
34053446
color: var(--accent);
34063447
box-shadow: 0 8px 18px rgba(8, 123, 114, 0.09);
34073448
}
@@ -3411,8 +3452,8 @@ button.home-stat:hover {
34113452
}
34123453

34133454
.icon-button:disabled {
3414-
color: var(--subtle);
3415-
opacity: 0.7;
3455+
color: var(--control-disabled-text);
3456+
opacity: 1;
34163457
}
34173458

34183459
.icon-button svg {
@@ -4181,20 +4222,35 @@ button.home-stat:hover {
41814222
:root[data-theme="dark"] .settings-empty-state,
41824223
:root[data-theme="dark"] input,
41834224
:root[data-theme="dark"] textarea {
4184-
border-color: var(--line);
4185-
background: rgba(22, 31, 34, 0.92);
4225+
border-color: var(--control-border);
4226+
background: var(--control-bg);
41864227
color: var(--ink);
41874228
}
41884229

4230+
:root[data-theme="dark"] input,
4231+
:root[data-theme="dark"] textarea {
4232+
background: var(--field-bg);
4233+
}
4234+
41894235
:root[data-theme="dark"] .secondary-button:hover:not(:disabled),
41904236
:root[data-theme="dark"] .icon-button:hover:not(:disabled),
41914237
:root[data-theme="dark"] .mount-details-button:hover:not(:disabled),
41924238
:root[data-theme="dark"] .settings-activity-row:hover {
4193-
border-color: rgba(15, 118, 110, 0.38);
4194-
background: rgba(18, 39, 39, 0.94);
4239+
border-color: var(--control-border-hover);
4240+
background: var(--control-bg-hover);
41954241
color: var(--accent);
41964242
}
41974243

4244+
:root[data-theme="dark"] .secondary-button:disabled,
4245+
:root[data-theme="dark"] .icon-button:disabled,
4246+
:root[data-theme="dark"] .mount-details-button:disabled {
4247+
border-color: var(--control-border);
4248+
background: var(--control-disabled-bg);
4249+
color: var(--control-disabled-text);
4250+
opacity: 1;
4251+
box-shadow: none;
4252+
}
4253+
41984254
:root[data-theme="dark"] .source-view-toggle button.active,
41994255
:root[data-theme="dark"] .file-filter-bar button.active,
42004256
:root[data-theme="dark"] .file-filter-bar button:hover,
@@ -4203,9 +4259,9 @@ button.home-stat:hover {
42034259
:root[data-theme="dark"] .settings-nav button.active,
42044260
:root[data-theme="dark"] .theme-segmented button.active,
42054261
:root[data-theme="dark"] .option-row:hover {
4206-
border-color: rgba(42, 161, 152, 0.32);
4207-
background: rgba(42, 161, 152, 0.16);
4208-
color: #dff8f4;
4262+
border-color: var(--control-border-hover);
4263+
background: var(--control-selected-bg);
4264+
color: var(--control-selected-text);
42094265
box-shadow: inset 0 0 0 1px rgba(42, 161, 152, 0.12);
42104266
}
42114267

@@ -4231,8 +4287,8 @@ button.home-stat:hover {
42314287
:root[data-theme="dark"] .connector-choice-card.mounted,
42324288
:root[data-theme="dark"] .workspace-path-row,
42334289
:root[data-theme="dark"] .workspace-facts span {
4234-
border-color: var(--line);
4235-
background: rgba(22, 31, 34, 0.9);
4290+
border-color: var(--control-border);
4291+
background: var(--control-bg);
42364292
color: var(--ink);
42374293
}
42384294

0 commit comments

Comments
 (0)