refactor(ui/react/styles): vars.css.ts를 theme.css.ts로 통합 (#259)

* refactor(ui/react/styles): vars.css.ts를 theme.css.ts로 통합 * feat(ui/react/styles): index.ts에 theme.css.ts 추가 * chore(ui/react/package.json): exports에 theme.css.ts 경로 추가 * refactor(ui/react/components): theme.css.ts 변경사항 반영 * refactor(apps/web/components/Layout/Header/styles.css.ts): theme.css.ts 변경사항 반영 * feat(ui/react/styles/enum): color, background-color 삭제 * refactor(ui/react/components/typography): background, color 삭제로 인한 변경사항 반영
dnd-side-project · Jul 23, 2024 · 7a4dea7 · 7a4dea7
1 parent b52baaf
commit 7a4dea7
Show file tree

Hide file tree

Showing 20 changed files with 133 additions and 237 deletions.
diff --git a/apps/web/src/components/Layout/components/Header/styles.css.ts b/apps/web/src/components/Layout/components/Header/styles.css.ts
@@ -1,9 +1,9 @@
-import { vars } from '@favolink-ui/react/vars.css';
+import { vars } from '@favolink-ui/react/theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const header = style([
   {
-    color: vars.color.archive.coral,
-    backgroundColor: vars.color.archive.yellow,
+    color: vars.palette.archiveCoral,
+    backgroundColor: vars.palette.archiveYellow,
   },
 ]);
diff --git a/packages/ui/react/package.json b/packages/ui/react/package.json
@@ -5,9 +5,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./reset.css": "./src/styles/reset.css.ts",
-    "./vars.css": "./src/styles/vars.css.ts",
-    "./theme.css": "./src/styles/theme.css.ts",
-    "./utilities.css": "./src/styles/utilities/index.ts"
+    "./theme.css": "./src/styles/theme.css.ts"
   },
   "scripts": {
     "lint": "eslint \"**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts}\""

diff --git a/packages/ui/react/src/components/button/button.styles.css.ts b/packages/ui/react/src/components/button/button.styles.css.ts
@@ -1,26 +1,13 @@
-import { type ComplexStyleRule, createVar, style } from '@vanilla-extract/css';
+import { createVar, style, styleVariants } from '@vanilla-extract/css';
 import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import { type CSSProperties } from 'react';
+import { archivePalette, inherencePalette, vars } from '../../styles/';
 import { enumStyles } from '../../styles/utils';
-import { vars } from '../../styles/vars.css';
 
 const {
   body: { body3Regular },
   heading: { h6Semibold },
 } = enumStyles;
 
-function makeButtonColorSchemeVar(
-  color: CSSProperties['color'],
-): ComplexStyleRule {
-  return {
-    vars: {
-      [colorScheme]: color as string,
-    },
-  };
-}
-
-const colorScheme = createVar();
-
 const base = style({
   display: 'inline-flex',
   alignItems: 'center',
@@ -34,26 +21,25 @@ const base = style({
   minWidth: 72,
 });
 
+const colorSchemeVar = createVar();
+
+const colorSchemePalette = {
+  ...archivePalette,
+  ...inherencePalette,
+};
+
+const colorScheme = styleVariants(
+  colorSchemePalette,
+  (_, colorSchemePaletteKey) => ({
+    vars: { [colorSchemeVar]: vars.palette[colorSchemePaletteKey] },
+  }),
+);
+
 export const buttonVariants = recipe({
   base,
 
   variants: {
-    colorScheme: {
-      archiveBlack: makeButtonColorSchemeVar(vars.color.archive.black),
-      archiveBlue: makeButtonColorSchemeVar(vars.color.archive.blue),
-      archiveBrightGreen: makeButtonColorSchemeVar(
-        vars.color.archive.brightGreen,
-      ),
-      archiveCoral: makeButtonColorSchemeVar(vars.color.archive.coral),
-      archiveMint: makeButtonColorSchemeVar(vars.color.archive.mint),
-      archivePink: makeButtonColorSchemeVar(vars.color.archive.pink),
-      archivePurple: makeButtonColorSchemeVar(vars.color.archive.purple),
-      archiveYellow: makeButtonColorSchemeVar(vars.color.archive.yellow),
-      black: makeButtonColorSchemeVar(vars.color.gray[1000]),
-      gray: makeButtonColorSchemeVar(vars.color.gray[400]),
-      white: makeButtonColorSchemeVar('white'),
-      red: makeButtonColorSchemeVar(vars.color.system[300]),
-    },
+    colorScheme,
     justify: {
       center: {
         justifyContent: 'center',
@@ -64,19 +50,19 @@ export const buttonVariants = recipe({
     },
     variant: {
       solid: {
-        backgroundColor: colorScheme,
-        border: `1px solid ${colorScheme}`,
-        color: 'white',
+        backgroundColor: colorSchemeVar,
+        border: `1px solid ${colorSchemeVar}`,
+        color: vars.palette.white,
       },
       outline: {
-        color: vars.color.gray[1100],
         backgroundColor: 'inherit',
-        border: `1px solid ${colorScheme}`,
+        border: `1px solid ${colorSchemeVar}`,
+        color: vars.palette.gray1000,
       },
     },
-    text: {
-      normal: [body3Regular],
-      strength: [h6Semibold],
+    weight: {
+      regular: [body3Regular],
+      semibold: [h6Semibold],
     },
     radius: {
       normal: {
@@ -97,19 +83,23 @@ export const buttonVariants = recipe({
     colorScheme: 'white',
     justify: 'center',
     variant: 'solid',
-    text: 'normal',
+    weight: 'regular',
     radius: 'normal',
     width: undefined,
   },
 
   compoundVariants: [
     {
       variants: {
-        colorScheme: 'white',
+        colorScheme: 'black',
         variant: 'solid',
       },
       style: {
-        color: vars.color.gray[1100],
+        ':disabled': {
+          backgroundColor: vars.palette.gray400,
+          border: `1px solid ${vars.palette.gray400}`,
+          color: vars.palette.gray200,
+        },
       },
     },
   ],

diff --git a/packages/ui/react/src/components/button/button.tsx b/packages/ui/react/src/components/button/button.tsx
@@ -24,7 +24,7 @@ export const Button = forwardRef<ButtonProps, 'button'>(
       colorScheme,
       justify,
       variant,
-      text,
+      weight,
       radius,
       width,
       ...restProps
@@ -43,7 +43,7 @@ export const Button = forwardRef<ButtonProps, 'button'>(
             colorScheme,
             justify,
             variant,
-            text,
+            weight,
             radius,
             width,
           }),

diff --git a/packages/ui/react/src/components/button/icon-button.styles.css.ts b/packages/ui/react/src/components/button/icon-button.styles.css.ts
@@ -23,7 +23,7 @@ export const iconButton = recipe({
   },
 
   defaultVariants: {
-    colorScheme: 'white',
+    colorScheme: 'archiveBlack',
     size: 'small',
   },
 });

diff --git a/packages/ui/react/src/components/input/input.styles.css.ts b/packages/ui/react/src/components/input/input.styles.css.ts
@@ -1,8 +1,8 @@
 import { style } from '@vanilla-extract/css';
 import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
 import { inputElement } from './input-element.styles.css';
+import { vars } from '../../styles';
 import { enumStyles } from '../../styles/utils/enum';
-import { vars } from '../../styles/vars.css';
 
 const {
   body: { body3Medium },
@@ -25,7 +25,7 @@ export const input = recipe({
     {
       boxSizing: 'border-box',
       width: '100%',
-      color: vars.color.gray[1000],
+      color: vars.palette.gray1000,
       transition: 'border 0.2s ease',
       outline: 'none',
     },
@@ -34,33 +34,33 @@ export const input = recipe({
   variants: {
     variant: {
       outline: {
-        border: `1px solid ${vars.color.gray[300]}`,
+        border: `1px solid ${vars.palette.gray300}`,
         borderRadius: 8,
         padding: '10px 12px',
 
         selectors: {
           '&:disabled': {
-            backgroundColor: vars.color.gray[300],
+            backgroundColor: vars.palette.gray300,
           },
           '&:focus': {
-            border: `1px solid ${vars.color.gray[900]}`,
+            border: `1px solid ${vars.palette.gray900}`,
           },
           '&::placeholder': {
-            color: vars.color.gray[500],
+            color: vars.palette.gray500,
           },
         },
       },
       flushed: {
         border: 'none',
-        borderBottom: `1px solid ${vars.color.gray[300]}`,
+        borderBottom: `1px solid ${vars.palette.gray300}`,
         padding: '10px 0',
 
         selectors: {
           '&:focus': {
-            borderBottom: `1px solid ${vars.color.gray[900]}`,
+            borderBottom: `1px solid ${vars.palette.gray900}`,
           },
           '&::placeholder': {
-            color: vars.color.gray[500],
+            color: vars.palette.gray500,
           },
         },
       },

diff --git a/packages/ui/react/src/components/link/link-styles.css.ts b/packages/ui/react/src/components/link/link-styles.css.ts
@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
 import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
+import { vars } from '../../styles';
 import { enumStyles } from '../../styles/utils';
-import { vars } from '../../styles/vars.css';
 
 const {
   body: { body3Medium },
@@ -25,7 +25,7 @@ export const link = recipe({
   variants: {
     color: {
       white: { color: 'white' },
-      gray: { color: vars.color.gray[400] },
+      gray: { color: vars.palette.gray400 },
       black: { color: 'black' },
     },
   },

diff --git a/packages/ui/react/src/components/modal/modal-content.styles.css.ts b/packages/ui/react/src/components/modal/modal-content.styles.css.ts
@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '../../styles/vars.css';
+import { vars } from '../../styles';
 
 export const modalContentBase = style({
   display: 'flex',
@@ -11,6 +11,6 @@ export const modalContentBase = style({
   flexDirection: 'column',
   padding: '20px 24px',
   maxWidth: 'max-content',
-  backgroundColor: vars.color.gray[200],
+  backgroundColor: vars.palette.gray200,
   borderRadius: 20,
 });
diff --git a/packages/ui/react/src/components/modal/modal-title.styles.css.ts b/packages/ui/react/src/components/modal/modal-title.styles.css.ts
@@ -1,9 +1,9 @@
 import { style } from '@vanilla-extract/css';
 import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import { vars } from '../../styles/vars.css';
+import { vars } from '../../styles';
 
 const base = style({
-  color: vars.color.gray[1000],
+  color: vars.palette.gray1000,
 });
 
 export const modalTitleVariants = recipe({

diff --git a/packages/ui/react/src/components/tag/tag-label.styles.css.ts b/packages/ui/react/src/components/tag/tag-label.styles.css.ts
@@ -1,9 +1,9 @@
 import { style } from '@vanilla-extract/css';
 import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import { vars } from '../../styles/vars.css';
+import { vars } from '../../styles';
 
 export const tagLabelAsIcon = style({
-  color: vars.color.gray[400],
+  color: vars.palette.gray400,
 });
 
 export const tagLabel = recipe({

diff --git a/packages/ui/react/src/components/tag/tag.styles.css.ts b/packages/ui/react/src/components/tag/tag.styles.css.ts
@@ -1,37 +1,20 @@
-import { type ComplexStyleRule, style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
+import { archivePalette, vars } from '../../styles';
 import { enumStyles } from '../../styles/utils';
-import { vars } from '../../styles/vars.css';
 
 const {
   body: { body3Medium, body4Medium },
 } = enumStyles;
 
-function createTagColorScheme(
-  color: keyof typeof vars.color.repo.bg,
-): ComplexStyleRule {
-  return {
-    color: vars.color.repo.text[color],
-    backgroundColor: vars.color.repo.bg[color],
-    border: `1px solid ${vars.color.repo.bg[color]}`,
-  };
-}
-
-export const colorScheme = {
-  black: createTagColorScheme('black'),
-  blue: createTagColorScheme('blue'),
-  brightGreen: createTagColorScheme('brightGreen'),
-  coral: createTagColorScheme('coral'),
-  mint: createTagColorScheme('mint'),
-  pink: createTagColorScheme('pink'),
-  purple: createTagColorScheme('purple'),
-  yellow: createTagColorScheme('yellow'),
-  white: {
-    color: vars.color.repo.text.black,
-    backgroundColor: 'white',
-    border: `1px solid ${vars.color.gray[300]}`,
-  },
-} satisfies Record<string, ComplexStyleRule>;
+export const colorScheme = styleVariants(
+  archivePalette,
+  (archivePaletteValue, archivePaletteKey) => ({
+    color: vars.palette[archivePaletteKey],
+    backgroundColor: archivePaletteValue,
+    border: `1px solid ${archivePaletteValue}`,
+  }),
+);
 
 const base = style({
   display: 'inline-flex',
@@ -52,7 +35,7 @@ export const tag = recipe({
   },
 
   defaultVariants: {
-    colorScheme: 'white',
+    colorScheme: 'archiveBlack',
     size: 'small',
   },
 });

diff --git a/packages/ui/react/src/components/toast/toast.styles.css.ts b/packages/ui/react/src/components/toast/toast.styles.css.ts
@@ -1,9 +1,9 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '../../styles/vars.css';
+import { vars } from '../../styles';
 
 export const toastItemBase = style({
   width: '100%',
-  backgroundColor: vars.color.gray[800],
+  backgroundColor: vars.palette.gray800,
   borderRadius: 20,
   padding: '15px 28px',
   display: 'flex',

diff --git a/packages/ui/react/src/components/typography/heading.styles.css.ts b/packages/ui/react/src/components/typography/heading.styles.css.ts
@@ -1,13 +1,15 @@
+import { styleVariants } from '@vanilla-extract/css';
 import { type RecipeVariants, recipe } from '@vanilla-extract/recipes';
+import { grayPalette, systemPalette, vars } from '../../styles';
 import { enumStyles } from '../../styles/utils';
 
-const {
-  textAlign: align,
-  color,
-  heading,
-  truncate,
-  textWrap: wrap,
-} = enumStyles;
+const { textAlign: align, heading, truncate, textWrap: wrap } = enumStyles;
+
+const colorPalette = { ...grayPalette, ...systemPalette };
+
+const color = styleVariants(colorPalette, (_, colorPaletteKey) => ({
+  color: vars.palette[colorPaletteKey],
+}));
 
 export const headingVariants = recipe({
   variants: {