diff --git a/src/components/ui/input-password/index.test.tsx b/src/components/ui/input-password/index.test.tsx index 1e34f1a..edf1895 100644 --- a/src/components/ui/input-password/index.test.tsx +++ b/src/components/ui/input-password/index.test.tsx @@ -246,7 +246,9 @@ describe("InputPassword", () => { const container = testContainer.getContainer().firstElementChild; // Then: invalid状態のクラスが適用されている（実際のCVAクラス名） - expect(container?.className).toContain("border-negative-500"); + expect(container?.className).toContain( + "border-border-negative-extra-high-enabled" + ); }); it("maintains invalid state styling when visibility is toggled", () => { @@ -259,7 +261,9 @@ describe("InputPassword", () => { EventHelpers.click(button); // Then: invalid状態のスタイリングが維持される（実際のCVAクラス名） - expect(container?.className).toContain("border-negative-500"); + expect(container?.className).toContain( + "border-border-negative-extra-high-enabled" + ); }); }); diff --git a/src/components/ui/input/index.test.tsx b/src/components/ui/input/index.test.tsx index 4f4923c..f68d3ac 100644 --- a/src/components/ui/input/index.test.tsx +++ b/src/components/ui/input/index.test.tsx @@ -255,7 +255,9 @@ describe("Input", () => { const container = testContainer.getContainer().firstElementChild; // Then: invalid状態のクラスが適用される（実際のCVAクラス名） - expect(container?.className).toContain("border-negative-500"); + expect(container?.className).toContain( + "border-border-negative-extra-high-enabled" + ); }); it("maintains invalid state with icon button", () => { @@ -264,7 +266,9 @@ describe("Input", () => { const container = testContainer.getContainer().firstElementChild; // Then: invalid状態のクラスが保持される（実際のCVAクラス名） - expect(container?.className).toContain("border-negative-500"); + expect(container?.className).toContain( + "border-border-negative-extra-high-enabled" + ); }); }); diff --git a/src/components/ui/input/index.tsx b/src/components/ui/input/index.tsx index 3923030..989cf5c 100644 --- a/src/components/ui/input/index.tsx +++ b/src/components/ui/input/index.tsx @@ -21,8 +21,8 @@ const inputVariants = cva( lg: "h-12 character-4-regular-pro", }, isInvalid: { - true: "border-negative-500", - false: "border-neutral-500", + true: "border-border-negative-extra-high-enabled", + false: "border-border-neutral-extra-high-enabled", }, isDisabled: { true: "cursor-not-allowed", @@ -38,26 +38,29 @@ const inputVariants = cva( { isInvalid: false, isDisabled: false, - className: "border-neutral-500 hover:border-neutral-600", + className: + "border-border-neutral-extra-high-enabled hover:border-border-neutral-extra-high-hover", }, // エラー状態 { isInvalid: true, isDisabled: false, className: - "border-negative-500 hover:border-negative-600 bg-surface-base-0", + "border-border-negative-extra-high-enabled hover:border-border-negative-extra-high-hover bg-surface-base-0", }, // 無効状態 { isInvalid: false, isDisabled: true, - className: "border-neutral-200 bg-neutral-50", + className: + "border-border-neutral-extra-high-disabled bg-surface-neutral-middle-disabled", }, // エラー+無効状態 { isInvalid: true, isDisabled: true, - className: "border-negative-200 bg-neutral-50", + className: + "border-border-negative-extra-high-disabled bg-surface-neutral-middle-disabled", }, ], defaultVariants: { @@ -360,7 +363,7 @@ function Input({ "w-full h-full bg-transparent border-none outline-hidden focus:outline-hidden", "text-text-neutral-high placeholder:text-text-neutral-low px-2", isInputDisabled && - "cursor-not-allowed text-neutral-400 placeholder:text-text-neutral-disabled" + "cursor-not-allowed text-text-neutral-disabled placeholder:text-text-neutral-disabled" )} onChange={handleChange} onFocus={handleInputFocus} diff --git a/src/components/ui/tag/index.test.tsx b/src/components/ui/tag/index.test.tsx index 1b3ea87..d48df91 100644 --- a/src/components/ui/tag/index.test.tsx +++ b/src/components/ui/tag/index.test.tsx @@ -58,9 +58,12 @@ describe("Tag", () => { describe("Variant Styling", () => { const variants = [ - { variant: "solid" as const, expected: "bg-neutral-500" }, + { variant: "solid" as const, expected: "bg-object-neutral-middle" }, { variant: "outline" as const, expected: "bg-surface-base-0" }, - { variant: "subtle" as const, expected: "bg-neutral-100" }, + { + variant: "subtle" as const, + expected: "bg-surface-neutral-middle-enabled", + }, ]; variants.forEach(({ variant, expected }) => { @@ -94,11 +97,11 @@ describe("Tag", () => { describe("Status Variants", () => { const statuses = [ - { status: "neutral" as const, expected: "bg-neutral-500" }, - { status: "info" as const, expected: "bg-primary-500" }, - { status: "success" as const, expected: "bg-success-500" }, - { status: "warning" as const, expected: "bg-warning-500" }, - { status: "negative" as const, expected: "bg-negative-500" }, + { status: "neutral" as const, expected: "bg-object-neutral-middle" }, + { status: "info" as const, expected: "bg-object-info" }, + { status: "success" as const, expected: "bg-object-success" }, + { status: "warning" as const, expected: "bg-object-warning" }, + { status: "negative" as const, expected: "bg-object-negative-enabled" }, ]; statuses.forEach(({ status, expected }) => { @@ -125,7 +128,7 @@ describe("Tag", () => { // Then: すべてのプロパティが適用される expect(tag).toHaveClass("border", "min-w-14", "custom"); - expect(tag.className).toContain("border-primary-500"); + expect(tag.className).toContain("border-object-info"); }); }); diff --git a/src/components/ui/tag/index.tsx b/src/components/ui/tag/index.tsx index 41ce0c4..4a20d54 100644 --- a/src/components/ui/tag/index.tsx +++ b/src/components/ui/tag/index.tsx @@ -35,31 +35,31 @@ const tagVariants = cva( { variant: "solid", status: "neutral", - className: "bg-neutral-500 text-white", + className: "bg-object-neutral-middle text-text-inverse", }, // info + solid { variant: "solid", status: "info", - className: "bg-primary-500 text-white", + className: "bg-object-info text-text-inverse", }, // success + solid { variant: "solid", status: "success", - className: "bg-success-500 text-white", + className: "bg-object-success text-text-inverse", }, // warning + solid { variant: "solid", status: "warning", - className: "bg-warning-500 text-white", + className: "bg-object-warning text-text-inverse", }, // negative + solid { variant: "solid", status: "negative", - className: "bg-negative-500 text-white", + className: "bg-object-negative-enabled text-text-inverse", }, // === OUTLINE バリアント === @@ -67,31 +67,33 @@ const tagVariants = cva( { variant: "outline", status: "neutral", - className: "border-neutral-500 text-neutral-500 bg-surface-base-0", + className: + "border-object-neutral-middle text-text-neutral-middle bg-surface-base-0", }, // info + outline { variant: "outline", status: "info", - className: "border-primary-500 text-primary-500 bg-surface-base-0", + className: "border-object-info text-text-info bg-surface-base-0", }, // success + outline { variant: "outline", status: "success", - className: "border-success-500 text-success-500 bg-surface-base-0", + className: "border-object-success text-text-success bg-surface-base-0", }, // warning + outline { variant: "outline", status: "warning", - className: "border-warning-500 text-warning-500 bg-surface-base-0", + className: "border-object-warning text-text-warning bg-surface-base-0", }, // negative + outline { variant: "outline", status: "negative", - className: "border-negative-500 text-negative-500 bg-surface-base-0", + className: + "border-object-negative-enabled text-text-negative-enabled bg-surface-base-0", }, // === SUBTLE バリアント === @@ -99,31 +101,32 @@ const tagVariants = cva( { variant: "subtle", status: "neutral", - className: "bg-neutral-100 text-neutral-600", + className: "bg-surface-neutral-middle-enabled text-text-neutral-middle", }, // info + subtle { variant: "subtle", status: "info", - className: "bg-primary-100 text-primary-600", + className: "bg-surface-info-low text-text-info", }, // success + subtle { variant: "subtle", status: "success", - className: "bg-success-100 text-success-600", + className: "bg-surface-success-low text-text-success", }, // warning + subtle { variant: "subtle", status: "warning", - className: "bg-warning-100 text-warning-600", + className: "bg-surface-warning-low text-text-warning", }, // negative + subtle { variant: "subtle", status: "negative", - className: "bg-negative-100 text-negative-600", + className: + "bg-surface-negative-middle-enabled text-text-negative-enabled", }, ], defaultVariants: { diff --git a/src/components/ui/textarea/index.test.tsx b/src/components/ui/textarea/index.test.tsx index 470b83f..d231772 100644 --- a/src/components/ui/textarea/index.test.tsx +++ b/src/components/ui/textarea/index.test.tsx @@ -82,7 +82,9 @@ describe("Textarea", () => { testContainer.render(