Skip to content

Commit e17f3a9

Browse files
pallyoungpallyoung
committed
feat: theme feature icon styles
1 parent 707b144 commit e17f3a9

2 files changed

Lines changed: 71 additions & 24 deletions

File tree

‎packages/web/src/styles/components.css‎

Lines changed: 30 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -732,6 +732,7 @@
732732

733733
.settings-nav-icon {
734734
flex-shrink: 0;
735+
color: var(--icon-secondary);
735736
}
736737

737738
.settings-nav-label {
@@ -1588,6 +1589,7 @@
15881589
}
15891590

15901591
.terminal-panel-empty-icon {
1592+
color: var(--icon-muted);
15911593
opacity: 0.5;
15921594
}
15931595

@@ -2230,8 +2232,8 @@ body.is-resizing-panels * {
22302232
width: 32px;
22312233
height: 32px;
22322234
border-radius: var(--radius-md);
2233-
background: var(--bg-hover);
2234-
color: var(--accent-green);
2235+
background: var(--icon-surface-accent);
2236+
color: var(--icon-accent);
22352237
}
22362238

22372239
.welcome-feature-text {
@@ -3380,18 +3382,18 @@ body.is-resizing-panels * {
33803382
width: 28px;
33813383
height: 28px;
33823384
border-radius: var(--radius-md);
3383-
background: rgba(120, 215, 178, 0.12);
3384-
color: var(--accent-green);
3385+
background: var(--icon-surface-success);
3386+
color: var(--icon-success);
33853387
}
33863388

33873389
.supervisor-dialog[data-mode="edit"] .supervisor-dialog-header-icon {
3388-
background: rgba(108, 182, 255, 0.12);
3389-
color: var(--accent-blue);
3390+
background: var(--icon-surface-info);
3391+
color: var(--icon-info);
33903392
}
33913393

33923394
.supervisor-dialog[data-mode="disable"] .supervisor-dialog-header-icon {
3393-
background: rgba(255, 158, 176, 0.12);
3394-
color: var(--accent-pink);
3395+
background: var(--icon-surface-error);
3396+
color: var(--icon-error);
33953397
}
33963398

33973399
.supervisor-dialog-subtitle {
@@ -3419,15 +3421,15 @@ body.is-resizing-panels * {
34193421
display: flex;
34203422
gap: var(--sp-3);
34213423
padding: var(--sp-3);
3422-
background: rgba(255, 158, 176, 0.08);
3423-
border: 1px solid rgba(255, 158, 176, 0.35);
3424+
background: var(--icon-surface-error);
3425+
border: 1px solid color-mix(in srgb, var(--icon-error) 36%, var(--border));
34243426
border-left-width: 2px;
34253427
border-radius: var(--radius-md);
34263428
}
34273429

34283430
.supervisor-danger-callout-icon {
34293431
flex-shrink: 0;
3430-
color: var(--accent-pink);
3432+
color: var(--icon-error);
34313433
margin-top: 1px;
34323434
}
34333435

@@ -4904,27 +4906,27 @@ textarea.input {
49044906
}
49054907

49064908
.tree-icon.folder {
4907-
color: var(--accent-amber);
4909+
color: var(--icon-file-folder);
49084910
}
49094911

49104912
.tree-icon.code {
4911-
color: var(--accent-blue);
4913+
color: var(--icon-file-code);
49124914
}
49134915

49144916
.tree-icon.data {
4915-
color: var(--accent-purple);
4917+
color: var(--icon-file-data);
49164918
}
49174919

49184920
.tree-icon.doc {
4919-
color: var(--text-secondary);
4921+
color: var(--icon-file-doc);
49204922
}
49214923

49224924
.tree-icon.media {
4923-
color: var(--accent-green);
4925+
color: var(--icon-file-media);
49244926
}
49254927

49264928
.tree-icon.file {
4927-
color: var(--text-tertiary);
4929+
color: var(--icon-file-default);
49284930
}
49294931

49304932
.tree-label {
@@ -5350,6 +5352,7 @@ textarea.input {
53505352
}
53515353

53525354
.bottom-terminal-empty-icon {
5355+
color: var(--icon-muted);
53535356
opacity: 0.45;
53545357
}
53555358

@@ -5501,19 +5504,19 @@ textarea.input {
55015504
}
55025505

55035506
.git-row-icon-staged {
5504-
color: var(--accent-blue);
5507+
color: var(--icon-git-staged);
55055508
}
55065509

55075510
.git-row-icon-modified {
5508-
color: var(--accent-amber);
5511+
color: var(--icon-git-modified);
55095512
}
55105513

55115514
.git-row-icon-deleted {
5512-
color: var(--accent-pink);
5515+
color: var(--icon-git-deleted);
55135516
}
55145517

55155518
.git-row-icon-untracked {
5516-
color: var(--text-tertiary);
5519+
color: var(--icon-git-untracked);
55175520
}
55185521

55195522
.git-row-name {
@@ -7608,7 +7611,9 @@ textarea.input {
76087611
margin-bottom: var(--sp-2);
76097612
font-size: var(--text-sm);
76107613
opacity: 0.8;
7611-
color: var(--text-tertiary);
7614+
background: var(--icon-surface-subtle);
7615+
border-radius: var(--radius-md);
7616+
color: var(--icon-muted);
76127617
}
76137618

76147619
.config-empty-title {
@@ -8393,6 +8398,7 @@ textarea.input {
83938398
justify-content: center;
83948399
flex-shrink: 0;
83958400
line-height: 1;
8401+
color: var(--icon-accent);
83968402
}
83978403

83988404
.mobile-supervisor-badge__icon svg {
@@ -8523,6 +8529,7 @@ textarea.input {
85238529
display: inline-flex;
85248530
align-items: center;
85258531
justify-content: center;
8532+
color: currentColor;
85268533
}
85278534

85288535
.mobile-dock__icon svg {
@@ -9884,7 +9891,7 @@ textarea.input {
98849891

98859892
.settings-mobile-item__icon {
98869893
display: inline-flex;
9887-
color: var(--text-tertiary);
9894+
color: var(--icon-secondary);
98889895
}
98899896

98909897
.settings-mobile-item__label {

‎packages/web/src/styles/components.theme.test.ts‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,46 @@ function getLastRuleBlock(selector: string) {
6363
}
6464

6565
describe("components.css theme-sensitive surfaces", () => {
66+
it("routes file tree and git status icons through icon theme tokens", () => {
67+
expect(getLastRuleBlock(".tree-icon.folder")).toContain("var(--icon-file-folder)");
68+
expect(getLastRuleBlock(".tree-icon.code")).toContain("var(--icon-file-code)");
69+
expect(getLastRuleBlock(".tree-icon.data")).toContain("var(--icon-file-data)");
70+
expect(getLastRuleBlock(".tree-icon.doc")).toContain("var(--icon-file-doc)");
71+
expect(getLastRuleBlock(".tree-icon.media")).toContain("var(--icon-file-media)");
72+
expect(getLastRuleBlock(".tree-icon.file")).toContain("var(--icon-file-default)");
73+
expect(getLastRuleBlock(".git-row-icon-staged")).toContain("var(--icon-git-staged)");
74+
expect(getLastRuleBlock(".git-row-icon-modified")).toContain("var(--icon-git-modified)");
75+
expect(getLastRuleBlock(".git-row-icon-deleted")).toContain("var(--icon-git-deleted)");
76+
expect(getLastRuleBlock(".git-row-icon-untracked")).toContain("var(--icon-git-untracked)");
77+
});
78+
79+
it("routes semantic icon classes through icon tokens", () => {
80+
expect(getLastRuleBlock(".settings-mobile-item__icon")).toContain("var(--icon-secondary)");
81+
expect(getLastRuleBlock(".settings-nav-icon")).toContain("var(--icon-secondary)");
82+
expect(getLastRuleBlock(".terminal-panel-empty-icon")).toContain("var(--icon-muted)");
83+
expect(getLastRuleBlock(".bottom-terminal-empty-icon")).toContain("var(--icon-muted)");
84+
expect(getLastRuleBlock(".config-empty-icon")).toContain("var(--icon-muted)");
85+
});
86+
87+
it("keeps icon surfaces on dedicated icon surface tokens", () => {
88+
expect(getLastRuleBlock(".welcome-feature-icon")).toContain(
89+
"background: var(--icon-surface-accent)"
90+
);
91+
expect(getLastRuleBlock(".welcome-feature-icon")).toContain("color: var(--icon-accent)");
92+
expect(getLastRuleBlock(".config-empty-icon")).toContain(
93+
"background: var(--icon-surface-subtle)"
94+
);
95+
expect(getLastRuleBlock(".supervisor-danger-callout")).toContain("var(--icon-surface-error)");
96+
expect(getLastRuleBlock(".supervisor-danger-callout-icon")).toContain("var(--icon-error)");
97+
});
98+
99+
it("keeps mobile icon intent scoped correctly", () => {
100+
expect(getLastRuleBlock(".mobile-supervisor-badge__icon")).toContain(
101+
"color: var(--icon-accent)"
102+
);
103+
expect(getLastRuleBlock(".mobile-dock__icon")).toContain("color: currentColor");
104+
});
105+
66106
it("exposes global mobile safe-area tokens so standalone mobile views keep their padding", () => {
67107
expect(tokensStylesheet).toContain("--mobile-safe-top: env(safe-area-inset-top, 0px);");
68108
expect(tokensStylesheet).toContain("--mobile-safe-right: env(safe-area-inset-right, 0px);");
@@ -411,7 +451,7 @@ describe("components.css theme-sensitive surfaces", () => {
411451
expect(mobileItem).toContain("border-bottom: 1px solid var(--border)");
412452
expect(mobileItem).toContain("border-radius: 0");
413453
expect(mobileItem).toContain("background: transparent");
414-
expect(mobileItemIcon).toContain("color: var(--text-tertiary)");
454+
expect(mobileItemIcon).toContain("color: var(--icon-secondary)");
415455
expect(mobileItemArrow).toContain("color: var(--text-tertiary)");
416456
});
417457

0 commit comments

Comments
 (0)