Skip to content

Commit 010e541

Browse files
DaleSeoDaleSeo
authored
Merge pull request #28 from DaleStudy/26-color-palette
Color Tokens
2 parents 8d37e8a + ab18285 commit 010e541

File tree

8 files changed

+407
-4
lines changed

8 files changed

+407
-4
lines changed

โ€Ž.storybook/main.tsโ€Ž

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ const config: StorybookConfig = {
77
"@storybook/addon-essentials",
88
"@chromatic-com/storybook",
99
"@storybook/addon-interactions",
10-
"@storybook/addon-a11y"
10+
"@storybook/addon-a11y",
11+
"@storybook/addon-themes",
1112
],
1213
framework: {
1314
name: "@storybook/react-vite",

โ€Ž.storybook/preview.tsโ€Ž

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import "../src/index.css";
2-
3-
import type { Preview } from "@storybook/react";
2+
import { withThemeByClassName } from "@storybook/addon-themes";
3+
import type { Preview, ReactRenderer } from "@storybook/react";
44

55
const preview: Preview = {
66
parameters: {
@@ -14,6 +14,15 @@ const preview: Preview = {
1414
toc: true,
1515
},
1616
},
17+
decorators: [
18+
withThemeByClassName<ReactRenderer>({
19+
themes: {
20+
light: "",
21+
dark: "dark",
22+
},
23+
defaultTheme: "light",
24+
}),
25+
],
1726
tags: ["autodocs"],
1827
};
1928

โ€Žbun.lockbโ€Ž

458 Bytes
Binary file not shown.

โ€Žpackage.jsonโ€Ž

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"@storybook/addon-essentials": "^8.4.7",
3030
"@storybook/addon-interactions": "^8.4.7",
3131
"@storybook/addon-links": "^8.4.7",
32+
"@storybook/addon-themes": "^8.4.7",
3233
"@storybook/blocks": "^8.4.7",
3334
"@storybook/react": "^8.4.7",
3435
"@storybook/react-vite": "^8.4.7",

โ€Ž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: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import { defineGlobalStyles } from "@pandacss/dev";
22

33
export const globalCss = defineGlobalStyles({
44
":root": {
5-
"--global-font-body": "var (--fonts-sans)",
5+
"--global-font-body": "var(--fonts-sans)",
6+
backgroundColor: "var(--colors-base)",
67
},
78
h1: {
89
fontSize: "var(--font-sizes-4xl)", // 2.25rem

โ€Žsrc/tokens/colors.mdxโ€Ž

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
2+
import { colors, semanticColors } from "./colors.ts";
3+
4+
# Colors
5+
6+
๋‹ฌ๋ ˆ UI์˜ ๊ทผ๊ฐ„์ด ๋˜๋Š” ์ƒ‰์ƒ ํŒ”๋ ˆํŠธ์ž…๋‹ˆ๋‹ค.
7+
8+
<ColorPalette>
9+
<ColorItem
10+
title="์ดˆ๋ก"
11+
subtitle="colors.teal"
12+
colors={Object.fromEntries(
13+
Object.entries(colors.teal).map(([name, { value }]) => [name, value])
14+
)}
15+
/>
16+
<ColorItem
17+
title="์ดˆ๋ก (dark)"
18+
subtitle="colors.tealDark"
19+
colors={Object.fromEntries(
20+
Object.entries(colors.tealDark).map(([name, { value }]) => [name, value])
21+
)}
22+
/>
23+
<ColorItem
24+
title="๋ณด๋ผ"
25+
subtitle="colors.violet"
26+
colors={Object.fromEntries(
27+
Object.entries(colors.violet).map(([name, { value }]) => [name, value])
28+
)}
29+
/>
30+
<ColorItem
31+
title="๋ณด๋ผ (dark)"
32+
subtitle="colors.violetDark"
33+
colors={Object.fromEntries(
34+
Object.entries(colors.violetDark).map(([name, { value }]) => [
35+
name,
36+
value,
37+
])
38+
)}
39+
/>
40+
<ColorItem
41+
title="๋นจ๊ฐ•"
42+
subtitle="colors.red"
43+
colors={Object.fromEntries(
44+
Object.entries(colors.red).map(([name, { value }]) => [name, value])
45+
)}
46+
/>
47+
<ColorItem
48+
title="๋นจ๊ฐ• (dark)"
49+
subtitle="colors.redDark"
50+
colors={Object.fromEntries(
51+
Object.entries(colors.redDark).map(([name, { value }]) => [name, value])
52+
)}
53+
/>
54+
<ColorItem
55+
title="๋…ธ๋ž‘"
56+
subtitle="colors.yellow"
57+
colors={Object.fromEntries(
58+
Object.entries(colors.yellow).map(([name, { value }]) => [name, value])
59+
)}
60+
/>
61+
<ColorItem
62+
title="๋…ธ๋ž‘ (dark)"
63+
subtitle="colors.yellowDark"
64+
colors={Object.fromEntries(
65+
Object.entries(colors.yellowDark).map(([name, { value }]) => [
66+
name,
67+
value,
68+
])
69+
)}
70+
/>
71+
<ColorItem
72+
title="ํšŒ์ƒ‰"
73+
subtitle="colors.gray"
74+
colors={Object.fromEntries(
75+
Object.entries(colors.gray).map(([name, { value }]) => [name, value])
76+
)}
77+
/>
78+
<ColorItem
79+
title="ํšŒ์ƒ‰ (dark)"
80+
subtitle="colors.grayDark"
81+
colors={Object.fromEntries(
82+
Object.entries(colors.grayDark).map(([name, { value }]) => [name, value])
83+
)}
84+
/>
85+
</ColorPalette>
86+
87+
์šฉ๋„์— ๋”ฐ๋ผ์„œ ๊ฐ ์ƒ‰์ƒ์€ 12๊ฐ€์ง€ ์Šค์ผ€์ผ๋กœ ๋ถ„๋ฆฌ๋ฉ๋‹ˆ๋‹ค.
88+
89+
- Scale 1: ํŽ˜์ด์ง€ ๋ฐฐ๊ฒฝ
90+
- Scale 2: ์˜ˆ๋น„
91+
- Scale 3: ์ปดํฌ๋„ŒํŠธ ๋ฐฐ๊ฒฝ
92+
- Scale 4: ์ปดํฌ๋„ŒํŠธ ๋ฐฐ๊ฒฝ (hover)
93+
- Scale 5: ์ปดํฌ๋„ŒํŠธ ๋ฐฐ๊ฒฝ (active)
94+
- Scale 6: ์˜ˆ๋น„
95+
- Scale 7: ๊ฒฝ๊ณ„
96+
- Scale 8: ๊ฒฝ๊ณ„ (hover)
97+
- Scale 9: ์†”๋ฆฌ๋“œ ๋ฐฐ๊ฒฝ
98+
- Scale 10: ์†”๋ฆฌ๋“œ ๋ฐฐ๊ฒฝ (hover)
99+
- Scale 11: ๊ธ€์ž (low contrast)
100+
- Scale 12: ๊ธ€์ž (high contrast)

0 commit comments

Comments
ย (0)