Merge pull request #24 from DaleStudy/23-typography

Typgraphy Tokens

.storybook/preview.ts

@@ -10,7 +10,11 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    docs: {
+      toc: true,
+    },
   },
+  tags: ["autodocs"],
 };
 
 export default preview;

panda.config.ts

@@ -1,4 +1,13 @@
 import { defineConfig } from "@pandacss/dev";
+import { globalCss } from "./src/styles/globalCss";
+import {
+  textStyles,
+  fonts,
+  fontWeights,
+  fontSizes,
+  letterSpacings,
+  lineHeights,
+} from "./src/tokens/typography";
 
 export default defineConfig({
   // Whether to use css reset
@@ -10,9 +19,24 @@ export default defineConfig({
   // Files to exclude
   exclude: [],
 
+  globalCss,
+
+  globalVars: {
+    "--font-spoqa": "Spoqa Han Sans Neo",
+  },
+
   // Useful for theme customization
   theme: {
-    extend: {},
+    extend: {
+      textStyles,
+      tokens: {
+        fonts,
+        fontWeights,
+        fontSizes,
+        letterSpacings,
+        lineHeights,
+      },
+    },
   },
 
   // The output directory for your css system

src/components/Button/Button.stories.ts

@@ -7,7 +7,6 @@ const meta = {
   parameters: {
     layout: "centered",
   },
-  tags: ["autodocs"],
   args: { onClick: fn() },
 } satisfies Meta<typeof Button>;
 

src/components/Button/Button.tsx

@@ -1,11 +1,15 @@
 import { css } from "../../../styled-system/css";
 
 export interface ButtonProps {
+  /** 버튼 텍스트 */
   children: React.ReactNode;
   type?: "button" | "submit";
   onClick?: () => void;
 }
 
+/**
+ * 버튼 컴포넌트입니다.
+ */
 export const Button = ({
   children,
   type = "button",

src/index.css

@@ -1 +1,2 @@
 @layer reset, base, tokens, recipes, utilities;
+@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);

src/styles/globalCss.ts

@@ -0,0 +1,42 @@
+import { defineGlobalStyles } from "@pandacss/dev";
+
+export const globalCss = defineGlobalStyles({
+  ":root": {
+    "--global-font-body": "var  (--fonts-sans)",
+  },
+  h1: {
+    fontSize: "var(--font-sizes-4xl)", // 2.25rem
+    lineHeight: "var(--line-heights-loose)", // 2
+    fontWeight: "var(--font-weights-bold)", // 700
+  },
+  h2: {
+    fontSize: "var(--font-sizes-3xl)", // 1.875rem
+    lineHeight: "var(--line-heights-loose)", // 2
+    fontWeight: "var(--font-weights-bold)", // 500
+  },
+  h3: {
+    fontSize: "var(--font-sizes-2xl)", // 1.5rem
+    lineHeight: "var(--line-heights-relaxed)", // 1.625
+    fontWeight: "var(--font-weights-medium)", // 500
+  },
+  h4: {
+    fontSize: "var(--font-sizes-xl)", // 1.25rem
+    lineHeight: "var(--line-heights-relaxed)", // 1.625
+    fontWeight: "var(--font-weights-medium)", // 500
+  },
+  h5: {
+    fontSize: "var(--font-sizes-lg)", // 1.125rem
+    lineHeight: "var(--line-heights-relaxed)", // 1.625
+    fontWeight: "var(--font-weights-medium)", // 500
+  },
+  h6: {
+    fontSize: "var(--font-sizes-md)", // 1rem
+    lineHeight: "var(--line-heights-relaxed)", // 1.625
+    fontWeight: "var(--font-weights-medium)", // 500
+  },
+  p: {
+    fontSize: "var(--font-sizes-md)", // 1rem
+    lineHeight: "var(--line-heights-relaxed)", // 1.625
+    fontWeight: "var(--font-weights-normal)", // 400
+  },
+});

src/tokens/typography.mdx

@@ -0,0 +1,38 @@
+import { Typeset } from "@storybook/blocks";
+import { fonts, fontWeights, fontSizes } from "./typography.ts";
+
+# Typography
+
+> 달레 UI는 [스포카 한 산스 네오(Spoqa Han Sans Neo)](https://spoqa.github.io/spoqa-han-sans/) 웹폰트를 사용하고 있습니다.
+
+## 글꼴 크기
+
+<p>
+  {Object.entries(fontSizes)
+    .map(([name, { value }]) => `${name}(${value})`)
+    .join(", ")}
+</p>
+
+<Typeset
+  fontSizes={Object.values(fontSizes).map(({ value }) => value)}
+  fontWeight={fontWeights.normal.value}
+  sampleText="달레 UI 디자인 System"
+  fontFamily={fonts.sans.value}
+/>
+
+## 글꼴 굵기
+
+{Object.entries(fontWeights).map(([name, {value}]) => (
+
+<>
+  <h3>
+    {name}({value})
+  </h3>
+  <Typeset
+    fontSizes={[fontSizes.md.value]}
+    fontWeight={value}
+    sampleText="달레 UI 디자인 System"
+    fontFamily={fonts.sans.value}
+  />
+</>
+))}

src/tokens/typography.ts

@@ -0,0 +1,130 @@
+import type { TextStyles, Tokens } from "@pandacss/types";
+
+export const textStyles: TextStyles = {
+  xs: {
+    value: {
+      fontSize: "0.75rem",
+      lineHeight: "1rem",
+    },
+  },
+  sm: {
+    value: {
+      fontSize: "0.875rem",
+      lineHeight: "1.25rem",
+    },
+  },
+  md: {
+    value: {
+      fontSize: "1rem",
+      lineHeight: "1.5rem",
+    },
+  },
+  lg: {
+    value: {
+      fontSize: "1.125rem",
+      lineHeight: "1.75rem",
+    },
+  },
+  xl: {
+    value: {
+      fontSize: "1.25rem",
+      lineHeight: "1.75rem",
+    },
+  },
+  "2xl": {
+    value: {
+      fontSize: "1.5rem",
+      lineHeight: "2rem",
+    },
+  },
+  "3xl": {
+    value: {
+      fontSize: "1.875rem",
+      lineHeight: "2.25rem",
+    },
+  },
+  "4xl": {
+    value: {
+      fontSize: "2.25rem",
+      lineHeight: "2.5rem",
+    },
+  },
+  "5xl": {
+    value: {
+      fontSize: "3rem",
+      lineHeight: "1",
+    },
+  },
+  "6xl": {
+    value: {
+      fontSize: "3.75rem",
+      lineHeight: "1",
+    },
+  },
+  "7xl": {
+    value: {
+      fontSize: "4.5rem",
+      lineHeight: "1",
+    },
+  },
+  "8xl": {
+    value: {
+      fontSize: "6rem",
+      lineHeight: "1",
+    },
+  },
+  "9xl": {
+    value: {
+      fontSize: "8rem",
+      lineHeight: "1",
+    },
+  },
+};
+
+export const fonts: Tokens["fonts"] = {
+  sans: { value: '"Spoqa Han Sans Neo", "Noto Sans KR", sans-serif' },
+  // TODO customize serif and mono font styles when needed
+};
+
+export const fontWeights: Tokens["fontWeights"] = {
+  thin: { value: "100" },
+  light: { value: "300" },
+  normal: { value: "400" },
+  medium: { value: "500" },
+  bold: { value: "700" },
+};
+
+export const fontSizes: Tokens["fontSizes"] = {
+  "2xs": { value: "0.5rem" },
+  xs: { value: "0.75rem" },
+  sm: { value: "0.875rem" },
+  md: { value: "1rem" },
+  lg: { value: "1.125rem" },
+  xl: { value: "1.25rem" },
+  "2xl": { value: "1.5rem" },
+  "3xl": { value: "1.875rem" },
+  "4xl": { value: "2.25rem" },
+  "5xl": { value: "3rem" },
+  "6xl": { value: "3.75rem" },
+  "7xl": { value: "4.5rem" },
+  "8xl": { value: "6rem" },
+  "9xl": { value: "8rem" },
+};
+
+export const letterSpacings: Tokens["letterSpacings"] = {
+  tighter: { value: "-0.05em" },
+  tight: { value: "-0.025em" },
+  normal: { value: "0em" },
+  wide: { value: "0.025em" },
+  wider: { value: "0.05em" },
+  widest: { value: "0.1em" },
+};
+
+export const lineHeights: Tokens["lineHeights"] = {
+  none: { value: "1" },
+  tight: { value: "1.25" },
+  snug: { value: "1.375" },
+  normal: { value: "1.5" },
+  relaxed: { value: "1.625" },
+  loose: { value: "2" },
+};