feat: add color tokens

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

@@ -3,6 +3,9 @@ import { defineGlobalStyles } from "@pandacss/dev";
 export const globalCss = defineGlobalStyles({
   ":root": {
     "--global-font-body": "var(--fonts-sans)",
+    "&.dark": {
+      backgroundColor: "black",
+    },
   },
   h1: {
     fontSize: "var(--font-sizes-4xl)", // 2.25rem

src/tokens/colors.mdx

@@ -0,0 +1,204 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
+import { colors, semanticColors } from "./colors.ts";
+
+# Colors
+
+## 시멘틱 색상
+
+달레 UI의 개성을 나타내는 색상입니다
+
+<ColorPalette>
+  <ColorItem
+    title="주요색"
+    subtitle="semanticColors.primary"
+    colors={{
+      primary: semanticColors.primary.value,
+    }}
+  />
+  <ColorItem
+    title="보조색"
+    subtitle="semanticColors.secondary"
+    colors={{
+      secondary: semanticColors.secondary.value,
+    }}
+  />
+  <ColorItem
+    title="배경색"
+    subtitle="semanticColors.bg"
+    colors={Object.fromEntries(
+      Object.entries(semanticColors.bg).map(([name, { value }]) => [
+        name,
+        value,
+      ])
+    )}
+  />
+  <ColorItem
+    title="글자색"
+    subtitle="semanticColors.text"
+    colors={{
+      light: semanticColors.text.value.base,
+      dark: semanticColors.text.value._dark,
+    }}
+  />
+</ColorPalette>
+
+## 색상 팔레트
+
+TailwindCSS의 색상 팔레트를 그대로 차용합니다.
+
+<ColorPalette>
+  <ColorItem
+    title="로즈"
+    subtitle="colors.rose"
+    colors={Object.fromEntries(
+      Object.entries(colors.rose).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="핑크"
+    subtitle="colors.pink"
+    colors={Object.fromEntries(
+      Object.entries(colors.pink).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="푸크시아"
+    subtitle="colors.fuchsia"
+    colors={Object.fromEntries(
+      Object.entries(colors.fuchsia).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="퍼플"
+    subtitle="colors.purple"
+    colors={Object.fromEntries(
+      Object.entries(colors.purple).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="보라"
+    subtitle="colors.violet"
+    colors={Object.fromEntries(
+      Object.entries(colors.violet).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="인디고"
+    subtitle="colors.indigo"
+    colors={Object.fromEntries(
+      Object.entries(colors.indigo).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="블루"
+    subtitle="colors.blue"
+    colors={Object.fromEntries(
+      Object.entries(colors.blue).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="스카이"
+    subtitle="colors.sky"
+    colors={Object.fromEntries(
+      Object.entries(colors.sky).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="싸이언"
+    subtitle="colors.cyan"
+    colors={Object.fromEntries(
+      Object.entries(colors.cyan).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="틸"
+    subtitle="colors.teal"
+    colors={Object.fromEntries(
+      Object.entries(colors.teal).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="에머랄드"
+    subtitle="colors.emerald"
+    colors={Object.fromEntries(
+      Object.entries(colors.emerald).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="그린"
+    subtitle="colors.green"
+    colors={Object.fromEntries(
+      Object.entries(colors.green).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="라임"
+    subtitle="colors.lime"
+    colors={Object.fromEntries(
+      Object.entries(colors.lime).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="옐로우"
+    subtitle="colors.yellow"
+    colors={Object.fromEntries(
+      Object.entries(colors.yellow).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="앰버"
+    subtitle="colors.amber"
+    colors={Object.fromEntries(
+      Object.entries(colors.amber).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="오렌지"
+    subtitle="colors.orange"
+    colors={Object.fromEntries(
+      Object.entries(colors.orange).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="레드"
+    subtitle="colors.red"
+    colors={Object.fromEntries(
+      Object.entries(colors.red).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="네츄럴"
+    subtitle="colors.neutral"
+    colors={Object.fromEntries(
+      Object.entries(colors.neutral).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="스톤"
+    subtitle="colors.stone"
+    colors={Object.fromEntries(
+      Object.entries(colors.stone).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="징크"
+    subtitle="colors.zinc"
+    colors={Object.fromEntries(
+      Object.entries(colors.zinc).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="그레이"
+    subtitle="colors.gray"
+    colors={Object.fromEntries(
+      Object.entries(colors.gray).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="슬레이트"
+    subtitle="colors.slate"
+    colors={Object.fromEntries(
+      Object.entries(colors.slate).map(([name, { value }]) => [name, value])
+    )}
+  />
+</ColorPalette>