[Feat] panda preset 을 배포할 수 있는 있도록 wow-theme 패키지 추가 (#111)

* feat : wow-theme rollup 으로 말기

* feat : styled-system 쪽 반영

* feat : rollup 설정 shared-config 에서 하는 것으로 수정

* feat : 리뷰 반영

* chore : wowds-theme changeset 작성

* feat : 리뷰 반영

.changeset/tender-bugs-swim.md

@@ -0,0 +1,5 @@
+---
+"wowds-theme": minor
+---
+
+wowds-theme 패키지를 마이너 버전으로 배포합니다.

apps/wow-docs/panda.config.ts

@@ -1,9 +1,13 @@
 import { defineConfig } from "@pandacss/dev";
-import { semanticTokens, textStyles, tokens } from "theme";
 
-import { removeUnusedCssVars, removeUnusedKeyframes } from "theme/utils";
+import {
+  pandaPreset,
+  removeUnusedCssVars,
+  removeUnusedKeyframes,
+} from "wowds-theme";
 
 export default defineConfig({
+  presets: [pandaPreset],
   preflight: true,
   minify: true,
   watch: true,
@@ -13,11 +17,6 @@ export default defineConfig({
   include: ["./app/**/*.{ts,tsx,js,jsx}"],
   exclude: [],
   outdir: "styled-system",
-  theme: {
-    tokens,
-    textStyles,
-    semanticTokens,
-  },
   hooks: {
     "cssgen:done": ({ artifact, content }) => {
       if (artifact === "styles.css") {

apps/wow-docs/styled-system/css/conditions.js

@@ -1,7 +1,7 @@
 import { withoutSpace } from "../helpers.js";
 
 const conditionsStr =
-  "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base";
+  "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_starting,xs,xsOnly,xsDown,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xsToSm,xsToMd,xsToLg,smToMd,smToLg,mdToLg,base";
 const conditions = new Set(conditionsStr.split(","));
 
 export function isCondition(value) {

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

@@ -351,45 +351,37 @@ const tokens = {
     value: "0px 4px 8px 0px rgba(0, 0, 0, 0.2)",
     variable: "var(--shadows-mono)",
   },
+  "breakpoints.xs": {
+    value: "360px",
+    variable: "var(--breakpoints-xs)",
+  },
   "breakpoints.sm": {
-    value: "640px",
+    value: "600px",
     variable: "var(--breakpoints-sm)",
   },
   "breakpoints.md": {
-    value: "768px",
+    value: "900px",
     variable: "var(--breakpoints-md)",
   },
   "breakpoints.lg": {
-    value: "1024px",
-    variable: "var(--breakpoints-lg)",
-  },
-  "breakpoints.xl": {
     value: "1280px",
-    variable: "var(--breakpoints-xl)",
+    variable: "var(--breakpoints-lg)",
   },
-  "breakpoints.2xl": {
-    value: "1536px",
-    variable: "var(--breakpoints-2xl)",
+  "sizes.breakpoint-xs": {
+    value: "360px",
+    variable: "var(--sizes-breakpoint-xs)",
   },
   "sizes.breakpoint-sm": {
-    value: "640px",
+    value: "600px",
     variable: "var(--sizes-breakpoint-sm)",
   },
   "sizes.breakpoint-md": {
-    value: "768px",
+    value: "900px",
     variable: "var(--sizes-breakpoint-md)",
   },
   "sizes.breakpoint-lg": {
-    value: "1024px",
-    variable: "var(--sizes-breakpoint-lg)",
-  },
-  "sizes.breakpoint-xl": {
     value: "1280px",
-    variable: "var(--sizes-breakpoint-xl)",
-  },
-  "sizes.breakpoint-2xl": {
-    value: "1536px",
-    variable: "var(--sizes-breakpoint-2xl)",
+    variable: "var(--sizes-breakpoint-lg)",
   },
   "colors.primary": {
     value: "#368FF7",

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

@@ -88,16 +88,14 @@ export type Token =
   | "zIndex.dropdown"
   | "shadows.blue"
   | "shadows.mono"
+  | "breakpoints.xs"
   | "breakpoints.sm"
   | "breakpoints.md"
   | "breakpoints.lg"
-  | "breakpoints.xl"
-  | "breakpoints.2xl"
+  | "sizes.breakpoint-xs"
   | "sizes.breakpoint-sm"
   | "sizes.breakpoint-md"
   | "sizes.breakpoint-lg"
-  | "sizes.breakpoint-xl"
-  | "sizes.breakpoint-2xl"
   | "colors.primary"
   | "colors.success"
   | "colors.error"
@@ -311,14 +309,13 @@ export type ZIndexToken = "dropdown";
 
 export type ShadowToken = "blue" | "mono";
 
-export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl";
+export type BreakpointToken = "xs" | "sm" | "md" | "lg";
 
 export type SizeToken =
+  | "breakpoint-xs"
   | "breakpoint-sm"
   | "breakpoint-md"
-  | "breakpoint-lg"
-  | "breakpoint-xl"
-  | "breakpoint-2xl";
+  | "breakpoint-lg";
 
 export type Tokens = {
   colors: ColorToken;

apps/wow-docs/styled-system/types/conditions.d.ts

@@ -180,80 +180,42 @@ export interface Conditions {
   _vertical: string;
   /** `@starting-style` */
   _starting: string;
-  /** `@media screen and (min-width: 40rem)` */
+  /** `@media screen and (min-width: 22.5rem)` */
+  xs: string;
+  /** `@media screen and (min-width: 22.5rem) and (max-width: 37.4975rem)` */
+  xsOnly: string;
+  /** `@media screen and (max-width: 22.4975rem)` */
+  xsDown: string;
+  /** `@media screen and (min-width: 37.5rem)` */
   sm: string;
-  /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */
+  /** `@media screen and (min-width: 37.5rem) and (max-width: 56.2475rem)` */
   smOnly: string;
-  /** `@media screen and (max-width: 39.9975rem)` */
+  /** `@media screen and (max-width: 37.4975rem)` */
   smDown: string;
-  /** `@media screen and (min-width: 48rem)` */
+  /** `@media screen and (min-width: 56.25rem)` */
   md: string;
-  /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */
+  /** `@media screen and (min-width: 56.25rem) and (max-width: 79.9975rem)` */
   mdOnly: string;
-  /** `@media screen and (max-width: 47.9975rem)` */
+  /** `@media screen and (max-width: 56.2475rem)` */
   mdDown: string;
-  /** `@media screen and (min-width: 64rem)` */
+  /** `@media screen and (min-width: 80rem)` */
   lg: string;
-  /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */
-  lgOnly: string;
-  /** `@media screen and (max-width: 63.9975rem)` */
-  lgDown: string;
   /** `@media screen and (min-width: 80rem)` */
-  xl: string;
-  /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */
-  xlOnly: string;
+  lgOnly: string;
   /** `@media screen and (max-width: 79.9975rem)` */
-  xlDown: string;
-  /** `@media screen and (min-width: 96rem)` */
-  "2xl": string;
-  /** `@media screen and (min-width: 96rem)` */
-  "2xlOnly": string;
-  /** `@media screen and (max-width: 95.9975rem)` */
-  "2xlDown": string;
-  /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */
+  lgDown: string;
+  /** `@media screen and (min-width: 22.5rem) and (max-width: 37.4975rem)` */
+  xsToSm: string;
+  /** `@media screen and (min-width: 22.5rem) and (max-width: 56.2475rem)` */
+  xsToMd: string;
+  /** `@media screen and (min-width: 22.5rem) and (max-width: 79.9975rem)` */
+  xsToLg: string;
+  /** `@media screen and (min-width: 37.5rem) and (max-width: 56.2475rem)` */
   smToMd: string;
-  /** `@media screen and (min-width: 40rem) and (max-width: 63.9975rem)` */
+  /** `@media screen and (min-width: 37.5rem) and (max-width: 79.9975rem)` */
   smToLg: string;
-  /** `@media screen and (min-width: 40rem) and (max-width: 79.9975rem)` */
-  smToXl: string;
-  /** `@media screen and (min-width: 40rem) and (max-width: 95.9975rem)` */
-  smTo2xl: string;
-  /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */
+  /** `@media screen and (min-width: 56.25rem) and (max-width: 79.9975rem)` */
   mdToLg: string;
-  /** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */
-  mdToXl: string;
-  /** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */
-  mdTo2xl: string;
-  /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */
-  lgToXl: string;
-  /** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */
-  lgTo2xl: string;
-  /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */
-  xlTo2xl: string;
-  /** `@container  (min-width: 20rem)` */
-  "@/xs": string;
-  /** `@container  (min-width: 24rem)` */
-  "@/sm": string;
-  /** `@container  (min-width: 28rem)` */
-  "@/md": string;
-  /** `@container  (min-width: 32rem)` */
-  "@/lg": string;
-  /** `@container  (min-width: 36rem)` */
-  "@/xl": string;
-  /** `@container  (min-width: 42rem)` */
-  "@/2xl": string;
-  /** `@container  (min-width: 48rem)` */
-  "@/3xl": string;
-  /** `@container  (min-width: 56rem)` */
-  "@/4xl": string;
-  /** `@container  (min-width: 64rem)` */
-  "@/5xl": string;
-  /** `@container  (min-width: 72rem)` */
-  "@/6xl": string;
-  /** `@container  (min-width: 80rem)` */
-  "@/7xl": string;
-  /** `@container  (min-width: 90rem)` */
-  "@/8xl": string;
   /** The base (=no conditions) styles to apply  */
   base: string;
 }

apps/wow-docs/styled-system/types/prop-type.d.ts

@@ -538,7 +538,6 @@ export interface UtilityValues {
     | "opacity"
     | "shadow"
     | "transform";
-  animationName: "spin" | "ping" | "pulse" | "bounce";
   rotate: "auto" | "auto-3d" | CssProperties["rotate"];
   rotateX: CssProperties["rotate"];
   rotateY: CssProperties["rotate"];

apps/wow-docs/styled-system/types/style-props.d.ts

@@ -506,12 +506,7 @@ export interface SystemProperties {
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/animation-name
    */
-  animationName?: ConditionalValue<
-    | UtilityValues["animationName"]
-    | CssVars
-    | CssProperties["animationName"]
-    | AnyString
-  >;
+  animationName?: ConditionalValue<CssProperties["animationName"] | AnyString>;
   /**
    * The **`animation-play-state`** CSS property sets whether an animation is running or paused.
    *

package.json

@@ -72,14 +72,14 @@
     "jest-dom": "link:@types/testing-library/jest-dom",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",
-    "postcss": "^8.4.38",
     "prettier": "^3.2.5",
+    "postcss": "^8.4.38",
     "rollup": "^4.17.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "shared-config": "workspace:^",
-    "theme": "workspace:^",
+    "wowds-theme": "workspace:^",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "tsc-alias": "^1.8.10",

packages/scripts/generateTokenList.ts

@@ -1,7 +1,7 @@
 import { promises as fs } from "fs";
 
 const TOKEN_DIR = "../wow-tokens/src/color.ts";
-const outputFile = "../theme/src/config/colorTokenList.ts";
+const outputFile = "../wow-theme/src/config/colorTokenList.ts";
 
 const extractTokenName = async (filePath: string): Promise<string[]> => {
   try {

packages/wow-icons/src/types/Icon.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from "react";
-import type { ColorToken } from "theme/types";
+import type { ColorToken } from "wowds-theme";
 
 export interface IconProps extends HTMLAttributes<SVGSVGElement> {
   className?: string;

packages/wow-theme/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "wowds-theme",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GDSC-Hongik/wow-design-system.git",
+    "directory": "packages/wow-theme"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "package.json"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "rm -rf dist && rollup -c --bundleConfigAsCjs && tsc --emitDeclarationOnly"
+  },
+  "devDependencies": {
+    "wowds-tokens": "workspace:^"
+  }
+}

packages/wow-theme/rollup.config.js

@@ -0,0 +1,20 @@
+import baseConfig from "../shared-config/rollup.config.js";
+import babel from "@rollup/plugin-babel";
+import typescript from "@rollup/plugin-typescript";
+
+const extensions = [".ts", ".tsx", ".js", ".jsx"];
+
+export default {
+  ...baseConfig,
+  external: ["react", "react-dom", "react/jsx-runtime", "postcss"],
+  plugins: [
+    ...baseConfig.plugins,
+    typescript(),
+    babel({
+      extensions,
+      include: ["src/**/*"],
+      babelHelpers: "runtime",
+      presets: [["react-app", { flow: false, typescript: true }]],
+    }),
+  ],
+};

packages/wow-theme/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./preset/index.ts";
+export * from "./types/index.ts";
+export * from "./utils/index.ts";