feat(color): red color를 추가합니다. (#103)

Setaday · Dec 7, 2024 · 4574bd0 · 4574bd0
1 parent fdb3641
commit 4574bd0
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/.changeset/breezy-apples-wait.md b/.changeset/breezy-apples-wait.md
@@ -0,0 +1,5 @@
+---
+"@setaday/design-token": minor
+---
+
+add red color token
diff --git a/packages/design-token/src/color.ts b/packages/design-token/src/color.ts
@@ -2,6 +2,7 @@ const color = {
   key: "#4F8FF6",
   white: "#FFFFFF",
   black: "#000000",
+  red: "FF7070",
 
   sub: {
     1: "#ECF4FD",

diff --git a/packages/ui/src/TextField/TextField.styles.ts b/packages/ui/src/TextField/TextField.styles.ts
@@ -5,7 +5,7 @@ export const textFieldVariants = cva(
   {
     variants: {
       isError: {
-        true: "shadow-[inset_0_0_0_1px_red]",
+        true: "shadow-[inset_0_0_0_1px_theme('colors.red')]",
       },
       inputSize: {
         desktop: "w-[33.5rem] h-[5.7rem]",
@@ -19,7 +19,7 @@ export const textFieldVariants = cva(
 export const textCountVariants = cva("", {
   variants: {
     isError: {
-      true: "text-red-100",
+      true: "text-red",
     },
   },
 });
diff --git a/packages/ui/src/TextField/TextField.tsx b/packages/ui/src/TextField/TextField.tsx
@@ -41,7 +41,7 @@ const TextField = ({ isError = false, errorMessage, value, maxLength, inputSize,
       </div>
       <div className="h-[1.45rem]">
         {value.length > maxLength || (isError && errorMessage) ? (
-          <span className="text-red-100 font-caption1_m_12">
+          <span className="text-red font-caption1_m_12">
             {value.length > maxLength ? `${maxLength}자가 초과되었어요` : errorMessage}
           </span>
         ) : null}