[Refactor] Switch 컴포넌트에 토큰 적용

apps/wow-docs/package.json

@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "wowds-icons": "workspace:^",
-    "wowds-tokens": "workspace:^",
     "wowds-ui": "workspace:^",
     "next": "^14.1.1",
     "react": "^18.2.0",

packages/theme/package.json

@@ -10,8 +10,5 @@
   },
   "devDependencies": {
     "@pandacss/dev": "^0.39.0"
-  },
-  "dependencies": {
-    "wowds-tokens": "workspace:^"
   }
 }

packages/theme/src/tokens/radius.ts

@@ -1,10 +1,8 @@
 import { defineTokens } from "@pandacss/dev";
-import { radius as wowRadius } from "wowds-tokens";
+import { radius } from "wowds-tokens";
 
 export const radii = defineTokens.radii({
-  radius: {
-    sm: { value: wowRadius.sm },
-    md: { value: wowRadius.md },
-    full: { value: wowRadius.full },
-  },
+  sm: { value: radius.sm },
+  md: { value: radius.md },
+  full: { value: radius.full },
 });

packages/theme/src/tokens/space.ts

@@ -2,24 +2,22 @@ import { defineTokens } from "@pandacss/dev";
 import { space } from "wowds-tokens";
 
 export const spacing = defineTokens.spacing({
-  spacing: {
-    xxs: {
-      value: space.xxs,
-    },
-    xs: {
-      value: space.xs,
-    },
-    sm: {
-      value: space.sm,
-    },
-    md: {
-      value: space.md,
-    },
-    lg: {
-      value: space.lg,
-    },
-    xl: {
-      value: space.xl,
-    },
+  xxs: {
+    value: space.xxs,
+  },
+  xs: {
+    value: space.xs,
+  },
+  sm: {
+    value: space.sm,
+  },
+  md: {
+    value: space.md,
+  },
+  lg: {
+    value: space.lg,
+  },
+  xl: {
+    value: space.xl,
   },
 });

packages/wow-ui/src/components/Switch/index.tsx

@@ -114,7 +114,7 @@ const switchStyle = cva({
   base: {
     width: "3.25rem !important",
     height: "1.75rem !important",
-    borderRadius: "2.5rem",
+    borderRadius: "full",
     cursor: "pointer",
     display: "flex",
     position: "relative",

packages/wow-ui/styled-system/tokens/index.js

@@ -239,6 +239,50 @@ const tokens = {
     value: "linear-gradient(to right, #FDE6B2, #FDDD99)",
     variable: "var(--gradients-yellow-gradient-light)",
   },
+  "spacing.xxs": {
+    value: "0.25rem",
+    variable: "var(--spacing-xxs)",
+  },
+  "spacing.xs": {
+    value: "0.5rem",
+    variable: "var(--spacing-xs)",
+  },
+  "spacing.sm": {
+    value: "0.75rem",
+    variable: "var(--spacing-sm)",
+  },
+  "spacing.md": {
+    value: "1rem",
+    variable: "var(--spacing-md)",
+  },
+  "spacing.lg": {
+    value: "1.25rem",
+    variable: "var(--spacing-lg)",
+  },
+  "spacing.xl": {
+    value: "1.5rem",
+    variable: "var(--spacing-xl)",
+  },
+  "radii.sm": {
+    value: "0.25rem",
+    variable: "var(--radii-sm)",
+  },
+  "radii.md": {
+    value: "0.5rem",
+    variable: "var(--radii-md)",
+  },
+  "radii.full": {
+    value: "2.5rem",
+    variable: "var(--radii-full)",
+  },
+  "borderWidths.button": {
+    value: "1px",
+    variable: "var(--border-widths-button)",
+  },
+  "borderWidths.arrow": {
+    value: "1.2px",
+    variable: "var(--border-widths-arrow)",
+  },
   "breakpoints.sm": {
     value: "640px",
     variable: "var(--breakpoints-sm)",
@@ -371,6 +415,30 @@ const tokens = {
     value: "#000000",
     variable: "var(--colors-github)",
   },
+  "spacing.-xxs": {
+    value: "calc(var(--spacing-xxs) * -1)",
+    variable: "var(--spacing-xxs)",
+  },
+  "spacing.-xs": {
+    value: "calc(var(--spacing-xs) * -1)",
+    variable: "var(--spacing-xs)",
+  },
+  "spacing.-sm": {
+    value: "calc(var(--spacing-sm) * -1)",
+    variable: "var(--spacing-sm)",
+  },
+  "spacing.-md": {
+    value: "calc(var(--spacing-md) * -1)",
+    variable: "var(--spacing-md)",
+  },
+  "spacing.-lg": {
+    value: "calc(var(--spacing-lg) * -1)",
+    variable: "var(--spacing-lg)",
+  },
+  "spacing.-xl": {
+    value: "calc(var(--spacing-xl) * -1)",
+    variable: "var(--spacing-xl)",
+  },
   "colors.colorPalette.50": {
     value: "var(--colors-color-palette-50)",
     variable: "var(--colors-color-palette-50)",

packages/wow-ui/styled-system/tokens/tokens.d.ts

@@ -60,6 +60,17 @@ export type Token =
   | "gradients.greenGradientLight"
   | "gradients.yellowGradientDark"
   | "gradients.yellowGradientLight"
+  | "spacing.xxs"
+  | "spacing.xs"
+  | "spacing.sm"
+  | "spacing.md"
+  | "spacing.lg"
+  | "spacing.xl"
+  | "radii.sm"
+  | "radii.md"
+  | "radii.full"
+  | "borderWidths.button"
+  | "borderWidths.arrow"
   | "breakpoints.sm"
   | "breakpoints.md"
   | "breakpoints.lg"
@@ -93,6 +104,12 @@ export type Token =
   | "colors.blueShadow"
   | "colors.discord"
   | "colors.github"
+  | "spacing.-xxs"
+  | "spacing.-xs"
+  | "spacing.-sm"
+  | "spacing.-md"
+  | "spacing.-lg"
+  | "spacing.-xl"
   | "colors.colorPalette.50"
   | "colors.colorPalette.100"
   | "colors.colorPalette.150"
@@ -238,6 +255,24 @@ export type GradientToken =
   | "yellowGradientDark"
   | "yellowGradientLight";
 
+export type SpacingToken =
+  | "xxs"
+  | "xs"
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "-xxs"
+  | "-xs"
+  | "-sm"
+  | "-md"
+  | "-lg"
+  | "-xl";
+
+export type RadiusToken = "sm" | "md" | "full";
+
+export type BorderWidthToken = "button" | "arrow";
+
 export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl";
 
 export type SizeToken =
@@ -250,6 +285,9 @@ export type SizeToken =
 export type Tokens = {
   colors: ColorToken;
   gradients: GradientToken;
+  spacing: SpacingToken;
+  radii: RadiusToken;
+  borderWidths: BorderWidthToken;
   breakpoints: BreakpointToken;
   sizes: SizeToken;
 } & { [token: string]: never };