refactor(ui/react/components): styles 변경사항 반영

dnd-side-project · May 25, 2024 · d67cb91 · d67cb91
1 parent 4256d29
commit d67cb91
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 35 deletions.
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,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',
   },
 });

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,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],
       },
     },
   },

diff --git a/packages/ui/react/src/components/layout/index.ts b/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';
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,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' },
 });
 

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/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,
 });
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, 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({

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,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],
 });
diff --git a/packages/ui/react/src/components/tag/tag.styles.css.ts b/packages/ui/react/src/components/tag/tag.styles.css.ts
@@ -5,7 +5,7 @@ import {
 } 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',
@@ -33,7 +33,7 @@ export const tagColorScheme = styleVariants({
   white: {
     ...createColorScheme('black'),
     backgroundColor: 'white',
-    border: `1px solid ${vars.color.gray300}`,
+    border: `1px solid ${vars.color.gray[300]}`,
   },
 });
 

diff --git a/packages/ui/react/src/components/tag/tag.theme.css.ts b/packages/ui/react/src/components/tag/tag.theme.css.ts
@@ -1,5 +1,5 @@
 import { createTheme, createThemeContract } from '@vanilla-extract/css';
-import { vars as globalVars } from '../../styles/theme.css';
+import { vars as globalVars } from '../../styles/vars.css';
 
 export const tagVars = createThemeContract({
   normal: {
@@ -28,13 +28,13 @@ export type TagColor = keyof typeof tagVars.normal;
 
 export const tagColor = createTheme(tagVars, {
   normal: {
-    black: globalVars.color.gray700,
+    black: globalVars.color.gray[700],
     blue: '#2c84ec',
     brightGreen: '#5db924',
-    coral: globalVars.color.coral,
+    coral: globalVars.color.archive.coral,
     mint: '#15c27a',
     pink: '#ff4cbc',
-    purple: globalVars.color.purple,
+    purple: globalVars.color.archive.purple,
     yellow: '#ff8a35',
   },
   light: {

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/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',