refactor(ui/react): 기존 theme.css.ts vars.css.ts로 분리, tag 관련 색상 전역으로 통합

apps/web/src/components/Layout/components/Header/styles.css.ts

@@ -1,11 +1,11 @@
 import { h1SemiBold } from '@favolink-ui/react/text.css';
-import { vars } from '@favolink-ui/react/theme.css';
+import { vars } from '@favolink-ui/react/vars.css';
 import { style } from '@vanilla-extract/css';
 
 export const header = style([
   h1SemiBold,
   {
-    color: vars.color.coral,
-    backgroundColor: vars.color.yellow,
+    color: vars.color.archive.coral,
+    backgroundColor: vars.color.archive.yellow,
   },
 ]);

packages/ui/react/package.json

@@ -6,6 +6,7 @@
     ".": "./src/index.ts",
     "./reset.css": "./src/styles/reset.css.ts",
     "./text.css": "./src/styles/text.css.ts",
+    "./vars.css": "./src/styles/vars.css.ts",
     "./theme.css": "./src/styles/theme.css.ts"
   },
   "scripts": {

packages/ui/react/src/components/button/button.styles.css.ts

@@ -1,6 +1,6 @@
 import { style, styleVariants } from '@vanilla-extract/css';
 import { h5Bold, h6SemiBold } from '../../styles/text.css';
-import { vars } from '../../styles/theme.css';
+import { vars } from '../../styles/vars.css';
 
 export const buttonBase = style({
   borderRadius: 8,
@@ -17,23 +17,23 @@ export type ButtonSize = keyof typeof buttonSize;
 
 export const buttonColorScheme = styleVariants({
   gray: {
-    backgroundColor: vars.color.gray400,
-    border: `1px solid ${vars.color.gray400}`,
-    color: vars.color.gray200,
+    backgroundColor: vars.color.gray[400],
+    border: `1px solid ${vars.color.gray[400]}`,
+    color: vars.color.gray[200],
   },
   black: {
-    backgroundColor: vars.color.gray1000,
-    border: `1px solid ${vars.color.gray1000}`,
+    backgroundColor: vars.color.gray[1000],
+    border: `1px solid ${vars.color.gray[1000]}`,
     color: 'white',
   },
   white: {
     backgroundColor: 'white',
-    border: `1px solid ${vars.color.gray300}`,
-    color: vars.color.gray900,
+    border: `1px solid ${vars.color.gray[300]}`,
+    color: vars.color.gray[900],
   },
   red: {
-    backgroundColor: vars.color.system300,
-    border: `1px solid ${vars.color.system300}`,
+    backgroundColor: vars.color.system[300],
+    border: `1px solid ${vars.color.system[300]}`,
     color: 'white',
   },
 });

packages/ui/react/src/components/button/icon-button.tsx

@@ -6,7 +6,6 @@ import {
 } from '@favolink-ui/system';
 import { cx } from '@favolink-ui/utils';
 import * as styles from './icon-button.styles.css';
-import * as theme from './icon-button.theme.css';
 
 export type IconButtonProps = HTMLFavolinkProps<'button'> & {
   icon: ReactElement;
@@ -30,7 +29,6 @@ export const IconButton = forwardRef<IconButtonProps, 'button'>(
         ref={ref}
         className={cx(
           'favolink-button',
-          theme.iconButtonColor,
           styles.iconButtonBase,
           styles.iconButtonSize[size],
           styles.iconButtoncolorScheme[colorScheme],

packages/ui/react/src/components/input/input.styles.css.ts

@@ -1,48 +1,48 @@
 import { style, styleVariants } from '@vanilla-extract/css';
 import { inputElementDirection } from './input-element.styles.css';
 import { body3Medium } from '../../styles/text.css';
-import { vars } from '../../styles/theme.css';
+import { vars } from '../../styles/vars.css';
 
 export const inputBase = style([
   body3Medium,
   {
     boxSizing: 'border-box',
     width: '100%',
-    color: vars.color.gray1000,
+    color: vars.color.gray[1000],
     transition: 'border 0.2s ease',
     outline: 'none',
   },
 ]);
 
 export const inputVariant = styleVariants({
   outline: {
-    border: `1px solid ${vars.color.gray300}`,
+    border: `1px solid ${vars.color.gray[300]}`,
     borderRadius: 8,
     padding: '10px 12px',
 
     selectors: {
       '&:disabled': {
-        backgroundColor: vars.color.gray300,
+        backgroundColor: vars.color.gray[300],
       },
       '&:focus': {
-        border: `1px solid ${vars.color.gray900}`,
+        border: `1px solid ${vars.color.gray[900]}`,
       },
       '&::placeholder': {
-        color: vars.color.gray500,
+        color: vars.color.gray[500],
       },
     },
   },
   flushed: {
     border: 'none',
-    borderBottom: `1px solid ${vars.color.gray300}`,
+    borderBottom: `1px solid ${vars.color.gray[300]}`,
     padding: '10px 0',
 
     selectors: {
       '&:focus': {
-        borderBottom: `1px solid ${vars.color.gray900}`,
+        borderBottom: `1px solid ${vars.color.gray[900]}`,
       },
       '&::placeholder': {
-        color: vars.color.gray500,
+        color: vars.color.gray[500],
       },
     },
   },

packages/ui/react/src/components/layout/index.ts

@@ -4,4 +4,5 @@ export {
   type CSSPropertyValue,
 } from './create-css-property-style-variants';
 
+export { Box } from './box';
 export { Flex, type FlexProps } from './flex';

packages/ui/react/src/components/link/link-styles.css.ts

@@ -1,6 +1,6 @@
 import { style, styleVariants } from '@vanilla-extract/css';
 import { body3Medium } from '../../styles/text.css';
-import { vars } from '../../styles/theme.css';
+import { vars } from '../../styles/vars.css';
 
 export const linkBase = style([
   body3Medium,
@@ -18,7 +18,7 @@ export const linkBase = style([
 
 export const linkColor = styleVariants({
   white: { color: 'white' },
-  gray: { color: vars.color.gray400 },
+  gray: { color: vars.color.gray[400] },
   black: { color: 'black' },
 });
 

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/theme.css';
+import { vars } from '../../styles/vars.css';
 
 export const modalContentBase = style({
   display: 'flex',
@@ -9,6 +9,6 @@ export const modalContentBase = style({
   flexDirection: 'column',
   padding: 24,
   minWidth: 300,
-  backgroundColor: vars.color.gray200,
+  backgroundColor: vars.color.gray[200],
   borderRadius: 20,
 });

packages/ui/react/src/components/modal/modal-title.styles.css.ts

@@ -1,9 +1,9 @@
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
+import { vars } from '../../styles/vars.css';
 
 export const modalTitleBase = style({
   display: 'flex',
-  color: vars.color.gray1000,
+  color: vars.color.gray[1000],
 });
 
 export const modalTitleContainerLayout = styleVariants({

packages/ui/react/src/components/tag/tag-label.styles.css.ts

@@ -1,5 +1,5 @@
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
+import { vars } from '../../styles/vars.css';
 
 export const tagLabelBase = style({
   display: 'flex',
@@ -15,5 +15,5 @@ export const tagLabelSize = styleVariants({
 export type TagLabelSize = keyof typeof tagLabelSize;
 
 export const tagLabelAsIcon = style({
-  color: vars.color.gray400,
+  color: vars.color.gray[400],
 });

packages/ui/react/src/components/tag/tag.styles.css.ts

@@ -3,9 +3,8 @@ import {
   style,
   styleVariants,
 } from '@vanilla-extract/css';
-import { type TagColor, tagVars } from './tag.theme.css';
 import { body3Medium, body4Medium } from '../../styles/text.css';
-import { vars } from '../../styles/theme.css';
+import { vars } from '../../styles/vars.css';
 
 export const tagBase = style({
   display: 'inline-flex',
@@ -22,27 +21,29 @@ export const tagSize = styleVariants({
 export type TagSize = keyof typeof tagSize;
 
 export const tagColorScheme = styleVariants({
-  black: createColorScheme('black'),
-  blue: createColorScheme('blue'),
-  brightGreen: createColorScheme('brightGreen'),
-  coral: createColorScheme('coral'),
-  mint: createColorScheme('mint'),
-  pink: createColorScheme('pink'),
-  purple: createColorScheme('purple'),
-  yellow: createColorScheme('yellow'),
+  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: {
-    ...createColorScheme('black'),
+    ...createTagColorScheme('black'),
     backgroundColor: 'white',
-    border: `1px solid ${vars.color.gray300}`,
+    border: `1px solid ${vars.color.gray[300]}`,
   },
 });
 
 export type TagColorScheme = keyof typeof tagColorScheme;
 
-function createColorScheme(color: TagColor): ComplexStyleRule {
+function createTagColorScheme(
+  color: keyof typeof vars.color.repo.bg,
+): ComplexStyleRule {
   return {
-    color: tagVars.normal[color],
-    backgroundColor: tagVars.light[color],
-    border: `1px solid ${tagVars.light[color]}`,
+    color: vars.color.repo.text[color],
+    backgroundColor: vars.color.repo.bg[color],
+    border: `1px solid ${vars.color.repo.bg[color]}`,
   };
 }

packages/ui/react/src/components/tag/tag.tsx

@@ -6,7 +6,6 @@ import {
 import { cx } from '@favolink-ui/utils';
 import { TagStylesContextProvider } from './tag.context';
 import * as styles from './tag.styles.css';
-import * as theme from './tag.theme.css';
 
 export type TagProps = HTMLFavolinkProps<'span'> & {
   colorScheme?: styles.TagColorScheme;
@@ -29,7 +28,6 @@ export const Tag = forwardRef<TagProps, 'span'>(function Tag(props, ref) {
         ref={ref}
         className={cx(
           'favolink-tag',
-          theme.tagColor,
           styles.tagBase,
           styles.tagSize[size],
           styles.tagColorScheme[colorScheme],

packages/ui/react/src/components/toast/toast.styles.css.ts

@@ -1,9 +1,9 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
+import { vars } from '../../styles/vars.css';
 
 export const toastItemBase = style({
   width: '100%',
-  backgroundColor: vars.color.gray800,
+  backgroundColor: vars.color.gray[800],
   borderRadius: 20,
   padding: '15px 28px',
   display: 'flex',

packages/ui/react/src/styles/color.ts

@@ -0,0 +1,52 @@
+export const ARCHIVE_COLOR = {
+  black: '#aaacb6',
+  blue: '#9570ff',
+  brightGreen: '#b4f78b',
+  coral: '#f17666',
+  mint: '#6af4b4',
+  pink: '#ff8fb8',
+  purple: '#9570ff',
+  yellow: '#ffe279',
+} as const;
+
+export const GRAY_COLOR = {
+  100: '#fafbfd',
+  200: '#f4f6f9',
+  300: '#edf0f4',
+  400: '#d4dbe5',
+  500: '#b5bfce',
+  600: '#9ea9ba',
+  700: '#838fa2',
+  800: '#697588',
+  900: '#4d5769',
+  1000: '#303a4b',
+  1100: '#1d2333',
+} as const;
+
+export const SYSTEM_COLOR = {
+  100: '#ffd7d7',
+  200: '#ff8484',
+  300: '#ff4747',
+} as const;
+
+export const REPO_TEXT_COLOR = {
+  black: GRAY_COLOR[700],
+  blue: '#2c84ec',
+  brightGreen: '#5db924',
+  coral: ARCHIVE_COLOR.coral,
+  mint: '#15c27a',
+  pink: '#ff4cbc',
+  purple: ARCHIVE_COLOR.purple,
+  yellow: '#ff8a35',
+} as const;
+
+export const REPO_BG_COLOR = {
+  black: '#aaacb615',
+  blue: '#6bafff20',
+  brightGreen: '#b4f78b40',
+  coral: '#f1766615',
+  mint: '#6af4ba30',
+  pink: '#ff8fb820',
+  purple: '#9570ff15',
+  yellow: '#ffe27940',
+} as const;