fix(web): tune shared ui typography emphasis

Author: pallyoung

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

@@ -10,7 +10,7 @@
   border-radius: var(--radius-md);
   font-family: var(--font-sans);
   font-size: var(--type-body-strong-size);
-  font-weight: var(--type-body-strong-weight);
+  font-weight: var(--font-medium);
   line-height: var(--type-body-strong-line-height);
   white-space: nowrap;
   transition:
@@ -84,7 +84,7 @@
   padding: 0 var(--sp-2);
   border-radius: var(--radius-sm);
   font-size: var(--type-label-size);
-  font-weight: var(--type-label-weight);
+  font-weight: var(--font-medium);
   line-height: var(--type-label-line-height);
 }
 

packages/web/src/styles/base.css

@@ -58,13 +58,13 @@ h3 {
 h4 {
   font-size: var(--type-body-strong-size);
   line-height: var(--type-body-strong-line-height);
-  font-weight: var(--type-body-strong-weight);
+  font-weight: var(--type-app-title-weight);
   color: var(--text-primary);
 }
 h5 {
   font-size: var(--type-label-size);
   line-height: var(--type-label-line-height);
-  font-weight: var(--type-label-weight);
+  font-weight: var(--type-app-title-weight);
   color: var(--text-primary);
 }
 h6 {
@@ -84,7 +84,7 @@ p {
 .section-title {
   font-size: var(--type-kicker-size);
   line-height: var(--type-kicker-line-height);
-  font-weight: var(--type-kicker-weight);
+  font-weight: var(--type-app-title-weight);
   text-transform: uppercase;
   letter-spacing: var(--type-kicker-letter-spacing);
   color: var(--text-tertiary);

packages/web/src/styles/components.css

@@ -2442,7 +2442,7 @@ body.is-resizing-panels * {
   color: var(--bg);
   font-size: var(--type-body-strong-size);
   line-height: var(--type-body-strong-line-height);
-  font-weight: var(--type-body-strong-weight);
+  font-weight: var(--font-medium);
   border: none;
   cursor: pointer;
   font-family: var(--sans);
@@ -4855,7 +4855,7 @@ body.is-resizing-panels * {
   border-radius: 14px;
   font-size: var(--type-body-strong-size);
   line-height: var(--type-body-strong-line-height);
-  font-weight: var(--type-body-strong-weight);
+  font-weight: var(--font-medium);
   letter-spacing: 0.01em;
   font-family: var(--font-sans);
   cursor: pointer;
@@ -4895,7 +4895,7 @@ body.is-resizing-panels * {
   border-radius: 18px;
   font-size: var(--type-body-strong-size);
   line-height: var(--type-body-strong-line-height);
-  font-weight: var(--type-body-strong-weight);
+  font-weight: var(--font-medium);
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.18),
     0 14px 32px rgba(37, 99, 235, 0.24);
@@ -5033,7 +5033,7 @@ body.is-resizing-panels * {
   border-radius: var(--radius-md);
   font-family: var(--font-sans);
   font-size: var(--type-body-strong-size);
-  font-weight: var(--type-body-strong-weight);
+  font-weight: var(--font-medium);
   line-height: var(--type-body-strong-line-height);
   white-space: nowrap;
   transition:
@@ -5097,7 +5097,7 @@ body.is-resizing-panels * {
   padding: 0 var(--sp-2);
   border-radius: var(--radius-sm);
   font-size: var(--type-label-size);
-  font-weight: var(--type-label-weight);
+  font-weight: var(--font-medium);
   line-height: var(--type-label-line-height);
 }
 
@@ -8652,7 +8652,7 @@ textarea.input {
     height: 36px;
     padding: 0 var(--sp-3);
     border: none;
-    border-bottom: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
+    border-bottom: none;
     border-radius: 0;
     background: color-mix(in srgb, var(--bg-surface) 24%, transparent);
     color: var(--text-primary);
@@ -8804,9 +8804,9 @@ textarea.input {
     min-height: 36px;
     height: 36px;
     padding: 0;
-    border: 1px solid color-mix(in srgb, var(--border) 66%, transparent);
+    border: none;
     border-radius: 10px;
-    background: color-mix(in srgb, var(--bg-surface) 42%, transparent);
+    background: transparent;
     color: var(--text-primary);
     transition:
       background-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
@@ -9082,10 +9082,10 @@ textarea.input {
   .mobile-shell__empty-title {
     margin: 0;
     color: var(--text-primary);
-    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);
+    font-size: var(--type-app-title-size);
+    line-height: var(--type-app-title-line-height);
+    font-weight: var(--type-app-title-weight);
+    letter-spacing: var(--type-app-title-letter-spacing);
   }
 
   .mobile-shell__placeholder-copy {
@@ -9122,7 +9122,7 @@ textarea.input {
     padding: 0 var(--sp-4);
     font-size: var(--type-body-strong-size);
     line-height: var(--type-body-strong-line-height);
-    font-weight: var(--type-body-strong-weight);
+    font-weight: var(--font-medium);
     border: 1px solid color-mix(in srgb, var(--accent-blue) 34%, var(--border));
     border-radius: 12px;
     background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-surface));
@@ -9282,6 +9282,7 @@ textarea.input {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: var(--sp-2);
+    min-height: 36px;
     padding: 0 0 var(--sp-1);
     background: transparent;
     border-top: none;
@@ -9294,9 +9295,10 @@ textarea.input {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    min-height: 30px;
+    min-height: 36px;
+    height: 36px;
     gap: 4px;
-    padding: 2px var(--sp-2) 2px;
+    padding: 1px var(--sp-2) 0;
     border: none;
     border-top: 1px solid transparent;
     border-radius: 0;
@@ -10627,7 +10629,7 @@ textarea.input {
     color: var(--text-primary);
     font-size: var(--type-body-strong-size);
     line-height: var(--type-body-strong-line-height);
-    font-weight: var(--type-body-strong-weight);
+    font-weight: var(--font-medium);
     transition:
       background-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
       border-color var(--mobile-shell-motion-surface-duration) var(--ease-out),
@@ -11855,7 +11857,7 @@ textarea.input {
   color: #0b1020;
   font-size: var(--type-body-strong-size);
   line-height: var(--type-body-strong-line-height);
-  font-weight: var(--type-body-strong-weight);
+  font-weight: var(--font-medium);
 }
 
 .git-commit-primary:disabled {
@@ -12375,7 +12377,7 @@ textarea.input {
   border-radius: var(--radius-md);
   font-size: var(--type-body-strong-size);
   line-height: var(--type-body-strong-line-height);
-  font-weight: var(--type-body-strong-weight);
+  font-weight: var(--font-medium);
   cursor: pointer;
   transition: all var(--duration-fast) var(--ease-out);
 }

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

@@ -275,18 +275,14 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(getLastRuleBlockFrom(buttonStyles, ".btn")).toContain(
       "font-size: var(--type-body-strong-size)"
     );
-    expect(getLastRuleBlockFrom(buttonStyles, ".btn")).toContain(
-      "font-weight: var(--type-body-strong-weight)"
-    );
+    expect(getLastRuleBlockFrom(buttonStyles, ".btn")).toContain("font-weight: var(--font-medium)");
     expect(getLastRuleBlockFrom(buttonStyles, ".btn")).toContain(
       "line-height: var(--type-body-strong-line-height)"
     );
     expect(getLastRuleBlockFrom(buttonStyles, ".sm")).toContain(
       "font-size: var(--type-label-size)"
     );
-    expect(getLastRuleBlockFrom(buttonStyles, ".sm")).toContain(
-      "font-weight: var(--type-label-weight)"
-    );
+    expect(getLastRuleBlockFrom(buttonStyles, ".sm")).toContain("font-weight: var(--font-medium)");
     expect(getLastRuleBlockFrom(buttonStyles, ".lg")).not.toContain("font-size:");
 
     expect(getLastRuleBlockFrom(inputStyles, ".input")).toContain(
@@ -331,7 +327,7 @@ describe("components.css theme-sensitive surfaces", () => {
       "font-size:var(--type-body-strong-size)"
     );
     expect(getLastRuleBlockFrom(runtimeStylesheet, ".btn")).toContain(
-      "font-weight:var(--type-body-strong-weight)"
+      "font-weight:var(--font-medium)"
     );
     expect(getLastRuleBlockFrom(runtimeStylesheet, ".btn-sm")).toContain(
       "font-size:var(--type-label-size)"
@@ -792,10 +788,12 @@ describe("components.css theme-sensitive surfaces", () => {
 
     expect(mobileDock).toContain("grid-template-columns: repeat(3, minmax(0, 1fr))");
     expect(mobileDock).toContain("gap: var(--sp-2)");
+    expect(mobileDock).toContain("min-height: 36px");
     expect(mobileDockItem).toBeTruthy();
     expect(mobileDockItem).toContain("border-top: 1px solid transparent");
     expect(mobileDockItem).toContain("background: transparent");
-    expect(mobileDockItem).toContain("min-height: 30px");
+    expect(mobileDockItem).toContain("min-height: 36px");
+    expect(mobileDockItem).toContain("height: 36px");
     expect(activeDockItem).toBeTruthy();
     expect(activeDockItem).toContain("border-top-color:");
   });
@@ -1037,9 +1035,11 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(topbar).toContain(
       "padding: calc(var(--mobile-safe-top) + var(--sp-1)) calc(var(--mobile-safe-right) + var(--sp-4)) var(--sp-1) calc(var(--mobile-safe-left) + var(--sp-4))"
     );
-    expect(topbarWorkspaceButton).toContain("border-bottom: 1px solid");
+    expect(topbarWorkspaceButton).toContain("border-bottom: none");
     expect(topbarWorkspaceButton).toContain("border-radius: 0");
+    expect(topbarIconButton).toContain("border: none");
     expect(topbarIconButton).toContain("border-radius: 10px");
+    expect(topbarIconButton).toContain("background: transparent");
     expect(emptyStage).toContain("padding: clamp(34px, 9vh, 72px) var(--sp-4) var(--sp-3)");
     expect(bottomStack).toContain("background: linear-gradient(");
     expect(bottomStack).toContain("border-top: 1px solid color-mix(");
@@ -1049,9 +1049,11 @@ describe("components.css theme-sensitive surfaces", () => {
     );
     expect(dock).toContain("gap: var(--sp-2)");
     expect(dock).toContain("border-bottom: none");
+    expect(dock).toContain("min-height: 36px");
     expect(dockItem).toBeTruthy();
-    expect(dockItem).toContain("min-height: 30px");
-    expect(dockItem).toContain("padding: 2px var(--sp-2) 2px");
+    expect(dockItem).toContain("min-height: 36px");
+    expect(dockItem).toContain("height: 36px");
+    expect(dockItem).toContain("padding: 1px var(--sp-2) 0");
     expect(dockLabel).toContain("font-size: var(--type-kicker-size)");
     expect(statusBar).toContain("padding-bottom: calc(var(--mobile-safe-bottom) + var(--sp-1))");
     expect(statusBar).toContain("border-top: 1px solid");
@@ -1070,7 +1072,7 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(emptyState).toContain("width: 100%");
     expect(emptyState).toContain("text-align: left");
     expect(emptyState).toContain("gap: var(--sp-3)");
-    expect(emptyTitle).toContain("font-size: var(--type-display-size)");
+    expect(emptyTitle).toContain("font-size: var(--type-app-title-size)");
     expect(placeholderCopy).toContain("gap: var(--sp-2)");
     expect(emptyCta).toContain("min-height: 38px");
     expect(emptyCta).toContain("width: auto");

packages/web/src/styles/tokens-touch.test.ts

@@ -108,12 +108,12 @@ describe("tokens.css touch tokens", () => {
 
     expect(root).toContain("--type-kicker-size: var(--font-size-100)");
     expect(root).toContain("--type-kicker-line-height: 1.2");
-    expect(root).toContain("--type-kicker-weight: var(--font-semibold)");
+    expect(root).toContain("--type-kicker-weight: var(--font-normal)");
     expect(root).toContain("--type-kicker-letter-spacing: 0.08em");
 
     expect(root).toContain("--type-label-size: var(--font-size-200)");
     expect(root).toContain("--type-label-line-height: 1.35");
-    expect(root).toContain("--type-label-weight: var(--font-medium)");
+    expect(root).toContain("--type-label-weight: var(--font-normal)");
 
     expect(root).toContain("--type-meta-size: var(--font-size-200)");
     expect(root).toContain("--type-meta-line-height: 1.45");
@@ -123,10 +123,10 @@ describe("tokens.css touch tokens", () => {
     expect(root).toContain("--type-body-weight: var(--font-normal)");
     expect(root).toContain("--type-body-strong-size: var(--font-size-300)");
     expect(root).toContain("--type-body-strong-line-height: 1.45");
-    expect(root).toContain("--type-body-strong-weight: var(--font-medium)");
+    expect(root).toContain("--type-body-strong-weight: var(--font-normal)");
     expect(root).toContain("--type-code-inline-size: var(--font-size-200)");
     expect(root).toContain("--type-code-inline-line-height: 1.4");
-    expect(root).toContain("--type-code-inline-weight: var(--font-medium)");
+    expect(root).toContain("--type-code-inline-weight: var(--font-normal)");
     expect(root).toContain("--type-code-inline-family: var(--font-mono)");
     expect(root).toContain("--type-app-title-size: var(--font-size-400)");
     expect(root).toContain("--type-app-title-line-height: 1.25");

packages/web/src/styles/tokens.css

@@ -50,12 +50,12 @@
 
   --type-kicker-size: var(--font-size-100);
   --type-kicker-line-height: 1.2;
-  --type-kicker-weight: var(--font-semibold);
+  --type-kicker-weight: var(--font-normal);
   --type-kicker-letter-spacing: 0.08em;
 
   --type-label-size: var(--font-size-200);
   --type-label-line-height: 1.35;
-  --type-label-weight: var(--font-medium);
+  --type-label-weight: var(--font-normal);
 
   --type-meta-size: var(--font-size-200);
   --type-meta-line-height: 1.45;
@@ -67,11 +67,11 @@
 
   --type-body-strong-size: var(--font-size-300);
   --type-body-strong-line-height: 1.45;
-  --type-body-strong-weight: var(--font-medium);
+  --type-body-strong-weight: var(--font-normal);
 
   --type-code-inline-size: var(--font-size-200);
   --type-code-inline-line-height: 1.4;
-  --type-code-inline-weight: var(--font-medium);
+  --type-code-inline-weight: var(--font-normal);
   --type-code-inline-family: var(--font-mono);
 
   --type-app-title-size: var(--font-size-400);