Skip to content

Commit 49ddf2c

Browse files
pallyoungpallyoung
committed
Merge branch 'codex/semantic-color-system-big-bang' into develop
# Conflicts: # packages/web/src/styles/components.theme.test.ts
2 parents bdb1f59 + afd9533 commit 49ddf2c

36 files changed

Lines changed: 4243 additions & 2673 deletions

‎packages/cli/src/update-worker.test.ts‎

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ import { join } from "node:path";
44
import { afterEach, describe, expect, it, vi } from "vitest";
55
import { runRestartHandoff, runUpdateWorker } from "./update-worker.js";
66

7+
type UpdateWorkerDeps = NonNullable<Parameters<typeof runUpdateWorker>[1]>;
8+
type RestartHandoffDeps = NonNullable<Parameters<typeof runRestartHandoff>[1]>;
9+
type RunCommandMock = NonNullable<UpdateWorkerDeps["runCommand"]>;
10+
type SpawnDetachedProcessMock = NonNullable<UpdateWorkerDeps["spawnDetachedProcess"]>;
11+
type WaitForProcessExitMock = NonNullable<RestartHandoffDeps["waitForProcessExit"]>;
12+
713
describe("update-worker", () => {
814
const tempDirs: string[] = [];
915

@@ -31,8 +37,8 @@ describe("update-worker", () => {
3137

3238
it("writes restarting state and spawns a detached restart handoff after install success", async () => {
3339
const env = createEnv();
34-
const runCommand = vi.fn(async () => {});
35-
const spawnDetachedProcess = vi.fn(async () => {});
40+
const runCommand = vi.fn<RunCommandMock>(async () => {});
41+
const spawnDetachedProcess = vi.fn<SpawnDetachedProcessMock>(async () => {});
3642

3743
await runUpdateWorker(env, {
3844
runCommand,
@@ -61,7 +67,7 @@ describe("update-worker", () => {
6167

6268
it("falls back to manual_required on permission-related install errors", async () => {
6369
const env = createEnv();
64-
const runCommand = vi.fn(async () => {
70+
const runCommand = vi.fn<RunCommandMock>(async () => {
6571
throw new Error("npm install failed with EACCES");
6672
});
6773

@@ -82,8 +88,10 @@ describe("update-worker", () => {
8288

8389
it("marks restart failures with manual restart guidance", async () => {
8490
const env = createEnv();
85-
const runCommand = vi.fn().mockRejectedValueOnce(new Error("pm2 restart failed"));
86-
const waitForProcessExit = vi.fn(async () => {});
91+
const runCommand = vi
92+
.fn<RunCommandMock>()
93+
.mockRejectedValueOnce(new Error("pm2 restart failed"));
94+
const waitForProcessExit = vi.fn<WaitForProcessExitMock>(async () => {});
8795

8896
await runRestartHandoff(env, {
8997
runCommand,
@@ -105,8 +113,8 @@ describe("update-worker", () => {
105113

106114
it("sanitizes pm2 and runtime override env before invoking install and restart commands", async () => {
107115
const env = createEnv();
108-
const runCommand = vi.fn(async () => {});
109-
const spawnDetachedProcess = vi.fn(async () => {});
116+
const runCommand = vi.fn<RunCommandMock>(async () => {});
117+
const spawnDetachedProcess = vi.fn<SpawnDetachedProcessMock>(async () => {});
110118
const originalEnv = {
111119
PM2_HOME: process.env.PM2_HOME,
112120
PM2_PROGRAMMATIC: process.env.PM2_PROGRAMMATIC,
@@ -150,8 +158,12 @@ describe("update-worker", () => {
150158
}
151159
}
152160

153-
for (const call of runCommand.mock.calls) {
154-
const options = call[2] as { env?: NodeJS.ProcessEnv };
161+
for (const [, , options] of runCommand.mock.calls) {
162+
expect(options).toBeDefined();
163+
if (!options) {
164+
throw new Error("Expected runCommand to receive an options object");
165+
}
166+
155167
expect(options.env?.PM2_HOME).toBe("/tmp/custom-pm2-home");
156168
expect(options.env?.PM2_PROGRAMMATIC).toBeUndefined();
157169
expect(options.env?.PM2_JSON_PROCESSING).toBeUndefined();
@@ -165,7 +177,8 @@ describe("update-worker", () => {
165177
expect(options.env?.pm_id).toBeUndefined();
166178
}
167179

168-
const handoffEnv = spawnDetachedProcess.mock.calls[0]?.[2] as NodeJS.ProcessEnv | undefined;
180+
const handoffCall = spawnDetachedProcess.mock.calls[0];
181+
const handoffEnv = handoffCall?.[2];
169182
expect(handoffEnv?.PM2_HOME).toBe("/tmp/custom-pm2-home");
170183
expect(handoffEnv?.PM2_PROGRAMMATIC).toBeUndefined();
171184
expect(handoffEnv?.PM2_JSON_PROCESSING).toBeUndefined();
@@ -180,8 +193,8 @@ describe("update-worker", () => {
180193

181194
it("waits for the install worker to exit before running the restart command", async () => {
182195
const env = createEnv();
183-
const waitForProcessExit = vi.fn(async () => {});
184-
const runCommand = vi.fn(async () => {});
196+
const waitForProcessExit = vi.fn<WaitForProcessExitMock>(async () => {});
197+
const runCommand = vi.fn<RunCommandMock>(async () => {});
185198

186199
await runRestartHandoff(env, {
187200
runCommand,

‎packages/web/src/components/ui/action-menu/index.module.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
min-width: 200px;
99
max-width: min(320px, calc(100vw - (var(--sp-4) * 2)));
1010
padding: var(--sp-2);
11-
border: 1px solid var(--border);
11+
border: 1px solid var(--border-default);
1212
border-radius: var(--radius-xl);
13-
background: var(--bg-surface);
13+
background: var(--material-overlay);
1414
box-shadow: var(--shadow-lg);
1515
}
1616

@@ -42,17 +42,17 @@
4242

4343
.item:hover,
4444
.item:focus-visible {
45-
background: var(--bg-surface-hover);
45+
background: var(--surface-hover);
4646
outline: none;
4747
}
4848

4949
.itemDanger {
50-
color: var(--color-error);
50+
color: var(--status-danger-fg);
5151
}
5252

5353
.itemDanger:hover,
5454
.itemDanger:focus-visible {
55-
background: color-mix(in srgb, var(--color-error) 10%, var(--bg-surface));
55+
background: var(--menu-danger-hover-bg);
5656
}
5757

5858
.itemDisabled {

‎packages/web/src/components/ui/badge/index.module.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@
77
height: 16px;
88
padding: 0 var(--sp-1);
99
border-radius: var(--radius-chip);
10-
background: var(--accent-blue);
11-
color: var(--bg-page);
10+
background: var(--status-info-fg);
11+
color: var(--text-inverse);
1212
font-family: var(--font-sans);
1313
font-size: var(--type-body-6-size);
1414
line-height: var(--type-body-6-line-height);

‎packages/web/src/components/ui/button/index.module.css‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,8 @@
2424
.btn:focus-visible,
2525
:global(.btn):focus-visible {
2626
box-shadow:
27-
0 0 0 2px var(--bg-page),
28-
0 0 0 calc(var(--state-focus-ring-width) * 2)
29-
color-mix(in srgb, var(--state-focus-ring-color) 35%, transparent);
27+
0 0 0 2px var(--surface-page),
28+
var(--control-focus-ring);
3029
}
3130

3231
.btn:hover:not(:disabled),
@@ -36,28 +35,28 @@
3635

3736
.primary,
3837
:global(.btn-primary) {
39-
background: var(--accent-blue);
40-
color: var(--text-inverse);
38+
background: var(--control-primary-bg);
39+
color: var(--control-primary-fg);
4140
}
4241

4342
.primary:hover:not(:disabled):not([aria-disabled="true"]),
4443
:global(.btn-primary):hover:not(:disabled):not([aria-disabled="true"]) {
45-
background: color-mix(in srgb, var(--accent-blue) 84%, white 16%);
44+
background: var(--control-primary-bg-hover);
4645
}
4746

4847
.secondary,
4948
:global(.btn-default),
5049
:global(.btn-secondary) {
51-
background: color-mix(in srgb, var(--bg-surface) 84%, var(--accent-blue) 16%);
52-
border-color: color-mix(in srgb, var(--border) 70%, var(--accent-blue) 30%);
50+
background: var(--control-secondary-bg);
51+
border-color: var(--control-secondary-border);
5352
color: var(--text-primary);
5453
}
5554

5655
.secondary:hover:not(:disabled):not([aria-disabled="true"]),
5756
:global(.btn-default):hover:not(:disabled):not([aria-disabled="true"]),
5857
:global(.btn-secondary):hover:not(:disabled):not([aria-disabled="true"]) {
59-
background: color-mix(in srgb, var(--bg-hover) 72%, var(--accent-blue) 28%);
60-
border-color: color-mix(in srgb, var(--border-light) 70%, var(--accent-blue) 30%);
58+
background: var(--control-secondary-bg-hover);
59+
border-color: var(--control-secondary-border-hover);
6160
}
6261

6362
.ghost,
@@ -69,14 +68,14 @@
6968

7069
.ghost:hover:not(:disabled):not([aria-disabled="true"]),
7170
:global(.btn-ghost):hover:not(:disabled):not([aria-disabled="true"]) {
72-
background: var(--bg-hover);
71+
background: var(--control-ghost-bg-hover);
7372
color: var(--text-primary);
7473
}
7574

7675
.danger,
7776
:global(.btn-danger) {
78-
background: var(--accent-pink);
79-
color: var(--text-inverse);
77+
background: var(--control-danger-bg);
78+
color: var(--control-danger-fg);
8079
}
8180

8281
.sm,
@@ -113,7 +112,7 @@
113112
.spinner {
114113
width: var(--sp-3);
115114
height: var(--sp-3);
116-
border: calc(var(--sp-1) / 2) solid color-mix(in srgb, currentColor 30%, var(--bg-page) 70%);
115+
border: calc(var(--sp-1) / 2) solid var(--control-spinner-track);
117116
border-top-color: currentColor;
118117
border-radius: var(--radius-full);
119118
}

‎packages/web/src/components/ui/datetime-picker/index.module.css‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
flex-direction: column;
5353
gap: var(--sp-2);
5454
padding: var(--sp-2);
55-
border: 1px dashed var(--border);
55+
border: 1px dashed var(--border-default);
5656
border-radius: var(--radius-md);
5757
color: var(--text-tertiary);
5858
font-size: var(--type-body-6-size);
@@ -64,7 +64,7 @@
6464
display: flex;
6565
gap: var(--sp-2);
6666
padding: var(--sp-2);
67-
border: 1px dashed var(--border);
67+
border: 1px dashed var(--border-default);
6868
border-radius: var(--radius-md);
6969
color: var(--text-tertiary);
7070
font-size: var(--type-body-6-size);
@@ -85,9 +85,9 @@
8585
gap: var(--sp-2);
8686
min-height: 44px;
8787
padding: 0 var(--sp-3);
88-
border: 1px solid var(--border);
88+
border: 1px solid var(--control-secondary-border);
8989
border-radius: var(--radius-md);
90-
background: var(--bg-surface);
90+
background: var(--control-secondary-bg);
9191
color: var(--text-primary);
9292
font-size: var(--type-body-3-size);
9393
line-height: var(--type-body-3-line-height);
@@ -100,8 +100,8 @@
100100
}
101101

102102
.action:hover {
103-
background: var(--bg-hover);
104-
border-color: var(--border-light);
103+
background: var(--control-secondary-bg-hover);
104+
border-color: var(--control-secondary-border-hover);
105105
}
106106

107107
.action:disabled {
@@ -147,9 +147,9 @@
147147
justify-content: center;
148148
width: 28px;
149149
height: 28px;
150-
border: 1px solid var(--border);
150+
border: 1px solid var(--control-secondary-border);
151151
border-radius: var(--radius-sm);
152-
background: var(--bg-surface);
152+
background: var(--control-secondary-bg);
153153
color: var(--text-secondary);
154154
cursor: pointer;
155155
transition:
@@ -158,7 +158,7 @@
158158
}
159159

160160
.calendarNav:hover {
161-
background: var(--bg-hover);
161+
background: var(--control-secondary-bg-hover);
162162
color: var(--text-primary);
163163
}
164164

@@ -167,7 +167,7 @@
167167
grid-template-columns: repeat(7, 1fr);
168168
gap: var(--sp-1);
169169
padding: var(--sp-2) 0;
170-
border-bottom: 1px solid var(--border);
170+
border-bottom: 1px solid var(--border-default);
171171
}
172172

173173
.calendarWeekday {
@@ -203,21 +203,21 @@
203203
}
204204

205205
.calendarDay:hover:not(:disabled) {
206-
background: var(--bg-hover);
206+
background: var(--surface-hover);
207207
}
208208

209209
.calendarDayToday {
210-
color: var(--accent-blue);
210+
color: var(--status-info-fg);
211211
font-weight: var(--font-semibold);
212212
}
213213

214214
.calendarDaySelected {
215-
background: var(--accent-blue);
216-
color: var(--text-inverse);
215+
background: var(--control-primary-bg);
216+
color: var(--control-primary-fg);
217217
}
218218

219219
.calendarDaySelected:hover {
220-
background: color-mix(in srgb, var(--accent-blue) 85%, white 15%);
220+
background: var(--control-primary-bg-hover);
221221
}
222222

223223
.calendarDayDisabled {
@@ -264,7 +264,7 @@
264264
flex-direction: column;
265265
gap: var(--sp-2);
266266
padding-top: var(--sp-3);
267-
border-top: 1px solid var(--border);
267+
border-top: 1px solid var(--border-default);
268268
}
269269

270270
/* Additional i18n keys needed */

‎packages/web/src/components/ui/drawer/index.module.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
overflow: hidden;
2121
border: 1px solid var(--surface-overlay-border);
2222
border-radius: var(--radius-overlay);
23-
background: var(--surface-overlay-bg);
23+
background: var(--material-overlay);
2424
box-shadow: var(--surface-overlay-shadow);
2525
outline: none;
2626
}
@@ -32,7 +32,7 @@
3232
justify-content: space-between;
3333
gap: var(--sp-3);
3434
padding: var(--sp-4) var(--sp-5);
35-
border-bottom: 1px solid var(--border);
35+
border-bottom: 1px solid var(--border-default);
3636
}
3737

3838
.headerActions,
@@ -71,7 +71,7 @@
7171
justify-content: flex-end;
7272
gap: var(--sp-3);
7373
padding: var(--sp-4) var(--sp-5);
74-
border-top: 1px solid var(--border);
74+
border-top: 1px solid var(--border-default);
7575
}
7676

7777
@media (max-width: 640px) {

‎packages/web/src/components/ui/icon-button/index.module.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,19 +33,19 @@
3333
}
3434

3535
.ghost:hover:not(:disabled):not([aria-disabled="true"]) {
36-
background: var(--bg-hover);
36+
background: var(--control-ghost-bg-hover);
3737
color: var(--text-primary);
3838
}
3939

4040
.filled {
41-
background: color-mix(in srgb, var(--bg-surface) 84%, var(--accent-blue) 16%);
42-
border-color: color-mix(in srgb, var(--border) 70%, var(--accent-blue) 30%);
41+
background: var(--control-secondary-bg);
42+
border-color: var(--control-secondary-border);
4343
color: var(--text-primary);
4444
}
4545

4646
.filled:hover:not(:disabled):not([aria-disabled="true"]) {
47-
background: color-mix(in srgb, var(--bg-hover) 72%, var(--accent-blue) 28%);
48-
border-color: color-mix(in srgb, var(--border-light) 70%, var(--accent-blue) 30%);
47+
background: var(--control-secondary-bg-hover);
48+
border-color: var(--control-secondary-border-hover);
4949
}
5050

5151
.sm {

0 commit comments

Comments
 (0)