From a5adc1f2c72a90a24428fe994ab71bef790e0523 Mon Sep 17 00:00:00 2001
From: touyou <465697+touyou@users.noreply.github.com>
Date: Fri, 5 Jun 2026 16:50:35 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=E3=82=A2=E3=82=A4?=
 =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=81=AE=20font-weight=20=E3=82=92=20500=20?=
 =?UTF-8?q?=E3=81=AB=E5=9B=BA=E5=AE=9A=E3=81=97=E8=A6=AA=E8=A6=81=E7=B4=A0?=
 =?UTF-8?q?=E3=81=8B=E3=82=89=E3=81=AE=E7=B6=99=E6=89=BF=E3=82=92=E9=98=B2?=
 =?UTF-8?q?=E3=81=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Icon の span に font-medium を付与し、親（Button の bold ラベル等）から
  font-weight: 700 が継承されて疑似ボールドで太く描画される問題を修正
- Material Symbols Rounded は wght 500 のみ読み込んでいるため、継承された
  700 はフォント合成（faux bold）として描画されていた
- className からの font-weight 上書きは tailwind-merge により引き続き可能
- Icon のフォントウェイトに関するテストを追加

Fixes goodpatch/sparkle-design-internal#198

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/ui/icon/index.test.tsx | 31 +++++++++++++++++++++++++++
 src/components/ui/icon/index.tsx      | 10 ++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/components/ui/icon/index.test.tsx b/src/components/ui/icon/index.test.tsx
index 5c1b0847..ee2ec268 100644
--- a/src/components/ui/icon/index.test.tsx
+++ b/src/components/ui/icon/index.test.tsx
@@ -133,6 +133,37 @@ describe("Icon", () => {
     });
   });
 
+  describe("フォントウェイト / Font Weight", () => {
+    it("font-medium が常に付与される（weight 500 統一）", () => {
+      // Given: 基本的なIcon
+      // en: Given a basic Icon
+      testContainer.render(<Icon icon="check" />);
+
+      // When: aria-hiddenなspan要素を取得
+      // en: When selecting the aria-hidden span element
+      const span = testContainer.querySelector("span[aria-hidden='true']");
+
+      // Then: 親の font-weight 継承（疑似ボールド）を防ぐ font-medium が付与される
+      // en: Then font-medium is applied to prevent inherited font-weight (faux bold)
+      expect(StyleHelpers.hasClass(span, "font-medium")).toBe(true);
+    });
+
+    it("className で font-weight を上書きできる", () => {
+      // Given: font-bold を className で指定
+      // en: Given font-bold provided via className
+      testContainer.render(<Icon icon="check" className="font-bold" />);
+
+      // When: aria-hiddenなspan要素を取得
+      // en: When selecting the aria-hidden span element
+      const span = testContainer.querySelector("span[aria-hidden='true']");
+
+      // Then: tailwind-merge により font-bold が優先される
+      // en: Then font-bold wins via tailwind-merge
+      expect(StyleHelpers.hasClass(span, "font-bold")).toBe(true);
+      expect(StyleHelpers.hasClass(span, "font-medium")).toBe(false);
+    });
+  });
+
   describe("HTMLAttributes / Props", () => {
     it("id や data 属性、style が反映される", () => {
       // Given
diff --git a/src/components/ui/icon/index.tsx b/src/components/ui/icon/index.tsx
index 1415f9d5..ab0efb2e 100644
--- a/src/components/ui/icon/index.tsx
+++ b/src/components/ui/icon/index.tsx
@@ -86,7 +86,15 @@ export const Icon = React.forwardRef<HTMLSpanElement, IconProps>(
     return (
       <span
         ref={ref}
-        className={cn(iconTypographyClass, "select-none", className)}
+        // font-medium: アイコンの weight は 500 で統一。親要素（Button の bold 等）から
+        // font-weight が継承されると疑似ボールド（faux bold）で太く描画されるため明示する。
+        // en: Icons are unified at weight 500. Set font-weight explicitly so an inherited
+        // font-weight (e.g. bold Button labels) does not trigger faux-bold rendering.
+        className={cn(
+          iconTypographyClass,
+          "select-none font-medium",
+          className
+        )}
         aria-hidden="true"
         {...props}
       >