Color Tokens

.storybook/main.ts

@@ -7,7 +7,8 @@ const config: StorybookConfig = {
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",
     "@storybook/addon-interactions",
-    "@storybook/addon-a11y"
+    "@storybook/addon-a11y",
+    "@storybook/addon-themes",
   ],
   framework: {
     name: "@storybook/react-vite",

.storybook/preview.ts

@@ -1,6 +1,6 @@
 import "../src/index.css";
-
-import type { Preview } from "@storybook/react";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import type { Preview, ReactRenderer } from "@storybook/react";
 
 const preview: Preview = {
   parameters: {
@@ -14,6 +14,15 @@ const preview: Preview = {
       toc: true,
     },
   },
+  decorators: [
+    withThemeByClassName<ReactRenderer>({
+      themes: {
+        light: "",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+    }),
+  ],
   tags: ["autodocs"],
 };
 

package.json

@@ -29,6 +29,7 @@
     "@storybook/addon-essentials": "^8.4.7",
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-themes": "^8.4.7",
     "@storybook/blocks": "^8.4.7",
     "@storybook/react": "^8.4.7",
     "@storybook/react-vite": "^8.4.7",

panda.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig } from "@pandacss/dev";
 import { globalCss } from "./src/styles/globalCss";
+import { colors, semanticColors } from "./src/tokens/colors";
 import {
   textStyles,
   fonts,
@@ -30,12 +31,16 @@ export default defineConfig({
     extend: {
       textStyles,
       tokens: {
+        colors,
         fonts,
         fontWeights,
         fontSizes,
         letterSpacings,
         lineHeights,
       },
+      semanticTokens: {
+        colors: semanticColors,
+      },
     },
   },
 

src/styles/globalCss.ts

@@ -2,7 +2,8 @@ import { defineGlobalStyles } from "@pandacss/dev";
 
 export const globalCss = defineGlobalStyles({
   ":root": {
-    "--global-font-body": "var  (--fonts-sans)",
+    "--global-font-body": "var(--fonts-sans)",
+    backgroundColor: "var(--colors-base)",
   },
   h1: {
     fontSize: "var(--font-sizes-4xl)", // 2.25rem

src/tokens/colors.mdx

@@ -0,0 +1,100 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
+import { colors, semanticColors } from "./colors.ts";
+
+# Colors
+
+달레 UI의 근간이 되는 색상 팔레트입니다.
+
+<ColorPalette>
+  <ColorItem
+    title="초록"
+    subtitle="colors.teal"
+    colors={Object.fromEntries(
+      Object.entries(colors.teal).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="초록 (dark)"
+    subtitle="colors.tealDark"
+    colors={Object.fromEntries(
+      Object.entries(colors.tealDark).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="보라"
+    subtitle="colors.violet"
+    colors={Object.fromEntries(
+      Object.entries(colors.violet).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="보라 (dark)"
+    subtitle="colors.violetDark"
+    colors={Object.fromEntries(
+      Object.entries(colors.violetDark).map(([name, { value }]) => [
+        name,
+        value,
+      ])
+    )}
+  />
+  <ColorItem
+    title="빨강"
+    subtitle="colors.red"
+    colors={Object.fromEntries(
+      Object.entries(colors.red).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="빨강 (dark)"
+    subtitle="colors.redDark"
+    colors={Object.fromEntries(
+      Object.entries(colors.redDark).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="노랑"
+    subtitle="colors.yellow"
+    colors={Object.fromEntries(
+      Object.entries(colors.yellow).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="노랑 (dark)"
+    subtitle="colors.yellowDark"
+    colors={Object.fromEntries(
+      Object.entries(colors.yellowDark).map(([name, { value }]) => [
+        name,
+        value,
+      ])
+    )}
+  />
+  <ColorItem
+    title="회색"
+    subtitle="colors.gray"
+    colors={Object.fromEntries(
+      Object.entries(colors.gray).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="회색 (dark)"
+    subtitle="colors.grayDark"
+    colors={Object.fromEntries(
+      Object.entries(colors.grayDark).map(([name, { value }]) => [name, value])
+    )}
+  />
+</ColorPalette>
+
+용도에 따라서 각 색상은 12가지 스케일로 분리됩니다.
+
+- Scale 1: 페이지 배경
+- Scale 2: 예비
+- Scale 3: 컴포넌트 배경
+- Scale 4: 컴포넌트 배경 (hover)
+- Scale 5: 컴포넌트 배경 (active)
+- Scale 6: 예비
+- Scale 7: 경계
+- Scale 8: 경계 (hover)
+- Scale 9: 솔리드 배경
+- Scale 10: 솔리드 배경 (hover)
+- Scale 11: 글자 (low contrast)
+- Scale 12: 글자 (high contrast)