Skip to content

Commit f81defa

Browse files
DaleSeoDaleSeo
committed
feat: add color tokens
1 parent 8d08e93 commit f81defa

File tree

4 files changed

+525
-0
lines changed

4 files changed

+525
-0
lines changed

‎panda.config.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { defineConfig } from "@pandacss/dev";
22
import { globalCss } from "./src/styles/globalCss";
3+
import { colors, semanticColors } from "./src/tokens/colors";
34
import {
45
textStyles,
56
fonts,
@@ -30,12 +31,16 @@ export default defineConfig({
3031
extend: {
3132
textStyles,
3233
tokens: {
34+
colors,
3335
fonts,
3436
fontWeights,
3537
fontSizes,
3638
letterSpacings,
3739
lineHeights,
3840
},
41+
semanticTokens: {
42+
colors: semanticColors,
43+
},
3944
},
4045
},
4146

‎src/styles/globalCss.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ import { defineGlobalStyles } from "@pandacss/dev";
33
export const globalCss = defineGlobalStyles({
44
":root": {
55
"--global-font-body": "var(--fonts-sans)",
6+
"&.dark": {
7+
backgroundColor: "black",
8+
},
69
},
710
h1: {
811
fontSize: "var(--font-sizes-4xl)", // 2.25rem

‎src/tokens/colors.mdx

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
2+
import { colors, semanticColors } from "./colors.ts";
3+
4+
# Colors
5+
6+
## 시멘틱 색상
7+
8+
달레 UI의 개성을 나타내는 색상입니다
9+
10+
<ColorPalette>
11+
<ColorItem
12+
title="주요색"
13+
subtitle="semanticColors.primary"
14+
colors={{
15+
primary: semanticColors.primary.value,
16+
}}
17+
/>
18+
<ColorItem
19+
title="보조색"
20+
subtitle="semanticColors.secondary"
21+
colors={{
22+
secondary: semanticColors.secondary.value,
23+
}}
24+
/>
25+
<ColorItem
26+
title="배경색"
27+
subtitle="semanticColors.bg"
28+
colors={Object.fromEntries(
29+
Object.entries(semanticColors.bg).map(([name, { value }]) => [
30+
name,
31+
value,
32+
])
33+
)}
34+
/>
35+
<ColorItem
36+
title="글자색"
37+
subtitle="semanticColors.text"
38+
colors={{
39+
light: semanticColors.text.value.base,
40+
dark: semanticColors.text.value._dark,
41+
}}
42+
/>
43+
</ColorPalette>
44+
45+
## 색상 팔레트
46+
47+
TailwindCSS의 색상 팔레트를 그대로 차용합니다.
48+
49+
<ColorPalette>
50+
<ColorItem
51+
title="로즈"
52+
subtitle="colors.rose"
53+
colors={Object.fromEntries(
54+
Object.entries(colors.rose).map(([name, { value }]) => [name, value])
55+
)}
56+
/>
57+
<ColorItem
58+
title="핑크"
59+
subtitle="colors.pink"
60+
colors={Object.fromEntries(
61+
Object.entries(colors.pink).map(([name, { value }]) => [name, value])
62+
)}
63+
/>
64+
<ColorItem
65+
title="푸크시아"
66+
subtitle="colors.fuchsia"
67+
colors={Object.fromEntries(
68+
Object.entries(colors.fuchsia).map(([name, { value }]) => [name, value])
69+
)}
70+
/>
71+
<ColorItem
72+
title="퍼플"
73+
subtitle="colors.purple"
74+
colors={Object.fromEntries(
75+
Object.entries(colors.purple).map(([name, { value }]) => [name, value])
76+
)}
77+
/>
78+
<ColorItem
79+
title="보라"
80+
subtitle="colors.violet"
81+
colors={Object.fromEntries(
82+
Object.entries(colors.violet).map(([name, { value }]) => [name, value])
83+
)}
84+
/>
85+
<ColorItem
86+
title="인디고"
87+
subtitle="colors.indigo"
88+
colors={Object.fromEntries(
89+
Object.entries(colors.indigo).map(([name, { value }]) => [name, value])
90+
)}
91+
/>
92+
<ColorItem
93+
title="블루"
94+
subtitle="colors.blue"
95+
colors={Object.fromEntries(
96+
Object.entries(colors.blue).map(([name, { value }]) => [name, value])
97+
)}
98+
/>
99+
<ColorItem
100+
title="스카이"
101+
subtitle="colors.sky"
102+
colors={Object.fromEntries(
103+
Object.entries(colors.sky).map(([name, { value }]) => [name, value])
104+
)}
105+
/>
106+
<ColorItem
107+
title="싸이언"
108+
subtitle="colors.cyan"
109+
colors={Object.fromEntries(
110+
Object.entries(colors.cyan).map(([name, { value }]) => [name, value])
111+
)}
112+
/>
113+
<ColorItem
114+
title="틸"
115+
subtitle="colors.teal"
116+
colors={Object.fromEntries(
117+
Object.entries(colors.teal).map(([name, { value }]) => [name, value])
118+
)}
119+
/>
120+
<ColorItem
121+
title="에머랄드"
122+
subtitle="colors.emerald"
123+
colors={Object.fromEntries(
124+
Object.entries(colors.emerald).map(([name, { value }]) => [name, value])
125+
)}
126+
/>
127+
<ColorItem
128+
title="그린"
129+
subtitle="colors.green"
130+
colors={Object.fromEntries(
131+
Object.entries(colors.green).map(([name, { value }]) => [name, value])
132+
)}
133+
/>
134+
<ColorItem
135+
title="라임"
136+
subtitle="colors.lime"
137+
colors={Object.fromEntries(
138+
Object.entries(colors.lime).map(([name, { value }]) => [name, value])
139+
)}
140+
/>
141+
<ColorItem
142+
title="옐로우"
143+
subtitle="colors.yellow"
144+
colors={Object.fromEntries(
145+
Object.entries(colors.yellow).map(([name, { value }]) => [name, value])
146+
)}
147+
/>
148+
<ColorItem
149+
title="앰버"
150+
subtitle="colors.amber"
151+
colors={Object.fromEntries(
152+
Object.entries(colors.amber).map(([name, { value }]) => [name, value])
153+
)}
154+
/>
155+
<ColorItem
156+
title="오렌지"
157+
subtitle="colors.orange"
158+
colors={Object.fromEntries(
159+
Object.entries(colors.orange).map(([name, { value }]) => [name, value])
160+
)}
161+
/>
162+
<ColorItem
163+
title="레드"
164+
subtitle="colors.red"
165+
colors={Object.fromEntries(
166+
Object.entries(colors.red).map(([name, { value }]) => [name, value])
167+
)}
168+
/>
169+
<ColorItem
170+
title="네츄럴"
171+
subtitle="colors.neutral"
172+
colors={Object.fromEntries(
173+
Object.entries(colors.neutral).map(([name, { value }]) => [name, value])
174+
)}
175+
/>
176+
<ColorItem
177+
title="스톤"
178+
subtitle="colors.stone"
179+
colors={Object.fromEntries(
180+
Object.entries(colors.stone).map(([name, { value }]) => [name, value])
181+
)}
182+
/>
183+
<ColorItem
184+
title="징크"
185+
subtitle="colors.zinc"
186+
colors={Object.fromEntries(
187+
Object.entries(colors.zinc).map(([name, { value }]) => [name, value])
188+
)}
189+
/>
190+
<ColorItem
191+
title="그레이"
192+
subtitle="colors.gray"
193+
colors={Object.fromEntries(
194+
Object.entries(colors.gray).map(([name, { value }]) => [name, value])
195+
)}
196+
/>
197+
<ColorItem
198+
title="슬레이트"
199+
subtitle="colors.slate"
200+
colors={Object.fromEntries(
201+
Object.entries(colors.slate).map(([name, { value }]) => [name, value])
202+
)}
203+
/>
204+
</ColorPalette>

0 commit comments

Comments
 (0)