From a2c3c5026354899b850312a5316f36a95b675995 Mon Sep 17 00:00:00 2001
From: Dale Seo <dale.seo@gmail.com>
Date: Thu, 9 Jan 2025 19:55:14 -0500
Subject: [PATCH] apply heading component to app

---
 src/App.tsx                             | 7 ++++---
 src/components/Heading/Heading.test.tsx | 4 ++--
 src/components/Heading/Heading.tsx      | 6 +++---
 src/components/Heading/index.tsx        | 1 +
 src/tokens/colors.ts                    | 4 ++--
 5 files changed, 12 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Heading/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index adfe7bc..330418d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import logo from "/logo.svg";
 import { css } from "../styled-system/css";
 import { Button } from "./components/Button";
+import { Heading } from "./components/Heading";
 
 function App() {
   return (
@@ -23,9 +24,9 @@ function App() {
         </a>
       </header>
       <main>
-        <h1>Welcome Dale UI!</h1>
+        <Heading level={1}>Welcome Dale UI!</Heading>
         <section>
-          <h2>유용한 링크</h2>
+          <Heading level={2}>유용한 링크</Heading>
           <ul>
             <li>
               <a href="https://main--675790d317ba346348aa3490.chromatic.com/">
@@ -51,7 +52,7 @@ function App() {
           </ul>
         </section>
         <section>
-          <h2>섹션 2</h2>
+          <Heading level={2}>섹션 2</Heading>
           <Button>클릭</Button>
         </section>
       </main>
diff --git a/src/components/Heading/Heading.test.tsx b/src/components/Heading/Heading.test.tsx
index bbefd54..4e0f57e 100644
--- a/src/components/Heading/Heading.test.tsx
+++ b/src/components/Heading/Heading.test.tsx
@@ -46,10 +46,10 @@ test("applies the correct color for low and high contrast", () => {
   render(<Contrasts />);
 
   expect(screen.getByRole("heading", { name: "낮은 명암비" })).toHaveClass(
-    "c_text"
+    "c_text.muted"
   );
 
   expect(screen.getByRole("heading", { name: "높은 명암비" })).toHaveClass(
-    "c_text.contrast"
+    "c_text"
   );
 });
diff --git a/src/components/Heading/Heading.tsx b/src/components/Heading/Heading.tsx
index 6ec755a..f8673bb 100644
--- a/src/components/Heading/Heading.tsx
+++ b/src/components/Heading/Heading.tsx
@@ -27,7 +27,7 @@ export const Heading = ({
   level,
   size,
   weight,
-  contrast = "low",
+  contrast = "high",
   ...rest
 }: HeadingProps) => {
   if (!level) {
@@ -65,8 +65,8 @@ const styles = cva({
       6: { textStyle: "md" },
     },
     contrast: {
-      low: { color: "text" },
-      high: { color: "text.contrast" },
+      low: { color: "text.muted" },
+      high: { color: "text" },
     },
   },
 });
diff --git a/src/components/Heading/index.tsx b/src/components/Heading/index.tsx
new file mode 100644
index 0000000..0776e15
--- /dev/null
+++ b/src/components/Heading/index.tsx
@@ -0,0 +1 @@
+export { Heading } from "./Heading";
diff --git a/src/tokens/colors.ts b/src/tokens/colors.ts
index 200da7c..2aff6eb 100644
--- a/src/tokens/colors.ts
+++ b/src/tokens/colors.ts
@@ -111,7 +111,7 @@ export const semanticColors: SemanticTokens["colors"] = {
     },
   },
   text: {
-    DEFAULT: {
+    muted: {
       DEFAULT: {
         value: { base: "{colors.gray.11}", _dark: "{colors.grayDark.11}" },
       },
@@ -125,7 +125,7 @@ export const semanticColors: SemanticTokens["colors"] = {
         value: { base: "{colors.yellow.11}", _dark: "{colors.yellowDark.11}" },
       },
     },
-    contrast: {
+    DEFAULT: {
       DEFAULT: {
         value: { base: "{colors.gray.12}", _dark: "{colors.grayDark.12}" },
       },