From b66e6eed6b9c6e5e39b6f2405ce355a7814ee377 Mon Sep 17 00:00:00 2001 From: Jun Date: Sun, 22 Oct 2023 13:07:11 +0900 Subject: [PATCH 1/6] chore: update mds-colors version --- package.json | 2 +- yarn.lock | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 747261104..f40267782 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "@radix-ui/react-slot": "^1.0.1", "@radix-ui/react-tabs": "^1.0.2", "@radix-ui/react-tooltip": "^1.0.5", - "@sopt-makers/colors": "^1.0.0", + "@sopt-makers/colors": "^2.2.0", "@tanstack/react-query": "^4.27.0", "await-to-js": "^3.0.0", "axios": "^0.27.2", diff --git a/yarn.lock b/yarn.lock index e0462ebe1..a769ffd5d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4951,10 +4951,10 @@ __metadata: languageName: node linkType: hard -"@sopt-makers/colors@npm:^1.0.0": - version: 1.0.0 - resolution: "@sopt-makers/colors@npm:1.0.0" - checksum: 4b5ee37a6d67f51289d9f14ff40e833670054694d31ff73329b8c0b857e75b7838ccd2ee0bdcc8caabd000ca5f9b44a808ea919536673cfc8674fde4c96d61bd +"@sopt-makers/colors@npm:^2.2.0": + version: 2.2.0 + resolution: "@sopt-makers/colors@npm:2.2.0" + checksum: 29146fa24433fa947c53ba6dd52433bc681d0857ae0690100f5dfb6e12471d0561991a6b2f121502f480f2887c34ccb04b531b76f8e3afdd5cdd68284fe3d1a1 languageName: node linkType: hard @@ -17709,7 +17709,7 @@ __metadata: "@radix-ui/react-slot": ^1.0.1 "@radix-ui/react-tabs": ^1.0.2 "@radix-ui/react-tooltip": ^1.0.5 - "@sopt-makers/colors": ^1.0.0 + "@sopt-makers/colors": ^2.2.0 "@storybook/addon-actions": ^7.0.23 "@storybook/addon-docs": ^7.0.23 "@storybook/addon-essentials": ^7.0.23 From a26e8979aaac752e8375e58464125fdd1612cf21 Mon Sep 17 00:00:00 2001 From: Jun Date: Sun, 22 Oct 2023 13:07:31 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20red=20color=20error=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Button/style.ts | 2 +- src/components/common/ImageUploader/Legacy.tsx | 2 +- src/components/common/ImageUploader/index.tsx | 2 +- src/components/common/Input/ErrorMessage.tsx | 2 +- src/components/common/Input/index.tsx | 4 ++-- src/components/common/Select/index.tsx | 4 ++-- src/components/common/Text/index.tsx | 2 +- src/components/common/TextArea/index.tsx | 4 ++-- src/components/common/form/FormItem.tsx | 2 +- src/components/members/common/select/Select.tsx | 4 ++-- src/components/members/upload/forms/CountableInput.tsx | 4 ++-- src/components/members/upload/forms/CountableTextArea.tsx | 4 ++-- src/components/projects/upload/form/ListImageUploader.tsx | 4 ++-- .../projects/upload/form/fields/member/MemberSearch.tsx | 4 ++-- src/components/wordchain/WordchainChatting/index.tsx | 8 ++++---- 15 files changed, 26 insertions(+), 26 deletions(-) diff --git a/src/components/common/Button/style.ts b/src/components/common/Button/style.ts index 7632d929c..4e0309b5d 100644 --- a/src/components/common/Button/style.ts +++ b/src/components/common/Button/style.ts @@ -14,7 +14,7 @@ export const buttonStyles: Record = { color: ${colors.black100}; `, danger: css` - background-color: ${colors.red100}; + background-color: ${colors.error}; color: ${colors.gray40}; `, }; diff --git a/src/components/common/ImageUploader/Legacy.tsx b/src/components/common/ImageUploader/Legacy.tsx index 69862db63..0c4658039 100644 --- a/src/components/common/ImageUploader/Legacy.tsx +++ b/src/components/common/ImageUploader/Legacy.tsx @@ -86,7 +86,7 @@ const Container = styled.div error && css` - border: 1px solid ${colors.red100}; + border: 1px solid ${colors.error}; `} `; diff --git a/src/components/common/ImageUploader/index.tsx b/src/components/common/ImageUploader/index.tsx index 5732d5113..fa6415a20 100644 --- a/src/components/common/ImageUploader/index.tsx +++ b/src/components/common/ImageUploader/index.tsx @@ -161,7 +161,7 @@ const Container = styled.div & { er ${({ error }) => error && css` - border: 1px solid ${colors.red100}; + border: 1px solid ${colors.error}; `} `; diff --git a/src/components/common/Input/ErrorMessage.tsx b/src/components/common/Input/ErrorMessage.tsx index 3d63b4974..5d7478d6c 100644 --- a/src/components/common/Input/ErrorMessage.tsx +++ b/src/components/common/Input/ErrorMessage.tsx @@ -38,7 +38,7 @@ const StyledErrorWrapper = styled.div` const StyledErrorMessage = styled(Text)` white-space: pre-line; - color: ${colors.red100}; + color: ${colors.error}; ${textStyles.SUIT_12_M} `; diff --git a/src/components/common/Input/index.tsx b/src/components/common/Input/index.tsx index eba831b7b..648c338c7 100644 --- a/src/components/common/Input/index.tsx +++ b/src/components/common/Input/index.tsx @@ -107,10 +107,10 @@ const StyledInput = styled.input` ${({ error }) => error && css` - border-color: ${colors.red100}; + border-color: ${colors.error}; :focus { - border-color: ${colors.red100}; + border-color: ${colors.error}; } `} `; diff --git a/src/components/common/Select/index.tsx b/src/components/common/Select/index.tsx index c80317e96..588e8dd39 100644 --- a/src/components/common/Select/index.tsx +++ b/src/components/common/Select/index.tsx @@ -44,10 +44,10 @@ const StyledSelect = styled.select>` ${({ error }) => error && css` - border-color: ${colors.red100}; + border-color: ${colors.error}; :focus { - border-color: ${colors.red100}; + border-color: ${colors.error}; } `} `; diff --git a/src/components/common/Text/index.tsx b/src/components/common/Text/index.tsx index 706c10ab5..0c386efe8 100644 --- a/src/components/common/Text/index.tsx +++ b/src/components/common/Text/index.tsx @@ -44,7 +44,7 @@ const StyledText = styled.span` css` ${textStyles.SUIT_12_M} - color: ${colors.red100}; + color: ${colors.error}; `} ${space} `; diff --git a/src/components/common/TextArea/index.tsx b/src/components/common/TextArea/index.tsx index 9f7b3b1eb..7e243b321 100644 --- a/src/components/common/TextArea/index.tsx +++ b/src/components/common/TextArea/index.tsx @@ -64,10 +64,10 @@ const StyledTextArea = styled.textarea` ${({ error }) => error && css` - border-color: ${colors.red100}; + border-color: ${colors.error}; :focus { - border-color: ${colors.red100}; + border-color: ${colors.error}; } `} `; diff --git a/src/components/common/form/FormItem.tsx b/src/components/common/form/FormItem.tsx index 0643fb3c2..607670827 100644 --- a/src/components/common/form/FormItem.tsx +++ b/src/components/common/form/FormItem.tsx @@ -42,6 +42,6 @@ const StyledErrorWrapper = styled.div` `; const StyledErrorMessage = styled(Text)` - color: ${colors.red100}; + color: ${colors.error}; ${textStyles.SUIT_12_M} `; diff --git a/src/components/members/common/select/Select.tsx b/src/components/members/common/select/Select.tsx index f89a51310..4b88a9b47 100644 --- a/src/components/members/common/select/Select.tsx +++ b/src/components/members/common/select/Select.tsx @@ -135,11 +135,11 @@ const StyledTrigger = styled.div>` ${({ error }) => error && css` - border-color: ${colors.red100}; + border-color: ${colors.error}; &:focus { outline: none; - border-color: ${colors.red100}; + border-color: ${colors.error}; } `}; diff --git a/src/components/members/upload/forms/CountableInput.tsx b/src/components/members/upload/forms/CountableInput.tsx index e9a2924a7..b0fcb6b6f 100644 --- a/src/components/members/upload/forms/CountableInput.tsx +++ b/src/components/members/upload/forms/CountableInput.tsx @@ -68,10 +68,10 @@ const StyledInput = styled.input>` ${({ error }) => error && css` - border-color: ${colors.red100}; + border-color: ${colors.error}; :focus { - border-color: ${colors.red100}; + border-color: ${colors.error}; } `} `; diff --git a/src/components/members/upload/forms/CountableTextArea.tsx b/src/components/members/upload/forms/CountableTextArea.tsx index 62edfe94c..8bcb97544 100644 --- a/src/components/members/upload/forms/CountableTextArea.tsx +++ b/src/components/members/upload/forms/CountableTextArea.tsx @@ -73,10 +73,10 @@ const StyledTextArea = styled.textarea` ${({ error }) => error && css` - border-color: ${colors.red100}; + border-color: ${colors.error}; :focus { - border-color: ${colors.red100}; + border-color: ${colors.error}; } `} `; diff --git a/src/components/projects/upload/form/ListImageUploader.tsx b/src/components/projects/upload/form/ListImageUploader.tsx index a395a6cb5..892adb61e 100644 --- a/src/components/projects/upload/form/ListImageUploader.tsx +++ b/src/components/projects/upload/form/ListImageUploader.tsx @@ -1,12 +1,12 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import { FC, ReactNode, useEffect, useRef, useState } from 'react'; import { getPresignedUrl, putPresignedUrl } from '@/api/endpoint/common/image'; import ErrorMessage from '@/components/common/Input/ErrorMessage'; import IconCancel from '@/public/icons/icon-cancel.svg'; import IconPencil from '@/public/icons/icon-pencil.svg'; -import { colors } from '@sopt-makers/colors'; import { textStyles } from '@/styles/typography'; import { buildCSSWithLength, CSSValueWithLength } from '@/utils'; @@ -162,7 +162,7 @@ const ImageUploader = styled.div & ${({ error }) => error && css` - border: 1px solid ${colors.red100}; + border: 1px solid ${colors.error}; `} `; diff --git a/src/components/projects/upload/form/fields/member/MemberSearch.tsx b/src/components/projects/upload/form/fields/member/MemberSearch.tsx index 5b8727b8e..ac532551b 100644 --- a/src/components/projects/upload/form/fields/member/MemberSearch.tsx +++ b/src/components/projects/upload/form/fields/member/MemberSearch.tsx @@ -121,10 +121,10 @@ const StyledInput = styled(Command.Input)<{ isError?: boolean }>` ${({ isError }) => isError && css` - border-color: ${colors.red100}; + border-color: ${colors.error}; /* stylelint-disable-next-line no-duplicate-selectors */ &:focus { - border-color: ${colors.red100}; + border-color: ${colors.error}; } `} `; diff --git a/src/components/wordchain/WordchainChatting/index.tsx b/src/components/wordchain/WordchainChatting/index.tsx index a375ab887..c51da80e5 100644 --- a/src/components/wordchain/WordchainChatting/index.tsx +++ b/src/components/wordchain/WordchainChatting/index.tsx @@ -248,7 +248,7 @@ const Form = styled.form` const StyledInput = styled.input<{ isError: boolean }>` transition: border-color 0.5s ease-in; - border: 1px solid ${({ isError }) => (isError ? colors.red100 : colors.black80)}; + border: 1px solid ${({ isError }) => (isError ? colors.error : colors.black80)}; border-radius: 14px; background-color: ${colors.black100}; padding: 24px 20px; @@ -262,7 +262,7 @@ const StyledInput = styled.input<{ isError: boolean }>` &:focus { outline: none; - border-color: ${({ isError }) => (isError ? colors.red100 : colors.gray40)}; + border-color: ${({ isError }) => (isError ? colors.error : colors.gray40)}; } @media ${MOBILE_MEDIA_QUERY} { @@ -300,7 +300,7 @@ const ErrorMessage = styled.div<{ isVisible: boolean }>` transition: opacity 0.5s ease-in; opacity: ${({ isVisible }) => (isVisible ? 1 : 0)}; border-radius: 10px; - background-color: ${colors.red100}; + background-color: ${colors.error}; padding: 10px; width: fit-content; line-height: 130%; @@ -316,7 +316,7 @@ const Triangle = styled.div<{ isVisible: boolean }>` transition: opacity 0.5s ease-in; opacity: ${({ isVisible }) => (isVisible ? 1 : 0)}; border-right: 8px solid transparent; - border-bottom: calc(8px * 1.6) solid ${colors.red100}; + border-bottom: calc(8px * 1.6) solid ${colors.error}; border-left: 8px solid transparent; width: 0; height: 0; From 52c4e6c2f8167718539d1537290f465470bd88cd Mon Sep 17 00:00:00 2001 From: Jun Date: Sun, 22 Oct 2023 13:08:00 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20orange100=20=EC=BB=AC=EB=9F=AC=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/form/FormCollapsible.tsx | 2 +- src/components/common/form/FormTitle.tsx | 2 +- src/components/members/upload/forms/FormHeader.tsx | 2 +- src/components/members/upload/forms/FormItem.tsx | 2 +- src/components/projects/upload/form/presenter/FormEntry.tsx | 4 ++-- .../wordchain/WordchainChatting/Wordchain/index.tsx | 2 +- src/components/wordchain/WordchainEntry/WordChainEntry.tsx | 2 +- 7 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/common/form/FormCollapsible.tsx b/src/components/common/form/FormCollapsible.tsx index cf81c8252..0e9711346 100644 --- a/src/components/common/form/FormCollapsible.tsx +++ b/src/components/common/form/FormCollapsible.tsx @@ -73,7 +73,7 @@ const StyledTitleWrapper = styled.div` const Essential = styled(Text)` margin: 0 0 0 4px; - color: ${colors.orange100}; + color: ${colors.secondary}; ${textStyles.SUIT_16_M}; `; diff --git a/src/components/common/form/FormTitle.tsx b/src/components/common/form/FormTitle.tsx index e079b917f..b975d6621 100644 --- a/src/components/common/form/FormTitle.tsx +++ b/src/components/common/form/FormTitle.tsx @@ -35,7 +35,7 @@ const StyledTitle = styled.div` const Essential = styled(Text)` margin: 0 0 0 4px; - color: ${colors.orange100}; + color: ${colors.secondary}; ${textStyles.SUIT_16_M}; `; diff --git a/src/components/members/upload/forms/FormHeader.tsx b/src/components/members/upload/forms/FormHeader.tsx index daed7e70c..a5f11fa2b 100644 --- a/src/components/members/upload/forms/FormHeader.tsx +++ b/src/components/members/upload/forms/FormHeader.tsx @@ -54,7 +54,7 @@ const StyledRequired = styled(Text)` margin-bottom: 20px; margin-left: 4px; line-height: 8px; - color: ${colors.orange100}; + color: ${colors.secondary}; font-size: 16px; font-weight: 500; `; diff --git a/src/components/members/upload/forms/FormItem.tsx b/src/components/members/upload/forms/FormItem.tsx index 949ef9327..bbed60bf5 100644 --- a/src/components/members/upload/forms/FormItem.tsx +++ b/src/components/members/upload/forms/FormItem.tsx @@ -54,7 +54,7 @@ const StyledTitle = styled(Text)` const StyledEssential = styled(Text)` margin: 0 0 0 4px; - color: ${colors.orange100}; + color: ${colors.secondary}; ${textStyles.SUIT_16_M}; `; diff --git a/src/components/projects/upload/form/presenter/FormEntry.tsx b/src/components/projects/upload/form/presenter/FormEntry.tsx index 7f625501f..d239a2b30 100644 --- a/src/components/projects/upload/form/presenter/FormEntry.tsx +++ b/src/components/projects/upload/form/presenter/FormEntry.tsx @@ -49,12 +49,12 @@ const Description = styled.div` const Essential = styled(Text)` margin: 0 0 0 4px; - color: ${colors.orange100}; + color: ${colors.secondary}; ${textStyles.SUIT_16_M}; `; const Comment = styled(Text)` align-self: center; margin: 0 0 0 10px; - color: ${colors.orange100}; + color: ${colors.secondary}; `; diff --git a/src/components/wordchain/WordchainChatting/Wordchain/index.tsx b/src/components/wordchain/WordchainChatting/Wordchain/index.tsx index a1b17517c..c2fdc233b 100644 --- a/src/components/wordchain/WordchainChatting/Wordchain/index.tsx +++ b/src/components/wordchain/WordchainChatting/Wordchain/index.tsx @@ -172,7 +172,7 @@ const TrophyIconWrapper = styled.div` align-items: center; justify-content: center; border-radius: 50%; - background-color: ${colors.orange100}; + background-color: ${colors.secondary}; width: 20px; height: 20px; diff --git a/src/components/wordchain/WordchainEntry/WordChainEntry.tsx b/src/components/wordchain/WordchainEntry/WordChainEntry.tsx index 72c314318..96c4669d8 100644 --- a/src/components/wordchain/WordchainEntry/WordChainEntry.tsx +++ b/src/components/wordchain/WordchainEntry/WordChainEntry.tsx @@ -251,5 +251,5 @@ const GotoWordChainSub = styled.div` `; const LastWord = styled.span` - color: ${colors.orange100}; + color: ${colors.secondary}; `; From 25851c7b52d531bc90344a0449445cfad890a5b0 Mon Sep 17 00:00:00 2001 From: Jun Date: Sun, 22 Oct 2023 13:08:33 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20blue=20=EC=BB=AC=EB=9F=AC=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/auth/register/Stepper.tsx | 6 +++--- src/components/common/Checkbox/index.tsx | 4 ++-- src/components/common/Switch/index.tsx | 2 +- src/components/common/form/FormProgress.tsx | 6 +++--- src/components/debug/Panel.tsx | 2 +- src/components/debug/SideToggleButton.tsx | 4 ++-- src/components/soulmate/view/chat/MissionProgress.tsx | 2 +- src/pages/_app.tsx | 2 +- 8 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/components/auth/register/Stepper.tsx b/src/components/auth/register/Stepper.tsx index f8768c506..a1fd01d5b 100644 --- a/src/components/auth/register/Stepper.tsx +++ b/src/components/auth/register/Stepper.tsx @@ -104,7 +104,7 @@ const Stepper: FC = ({ step, className }) => { }, current: { scale: [1, 1, 1.2, 1], - backgroundColor: [colors.black40, colors.black40, colors.blue50, colors.blue50], + backgroundColor: [colors.black40, colors.black40, colors.success, colors.success], color: [colors.gray100, colors.gray100, colors.white100, colors.white100], transition: { times: [0, 0.7, 0.9, 1], @@ -167,7 +167,7 @@ const Line = styled(m.div)` const LineFilled = styled(m.div)` position: absolute; left: 0; - background-color: ${colors.blue50}; + background-color: ${colors.success}; width: 50%; height: 100%; `; @@ -202,7 +202,7 @@ const Circle = styled(m.div)` align-items: center; justify-content: center; border-radius: 50%; - background-color: ${colors.blue50}; + background-color: ${colors.success}; width: 28px; height: 28px; white-space: nowrap; diff --git a/src/components/common/Checkbox/index.tsx b/src/components/common/Checkbox/index.tsx index 40b1fd047..83c703b5c 100644 --- a/src/components/common/Checkbox/index.tsx +++ b/src/components/common/Checkbox/index.tsx @@ -48,8 +48,8 @@ const StyledCheckbox = styled.span` ${({ checked }) => checked && css` - border: 1px solid ${colors.blue40}; - background-color: ${colors.blue50}; + border: 1px solid ${colors.blue300}; + background-color: ${colors.success}; `} & > svg { diff --git a/src/components/common/Switch/index.tsx b/src/components/common/Switch/index.tsx index 898fbc1ae..298e5b2f1 100644 --- a/src/components/common/Switch/index.tsx +++ b/src/components/common/Switch/index.tsx @@ -44,7 +44,7 @@ const StyledInput = styled.input<{ translateX: string }>` height: 0; &:checked + .slider { - background: ${colors.blue50}; + background: ${colors.success}; } &:checked + .slider::before { diff --git a/src/components/common/form/FormProgress.tsx b/src/components/common/form/FormProgress.tsx index f30bb7421..17ba53e36 100644 --- a/src/components/common/form/FormProgress.tsx +++ b/src/components/common/form/FormProgress.tsx @@ -32,7 +32,7 @@ const FormProgress: FC = ({ className, title, progressLabel, {title} - + {`${activeItems.length}/${items.length}`} @@ -103,7 +103,7 @@ const StyledProgressRoot = styled(Progress.Root)` const StyledProgressIndicator = styled(Progress.Indicator)` transition: transform 0.3s; - background-color: ${colors.blue50}; + background-color: ${colors.success}; width: 100%; height: 100%; `; @@ -138,7 +138,7 @@ const Checked = styled.div` align-items: center; justify-content: center; border-radius: 50%; - background-color: ${colors.blue50}; + background-color: ${colors.success}; width: 14px; height: 14px; `; diff --git a/src/components/debug/Panel.tsx b/src/components/debug/Panel.tsx index 658e55119..7d7a805df 100644 --- a/src/components/debug/Panel.tsx +++ b/src/components/debug/Panel.tsx @@ -37,7 +37,7 @@ const disclosureButtonStyle = css` justify-content: space-between; margin-bottom: 15px; border-radius: 5px; - background-color: ${colors.blue50}; + background-color: ${colors.success}; cursor: pointer; padding: 8px 16px; width: 100%; diff --git a/src/components/debug/SideToggleButton.tsx b/src/components/debug/SideToggleButton.tsx index 3c4940647..21686a629 100644 --- a/src/components/debug/SideToggleButton.tsx +++ b/src/components/debug/SideToggleButton.tsx @@ -24,7 +24,7 @@ const StyledSideToggleButton = styled.button` bottom: 2px; z-index: 100009; border-radius: 7px; - background-color: ${colors.blue50}; + background-color: ${colors.success}; cursor: pointer; padding: 5px; color: ${colors.white100}; @@ -32,6 +32,6 @@ const StyledSideToggleButton = styled.button` ${textStyles.SUIT_14_B} &:hover { - background-color: ${colors.blue40}; + background-color: ${colors.blue300}; } `; diff --git a/src/components/soulmate/view/chat/MissionProgress.tsx b/src/components/soulmate/view/chat/MissionProgress.tsx index b60d3f0a0..2b62d7363 100644 --- a/src/components/soulmate/view/chat/MissionProgress.tsx +++ b/src/components/soulmate/view/chat/MissionProgress.tsx @@ -71,7 +71,7 @@ const ProgressCell = styled.div<{ status: MissionStatus['status'] }>` ${(props) => props.status === 'running' && css` - background-color: ${colors.blue50}; + background-color: ${colors.success}; `} ${(props) => props.status === 'waiting' && diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 8013949fc..28fe9ef9e 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -26,7 +26,7 @@ const queryClient = new QueryClient({ defaultOptions: { queries: { cacheTime: 300000, refetchOnWindowFocus: false, staleTime: 300000, retry: 1 } }, }); -const progress = new ProgressBar({ color: colors.blue50, size: 3 }); +const progress = new ProgressBar({ color: colors.success, size: 3 }); Router.events.on('routeChangeStart', () => progress.start()); Router.events.on('routeChangeComplete', () => progress.finish()); Router.events.on('routeChangeError', () => progress.finish()); From 784458c148625705c6e6426dc1460ab6d7b0e4bf Mon Sep 17 00:00:00 2001 From: Jun Date: Sun, 22 Oct 2023 13:15:19 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20grayscale=20=EC=A4=91=EB=B3=B5?= =?UTF-8?q?=EC=BB=AC=EB=9F=AC=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../auth/identityProvider/facebook/FacebookButton.tsx | 2 +- src/components/auth/register/Stepper.tsx | 4 ++-- .../auth/register/verify/VerifySubmitButton.tsx | 2 +- src/components/common/Banner/RecruitingBanner/index.tsx | 2 +- src/components/common/Banner/WelcomeBanner/index.tsx | 2 +- src/components/common/Button/style.ts | 2 +- src/components/common/Carousel/index.tsx | 2 +- src/components/common/Checkbox/index.tsx | 2 +- src/components/common/EditableSelect.tsx | 2 +- src/components/common/Header/desktop/DesktopHeader.tsx | 4 ++-- src/components/common/Header/desktop/ProfileButton.tsx | 2 +- src/components/common/Header/desktop/ProfileDropdown.tsx | 2 +- src/components/common/Header/mobile/MobileHeader.tsx | 2 +- src/components/common/Header/mobile/MobileSideBar.tsx | 6 +++--- src/components/common/Input/index.tsx | 2 +- src/components/common/Loading/index.tsx | 2 +- src/components/common/Modal/index.tsx | 2 +- src/components/common/MonthPicker.tsx | 2 +- src/components/common/SquareLink/style.ts | 2 +- src/components/common/Switch/index.tsx | 2 +- src/components/common/TextArea/index.tsx | 2 +- src/components/common/Toast/ToastEntry.tsx | 2 +- src/components/common/form/FormProgress.tsx | 2 +- src/components/common/form/FormTitle.tsx | 2 +- src/components/debug/SideToggleButton.tsx | 2 +- src/components/intro/sections/Login.tsx | 2 +- .../sections/ValueSection/valueContents/ValueBase.tsx | 2 +- src/components/makers/MakersMembers.tsx | 6 +++--- src/components/makers/Notifier.tsx | 2 +- src/components/members/common/select/OrderBySelect.tsx | 4 ++-- src/components/members/common/select/Select.tsx | 2 +- src/components/members/detail/ActivityBadge.tsx | 2 +- .../members/detail/CareerSection/CareerItem.tsx | 4 ++-- src/components/members/detail/InterestSection/index.tsx | 2 +- src/components/members/detail/MemberDetail.tsx | 4 ++-- .../members/detail/MessageSection/MessageModal.tsx | 2 +- src/components/members/detail/MessageSection/Modal.tsx | 4 ++-- src/components/members/detail/MessageSection/index.tsx | 2 +- src/components/members/detail/PartItem.tsx | 2 +- src/components/members/main/MemberCard/MessageButton.tsx | 2 +- src/components/members/main/MemberCard/index.tsx | 6 +++--- src/components/members/main/MemberList/MemberSearch.tsx | 2 +- .../members/main/MemberList/OnBoardingBanner.tsx | 4 ++-- src/components/members/upload/AddableWrapper.tsx | 4 ++-- .../members/upload/FormSection/PublicQuestion.tsx | 2 +- .../members/upload/FormSection/SoptActivity.tsx | 2 +- .../members/upload/FormSection/Tmi/FavorToggle.tsx | 6 +++--- .../members/upload/FormSection/Tmi/MbtiToggle.tsx | 4 ++-- src/components/members/upload/forms/CountableInput.tsx | 2 +- src/components/members/upload/forms/CountableTextArea.tsx | 2 +- src/components/members/upload/forms/FormHeader.tsx | 2 +- src/components/mentoring/MentoringCard/index.tsx | 4 ++-- src/components/mentoring/MentoringDetail/InfoItem.tsx | 2 +- src/components/mentoring/MentoringDetail/index.tsx | 8 ++++---- src/components/mentoring/MentoringList/index.tsx | 2 +- src/components/projects/main/ProjectImageSlider.tsx | 2 +- src/components/projects/main/ProjectList.tsx | 2 +- .../projects/upload/form/fields/ServiceTypeField.tsx | 2 +- .../projects/upload/form/fields/member/MemberSearch.tsx | 4 ++-- src/components/sopticle/Success.tsx | 6 +++--- src/components/sopticle/UploadSopticle.tsx | 4 ++-- src/components/soulmate/view/lobby/ExitSoulmateLink.tsx | 4 ++-- src/components/soulmate/view/lobby/MatchingStatus.tsx | 2 +- src/components/soulmate/view/lobby/Register.tsx | 2 +- .../WordchainChatting/StartWordChatMessage/index.tsx | 4 ++-- .../wordchain/WordchainChatting/WordChatMessage/index.tsx | 4 ++-- .../wordchain/WordchainChatting/Wordchain/index.tsx | 2 +- src/components/wordchain/WordchainChatting/index.tsx | 4 ++-- .../wordchain/WordchainEntry/WordchainMessage.tsx | 2 +- .../wordchain/WordchainWinners/WordchainWinner/index.tsx | 2 +- src/pages/auth/login.tsx | 6 +++--- src/styles/global.ts | 2 +- src/styles/reset.ts | 6 +++--- 73 files changed, 106 insertions(+), 106 deletions(-) diff --git a/src/components/auth/identityProvider/facebook/FacebookButton.tsx b/src/components/auth/identityProvider/facebook/FacebookButton.tsx index 9bd7f4c64..bb392f633 100644 --- a/src/components/auth/identityProvider/facebook/FacebookButton.tsx +++ b/src/components/auth/identityProvider/facebook/FacebookButton.tsx @@ -38,7 +38,7 @@ const StyledFacebookButton = styled.button` background-color: #1877f2; cursor: pointer; height: 48px; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_16_M} diff --git a/src/components/auth/register/Stepper.tsx b/src/components/auth/register/Stepper.tsx index a1fd01d5b..eb2a84f13 100644 --- a/src/components/auth/register/Stepper.tsx +++ b/src/components/auth/register/Stepper.tsx @@ -105,7 +105,7 @@ const Stepper: FC = ({ step, className }) => { current: { scale: [1, 1, 1.2, 1], backgroundColor: [colors.black40, colors.black40, colors.success, colors.success], - color: [colors.gray100, colors.gray100, colors.white100, colors.white100], + color: [colors.gray100, colors.gray100, colors.gray10, colors.gray10], transition: { times: [0, 0.7, 0.9, 1], duration: 2, @@ -122,7 +122,7 @@ const Stepper: FC = ({ step, className }) => { color: colors.gray100, }, current: { - color: [colors.gray100, colors.gray100, colors.white100], + color: [colors.gray100, colors.gray100, colors.gray10], transition: { times: [0, 0.7, 1], duration: 2, diff --git a/src/components/auth/register/verify/VerifySubmitButton.tsx b/src/components/auth/register/verify/VerifySubmitButton.tsx index 042c0a30b..973627433 100644 --- a/src/components/auth/register/verify/VerifySubmitButton.tsx +++ b/src/components/auth/register/verify/VerifySubmitButton.tsx @@ -28,7 +28,7 @@ const VerifySubmitButton = styled.button` color: ${colors.gray60}; ` : css` - background-color: ${colors.white100}; + background-color: ${colors.gray10}; cursor: pointer; color: ${colors.black100}; `} diff --git a/src/components/common/Banner/RecruitingBanner/index.tsx b/src/components/common/Banner/RecruitingBanner/index.tsx index d2b9b9b8d..0c748406c 100644 --- a/src/components/common/Banner/RecruitingBanner/index.tsx +++ b/src/components/common/Banner/RecruitingBanner/index.tsx @@ -112,7 +112,7 @@ const Logo = styled(MakersLogoWhite)` const Arrow = styled.div` display: none; grid-area: arrow; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_20_B} diff --git a/src/components/common/Banner/WelcomeBanner/index.tsx b/src/components/common/Banner/WelcomeBanner/index.tsx index 46bbcc609..9fbf1ed00 100644 --- a/src/components/common/Banner/WelcomeBanner/index.tsx +++ b/src/components/common/Banner/WelcomeBanner/index.tsx @@ -65,7 +65,7 @@ const ContentWrapper = styled.div` const Title = styled.div` margin-top: 8px; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_18_B}; `; diff --git a/src/components/common/Button/style.ts b/src/components/common/Button/style.ts index 4e0309b5d..193fb44e9 100644 --- a/src/components/common/Button/style.ts +++ b/src/components/common/Button/style.ts @@ -10,7 +10,7 @@ export const buttonStyles: Record = { color: ${colors.gray100}; `, primary: css` - background-color: ${colors.white100}; + background-color: ${colors.gray10}; color: ${colors.black100}; `, danger: css` diff --git a/src/components/common/Carousel/index.tsx b/src/components/common/Carousel/index.tsx index 2ddc67dad..15d6030dc 100644 --- a/src/components/common/Carousel/index.tsx +++ b/src/components/common/Carousel/index.tsx @@ -130,7 +130,7 @@ const Indicators = styled.div` const Indicator = styled.div<{ isActive?: boolean }>` border-radius: 50%; - background-color: ${({ isActive }) => (isActive ? colors.white100 : colors.black40)}; + background-color: ${({ isActive }) => (isActive ? colors.gray10 : colors.black40)}; cursor: ${({ isActive }) => (isActive ? 'default' : 'pointer')}; width: 8px; height: 8px; diff --git a/src/components/common/Checkbox/index.tsx b/src/components/common/Checkbox/index.tsx index 83c703b5c..980a7b683 100644 --- a/src/components/common/Checkbox/index.tsx +++ b/src/components/common/Checkbox/index.tsx @@ -55,7 +55,7 @@ const StyledCheckbox = styled.span` & > svg { width: 14px; height: 9px; - color: ${colors.white100}; + color: ${colors.gray10}; } @media ${MOBILE_MEDIA_QUERY} { diff --git a/src/components/common/EditableSelect.tsx b/src/components/common/EditableSelect.tsx index 3ac03ad0a..92cce94a5 100644 --- a/src/components/common/EditableSelect.tsx +++ b/src/components/common/EditableSelect.tsx @@ -77,7 +77,7 @@ const StyledInput = styled.input` padding: 11.5px; width: calc(100% - 40px); height: 100%; - color: ${colors.gray30}; + color: ${colors.gray100}; ${textStyles.SUIT_16_M} diff --git a/src/components/common/Header/desktop/DesktopHeader.tsx b/src/components/common/Header/desktop/DesktopHeader.tsx index f343e8aac..1e6d22cbd 100644 --- a/src/components/common/Header/desktop/DesktopHeader.tsx +++ b/src/components/common/Header/desktop/DesktopHeader.tsx @@ -68,7 +68,7 @@ const Container = styled.header` display: flex; background-color: ${colors.black100}; height: 80px; - color: ${colors.white100}; + color: ${colors.gray10}; `; const StyledBrandLink = styled.div` @@ -95,7 +95,7 @@ const NavItem = styled.div<{ isActive: boolean }>` align-items: center; padding: 0 8px; height: 100%; - color: ${(props) => (props.isActive ? colors.white100 : colors.gray30)}; + color: ${(props) => (props.isActive ? colors.gray10 : colors.gray100)}; ${(props) => props.isActive diff --git a/src/components/common/Header/desktop/ProfileButton.tsx b/src/components/common/Header/desktop/ProfileButton.tsx index 0548d159e..a83443b47 100644 --- a/src/components/common/Header/desktop/ProfileButton.tsx +++ b/src/components/common/Header/desktop/ProfileButton.tsx @@ -33,7 +33,7 @@ const StyledProfileButton = styled.button` background-color: ${colors.black80}; cursor: pointer; height: 38px; - color: ${colors.white100}; + color: ${colors.gray10}; `; const ImageSlot = styled.div` diff --git a/src/components/common/Header/desktop/ProfileDropdown.tsx b/src/components/common/Header/desktop/ProfileDropdown.tsx index 67d2267a0..910d1ad8f 100644 --- a/src/components/common/Header/desktop/ProfileDropdown.tsx +++ b/src/components/common/Header/desktop/ProfileDropdown.tsx @@ -52,7 +52,7 @@ const ContentBox = styled.div` padding: 12px 0; min-width: 176px; animation: slide-up-and-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1); - color: ${colors.white100}; + color: ${colors.gray10}; & > * { cursor: pointer; diff --git a/src/components/common/Header/mobile/MobileHeader.tsx b/src/components/common/Header/mobile/MobileHeader.tsx index f8ffa63d5..f2041fd0c 100644 --- a/src/components/common/Header/mobile/MobileHeader.tsx +++ b/src/components/common/Header/mobile/MobileHeader.tsx @@ -51,7 +51,7 @@ const Container = styled.header` background-color: ${colors.black100}; padding: 0 16px; height: 56px; - color: ${colors.white100}; + color: ${colors.gray10}; `; const NavButton = styled.button` diff --git a/src/components/common/Header/mobile/MobileSideBar.tsx b/src/components/common/Header/mobile/MobileSideBar.tsx index 4d95f0e58..781156708 100644 --- a/src/components/common/Header/mobile/MobileSideBar.tsx +++ b/src/components/common/Header/mobile/MobileSideBar.tsx @@ -165,7 +165,7 @@ const Content = styled.div` height: 100vh; overflow-y: auto; animation: content-show 0.3s cubic-bezier(0.16, 1, 0.3, 1); - color: ${colors.white100}; + color: ${colors.gray10}; @keyframes content-show { from { @@ -225,7 +225,7 @@ const NavItem = styled('div')<{ isActive?: boolean; }>` padding: 10px var(--x-gap); - color: ${(props) => (props.isActive ? colors.white100 : colors.gray30)}; + color: ${(props) => (props.isActive ? colors.gray10 : colors.gray100)}; ${textStyles.SUIT_18_M}; `; @@ -233,7 +233,7 @@ const NavItem = styled('div')<{ const NavLinkSmall = styled.div<{ isActive?: boolean }>` cursor: pointer; padding: 8px var(--x-gap); - color: ${(props) => (props.isActive ? colors.white100 : colors.gray30)}; + color: ${(props) => (props.isActive ? colors.gray10 : colors.gray100)}; ${textStyles.SUIT_14_M}; `; diff --git a/src/components/common/Input/index.tsx b/src/components/common/Input/index.tsx index 648c338c7..87ea2ff79 100644 --- a/src/components/common/Input/index.tsx +++ b/src/components/common/Input/index.tsx @@ -91,7 +91,7 @@ const StyledInput = styled.input` background-color: ${colors.black60}; padding: 14px 20px; width: ${(props) => props.width}; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_16_M}; &::placeholder { diff --git a/src/components/common/Loading/index.tsx b/src/components/common/Loading/index.tsx index ae8694532..0f0b18c86 100644 --- a/src/components/common/Loading/index.tsx +++ b/src/components/common/Loading/index.tsx @@ -78,7 +78,7 @@ const StyledLoading = styled.div` const LoadingDot = styled(m.span)<{ color: LoadingColor }>` border-radius: 100%; - background-color: ${({ color }) => (color === 'default' ? colors.gray20 : colors.white100)}; + background-color: ${({ color }) => (color === 'default' ? colors.gray20 : colors.gray10)}; width: 12px; height: 12px; `; diff --git a/src/components/common/Modal/index.tsx b/src/components/common/Modal/index.tsx index 2ac9b358a..3f9d003fd 100644 --- a/src/components/common/Modal/index.tsx +++ b/src/components/common/Modal/index.tsx @@ -87,7 +87,7 @@ const StyledModal = styled.div<{ width?: number }>` border-radius: 22.94px; background: ${colors.black80}; width: ${({ width }) => width ?? 450}px; - color: ${colors.white100}; + color: ${colors.gray10}; `; const StyledCloseButton = styled.button` diff --git a/src/components/common/MonthPicker.tsx b/src/components/common/MonthPicker.tsx index 109d54319..de86d534f 100644 --- a/src/components/common/MonthPicker.tsx +++ b/src/components/common/MonthPicker.tsx @@ -33,7 +33,7 @@ const StyledDatePicker = styled(DatePicker)` background-color: ${colors.black60}; padding: 14px 20px; width: 100%; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_16_M}; &::placeholder { diff --git a/src/components/common/SquareLink/style.ts b/src/components/common/SquareLink/style.ts index e07f57478..d719c3366 100644 --- a/src/components/common/SquareLink/style.ts +++ b/src/components/common/SquareLink/style.ts @@ -11,7 +11,7 @@ export const buttonStyles: Record = { `, primary: css` transition: background-color 0.3s; - background-color: ${colors.white100}; + background-color: ${colors.gray10}; color: ${colors.black100}; &:hover, diff --git a/src/components/common/Switch/index.tsx b/src/components/common/Switch/index.tsx index 298e5b2f1..69217ee9d 100644 --- a/src/components/common/Switch/index.tsx +++ b/src/components/common/Switch/index.tsx @@ -74,7 +74,7 @@ const StyledSlider = styled.span<{ width: string; height: string }>` transform: translateY(-50%); transition: 0.2s; border-radius: 50%; - background-color: ${colors.white100}; + background-color: ${colors.gray10}; width: ${(props) => props.width}; height: ${(props) => props.height}; content: ''; diff --git a/src/components/common/TextArea/index.tsx b/src/components/common/TextArea/index.tsx index 7e243b321..a1a838e9f 100644 --- a/src/components/common/TextArea/index.tsx +++ b/src/components/common/TextArea/index.tsx @@ -48,7 +48,7 @@ const StyledTextArea = styled.textarea` padding: 14px 20px; width: 100%; resize: none; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_16_M} &::placeholder { diff --git a/src/components/common/Toast/ToastEntry.tsx b/src/components/common/Toast/ToastEntry.tsx index 050d6fcc2..33759d04e 100644 --- a/src/components/common/Toast/ToastEntry.tsx +++ b/src/components/common/Toast/ToastEntry.tsx @@ -49,7 +49,7 @@ const HeaderBox = styled.div` const Title = styled.h2` margin-bottom: 7px; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_20_B}; `; diff --git a/src/components/common/form/FormProgress.tsx b/src/components/common/form/FormProgress.tsx index 17ba53e36..4e274e71b 100644 --- a/src/components/common/form/FormProgress.tsx +++ b/src/components/common/form/FormProgress.tsx @@ -122,7 +122,7 @@ const ListItem = styled.li<{ isDirty?: boolean }>` justify-content: space-between; transition: color 0.2s; padding: 14px 20px; - color: ${({ isDirty }) => (isDirty ? colors.white100 : colors.gray100)}; + color: ${({ isDirty }) => (isDirty ? colors.gray10 : colors.gray100)}; ${textStyles.SUIT_16_M}; `; diff --git a/src/components/common/form/FormTitle.tsx b/src/components/common/form/FormTitle.tsx index b975d6621..a929d8e90 100644 --- a/src/components/common/form/FormTitle.tsx +++ b/src/components/common/form/FormTitle.tsx @@ -42,5 +42,5 @@ const Essential = styled(Text)` const Description = styled(Text)` align-self: center; margin: 0 0 0 10px; - color: ${colors.white100}; + color: ${colors.gray10}; `; diff --git a/src/components/debug/SideToggleButton.tsx b/src/components/debug/SideToggleButton.tsx index 21686a629..83b8b8935 100644 --- a/src/components/debug/SideToggleButton.tsx +++ b/src/components/debug/SideToggleButton.tsx @@ -27,7 +27,7 @@ const StyledSideToggleButton = styled.button` background-color: ${colors.success}; cursor: pointer; padding: 5px; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_14_B} diff --git a/src/components/intro/sections/Login.tsx b/src/components/intro/sections/Login.tsx index 16ee21dd9..33f90a05f 100644 --- a/src/components/intro/sections/Login.tsx +++ b/src/components/intro/sections/Login.tsx @@ -66,7 +66,7 @@ const LoginButton = styled(Link)` align-items: center; justify-content: center; border-radius: 6px; - background: ${colors.white100}; + background: ${colors.gray10}; padding: 6px 10px; color: ${colors.black100}; diff --git a/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx b/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx index 7fcef7d22..7cdfe6eec 100644 --- a/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx +++ b/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx @@ -46,7 +46,7 @@ const ValueBase: FC = ({ image, message, reverse }) => { }; const Highlight = styled.span` - color: ${colors.white100}; + color: ${colors.gray10}; `; export default Object.assign(ValueBase, { diff --git a/src/components/makers/MakersMembers.tsx b/src/components/makers/MakersMembers.tsx index daef2ec06..9e633aca8 100644 --- a/src/components/makers/MakersMembers.tsx +++ b/src/components/makers/MakersMembers.tsx @@ -108,8 +108,8 @@ const TabButton = styled.a` color: ${colors.gray60}; &[data-state='active'] { - border-bottom: 2px solid ${colors.white100}; - color: ${colors.white100}; + border-bottom: 2px solid ${colors.gray10}; + color: ${colors.gray10}; } ${textStyles.SUIT_20_B}; @@ -138,7 +138,7 @@ const GenerationMessage = styled.div` border-radius: 16px; background-color: ${colors.black80}; padding: 32px; - color: ${colors.gray30}; + color: ${colors.gray100}; ${textStyles.SUIT_18_M} diff --git a/src/components/makers/Notifier.tsx b/src/components/makers/Notifier.tsx index b92b582d9..e6075e9a7 100644 --- a/src/components/makers/Notifier.tsx +++ b/src/components/makers/Notifier.tsx @@ -80,7 +80,7 @@ const ButtonGroup = styled.div` // align-items: center; // justify-content: center; // border-radius: 6px; -// background-color: ${colors.white100}; +// background-color: ${colors.gray10}; // color: ${colors.black100}; // cursor: pointer; // padding: 14px 20px; diff --git a/src/components/members/common/select/OrderBySelect.tsx b/src/components/members/common/select/OrderBySelect.tsx index 7e5fe8df6..2a6d90c53 100644 --- a/src/components/members/common/select/OrderBySelect.tsx +++ b/src/components/members/common/select/OrderBySelect.tsx @@ -1,5 +1,6 @@ import styled from '@emotion/styled'; import * as Select from '@radix-ui/react-select'; +import { colors } from '@sopt-makers/colors'; import dynamic from 'next/dynamic'; import React, { FC, PropsWithChildren, ReactNode, useEffect, useState } from 'react'; @@ -7,7 +8,6 @@ import Text from '@/components/common/Text'; import { SelectContext, useSelectContext } from '@/components/members/common/select/context'; import { Overlay } from '@/components/members/common/select/Overlay'; import IconArrowUpDown from '@/public/icons/icon-arrow-up-down.svg'; -import { colors } from '@sopt-makers/colors'; import { textStyles } from '@/styles/typography'; const SelectPortal = dynamic( @@ -130,7 +130,7 @@ const StyledItem = styled(Select.Item)` &[data-highlighted] { outline: none; background-color: ${colors.black40}; - color: ${colors.white100}; + color: ${colors.gray10}; } /* &[data-disabled] { diff --git a/src/components/members/common/select/Select.tsx b/src/components/members/common/select/Select.tsx index 4b88a9b47..c65808366 100644 --- a/src/components/members/common/select/Select.tsx +++ b/src/components/members/common/select/Select.tsx @@ -264,7 +264,7 @@ const StyledItem = styled(Select.Item)` &[data-highlighted] { outline: none; background-color: ${colors.black40}; - color: ${colors.white100}; + color: ${colors.gray10}; } /* &[data-disabled] { diff --git a/src/components/members/detail/ActivityBadge.tsx b/src/components/members/detail/ActivityBadge.tsx index 8650091bb..747a2f2a9 100644 --- a/src/components/members/detail/ActivityBadge.tsx +++ b/src/components/members/detail/ActivityBadge.tsx @@ -23,7 +23,7 @@ const Container = styled.div` padding: 6px 14px; line-height: 100%; letter-spacing: -0.01em; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_14_M} diff --git a/src/components/members/detail/CareerSection/CareerItem.tsx b/src/components/members/detail/CareerSection/CareerItem.tsx index 38cdb4b80..d9eba2a17 100644 --- a/src/components/members/detail/CareerSection/CareerItem.tsx +++ b/src/components/members/detail/CareerSection/CareerItem.tsx @@ -1,9 +1,9 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import dayjs from 'dayjs'; import { FC } from 'react'; import { Career } from '@/components/members/detail/types'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; @@ -58,7 +58,7 @@ const Divider = styled.div` const CompanyName = styled.div` margin-bottom: 10px; line-height: 18px; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_18_M}; diff --git a/src/components/members/detail/InterestSection/index.tsx b/src/components/members/detail/InterestSection/index.tsx index b1c66e768..0a1f6f03c 100644 --- a/src/components/members/detail/InterestSection/index.tsx +++ b/src/components/members/detail/InterestSection/index.tsx @@ -181,7 +181,7 @@ const BalanceGameItem = styled.div` background-color: ${colors.black60}; padding: 6px 14px; line-height: 16px; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_14_M}; `; diff --git a/src/components/members/detail/MemberDetail.tsx b/src/components/members/detail/MemberDetail.tsx index 03899a93a..b30334f93 100644 --- a/src/components/members/detail/MemberDetail.tsx +++ b/src/components/members/detail/MemberDetail.tsx @@ -469,7 +469,7 @@ const AddressBadge = styled.div` background-color: ${colors.black60}; padding: 6px 14px; line-height: 16px; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_14_M}; `; @@ -551,7 +551,7 @@ const ProjectUploadButton = styled(Link)` z-index: 1; margin-top: 24px; border-radius: 14px; - background-color: ${colors.white100}; + background-color: ${colors.gray10}; padding: 14px 48px; color: ${colors.black80}; diff --git a/src/components/members/detail/MessageSection/MessageModal.tsx b/src/components/members/detail/MessageSection/MessageModal.tsx index dcdfbc018..2c28b26df 100644 --- a/src/components/members/detail/MessageSection/MessageModal.tsx +++ b/src/components/members/detail/MessageSection/MessageModal.tsx @@ -279,7 +279,7 @@ const StyledButton = styled.button<{ isDisabled: boolean }>` transition: background-color 0.2s; margin-top: 36px; border-radius: 12px; - background-color: ${({ isDisabled }) => (isDisabled ? colors.black60 : colors.white100)}; + background-color: ${({ isDisabled }) => (isDisabled ? colors.black60 : colors.gray10)}; cursor: pointer; padding: 14px 28px; `; diff --git a/src/components/members/detail/MessageSection/Modal.tsx b/src/components/members/detail/MessageSection/Modal.tsx index e031dc890..c53202f14 100644 --- a/src/components/members/detail/MessageSection/Modal.tsx +++ b/src/components/members/detail/MessageSection/Modal.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import FocusTrap from 'focus-trap-react'; import { FC, HTMLAttributes, PropsWithChildren, ReactNode, useEffect, useRef } from 'react'; import { RemoveScroll } from 'react-remove-scroll'; @@ -7,7 +8,6 @@ import Portal from '@/components/common/Portal'; import useOnClickOutside from '@/hooks/useOnClickOutside'; import IconModalCheck from '@/public/icons/icon-modal-check.svg'; import IconModalClose from '@/public/icons/icon-modal-close.svg'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; @@ -90,7 +90,7 @@ const StyledModal = styled.div<{ width?: number }>` border-radius: 22.94px; background: ${colors.black80}; width: ${({ width }) => width ?? 450}px; - color: ${colors.white100}; + color: ${colors.gray10}; `; const StyledCloseButton = styled.button` diff --git a/src/components/members/detail/MessageSection/index.tsx b/src/components/members/detail/MessageSection/index.tsx index 2c97e83f1..02dfb61cf 100644 --- a/src/components/members/detail/MessageSection/index.tsx +++ b/src/components/members/detail/MessageSection/index.tsx @@ -100,7 +100,7 @@ const Subtitle = styled.div` const MessageButton = styled.div<{ disabled: boolean }>` border-radius: 14px; - background-color: ${({ disabled }) => (disabled ? colors.black80 : colors.white100)}; + background-color: ${({ disabled }) => (disabled ? colors.black80 : colors.gray10)}; cursor: pointer; padding: 15px 36px; color: ${({ disabled }) => (disabled ? colors.gray80 : colors.black100)}; diff --git a/src/components/members/detail/PartItem.tsx b/src/components/members/detail/PartItem.tsx index a941d11d6..16a5502bd 100644 --- a/src/components/members/detail/PartItem.tsx +++ b/src/components/members/detail/PartItem.tsx @@ -96,7 +96,7 @@ const Generation = styled.div` const BelongArea = styled.div` grid-area: belongs; - color: ${colors.gray30}; + color: ${colors.gray100}; ${textStyles.SUIT_18_M} diff --git a/src/components/members/main/MemberCard/MessageButton.tsx b/src/components/members/main/MemberCard/MessageButton.tsx index f102e3ed9..3e6ebd31b 100644 --- a/src/components/members/main/MemberCard/MessageButton.tsx +++ b/src/components/members/main/MemberCard/MessageButton.tsx @@ -51,7 +51,7 @@ const Button = styled.div` } & svg { - fill: ${colors.gray30}; + fill: ${colors.gray100}; width: 16px; height: 16px; } diff --git a/src/components/members/main/MemberCard/index.tsx b/src/components/members/main/MemberCard/index.tsx index 667980e37..649f3d92b 100644 --- a/src/components/members/main/MemberCard/index.tsx +++ b/src/components/members/main/MemberCard/index.tsx @@ -143,7 +143,7 @@ const TitleBox = styled(m.div)` const Name = styled.h3` flex-shrink: 0; - color: ${colors.gray10}; + color: ${colors.gray30}; ${textStyles.SUIT_18_B} `; @@ -192,14 +192,14 @@ const Badge = styled.div` border-radius: 6px; background-color: ${colors.black60}; padding: 6px 8px; - color: ${colors.gray30}; + color: ${colors.gray100}; ${textStyles.SUIT_11_M}; @media ${MOBILE_MEDIA_QUERY} { background-color: ${colors.black80}; padding: 4px 6px; - color: ${colors.gray30}; + color: ${colors.gray100}; ${textStyles.SUIT_11_M}; } diff --git a/src/components/members/main/MemberList/MemberSearch.tsx b/src/components/members/main/MemberList/MemberSearch.tsx index db4e111fb..7e4c3713c 100644 --- a/src/components/members/main/MemberList/MemberSearch.tsx +++ b/src/components/members/main/MemberList/MemberSearch.tsx @@ -50,7 +50,7 @@ const StyledInput = styled.input` padding: 18px 45px 18px 24px; width: 100%; min-width: 60px; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_16_M}; diff --git a/src/components/members/main/MemberList/OnBoardingBanner.tsx b/src/components/members/main/MemberList/OnBoardingBanner.tsx index b72308c22..3b94a442b 100644 --- a/src/components/members/main/MemberList/OnBoardingBanner.tsx +++ b/src/components/members/main/MemberList/OnBoardingBanner.tsx @@ -134,12 +134,12 @@ const UploadButton = styled.a` ${buttonStyle} background-color: ${colors.black60}; - color: ${colors.gray30}; + color: ${colors.gray100}; `; const ProfileButton = styled.a` ${buttonStyle} - background-color: ${colors.white100}; + background-color: ${colors.gray10}; color: ${colors.black100}; `; diff --git a/src/components/members/upload/AddableWrapper.tsx b/src/components/members/upload/AddableWrapper.tsx index b190061b3..367a4787b 100644 --- a/src/components/members/upload/AddableWrapper.tsx +++ b/src/components/members/upload/AddableWrapper.tsx @@ -17,7 +17,7 @@ export default function MemberAddableWrapper({ onAppend, children, className }: {children} - +
추가
 @@ -42,7 +42,7 @@ const StyledAddButton = styled.button` gap: 11px; align-items: center; margin-top: 23px; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_16_SB} `; diff --git a/src/components/members/upload/FormSection/PublicQuestion.tsx b/src/components/members/upload/FormSection/PublicQuestion.tsx index df668b8cc..9947e6936 100644 --- a/src/components/members/upload/FormSection/PublicQuestion.tsx +++ b/src/components/members/upload/FormSection/PublicQuestion.tsx @@ -30,7 +30,7 @@ const StyledSection = styled.section` width: 790px; .question { - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_24_B}; diff --git a/src/components/members/upload/FormSection/SoptActivity.tsx b/src/components/members/upload/FormSection/SoptActivity.tsx index 0681adf61..afdc3ab25 100644 --- a/src/components/members/upload/FormSection/SoptActivity.tsx +++ b/src/components/members/upload/FormSection/SoptActivity.tsx @@ -156,7 +156,7 @@ const StyledSelect = styled(Select)` border-radius: 14px; padding: 16px 34px 16px 20px; width: 100%; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_16_M}; diff --git a/src/components/members/upload/FormSection/Tmi/FavorToggle.tsx b/src/components/members/upload/FormSection/Tmi/FavorToggle.tsx index 44d727003..4445b3478 100644 --- a/src/components/members/upload/FormSection/Tmi/FavorToggle.tsx +++ b/src/components/members/upload/FormSection/Tmi/FavorToggle.tsx @@ -43,11 +43,11 @@ const Container = styled.div` const Button = styled.button<{ isSelected: boolean }>` border-radius: 13px; - background-color: ${({ isSelected }) => (isSelected ? colors.white100 : colors.black60)}; + background-color: ${({ isSelected }) => (isSelected ? colors.gray10 : colors.black60)}; cursor: pointer; padding: 14px 0; width: 122px; - color: ${({ isSelected }) => (isSelected ? colors.black100 : colors.white100)}; + color: ${({ isSelected }) => (isSelected ? colors.black100 : colors.gray10)}; ${textStyles.SUIT_16_SB} @@ -69,7 +69,7 @@ const Button = styled.button<{ isSelected: boolean }>` const Versus = styled.div` width: 28px; text-align: center; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_16_SB}; `; diff --git a/src/components/members/upload/FormSection/Tmi/MbtiToggle.tsx b/src/components/members/upload/FormSection/Tmi/MbtiToggle.tsx index 36ceaab37..195876f2a 100644 --- a/src/components/members/upload/FormSection/Tmi/MbtiToggle.tsx +++ b/src/components/members/upload/FormSection/Tmi/MbtiToggle.tsx @@ -38,11 +38,11 @@ const Container = styled.div` `; const Button = styled.button<{ isSelected: boolean }>` - background-color: ${({ isSelected }) => (isSelected ? colors.white100 : colors.black60)}; + background-color: ${({ isSelected }) => (isSelected ? colors.gray10 : colors.black60)}; cursor: pointer; padding: 14px 0; width: 76px; - color: ${({ isSelected }) => (isSelected ? colors.black100 : colors.white100)}; + color: ${({ isSelected }) => (isSelected ? colors.black100 : colors.gray10)}; ${textStyles.SUIT_16_SB} diff --git a/src/components/members/upload/forms/CountableInput.tsx b/src/components/members/upload/forms/CountableInput.tsx index b0fcb6b6f..8d42c99e0 100644 --- a/src/components/members/upload/forms/CountableInput.tsx +++ b/src/components/members/upload/forms/CountableInput.tsx @@ -52,7 +52,7 @@ const StyledInput = styled.input>` background-color: ${colors.black60}; padding: 14px 20px; width: 100%; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_16_M}; &::placeholder { diff --git a/src/components/members/upload/forms/CountableTextArea.tsx b/src/components/members/upload/forms/CountableTextArea.tsx index 8bcb97544..f8022c5a9 100644 --- a/src/components/members/upload/forms/CountableTextArea.tsx +++ b/src/components/members/upload/forms/CountableTextArea.tsx @@ -57,7 +57,7 @@ const StyledTextArea = styled.textarea` width: 100%; height: 100%; resize: none; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_16_M} &::placeholder { diff --git a/src/components/members/upload/forms/FormHeader.tsx b/src/components/members/upload/forms/FormHeader.tsx index a5f11fa2b..cd11de562 100644 --- a/src/components/members/upload/forms/FormHeader.tsx +++ b/src/components/members/upload/forms/FormHeader.tsx @@ -24,7 +24,7 @@ export default function MemberFormHeader({ title, required, description }: Membe const StyledTitle = styled.h2` display: inline; - color: ${colors.gray10}; + color: ${colors.gray30}; ${textStyles.SUIT_24_B}; diff --git a/src/components/mentoring/MentoringCard/index.tsx b/src/components/mentoring/MentoringCard/index.tsx index 1cb6de728..1b56ac8bd 100644 --- a/src/components/mentoring/MentoringCard/index.tsx +++ b/src/components/mentoring/MentoringCard/index.tsx @@ -152,7 +152,7 @@ const KeywordContent = styled.div` overflow: hidden; text-overflow: ellipsis; line-height: 14px; - color: ${colors.gray30}; + color: ${colors.gray100}; -webkit-line-clamp: 1; -webkit-box-orient: vertical; @@ -168,7 +168,7 @@ const Title = styled.div` text-overflow: ellipsis; line-height: 22px; white-space: pre-line; - color: ${colors.gray10}; + color: ${colors.gray30}; -webkit-line-clamp: 2; -webkit-box-orient: vertical; diff --git a/src/components/mentoring/MentoringDetail/InfoItem.tsx b/src/components/mentoring/MentoringDetail/InfoItem.tsx index e6c6c675e..bf0bf6d53 100644 --- a/src/components/mentoring/MentoringDetail/InfoItem.tsx +++ b/src/components/mentoring/MentoringDetail/InfoItem.tsx @@ -31,7 +31,7 @@ const Container = styled.div` const Label = styled.div` line-height: 100%; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_24_B}; diff --git a/src/components/mentoring/MentoringDetail/index.tsx b/src/components/mentoring/MentoringDetail/index.tsx index 43e91ae03..a0a33143c 100644 --- a/src/components/mentoring/MentoringDetail/index.tsx +++ b/src/components/mentoring/MentoringDetail/index.tsx @@ -258,7 +258,7 @@ const EmptyProfileImage = styled.div` const MentorName = styled.div` line-height: 100%; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_20_SB}; @@ -277,7 +277,7 @@ const MessageButton = styled.button` justify-content: center; justify-self: end; border-radius: 6px; - background-color: ${colors.white100}; + background-color: ${colors.gray10}; width: 180px; height: 48px; line-height: 135%; @@ -348,7 +348,7 @@ const Keyword = styled.div` background-color: ${colors.black60}; padding: 8px 15px; line-height: 120%; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_14_M}; @@ -360,7 +360,7 @@ const Keyword = styled.div` const Content = styled.div` line-height: 150%; white-space: pre-line; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_18_M} diff --git a/src/components/mentoring/MentoringList/index.tsx b/src/components/mentoring/MentoringList/index.tsx index 267144d8d..c21d95abc 100644 --- a/src/components/mentoring/MentoringList/index.tsx +++ b/src/components/mentoring/MentoringList/index.tsx @@ -244,7 +244,7 @@ const Container = styled.div` const Title = styled.div` text-align: start; line-height: 100%; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_24_B} diff --git a/src/components/projects/main/ProjectImageSlider.tsx b/src/components/projects/main/ProjectImageSlider.tsx index 1ad7aba05..352295dc7 100644 --- a/src/components/projects/main/ProjectImageSlider.tsx +++ b/src/components/projects/main/ProjectImageSlider.tsx @@ -95,7 +95,7 @@ const StyledSwiper = styled(Swiper)` & .swiper-button-prev, .swiper-button-next { - color: ${colors.gray10}; + color: ${colors.gray30}; } @media ${MOBILE_MEDIA_QUERY} { diff --git a/src/components/projects/main/ProjectList.tsx b/src/components/projects/main/ProjectList.tsx index 64963cb5e..5b20bc7c7 100644 --- a/src/components/projects/main/ProjectList.tsx +++ b/src/components/projects/main/ProjectList.tsx @@ -132,7 +132,7 @@ const ProjectUploadButton = styled(Link)` gap: 12px; align-items: center; border-radius: 10px; - background-color: ${colors.white100}; + background-color: ${colors.gray10}; padding: 18px 24px 18px 20px; color: ${colors.black100}; diff --git a/src/components/projects/upload/form/fields/ServiceTypeField.tsx b/src/components/projects/upload/form/fields/ServiceTypeField.tsx index f3771d402..83b18f82f 100644 --- a/src/components/projects/upload/form/fields/ServiceTypeField.tsx +++ b/src/components/projects/upload/form/fields/ServiceTypeField.tsx @@ -74,7 +74,7 @@ const StyledLabel = styled.label<{ checked?: boolean }>` ${({ checked }) => checked && css` - background-color: ${colors.white100}; + background-color: ${colors.gray10}; color: ${colors.black100}; `} ${textStyles.SUIT_14_M}; diff --git a/src/components/projects/upload/form/fields/member/MemberSearch.tsx b/src/components/projects/upload/form/fields/member/MemberSearch.tsx index ac532551b..90059cd41 100644 --- a/src/components/projects/upload/form/fields/member/MemberSearch.tsx +++ b/src/components/projects/upload/form/fields/member/MemberSearch.tsx @@ -110,7 +110,7 @@ const StyledInput = styled(Command.Input)<{ isError?: boolean }>` border-radius: 6px; background: ${colors.black60}; padding: 14px 20px; - color: ${colors.white100}; + color: ${colors.gray10}; &:focus { outline: none; @@ -140,7 +140,7 @@ const StyledLabel = styled.label` width: 100%; ${textStyles.SUIT_16_SB}; - ${colors.gray10}; + ${colors.gray30}; &:hover { svg { diff --git a/src/components/sopticle/Success.tsx b/src/components/sopticle/Success.tsx index d00ee4550..815ca7fdc 100644 --- a/src/components/sopticle/Success.tsx +++ b/src/components/sopticle/Success.tsx @@ -68,14 +68,14 @@ const CheckCircle = styled.div` align-items: center; justify-content: center; border-radius: 100%; - background-color: ${colors.white100}; + background-color: ${colors.gray10}; width: 62px; height: 62px; `; const Title = styled.h1` margin-top: 24px; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_32_SB}; @@ -116,7 +116,7 @@ const ViewButton = styled.a` align-items: center; justify-content: center; border-radius: 10px; - background-color: ${colors.white100}; + background-color: ${colors.gray10}; cursor: pointer; padding: 16px 0; color: ${colors.black100}; diff --git a/src/components/sopticle/UploadSopticle.tsx b/src/components/sopticle/UploadSopticle.tsx index e55441716..25ad35b9c 100644 --- a/src/components/sopticle/UploadSopticle.tsx +++ b/src/components/sopticle/UploadSopticle.tsx @@ -84,7 +84,7 @@ const TitleBox = styled.div` `; const Title = styled.h1` - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_32_SB}; @@ -144,7 +144,7 @@ const MotionErrorMessageHolder = styled(m.div)` const Button = styled.button` margin-top: 16px; border-radius: 10px; - background-color: ${colors.white100}; + background-color: ${colors.gray10}; padding: 16px 0; color: ${colors.black100}; diff --git a/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx b/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx index 57036a893..896a68975 100644 --- a/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx +++ b/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import { FC } from 'react'; import SoulmateModal from '@/components/soulmate/view/common/SoulmateModal'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; @@ -80,7 +80,7 @@ const ButtonArea = styled.div` const StopButton = styled.button` border-radius: 10px; - background-color: ${colors.gray10}; + background-color: ${colors.gray30}; padding: 14px 20px; color: ${colors.black80}; diff --git a/src/components/soulmate/view/lobby/MatchingStatus.tsx b/src/components/soulmate/view/lobby/MatchingStatus.tsx index e9142f215..2359a89ab 100644 --- a/src/components/soulmate/view/lobby/MatchingStatus.tsx +++ b/src/components/soulmate/view/lobby/MatchingStatus.tsx @@ -76,7 +76,7 @@ const Button = styled(Link)` align-items: center; justify-content: center; border-radius: 6px; - background-color: ${colors.white100}; + background-color: ${colors.gray10}; padding: 14px 20px; width: 180px; color: ${colors.black100}; diff --git a/src/components/soulmate/view/lobby/Register.tsx b/src/components/soulmate/view/lobby/Register.tsx index 9309d7730..256cf0b43 100644 --- a/src/components/soulmate/view/lobby/Register.tsx +++ b/src/components/soulmate/view/lobby/Register.tsx @@ -163,7 +163,7 @@ const ApplyButton = styled.button` transition: background-color 0.3s; margin-top: 60px; border-radius: 6px; - background: ${colors.white100}; + background: ${colors.gray10}; cursor: pointer; padding: 14px 20px; color: ${colors.black100}; diff --git a/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.tsx b/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.tsx index 7a8a7a3fd..146883e96 100644 --- a/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.tsx +++ b/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.tsx @@ -46,7 +46,7 @@ const Makers = { `, Title: styled.div` line-height: 100%; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_20_SB} @@ -73,7 +73,7 @@ const StartWord = styled.div` padding: 16px 20px; width: fit-content; line-height: 120%; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_16_M} diff --git a/src/components/wordchain/WordchainChatting/WordChatMessage/index.tsx b/src/components/wordchain/WordchainChatting/WordChatMessage/index.tsx index 4148b47d1..14cee179e 100644 --- a/src/components/wordchain/WordchainChatting/WordChatMessage/index.tsx +++ b/src/components/wordchain/WordchainChatting/WordChatMessage/index.tsx @@ -64,7 +64,7 @@ const MessageBox = styled.div` const Word = styled.div` line-height: 120%; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_16_M} @@ -82,7 +82,7 @@ const Divider = styled.div` const Name = styled.div` line-height: 100%; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_14_SB} diff --git a/src/components/wordchain/WordchainChatting/Wordchain/index.tsx b/src/components/wordchain/WordchainChatting/Wordchain/index.tsx index c2fdc233b..18a9705b1 100644 --- a/src/components/wordchain/WordchainChatting/Wordchain/index.tsx +++ b/src/components/wordchain/WordchainChatting/Wordchain/index.tsx @@ -156,7 +156,7 @@ const WinnerMessage = styled.div` margin-top: 12px; margin-right: 54px; line-height: 100%; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_16_M} diff --git a/src/components/wordchain/WordchainChatting/index.tsx b/src/components/wordchain/WordchainChatting/index.tsx index c51da80e5..3d7760b13 100644 --- a/src/components/wordchain/WordchainChatting/index.tsx +++ b/src/components/wordchain/WordchainChatting/index.tsx @@ -254,7 +254,7 @@ const StyledInput = styled.input<{ isError: boolean }>` padding: 24px 20px; width: 100%; line-height: 120%; - color: ${colors.gray10}; + color: ${colors.gray30}; &::placeholder { color: ${colors.gray80}; @@ -304,7 +304,7 @@ const ErrorMessage = styled.div<{ isVisible: boolean }>` padding: 10px; width: fit-content; line-height: 130%; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_14_M} `; diff --git a/src/components/wordchain/WordchainEntry/WordchainMessage.tsx b/src/components/wordchain/WordchainEntry/WordchainMessage.tsx index 9a1762629..533fad648 100644 --- a/src/components/wordchain/WordchainEntry/WordchainMessage.tsx +++ b/src/components/wordchain/WordchainEntry/WordchainMessage.tsx @@ -86,7 +86,7 @@ const MessageBox = styled.div` const Word = styled.div` line-height: 120%; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_16_M} diff --git a/src/components/wordchain/WordchainWinners/WordchainWinner/index.tsx b/src/components/wordchain/WordchainWinners/WordchainWinner/index.tsx index e37079b5c..d124d6037 100644 --- a/src/components/wordchain/WordchainWinners/WordchainWinner/index.tsx +++ b/src/components/wordchain/WordchainWinners/WordchainWinner/index.tsx @@ -44,7 +44,7 @@ const WordChainWinnerContainer = styled(Link)<{ isRecent: boolean }>` isRecent ? css` margin-top: 16px; - background-color: ${colors.white100}; + background-color: ${colors.gray10}; ` : css` margin-top: 12px; diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx index b09092167..93d82dda6 100644 --- a/src/pages/auth/login.tsx +++ b/src/pages/auth/login.tsx @@ -239,7 +239,7 @@ const RegisterInfo = styled.div` const LastLogin = styled(m.div)` margin-top: 25px; - color: ${colors.white100}; + color: ${colors.gray10}; ${textStyles.SUIT_16_SB} `; @@ -247,7 +247,7 @@ const LastLogin = styled(m.div)` const RegisterLink = styled(Link)` transition: 0.2s color; text-decoration: underline; - color: ${colors.white100}; + color: ${colors.gray10}; `; const MotionMakersContainer = styled(m.div)` @@ -273,7 +273,7 @@ const TooltipRect = styled.div` background-color: ${colors.black60}; padding: 18px 16px; white-space: nowrap; - color: ${colors.gray10}; + color: ${colors.gray30}; ${textStyles.SUIT_16_M} diff --git a/src/styles/global.ts b/src/styles/global.ts index ca11c60fe..0d55ff042 100644 --- a/src/styles/global.ts +++ b/src/styles/global.ts @@ -58,7 +58,7 @@ export const global = css` select:-webkit-autofill:focus { transition: background-color 5000s ease-in-out 0s; box-shadow: 0 0 0 1000px ${colors.black80} inset; - -webkit-text-fill-color: ${colors.white100}; + -webkit-text-fill-color: ${colors.gray10}; } } diff --git a/src/styles/reset.ts b/src/styles/reset.ts index 975023d7a..bd75a3e85 100644 --- a/src/styles/reset.ts +++ b/src/styles/reset.ts @@ -6,7 +6,7 @@ export const reset = css` html, body { background: #fff; - color: ${colors.white100}; + color: ${colors.gray10}; font-family: SUIT, sans-serif; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; @@ -112,7 +112,7 @@ export const reset = css` a { outline: none; text-decoration: none; - color: ${colors.white100}; + color: ${colors.gray10}; } a:hover, @@ -248,7 +248,7 @@ export const reset = css` [type='reset'], [type='submit'] { appearance: button; - color: ${colors.white100}; + color: ${colors.gray10}; } /** From f4a02159ed37cc673a30d8471202fc39476514fd Mon Sep 17 00:00:00 2001 From: Jun Date: Sun, 22 Oct 2023 13:19:49 +0900 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20grayscale=20color=20mds=20color=202?= =?UTF-8?q?.0=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview.tsx | 4 ++-- .../apple/AppleAuthButton.tsx | 2 +- .../google/GoogleAuthButton.tsx | 2 +- src/components/auth/register/Stepper.tsx | 14 +++++------ .../auth/register/verify/HelpCard.tsx | 6 ++--- .../auth/register/verify/VerifyFrame.tsx | 2 +- .../register/verify/VerifySubmitButton.tsx | 6 ++--- .../auth/register/verify/view/ByPhoneView.tsx | 2 +- .../Banner/AppJamBanner/AppJamBanner.tsx | 2 +- .../legacy/RecruitingSessionBanner.tsx | 6 ++--- .../common/Banner/WelcomeBanner/index.tsx | 2 +- src/components/common/Button/style.ts | 6 ++--- src/components/common/Carousel/index.tsx | 6 ++--- src/components/common/Checkbox/index.tsx | 2 +- src/components/common/Divider/Divider.tsx | 2 +- src/components/common/EditableSelect.tsx | 2 +- src/components/common/Footer/index.tsx | 6 ++--- .../common/Header/SwitchableHeader.tsx | 2 +- .../common/Header/desktop/DesktopHeader.tsx | 4 ++-- .../common/Header/desktop/ProfileButton.tsx | 4 ++-- .../common/Header/desktop/ProfileDropdown.tsx | 4 ++-- .../common/Header/mobile/MobileHeader.tsx | 2 +- .../common/Header/mobile/MobileSideBar.tsx | 12 +++++----- .../common/ImageUploader/Legacy.tsx | 2 +- src/components/common/ImageUploader/index.tsx | 8 +++---- src/components/common/Input/index.tsx | 12 +++++----- src/components/common/Loading/index.tsx | 2 +- src/components/common/Modal/index.tsx | 4 ++-- src/components/common/MonthPicker.tsx | 10 ++++---- src/components/common/Select/index.tsx | 6 ++--- src/components/common/SquareLink/style.ts | 6 ++--- src/components/common/Switch/index.tsx | 2 +- src/components/common/TextArea/index.tsx | 12 +++++----- src/components/common/Toast/ToastEntry.tsx | 4 ++-- .../common/form/FormCollapsible.tsx | 6 ++--- src/components/common/form/FormProgress.tsx | 14 +++++------ src/components/debug/Panel.tsx | 2 +- .../debug/panels/AccessTokenPanel.tsx | 2 +- .../intro/sections/CatchPhrase/index.tsx | 2 +- src/components/intro/sections/Footer.tsx | 2 +- src/components/intro/sections/Login.tsx | 6 ++--- .../intro/sections/ValueSection/ValueCard.tsx | 4 ++-- .../ValueSection/valueContents/ValueBase.tsx | 6 ++--- src/components/makers/MakersMembers.tsx | 6 ++--- src/components/makers/Notifier.tsx | 8 +++---- src/components/makers/PersonBlock.tsx | 4 ++-- src/components/makers/TeamBlock.tsx | 4 ++-- src/components/members/common/MemberBlock.tsx | 8 +++---- .../members/common/select/OrderBySelect.tsx | 8 +++---- .../members/common/select/Select.tsx | 12 +++++----- .../members/detail/ActivityBadge.tsx | 4 ++-- .../detail/CareerSection/CareerItem.tsx | 4 ++-- .../members/detail/CareerSection/index.tsx | 4 ++-- .../members/detail/EmptyProfile.tsx | 4 ++-- .../members/detail/InterestSection/index.tsx | 2 +- .../members/detail/MemberDetail.tsx | 8 +++---- .../members/detail/MemberProjectCard.tsx | 8 +++---- .../detail/MessageSection/MessageModal.tsx | 16 ++++++------- .../members/detail/MessageSection/Modal.tsx | 4 ++-- .../members/detail/MessageSection/index.tsx | 10 ++++---- src/components/members/detail/PartItem.tsx | 2 +- .../members/main/MemberCard/MessageButton.tsx | 10 ++++---- .../members/main/MemberCard/index.tsx | 22 ++++++++--------- .../MemberRoleMenu/MemberRoleMenu.tsx | 8 +++---- .../members/main/MemberList/MemberSearch.tsx | 8 +++---- .../main/MemberList/OnBoardingBanner.tsx | 10 ++++---- .../MemberList/filters/MemberListFilter.tsx | 6 ++--- .../filters/MemberListFilterSheet.tsx | 6 ++--- .../members/main/MemberList/index.tsx | 16 ++++++------- src/components/members/upload/AddableItem.tsx | 2 +- .../members/upload/AddableWrapper.tsx | 6 ++--- .../upload/FormSection/Basic/index.tsx | 2 +- .../members/upload/FormSection/Career.tsx | 2 +- .../upload/FormSection/PublicQuestion.tsx | 4 ++-- .../upload/FormSection/SoptActivity.tsx | 2 +- .../upload/FormSection/Tmi/FavorToggle.tsx | 8 +++---- .../upload/FormSection/Tmi/MbtiToggle.tsx | 8 +++---- .../members/upload/FormSection/Tmi/index.tsx | 2 +- .../members/upload/forms/CountableInput.tsx | 12 +++++----- .../upload/forms/CountableTextArea.tsx | 12 +++++----- src/components/members/upload/forms/Form.tsx | 12 +++++----- .../members/upload/forms/FormHeader.tsx | 6 ++--- .../members/upload/forms/FormItem.tsx | 2 +- .../members/upload/forms/FormSection.ts | 16 ++++++------- .../mentoring/MentoringCard/index.tsx | 14 +++++------ .../mentoring/MentoringDetail/index.tsx | 24 +++++++++---------- .../mentoring/MentoringList/index.tsx | 4 ++-- src/components/projects/main/ProjectCard.tsx | 10 ++++---- .../projects/main/ProjectDetail.tsx | 18 +++++++------- src/components/projects/main/ProjectList.tsx | 6 ++--- .../upload/form/ListImageUploader.tsx | 6 ++--- .../projects/upload/form/ProjectForm.tsx | 14 +++++------ .../upload/form/fields/GenerationField.tsx | 4 ++-- .../projects/upload/form/fields/LinkField.tsx | 16 ++++++------- .../upload/form/fields/MemberField.tsx | 18 +++++++------- .../upload/form/fields/PeriodField.tsx | 6 ++--- .../upload/form/fields/ServiceTypeField.tsx | 6 ++--- .../upload/form/fields/StatusField.tsx | 4 ++-- .../form/fields/member/MemberSearch.tsx | 18 +++++++------- .../upload/form/presenter/FormEntry.tsx | 2 +- src/components/sopticle/HelpCard.tsx | 6 ++--- src/components/sopticle/Success.tsx | 10 ++++---- src/components/sopticle/UploadSopticle.tsx | 6 ++--- src/components/soulmate/view/EntryCard.tsx | 8 +++---- .../soulmate/view/chat/ChatRule.tsx | 6 ++--- .../soulmate/view/chat/Feedback.tsx | 6 ++--- src/components/soulmate/view/chat/Menu.tsx | 4 ++-- .../soulmate/view/chat/MissionProgress.tsx | 6 ++--- .../soulmate/view/chat/SoulmateChat.tsx | 10 ++++---- .../soulmate/view/common/SoulmateModal.tsx | 4 ++-- .../soulmate/view/common/commonStyles.ts | 2 +- .../soulmate/view/lobby/ExitSoulmateLink.tsx | 10 ++++---- .../soulmate/view/lobby/MatchingStatus.tsx | 2 +- .../soulmate/view/lobby/Register.tsx | 10 ++++---- .../StartWordChatMessage/index.tsx | 4 ++-- .../WordChatMessage/index.tsx | 6 ++--- .../WordchainChatting/Wordchain/index.tsx | 6 ++--- .../wordchain/WordchainChatting/index.tsx | 12 +++++----- .../WordchainEntry/WordChainEntry.tsx | 8 +++---- .../WordchainEntry/WordchainMessage.tsx | 8 +++---- .../WordchainWinner/index.tsx | 10 ++++---- .../wordchain/WordchainWinners/index.tsx | 2 +- src/pages/_app.tsx | 2 +- src/pages/auth/login.tsx | 8 +++---- src/pages/wordchain/index.tsx | 14 +++++------ src/styles/global.ts | 6 ++--- 126 files changed, 428 insertions(+), 428 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 510bb5de6..d056ed59b 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -28,11 +28,11 @@ export const parameters = { }, backgrounds: { default: 'darker', - dark: { name: 'darker', value: colors.black100 }, + dark: { name: 'darker', value: colors.gray900 }, }, darkMode: { current: 'dark', - dark: { ...themes.dark, appBg: colors.black80 }, + dark: { ...themes.dark, appBg: colors.gray800 }, light: { ...themes.normal, appBg: '#fff' }, }, nextRouter: { diff --git a/src/components/auth/identityProvider/apple/AppleAuthButton.tsx b/src/components/auth/identityProvider/apple/AppleAuthButton.tsx index 7b3336075..bc02ccb92 100644 --- a/src/components/auth/identityProvider/apple/AppleAuthButton.tsx +++ b/src/components/auth/identityProvider/apple/AppleAuthButton.tsx @@ -32,7 +32,7 @@ const StyledAppleAuthButton = styled.button` background-color: ${colors.white}; cursor: pointer; height: 48px; - color: ${colors.black100}; + color: ${colors.gray900}; ${textStyles.SUIT_16_M} diff --git a/src/components/auth/identityProvider/google/GoogleAuthButton.tsx b/src/components/auth/identityProvider/google/GoogleAuthButton.tsx index 4e3ed603d..c5ddb8a8a 100644 --- a/src/components/auth/identityProvider/google/GoogleAuthButton.tsx +++ b/src/components/auth/identityProvider/google/GoogleAuthButton.tsx @@ -34,7 +34,7 @@ const StyledGoogleAuthButton = styled(SquareLink)` background-color: ${colors.white}; cursor: pointer; height: 48px; - color: ${colors.black100}; + color: ${colors.gray900}; ${textStyles.SUIT_16_M} diff --git a/src/components/auth/register/Stepper.tsx b/src/components/auth/register/Stepper.tsx index eb2a84f13..6c5ec3e84 100644 --- a/src/components/auth/register/Stepper.tsx +++ b/src/components/auth/register/Stepper.tsx @@ -99,13 +99,13 @@ const Stepper: FC = ({ step, className }) => { variants={{ future: { scale: 1, - backgroundColor: colors.black40, - color: colors.gray100, + backgroundColor: colors.gray600, + color: colors.gray500, }, current: { scale: [1, 1, 1.2, 1], - backgroundColor: [colors.black40, colors.black40, colors.success, colors.success], - color: [colors.gray100, colors.gray100, colors.gray10, colors.gray10], + backgroundColor: [colors.gray600, colors.gray600, colors.success, colors.success], + color: [colors.gray500, colors.gray500, colors.gray10, colors.gray10], transition: { times: [0, 0.7, 0.9, 1], duration: 2, @@ -119,10 +119,10 @@ const Stepper: FC = ({ step, className }) => { isActive={step >= 2} variants={{ future: { - color: colors.gray100, + color: colors.gray500, }, current: { - color: [colors.gray100, colors.gray100, colors.gray10], + color: [colors.gray500, colors.gray500, colors.gray10], transition: { times: [0, 0.7, 1], duration: 2, @@ -156,7 +156,7 @@ const LineArea = styled.div` const Line = styled(m.div)` position: relative; margin: 13px 35px 0; - background-color: ${colors.black40}; + background-color: ${colors.gray600}; height: 2px; @media ${MOBILE_MEDIA_QUERY} { diff --git a/src/components/auth/register/verify/HelpCard.tsx b/src/components/auth/register/verify/HelpCard.tsx index 6e6de958e..0890bb29e 100644 --- a/src/components/auth/register/verify/HelpCard.tsx +++ b/src/components/auth/register/verify/HelpCard.tsx @@ -35,12 +35,12 @@ const StyledHelpCard = styled.a<{ highlight?: boolean }>` gap: 10px; transition: background-color 0.3s, box-shadow 0.3s; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; cursor: pointer; padding: 19px 15px 18px; &:hover { - background-color: ${colors.black40}; + background-color: ${colors.gray600}; } @media ${MOBILE_MEDIA_QUERY} { @@ -68,7 +68,7 @@ const StyledHelpCard = styled.a<{ highlight?: boolean }>` const Content = styled.div` line-height: 140%; white-space: pre-line; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_14_M} `; diff --git a/src/components/auth/register/verify/VerifyFrame.tsx b/src/components/auth/register/verify/VerifyFrame.tsx index 05aacaf13..1b0f7ff89 100644 --- a/src/components/auth/register/verify/VerifyFrame.tsx +++ b/src/components/auth/register/verify/VerifyFrame.tsx @@ -56,7 +56,7 @@ const Title = styled.h2` const Description = styled.p` margin-top: 12px; text-align: center; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_16_M} diff --git a/src/components/auth/register/verify/VerifySubmitButton.tsx b/src/components/auth/register/verify/VerifySubmitButton.tsx index 973627433..729715123 100644 --- a/src/components/auth/register/verify/VerifySubmitButton.tsx +++ b/src/components/auth/register/verify/VerifySubmitButton.tsx @@ -23,14 +23,14 @@ const VerifySubmitButton = styled.button` ${(props) => props.disabled ? css` - background-color: ${colors.black80}; + background-color: ${colors.gray800}; cursor: default; - color: ${colors.gray60}; + color: ${colors.gray300}; ` : css` background-color: ${colors.gray10}; cursor: pointer; - color: ${colors.black100}; + color: ${colors.gray900}; `} `; export default VerifySubmitButton; diff --git a/src/components/auth/register/verify/view/ByPhoneView.tsx b/src/components/auth/register/verify/view/ByPhoneView.tsx index 0f2b2d21f..738b25ade 100644 --- a/src/components/auth/register/verify/view/ByPhoneView.tsx +++ b/src/components/auth/register/verify/view/ByPhoneView.tsx @@ -136,7 +136,7 @@ const StyledByEmail = styled.div` const Label = styled.label` display: block; margin-bottom: 18px; - color: ${colors.gray80}; + color: ${colors.gray400}; ${textStyles.SUIT_16_M}; diff --git a/src/components/common/Banner/AppJamBanner/AppJamBanner.tsx b/src/components/common/Banner/AppJamBanner/AppJamBanner.tsx index d82308eb5..f176b6af2 100644 --- a/src/components/common/Banner/AppJamBanner/AppJamBanner.tsx +++ b/src/components/common/Banner/AppJamBanner/AppJamBanner.tsx @@ -59,7 +59,7 @@ const StyledBanner = styled.div` position: relative; align-items: center; justify-content: center; - background-color: ${colors.black100}; + background-color: ${colors.gray900}; padding: 20px 0; width: 100%; height: 96px; diff --git a/src/components/common/Banner/RecruitingBanner/legacy/RecruitingSessionBanner.tsx b/src/components/common/Banner/RecruitingBanner/legacy/RecruitingSessionBanner.tsx index 35384eaec..3c05f0c8d 100644 --- a/src/components/common/Banner/RecruitingBanner/legacy/RecruitingSessionBanner.tsx +++ b/src/components/common/Banner/RecruitingBanner/legacy/RecruitingSessionBanner.tsx @@ -84,7 +84,7 @@ const ContentArea = styled.div` const Title = styled.div` grid-area: title; - color: ${colors.black100}; + color: ${colors.gray900}; ${textStyles.SUIT_26_B} @@ -95,7 +95,7 @@ const Title = styled.div` const SubTitle = styled.div` grid-area: subtitle; - color: ${colors.black80}; + color: ${colors.gray800}; ${textStyles.SUIT_16_M}; @@ -119,7 +119,7 @@ const Logo = styled(MakersLogoDark)` const Arrow = styled.div` display: none; grid-area: arrow; - color: ${colors.black100}; + color: ${colors.gray900}; ${textStyles.SUIT_20_B} diff --git a/src/components/common/Banner/WelcomeBanner/index.tsx b/src/components/common/Banner/WelcomeBanner/index.tsx index 9fbf1ed00..3beb00e86 100644 --- a/src/components/common/Banner/WelcomeBanner/index.tsx +++ b/src/components/common/Banner/WelcomeBanner/index.tsx @@ -71,7 +71,7 @@ const Title = styled.div` const SubTitle = styled.div` margin-top: 4px; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_12_M}; `; diff --git a/src/components/common/Button/style.ts b/src/components/common/Button/style.ts index 193fb44e9..b4d0ec788 100644 --- a/src/components/common/Button/style.ts +++ b/src/components/common/Button/style.ts @@ -7,15 +7,15 @@ export type ButtonSize = 'fill' | 'small' | 'medium' | 'large'; export const buttonStyles: Record = { default: css` background-color: #212121; - color: ${colors.gray100}; + color: ${colors.gray500}; `, primary: css` background-color: ${colors.gray10}; - color: ${colors.black100}; + color: ${colors.gray900}; `, danger: css` background-color: ${colors.error}; - color: ${colors.gray40}; + color: ${colors.gray200}; `, }; diff --git a/src/components/common/Carousel/index.tsx b/src/components/common/Carousel/index.tsx index 15d6030dc..d26d492dc 100644 --- a/src/components/common/Carousel/index.tsx +++ b/src/components/common/Carousel/index.tsx @@ -98,12 +98,12 @@ const Container = styled.div` const Control = styled.button` align-self: center; border-radius: 50%; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; width: 40px; height: 40px; &:hover { - background-color: ${colors.black40}; + background-color: ${colors.gray600}; } `; @@ -130,7 +130,7 @@ const Indicators = styled.div` const Indicator = styled.div<{ isActive?: boolean }>` border-radius: 50%; - background-color: ${({ isActive }) => (isActive ? colors.gray10 : colors.black40)}; + background-color: ${({ isActive }) => (isActive ? colors.gray10 : colors.gray600)}; cursor: ${({ isActive }) => (isActive ? 'default' : 'pointer')}; width: 8px; height: 8px; diff --git a/src/components/common/Checkbox/index.tsx b/src/components/common/Checkbox/index.tsx index 980a7b683..00969b035 100644 --- a/src/components/common/Checkbox/index.tsx +++ b/src/components/common/Checkbox/index.tsx @@ -40,7 +40,7 @@ const StyledCheckbox = styled.span` align-items: center; justify-content: center; transition: 0.2s background-color; - border: 1px solid ${colors.gray100}; + border: 1px solid ${colors.gray500}; border-radius: 4px; background-color: transparent; width: 22.5px; diff --git a/src/components/common/Divider/Divider.tsx b/src/components/common/Divider/Divider.tsx index ec3261de5..97fce8d9b 100644 --- a/src/components/common/Divider/Divider.tsx +++ b/src/components/common/Divider/Divider.tsx @@ -6,7 +6,7 @@ interface DividerProps { className?: string; color?: string; } -const Divider: FC = ({ color = colors.black60, className }) => { +const Divider: FC = ({ color = colors.gray700, className }) => { return ; }; diff --git a/src/components/common/EditableSelect.tsx b/src/components/common/EditableSelect.tsx index 92cce94a5..38adfdbb8 100644 --- a/src/components/common/EditableSelect.tsx +++ b/src/components/common/EditableSelect.tsx @@ -77,7 +77,7 @@ const StyledInput = styled.input` padding: 11.5px; width: calc(100% - 40px); height: 100%; - color: ${colors.gray100}; + color: ${colors.gray500}; ${textStyles.SUIT_16_M} diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx index 2a36ec113..8aafca60a 100644 --- a/src/components/common/Footer/index.tsx +++ b/src/components/common/Footer/index.tsx @@ -44,8 +44,8 @@ const StyledFooter = styled.div<{ hide: boolean }>` bottom: 0; transition: transform 0.3s; z-index: 99999; - border-top: 1px solid ${colors.black40}; - background-color: ${colors.black80}; + border-top: 1px solid ${colors.gray600}; + background-color: ${colors.gray800}; padding: 0 0 0 38px; width: 100%; @@ -70,6 +70,6 @@ const FooterLink = styled.a<{ highlight?: boolean }>` color: ${colors.white}; ` : css` - color: ${colors.gray40}; + color: ${colors.gray200}; `} `; diff --git a/src/components/common/Header/SwitchableHeader.tsx b/src/components/common/Header/SwitchableHeader.tsx index b537c9896..24041d085 100644 --- a/src/components/common/Header/SwitchableHeader.tsx +++ b/src/components/common/Header/SwitchableHeader.tsx @@ -36,7 +36,7 @@ const NotLoggedInHeader = styled.div` @media ${MOBILE_MEDIA_QUERY} { margin: 0; - background-color: ${colors.black100}; + background-color: ${colors.gray900}; height: 60px; } `; diff --git a/src/components/common/Header/desktop/DesktopHeader.tsx b/src/components/common/Header/desktop/DesktopHeader.tsx index 1e6d22cbd..36c3aad29 100644 --- a/src/components/common/Header/desktop/DesktopHeader.tsx +++ b/src/components/common/Header/desktop/DesktopHeader.tsx @@ -66,7 +66,7 @@ export default DesktopHeader; const Container = styled.header` display: flex; - background-color: ${colors.black100}; + background-color: ${colors.gray900}; height: 80px; color: ${colors.gray10}; `; @@ -95,7 +95,7 @@ const NavItem = styled.div<{ isActive: boolean }>` align-items: center; padding: 0 8px; height: 100%; - color: ${(props) => (props.isActive ? colors.gray10 : colors.gray100)}; + color: ${(props) => (props.isActive ? colors.gray10 : colors.gray500)}; ${(props) => props.isActive diff --git a/src/components/common/Header/desktop/ProfileButton.tsx b/src/components/common/Header/desktop/ProfileButton.tsx index a83443b47..e23385e83 100644 --- a/src/components/common/Header/desktop/ProfileButton.tsx +++ b/src/components/common/Header/desktop/ProfileButton.tsx @@ -30,7 +30,7 @@ const StyledProfileButton = styled.button` display: flex; align-items: center; border-radius: 19px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; cursor: pointer; height: 38px; color: ${colors.gray10}; @@ -42,7 +42,7 @@ const ImageSlot = styled.div` justify-content: center; margin-left: 3px; border-radius: 50%; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; width: 32px; height: 32px; overflow: hidden; diff --git a/src/components/common/Header/desktop/ProfileDropdown.tsx b/src/components/common/Header/desktop/ProfileDropdown.tsx index 910d1ad8f..67f9ec88d 100644 --- a/src/components/common/Header/desktop/ProfileDropdown.tsx +++ b/src/components/common/Header/desktop/ProfileDropdown.tsx @@ -48,7 +48,7 @@ const ContentBox = styled.div` flex-direction: column; border-radius: 14px; box-shadow: 0 10px 38px -10px rgb(22 23 24 / 35%), 0 10px 20px -15px rgb(22 23 24 / 20%); - background: ${colors.black60}; + background: ${colors.gray700}; padding: 12px 0; min-width: 176px; animation: slide-up-and-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1); @@ -62,7 +62,7 @@ const ContentBox = styled.div` &:focus, &:focus-visible, &:hover { outline: none; - background-color: ${colors.black40}; + background-color: ${colors.gray600}; } } diff --git a/src/components/common/Header/mobile/MobileHeader.tsx b/src/components/common/Header/mobile/MobileHeader.tsx index f2041fd0c..606d28be1 100644 --- a/src/components/common/Header/mobile/MobileHeader.tsx +++ b/src/components/common/Header/mobile/MobileHeader.tsx @@ -48,7 +48,7 @@ export default MobileHeader; const Container = styled.header` display: flex; - background-color: ${colors.black100}; + background-color: ${colors.gray900}; padding: 0 16px; height: 56px; color: ${colors.gray10}; diff --git a/src/components/common/Header/mobile/MobileSideBar.tsx b/src/components/common/Header/mobile/MobileSideBar.tsx index 781156708..bff242e40 100644 --- a/src/components/common/Header/mobile/MobileSideBar.tsx +++ b/src/components/common/Header/mobile/MobileSideBar.tsx @@ -160,7 +160,7 @@ const Content = styled.div` left: 0; flex-direction: column; z-index: 100001; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; width: 212px; height: 100vh; overflow-y: auto; @@ -193,7 +193,7 @@ const ProfileImageSlot = styled.div` align-items: center; justify-content: center; border-radius: 14px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; width: 42px; height: 42px; overflow: hidden; @@ -225,7 +225,7 @@ const NavItem = styled('div')<{ isActive?: boolean; }>` padding: 10px var(--x-gap); - color: ${(props) => (props.isActive ? colors.gray10 : colors.gray100)}; + color: ${(props) => (props.isActive ? colors.gray10 : colors.gray500)}; ${textStyles.SUIT_18_M}; `; @@ -233,13 +233,13 @@ const NavItem = styled('div')<{ const NavLinkSmall = styled.div<{ isActive?: boolean }>` cursor: pointer; padding: 8px var(--x-gap); - color: ${(props) => (props.isActive ? colors.gray10 : colors.gray100)}; + color: ${(props) => (props.isActive ? colors.gray10 : colors.gray500)}; ${textStyles.SUIT_14_M}; `; const Divider = styled.div` margin: 26px var(--x-gap); - border-top: 1px solid ${colors.black60}; - color: ${colors.black60}; + border-top: 1px solid ${colors.gray700}; + color: ${colors.gray700}; `; diff --git a/src/components/common/ImageUploader/Legacy.tsx b/src/components/common/ImageUploader/Legacy.tsx index 0c4658039..5bc319922 100644 --- a/src/components/common/ImageUploader/Legacy.tsx +++ b/src/components/common/ImageUploader/Legacy.tsx @@ -78,7 +78,7 @@ const Container = styled.div (typeof width === 'string' ? width : `${width}px`)}; height: ${({ height }) => (typeof height === 'string' ? height : `${height}px`)}; diff --git a/src/components/common/ImageUploader/index.tsx b/src/components/common/ImageUploader/index.tsx index fa6415a20..e16bd5dfb 100644 --- a/src/components/common/ImageUploader/index.tsx +++ b/src/components/common/ImageUploader/index.tsx @@ -153,7 +153,7 @@ const Container = styled.div & { er align-items: center; justify-content: center; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; cursor: pointer; width: ${({ width }) => (typeof width === 'string' ? width : `${width}px`)}; height: ${({ height }) => (typeof height === 'string' ? height : `${height}px`)}; @@ -184,7 +184,7 @@ const StyledSelectorControlButton = styled.button` align-items: center; justify-content: center; border-radius: 50%; - background-color: ${colors.black40}; + background-color: ${colors.gray600}; cursor: pointer; width: 22px; height: 22px; @@ -200,7 +200,7 @@ const StyledSelector = styled.div<{ isOpen: boolean }>` const editButtonStyle = css` display: flex; gap: 4px; - background-color: ${colors.black40}; + background-color: ${colors.gray600}; padding: 10px 12px; line-height: 100%; letter-spacing: -0.01em; @@ -220,7 +220,7 @@ const StyledEditButton = styled.button` position: absolute; top: 10px; right: 0; - background-color: ${colors.gray100}; + background-color: ${colors.gray500}; width: 1px; height: 14px; content: ''; diff --git a/src/components/common/Input/index.tsx b/src/components/common/Input/index.tsx index 87ea2ff79..854d9147f 100644 --- a/src/components/common/Input/index.tsx +++ b/src/components/common/Input/index.tsx @@ -68,7 +68,7 @@ export const Input = forwardRef(
{count && ( - + {`${value?.length ?? 0}/${maxCount}`} @@ -86,22 +86,22 @@ export default Input; const StyledInput = styled.input` box-sizing: border-box; transition: all 0.2s; - border: 1.5px solid ${colors.black60}; + border: 1.5px solid ${colors.gray700}; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 14px 20px; width: ${(props) => props.width}; color: ${colors.gray10}; ${textStyles.SUIT_16_M}; &::placeholder { - color: ${colors.gray100}; + color: ${colors.gray500}; } &:focus { outline: none; - border-color: ${colors.gray40}; - background-color: ${colors.black80}; + border-color: ${colors.gray200}; + background-color: ${colors.gray800}; } ${({ error }) => diff --git a/src/components/common/Loading/index.tsx b/src/components/common/Loading/index.tsx index 0f0b18c86..15fe03985 100644 --- a/src/components/common/Loading/index.tsx +++ b/src/components/common/Loading/index.tsx @@ -78,7 +78,7 @@ const StyledLoading = styled.div` const LoadingDot = styled(m.span)<{ color: LoadingColor }>` border-radius: 100%; - background-color: ${({ color }) => (color === 'default' ? colors.gray20 : colors.gray10)}; + background-color: ${({ color }) => (color === 'default' ? colors.gray50 : colors.gray10)}; width: 12px; height: 12px; `; diff --git a/src/components/common/Modal/index.tsx b/src/components/common/Modal/index.tsx index 3f9d003fd..24ef10860 100644 --- a/src/components/common/Modal/index.tsx +++ b/src/components/common/Modal/index.tsx @@ -85,7 +85,7 @@ const StyledModal = styled.div<{ width?: number }>` position: relative; z-index: 101; border-radius: 22.94px; - background: ${colors.black80}; + background: ${colors.gray800}; width: ${({ width }) => width ?? 450}px; color: ${colors.gray10}; `; @@ -126,7 +126,7 @@ const StyledTitle = styled.h1` const StyledContent = styled.div` margin-top: 18px; - color: ${colors.gray40}; + color: ${colors.gray200}; ${textStyles.SUIT_18_M}; `; diff --git a/src/components/common/MonthPicker.tsx b/src/components/common/MonthPicker.tsx index de86d534f..92db3585c 100644 --- a/src/components/common/MonthPicker.tsx +++ b/src/components/common/MonthPicker.tsx @@ -28,21 +28,21 @@ export default function MonthPicker({ onChange, value, placeholder }: MonthPicke const StyledDatePicker = styled(DatePicker)` box-sizing: border-box; transition: all 0.2s; - border: 1.5px solid ${colors.black60}; + border: 1.5px solid ${colors.gray700}; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 14px 20px; width: 100%; color: ${colors.gray10}; ${textStyles.SUIT_16_M}; &::placeholder { - color: ${colors.gray100}; + color: ${colors.gray500}; } &:focus { outline: none; - border-color: ${colors.gray40}; - background-color: ${colors.black80}; + border-color: ${colors.gray200}; + background-color: ${colors.gray800}; } `; diff --git a/src/components/common/Select/index.tsx b/src/components/common/Select/index.tsx index 588e8dd39..3dc7f965c 100644 --- a/src/components/common/Select/index.tsx +++ b/src/components/common/Select/index.tsx @@ -30,15 +30,15 @@ const StyledSelect = styled.select>` transition: all 0.2s; border: 1px solid transparent; border-radius: 6px; - background: top 12px right 14px ${colors.black60} no-repeat + background: top 12px right 14px ${colors.gray700} no-repeat url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.42387 11.6742C9.18956 11.9086 8.80966 11.9086 8.57535 11.6742L3.70034 6.79924C3.46603 6.56492 3.46603 6.18503 3.70034 5.95071C3.93466 5.7164 4.31456 5.7164 4.54887 5.95071L8.99961 10.4014L13.4503 5.95071C13.6847 5.7164 14.0646 5.7164 14.2989 5.95071C14.5332 6.18503 14.5332 6.56492 14.2989 6.79924L9.42387 11.6742Z' fill='%23646464'/%3E%3C/svg%3E%0A"); padding: 14px 34px 14px 20px; - color: ${colors.gray100}; + color: ${colors.gray500}; ${textStyles.SUIT_16_M}; ${({ width }) => `width: ${width}${typeof width === 'number' ? 'px' : ''};`} &:focus { - border-color: ${colors.gray40}; + border-color: ${colors.gray200}; } ${({ error }) => diff --git a/src/components/common/SquareLink/style.ts b/src/components/common/SquareLink/style.ts index d719c3366..a11b6904e 100644 --- a/src/components/common/SquareLink/style.ts +++ b/src/components/common/SquareLink/style.ts @@ -7,16 +7,16 @@ export type ButtonSize = 'small' | 'medium' | 'large'; export const buttonStyles: Record = { default: css` background-color: #212121; - color: ${colors.gray100}; + color: ${colors.gray500}; `, primary: css` transition: background-color 0.3s; background-color: ${colors.gray10}; - color: ${colors.black100}; + color: ${colors.gray900}; &:hover, &:focus { - background-color: ${colors.gray20}; + background-color: ${colors.gray50}; } `, }; diff --git a/src/components/common/Switch/index.tsx b/src/components/common/Switch/index.tsx index 69217ee9d..d00d829d2 100644 --- a/src/components/common/Switch/index.tsx +++ b/src/components/common/Switch/index.tsx @@ -64,7 +64,7 @@ const StyledSlider = styled.span<{ width: string; height: string }>` left: 0; transition: 0.2s; border-radius: 1000px; - background-color: ${colors.gray80}; + background-color: ${colors.gray400}; cursor: pointer; &::before { diff --git a/src/components/common/TextArea/index.tsx b/src/components/common/TextArea/index.tsx index a1a838e9f..907b5d49c 100644 --- a/src/components/common/TextArea/index.tsx +++ b/src/components/common/TextArea/index.tsx @@ -28,7 +28,7 @@ export const TextArea = forwardRef( /> {count && ( - + {`${value.length}/${maxCount}`} @@ -42,9 +42,9 @@ export default TextArea; const StyledTextArea = styled.textarea` transition: all 0.2s; - border: 1.5px solid ${colors.black60}; + border: 1.5px solid ${colors.gray700}; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 14px 20px; width: 100%; resize: none; @@ -52,13 +52,13 @@ const StyledTextArea = styled.textarea` ${textStyles.SUIT_16_M} &::placeholder { - color: ${colors.gray100}; + color: ${colors.gray500}; } &:focus { outline: none; - border-color: ${colors.gray40}; - background-color: ${colors.black80}; + border-color: ${colors.gray200}; + background-color: ${colors.gray800}; } ${({ error }) => diff --git a/src/components/common/Toast/ToastEntry.tsx b/src/components/common/Toast/ToastEntry.tsx index 33759d04e..f93b9bfe2 100644 --- a/src/components/common/Toast/ToastEntry.tsx +++ b/src/components/common/Toast/ToastEntry.tsx @@ -32,7 +32,7 @@ const TOAST_CONTAINER_LEFT = 36; const StyledToastEntry = styled.div` display: flex; border-radius: 18px; - background: ${colors.black60}; + background: ${colors.gray700}; padding: 16px; width: fit-content; @@ -68,5 +68,5 @@ const IconBox = styled.div` `; const ContentBox = styled.div` - color: ${colors.gray40}; + color: ${colors.gray200}; `; diff --git a/src/components/common/form/FormCollapsible.tsx b/src/components/common/form/FormCollapsible.tsx index 0e9711346..caa2a041c 100644 --- a/src/components/common/form/FormCollapsible.tsx +++ b/src/components/common/form/FormCollapsible.tsx @@ -24,7 +24,7 @@ const FormAccordion: FC> = ({ description, {open ? '- 접기' : '+ 펼치기'} - + {description} @@ -63,7 +63,7 @@ const StyledHeader = styled.div` const StyledDivder = styled.div` margin-top: 16px; - border: 0.5px solid ${colors.black60}; + border: 0.5px solid ${colors.gray700}; `; const StyledTitleWrapper = styled.div` @@ -79,7 +79,7 @@ const Essential = styled(Text)` const StyledTrigger = styled(Collapsible.Trigger)` cursor: pointer; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_15_SB}; `; diff --git a/src/components/common/form/FormProgress.tsx b/src/components/common/form/FormProgress.tsx index 4e274e71b..7716beaf2 100644 --- a/src/components/common/form/FormProgress.tsx +++ b/src/components/common/form/FormProgress.tsx @@ -38,7 +38,7 @@ const FormProgress: FC = ({ className, title, progressLabel, - + {progressLabel} @@ -67,7 +67,7 @@ export default FormProgress; const StyledFormProgress = styled.div` border-radius: 12px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 47px 40px; width: 278px; height: fit-content; @@ -85,7 +85,7 @@ const ProgressNumber = styled.div` align-items: center; justify-content: center; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; width: 50px; height: 24px; `; @@ -95,7 +95,7 @@ const StyledProgressRoot = styled(Progress.Root)` transform: translateZ(0); margin: 17px 0 0; border-radius: 100px; - background-color: ${colors.gray100}; + background-color: ${colors.gray500}; width: 100%; height: 6px; overflow: hidden; @@ -111,7 +111,7 @@ const StyledProgressIndicator = styled(Progress.Indicator)` const StatusList = styled.ul` margin: 29px 0 0; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 11px 0; list-style: none; `; @@ -122,7 +122,7 @@ const ListItem = styled.li<{ isDirty?: boolean }>` justify-content: space-between; transition: color 0.2s; padding: 14px 20px; - color: ${({ isDirty }) => (isDirty ? colors.gray10 : colors.gray100)}; + color: ${({ isDirty }) => (isDirty ? colors.gray10 : colors.gray500)}; ${textStyles.SUIT_16_M}; `; @@ -146,7 +146,7 @@ const Checked = styled.div` const Divider = styled.hr` margin: 36px 0 28px; border: none; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; width: 100%; height: 1.5px; `; diff --git a/src/components/debug/Panel.tsx b/src/components/debug/Panel.tsx index 7d7a805df..045869d10 100644 --- a/src/components/debug/Panel.tsx +++ b/src/components/debug/Panel.tsx @@ -41,7 +41,7 @@ const disclosureButtonStyle = css` cursor: pointer; padding: 8px 16px; width: 100%; - color: ${colors.gray20}; + color: ${colors.gray50}; `; const collapsibleContentStyle = css` diff --git a/src/components/debug/panels/AccessTokenPanel.tsx b/src/components/debug/panels/AccessTokenPanel.tsx index 27a890223..a609efeba 100644 --- a/src/components/debug/panels/AccessTokenPanel.tsx +++ b/src/components/debug/panels/AccessTokenPanel.tsx @@ -67,7 +67,7 @@ const AccessTokenPanel: FC = () => { dispatchEdit({ type: 'end' })} - css={{ backgroundColor: colors.gray100, marginLeft: '5px' }} + css={{ backgroundColor: colors.gray500, marginLeft: '5px' }} > 취소 diff --git a/src/components/intro/sections/CatchPhrase/index.tsx b/src/components/intro/sections/CatchPhrase/index.tsx index 72d1bdb75..6c3232da0 100644 --- a/src/components/intro/sections/CatchPhrase/index.tsx +++ b/src/components/intro/sections/CatchPhrase/index.tsx @@ -189,7 +189,7 @@ const SiteLink = styled(Link)` display: flex; align-items: center; transition: color 0.3s; - color: ${colors.gray60}; + color: ${colors.gray300}; &:hover { color: ${colors.white}; diff --git a/src/components/intro/sections/Footer.tsx b/src/components/intro/sections/Footer.tsx index 5a2f8641b..f5e2b0aff 100644 --- a/src/components/intro/sections/Footer.tsx +++ b/src/components/intro/sections/Footer.tsx @@ -33,7 +33,7 @@ const Container = styled.div` `; const HLine = styled.div` - border-top: 1px solid ${colors.black40}; + border-top: 1px solid ${colors.gray600}; width: 100%; `; diff --git a/src/components/intro/sections/Login.tsx b/src/components/intro/sections/Login.tsx index 33f90a05f..ddc383468 100644 --- a/src/components/intro/sections/Login.tsx +++ b/src/components/intro/sections/Login.tsx @@ -68,7 +68,7 @@ const LoginButton = styled(Link)` border-radius: 6px; background: ${colors.gray10}; padding: 6px 10px; - color: ${colors.black100}; + color: ${colors.gray900}; ${textStyles.SUIT_16_M}; @@ -83,9 +83,9 @@ const RegisterButton = styled(Link)` display: flex; align-items: center; justify-content: center; - border: 1px solid ${colors.black40}; + border: 1px solid ${colors.gray600}; border-radius: 6px; - background: ${colors.black80}; + background: ${colors.gray800}; padding: 6px 10px; ${textStyles.SUIT_16_M}; diff --git a/src/components/intro/sections/ValueSection/ValueCard.tsx b/src/components/intro/sections/ValueSection/ValueCard.tsx index da8cce7a4..48201ee41 100644 --- a/src/components/intro/sections/ValueSection/ValueCard.tsx +++ b/src/components/intro/sections/ValueSection/ValueCard.tsx @@ -96,7 +96,7 @@ export default ValueCard; const Container = styled.div` transform: translateZ(0); - background-color: ${colors.black100}; + background-color: ${colors.gray900}; `; const Card = styled(m.div, { @@ -109,7 +109,7 @@ const Card = styled(m.div, { transform: translateZ(0); transition: border 0.3s; outline: 1px solid transparent; - border: 1px solid ${colors.gray80}; + border: 1px solid ${colors.gray400}; border-radius: 20px; overflow: hidden; will-change: transform; diff --git a/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx b/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx index 7cdfe6eec..53015b265 100644 --- a/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx +++ b/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx @@ -96,9 +96,9 @@ const ImageBox = styled(m.div)` align-self: flex-end; justify-content: center; transform: translateZ(0); - border: 1px solid var(--black40, ${colors.black40}); + border: 1px solid var(--gray600, ${colors.gray600}); border-radius: 16px 16px 0 0; - background-color: ${colors.black100}; + background-color: ${colors.gray900}; width: 630px; height: 370px; overflow: hidden; @@ -120,7 +120,7 @@ const ImageBox = styled(m.div)` const TextBox = styled.div` max-width: 500px; word-break: keep-all; - color: ${colors.gray40}; + color: ${colors.gray200}; ${textStyles.SUIT_30_SB}; diff --git a/src/components/makers/MakersMembers.tsx b/src/components/makers/MakersMembers.tsx index 9e633aca8..4778c14fc 100644 --- a/src/components/makers/MakersMembers.tsx +++ b/src/components/makers/MakersMembers.tsx @@ -105,7 +105,7 @@ const TabButton = styled.a` cursor: pointer; padding: 12px 24px; min-width: max-content; - color: ${colors.gray60}; + color: ${colors.gray300}; &[data-state='active'] { border-bottom: 2px solid ${colors.gray10}; @@ -136,9 +136,9 @@ const TabBottomLine = styled.div` const GenerationMessage = styled.div` margin-top: 50px; border-radius: 16px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 32px; - color: ${colors.gray100}; + color: ${colors.gray500}; ${textStyles.SUIT_18_M} diff --git a/src/components/makers/Notifier.tsx b/src/components/makers/Notifier.tsx index e6075e9a7..dd5af6619 100644 --- a/src/components/makers/Notifier.tsx +++ b/src/components/makers/Notifier.tsx @@ -39,7 +39,7 @@ export default Notifier; const StyledJoinNotifier = styled.div` border-radius: 16px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 32px; @media ${MOBILE_MEDIA_QUERY} { @@ -57,7 +57,7 @@ const Title = styled.h2` const SubTitle = styled.h3` margin-top: 4px; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_16_M}; @@ -81,7 +81,7 @@ const ButtonGroup = styled.div` // justify-content: center; // border-radius: 6px; // background-color: ${colors.gray10}; -// color: ${colors.black100}; +// color: ${colors.gray900}; // cursor: pointer; // padding: 14px 20px; @@ -92,7 +92,7 @@ const ExpiredButton = styled.a` display: flex; align-items: center; justify-content: center; - border: 1px solid ${colors.gray80}; + border: 1px solid ${colors.gray400}; border-radius: 6px; cursor: pointer; padding: 14px 20px; diff --git a/src/components/makers/PersonBlock.tsx b/src/components/makers/PersonBlock.tsx index d990411b0..7769ed520 100644 --- a/src/components/makers/PersonBlock.tsx +++ b/src/components/makers/PersonBlock.tsx @@ -1,10 +1,10 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; import { FC, useState } from 'react'; import ResizedImage from '@/components/common/ResizedImage'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; @@ -132,7 +132,7 @@ const Position = styled.p` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_14_M}; diff --git a/src/components/makers/TeamBlock.tsx b/src/components/makers/TeamBlock.tsx index 1bf4b849b..91be893da 100644 --- a/src/components/makers/TeamBlock.tsx +++ b/src/components/makers/TeamBlock.tsx @@ -1,9 +1,9 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import { FC, ReactNode } from 'react'; import IconLinkOutgoing from '@/public/icons/icon-link-outgoing.svg'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; @@ -56,7 +56,7 @@ const TitleBox = styled.a` const Description = styled.p` margin-top: 4px; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_16_M}; diff --git a/src/components/members/common/MemberBlock.tsx b/src/components/members/common/MemberBlock.tsx index 5b6915bb8..035383a30 100644 --- a/src/components/members/common/MemberBlock.tsx +++ b/src/components/members/common/MemberBlock.tsx @@ -1,9 +1,9 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import { FC, useState } from 'react'; import ResizedImage from '@/components/common/ResizedImage'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; @@ -144,7 +144,7 @@ const Name = styled.h3` `; const Po = styled.span` - color: ${colors.gray40}; + color: ${colors.gray200}; ${textStyles.SUIT_16_M}; @@ -162,9 +162,9 @@ const BadgeContainer = styled.div` const Badge = styled.div` margin-right: 4px; border-radius: 3px; - background-color: ${colors.black40}; + background-color: ${colors.gray600}; padding: 2px 6px; - color: ${colors.gray20}; + color: ${colors.gray50}; ${textStyles.SUIT_14_M}; diff --git a/src/components/members/common/select/OrderBySelect.tsx b/src/components/members/common/select/OrderBySelect.tsx index 2a6d90c53..1f7257187 100644 --- a/src/components/members/common/select/OrderBySelect.tsx +++ b/src/components/members/common/select/OrderBySelect.tsx @@ -58,7 +58,7 @@ const SelectComp: FC> = ({ onChange, children - + {label} @@ -86,7 +86,7 @@ const StyledTrigger = styled(Select.Trigger)` const StyledContent = styled(Select.Content)` margin-top: 4px; border-radius: 12px; - background: ${colors.black60}; + background: ${colors.gray700}; padding: 7px; width: var(--radix-select-trigger-width); max-height: 262px; @@ -125,11 +125,11 @@ const StyledItem = styled(Select.Item)` cursor: pointer; padding: 5px 10px; width: 100%; - color: ${colors.gray40}; + color: ${colors.gray200}; &[data-highlighted] { outline: none; - background-color: ${colors.black40}; + background-color: ${colors.gray600}; color: ${colors.gray10}; } diff --git a/src/components/members/common/select/Select.tsx b/src/components/members/common/select/Select.tsx index c65808366..e1775e638 100644 --- a/src/components/members/common/select/Select.tsx +++ b/src/components/members/common/select/Select.tsx @@ -126,11 +126,11 @@ const StyledTrigger = styled.div>` justify-content: space-between; border: 1px solid transparent; border-radius: 12px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; cursor: pointer; padding: 14px 20px; width: 100%; - color: ${colors.gray80}; + color: ${colors.gray400}; ${({ error }) => error && @@ -161,7 +161,7 @@ const StyledTrigger = styled.div>` const StyledContent = styled(Select.Content)` margin-top: 4px; border-radius: 12px; - background: ${colors.black60}; + background: ${colors.gray700}; padding: 7px; width: var(--radix-select-trigger-width); max-height: 262px; @@ -217,7 +217,7 @@ const StyledThumb = styled(ScrollArea.Thumb)` right: 8px; flex: 1; border-radius: 4px; - background-color: ${colors.gray80}; + background-color: ${colors.gray400}; &::before { position: absolute; @@ -259,11 +259,11 @@ const StyledItem = styled(Select.Item)` cursor: pointer; padding: 5px 10px; width: 100%; - color: ${colors.gray80}; + color: ${colors.gray400}; &[data-highlighted] { outline: none; - background-color: ${colors.black40}; + background-color: ${colors.gray600}; color: ${colors.gray10}; } diff --git a/src/components/members/detail/ActivityBadge.tsx b/src/components/members/detail/ActivityBadge.tsx index 747a2f2a9..4050a5bff 100644 --- a/src/components/members/detail/ActivityBadge.tsx +++ b/src/components/members/detail/ActivityBadge.tsx @@ -19,7 +19,7 @@ const Container = styled.div` align-items: center; transition: background-color 0.2s; border-radius: 13px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 6px 14px; line-height: 100%; letter-spacing: -0.01em; @@ -28,7 +28,7 @@ const Container = styled.div` ${textStyles.SUIT_14_M} &:hover { - background-color: ${colors.black40}; + background-color: ${colors.gray600}; } @media ${MOBILE_MEDIA_QUERY} { diff --git a/src/components/members/detail/CareerSection/CareerItem.tsx b/src/components/members/detail/CareerSection/CareerItem.tsx index d9eba2a17..f9420f1eb 100644 --- a/src/components/members/detail/CareerSection/CareerItem.tsx +++ b/src/components/members/detail/CareerSection/CareerItem.tsx @@ -31,7 +31,7 @@ const SubContent = styled.div` gap: 12px; align-items: center; line-height: 14px; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_14_M}; @@ -46,7 +46,7 @@ const SubContent = styled.div` `; const Divider = styled.div` - background-color: ${colors.gray100}; + background-color: ${colors.gray500}; width: 1px; height: 14px; diff --git a/src/components/members/detail/CareerSection/index.tsx b/src/components/members/detail/CareerSection/index.tsx index 721923e62..a850f10bd 100644 --- a/src/components/members/detail/CareerSection/index.tsx +++ b/src/components/members/detail/CareerSection/index.tsx @@ -107,7 +107,7 @@ const CareerItemDecoration = styled.div<{ isCurrent: boolean; isEnd: boolean }>` & > .circle { margin-top: 6px; border-radius: 50%; - background-color: ${({ isCurrent }) => (isCurrent ? '#CDF47C' : colors.gray60)}; + background-color: ${({ isCurrent }) => (isCurrent ? '#CDF47C' : colors.gray300)}; width: 6px; height: 6px; } @@ -117,7 +117,7 @@ const CareerItemDecoration = styled.div<{ isCurrent: boolean; isEnd: boolean }>` top: 16px; left: 2.5px; border-radius: 1px; - background-color: ${colors.gray60}; + background-color: ${colors.gray300}; width: 1px; height: 52px; diff --git a/src/components/members/detail/EmptyProfile.tsx b/src/components/members/detail/EmptyProfile.tsx index 176afb965..0b1bd1a35 100644 --- a/src/components/members/detail/EmptyProfile.tsx +++ b/src/components/members/detail/EmptyProfile.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import ProfileIcon from 'public/icons/icon-profile.svg'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; export default function EmptyProfile() { @@ -51,7 +51,7 @@ const EmptyProfileImage = styled.div` const Description = styled.div` margin-top: 24px; line-height: 30px; - color: ${colors.gray80}; + color: ${colors.gray400}; font-size: 24px; font-weight: 400; diff --git a/src/components/members/detail/InterestSection/index.tsx b/src/components/members/detail/InterestSection/index.tsx index 0a1f6f03c..e26288dbe 100644 --- a/src/components/members/detail/InterestSection/index.tsx +++ b/src/components/members/detail/InterestSection/index.tsx @@ -178,7 +178,7 @@ const BalanceGameWrapper = styled.div` const BalanceGameItem = styled.div` border-radius: 13px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 6px 14px; line-height: 16px; color: ${colors.gray10}; diff --git a/src/components/members/detail/MemberDetail.tsx b/src/components/members/detail/MemberDetail.tsx index b30334f93..5cff09db8 100644 --- a/src/components/members/detail/MemberDetail.tsx +++ b/src/components/members/detail/MemberDetail.tsx @@ -320,7 +320,7 @@ const EmptyProfileImage = styled.div` align-items: center; justify-content: center; border-radius: 36px; - background: ${colors.black60}; + background: ${colors.gray700}; width: 171px; height: 171px; `; @@ -466,7 +466,7 @@ const StyledAddressBadgeWrapper = styled.div` const AddressBadge = styled.div` border-radius: 13px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 6px 14px; line-height: 16px; color: ${colors.gray10}; @@ -524,7 +524,7 @@ const ProjectUploadNudge = styled.div` justify-content: center; margin-top: 60px; border-radius: 30px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; height: 317px; @media ${MOBILE_MEDIA_QUERY} { @@ -553,7 +553,7 @@ const ProjectUploadButton = styled(Link)` border-radius: 14px; background-color: ${colors.gray10}; padding: 14px 48px; - color: ${colors.black80}; + color: ${colors.gray800}; ${textStyles.SUIT_15_SB}; diff --git a/src/components/members/detail/MemberProjectCard.tsx b/src/components/members/detail/MemberProjectCard.tsx index 41193284e..e293cb5b4 100644 --- a/src/components/members/detail/MemberProjectCard.tsx +++ b/src/components/members/detail/MemberProjectCard.tsx @@ -1,11 +1,11 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; import { FC } from 'react'; import { MemberProject } from '@/api/endpoint_LEGACY/members/type'; import { PROJECT_CATEGORY_LABEL } from '@/components/members/detail/constants'; import { playgroundLink } from '@/constants/links'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; @@ -55,7 +55,7 @@ const StyledCard = styled.a` position: relative; flex-direction: column; border-radius: 24px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; cursor: pointer; width: 381px; height: 317px; @@ -160,7 +160,7 @@ const Title = styled.div` const Generation = styled.div` line-height: 100%; letter-spacing: -0.01em; - color: ${colors.gray60}; + color: ${colors.gray300}; font-size: 12px; font-weight: 500; @media ${MOBILE_MEDIA_QUERY} { @@ -172,7 +172,7 @@ const Summary = styled.div` margin-top: 14px; line-height: 100%; letter-spacing: -0.01em; - color: ${colors.gray80}; + color: ${colors.gray400}; font-size: 14px; font-weight: 500; @media ${MOBILE_MEDIA_QUERY} { diff --git a/src/components/members/detail/MessageSection/MessageModal.tsx b/src/components/members/detail/MessageSection/MessageModal.tsx index 2c28b26df..4dae40799 100644 --- a/src/components/members/detail/MessageSection/MessageModal.tsx +++ b/src/components/members/detail/MessageSection/MessageModal.tsx @@ -141,7 +141,7 @@ const MessageModal: FC = ({ {name}님에게 쪽지 보내기 - + 쪽지는 상대방의 이메일로 전달됩니다:) @@ -152,14 +152,14 @@ const MessageModal: FC = ({ isSelected={category.value === (selectedCategory as MessageCategory | null)} > - + {category.value} ))} - + 회신 받을 본인 이메일 @@ -183,7 +183,7 @@ const MessageModal: FC = ({ {isLoading ? ( ) : ( - + 쪽지 보내기 )} @@ -224,7 +224,7 @@ const EmptyProfileImage = styled.div` align-items: center; justify-content: center; border-radius: 36px; - background: ${colors.black60}; + background: ${colors.gray700}; width: 171px; height: 171px; `; @@ -246,9 +246,9 @@ const StyledCategoryItem = styled.div<{ isSelected: boolean }>` justify-content: center; transition: border all 0.2s; opacity: ${({ isSelected }) => (isSelected ? 1 : 0.2)}; - border: 1px solid ${({ isSelected }) => (isSelected ? colors.white : colors.black60)}; + border: 1px solid ${({ isSelected }) => (isSelected ? colors.white : colors.gray700)}; border-radius: 20px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; cursor: pointer; padding: 6px 16px 6px 10px; `; @@ -279,7 +279,7 @@ const StyledButton = styled.button<{ isDisabled: boolean }>` transition: background-color 0.2s; margin-top: 36px; border-radius: 12px; - background-color: ${({ isDisabled }) => (isDisabled ? colors.black60 : colors.gray10)}; + background-color: ${({ isDisabled }) => (isDisabled ? colors.gray700 : colors.gray10)}; cursor: pointer; padding: 14px 28px; `; diff --git a/src/components/members/detail/MessageSection/Modal.tsx b/src/components/members/detail/MessageSection/Modal.tsx index c53202f14..2141270d9 100644 --- a/src/components/members/detail/MessageSection/Modal.tsx +++ b/src/components/members/detail/MessageSection/Modal.tsx @@ -88,7 +88,7 @@ const StyledModal = styled.div<{ width?: number }>` position: relative; z-index: 101; border-radius: 22.94px; - background: ${colors.black80}; + background: ${colors.gray800}; width: ${({ width }) => width ?? 450}px; color: ${colors.gray10}; `; @@ -133,7 +133,7 @@ const StyledTitle = styled.h1` const StyledContent = styled.div` margin-top: 18px; - color: ${colors.gray40}; + color: ${colors.gray200}; ${textStyles.SUIT_18_M}; `; diff --git a/src/components/members/detail/MessageSection/index.tsx b/src/components/members/detail/MessageSection/index.tsx index 02dfb61cf..19f01e457 100644 --- a/src/components/members/detail/MessageSection/index.tsx +++ b/src/components/members/detail/MessageSection/index.tsx @@ -91,7 +91,7 @@ const Title = styled.div` const Subtitle = styled.div` margin-top: 12px; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_16_M} @media ${MOBILE_MEDIA_QUERY} { ${textStyles.SUIT_14_M} @@ -100,14 +100,14 @@ const Subtitle = styled.div` const MessageButton = styled.div<{ disabled: boolean }>` border-radius: 14px; - background-color: ${({ disabled }) => (disabled ? colors.black80 : colors.gray10)}; + background-color: ${({ disabled }) => (disabled ? colors.gray800 : colors.gray10)}; cursor: pointer; padding: 15px 36px; - color: ${({ disabled }) => (disabled ? colors.gray80 : colors.black100)}; + color: ${({ disabled }) => (disabled ? colors.gray400 : colors.gray900)}; &:hover { - background-color: ${colors.gray20}; - color: ${colors.black100}; + background-color: ${colors.gray50}; + color: ${colors.gray900}; } ${textStyles.SUIT_15_SB} diff --git a/src/components/members/detail/PartItem.tsx b/src/components/members/detail/PartItem.tsx index 16a5502bd..52344c899 100644 --- a/src/components/members/detail/PartItem.tsx +++ b/src/components/members/detail/PartItem.tsx @@ -96,7 +96,7 @@ const Generation = styled.div` const BelongArea = styled.div` grid-area: belongs; - color: ${colors.gray100}; + color: ${colors.gray500}; ${textStyles.SUIT_18_M} diff --git a/src/components/members/main/MemberCard/MessageButton.tsx b/src/components/members/main/MemberCard/MessageButton.tsx index 3e6ebd31b..d53704dd9 100644 --- a/src/components/members/main/MemberCard/MessageButton.tsx +++ b/src/components/members/main/MemberCard/MessageButton.tsx @@ -42,16 +42,16 @@ const Button = styled.div` justify-content: center; transition: background-color 0.2s; border-radius: 50%; - background-color: ${colors.gray100}; + background-color: ${colors.gray500}; width: 32px; height: 32px; &:hover { - background-color: ${colors.gray80}; + background-color: ${colors.gray400}; } & svg { - fill: ${colors.gray100}; + fill: ${colors.gray500}; width: 16px; height: 16px; } @@ -60,7 +60,7 @@ const Button = styled.div` const TooltipContent = styled(Tooltip.Content)` border-radius: 4px; box-shadow: hsl(206deg 22% 7% / 35%) 0 10px 38px -10px, hsl(206deg 22% 7% / 20%) 0 10px 20px -15px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 17px 26px; animation-duration: 400ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); @@ -108,5 +108,5 @@ const TooltipContent = styled(Tooltip.Content)` `; const TooltipArrow = styled(Tooltip.Arrow)` - fill: ${colors.black60}; + fill: ${colors.gray700}; `; diff --git a/src/components/members/main/MemberCard/index.tsx b/src/components/members/main/MemberCard/index.tsx index 649f3d92b..bc51c272a 100644 --- a/src/components/members/main/MemberCard/index.tsx +++ b/src/components/members/main/MemberCard/index.tsx @@ -79,7 +79,7 @@ const MotionMemberCard = styled(m.div)` align-items: center; transition: box-shadow 0.3s; border-radius: 16px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 24px; @media ${MOBILE_MEDIA_QUERY} { @@ -103,7 +103,7 @@ const StyledAspectRatio = styled(AspectRatio.Root)` const StyledImageArea = styled.div` transform: translateZ(0); border-radius: 50%; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; width: 100%; height: 100%; overflow: hidden; @@ -154,7 +154,7 @@ const Belongs = styled.span` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_12_M} `; @@ -175,11 +175,11 @@ const DimShadow = styled.span` top: 0; right: 0; bottom: 0; - background: linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, ${colors.black80} 100%); + background: linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, ${colors.gray800} 100%); width: 20px; @media ${MOBILE_MEDIA_QUERY} { - background: linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, ${colors.black100} 100%); + background: linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, ${colors.gray900} 100%); } `; @@ -190,16 +190,16 @@ const Badge = styled.div` gap: 6px; align-items: center; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 6px 8px; - color: ${colors.gray100}; + color: ${colors.gray500}; ${textStyles.SUIT_11_M}; @media ${MOBILE_MEDIA_QUERY} { - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 4px 6px; - color: ${colors.gray100}; + color: ${colors.gray500}; ${textStyles.SUIT_11_M}; } @@ -217,7 +217,7 @@ const Intro = styled.p` margin-top: 16px; width: 100%; overflow: hidden; - color: ${colors.gray60}; + color: ${colors.gray300}; -webkit-line-clamp: 2; -webkit-box-orient: vertical; @@ -225,7 +225,7 @@ const Intro = styled.p` @media ${MOBILE_MEDIA_QUERY} { margin-top: 8px; - color: ${colors.gray100}; + color: ${colors.gray500}; -webkit-line-clamp: 1; } `; diff --git a/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.tsx b/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.tsx index 2722450c9..053df2763 100644 --- a/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.tsx +++ b/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.tsx @@ -40,7 +40,7 @@ const StyledMenu = styled.ul` flex-direction: column; gap: 13px; border-radius: 6px; - background-color: ${colors.black100}; + background-color: ${colors.gray900}; width: 235px; `; @@ -70,18 +70,18 @@ const StyledMenuItem = styled.li<{ isSelected?: boolean }>` justify-content: space-between; transition: background-color 0.3s; border-radius: 16px; - background-color: ${colors.black100}; + background-color: ${colors.gray900}; cursor: pointer; padding: 20px 21px; ${({ isSelected }) => isSelected && css` - background-color: ${colors.black80}; + background-color: ${colors.gray800}; `} &:hover { - background-color: ${colors.black80}; + background-color: ${colors.gray800}; } @media ${MOBILE_MEDIA_QUERY} { diff --git a/src/components/members/main/MemberList/MemberSearch.tsx b/src/components/members/main/MemberList/MemberSearch.tsx index 7e4c3713c..3c96c8ca5 100644 --- a/src/components/members/main/MemberList/MemberSearch.tsx +++ b/src/components/members/main/MemberList/MemberSearch.tsx @@ -46,7 +46,7 @@ const StyledInput = styled.input` transition: all 0.2s; border: 1px solid transparent; border-radius: 10px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 18px 45px 18px 24px; width: 100%; min-width: 60px; @@ -55,13 +55,13 @@ const StyledInput = styled.input` ${textStyles.SUIT_16_M}; &::placeholder { - color: ${colors.gray60}; + color: ${colors.gray300}; } &:focus { outline: none; - border-color: ${colors.gray40}; - background-color: ${colors.black80}; + border-color: ${colors.gray200}; + background-color: ${colors.gray800}; } `; diff --git a/src/components/members/main/MemberList/OnBoardingBanner.tsx b/src/components/members/main/MemberList/OnBoardingBanner.tsx index 3b94a442b..2742e7274 100644 --- a/src/components/members/main/MemberList/OnBoardingBanner.tsx +++ b/src/components/members/main/MemberList/OnBoardingBanner.tsx @@ -56,7 +56,7 @@ const IntroducePanel = styled.section` align-items: center; justify-content: space-between; border-radius: 42px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 59px 64px; width: 100%; height: 208px; @@ -70,7 +70,7 @@ const IntroducePanel = styled.section` @media ${MOBILE_MEDIA_QUERY} { display: block; - background-color: ${colors.black100}; + background-color: ${colors.gray900}; padding: 0; height: auto; } @@ -133,13 +133,13 @@ const buttonStyle = css` const UploadButton = styled.a` ${buttonStyle} - background-color: ${colors.black60}; - color: ${colors.gray100}; + background-color: ${colors.gray700}; + color: ${colors.gray500}; `; const ProfileButton = styled.a` ${buttonStyle} background-color: ${colors.gray10}; - color: ${colors.black100}; + color: ${colors.gray900}; `; diff --git a/src/components/members/main/MemberList/filters/MemberListFilter.tsx b/src/components/members/main/MemberList/filters/MemberListFilter.tsx index 321c4affb..b82821f3c 100644 --- a/src/components/members/main/MemberList/filters/MemberListFilter.tsx +++ b/src/components/members/main/MemberList/filters/MemberListFilter.tsx @@ -53,8 +53,8 @@ const StyledSelect = styled(Select)<{ selected: boolean }>` ${({ selected }) => selected && css` - border-color: ${colors.gray80}; - background-color: ${colors.black80}; + border-color: ${colors.gray400}; + background-color: ${colors.gray800}; color: ${colors.white}; `}; @@ -69,5 +69,5 @@ const StyledSelect = styled(Select)<{ selected: boolean }>` `; const StyledSelectItem = styled(Select.Item)` - color: ${colors.gray40}; + color: ${colors.gray200}; `; diff --git a/src/components/members/main/MemberList/filters/MemberListFilterSheet.tsx b/src/components/members/main/MemberList/filters/MemberListFilterSheet.tsx index e74e6783f..daaf93e41 100644 --- a/src/components/members/main/MemberList/filters/MemberListFilterSheet.tsx +++ b/src/components/members/main/MemberList/filters/MemberListFilterSheet.tsx @@ -71,13 +71,13 @@ const MemberListFilterSheet: FC> = const CustomSheet = styled(ReactModalSheet)` .react-modal-sheet-container { - background-color: ${colors.black60} !important; + background-color: ${colors.gray700} !important; } .react-modal-sheet-header { border-top-left-radius: 8px; border-top-right-radius: 8px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; } .react-modal-sheet-drag-indicator { @@ -85,7 +85,7 @@ const CustomSheet = styled(ReactModalSheet)` } .react-modal-sheet-content { - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 16px 16px 24px 24px; } `; diff --git a/src/components/members/main/MemberList/index.tsx b/src/components/members/main/MemberList/index.tsx index e3a82467b..a3e902ae6 100644 --- a/src/components/members/main/MemberList/index.tsx +++ b/src/components/members/main/MemberList/index.tsx @@ -265,7 +265,7 @@ const MemberList: FC = ({ banner }) => { `} > - + {placeholder}
@@ -513,11 +513,11 @@ const StyledMakersLink = styled.div` border-radius: 6px; cursor: pointer; padding: 5px 10px; - color: ${colors.gray40}; + color: ${colors.gray200}; &:hover { outline: none; - background-color: ${colors.black40}; + background-color: ${colors.gray600}; color: ${colors.white}; } `; @@ -601,7 +601,7 @@ const EmptyTitle = styled.span` `; const EmptyDescription = styled.span` - color: ${colors.gray80}; + color: ${colors.gray400}; ${textStyles.SUIT_16_M}; @media ${MOBILE_MEDIA_QUERY} { @@ -612,7 +612,7 @@ const EmptyDescription = styled.span` const HLine = styled.hr` margin: 0; border: 0; - border-bottom: 1px solid ${colors.black80}; + border-bottom: 1px solid ${colors.gray800}; padding: 0; `; @@ -632,16 +632,16 @@ const MobileFilterTrigger = styled.button<{ selected?: boolean }>` justify-content: space-between; border: 1px solid transparent; border-radius: 20.5px; - background: ${colors.black80}; + background: ${colors.gray800}; padding: 8px 12px; min-width: 76px; height: 32px; - color: ${colors.gray40}; + color: ${colors.gray200}; ${({ selected }) => selected && css` - border-color: ${colors.gray80}; + border-color: ${colors.gray400}; `} ${textStyles.SUIT_13_M}; diff --git a/src/components/members/upload/AddableItem.tsx b/src/components/members/upload/AddableItem.tsx index c2e74a76a..7cc8cb00a 100644 --- a/src/components/members/upload/AddableItem.tsx +++ b/src/components/members/upload/AddableItem.tsx @@ -76,7 +76,7 @@ const MobileDeleteButton = styled.button<{ isVisible: boolean }>` align-self: flex-end; margin-top: 20px; margin-right: 5px; - color: ${colors.gray60}; + color: ${colors.gray300}; font-size: 15px; font-weight: 600; diff --git a/src/components/members/upload/AddableWrapper.tsx b/src/components/members/upload/AddableWrapper.tsx index 367a4787b..740f883bb 100644 --- a/src/components/members/upload/AddableWrapper.tsx +++ b/src/components/members/upload/AddableWrapper.tsx @@ -21,7 +21,7 @@ export default function MemberAddableWrapper({ onAppend, children, className }:
추가
- +
추가
 @@ -56,11 +56,11 @@ const MobileAddButton = styled.button` align-items: center; justify-content: center; margin-top: 20px; - border: 1px solid ${colors.gray20}; + border: 1px solid ${colors.gray50}; border-radius: 12px; padding: 16px 0; width: 100%; - color: ${colors.gray20}; + color: ${colors.gray50}; } `; diff --git a/src/components/members/upload/FormSection/Basic/index.tsx b/src/components/members/upload/FormSection/Basic/index.tsx index a0ff81852..bd59f23f8 100644 --- a/src/components/members/upload/FormSection/Basic/index.tsx +++ b/src/components/members/upload/FormSection/Basic/index.tsx @@ -142,7 +142,7 @@ const StyledImageUploader = styled(ImageUploader)` @media ${MOBILE_MEDIA_QUERY} { margin-top: 16px; border-radius: 21.4783px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; width: 114px; height: 114px; } diff --git a/src/components/members/upload/FormSection/Career.tsx b/src/components/members/upload/FormSection/Career.tsx index 608ea1afc..f12cdd8cf 100644 --- a/src/components/members/upload/FormSection/Career.tsx +++ b/src/components/members/upload/FormSection/Career.tsx @@ -343,7 +343,7 @@ const StyledEditableSelect = styled(EditableSelect)` @media ${MOBILE_MEDIA_QUERY} { position: relative; border-radius: 12px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 0; select { diff --git a/src/components/members/upload/FormSection/PublicQuestion.tsx b/src/components/members/upload/FormSection/PublicQuestion.tsx index 9947e6936..1293d2407 100644 --- a/src/components/members/upload/FormSection/PublicQuestion.tsx +++ b/src/components/members/upload/FormSection/PublicQuestion.tsx @@ -25,7 +25,7 @@ const StyledSection = styled.section` display: grid; grid-template-columns: auto 40px; border-radius: 30px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 40px; width: 790px; @@ -55,7 +55,7 @@ const StyledSection = styled.section` .info { margin-top: 20px; - color: ${colors.gray80}; + color: ${colors.gray400}; @media ${MOBILE_MEDIA_QUERY} { margin-top: 12px; diff --git a/src/components/members/upload/FormSection/SoptActivity.tsx b/src/components/members/upload/FormSection/SoptActivity.tsx index afdc3ab25..fc647c2b7 100644 --- a/src/components/members/upload/FormSection/SoptActivity.tsx +++ b/src/components/members/upload/FormSection/SoptActivity.tsx @@ -162,7 +162,7 @@ const StyledSelect = styled(Select)` @media ${MOBILE_MEDIA_QUERY} { border-radius: 12px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; width: 100%; } `; diff --git a/src/components/members/upload/FormSection/Tmi/FavorToggle.tsx b/src/components/members/upload/FormSection/Tmi/FavorToggle.tsx index 4445b3478..585bff8c0 100644 --- a/src/components/members/upload/FormSection/Tmi/FavorToggle.tsx +++ b/src/components/members/upload/FormSection/Tmi/FavorToggle.tsx @@ -43,11 +43,11 @@ const Container = styled.div` const Button = styled.button<{ isSelected: boolean }>` border-radius: 13px; - background-color: ${({ isSelected }) => (isSelected ? colors.gray10 : colors.black60)}; + background-color: ${({ isSelected }) => (isSelected ? colors.gray10 : colors.gray700)}; cursor: pointer; padding: 14px 0; width: 122px; - color: ${({ isSelected }) => (isSelected ? colors.black100 : colors.gray10)}; + color: ${({ isSelected }) => (isSelected ? colors.gray900 : colors.gray10)}; ${textStyles.SUIT_16_SB} @@ -55,8 +55,8 @@ const Button = styled.button<{ isSelected: boolean }>` isSelected && css` &:hover { - background-color: ${colors.gray20}; - color: ${colors.black100}; + background-color: ${colors.gray50}; + color: ${colors.gray900}; } `} diff --git a/src/components/members/upload/FormSection/Tmi/MbtiToggle.tsx b/src/components/members/upload/FormSection/Tmi/MbtiToggle.tsx index 195876f2a..308178dd2 100644 --- a/src/components/members/upload/FormSection/Tmi/MbtiToggle.tsx +++ b/src/components/members/upload/FormSection/Tmi/MbtiToggle.tsx @@ -38,11 +38,11 @@ const Container = styled.div` `; const Button = styled.button<{ isSelected: boolean }>` - background-color: ${({ isSelected }) => (isSelected ? colors.gray10 : colors.black60)}; + background-color: ${({ isSelected }) => (isSelected ? colors.gray10 : colors.gray700)}; cursor: pointer; padding: 14px 0; width: 76px; - color: ${({ isSelected }) => (isSelected ? colors.black100 : colors.gray10)}; + color: ${({ isSelected }) => (isSelected ? colors.gray900 : colors.gray10)}; ${textStyles.SUIT_16_SB} @@ -50,8 +50,8 @@ const Button = styled.button<{ isSelected: boolean }>` isSelected && css` &:hover { - background-color: ${colors.gray20}; - color: ${colors.black100}; + background-color: ${colors.gray50}; + color: ${colors.gray900}; } `} diff --git a/src/components/members/upload/FormSection/Tmi/index.tsx b/src/components/members/upload/FormSection/Tmi/index.tsx index bef537714..48885dba0 100644 --- a/src/components/members/upload/FormSection/Tmi/index.tsx +++ b/src/components/members/upload/FormSection/Tmi/index.tsx @@ -219,7 +219,7 @@ const StyledSelect = styled(Select)` width: 130px; @media ${MOBILE_MEDIA_QUERY} { - background-color: ${colors.black80}; + background-color: ${colors.gray800}; } `; diff --git a/src/components/members/upload/forms/CountableInput.tsx b/src/components/members/upload/forms/CountableInput.tsx index 8d42c99e0..9fc21239a 100644 --- a/src/components/members/upload/forms/CountableInput.tsx +++ b/src/components/members/upload/forms/CountableInput.tsx @@ -28,7 +28,7 @@ export const MemberCountableInput = forwardRef - + {`${value?.length ?? 0}/${maxCount}`} @@ -47,22 +47,22 @@ const StyledContainer = styled.div` const StyledInput = styled.input>` box-sizing: border-box; transition: all 0.2s; - border: 1.5px solid ${colors.black60}; + border: 1.5px solid ${colors.gray700}; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 14px 20px; width: 100%; color: ${colors.gray10}; ${textStyles.SUIT_16_M}; &::placeholder { - color: ${colors.gray100}; + color: ${colors.gray500}; } &:focus { outline: none; - border-color: ${colors.gray40}; - background-color: ${colors.black80}; + border-color: ${colors.gray200}; + background-color: ${colors.gray800}; } ${({ error }) => diff --git a/src/components/members/upload/forms/CountableTextArea.tsx b/src/components/members/upload/forms/CountableTextArea.tsx index f8022c5a9..90090d97f 100644 --- a/src/components/members/upload/forms/CountableTextArea.tsx +++ b/src/components/members/upload/forms/CountableTextArea.tsx @@ -31,7 +31,7 @@ export const MemberCountableTextArea = forwardRef - + {`${value?.length ?? 0}/${maxCount}`} @@ -50,9 +50,9 @@ const StyledContainer = styled.div<{ customStyle?: SerializedStyles }>` const StyledTextArea = styled.textarea` transition: all 0.2s; - border: 1.5px solid ${colors.black60}; + border: 1.5px solid ${colors.gray700}; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 14px 20px; width: 100%; height: 100%; @@ -61,13 +61,13 @@ const StyledTextArea = styled.textarea` ${textStyles.SUIT_16_M} &::placeholder { - color: ${colors.gray100}; + color: ${colors.gray500}; } &:focus { outline: none; - border-color: ${colors.gray40}; - background-color: ${colors.black80}; + border-color: ${colors.gray200}; + background-color: ${colors.gray800}; } ${({ error }) => diff --git a/src/components/members/upload/forms/Form.tsx b/src/components/members/upload/forms/Form.tsx index bd4280d43..8d7f61a1f 100644 --- a/src/components/members/upload/forms/Form.tsx +++ b/src/components/members/upload/forms/Form.tsx @@ -68,7 +68,7 @@ const StyledHeader = styled.header` .description { margin-top: 16px; - color: ${colors.gray100}; + color: ${colors.gray500}; font-size: 16px; font-weight: 500; @@ -109,18 +109,18 @@ const SubmitButton = styled.button<{ isDisabled: boolean }>` width: 163px; height: 42px; line-height: 120%; - color: ${colors.black100}; + color: ${colors.gray900}; ${({ isDisabled }) => isDisabled && css` - background-color: ${colors.black80}; - color: ${colors.gray80}; + background-color: ${colors.gray800}; + color: ${colors.gray400}; `} &:hover { - background-color: ${colors.gray20}; - color: ${colors.black100}; + background-color: ${colors.gray50}; + color: ${colors.gray900}; } ${textStyles.SUIT_14_M} diff --git a/src/components/members/upload/forms/FormHeader.tsx b/src/components/members/upload/forms/FormHeader.tsx index cd11de562..c1c3fa68b 100644 --- a/src/components/members/upload/forms/FormHeader.tsx +++ b/src/components/members/upload/forms/FormHeader.tsx @@ -37,13 +37,13 @@ const StyledLine = styled.hr` margin-top: 20px; margin-bottom: 0; border: none; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; width: 100%; height: 1.5px; @media ${MOBILE_MEDIA_QUERY} { margin-top: 16px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; height: 1px; } `; @@ -62,7 +62,7 @@ const StyledRequired = styled(Text)` const Description = styled(Text)` display: block; margin-top: 10px; - color: ${colors.gray80}; + color: ${colors.gray400}; @media ${MOBILE_MEDIA_QUERY} { margin-top: 8px; diff --git a/src/components/members/upload/forms/FormItem.tsx b/src/components/members/upload/forms/FormItem.tsx index bbed60bf5..2bb93cceb 100644 --- a/src/components/members/upload/forms/FormItem.tsx +++ b/src/components/members/upload/forms/FormItem.tsx @@ -61,7 +61,7 @@ const StyledEssential = styled(Text)` const StyledDescription = styled(Text)` display: block; margin-top: 10px; - color: ${colors.gray80}; + color: ${colors.gray400}; @media ${MOBILE_MEDIA_QUERY} { margin-top: 8px; diff --git a/src/components/members/upload/forms/FormSection.ts b/src/components/members/upload/forms/FormSection.ts index e9e90ca50..0ae3c3720 100644 --- a/src/components/members/upload/forms/FormSection.ts +++ b/src/components/members/upload/forms/FormSection.ts @@ -1,12 +1,12 @@ import styled from '@emotion/styled'; - import { colors } from '@sopt-makers/colors'; + import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; export const MemberFormSection = styled.section` border-radius: 30px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 40px 40px 60px; input { @@ -14,13 +14,13 @@ export const MemberFormSection = styled.section` padding: 14.5px 20px; &::placeholder { - color: ${colors.gray80}; + color: ${colors.gray400}; } @media ${MOBILE_MEDIA_QUERY} { border-radius: 12px; - border-color: ${colors.black80}; - background-color: ${colors.black80}; + border-color: ${colors.gray800}; + background-color: ${colors.gray800}; } } @@ -28,13 +28,13 @@ export const MemberFormSection = styled.section` ${textStyles.SUIT_16_M} &::placeholder { - color: ${colors.gray80}; + color: ${colors.gray400}; } @media ${MOBILE_MEDIA_QUERY} { border-radius: 12px; - border-color: ${colors.black80}; - background-color: ${colors.black80}; + border-color: ${colors.gray800}; + background-color: ${colors.gray800}; } } diff --git a/src/components/mentoring/MentoringCard/index.tsx b/src/components/mentoring/MentoringCard/index.tsx index 1b56ac8bd..248348d0f 100644 --- a/src/components/mentoring/MentoringCard/index.tsx +++ b/src/components/mentoring/MentoringCard/index.tsx @@ -54,7 +54,7 @@ const Container = styled.div` column-gap: 37px; align-content: center; border-radius: 16px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 35px 40px 36px 45px; width: 424px; min-width: 424px; @@ -77,7 +77,7 @@ const Container = styled.div` @media ${MOBILE_MEDIA_QUERY} { align-items: center; border-radius: 10px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 16px; width: 233px; min-width: 233px; @@ -120,7 +120,7 @@ const EmptyProfileImage = styled.div` align-self: center; justify-content: center; border-radius: 50%; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; width: 68px; height: 68px; @@ -142,7 +142,7 @@ const EmptyProfileImage = styled.div` const KeywordBox = styled.span` border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 6px; height: fit-content; `; @@ -152,7 +152,7 @@ const KeywordContent = styled.div` overflow: hidden; text-overflow: ellipsis; line-height: 14px; - color: ${colors.gray100}; + color: ${colors.gray500}; -webkit-line-clamp: 1; -webkit-box-orient: vertical; @@ -191,7 +191,7 @@ const Title = styled.div` const Mentor = styled.div` grid-area: mentor; line-height: 120%; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_14_M}; @@ -212,7 +212,7 @@ const Closed = styled.div<{ isActive: boolean }>` justify-content: center; opacity: 0.8; border-radius: 16px; - background-color: ${colors.black100}; + background-color: ${colors.gray900}; width: 424px; height: 224px; line-height: 20px; diff --git a/src/components/mentoring/MentoringDetail/index.tsx b/src/components/mentoring/MentoringDetail/index.tsx index a0a33143c..4bf064d6d 100644 --- a/src/components/mentoring/MentoringDetail/index.tsx +++ b/src/components/mentoring/MentoringDetail/index.tsx @@ -192,7 +192,7 @@ const Section = styled.section` flex-direction: column; gap: 80px; border-radius: 30px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 48px 39px; width: 790px; @@ -236,7 +236,7 @@ const EmptyProfileImage = styled.div` align-items: center; justify-content: center; border-radius: 50%; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; width: 60px; height: 60px; @@ -263,7 +263,7 @@ const MentorName = styled.div` ${textStyles.SUIT_20_SB}; @media ${MOBILE_MEDIA_QUERY} { - color: ${colors.gray40}; + color: ${colors.gray200}; ${textStyles.SUIT_14_M}; } @@ -281,12 +281,12 @@ const MessageButton = styled.button` width: 180px; height: 48px; line-height: 135%; - color: ${colors.black100}; + color: ${colors.gray900}; ${textStyles.SUIT_14_B} & > svg { - fill: ${colors.black100}; + fill: ${colors.gray900}; width: 16px; height: 16px; } @@ -306,12 +306,12 @@ const ClosedMessageButton = styled.button` justify-content: center; justify-self: end; border-radius: 6px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; cursor: default; width: 249px; height: 48px; line-height: 135%; - color: ${colors.gray80}; + color: ${colors.gray400}; ${textStyles.SUIT_14_B} @@ -345,7 +345,7 @@ const KeywordList = styled.div` const Keyword = styled.div` border-radius: 16px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 8px 15px; line-height: 120%; color: ${colors.gray10}; @@ -353,7 +353,7 @@ const Keyword = styled.div` ${textStyles.SUIT_14_M}; @media ${MOBILE_MEDIA_QUERY} { - background-color: ${colors.black40}; + background-color: ${colors.gray600}; } `; @@ -366,7 +366,7 @@ const Content = styled.div` @media ${MOBILE_MEDIA_QUERY} { line-height: 120%; - color: ${colors.gray40}; + color: ${colors.gray200}; ${textStyles.SUIT_14_M}; } @@ -423,7 +423,7 @@ const Career = { @media ${MOBILE_MEDIA_QUERY} { gap: 4px; - color: ${colors.gray80}; + color: ${colors.gray400}; ${textStyles.SUIT_12_M} @@ -432,7 +432,7 @@ const Career = { height: 12px; & > path { - fill: ${colors.gray80}; + fill: ${colors.gray400}; } } } diff --git a/src/components/mentoring/MentoringList/index.tsx b/src/components/mentoring/MentoringList/index.tsx index c21d95abc..08647de2a 100644 --- a/src/components/mentoring/MentoringList/index.tsx +++ b/src/components/mentoring/MentoringList/index.tsx @@ -300,7 +300,7 @@ const MentorApplicationButton = styled.a` gap: 6px; align-items: center; line-height: 100%; - color: ${colors.gray80}; + color: ${colors.gray400}; ${textStyles.SUIT_18_M} @@ -309,7 +309,7 @@ const MentorApplicationButton = styled.a` height: 20px; & > path { - fill: ${colors.gray80}; + fill: ${colors.gray400}; } } diff --git a/src/components/projects/main/ProjectCard.tsx b/src/components/projects/main/ProjectCard.tsx index 7c5670cee..c5d279c3d 100644 --- a/src/components/projects/main/ProjectCard.tsx +++ b/src/components/projects/main/ProjectCard.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; import { FC } from 'react'; @@ -8,7 +9,6 @@ import Text from '@/components/common/Text'; import useEventLogger from '@/components/eventLogger/hooks/useEventLogger'; import { categoryLabel } from '@/components/projects/constants'; import { playgroundLink } from '@/constants/links'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; @@ -41,11 +41,11 @@ const ProjectCard: FC = ({ {name} - + {generation ? `${generation}기 ${categoryLabel[category]}` : categoryLabel[category]} - + {summary} @@ -60,7 +60,7 @@ const StyledCard = styled(Link)` position: relative; flex-direction: column; border-radius: 10px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; cursor: pointer; padding: 6px; width: 380px; @@ -104,7 +104,7 @@ const StyledServiceType = styled.div` background-color: rgb(252 252 252 / 70%); width: 54px; height: 23px; - color: ${colors.black40}; + color: ${colors.gray600}; ${textStyles.SUIT_12_B}; `; diff --git a/src/components/projects/main/ProjectDetail.tsx b/src/components/projects/main/ProjectDetail.tsx index 6841cba56..de1d6fbc1 100644 --- a/src/components/projects/main/ProjectDetail.tsx +++ b/src/components/projects/main/ProjectDetail.tsx @@ -10,11 +10,11 @@ import { deleteProject } from '@/api/endpoint_LEGACY/projects'; import ConfirmModal from '@/components/common/Modal/Confirm'; import MemberBlock from '@/components/members/common/MemberBlock'; import WithMemberMetadata from '@/components/members/common/WithMemberMetadata'; -import ProjectImageSlider from '@/components/projects/main/ProjectImageSlider'; import { getLinkInfo } from '@/components/projects/constants'; +import { MemberRoleInfo } from '@/components/projects/constants'; +import ProjectImageSlider from '@/components/projects/main/ProjectImageSlider'; import useGetProjectListQuery from '@/components/projects/upload/hooks/useGetProjectListQuery'; import useGetProjectQuery from '@/components/projects/upload/hooks/useGetProjectQuery'; -import { MemberRoleInfo } from '@/components/projects/constants'; import { playgroundLink } from '@/constants/links'; import IconTrashcan from '@/public/icons/icon-trashcan.svg'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; @@ -225,7 +225,7 @@ const ServiceType = styled.div` box-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%); background-color: white; padding: 6px 12px; - color: ${colors.black40}; + color: ${colors.gray600}; ${textStyles.SUIT_12_B}; @media ${MOBILE_MEDIA_QUERY} { @@ -276,7 +276,7 @@ const ControlWrapper = styled.div` align-items: center; justify-content: center; border-radius: 12px; - background-color: ${colors.black40}; + background-color: ${colors.gray600}; cursor: pointer; height: 48px; @@ -327,7 +327,7 @@ const StartEndAtWrapper = styled.div` const StartEndAt = styled.span` display: inline-block; line-height: 100%; - color: ${colors.gray60}; + color: ${colors.gray300}; font-size: 18px; font-weight: 500; @@ -388,7 +388,7 @@ const ProjectDetailContainer = styled.section` `; const DetailContainer = styled.div` border-radius: 12px; - background: ${colors.black80}; + background: ${colors.gray800}; padding: 48px; width: 100%; @@ -444,7 +444,7 @@ const LinkBox = styled.a` align-items: center; cursor: pointer; line-height: 160%; - color: ${colors.gray60}; + color: ${colors.gray300}; font-size: 14px; font-weight: 500; @@ -455,7 +455,7 @@ const LinkBox = styled.a` const LinkIcon = styled.img` border-radius: 100%; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; width: 72px; height: 72px; @@ -469,7 +469,7 @@ const UserWrapper = styled.div` flex-direction: column; flex-shrink: 0; border-radius: 12px; - background: ${colors.black80}; + background: ${colors.gray800}; padding: 48px 28px; height: fit-content; diff --git a/src/components/projects/main/ProjectList.tsx b/src/components/projects/main/ProjectList.tsx index 5b20bc7c7..ad9d21363 100644 --- a/src/components/projects/main/ProjectList.tsx +++ b/src/components/projects/main/ProjectList.tsx @@ -134,10 +134,10 @@ const ProjectUploadButton = styled(Link)` border-radius: 10px; background-color: ${colors.gray10}; padding: 18px 24px 18px 20px; - color: ${colors.black100}; + color: ${colors.gray900}; &:hover { - background-color: ${colors.gray20}; + background-color: ${colors.gray50}; } `; @@ -189,7 +189,7 @@ const StyledGridContainer = styled.div` const StyledNoData = styled.div` margin-top: 120px; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_16_M} @media ${MOBILE_MEDIA_QUERY} { ${textStyles.SUIT_14_M} diff --git a/src/components/projects/upload/form/ListImageUploader.tsx b/src/components/projects/upload/form/ListImageUploader.tsx index 892adb61e..a04b186b0 100644 --- a/src/components/projects/upload/form/ListImageUploader.tsx +++ b/src/components/projects/upload/form/ListImageUploader.tsx @@ -154,7 +154,7 @@ const ImageUploader = styled.div & align-items: center; justify-content: center; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; cursor: pointer; ${({ width }) => buildCSSWithLength('width', width)}; @@ -187,7 +187,7 @@ const StyledSelector = styled.div` const editButtonStyle = css` display: flex; gap: 4px; - background-color: ${colors.black40}; + background-color: ${colors.gray600}; padding: 10px 12px; line-height: 100%; letter-spacing: -0.01em; @@ -207,7 +207,7 @@ const StyledEditButton = styled.button` position: absolute; top: 10px; right: 0; - background-color: ${colors.gray100}; + background-color: ${colors.gray500}; width: 1px; height: 14px; content: ''; diff --git a/src/components/projects/upload/form/ProjectForm.tsx b/src/components/projects/upload/form/ProjectForm.tsx index b986a2070..61d9fafdb 100644 --- a/src/components/projects/upload/form/ProjectForm.tsx +++ b/src/components/projects/upload/form/ProjectForm.tsx @@ -100,12 +100,12 @@ const ProjectForm: FC = ({ 프로젝트 - + 프로젝트가 등록되면 SOPT 공식홈페이지에도 업로드 되기 때문에 꼼꼼하게 작성해주세요! - + 프로젝트가 등록되면 SOPT 공식홈페이지에도
업로드 되기 때문에 꼼꼼하게 작성해주세요! @@ -391,7 +391,7 @@ const StyledForm = styled.form` flex-grow: 1; gap: 60px; border-radius: 12px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 47px 40px; width: 892px; @@ -401,7 +401,7 @@ const StyledForm = styled.form` } @media ${MOBILE_MEDIA_QUERY} { - background-color: ${colors.black100}; + background-color: ${colors.gray900}; padding: 38px 24px 107px; } `; @@ -433,15 +433,15 @@ const StyledAddButton = styled.button` justify-content: center; margin: 14px 0 0 20px; cursor: pointer; - color: ${colors.gray100}; + color: ${colors.gray500}; ${textStyles.SUIT_16_M}; @media ${MOBILE_MEDIA_QUERY} { margin: 12px 0 0; - border: 1px solid ${colors.black40}; + border: 1px solid ${colors.gray600}; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 14px 16px; width: 100%; ${textStyles.SUIT_14_M}; diff --git a/src/components/projects/upload/form/fields/GenerationField.tsx b/src/components/projects/upload/form/fields/GenerationField.tsx index ecbeaa961..58287c44e 100644 --- a/src/components/projects/upload/form/fields/GenerationField.tsx +++ b/src/components/projects/upload/form/fields/GenerationField.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import React, { FC } from 'react'; import Checkbox from '@/components/common/Checkbox'; @@ -6,7 +7,6 @@ import ErrorMessage from '@/components/common/Input/ErrorMessage'; import Select from '@/components/common/Select'; import Text from '@/components/common/Text'; import { GENERATIONS } from '@/constants/generation'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; @@ -44,7 +44,7 @@ const GenerationField: FC = ({ value, defaultValue, onChan - + 특정 기수 활동으로 진행하지 않았어요 diff --git a/src/components/projects/upload/form/fields/LinkField.tsx b/src/components/projects/upload/form/fields/LinkField.tsx index 520198b68..545ab7e79 100644 --- a/src/components/projects/upload/form/fields/LinkField.tsx +++ b/src/components/projects/upload/form/fields/LinkField.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import { isEmpty } from 'lodash-es'; import React, { FC, useMemo, useState } from 'react'; @@ -8,7 +9,6 @@ import Select from '@/components/common/Select'; import useToast from '@/components/common/Toast/useToast'; import { linkTitles, LinkType } from '@/components/projects/upload/form/constants'; import IconTrash from '@/public/icons/icon-trash.svg'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; @@ -131,7 +131,7 @@ const StyledLinkEditView = styled.div<{ isError?: boolean }>` column-gap: 10px; align-items: ${({ isError }) => (isError ? 'flex-start' : 'center')}; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 10px; width: 100%; @@ -154,13 +154,13 @@ const StyledLinkView = styled.div` display: flex; gap: 42px; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; cursor: pointer; padding: 14px 30px; width: 100%; min-height: 42px; white-space: nowrap; - color: ${colors.gray100}; + color: ${colors.gray500}; ${textStyles.SUIT_14_M}; @@ -174,7 +174,7 @@ const StyledLinkView = styled.div` `; const StyledSelect = styled(Select)` - border: 1px solid ${colors.black40}; + border: 1px solid ${colors.gray600}; border-radius: 6px; @media ${MOBILE_MEDIA_QUERY} { @@ -188,7 +188,7 @@ const StyledInput = styled(Input)` border-radius: 6px; & > input { - border: 1px solid ${colors.black40}; + border: 1px solid ${colors.gray600}; } @media ${MOBILE_MEDIA_QUERY} { @@ -198,10 +198,10 @@ const StyledInput = styled(Input)` const StyledEditCompleteButton = styled.button` border-radius: 4px; - background-color: ${colors.black40}; + background-color: ${colors.gray600}; padding: 16px 36px; white-space: nowrap; - color: ${colors.gray100}; + color: ${colors.gray500}; ${textStyles.SUIT_14_M}; diff --git a/src/components/projects/upload/form/fields/MemberField.tsx b/src/components/projects/upload/form/fields/MemberField.tsx index 3c57cd48f..9390e1ccb 100644 --- a/src/components/projects/upload/form/fields/MemberField.tsx +++ b/src/components/projects/upload/form/fields/MemberField.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import { isEmpty } from 'lodash-es'; import { FC, useMemo, useState } from 'react'; @@ -8,11 +9,10 @@ import Input from '@/components/common/Input'; import ErrorMessage from '@/components/common/Input/ErrorMessage'; import Select from '@/components/common/Select'; import useToast from '@/components/common/Toast/useToast'; +import { MemberRoleInfo } from '@/components/projects/constants'; import MemberSearch from '@/components/projects/upload/form/fields/member/MemberSearch'; import { Member, MemberSearchContext } from '@/components/projects/upload/form/fields/member/MemberSearchContext'; -import { MemberRoleInfo } from '@/components/projects/constants'; import IconTrash from '@/public/icons/icon-trash.svg'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; @@ -187,7 +187,7 @@ const StyledMemberEditView = styled.div<{ isError: boolean }>` column-gap: 10px; align-items: ${({ isError }) => (isError ? 'flex-start' : 'center')}; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 10px; width: 100%; @@ -206,13 +206,13 @@ const StyledMemberView = styled.div` display: flex; gap: 42px; border-radius: 6px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; cursor: pointer; padding: 14px 30px; width: 100%; min-height: 42px; white-space: nowrap; - color: ${colors.gray100}; + color: ${colors.gray500}; ${textStyles.SUIT_14_M}; @@ -237,7 +237,7 @@ const StyledMemberSearch = styled(MemberSearch)` `; const StyledSelect = styled(Select)` - border: 1px solid ${colors.black40}; + border: 1px solid ${colors.gray600}; border-radius: 6px; @media ${MOBILE_MEDIA_QUERY} { @@ -251,7 +251,7 @@ const StyledInput = styled(Input)` border-radius: 6px; & > input { - border: 1px solid ${colors.black40}; + border: 1px solid ${colors.gray600}; } @media ${MOBILE_MEDIA_QUERY} { @@ -261,10 +261,10 @@ const StyledInput = styled(Input)` const StyledEditCompleteButton = styled.button` border-radius: 4px; - background-color: ${colors.black40}; + background-color: ${colors.gray600}; padding: 16px 36px; white-space: nowrap; - color: ${colors.gray100}; + color: ${colors.gray500}; ${textStyles.SUIT_14_M}; diff --git a/src/components/projects/upload/form/fields/PeriodField.tsx b/src/components/projects/upload/form/fields/PeriodField.tsx index eb865d3f7..c410a7b9c 100644 --- a/src/components/projects/upload/form/fields/PeriodField.tsx +++ b/src/components/projects/upload/form/fields/PeriodField.tsx @@ -1,11 +1,11 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import { FC } from 'react'; import Checkbox from '@/components/common/Checkbox'; import Input from '@/components/common/Input'; import ErrorMessage from '@/components/common/Input/ErrorMessage'; import Text from '@/components/common/Text'; -import { colors } from '@sopt-makers/colors'; import { textStyles } from '@/styles/typography'; interface PeriodFieldProps { @@ -56,7 +56,7 @@ const PeriodField: FC = ({ value, onChange, errorMessage, isSt handleOngoingChange(e.target.checked)} /> - + 진행중 @@ -85,7 +85,7 @@ const StyledErrorMessage = styled(ErrorMessage)` const Separator = styled.span` margin: 0 11px; - color: ${colors.gray100}; + color: ${colors.gray500}; ${textStyles.SUIT_16_M}; `; diff --git a/src/components/projects/upload/form/fields/ServiceTypeField.tsx b/src/components/projects/upload/form/fields/ServiceTypeField.tsx index 83b18f82f..f3d0b41f9 100644 --- a/src/components/projects/upload/form/fields/ServiceTypeField.tsx +++ b/src/components/projects/upload/form/fields/ServiceTypeField.tsx @@ -64,18 +64,18 @@ const StyledLabel = styled.label<{ checked?: boolean }>` justify-content: center; transition: background-color 0.2s, color 0.2s; border-radius: 100px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; cursor: pointer; padding: 14px 0; width: 163px; height: 42px; - color: ${colors.gray100}; + color: ${colors.gray500}; ${({ checked }) => checked && css` background-color: ${colors.gray10}; - color: ${colors.black100}; + color: ${colors.gray900}; `} ${textStyles.SUIT_14_M}; diff --git a/src/components/projects/upload/form/fields/StatusField.tsx b/src/components/projects/upload/form/fields/StatusField.tsx index 7d0853abd..2cc5776c9 100644 --- a/src/components/projects/upload/form/fields/StatusField.tsx +++ b/src/components/projects/upload/form/fields/StatusField.tsx @@ -1,9 +1,9 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import { ChangeEvent, FC } from 'react'; import Switch from '@/components/common/Switch'; import Text from '@/components/common/Text'; -import { colors } from '@sopt-makers/colors'; import { textStyles } from '@/styles/typography'; type Status = { @@ -48,7 +48,7 @@ const StyledStatusField = styled.div` `; const StyledSubTitle = styled(Text)` - color: ${colors.gray100}; + color: ${colors.gray500}; ${textStyles.SUIT_14_M}; `; diff --git a/src/components/projects/upload/form/fields/member/MemberSearch.tsx b/src/components/projects/upload/form/fields/member/MemberSearch.tsx index 90059cd41..f2755e70a 100644 --- a/src/components/projects/upload/form/fields/member/MemberSearch.tsx +++ b/src/components/projects/upload/form/fields/member/MemberSearch.tsx @@ -106,16 +106,16 @@ const StyledSearch = styled(Command)` const StyledInput = styled(Command.Input)<{ isError?: boolean }>` transition: all 0.2s; - border: 1px solid ${colors.black40}; + border: 1px solid ${colors.gray600}; border-radius: 6px; - background: ${colors.black60}; + background: ${colors.gray700}; padding: 14px 20px; color: ${colors.gray10}; &:focus { outline: none; - border-color: ${colors.gray40}; - background-color: ${colors.black80}; + border-color: ${colors.gray200}; + background-color: ${colors.gray800}; } ${({ isError }) => @@ -169,14 +169,14 @@ const StyledList = styled(Command.List)` flex-direction: column; gap: 8px; border-radius: 6px; - background: ${colors.black60}; + background: ${colors.gray700}; padding: 8px 0; width: 100%; @media ${MOBILE_MEDIA_QUERY} { position: absolute; top: 49px; - border: 1px solid ${colors.black40}; + border: 1px solid ${colors.gray600}; } `; @@ -184,13 +184,13 @@ const StyledItem = styled(Command.Item)` display: flex; align-items: center; justify-content: space-between; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; cursor: pointer; padding: 10px 16px; - color: ${colors.gray100}; + color: ${colors.gray500}; &:hover { - background-color: ${colors.black40}; + background-color: ${colors.gray600}; } @media ${MOBILE_MEDIA_QUERY} { diff --git a/src/components/projects/upload/form/presenter/FormEntry.tsx b/src/components/projects/upload/form/presenter/FormEntry.tsx index d239a2b30..941ca15c5 100644 --- a/src/components/projects/upload/form/presenter/FormEntry.tsx +++ b/src/components/projects/upload/form/presenter/FormEntry.tsx @@ -43,7 +43,7 @@ const TitleSlot = styled.div` const Description = styled.div` margin-bottom: 18px; - color: ${colors.gray80}; + color: ${colors.gray400}; ${textStyles.SUIT_14_M}; `; diff --git a/src/components/sopticle/HelpCard.tsx b/src/components/sopticle/HelpCard.tsx index 7646e3f38..b3ffe643c 100644 --- a/src/components/sopticle/HelpCard.tsx +++ b/src/components/sopticle/HelpCard.tsx @@ -34,13 +34,13 @@ const StyledHelpCard = styled.a<{ highlight?: boolean }>` transition: background-color 0.3s, box-shadow 0.3s; margin-top: 35px; border-radius: 10px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; cursor: pointer; padding: 19px 15px 18px; animation: 1.5s ease-out infinite alternate both running glow; &:hover { - background-color: ${colors.black40}; + background-color: ${colors.gray600}; } @media ${MOBILE_MEDIA_QUERY} { @@ -61,7 +61,7 @@ const StyledHelpCard = styled.a<{ highlight?: boolean }>` const Content = styled.div` line-height: 140%; white-space: pre-line; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_14_M} `; diff --git a/src/components/sopticle/Success.tsx b/src/components/sopticle/Success.tsx index 815ca7fdc..908488311 100644 --- a/src/components/sopticle/Success.tsx +++ b/src/components/sopticle/Success.tsx @@ -32,7 +32,7 @@ const checkSvg = ( ); diff --git a/src/components/sopticle/UploadSopticle.tsx b/src/components/sopticle/UploadSopticle.tsx index 25ad35b9c..f56470d80 100644 --- a/src/components/sopticle/UploadSopticle.tsx +++ b/src/components/sopticle/UploadSopticle.tsx @@ -95,7 +95,7 @@ const Title = styled.h1` const SubTitle = styled.h2` margin-top: 12px; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_16_M}; @@ -117,7 +117,7 @@ const Form = styled.form` const Label = styled.label` margin-bottom: 16px; - color: ${colors.gray80}; + color: ${colors.gray400}; ${textStyles.SUIT_16_M}; @@ -146,7 +146,7 @@ const Button = styled.button` border-radius: 10px; background-color: ${colors.gray10}; padding: 16px 0; - color: ${colors.black100}; + color: ${colors.gray900}; ${textStyles.SUIT_16_M}; diff --git a/src/components/soulmate/view/EntryCard.tsx b/src/components/soulmate/view/EntryCard.tsx index ef32f7cdc..93409ef4c 100644 --- a/src/components/soulmate/view/EntryCard.tsx +++ b/src/components/soulmate/view/EntryCard.tsx @@ -1,9 +1,9 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import Link from 'next/link'; import { FC } from 'react'; import SoulmateIcon from '@/components/soulmate/icons/SoulmateIcon'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; @@ -51,7 +51,7 @@ const StyledEntryCard = styled.div` / auto auto; justify-content: space-between; border-radius: 16px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 45px; @media ${MOBILE_MEDIA_QUERY} { @@ -118,7 +118,7 @@ const EntryLink = styled(Link)` flex-shrink: 0; justify-content: center; border-radius: 12px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 13px 12px; line-height: 100%; letter-spacing: -0.16px; @@ -146,7 +146,7 @@ const HintArea = styled.div` const HintChip = styled.div` border-radius: 8px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 12px 20px; line-height: 120%; letter-spacing: -0.16px; diff --git a/src/components/soulmate/view/chat/ChatRule.tsx b/src/components/soulmate/view/chat/ChatRule.tsx index 2f3b28fb0..671860149 100644 --- a/src/components/soulmate/view/chat/ChatRule.tsx +++ b/src/components/soulmate/view/chat/ChatRule.tsx @@ -1,10 +1,10 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import { AnimatePresence, m } from 'framer-motion'; import { FC, useState } from 'react'; import { cardStyle } from '@/components/soulmate/view/common/commonStyles'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; import { textStyles } from '@/styles/typography'; @@ -72,7 +72,7 @@ const ToggleButton = styled.button<{ isOpen: boolean }>` cursor: pointer; text-decoration: underline; text-decoration-thickness: 1; - color: ${colors.gray40}; + color: ${colors.gray200}; ${textStyles.SUIT_16_M}; @@ -102,7 +102,7 @@ const ToggleButton = styled.button<{ isOpen: boolean }>` const Rules = styled(m.p)` padding-top: 30px; white-space: pre-wrap; - color: ${colors.gray40}; + color: ${colors.gray200}; ${textStyles.SUIT_16_M}; diff --git a/src/components/soulmate/view/chat/Feedback.tsx b/src/components/soulmate/view/chat/Feedback.tsx index 20624a213..0f0831609 100644 --- a/src/components/soulmate/view/chat/Feedback.tsx +++ b/src/components/soulmate/view/chat/Feedback.tsx @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import { FC } from 'react'; import SoulmateIconHeart from '@/components/soulmate/icons/SoulmateIconHeart'; -import { colors } from '@sopt-makers/colors'; import { textStyles } from '@/styles/typography'; interface FeedbackProps {} @@ -35,7 +35,7 @@ const Title = styled.div` const Description = styled.div` margin-top: 12px; - color: ${colors.gray40}; + color: ${colors.gray200}; ${textStyles.SUIT_16_M}; `; @@ -52,6 +52,6 @@ const FeedbackButton = styled.a` justify-content: center; margin-top: 28px; border-radius: 10px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 20px; `; diff --git a/src/components/soulmate/view/chat/Menu.tsx b/src/components/soulmate/view/chat/Menu.tsx index b14619f00..57bc2ca8c 100644 --- a/src/components/soulmate/view/chat/Menu.tsx +++ b/src/components/soulmate/view/chat/Menu.tsx @@ -1,11 +1,11 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; import { FC, ReactNode, useState } from 'react'; import SoulmateIconFlag from '@/components/soulmate/icons/SoulmateIconFlag'; import SoulmateIconHeart from '@/components/soulmate/icons/SoulmateIconHeart'; import SoulmateModal from '@/components/soulmate/view/common/SoulmateModal'; -import { colors } from '@sopt-makers/colors'; import { textStyles } from '@/styles/typography'; interface MenuProps { @@ -45,7 +45,7 @@ const buttonStyle = css` align-items: center; justify-content: center; border-radius: 6px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; cursor: pointer; padding: 6px 10px; diff --git a/src/components/soulmate/view/chat/MissionProgress.tsx b/src/components/soulmate/view/chat/MissionProgress.tsx index 2b62d7363..d37f86a9a 100644 --- a/src/components/soulmate/view/chat/MissionProgress.tsx +++ b/src/components/soulmate/view/chat/MissionProgress.tsx @@ -66,7 +66,7 @@ const ProgressCell = styled.div<{ status: MissionStatus['status'] }>` ${(props) => props.status === 'completed' && css` - background-color: ${colors.black60}; + background-color: ${colors.gray700}; `} ${(props) => props.status === 'running' && @@ -76,8 +76,8 @@ const ProgressCell = styled.div<{ status: MissionStatus['status'] }>` ${(props) => props.status === 'waiting' && css` - background-color: ${colors.black80}; - color: ${colors.gray80}; + background-color: ${colors.gray800}; + color: ${colors.gray400}; `} @media ${MOBILE_MEDIA_QUERY} { diff --git a/src/components/soulmate/view/chat/SoulmateChat.tsx b/src/components/soulmate/view/chat/SoulmateChat.tsx index 73916043a..c52c5692c 100644 --- a/src/components/soulmate/view/chat/SoulmateChat.tsx +++ b/src/components/soulmate/view/chat/SoulmateChat.tsx @@ -103,13 +103,13 @@ const Scrollbar = styled(ScrollArea.Scrollbar)` display: flex; transition: background-color 160ms ease-out; margin-top: 30px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 2; user-select: none; touch-action: none; &:hover { - background-color: ${colors.black60}; + background-color: ${colors.gray700}; } &[data-orientation='vertical'] { @@ -130,7 +130,7 @@ const ScrollbarThumb = styled(ScrollArea.Thumb)` position: relative; flex: 1; border-radius: 5px; - background-color: ${colors.gray80}; + background-color: ${colors.gray400}; &::before { position: absolute; @@ -146,13 +146,13 @@ const ScrollbarThumb = styled(ScrollArea.Thumb)` `; const ScrollbarCorner = styled.div` - background-color: ${colors.black60}; + background-color: ${colors.gray700}; `; const SubmitArea = styled.form` display: flex; border-radius: 14px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; `; const Input = styled.textarea` diff --git a/src/components/soulmate/view/common/SoulmateModal.tsx b/src/components/soulmate/view/common/SoulmateModal.tsx index 9a7515043..893e385aa 100644 --- a/src/components/soulmate/view/common/SoulmateModal.tsx +++ b/src/components/soulmate/view/common/SoulmateModal.tsx @@ -1,9 +1,9 @@ import styled from '@emotion/styled'; import * as Dialog from '@radix-ui/react-dialog'; +import { colors } from '@sopt-makers/colors'; import dynamic from 'next/dynamic'; import { FC, ReactNode } from 'react'; -import { colors } from '@sopt-makers/colors'; import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; const DialogPortal = dynamic(() => import('@radix-ui/react-dialog').then((res) => res.Portal), { @@ -55,7 +55,7 @@ const DialogContent = styled(Dialog.Content)` left: 50%; transform: translate(-50%, -50%); border-radius: 16px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 30px 26px; width: calc(100vw - 72px); max-width: 360px; diff --git a/src/components/soulmate/view/common/commonStyles.ts b/src/components/soulmate/view/common/commonStyles.ts index 97423912c..bd551830d 100644 --- a/src/components/soulmate/view/common/commonStyles.ts +++ b/src/components/soulmate/view/common/commonStyles.ts @@ -5,7 +5,7 @@ import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; export const cardStyle = css` border-radius: 30px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; @media ${MOBILE_MEDIA_QUERY} { border-radius: 12px; diff --git a/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx b/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx index 896a68975..3da425502 100644 --- a/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx +++ b/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx @@ -39,7 +39,7 @@ const Container = styled.div` const StopSoulmateLink = styled.button` text-decoration: underline; line-height: 100%; - color: ${colors.gray40}; + color: ${colors.gray200}; ${textStyles.SUIT_16_M}; @@ -63,7 +63,7 @@ const Description = styled.div` text-align: center; line-height: 130%; letter-spacing: -0.12px; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_14_M}; @@ -82,7 +82,7 @@ const StopButton = styled.button` border-radius: 10px; background-color: ${colors.gray30}; padding: 14px 20px; - color: ${colors.black80}; + color: ${colors.gray800}; ${textStyles.SUIT_16_M}; @@ -95,11 +95,11 @@ const StopButton = styled.button` const KeepButton = styled.button` border-radius: 10px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 14px 20px; line-height: 100%; letter-spacing: -0.14px; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_16_M}; diff --git a/src/components/soulmate/view/lobby/MatchingStatus.tsx b/src/components/soulmate/view/lobby/MatchingStatus.tsx index 2359a89ab..529dedc30 100644 --- a/src/components/soulmate/view/lobby/MatchingStatus.tsx +++ b/src/components/soulmate/view/lobby/MatchingStatus.tsx @@ -79,7 +79,7 @@ const Button = styled(Link)` background-color: ${colors.gray10}; padding: 14px 20px; width: 180px; - color: ${colors.black100}; + color: ${colors.gray900}; ${textStyles.SUIT_16_SB}; diff --git a/src/components/soulmate/view/lobby/Register.tsx b/src/components/soulmate/view/lobby/Register.tsx index 256cf0b43..1414eeb47 100644 --- a/src/components/soulmate/view/lobby/Register.tsx +++ b/src/components/soulmate/view/lobby/Register.tsx @@ -103,7 +103,7 @@ const Card = styled.div` gap: 50px; margin-top: 50px; border-radius: 30px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 48px 39px; @media ${MOBILE_MEDIA_QUERY} { @@ -144,7 +144,7 @@ const AgreeArea = styled.div` gap: 12px; align-items: center; margin-top: 40px; - color: ${colors.gray40}; + color: ${colors.gray200}; ${textStyles.SUIT_16_M}; @@ -166,16 +166,16 @@ const ApplyButton = styled.button` background: ${colors.gray10}; cursor: pointer; padding: 14px 20px; - color: ${colors.black100}; + color: ${colors.gray900}; ${textStyles.SUIT_16_SB}; ${(props) => props.disabled && css` - background: ${colors.black60}; + background: ${colors.gray700}; cursor: default; - color: ${colors.gray80}; + color: ${colors.gray400}; `} @media ${MOBILE_MEDIA_QUERY} { diff --git a/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.tsx b/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.tsx index 146883e96..bedeae412 100644 --- a/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.tsx +++ b/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.tsx @@ -69,7 +69,7 @@ const StartWord = styled.div` position: relative; margin-left: 76px; border-radius: 20px; - background-color: ${colors.black100}; + background-color: ${colors.gray900}; padding: 16px 20px; width: fit-content; line-height: 120%; @@ -91,7 +91,7 @@ const Triangle = styled.div` top: -9px; left: 12px; border-right: 32px solid transparent; - border-bottom: 27px solid ${colors.black100}; + border-bottom: 27px solid ${colors.gray900}; border-left: 0 solid transparent; width: 0; height: 0; diff --git a/src/components/wordchain/WordchainChatting/WordChatMessage/index.tsx b/src/components/wordchain/WordchainChatting/WordChatMessage/index.tsx index 14cee179e..237af7bb6 100644 --- a/src/components/wordchain/WordchainChatting/WordChatMessage/index.tsx +++ b/src/components/wordchain/WordchainChatting/WordChatMessage/index.tsx @@ -52,7 +52,7 @@ const MessageBox = styled.div` gap: 8px; align-items: center; border-radius: 20px 20px 0; - background-color: ${colors.black100}; + background-color: ${colors.gray900}; padding: 16px 20px; width: fit-content; @@ -75,7 +75,7 @@ const Word = styled.div` const Divider = styled.div` line-height: 120%; - color: ${colors.black40}; + color: ${colors.gray600}; ${textStyles.SUIT_16_M} `; @@ -108,7 +108,7 @@ const EmptyProfileImage = styled.div` align-items: center; justify-content: center; border-radius: 50%; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; width: 40px; height: 40px; diff --git a/src/components/wordchain/WordchainChatting/Wordchain/index.tsx b/src/components/wordchain/WordchainChatting/Wordchain/index.tsx index 18a9705b1..adea5fbf5 100644 --- a/src/components/wordchain/WordchainChatting/Wordchain/index.tsx +++ b/src/components/wordchain/WordchainChatting/Wordchain/index.tsx @@ -106,11 +106,11 @@ const Container = styled.div` const InitMessage = styled.div` margin-bottom: 16px; border-radius: 20px; - background-color: ${colors.black40}; + background-color: ${colors.gray600}; padding: 4px 8px; width: fit-content; line-height: 120%; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_13_M} @@ -137,7 +137,7 @@ const WordChatMessageList = styled.div` const GiveUpButton = styled.button` margin-top: 40px; text-decoration-line: underline; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_16_M} diff --git a/src/components/wordchain/WordchainChatting/index.tsx b/src/components/wordchain/WordchainChatting/index.tsx index 3d7760b13..34441caa1 100644 --- a/src/components/wordchain/WordchainChatting/index.tsx +++ b/src/components/wordchain/WordchainChatting/index.tsx @@ -181,7 +181,7 @@ export default function WordchainChatting({ className }: WordchainChattingProps) const ContainerBase = styled.div` border-radius: 30px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; width: 790px; height: 100%; @@ -218,7 +218,7 @@ const WordchainList = styled.div` position: absolute; bottom: -34px; left: 0; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; width: 100%; height: 1px; content: ''; @@ -248,21 +248,21 @@ const Form = styled.form` const StyledInput = styled.input<{ isError: boolean }>` transition: border-color 0.5s ease-in; - border: 1px solid ${({ isError }) => (isError ? colors.error : colors.black80)}; + border: 1px solid ${({ isError }) => (isError ? colors.error : colors.gray800)}; border-radius: 14px; - background-color: ${colors.black100}; + background-color: ${colors.gray900}; padding: 24px 20px; width: 100%; line-height: 120%; color: ${colors.gray30}; &::placeholder { - color: ${colors.gray80}; + color: ${colors.gray400}; } &:focus { outline: none; - border-color: ${({ isError }) => (isError ? colors.error : colors.gray40)}; + border-color: ${({ isError }) => (isError ? colors.error : colors.gray200)}; } @media ${MOBILE_MEDIA_QUERY} { diff --git a/src/components/wordchain/WordchainEntry/WordChainEntry.tsx b/src/components/wordchain/WordchainEntry/WordChainEntry.tsx index 96c4669d8..0f28a1c51 100644 --- a/src/components/wordchain/WordchainEntry/WordChainEntry.tsx +++ b/src/components/wordchain/WordchainEntry/WordChainEntry.tsx @@ -136,7 +136,7 @@ const Container = styled(Link)` display: flex; justify-content: space-between; border-radius: 16px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 39px 45px 39px 70px; width: 100%; height: 100%; @@ -146,7 +146,7 @@ const Container = styled(Link)` align-items: center; justify-content: center; border-radius: 0; - background-color: ${colors.black100}; + background-color: ${colors.gray900}; padding: 0 20px; width: 100%; } @@ -194,7 +194,7 @@ const WordchainText = styled(Text)` align-items: center; justify-content: center; border-radius: 12px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 14px 0; width: 100%; @@ -231,7 +231,7 @@ const GotoWordChainWrapper = styled.aside` align-items: center; justify-content: space-between; border-radius: 12px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 16px; `; diff --git a/src/components/wordchain/WordchainEntry/WordchainMessage.tsx b/src/components/wordchain/WordchainEntry/WordchainMessage.tsx index 533fad648..912bf3674 100644 --- a/src/components/wordchain/WordchainEntry/WordchainMessage.tsx +++ b/src/components/wordchain/WordchainEntry/WordchainMessage.tsx @@ -74,7 +74,7 @@ const MessageBox = styled.div` gap: 8px; align-items: center; border-radius: 20px 20px 0; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 16px 20px; @media ${MOBILE_MEDIA_QUERY} { @@ -97,7 +97,7 @@ const Word = styled.div` const Divider = styled.div` line-height: 120%; - color: ${colors.black40}; + color: ${colors.gray600}; ${textStyles.SUIT_16_M} @@ -110,7 +110,7 @@ const Divider = styled.div` const Name = styled.div` line-height: 100%; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_14_SB} @@ -136,7 +136,7 @@ const EmptyProfileImage = styled.div` align-items: center; justify-content: center; border-radius: 50%; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; width: 40px; height: 40px; diff --git a/src/components/wordchain/WordchainWinners/WordchainWinner/index.tsx b/src/components/wordchain/WordchainWinners/WordchainWinner/index.tsx index d124d6037..c74ec5492 100644 --- a/src/components/wordchain/WordchainWinners/WordchainWinner/index.tsx +++ b/src/components/wordchain/WordchainWinners/WordchainWinner/index.tsx @@ -48,7 +48,7 @@ const WordChainWinnerContainer = styled(Link)<{ isRecent: boolean }>` ` : css` margin-top: 12px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; `} white-space: nowrap; @@ -76,13 +76,13 @@ const WinRound = styled.div<{ isRecent: boolean }>` ${({ isRecent }) => isRecent && css` - color: ${colors.black100}; + color: ${colors.gray900}; `} @media ${MOBILE_MEDIA_QUERY} { margin-top: 2px; height: 12px; - color: ${colors.gray60}; + color: ${colors.gray300}; ${textStyles.SUIT_10_M} ::after { @@ -112,7 +112,7 @@ const WinnerImageBox = styled.div` justify-content: center; margin-right: 6px; border-radius: 50%; - background-color: ${colors.black40}; + background-color: ${colors.gray600}; width: 20px; height: 20px; overflow: hidden; @@ -145,7 +145,7 @@ const WinnerName = styled.p<{ isRecent: boolean }>` ${({ isRecent }) => isRecent && css` - color: ${colors.black100}; + color: ${colors.gray900}; `} @media ${MOBILE_MEDIA_QUERY} { diff --git a/src/components/wordchain/WordchainWinners/index.tsx b/src/components/wordchain/WordchainWinners/index.tsx index 1d9eb53eb..fbb5ef590 100644 --- a/src/components/wordchain/WordchainWinners/index.tsx +++ b/src/components/wordchain/WordchainWinners/index.tsx @@ -58,7 +58,7 @@ const WinnerBoard = styled.aside` flex-direction: column; align-items: center; border-radius: 20px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 28px; width: 324px; height: 382px; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 28fe9ef9e..80fa66302 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -54,7 +54,7 @@ function MyApp({ Component, pageProps }: AppProps) { }} /> - + diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx index 93d82dda6..4f4e1b4c2 100644 --- a/src/pages/auth/login.tsx +++ b/src/pages/auth/login.tsx @@ -162,7 +162,7 @@ const LoginPrefix = styled.span` export const LoginDescription = styled.p` margin-top: 12px; text-align: center; - color: ${colors.gray80}; + color: ${colors.gray400}; ${textStyles.SUIT_16_M}; @@ -226,7 +226,7 @@ const ResetLoginAction = styled.div` const RegisterInfo = styled.div` margin-top: 30px; - color: ${colors.gray80}; + color: ${colors.gray400}; ${textStyles.SUIT_16_M}; @@ -270,7 +270,7 @@ const MotionTooltip = styled(m.div)` const TooltipRect = styled.div` border-radius: 12px; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; padding: 18px 16px; white-space: nowrap; color: ${colors.gray30}; @@ -286,7 +286,7 @@ const TooltipRect = styled.div` const TooltipArrow = styled.div` border: 10px solid transparent; - border-top: 12px solid ${colors.black60}; + border-top: 12px solid ${colors.gray700}; border-bottom: 0; width: 0; height: 0; diff --git a/src/pages/wordchain/index.tsx b/src/pages/wordchain/index.tsx index d9de19f8d..4da0d0039 100644 --- a/src/pages/wordchain/index.tsx +++ b/src/pages/wordchain/index.tsx @@ -130,7 +130,7 @@ const RuleWrapper = styled.div` flex-direction: column; row-gap: 16px; border-radius: 20px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 30px 38px; `; @@ -139,7 +139,7 @@ const RuleTrigger = styled.div` column-gap: 8px; align-items: center; text-decoration: underline; - color: ${colors.gray40}; + color: ${colors.gray200}; @media ${MOBILE_MEDIA_QUERY} { margin-top: 10px; @@ -149,14 +149,14 @@ const RuleTrigger = styled.div` const Winners = styled.div` position: relative; border-radius: 20px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; padding: 28px; height: 100%; max-height: 380px; @media ${MOBILE_MEDIA_QUERY} { border-radius: 0; - background-color: ${colors.black100}; + background-color: ${colors.gray900}; padding: 20px; height: 59.5px; } @@ -171,13 +171,13 @@ const DimmedWinners = styled.div` justify-content: center; opacity: 0.9; border-radius: 20px; - background-color: ${colors.black80}; + background-color: ${colors.gray800}; width: 100%; height: 100%; @media ${MOBILE_MEDIA_QUERY} { border-radius: 0; - background-color: ${colors.black100}; + background-color: ${colors.gray900}; padding: 20px; height: auto; } @@ -192,7 +192,7 @@ const MobileResponsive = styled(Responsive)` const Divider = styled.hr` margin: 24px 0 0; border: none; - background-color: ${colors.black60}; + background-color: ${colors.gray700}; width: 100%; height: 1.5px; `; diff --git a/src/styles/global.ts b/src/styles/global.ts index 0d55ff042..973c80ef5 100644 --- a/src/styles/global.ts +++ b/src/styles/global.ts @@ -15,7 +15,7 @@ export const global = css` html, body { - background-color: ${colors.black100}; + background-color: ${colors.gray900}; .pc-only { @media ${MOBILE_MEDIA_QUERY} { @@ -31,7 +31,7 @@ export const global = css` } & :focus-visible { - outline: 1px solid ${colors.gray40}; + outline: 1px solid ${colors.gray200}; } /* Remove Arrows/Spinners Chrome, Safari, Edge, Opera */ @@ -57,7 +57,7 @@ export const global = css` select:-webkit-autofill:hover, select:-webkit-autofill:focus { transition: background-color 5000s ease-in-out 0s; - box-shadow: 0 0 0 1000px ${colors.black80} inset; + box-shadow: 0 0 0 1000px ${colors.gray800} inset; -webkit-text-fill-color: ${colors.gray10}; } }