feat(web): finalize semantic typography token migration

pallyoung · pallyoung · commit b5925c9fbdbe · 2026-05-18T00:00:49.000+08:00
diff --git a/packages/web/src/components/ui/badge/index.module.css b/packages/web/src/components/ui/badge/index.module.css
@@ -10,7 +10,7 @@
   background: var(--accent-blue);
   color: var(--bg-page);
   font-family: var(--font-sans);
-  font-size: 10px;
-  font-weight: var(--font-semibold);
-  line-height: 1;
+  font-size: var(--type-kicker-size);
+  line-height: var(--type-kicker-line-height);
+  font-weight: var(--type-kicker-weight);
 }
diff --git a/packages/web/src/components/ui/empty-state/index.module.css b/packages/web/src/components/ui/empty-state/index.module.css
@@ -19,15 +19,18 @@
 
 .title {
   color: var(--text-primary);
-  font-size: var(--text-base);
-  font-weight: var(--font-medium);
+  font-size: var(--type-app-title-size);
+  line-height: var(--type-app-title-line-height);
+  font-weight: var(--type-app-title-weight);
 }
 
 .description {
   width: min(100%, 30rem);
   max-width: 30rem;
   color: var(--text-secondary);
-  line-height: 1.6;
+  font-size: var(--type-body-size);
+  line-height: var(--type-body-line-height);
+  font-weight: var(--type-body-weight);
 }
 
 .action {
diff --git a/packages/web/src/components/ui/kbd/index.module.css b/packages/web/src/components/ui/kbd/index.module.css
@@ -9,8 +9,10 @@
   border-radius: var(--radius-sm);
   background: color-mix(in srgb, var(--bg-input) 82%, var(--bg-surface) 18%);
   color: var(--text-primary);
-  font-family: var(--font-mono);
-  font-size: var(--text-sm);
+  font-family: var(--type-code-inline-family);
+  font-size: var(--type-code-inline-size);
+  line-height: var(--type-code-inline-line-height);
+  font-weight: var(--type-code-inline-weight);
   text-align: center;
 }
 
@@ -30,7 +32,6 @@
 .sm {
   min-width: 64px;
   padding: var(--sp-1) var(--sp-2);
-  font-size: var(--text-xs);
 }
 
 .interactive {
diff --git a/packages/web/src/components/ui/modal/index.module.css b/packages/web/src/components/ui/modal/index.module.css
@@ -59,8 +59,9 @@
   align-items: center;
   gap: var(--sp-2);
   margin: 0;
-  font-size: var(--text-lg);
-  font-weight: var(--font-semibold);
+  font-size: var(--type-section-title-size);
+  line-height: var(--type-section-title-line-height);
+  font-weight: var(--type-section-title-weight);
   color: var(--text-primary);
 }
 
diff --git a/packages/web/src/components/ui/notice/index.module.css b/packages/web/src/components/ui/notice/index.module.css
@@ -39,16 +39,18 @@
 }
 
 .title {
-  font-size: var(--text-xs);
-  font-weight: var(--font-semibold);
-  letter-spacing: 0.06em;
+  font-size: var(--type-kicker-size);
+  line-height: var(--type-kicker-line-height);
+  font-weight: var(--type-kicker-weight);
+  letter-spacing: var(--type-kicker-letter-spacing);
   text-transform: uppercase;
   color: var(--text-primary);
 }
 
 .message {
-  font-size: var(--text-sm);
-  line-height: 1.45;
+  font-size: var(--type-meta-size);
+  line-height: var(--type-meta-line-height);
+  font-weight: var(--type-meta-weight);
   color: var(--text-secondary);
   word-break: break-word;
 }
diff --git a/packages/web/src/components/ui/pill/index.module.css b/packages/web/src/components/ui/pill/index.module.css
@@ -11,8 +11,9 @@
   background: transparent;
   color: var(--text-secondary);
   font-family: var(--font-sans);
-  font-size: var(--text-sm);
-  line-height: 1.4;
+  font-size: var(--type-label-size);
+  line-height: var(--type-label-line-height);
+  font-weight: var(--type-label-weight);
   transition:
     background var(--duration-fast) var(--ease-out),
     border-color var(--duration-fast) var(--ease-out),
diff --git a/packages/web/src/components/ui/segmented-control/index.module.css b/packages/web/src/components/ui/segmented-control/index.module.css
@@ -23,9 +23,9 @@
   border-radius: var(--radius-md);
   border: 1px solid transparent;
   color: var(--text-secondary);
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  line-height: 1.2;
+  font-size: var(--type-label-size);
+  line-height: var(--type-label-line-height);
+  font-weight: var(--type-label-weight);
 }
 
 .segmentedControlOption[data-size="sm"],
diff --git a/packages/web/src/components/ui/tabs/index.module.css b/packages/web/src/components/ui/tabs/index.module.css
@@ -90,7 +90,7 @@
 :global(.panel-tab.active) {
   background: var(--blue);
   color: var(--bg);
-  font-weight: 500;
+  font-weight: var(--type-label-weight);
 }
 
 :global(.worktree-tab) {
diff --git a/packages/web/src/components/ui/tag/index.module.css b/packages/web/src/components/ui/tag/index.module.css
@@ -7,15 +7,15 @@
   padding: 0 var(--sp-2);
   border-radius: var(--radius-sm);
   font-family: var(--font-sans);
-  font-size: 10px;
-  font-weight: var(--font-semibold);
-  letter-spacing: 0.04em;
+  font-size: var(--type-kicker-size);
+  line-height: var(--type-kicker-line-height);
+  font-weight: var(--type-kicker-weight);
+  letter-spacing: var(--type-kicker-letter-spacing);
   text-transform: uppercase;
 }
 
 .sm {
   height: 18px;
-  font-size: 9px;
   padding: 0 var(--sp-1);
 }
 
diff --git a/packages/web/src/components/ui/toast/index.module.css b/packages/web/src/components/ui/toast/index.module.css
@@ -105,15 +105,16 @@
 
 .title {
   color: var(--text-primary);
-  font-size: var(--text-base);
-  font-weight: var(--font-medium);
-  line-height: var(--leading-tight);
+  font-size: var(--type-body-strong-size);
+  line-height: var(--type-body-strong-line-height);
+  font-weight: var(--type-body-strong-weight);
 }
 
 .body {
   color: var(--text-secondary);
-  font-size: var(--text-sm);
-  line-height: var(--leading-normal);
+  font-size: var(--type-meta-size);
+  line-height: var(--type-meta-line-height);
+  font-weight: var(--type-meta-weight);
   white-space: pre-line;
   word-break: break-word;
 }
@@ -123,8 +124,9 @@
   align-self: center;
   border-radius: var(--radius-sm);
   color: var(--accent-blue);
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
+  font-size: var(--type-body-strong-size);
+  line-height: var(--type-body-strong-line-height);
+  font-weight: var(--type-body-strong-weight);
   transition:
     background var(--duration-fast) var(--ease-out),
     color var(--duration-fast) var(--ease-out);
diff --git a/packages/web/src/components/ui/tooltip/index.module.css b/packages/web/src/components/ui/tooltip/index.module.css
@@ -12,8 +12,9 @@
   background: var(--bg-surface);
   color: var(--text-primary);
   box-shadow: var(--shadow-lg);
-  font-size: var(--text-xs);
-  line-height: 1.4;
+  font-size: var(--type-meta-size);
+  line-height: var(--type-meta-line-height);
+  font-weight: var(--type-meta-weight);
   pointer-events: none;
   white-space: nowrap;
 }
diff --git a/packages/web/src/styles/base.css b/packages/web/src/styles/base.css
@@ -662,7 +662,9 @@ textarea::placeholder {
   justify-content: center;
   background: var(--accent-amber);
   color: var(--text-inverse);
-  font-size: var(--text-sm);
+  font-size: var(--type-label-size);
+  line-height: var(--type-label-line-height);
+  font-weight: var(--type-label-weight);
   z-index: var(--z-toast);
 }
 
@@ -716,24 +718,27 @@ textarea::placeholder {
 .app-loading-kicker {
   margin-bottom: var(--sp-3);
   color: var(--text-tertiary);
-  font-size: 11px;
-  font-weight: 600;
-  letter-spacing: 0.12em;
+  font-size: var(--type-kicker-size);
+  line-height: var(--type-kicker-line-height);
+  font-weight: var(--type-kicker-weight);
+  letter-spacing: var(--type-kicker-letter-spacing);
   text-transform: uppercase;
 }
 
 .app-loading-title {
   margin: 0;
   color: var(--text-primary);
-  font-size: clamp(28px, 4vw, 38px);
-  font-weight: 600;
-  letter-spacing: -0.03em;
+  font-size: var(--type-display-size);
+  line-height: var(--type-display-line-height);
+  font-weight: var(--type-display-weight);
+  letter-spacing: var(--type-display-letter-spacing);
 }
 
 .app-loading-desc {
   margin-top: var(--sp-3);
   color: var(--text-secondary);
-  font-size: var(--text-sm);
-  line-height: 1.7;
+  font-size: var(--type-body-size);
+  line-height: var(--type-body-line-height);
+  font-weight: var(--type-body-weight);
   max-width: 42ch;
 }
diff --git a/packages/web/src/styles/components.css b/packages/web/src/styles/components.css
diff --git a/packages/web/src/styles/components.theme.test.ts b/packages/web/src/styles/components.theme.test.ts
diff --git a/packages/web/src/styles/typography.guard.test.ts b/packages/web/src/styles/typography.guard.test.ts

Original file line number	Diff line number	Diff line change
`@@ -90,7 +90,7 @@`
`90`	`90`	`:global(.panel-tab.active) {`
`91`	`91`	`background: var(--blue);`
`92`	`92`	`color: var(--bg);`
`93`		`- font-weight: 500;`
	`93`	`+ font-weight: var(--type-label-weight);`
`94`	`94`	`}`
`95`	`95`
`96`	`96`	`:global(.worktree-tab) {`