Skip to content

Commit feb5d87

Browse files
hyoseong1994hyoseong1994
authored
Merge pull request #302 from DaleStudy/285-spacings-token
285 spacings ํ† ํฐ figma ์— ๋”ฐ๋ผ ๋ณ€๊ฒฝ
2 parents 8833937 + 358b2f3 commit feb5d87

File tree

14 files changed

+82
-127
lines changed

14 files changed

+82
-127
lines changed

โ€Žpanda.config.tsโ€Ž

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { defineConfig } from "@pandacss/dev";
22
import { globalCss } from "./src/styles/globalCss";
33
import { colors, semanticColors } from "./src/tokens/colors";
44
import { radii } from "./src/tokens/radii";
5-
import { spacing, semanticSpacing } from "./src/tokens/spacing";
5+
import { spacing } from "./src/tokens/spacing";
66
import {
77
textStyles,
88
fonts,
@@ -56,7 +56,6 @@ export default defineConfig({
5656
},
5757
semanticTokens: {
5858
colors: semanticColors,
59-
spacing: semanticSpacing,
6059
},
6160
},
6261
},

โ€Žsrc/components/Button/Button.stories.tsxโ€Ž

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const Basic: StoryObj<typeof Button> = {};
2323
export const Variants: StoryObj<typeof Button> = {
2424
render: (args) => {
2525
return (
26-
<div className={vstack({ gap: "gap.sm" })}>
26+
<div className={vstack({ gap: "16" })}>
2727
<Button {...args} variant="solid">
2828
์†”๋ฆฌ๋“œ ๋ฒ„ํŠผ
2929
</Button>
@@ -46,7 +46,7 @@ export const Variants: StoryObj<typeof Button> = {
4646
export const Tones: StoryObj<typeof Button> = {
4747
render: (args) => {
4848
return (
49-
<div className={vstack({ gap: "gap.sm" })}>
49+
<div className={vstack({ gap: "16" })}>
5050
<Button {...args} tone="neutral">
5151
์ค‘๋ฆฝ ์ƒ‰์กฐ
5252
</Button>
@@ -75,7 +75,7 @@ export const Tones: StoryObj<typeof Button> = {
7575
export const Sizes: StoryObj<typeof Button> = {
7676
render: (args) => {
7777
return (
78-
<div className={vstack({ gap: "gap.sm" })}>
78+
<div className={vstack({ gap: "16" })}>
7979
<Button {...args} size="sm">
8080
์ž‘์€ ๋ฒ„ํŠผ
8181
</Button>
@@ -101,7 +101,7 @@ export const Sizes: StoryObj<typeof Button> = {
101101
export const Disabled: StoryObj<typeof Button> = {
102102
render: (args) => {
103103
return (
104-
<div className={vstack({ gap: "gap.sm" })}>
104+
<div className={vstack({ gap: "16" })}>
105105
<Button {...args} disabled>
106106
๋น„ํ™œ์„ฑํ™” ๋ฒ„ํŠผ
107107
</Button>

โ€Žsrc/components/Button/Button.tsxโ€Ž

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -77,18 +77,18 @@ const styles = cva({
7777
variants: {
7878
size: {
7979
sm: {
80-
px: "px.sm",
81-
py: "py.sm",
80+
px: "24",
81+
py: "8",
8282
fontSize: "sm",
8383
},
8484
md: {
85-
px: "px.md",
86-
py: "py.md",
85+
px: "32",
86+
py: "12",
8787
fontSize: "md",
8888
},
8989
lg: {
90-
px: "px.lg",
91-
py: "py.lg",
90+
px: "40",
91+
py: "16",
9292
fontSize: "lg",
9393
},
9494
},

โ€Žsrc/components/Checkbox/Checkbox.stories.tsxโ€Ž

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const Basic: StoryObj<typeof Checkbox> = {};
1818
export const Tones: StoryObj<typeof Checkbox> = {
1919
render: (args) => {
2020
return (
21-
<div className={vstack({ gap: "gap.sm" })}>
21+
<div className={vstack({ gap: "16" })}>
2222
<Checkbox {...args} id="neutral" label="์ค‘๋ฆฝ ์ƒ‰์กฐ" tone="neutral" />
2323
<Checkbox {...args} id="accent" label="๊ฐ•์กฐ ์ƒ‰์กฐ" tone="accent" />
2424
<Checkbox {...args} id="danger" label="์œ„ํ—˜ ์ƒ‰์กฐ" tone="danger" />
@@ -39,7 +39,7 @@ export const Tones: StoryObj<typeof Checkbox> = {
3939
export const States: StoryObj<typeof Checkbox> = {
4040
render: (args) => {
4141
return (
42-
<div className={vstack({ gap: "gap.sm" })}>
42+
<div className={vstack({ gap: "16" })}>
4343
<Checkbox {...args} id="checked" label="์ฒดํฌ๋œ ์ƒํƒœ" checked={true} />
4444
<Checkbox
4545
{...args}
@@ -63,7 +63,7 @@ export const States: StoryObj<typeof Checkbox> = {
6363
export const Disabled: StoryObj<typeof Checkbox> = {
6464
render: (args) => {
6565
return (
66-
<div className={vstack({ gap: "gap.sm" })}>
66+
<div className={vstack({ gap: "16" })}>
6767
<Checkbox
6868
{...args}
6969
id="disabled-checked"
@@ -94,7 +94,7 @@ export const Disabled: StoryObj<typeof Checkbox> = {
9494
export const Required: StoryObj<typeof Checkbox> = {
9595
render: (args) => {
9696
return (
97-
<div className={vstack({ gap: "gap.sm" })}>
97+
<div className={vstack({ gap: "16" })}>
9898
<Checkbox {...args} id="required" label="ํ•„์ˆ˜ ์ฒดํฌ๋ฐ•์Šค" required />
9999
<Checkbox {...args} id="optional" label="์„ ํƒ ์ฒดํฌ๋ฐ•์Šค" />
100100
</div>
@@ -113,7 +113,7 @@ export const Required: StoryObj<typeof Checkbox> = {
113113
export const WithValue: StoryObj<typeof Checkbox> = {
114114
render: (args) => {
115115
return (
116-
<div className={vstack({ gap: "gap.sm" })}>
116+
<div className={vstack({ gap: "16" })}>
117117
<Checkbox
118118
{...args}
119119
id="value-example"

โ€Žsrc/components/Checkbox/Checkbox.tsxโ€Ž

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const Checkbox = ({
4646
className={css({
4747
display: "flex",
4848
alignItems: "center",
49-
gap: "0.5rem",
49+
gap: "8",
5050
cursor: "pointer",
5151
color: "text",
5252
})}

โ€Žsrc/components/Heading/Heading.stories.tsxโ€Ž

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const Basic: StoryObj<typeof Heading> = {};
1818
export const Levels: StoryObj<typeof Heading> = {
1919
render: (args) => {
2020
return (
21-
<div className={vstack({ gap: "gap.md" })}>
21+
<div className={vstack({ gap: "24" })}>
2222
<Heading {...args} level={1}>
2323
1 ๋‹จ๊ณ„
2424
</Heading>
@@ -53,7 +53,7 @@ export const Levels: StoryObj<typeof Heading> = {
5353
export const Contrasts: StoryObj<typeof Heading> = {
5454
render: (args) => {
5555
return (
56-
<div className={vstack({ gap: "gap.md" })}>
56+
<div className={vstack({ gap: "24" })}>
5757
<Heading {...args} muted>
5858
๋‚ฎ์€ ๋ช…์•”๋น„
5959
</Heading>

โ€Žsrc/components/Icon/Icon.stories.tsxโ€Ž

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const Basic: StoryObj<typeof Icon> = {
2525
export const Sizes: StoryObj<typeof Icon> = {
2626
render: (args) => {
2727
return (
28-
<div className={vstack({ gap: "gap.md" })}>
28+
<div className={vstack({ gap: "24" })}>
2929
<Icon {...args} size="xs" />
3030
<Icon {...args} size="sm" />
3131
<Icon {...args} size="md" />
@@ -48,7 +48,7 @@ export const Sizes: StoryObj<typeof Icon> = {
4848
export const Tones: StoryObj<typeof Icon> = {
4949
render: (args) => {
5050
return (
51-
<div className={vstack({ gap: "gap.md" })}>
51+
<div className={vstack({ gap: "24" })}>
5252
<Icon {...args} tone="neutral" />
5353
<Icon {...args} tone="accent" />
5454
<Icon {...args} tone="danger" />
@@ -69,7 +69,7 @@ export const Tones: StoryObj<typeof Icon> = {
6969
export const Contrasts: StoryObj<typeof Icon> = {
7070
render: (args) => {
7171
return (
72-
<div className={vstack({ gap: "gap.md" })}>
72+
<div className={vstack({ gap: "24" })}>
7373
<Text {...args} muted>
7474
๋‚ฎ์€ <Icon name="moon" /> ๋ช…์•”๋น„
7575
</Text>

โ€Žsrc/components/Link/Link.stories.tsxโ€Ž

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export const Basic: StoryObj<typeof Link> = {};
1919
export const Tones: StoryObj<typeof Link> = {
2020
render: (args) => {
2121
return (
22-
<div className={vstack({ gap: "gap.md" })}>
22+
<div className={vstack({ gap: "24" })}>
2323
<Link {...args} tone="neutral">
2424
์ค‘๋ฆฝ ๋งํฌ
2525
</Link>
@@ -48,7 +48,7 @@ export const Tones: StoryObj<typeof Link> = {
4848
export const Contrasts: StoryObj<typeof Link> = {
4949
render: (args) => {
5050
return (
51-
<div className={vstack({ gap: "gap.md" })}>
51+
<div className={vstack({ gap: "24" })}>
5252
<Link {...args} muted>
5353
๋‚ฎ์€ ๋ช…์•”๋น„
5454
</Link>
@@ -69,7 +69,7 @@ export const Contrasts: StoryObj<typeof Link> = {
6969
export const Underlines: StoryObj<typeof Link> = {
7070
render: (args) => {
7171
return (
72-
<div className={vstack({ gap: "gap.md" })}>
72+
<div className={vstack({ gap: "24" })}>
7373
<Link {...args} underline>
7474
๋ฐ‘์ค„ ์žˆ์Œ
7575
</Link>
@@ -92,7 +92,7 @@ export const Underlines: StoryObj<typeof Link> = {
9292
export const Sizes: StoryObj<typeof Link> = {
9393
render: (args) => {
9494
return (
95-
<div className={vstack({ gap: "gap.md" })}>
95+
<div className={vstack({ gap: "24" })}>
9696
<Link {...args} size="sm">
9797
์ž‘์€ ๋งํฌ
9898
</Link>
@@ -118,7 +118,7 @@ export const Sizes: StoryObj<typeof Link> = {
118118
export const Weights: StoryObj<typeof Link> = {
119119
render: (args) => {
120120
return (
121-
<div className={vstack({ gap: "gap.md" })}>
121+
<div className={vstack({ gap: "24" })}>
122122
<Link {...args} weight="thin">
123123
์–‡์€ ๊ตต๊ธฐ
124124
</Link>
@@ -150,7 +150,7 @@ export const Weights: StoryObj<typeof Link> = {
150150
export const Security: StoryObj<typeof Link> = {
151151
render: (args) => {
152152
return (
153-
<div className={vstack({ gap: "gap.md" })}>
153+
<div className={vstack({ gap: "24" })}>
154154
<Link {...args} target="_blank">
155155
์ƒˆ ํƒญ์—์„œ ์—ด๊ธฐ (๋ณด์•ˆ ์†์„ฑ ์ž๋™ ์ถ”๊ฐ€)
156156
</Link>

โ€Žsrc/components/RadioGroup/RadioGroup.stories.tsxโ€Ž

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Meta, StoryObj } from "@storybook/react";
22
import { useState } from "react";
33
import { Radio, RadioGroup } from "./RadioGroup";
4+
import { css } from "../../../styled-system/css";
45

56
export default {
67
component: RadioGroup,
@@ -89,30 +90,31 @@ Required.decorators = [
8990
<div style={{ minWidth: "300px" }}>
9091
<form onSubmit={handleSubmit} noValidate>
9192
<StoryFn />
92-
<div style={{ marginTop: "20px" }}>
93+
<div className={css({ marginTop: "20" })}>
9394
<button
9495
type="submit"
95-
style={{
96-
padding: "8px 16px",
96+
className={css({
97+
paddingX: "16",
98+
paddingY: "8",
9799
backgroundColor: "#2E7D32",
98100
color: "white",
99101
border: "none",
100102
borderRadius: "4px",
101103
cursor: "pointer",
102-
}}
104+
})}
103105
>
104106
์ œ์ถœํ•˜๊ธฐ
105107
</button>
106108
</div>
107109
{submitted && (
108110
<div
109-
style={{
110-
marginTop: "20px",
111-
padding: "10px",
111+
className={css({
112+
marginTop: "20",
113+
padding: "8",
112114
backgroundColor: formValid ? "#E8F5E9" : "#FFEBEE",
113115
color: formValid ? "#2E7D32" : "#C62828",
114116
borderRadius: "4px",
115-
}}
117+
})}
116118
>
117119
{formValid
118120
? "โœ… ํผ์ด ์„ฑ๊ณต์ ์œผ๋กœ ์ œ์ถœ๋˜์—ˆ์Šต๋‹ˆ๋‹ค."
@@ -128,7 +130,9 @@ Required.decorators = [
128130
export const Tones: Story = {
129131
render: () => {
130132
return (
131-
<div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
133+
<div
134+
className={css({ display: "flex", flexDirection: "column", gap: "32" })}
135+
>
132136
<RadioGroup
133137
name="neutral-tone"
134138
label="์ค‘๋ฆฝ ์ƒ‰์กฐ (Neutral)"
@@ -191,7 +195,7 @@ export const Controlled = () => {
191195
<Radio value="banana">๋ฐ”๋‚˜๋‚˜</Radio>
192196
<Radio value="orange">์˜ค๋ Œ์ง€</Radio>
193197
</RadioGroup>
194-
<div style={{ marginTop: 20 }}>
198+
<div className={css({ marginTop: "20" })}>
195199
<p>ํ˜„์žฌ ์„ ํƒ๋œ ๊ฐ’: {value}</p>
196200
<button onClick={() => setValue("banana")}>๋ฐ”๋‚˜๋‚˜ ์„ ํƒ</button>
197201
<button onClick={() => setValue("orange")}>์˜ค๋ Œ์ง€ ์„ ํƒ</button>

โ€Žsrc/components/RadioGroup/RadioGroup.tsxโ€Ž

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export function RadioGroup({
100100
id={`${name}-label`}
101101
className={css({
102102
fontWeight: "medium",
103-
marginBottom: "2",
103+
marginBottom: "8",
104104
})}
105105
>
106106
{label}
@@ -127,7 +127,7 @@ export function RadioGroup({
127127
const radioGroupStyles = cva({
128128
base: {
129129
display: "flex",
130-
gap: "2",
130+
gap: "8",
131131
},
132132
variants: {
133133
orientation: {
@@ -180,7 +180,7 @@ export function Radio({ value, children, disabled, ref }: RadioProps) {
180180
<label
181181
className={flex({
182182
alignItems: "center",
183-
gap: "2",
183+
gap: "8",
184184
cursor: disabled ? "not-allowed" : "pointer",
185185
})}
186186
>

0 commit comments

Comments
ย (0)