From 895044c946a46145f250ae7d23679938e7be19e8 Mon Sep 17 00:00:00 2001 From: eggmun Date: Sat, 22 Feb 2025 18:48:45 +0900 Subject: [PATCH] =?UTF-8?q?stlye:=20=EC=A0=84=EC=B2=B4=EC=A0=81=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=ED=85=8C=EB=A7=88=20=EC=83=89=EC=83=81=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/atoms/Icons/ArrowUp/ArrowUp.tsx | 3 ++- src/commons/components/atoms/Icons/Tag/Tag.tsx | 3 ++- .../components/atoms/boxes/tagBox/tagBox.css.ts | 4 ++-- .../Common/RemoteControl/RemoteControl.css.ts | 3 ++- .../Inputs/ExpandedSearch/ExpandedSearch.css.ts | 5 +++-- .../components/features/Inputs/Search/Search.css.ts | 3 ++- .../components/features/Items/Card/Card.css.ts | 3 ++- src/commons/components/widgets/Header/header.css.ts | 3 +++ src/commons/styles/globalStyles.css.ts | 12 ++++++++++++ 9 files changed, 30 insertions(+), 9 deletions(-) diff --git a/src/commons/components/atoms/Icons/ArrowUp/ArrowUp.tsx b/src/commons/components/atoms/Icons/ArrowUp/ArrowUp.tsx index 988f7c6..df7f293 100644 --- a/src/commons/components/atoms/Icons/ArrowUp/ArrowUp.tsx +++ b/src/commons/components/atoms/Icons/ArrowUp/ArrowUp.tsx @@ -1,3 +1,4 @@ +import { vars } from '@/commons/styles/globalStyles.css'; import { SVGProps } from 'react'; export default function ArrowUp({ ...props }: SVGProps) { @@ -5,7 +6,7 @@ export default function ArrowUp({ ...props }: SVGProps) { ); diff --git a/src/commons/components/atoms/Icons/Tag/Tag.tsx b/src/commons/components/atoms/Icons/Tag/Tag.tsx index 5d1526b..75aa2fa 100644 --- a/src/commons/components/atoms/Icons/Tag/Tag.tsx +++ b/src/commons/components/atoms/Icons/Tag/Tag.tsx @@ -1,3 +1,4 @@ +import { vars } from '@/commons/styles/globalStyles.css'; import { SVGProps } from 'react'; export default function Tag({ ...props }: SVGProps) { @@ -5,7 +6,7 @@ export default function Tag({ ...props }: SVGProps) { ); diff --git a/src/commons/components/atoms/boxes/tagBox/tagBox.css.ts b/src/commons/components/atoms/boxes/tagBox/tagBox.css.ts index 9f5ded6..0d98259 100644 --- a/src/commons/components/atoms/boxes/tagBox/tagBox.css.ts +++ b/src/commons/components/atoms/boxes/tagBox/tagBox.css.ts @@ -1,9 +1,9 @@ +import { vars } from '@/commons/styles/globalStyles.css'; import { style } from '@vanilla-extract/css'; export const tagBox = style({ padding: '8px 10px', borderRadius: '50px', - backgroundColor: '#6A6868', - + backgroundColor: `${vars.themeColor.color.mainBackground}`, fontSize: '12px', }); diff --git a/src/commons/components/features/Common/RemoteControl/RemoteControl.css.ts b/src/commons/components/features/Common/RemoteControl/RemoteControl.css.ts index e9911b1..6768344 100644 --- a/src/commons/components/features/Common/RemoteControl/RemoteControl.css.ts +++ b/src/commons/components/features/Common/RemoteControl/RemoteControl.css.ts @@ -1,3 +1,4 @@ +import { vars } from '@/commons/styles/globalStyles.css'; import { style } from '@vanilla-extract/css'; export const wrapper = style({ @@ -24,5 +25,5 @@ export const iconWrapper = style({ border: 'none', cursor: 'pointer', - backgroundColor: '#6A6868', + backgroundColor: `${vars.themeColor.color.secondary}`, }); diff --git a/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts b/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts index ac5bad8..b5e0554 100644 --- a/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts +++ b/src/commons/components/features/Inputs/ExpandedSearch/ExpandedSearch.css.ts @@ -1,3 +1,4 @@ +import { vars } from '@/commons/styles/globalStyles.css'; import { style } from '@vanilla-extract/css'; export const OutExpandedWrapper = style({ @@ -34,7 +35,7 @@ export const expandedWrapper = style({ width: '37rem', height: 'fit-content', - backgroundColor: '#fff', + backgroundColor: `${vars.themeColor.color.searchBarBackground}`, borderRadius: '25px', padding: '20px', @@ -49,7 +50,7 @@ export const searchInput = style({ marginBottom: '14px', backgroundColor: 'transparent', - color: '#000', + color: '#000000', fontSize: '14px', diff --git a/src/commons/components/features/Inputs/Search/Search.css.ts b/src/commons/components/features/Inputs/Search/Search.css.ts index a6a9354..cb5ae65 100644 --- a/src/commons/components/features/Inputs/Search/Search.css.ts +++ b/src/commons/components/features/Inputs/Search/Search.css.ts @@ -1,3 +1,4 @@ +import { vars } from '@/commons/styles/globalStyles.css'; import { style } from '@vanilla-extract/css'; export const wrapper = style({ @@ -5,7 +6,7 @@ export const wrapper = style({ display: 'flex', flexDirection: 'row', - backgroundColor: '#fff', + backgroundColor: `${vars.themeColor.color.searchBarBackground}`, width: '27rem', height: '3rem', diff --git a/src/commons/components/features/Items/Card/Card.css.ts b/src/commons/components/features/Items/Card/Card.css.ts index bd35cbf..f9f6e8e 100644 --- a/src/commons/components/features/Items/Card/Card.css.ts +++ b/src/commons/components/features/Items/Card/Card.css.ts @@ -1,3 +1,4 @@ +import { vars } from '@/commons/styles/globalStyles.css'; import { style } from '@vanilla-extract/css'; export const wrapper = style({ @@ -18,7 +19,7 @@ export const cardWrapper = style({ height: '320px', borderRadius: '12px', - backgroundColor: '#6A6868', + backgroundColor: `${vars.themeColor.color.secondary}`, transition: 'transform 0.5s ease-in-out', cursor: 'pointer', diff --git a/src/commons/components/widgets/Header/header.css.ts b/src/commons/components/widgets/Header/header.css.ts index 570e0ba..ee3d868 100755 --- a/src/commons/components/widgets/Header/header.css.ts +++ b/src/commons/components/widgets/Header/header.css.ts @@ -1,3 +1,4 @@ +import { vars } from '@/commons/styles/globalStyles.css'; import { style } from '@vanilla-extract/css'; export const wrapper = style({ @@ -13,6 +14,8 @@ export const wrapper = style({ export const title = style({ fontSize: '35px', + + color: `${vars.themeColor.color.mainFontColor}`, }); export const left = style({ diff --git a/src/commons/styles/globalStyles.css.ts b/src/commons/styles/globalStyles.css.ts index e7096f6..d78bd71 100755 --- a/src/commons/styles/globalStyles.css.ts +++ b/src/commons/styles/globalStyles.css.ts @@ -22,6 +22,10 @@ const themeColor = createThemeContract({ mainBackground: null, contentBackground: null, mainFontColor: null, + secondaryFontColor: null, + searchBarBackground: null, + cardBackground: null, + tagIconBackground: null, }, }); @@ -32,6 +36,10 @@ export const lightTheme = createTheme(themeColor, { mainBackground: '#ffffff', contentBackground: '#ffffff', mainFontColor: '#000000', + secondaryFontColor: '#ffffff', + searchBarBackground: '#E9E9E9', + cardBackground: '#E9E9E9', + tagIconBackground: '#ffffff', }, }); @@ -42,6 +50,10 @@ export const darkTheme = createTheme(themeColor, { mainBackground: '#000000', contentBackground: '#2c2c2c', mainFontColor: '#ffffff', + secondaryFontColor: '#000000', + searchBarBackground: '#ffffff', + cardBackground: '#6A6868', + tagIconBackground: '#343330', }, });