apply heading component to app

DaleStudy · Jan 10, 2025 · a2c3c50 · a2c3c50
1 parent af623fe
commit a2c3c50
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1 @@
+export { Heading } from "./Heading";
diff --git 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}" },
       },