From 5ff9ba4f8006c6a9a8bc429b9d93a4cc605af950 Mon Sep 17 00:00:00 2001
From: Wonsuk Choi <sukvvon@gmail.com>
Date: Fri, 23 Feb 2024 15:20:23 +0900
Subject: [PATCH] =?UTF-8?q?feat(shared/styles/theme.css.ts):=20archiveColo?=
 =?UTF-8?q?r,=20grayColor,=20systemColor=EB=A1=9C=20=EA=B5=AC=EC=A1=B0=20?=
 =?UTF-8?q?=EB=B6=84=ED=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/shared/styles/src/theme.css.ts | 58 +++++++++++++++----------
 1 file changed, 34 insertions(+), 24 deletions(-)

diff --git a/packages/shared/styles/src/theme.css.ts b/packages/shared/styles/src/theme.css.ts
index bfba866..99d3ca5 100644
--- a/packages/shared/styles/src/theme.css.ts
+++ b/packages/shared/styles/src/theme.css.ts
@@ -3,6 +3,39 @@ import {
   createGlobalThemeContract,
 } from '@vanilla-extract/css';
 
+const archiveColor = {
+  archiveBlack: '#aaacb6',
+  archiveBlue: '#9570ff',
+  archiveBrightGreen: '#b4f78b',
+  archiveCoral: '#f17666',
+  archiveYellow: '#ffe279',
+  archiveMint: '#6af4b4',
+  archivePink: '#ff8fb8',
+  archivePurple: '#9570ff',
+};
+
+const grayColor = {
+  gray100: '#fafbfd',
+  gray200: '#f4f6f9',
+  gray300: '#edf0f4',
+  gray400: '#d4dbe5',
+  gray500: '#b5bfce',
+  gray600: '#9ea9ba',
+  gray700: '#838fa2',
+  gray800: '#697588',
+  gray900: '#4d5769',
+  gray1000: '#303a4b',
+  gray1100: '#1d2333',
+};
+
+const systemColor = {
+  system100: '#ffd7d7',
+  system200: '#ff8484',
+  system300: '#ff4747',
+};
+
+const color = { ...archiveColor, ...grayColor, ...systemColor };
+
 export const vars = createGlobalThemeContract({
   color: {
     archiveBlack: 'color-archive-black',
@@ -31,28 +64,5 @@ export const vars = createGlobalThemeContract({
 });
 
 createGlobalTheme(':root', vars, {
-  color: {
-    archiveBlack: '#aaacb6',
-    archiveBlue: '#9570ff',
-    archiveBrightGreen: '#b4f78b',
-    archiveCoral: '#f17666',
-    archiveYellow: '#ffe279',
-    archiveMint: '#6af4b4',
-    archivePink: '#ff8fb8',
-    archivePurple: '#9570ff',
-    gray100: '#fafbfd',
-    gray200: '#f4f6f9',
-    gray300: '#edf0f4',
-    gray400: '#d4dbe5',
-    gray500: '#b5bfce',
-    gray600: '#9ea9ba',
-    gray700: '#838fa2',
-    gray800: '#697588',
-    gray900: '#4d5769',
-    gray1000: '#303a4b',
-    gray1100: '#1d2333',
-    system100: '#ffd7d7',
-    system200: '#ff8484',
-    system300: '#ff4747',
-  },
+  color,
 });