chore: 오타 수정 및 docs 테스트

GDSC-Hongik · May 30, 2024 · e0cb53e · e0cb53e
1 parent fceb2f4
commit e0cb53e
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 119 deletions.
diff --git a/apps/wow-docs/app/page.tsx b/apps/wow-docs/app/page.tsx
@@ -1,5 +1,6 @@
 import { css } from "@styled-system/css/css";
 import { UpArrow } from "wowds-icons";
+import Chip from "wowds-ui/Chip";
 import Switch from "wowds-ui/Switch";
 
 const Home = () => {
@@ -16,6 +17,7 @@ const Home = () => {
         <UpArrow />
       </main>
       <Switch />
+      <Chip as="button" label="안녕하새우" />
     </>
   );
 };

diff --git a/apps/wow-docs/styled-system/tokens/index.js b/apps/wow-docs/styled-system/tokens/index.js
@@ -207,6 +207,62 @@ const tokens = {
     value: "#051108",
     variable: "var(--colors-green-950)",
   },
+  "colors.mono.50": {
+    value: "#F7F7F7",
+    variable: "var(--colors-mono-50)",
+  },
+  "colors.mono.100": {
+    value: "#F0F0F0",
+    variable: "var(--colors-mono-100)",
+  },
+  "colors.mono.150": {
+    value: "#E8E8E8",
+    variable: "var(--colors-mono-150)",
+  },
+  "colors.mono.200": {
+    value: "#E1E1E1",
+    variable: "var(--colors-mono-200)",
+  },
+  "colors.mono.300": {
+    value: "#D1D1D1",
+    variable: "var(--colors-mono-300)",
+  },
+  "colors.mono.400": {
+    value: "#C2C2C2",
+    variable: "var(--colors-mono-400)",
+  },
+  "colors.mono.500": {
+    value: "#B3B3B3",
+    variable: "var(--colors-mono-500)",
+  },
+  "colors.mono.600": {
+    value: "#8F8F8F",
+    variable: "var(--colors-mono-600)",
+  },
+  "colors.mono.700": {
+    value: "#6B6B6B",
+    variable: "var(--colors-mono-700)",
+  },
+  "colors.mono.800": {
+    value: "#484848",
+    variable: "var(--colors-mono-800)",
+  },
+  "colors.mono.900": {
+    value: "#242424",
+    variable: "var(--colors-mono-900)",
+  },
+  "colors.mono.950": {
+    value: "#121212",
+    variable: "var(--colors-mono-950)",
+  },
+  "colors.white": {
+    value: "#FFFFFF",
+    variable: "var(--colors-white)",
+  },
+  "colors.black": {
+    value: "#000000",
+    variable: "var(--colors-black)",
+  },
   "gradients.blueGradientDark": {
     value: "linear-gradient(to right, #368FF7, #205694)",
     variable: "var(--gradients-blue-gradient-dark)",
@@ -239,73 +295,49 @@ const tokens = {
     value: "linear-gradient(to right, #FDE6B2, #FDDD99)",
     variable: "var(--gradients-yellow-gradient-light)",
   },
-  "spacing.spacing.4": {
+  "spacing.spacing.xxs": {
     value: "0.25rem",
-    variable: "var(--spacing-spacing-4)",
+    variable: "var(--spacing-spacing-xxs)",
   },
-  "spacing.spacing.8": {
+  "spacing.spacing.xs": {
     value: "0.5rem",
-    variable: "var(--spacing-spacing-8)",
+    variable: "var(--spacing-spacing-xs)",
   },
-  "spacing.spacing.12": {
+  "spacing.spacing.sm": {
     value: "0.75rem",
-    variable: "var(--spacing-spacing-12)",
+    variable: "var(--spacing-spacing-sm)",
   },
-  "spacing.spacing.16": {
+  "spacing.spacing.md": {
     value: "1rem",
-    variable: "var(--spacing-spacing-16)",
+    variable: "var(--spacing-spacing-md)",
   },
-  "spacing.spacing.20": {
+  "spacing.spacing.lg": {
     value: "1.25rem",
-    variable: "var(--spacing-spacing-20)",
+    variable: "var(--spacing-spacing-lg)",
   },
-  "spacing.spacing.24": {
+  "spacing.spacing.xl": {
     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)",
+    variable: "var(--spacing-spacing-xl)",
   },
-  "radii.radius.4": {
+  "radii.radius.sm": {
     value: "0.25rem",
-    variable: "var(--radii-radius-4)",
+    variable: "var(--radii-radius-sm)",
   },
-  "radii.radius.8": {
+  "radii.radius.md": {
     value: "0.5rem",
-    variable: "var(--radii-radius-8)",
-  },
-  "radii.radius.12": {
-    value: "0.75rem",
-    variable: "var(--radii-radius-12)",
+    variable: "var(--radii-radius-md)",
   },
   "radii.radius.full": {
     value: "2.5rem",
     variable: "var(--radii-radius-full)",
   },
-  "borderWidths.stroke8": {
-    value: "0.8px",
-    variable: "var(--border-widths-stroke8)",
-  },
-  "borderWidths.stroke10": {
+  "borderWidths.button": {
     value: "1px",
-    variable: "var(--border-widths-stroke10)",
+    variable: "var(--border-widths-button)",
   },
-  "borderWidths.stroke12": {
+  "borderWidths.arrow": {
     value: "1.2px",
-    variable: "var(--border-widths-stroke12)",
-  },
-  "borderWidths.stroke20": {
-    value: "2px",
-    variable: "var(--border-widths-stroke20)",
+    variable: "var(--border-widths-arrow)",
   },
   "breakpoints.sm": {
     value: "640px",
@@ -439,41 +471,29 @@ 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.-xxs": {
+    value: "calc(var(--spacing-spacing-xxs) * -1)",
+    variable: "var(--spacing-spacing-xxs)",
   },
-  "spacing.spacing.-20": {
-    value: "calc(var(--spacing-spacing-20) * -1)",
-    variable: "var(--spacing-spacing-20)",
+  "spacing.spacing.-xs": {
+    value: "calc(var(--spacing-spacing-xs) * -1)",
+    variable: "var(--spacing-spacing-xs)",
   },
-  "spacing.spacing.-24": {
-    value: "calc(var(--spacing-spacing-24) * -1)",
-    variable: "var(--spacing-spacing-24)",
+  "spacing.spacing.-sm": {
+    value: "calc(var(--spacing-spacing-sm) * -1)",
+    variable: "var(--spacing-spacing-sm)",
   },
-  "spacing.spacing.-32": {
-    value: "calc(var(--spacing-spacing-32) * -1)",
-    variable: "var(--spacing-spacing-32)",
+  "spacing.spacing.-md": {
+    value: "calc(var(--spacing-spacing-md) * -1)",
+    variable: "var(--spacing-spacing-md)",
   },
-  "spacing.spacing.-36": {
-    value: "calc(var(--spacing-spacing-36) * -1)",
-    variable: "var(--spacing-spacing-36)",
+  "spacing.spacing.-lg": {
+    value: "calc(var(--spacing-spacing-lg) * -1)",
+    variable: "var(--spacing-spacing-lg)",
   },
-  "spacing.spacing.-40": {
-    value: "calc(var(--spacing-spacing-40) * -1)",
-    variable: "var(--spacing-spacing-40)",
+  "spacing.spacing.-xl": {
+    value: "calc(var(--spacing-spacing-xl) * -1)",
+    variable: "var(--spacing-spacing-xl)",
   },
   "colors.colorPalette.50": {
     value: "var(--colors-color-palette-50)",

diff --git a/apps/wow-docs/styled-system/tokens/tokens.d.ts b/apps/wow-docs/styled-system/tokens/tokens.d.ts
@@ -52,6 +52,20 @@ export type Token =
   | "colors.green.850"
   | "colors.green.900"
   | "colors.green.950"
+  | "colors.mono.50"
+  | "colors.mono.100"
+  | "colors.mono.150"
+  | "colors.mono.200"
+  | "colors.mono.300"
+  | "colors.mono.400"
+  | "colors.mono.500"
+  | "colors.mono.600"
+  | "colors.mono.700"
+  | "colors.mono.800"
+  | "colors.mono.900"
+  | "colors.mono.950"
+  | "colors.white"
+  | "colors.black"
   | "gradients.blueGradientDark"
   | "gradients.blueGradientLight"
   | "gradients.redGradientDark"
@@ -60,23 +74,17 @@ 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"
+  | "spacing.spacing.xxs"
+  | "spacing.spacing.xs"
+  | "spacing.spacing.sm"
+  | "spacing.spacing.md"
+  | "spacing.spacing.lg"
+  | "spacing.spacing.xl"
+  | "radii.radius.sm"
+  | "radii.radius.md"
   | "radii.radius.full"
-  | "borderWidths.stroke8"
-  | "borderWidths.stroke10"
-  | "borderWidths.stroke12"
-  | "borderWidths.stroke20"
+  | "borderWidths.button"
+  | "borderWidths.arrow"
   | "breakpoints.sm"
   | "breakpoints.md"
   | "breakpoints.lg"
@@ -110,15 +118,12 @@ 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"
+  | "spacing.spacing.-xxs"
+  | "spacing.spacing.-xs"
+  | "spacing.spacing.-sm"
+  | "spacing.spacing.-md"
+  | "spacing.spacing.-lg"
+  | "spacing.spacing.-xl"
   | "colors.colorPalette.50"
   | "colors.colorPalette.100"
   | "colors.colorPalette.150"
@@ -139,6 +144,9 @@ export type ColorPalette =
   | "blue"
   | "yellow"
   | "green"
+  | "mono"
+  | "white"
+  | "black"
   | "primary"
   | "success"
   | "error"
@@ -216,6 +224,20 @@ export type ColorToken =
   | "green.850"
   | "green.900"
   | "green.950"
+  | "mono.50"
+  | "mono.100"
+  | "mono.150"
+  | "mono.200"
+  | "mono.300"
+  | "mono.400"
+  | "mono.500"
+  | "mono.600"
+  | "mono.700"
+  | "mono.800"
+  | "mono.900"
+  | "mono.950"
+  | "white"
+  | "black"
   | "primary"
   | "success"
   | "error"
@@ -265,28 +287,22 @@ export type GradientToken =
   | "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";
+  | "spacing.xxs"
+  | "spacing.xs"
+  | "spacing.sm"
+  | "spacing.md"
+  | "spacing.lg"
+  | "spacing.xl"
+  | "-spacing.xxs"
+  | "-spacing.xs"
+  | "-spacing.sm"
+  | "-spacing.md"
+  | "-spacing.lg"
+  | "-spacing.xl";
 
-export type RadiusToken = "radius.4" | "radius.8" | "radius.12" | "radius.full";
+export type RadiusToken = "radius.sm" | "radius.md" | "radius.full";
 
-export type BorderWidthToken = "stroke8" | "stroke10" | "stroke12" | "stroke20";
+export type BorderWidthToken = "button" | "arrow";
 
 export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl";
 

diff --git a/apps/wow-docs/styled-system/types/prop-type.d.ts b/apps/wow-docs/styled-system/types/prop-type.d.ts
@@ -633,6 +633,9 @@ export interface UtilityValues {
     | "blue"
     | "yellow"
     | "green"
+    | "mono"
+    | "white"
+    | "black"
     | "primary"
     | "success"
     | "error"