feat(ui/react/components): tag color 전역으로 설정에 따른 iconButton, tag에 변경사…

…항 반영
dnd-side-project · May 25, 2024 · 674bacc · 674bacc
1 parent 2693e9f
commit 674bacc
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 73 deletions.
diff --git a/packages/ui/react/src/components/button/icon-button.theme.css.ts b/packages/ui/react/src/components/button/icon-button.theme.css.ts
diff --git a/packages/ui/react/src/components/button/icon-button.tsx b/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],

diff --git a/packages/ui/react/src/components/tag/tag.styles.css.ts b/packages/ui/react/src/components/tag/tag.styles.css.ts
@@ -3,7 +3,6 @@ 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/vars.css';
 
@@ -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.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]}`,
   };
 }
diff --git a/packages/ui/react/src/components/tag/tag.theme.css.ts b/packages/ui/react/src/components/tag/tag.theme.css.ts
diff --git a/packages/ui/react/src/components/tag/tag.tsx b/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],