[Feature] Radius, Stroke, Spacing Token 생성 및 theme 패키지 등록 (#23)

* feat: radius, space, stroke 토큰 작성

* feat: index.ts에서 export 시켜주기

* chore: git prune 실행

* feat: token에 radii 추가

* feat: pandaconfig.ts theme 등록

* feat: Stroke borderWidths 토큰 등록

* feat: stroke토큰 borderWidths config에 등록

* feat: 컴포넌트 variables 변수명 변경

* feat: panda theme 새로운 토큰값으로 변경

* chore:gitignore추가

.eslintcache

@@ -0,0 +1 @@
+[{"/Users/eugene/github/wow-design-system/packages/theme/src/radius.ts":"1","/Users/eugene/github/wow-design-system/packages/wow-tokens/src/radius.ts":"2","/Users/eugene/github/wow-design-system/packages/wow-tokens/src/space.ts":"3","/Users/eugene/github/wow-design-system/packages/wow-tokens/src/stroke.ts":"4","/Users/eugene/github/wow-design-system/packages/wow-tokens/src/index.ts":"5","/Users/eugene/github/wow-design-system/apps/wow-docs/app/page.tsx":"6","/Users/eugene/github/wow-design-system/packages/theme/src/color.ts":"7","/Users/eugene/github/wow-design-system/packages/theme/src/index.ts":"8","/Users/eugene/github/wow-design-system/packages/theme/src/space.ts":"9","/Users/eugene/github/wow-design-system/packages/theme/src/stroke.ts":"10"},{"size":265,"mtime":1716905895550,"results":"11","hashOfConfig":"12"},{"size":138,"mtime":1716308900598,"results":"13","hashOfConfig":"12"},{"size":329,"mtime":1716309048289,"results":"14","hashOfConfig":"12"},{"size":127,"mtime":1716441452591,"results":"15","hashOfConfig":"12"},{"size":199,"mtime":1716309348694,"results":"16","hashOfConfig":"12"},{"size":438,"mtime":1716445270763,"results":"17","hashOfConfig":"12"},{"size":4454,"mtime":1716439721653,"results":"18","hashOfConfig":"12"},{"size":376,"mtime":1716444728791,"results":"19","hashOfConfig":"12"},{"size":395,"mtime":1716905910282,"results":"20","hashOfConfig":"12"},{"size":357,"mtime":1716444790902,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","suppressedMessages":"24","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"8oyd96",{"filePath":"25","messages":"26","suppressedMessages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","suppressedMessages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","suppressedMessages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","suppressedMessages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","suppressedMessages":"39","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"40","messages":"41","suppressedMessages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","suppressedMessages":"45","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","suppressedMessages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","suppressedMessages":"51","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/eugene/github/wow-design-system/packages/theme/src/radius.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-tokens/src/radius.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-tokens/src/space.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-tokens/src/stroke.ts",[],[],"/Users/eugene/github/wow-design-system/packages/wow-tokens/src/index.ts",[],[],"/Users/eugene/github/wow-design-system/apps/wow-docs/app/page.tsx",["52"],[],"/Users/eugene/github/wow-design-system/packages/theme/src/color.ts",[],[],"/Users/eugene/github/wow-design-system/packages/theme/src/index.ts",[],[],"/Users/eugene/github/wow-design-system/packages/theme/src/space.ts",[],[],"/Users/eugene/github/wow-design-system/packages/theme/src/stroke.ts",[],[],{"ruleId":"53","severity":1,"message":"54","line":1,"column":21,"nodeType":"55","endLine":1,"endColumn":45},"import/no-unresolved","Unable to resolve path to module '@styled-system/css/css'.","Literal"]

.gitignore

@@ -39,4 +39,6 @@ yarn-error.log*
 
 ## Panda
 styled-system-studio
-*storybook.log
+*storybook.log
+
+.eslintcache

apps/wow-docs/styled-system/tokens/index.js

@@ -239,6 +239,74 @@ const tokens = {
     value: "linear-gradient(to right, #FDE6B2, #FDDD99)",
     variable: "var(--gradients-yellow-gradient-light)",
   },
+  "spacing.spacing.4": {
+    value: "0.25rem",
+    variable: "var(--spacing-spacing-4)",
+  },
+  "spacing.spacing.8": {
+    value: "0.5rem",
+    variable: "var(--spacing-spacing-8)",
+  },
+  "spacing.spacing.12": {
+    value: "0.75rem",
+    variable: "var(--spacing-spacing-12)",
+  },
+  "spacing.spacing.16": {
+    value: "1rem",
+    variable: "var(--spacing-spacing-16)",
+  },
+  "spacing.spacing.20": {
+    value: "1.25rem",
+    variable: "var(--spacing-spacing-20)",
+  },
+  "spacing.spacing.24": {
+    value: "1.5rem",
+    variable: "var(--spacing-spacing-24)",
+  },
+  "spacing.spacing.32": {
+    value: "2rem",
+    variable: "var(--spacing-spacing-32)",
+  },
+  "spacing.spacing.36": {
+    value: "2.25rem",
+    variable: "var(--spacing-spacing-36)",
+  },
+  "spacing.spacing.40": {
+    value: "2.5rem",
+    variable: "var(--spacing-spacing-40)",
+  },
+  "radii.radius.4": {
+    value: "0.25rem",
+    variable: "var(--radii-radius-4)",
+  },
+  "radii.radius.8": {
+    value: "0.5rem",
+    variable: "var(--radii-radius-8)",
+  },
+  "radii.radius.12": {
+    value: "0.75rem",
+    variable: "var(--radii-radius-12)",
+  },
+  "radii.radius.full": {
+    value: "2.5rem",
+    variable: "var(--radii-radius-full)",
+  },
+  "borderWidths.stroke8": {
+    value: "0.8px",
+    variable: "var(--border-widths-stroke8)",
+  },
+  "borderWidths.stroke10": {
+    value: "1px",
+    variable: "var(--border-widths-stroke10)",
+  },
+  "borderWidths.stroke12": {
+    value: "1.2px",
+    variable: "var(--border-widths-stroke12)",
+  },
+  "borderWidths.stroke20": {
+    value: "2px",
+    variable: "var(--border-widths-stroke20)",
+  },
   "breakpoints.sm": {
     value: "640px",
     variable: "var(--breakpoints-sm)",
@@ -371,6 +439,42 @@ const tokens = {
     value: "#000000",
     variable: "var(--colors-github)",
   },
+  "spacing.spacing.-4": {
+    value: "calc(var(--spacing-spacing-4) * -1)",
+    variable: "var(--spacing-spacing-4)",
+  },
+  "spacing.spacing.-8": {
+    value: "calc(var(--spacing-spacing-8) * -1)",
+    variable: "var(--spacing-spacing-8)",
+  },
+  "spacing.spacing.-12": {
+    value: "calc(var(--spacing-spacing-12) * -1)",
+    variable: "var(--spacing-spacing-12)",
+  },
+  "spacing.spacing.-16": {
+    value: "calc(var(--spacing-spacing-16) * -1)",
+    variable: "var(--spacing-spacing-16)",
+  },
+  "spacing.spacing.-20": {
+    value: "calc(var(--spacing-spacing-20) * -1)",
+    variable: "var(--spacing-spacing-20)",
+  },
+  "spacing.spacing.-24": {
+    value: "calc(var(--spacing-spacing-24) * -1)",
+    variable: "var(--spacing-spacing-24)",
+  },
+  "spacing.spacing.-32": {
+    value: "calc(var(--spacing-spacing-32) * -1)",
+    variable: "var(--spacing-spacing-32)",
+  },
+  "spacing.spacing.-36": {
+    value: "calc(var(--spacing-spacing-36) * -1)",
+    variable: "var(--spacing-spacing-36)",
+  },
+  "spacing.spacing.-40": {
+    value: "calc(var(--spacing-spacing-40) * -1)",
+    variable: "var(--spacing-spacing-40)",
+  },
   "colors.colorPalette.50": {
     value: "var(--colors-color-palette-50)",
     variable: "var(--colors-color-palette-50)",

apps/wow-docs/styled-system/tokens/tokens.d.ts

@@ -60,6 +60,23 @@ export type Token =
   | "gradients.greenGradientLight"
   | "gradients.yellowGradientDark"
   | "gradients.yellowGradientLight"
+  | "spacing.spacing.4"
+  | "spacing.spacing.8"
+  | "spacing.spacing.12"
+  | "spacing.spacing.16"
+  | "spacing.spacing.20"
+  | "spacing.spacing.24"
+  | "spacing.spacing.32"
+  | "spacing.spacing.36"
+  | "spacing.spacing.40"
+  | "radii.radius.4"
+  | "radii.radius.8"
+  | "radii.radius.12"
+  | "radii.radius.full"
+  | "borderWidths.stroke8"
+  | "borderWidths.stroke10"
+  | "borderWidths.stroke12"
+  | "borderWidths.stroke20"
   | "breakpoints.sm"
   | "breakpoints.md"
   | "breakpoints.lg"
@@ -93,6 +110,15 @@ export type Token =
   | "colors.blueShadow"
   | "colors.discord"
   | "colors.github"
+  | "spacing.spacing.-4"
+  | "spacing.spacing.-8"
+  | "spacing.spacing.-12"
+  | "spacing.spacing.-16"
+  | "spacing.spacing.-20"
+  | "spacing.spacing.-24"
+  | "spacing.spacing.-32"
+  | "spacing.spacing.-36"
+  | "spacing.spacing.-40"
   | "colors.colorPalette.50"
   | "colors.colorPalette.100"
   | "colors.colorPalette.150"
@@ -238,6 +264,30 @@ export type GradientToken =
   | "yellowGradientDark"
   | "yellowGradientLight";
 
+export type SpacingToken =
+  | "spacing.4"
+  | "spacing.8"
+  | "spacing.12"
+  | "spacing.16"
+  | "spacing.20"
+  | "spacing.24"
+  | "spacing.32"
+  | "spacing.36"
+  | "spacing.40"
+  | "-spacing.4"
+  | "-spacing.8"
+  | "-spacing.12"
+  | "-spacing.16"
+  | "-spacing.20"
+  | "-spacing.24"
+  | "-spacing.32"
+  | "-spacing.36"
+  | "-spacing.40";
+
+export type RadiusToken = "radius.4" | "radius.8" | "radius.12" | "radius.full";
+
+export type BorderWidthToken = "stroke8" | "stroke10" | "stroke12" | "stroke20";
+
 export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl";
 
 export type SizeToken =
@@ -250,6 +300,9 @@ export type SizeToken =
 export type Tokens = {
   colors: ColorToken;
   gradients: GradientToken;
+  spacing: SpacingToken;
+  radii: RadiusToken;
+  borderWidths: BorderWidthToken;
   breakpoints: BreakpointToken;
   sizes: SizeToken;
 } & { [token: string]: never };