From f81defae75123c37f09414996bcc1cb814ac2b85 Mon Sep 17 00:00:00 2001
From: Dale Seo <dale.seo@gmail.com>
Date: Mon, 30 Dec 2024 21:09:34 -0500
Subject: [PATCH] feat: add color tokens

---
 panda.config.ts         |   5 +
 src/styles/globalCss.ts |   3 +
 src/tokens/colors.mdx   | 204 ++++++++++++++++++++++++++
 src/tokens/colors.ts    | 313 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 525 insertions(+)
 create mode 100644 src/tokens/colors.mdx
 create mode 100644 src/tokens/colors.ts

diff --git a/panda.config.ts b/panda.config.ts
index 482c458..e62fdef 100644
--- a/panda.config.ts
+++ b/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,
+      },
     },
   },
 
diff --git a/src/styles/globalCss.ts b/src/styles/globalCss.ts
index 03aeeaf..4579d78 100644
--- a/src/styles/globalCss.ts
+++ b/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
diff --git a/src/tokens/colors.mdx b/src/tokens/colors.mdx
new file mode 100644
index 0000000..b2437b4
--- /dev/null
+++ b/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>
diff --git a/src/tokens/colors.ts b/src/tokens/colors.ts
new file mode 100644
index 0000000..5645e57
--- /dev/null
+++ b/src/tokens/colors.ts
@@ -0,0 +1,313 @@
+import type { Tokens, SemanticTokens } from "@pandacss/types";
+
+export const semanticColors: SemanticTokens["colors"] = {
+  primary: {
+    value: "#846DE9",
+  },
+  secondary: {
+    value: "#24EACA",
+  },
+  text: {
+    value: { base: "#160B46", _dark: "#FDFDFF" },
+  },
+  bg: {
+    100: { value: "#FDFDFF" },
+    200: { value: "#FBFAFF" },
+    300: { value: "#EEE8FE" },
+    400: { value: "#5333E1" },
+    500: { value: "#160B46" },
+  },
+};
+
+export const colors: Tokens["colors"] = {
+  current: { value: "currentColor" },
+  black: { value: "#000" },
+  white: { value: "#fff" },
+  transparent: { value: "rgb(0 0 0 / 0)" },
+  rose: {
+    50: { value: "#fff1f2" },
+    100: { value: "#ffe4e6" },
+    200: { value: "#fecdd3" },
+    300: { value: "#fda4af" },
+    400: { value: "#fb7185" },
+    500: { value: "#f43f5e" },
+    600: { value: "#e11d48" },
+    700: { value: "#be123c" },
+    800: { value: "#9f1239" },
+    900: { value: "#881337" },
+    950: { value: "#4c0519" },
+  },
+  pink: {
+    50: { value: "#fdf2f8" },
+    100: { value: "#fce7f3" },
+    200: { value: "#fbcfe8" },
+    300: { value: "#f9a8d4" },
+    400: { value: "#f472b6" },
+    500: { value: "#ec4899" },
+    600: { value: "#db2777" },
+    700: { value: "#be185d" },
+    800: { value: "#9d174d" },
+    900: { value: "#831843" },
+    950: { value: "#500724" },
+  },
+  fuchsia: {
+    50: { value: "#fdf4ff" },
+    100: { value: "#fae8ff" },
+    200: { value: "#f5d0fe" },
+    300: { value: "#f0abfc" },
+    400: { value: "#e879f9" },
+    500: { value: "#d946ef" },
+    600: { value: "#c026d3" },
+    700: { value: "#a21caf" },
+    800: { value: "#86198f" },
+    900: { value: "#701a75" },
+    950: { value: "#4a044e" },
+  },
+  purple: {
+    50: { value: "#faf5ff" },
+    100: { value: "#f3e8ff" },
+    200: { value: "#e9d5ff" },
+    300: { value: "#d8b4fe" },
+    400: { value: "#c084fc" },
+    500: { value: "#a855f7" },
+    600: { value: "#9333ea" },
+    700: { value: "#7e22ce" },
+    800: { value: "#6b21a8" },
+    900: { value: "#581c87" },
+    950: { value: "#3b0764" },
+  },
+  violet: {
+    50: { value: "#f5f3ff" },
+    100: { value: "#ede9fe" },
+    200: { value: "#ddd6fe" },
+    300: { value: "#c4b5fd" },
+    400: { value: "#a78bfa" },
+    500: { value: "#8b5cf6" },
+    600: { value: "#7c3aed" },
+    700: { value: "#6d28d9" },
+    800: { value: "#5b21b6" },
+    900: { value: "#4c1d95" },
+    950: { value: "#2e1065" },
+  },
+  indigo: {
+    50: { value: "#eef2ff" },
+    100: { value: "#e0e7ff" },
+    200: { value: "#c7d2fe" },
+    300: { value: "#a5b4fc" },
+    400: { value: "#818cf8" },
+    500: { value: "#6366f1" },
+    600: { value: "#4f46e5" },
+    700: { value: "#4338ca" },
+    800: { value: "#3730a3" },
+    900: { value: "#312e81" },
+    950: { value: "#1e1b4b" },
+  },
+  blue: {
+    50: { value: "#eff6ff" },
+    100: { value: "#dbeafe" },
+    200: { value: "#bfdbfe" },
+    300: { value: "#93c5fd" },
+    400: { value: "#60a5fa" },
+    500: { value: "#3b82f6" },
+    600: { value: "#2563eb" },
+    700: { value: "#1d4ed8" },
+    800: { value: "#1e40af" },
+    900: { value: "#1e3a8a" },
+    950: { value: "#172554" },
+  },
+  sky: {
+    50: { value: "#f0f9ff" },
+    100: { value: "#e0f2fe" },
+    200: { value: "#bae6fd" },
+    300: { value: "#7dd3fc" },
+    400: { value: "#38bdf8" },
+    500: { value: "#0ea5e9" },
+    600: { value: "#0284c7" },
+    700: { value: "#0369a1" },
+    800: { value: "#075985" },
+    900: { value: "#0c4a6e" },
+    950: { value: "#082f49" },
+  },
+  cyan: {
+    50: { value: "#ecfeff" },
+    100: { value: "#cffafe" },
+    200: { value: "#a5f3fc" },
+    300: { value: "#67e8f9" },
+    400: { value: "#22d3ee" },
+    500: { value: "#06b6d4" },
+    600: { value: "#0891b2" },
+    700: { value: "#0e7490" },
+    800: { value: "#155e75" },
+    900: { value: "#164e63" },
+    950: { value: "#083344" },
+  },
+  teal: {
+    50: { value: "#f0fdfa" },
+    100: { value: "#ccfbf1" },
+    200: { value: "#99f6e4" },
+    300: { value: "#5eead4" },
+    400: { value: "#2dd4bf" },
+    500: { value: "#14b8a6" },
+    600: { value: "#0d9488" },
+    700: { value: "#0f766e" },
+    800: { value: "#115e59" },
+    900: { value: "#134e4a" },
+    950: { value: "#042f2e" },
+  },
+  emerald: {
+    50: { value: "#ecfdf5" },
+    100: { value: "#d1fae5" },
+    200: { value: "#a7f3d0" },
+    300: { value: "#6ee7b7" },
+    400: { value: "#34d399" },
+    500: { value: "#10b981" },
+    600: { value: "#059669" },
+    700: { value: "#047857" },
+    800: { value: "#065f46" },
+    900: { value: "#064e3b" },
+    950: { value: "#022c22" },
+  },
+  green: {
+    50: { value: "#f0fdf4" },
+    100: { value: "#dcfce7" },
+    200: { value: "#bbf7d0" },
+    300: { value: "#86efac" },
+    400: { value: "#4ade80" },
+    500: { value: "#22c55e" },
+    600: { value: "#16a34a" },
+    700: { value: "#15803d" },
+    800: { value: "#166534" },
+    900: { value: "#14532d" },
+    950: { value: "#052e16" },
+  },
+  lime: {
+    50: { value: "#f7fee7" },
+    100: { value: "#ecfccb" },
+    200: { value: "#d9f99d" },
+    300: { value: "#bef264" },
+    400: { value: "#a3e635" },
+    500: { value: "#84cc16" },
+    600: { value: "#65a30d" },
+    700: { value: "#4d7c0f" },
+    800: { value: "#3f6212" },
+    900: { value: "#365314" },
+    950: { value: "#1a2e05" },
+  },
+  yellow: {
+    50: { value: "#fefce8" },
+    100: { value: "#fef9c3" },
+    200: { value: "#fef08a" },
+    300: { value: "#fde047" },
+    400: { value: "#facc15" },
+    500: { value: "#eab308" },
+    600: { value: "#ca8a04" },
+    700: { value: "#a16207" },
+    800: { value: "#854d0e" },
+    900: { value: "#713f12" },
+    950: { value: "#422006" },
+  },
+  amber: {
+    50: { value: "#fffbeb" },
+    100: { value: "#fef3c7" },
+    200: { value: "#fde68a" },
+    300: { value: "#fcd34d" },
+    400: { value: "#fbbf24" },
+    500: { value: "#f59e0b" },
+    600: { value: "#d97706" },
+    700: { value: "#b45309" },
+    800: { value: "#92400e" },
+    900: { value: "#78350f" },
+    950: { value: "#451a03" },
+  },
+  orange: {
+    50: { value: "#fff7ed" },
+    100: { value: "#ffedd5" },
+    200: { value: "#fed7aa" },
+    300: { value: "#fdba74" },
+    400: { value: "#fb923c" },
+    500: { value: "#f97316" },
+    600: { value: "#ea580c" },
+    700: { value: "#c2410c" },
+    800: { value: "#9a3412" },
+    900: { value: "#7c2d12" },
+    950: { value: "#431407" },
+  },
+  red: {
+    50: { value: "#fef2f2" },
+    100: { value: "#fee2e2" },
+    200: { value: "#fecaca" },
+    300: { value: "#fca5a5" },
+    400: { value: "#f87171" },
+    500: { value: "#ef4444" },
+    600: { value: "#dc2626" },
+    700: { value: "#b91c1c" },
+    800: { value: "#991b1b" },
+    900: { value: "#7f1d1d" },
+    950: { value: "#450a0a" },
+  },
+  neutral: {
+    50: { value: "#fafafa" },
+    100: { value: "#f5f5f5" },
+    200: { value: "#e5e5e5" },
+    300: { value: "#d4d4d4" },
+    400: { value: "#a3a3a3" },
+    500: { value: "#737373" },
+    600: { value: "#525252" },
+    700: { value: "#404040" },
+    800: { value: "#262626" },
+    900: { value: "#171717" },
+    950: { value: "#0a0a0a" },
+  },
+  stone: {
+    50: { value: "#fafaf9" },
+    100: { value: "#f5f5f4" },
+    200: { value: "#e7e5e4" },
+    300: { value: "#d6d3d1" },
+    400: { value: "#a8a29e" },
+    500: { value: "#78716c" },
+    600: { value: "#57534e" },
+    700: { value: "#44403c" },
+    800: { value: "#292524" },
+    900: { value: "#1c1917" },
+    950: { value: "#0c0a09" },
+  },
+  zinc: {
+    50: { value: "#fafafa" },
+    100: { value: "#f4f4f5" },
+    200: { value: "#e4e4e7" },
+    300: { value: "#d4d4d8" },
+    400: { value: "#a1a1aa" },
+    500: { value: "#71717a" },
+    600: { value: "#52525b" },
+    700: { value: "#3f3f46" },
+    800: { value: "#27272a" },
+    900: { value: "#18181b" },
+    950: { value: "#09090b" },
+  },
+  gray: {
+    50: { value: "#f9fafb" },
+    100: { value: "#f3f4f6" },
+    200: { value: "#e5e7eb" },
+    300: { value: "#d1d5db" },
+    400: { value: "#9ca3af" },
+    500: { value: "#6b7280" },
+    600: { value: "#4b5563" },
+    700: { value: "#374151" },
+    800: { value: "#1f2937" },
+    900: { value: "#111827" },
+    950: { value: "#030712" },
+  },
+  slate: {
+    50: { value: "#f8fafc" },
+    100: { value: "#f1f5f9" },
+    200: { value: "#e2e8f0" },
+    300: { value: "#cbd5e1" },
+    400: { value: "#94a3b8" },
+    500: { value: "#64748b" },
+    600: { value: "#475569" },
+    700: { value: "#334155" },
+    800: { value: "#1e293b" },
+    900: { value: "#0f172a" },
+    950: { value: "#020617" },
+  },
+};