apply heading component to app

Author: DaleSeo

bun.lockb

@@ -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>

package-lock.json

@@ -56,20 +56,18 @@ export const Contrasts: StoryObj<typeof meta> = {
   render: (args) => {
     return (
       <div className={vstack({ gap: "6" })}>
-        <Heading {...args} contrast="low">
+        <Heading {...args} muted>
           낮은 명암비
         </Heading>
-        <Heading {...args} contrast="high">
-          높은 명암비
-        </Heading>
+        <Heading {...args}>높은 명암비</Heading>
       </div>
     );
   },
   argTypes: {
     children: {
       control: false,
     },
-    contrast: {
+    muted: {
       control: false,
     },
   },

src/App.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"
   );
 });

src/components/Heading/Heading.stories.tsx

@@ -14,20 +14,21 @@ export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
   /** 굵기 */
   weight?: FontWeight;
   /** 명암비 */
-  contrast?: "low" | "high";
+  muted?: boolean;
 }
 
 /**
  * - `level` 속성을 통해서 `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` 요소 중 하나를 선택할 수 있습니다.
  * - `level` 속성은 단계 별 기본 텍스트 스타일을 제공합니다.
  * - `size` 속성과 `weight` 속성을 통해서 기본 스타일을 변경할 수 있습니다.
+ * - `muted` 속성을 주시면 글자색이 옅어집니다. 명암비가 낮아지므로 접근성 측면에서 주의해서 사용하세요.
  */
 export const Heading = ({
   children,
   level,
   size,
   weight,
-  contrast = "low",
+  muted = false,
   ...rest
 }: HeadingProps) => {
   if (!level) {
@@ -41,7 +42,7 @@ export const Heading = ({
   return (
     <Tag
       className={css(
-        styles.raw({ level, contrast }),
+        styles.raw({ level, muted }),
         css.raw({
           fontSize: size,
           fontWeight: weight,
@@ -64,9 +65,9 @@ const styles = cva({
       5: { textStyle: "lg" },
       6: { textStyle: "md" },
     },
-    contrast: {
-      low: { color: "text" },
-      high: { color: "text.contrast" },
+    muted: {
+      true: { color: "text.muted" },
+      false: { color: "text" },
     },
   },
 });

src/components/Heading/Heading.test.tsx

@@ -0,0 +1 @@
+export { Heading } from "./Heading";

src/components/Heading/Heading.tsx

@@ -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}" },
       },