Skip to content

Commit c3f7c59

Browse files
pallyoungpallyoung
committed
feat(web): migrate primitive typography tokens
1 parent a8e3a82 commit c3f7c59

5 files changed

Lines changed: 68 additions & 12 deletions

File tree

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@
99
border: 1px solid transparent;
1010
border-radius: var(--radius-md);
1111
font-family: var(--font-sans);
12-
font-size: var(--text-base);
13-
font-weight: var(--font-medium);
14-
line-height: 1;
12+
font-size: var(--type-body-strong-size);
13+
font-weight: var(--type-body-strong-weight);
14+
line-height: var(--type-body-strong-line-height);
1515
white-space: nowrap;
1616
transition:
1717
background var(--duration-normal) var(--ease-out),
@@ -83,15 +83,16 @@
8383
height: 24px;
8484
padding: 0 var(--sp-2);
8585
border-radius: var(--radius-sm);
86-
font-size: var(--text-xs);
86+
font-size: var(--type-label-size);
87+
font-weight: var(--type-label-weight);
88+
line-height: var(--type-label-line-height);
8789
}
8890

8991
.lg,
9092
:global(.btn-lg) {
9193
height: 40px;
9294
padding: 0 var(--sp-6);
9395
border-radius: var(--radius-lg);
94-
font-size: var(--text-lg);
9596
}
9697

9798
.label {

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66
border-radius: var(--radius-md);
77
color: var(--text-primary);
88
font-family: var(--font-sans);
9-
font-size: var(--text-base);
9+
font-size: var(--type-body-strong-size);
10+
font-weight: var(--type-body-strong-weight);
11+
line-height: var(--type-body-strong-line-height);
1012
outline: none;
1113
transition:
1214
border-color var(--duration-normal) var(--ease-out),
@@ -27,13 +29,14 @@
2729
.sm {
2830
height: var(--input-height-sm);
2931
border-radius: var(--radius-sm);
30-
font-size: var(--text-sm);
32+
font-size: var(--type-label-size);
33+
font-weight: var(--type-label-weight);
34+
line-height: var(--type-label-line-height);
3135
}
3236

3337
.lg {
3438
height: var(--input-height-lg);
3539
border-radius: var(--radius-lg);
36-
font-size: var(--text-lg);
3740
}
3841

3942
.invalid,

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,9 @@
7575
}
7676

7777
:global(.panel-tab) {
78-
font-size: 12px;
78+
font-size: var(--type-label-size);
79+
font-weight: var(--type-label-weight);
80+
line-height: var(--type-label-line-height);
7981
padding: 2px 8px;
8082
border-radius: 4px;
8183
color: var(--text-ter);
@@ -93,7 +95,9 @@
9395

9496
:global(.worktree-tab) {
9597
padding: var(--sp-3) var(--sp-4);
96-
font-size: var(--text-sm);
98+
font-size: var(--type-label-size);
99+
font-weight: var(--type-label-weight);
100+
line-height: var(--type-label-line-height);
97101
color: var(--text-secondary);
98102
}
99103

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66
border-radius: var(--radius-md);
77
color: var(--text-primary);
88
font-family: var(--font-sans);
9-
font-size: var(--text-base);
9+
font-size: var(--type-body-strong-size);
10+
font-weight: var(--type-body-strong-weight);
11+
line-height: var(--type-body-strong-line-height);
1012
outline: none;
1113
transition:
1214
border-color var(--duration-normal) var(--ease-out),
@@ -34,7 +36,6 @@
3436
.lg {
3537
min-height: 120px;
3638
border-radius: var(--radius-lg);
37-
font-size: var(--text-lg);
3839
}
3940

4041
.invalid,

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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,19 @@ const confirmDialogStyles = readFileSync(
2929
`${process.cwd()}/src/components/ui/confirm-dialog/index.module.css`,
3030
"utf8"
3131
);
32+
const buttonStyles = readFileSync(
33+
`${process.cwd()}/src/components/ui/button/index.module.css`,
34+
"utf8"
35+
);
36+
const inputStyles = readFileSync(
37+
`${process.cwd()}/src/components/ui/input/index.module.css`,
38+
"utf8"
39+
);
40+
const textareaStyles = readFileSync(
41+
`${process.cwd()}/src/components/ui/textarea/index.module.css`,
42+
"utf8"
43+
);
44+
const tabsStyles = readFileSync(`${process.cwd()}/src/components/ui/tabs/index.module.css`, "utf8");
3245

3346
function getLastGroupedRuleBlockFrom(source: string, pattern: RegExp) {
3447
const matches = Array.from(source.matchAll(pattern));
@@ -205,6 +218,40 @@ describe("components.css theme-sensitive surfaces", () => {
205218
);
206219
});
207220

221+
it("maps text-entry and navigation primitives onto semantic typography tokens", () => {
222+
expect(getLastRuleBlockFrom(buttonStyles, ".btn")).toContain(
223+
"font-size: var(--type-body-strong-size)"
224+
);
225+
expect(getLastRuleBlockFrom(buttonStyles, ".btn")).toContain(
226+
"line-height: var(--type-body-strong-line-height)"
227+
);
228+
expect(getLastRuleBlockFrom(buttonStyles, ".sm")).toContain(
229+
"font-size: var(--type-label-size)"
230+
);
231+
expect(getLastRuleBlockFrom(buttonStyles, ".lg")).not.toContain("font-size:");
232+
233+
expect(getLastRuleBlockFrom(inputStyles, ".input")).toContain(
234+
"font-size: var(--type-body-strong-size)"
235+
);
236+
expect(getLastRuleBlockFrom(inputStyles, ".sm")).toContain("font-size: var(--type-label-size)");
237+
expect(getLastRuleBlockFrom(inputStyles, ".lg")).not.toContain("font-size:");
238+
239+
expect(getLastRuleBlockFrom(textareaStyles, ".input")).toContain(
240+
"font-size: var(--type-body-strong-size)"
241+
);
242+
expect(getLastRuleBlockFrom(textareaStyles, ".lg")).not.toContain("font-size:");
243+
244+
expect(getLastRuleBlockFrom(tabsStyles, ":global(.panel-tab)")).toContain(
245+
"font-size: var(--type-label-size)"
246+
);
247+
expect(getLastRuleBlockFrom(tabsStyles, ":global(.panel-tab)")).toContain(
248+
"line-height: var(--type-label-line-height)"
249+
);
250+
expect(getLastRuleBlockFrom(tabsStyles, ":global(.worktree-tab)")).toContain(
251+
"font-size: var(--type-label-size)"
252+
);
253+
});
254+
208255
it("keeps config status colors on icon tokens", () => {
209256
expect(getLastRuleBlock(".config-status--success")).toContain("var(--icon-success)");
210257
expect(getLastRuleBlock(".config-status--warning")).toContain("var(--icon-warning)");

0 commit comments

Comments
 (0)