From 7c2a470d6a9f139f75bd33eca4fe2809e8bad672 Mon Sep 17 00:00:00 2001 From: "casio@sparcs.org" Date: Mon, 7 Oct 2024 14:54:40 +0900 Subject: [PATCH 1/9] feat: add clickable label --- .../src/common/components/CheckboxOption.tsx | 55 +++++++++++++++++++ .../common/components/Radio/RadioOption.tsx | 5 ++ 2 files changed, 60 insertions(+) create mode 100644 packages/web/src/common/components/CheckboxOption.tsx diff --git a/packages/web/src/common/components/CheckboxOption.tsx b/packages/web/src/common/components/CheckboxOption.tsx new file mode 100644 index 0000000..ce53e98 --- /dev/null +++ b/packages/web/src/common/components/CheckboxOption.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import styled from "styled-components"; +import Checkbox from "./Checkbox"; +import Typography from "./Typography"; + +interface CheckboxOptionProps { + optionText: string; + checked: boolean; + onClick: () => void; +} + +const CheckboxOptionWrapper = styled.div` + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 12px; + padding-left: 2px; + cursor: pointer; + + @media (max-width: ${({ theme }) => theme.responsive.BREAKPOINT.sm}) { + gap: 8px; + } +`; + +const ResponsiveTypography = styled(Typography)` + font-size: 16px; + line-height: 20px; + cursor: pointer; + + @media (max-width: ${({ theme }) => theme.responsive.BREAKPOINT.sm}) { + font-size: 14px; + } +`; + +const CheckboxOption: React.FC = ({ + optionText, + checked, + onClick, +}) => ( + + + { + e.stopPropagation(); + onClick(); + }} + > + {optionText} + + +); + +export default CheckboxOption; diff --git a/packages/web/src/common/components/Radio/RadioOption.tsx b/packages/web/src/common/components/Radio/RadioOption.tsx index 17fdbde..a66e9c0 100644 --- a/packages/web/src/common/components/Radio/RadioOption.tsx +++ b/packages/web/src/common/components/Radio/RadioOption.tsx @@ -22,6 +22,11 @@ const RadioOptionInner = styled.div` line-height: 20px; font-style: normal; font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR}; + cursor: pointer; + + & > * { + pointer-events: none; + } `; const RadioOption = ({ From 366b44f5fa8774460685d27b58c294671d1a29bf Mon Sep 17 00:00:00 2001 From: malloc3141 Date: Mon, 7 Oct 2024 22:47:43 +0900 Subject: [PATCH 2/9] feat: add color constants to colors.ts --- packages/web/src/styles/themes/colors.ts | 53 +++++++----------------- 1 file changed, 16 insertions(+), 37 deletions(-) diff --git a/packages/web/src/styles/themes/colors.ts b/packages/web/src/styles/themes/colors.ts index 6bbf810..be6d447 100644 --- a/packages/web/src/styles/themes/colors.ts +++ b/packages/web/src/styles/themes/colors.ts @@ -7,46 +7,25 @@ const colors = { WHITE: "#FFFFFF", BLACK: "#333333", - PRIMARY: "#0099AD", - BACKGROUND: - "linear-gradient(180deg, #EAFAFC 0%, #FFFFFF 33.33%, #FFFFFF 66.67%, #FFFFFF 100%)", - GREEN: { - 200: "#E9F9EF", - 600: "#008B1C", - }, - ORANGE: { - 200: "#FDF7E6", - 600: "#FF9211", - }, - BLUE: { - 200: "#E7F0FF", - 600: "#065DAC", - }, - PURPLE: { - 200: "#F6EEFE", - 600: "#9836EF", - }, - PINK: { - 200: "#FFF1F9", - 600: "#DB2777", - }, - YELLOW: { - 200: "#FFFDE9", - 600: "#E9A311", - }, - - MINT: { - 300: "#92CCD4", - 800: "#0C7F8E", - }, + PRIMARY: "#00674B", GRAY: { - 100: "#FAFAFA", - 200: "#EEEEEE", - 300: "#DDDDDD", - 600: "#555555", + 50: "#F3F3F3", + 100: "#DDDDDD", + 200: "#C6C6C6", + 400: "#9B9B9B", + 700: "#5E5E5E", + 900: "#393939", + }, + GREEN: { + 100: "#C3E3D6", + 300: "#7FBDA4", + 600: "#298062", + 800: "#09563F", }, RED: { - 600: "#DC2626", + 50: "#FFEEEB", + 200: "#F5A3A8", + 700: "#B7202A", }, }; From b38d8e9956d7e08d63911fe3bbccc2e6fa1a6f15 Mon Sep 17 00:00:00 2001 From: malloc3141 Date: Mon, 7 Oct 2024 22:58:07 +0900 Subject: [PATCH 3/9] fix: add back legacy colors --- .../BreadCrumb/_atomic/BreadCrumbItem.tsx | 2 +- packages/web/src/styles/themes/colors.ts | 25 +++++++++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/packages/web/src/common/components/BreadCrumb/_atomic/BreadCrumbItem.tsx b/packages/web/src/common/components/BreadCrumb/_atomic/BreadCrumbItem.tsx index 04c26dd..e4bc45f 100644 --- a/packages/web/src/common/components/BreadCrumb/_atomic/BreadCrumbItem.tsx +++ b/packages/web/src/common/components/BreadCrumb/_atomic/BreadCrumbItem.tsx @@ -10,7 +10,7 @@ interface BreadCrumbItemProps { const BreadCrumbInner = styled.div<{ disabled: boolean }>` color: ${({ theme, disabled }) => - disabled ? theme.colors.GRAY[300] : theme.colors.PRIMARY}; + disabled ? theme.colors.GRAY[100] : theme.colors.PRIMARY}; cursor: ${({ disabled }) => (disabled ? "default" : "pointer")}; `; diff --git a/packages/web/src/styles/themes/colors.ts b/packages/web/src/styles/themes/colors.ts index be6d447..493c856 100644 --- a/packages/web/src/styles/themes/colors.ts +++ b/packages/web/src/styles/themes/colors.ts @@ -27,6 +27,31 @@ const colors = { 200: "#F5A3A8", 700: "#B7202A", }, + ORANGE: { + 200: "#FDF7E6", + 600: "#FF9211", + }, + BLUE: { + 200: "#E7F0FF", + 600: "#065DAC", + }, + PURPLE: { + 200: "#F6EEFE", + 600: "#9836EF", + }, + PINK: { + 200: "#FFF1F9", + 600: "#DB2777", + }, + YELLOW: { + 200: "#FFFDE9", + 600: "#E9A311", + }, + + MINT: { + 300: "#92CCD4", + 800: "#0C7F8E", + }, }; export default colors; From 2bae3165873f0dc205ff440bf12d5a43255f9bd9 Mon Sep 17 00:00:00 2001 From: malloc3141 Date: Mon, 7 Oct 2024 23:10:00 +0900 Subject: [PATCH 4/9] feat: rollback change and fix build error --- packages/web/src/common/components/Button.tsx | 8 +++--- .../Calendar/_atomic/CalendarDate.tsx | 12 ++++----- .../web/src/common/components/Checkbox.tsx | 6 ++--- .../components/Forms/ItemNumberInput.tsx | 8 +++--- .../src/common/components/Forms/Select.tsx | 10 ++++---- .../src/common/components/Forms/TextInput.tsx | 4 +-- .../web/src/common/components/SearchInput.tsx | 2 +- .../components/StepProcess/StepProcess.tsx | 6 ++--- .../StepProcess/_atomic/StepDot.tsx | 6 ++--- .../StepProcess/_atomic/StepLabel.tsx | 4 +-- .../components/Table/TableButtonCell.tsx | 2 +- .../src/common/components/Table/TableCell.tsx | 2 +- packages/web/src/common/components/Tag.tsx | 6 ++--- .../web/src/common/components/TextButton.tsx | 2 +- .../Timetable/_atomic/TimetableCell.tsx | 6 ++--- packages/web/src/styles/themes/colors.ts | 25 ------------------- 16 files changed, 42 insertions(+), 67 deletions(-) diff --git a/packages/web/src/common/components/Button.tsx b/packages/web/src/common/components/Button.tsx index 869b0ac..b0d4daf 100644 --- a/packages/web/src/common/components/Button.tsx +++ b/packages/web/src/common/components/Button.tsx @@ -25,7 +25,7 @@ const ButtonDefaultInner = styled(ButtonInner)` background: ${({ theme }) => theme.colors.PRIMARY}; cursor: pointer; &:hover { - background: ${({ theme }) => theme.colors.MINT[800]}; + background: ${({ theme }) => theme.colors.GREEN[800]}; } `; @@ -34,13 +34,13 @@ const ButtonOutlinedInner = styled(ButtonInner)` background: ${({ theme }) => theme.colors.WHITE}; cursor: pointer; &:hover { - border: 1px solid ${({ theme }) => theme.colors.GRAY[300]}; + border: 1px solid ${({ theme }) => theme.colors.GRAY[100]}; } `; const ButtonDisabledInner = styled(ButtonInner)` - color: ${({ theme }) => theme.colors.GRAY[300]}; - border: 1px solid ${({ theme }) => theme.colors.GRAY[300]}; + color: ${({ theme }) => theme.colors.GRAY[100]}; + border: 1px solid ${({ theme }) => theme.colors.GRAY[100]}; background: ${({ theme }) => theme.colors.GRAY[100]}; cursor: not-allowed; `; diff --git a/packages/web/src/common/components/Calendar/_atomic/CalendarDate.tsx b/packages/web/src/common/components/Calendar/_atomic/CalendarDate.tsx index 85b8bee..50f6915 100644 --- a/packages/web/src/common/components/Calendar/_atomic/CalendarDate.tsx +++ b/packages/web/src/common/components/Calendar/_atomic/CalendarDate.tsx @@ -15,7 +15,7 @@ const getBackgroundColor = ( type?: CalendarDateProps["type"], ) => { if (type === "Default") return theme.colors.PRIMARY; - if (type === "Past/Future") return theme.colors.GRAY[300]; + if (type === "Past/Future") return theme.colors.GRAY[100]; return theme.colors.WHITE; }; @@ -78,12 +78,12 @@ const DateContainer = styled.div` }} background-color: ${({ type, theme }) => { if (type === "Past/Future" || type === "Default") return "transparent"; - if (type === "Pass") return theme.colors.MINT[300]; + if (type === "Pass") return theme.colors.GREEN[300]; return theme.colors.PRIMARY; }}; color: ${({ type, theme }) => { if (type === "Default") return theme.colors.BLACK; - if (type === "Past/Future") return theme.colors.GRAY[300]; + if (type === "Past/Future") return theme.colors.GRAY[100]; return theme.colors.WHITE; }}; `; @@ -118,11 +118,11 @@ const DateWrapper = styled.div<{ background: ${({ type, theme }) => { switch (type) { case "End": - return `linear-gradient(to left, rgba(255, 255, 255, 0) 50%, ${theme.colors.MINT[300]} 50%)`; + return `linear-gradient(to left, rgba(255, 255, 255, 0) 50%, ${theme.colors.GREEN[300]} 50%)`; case "Start": - return `linear-gradient(to right, rgba(255, 255, 255, 0) 50%, ${theme.colors.MINT[300]} 50%)`; + return `linear-gradient(to right, rgba(255, 255, 255, 0) 50%, ${theme.colors.GREEN[300]} 50%)`; case "Pass": - return `${theme.colors.MINT[300]}`; + return `${theme.colors.GREEN[300]}`; default: return "transparent"; } diff --git a/packages/web/src/common/components/Checkbox.tsx b/packages/web/src/common/components/Checkbox.tsx index 30b64bd..d3bdc69 100644 --- a/packages/web/src/common/components/Checkbox.tsx +++ b/packages/web/src/common/components/Checkbox.tsx @@ -18,10 +18,10 @@ const CheckboxInner = styled.div<{ disabled: boolean }>` border-radius: 4px; border: 1px solid ${({ disabled, theme }) => - disabled ? theme.colors.GRAY[300] : theme.colors.BLACK}; + disabled ? theme.colors.GRAY[100] : theme.colors.BLACK}; cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")}; background-color: ${({ disabled, theme }) => - disabled ? theme.colors.GRAY[100] : "transparent"}; + disabled ? theme.colors.GRAY[50] : "transparent"}; `; const Checkbox: React.FC = ({ @@ -34,7 +34,7 @@ const Checkbox: React.FC = ({ )} diff --git a/packages/web/src/common/components/Forms/ItemNumberInput.tsx b/packages/web/src/common/components/Forms/ItemNumberInput.tsx index c3081dd..64eb11a 100644 --- a/packages/web/src/common/components/Forms/ItemNumberInput.tsx +++ b/packages/web/src/common/components/Forms/ItemNumberInput.tsx @@ -30,13 +30,13 @@ const LabelWithIcon = styled.div` `; const StyledInfoIcon = styled(InfoOutlinedIcon)` - color: ${({ theme }) => theme.colors.GRAY[300]}; + color: ${({ theme }) => theme.colors.GRAY[100]}; cursor: pointer; font-size: 16px; `; const errorBorderStyle = css` - border-color: ${({ theme }) => theme.colors.RED[600]}; + border-color: ${({ theme }) => theme.colors.RED[700]}; `; const disabledStyle = css` @@ -62,7 +62,7 @@ const RightContentWrapper = styled.div<{ hasError: boolean }>` line-height: 20px; font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR}; color: ${({ theme, hasError }) => - hasError ? theme.colors.RED[600] : theme.colors.GRAY[300]}; + hasError ? theme.colors.RED[700] : theme.colors.GRAY[100]}; `; const Input = styled.input` @@ -88,7 +88,7 @@ const Input = styled.input` &:hover:not(:focus) { border-color: ${({ theme, hasError, disabled }) => - !hasError && !disabled ? theme.colors.GRAY[300] : undefined}; + !hasError && !disabled ? theme.colors.GRAY[100] : undefined}; } &::placeholder { diff --git a/packages/web/src/common/components/Forms/Select.tsx b/packages/web/src/common/components/Forms/Select.tsx index b3f407a..0f8e0e7 100644 --- a/packages/web/src/common/components/Forms/Select.tsx +++ b/packages/web/src/common/components/Forms/Select.tsx @@ -44,7 +44,7 @@ const StyledSelect = styled.div<{ border: 1px solid ${({ theme, hasError, isOpen }) => { if (isOpen) return theme.colors.PRIMARY; - return hasError ? theme.colors.RED[600] : theme.colors.GRAY[200]; + return hasError ? theme.colors.RED[700] : theme.colors.GRAY[200]; }}; border-radius: 4px; font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD}; @@ -55,7 +55,7 @@ const StyledSelect = styled.div<{ &:focus, &:hover:not(:focus) { border-color: ${({ theme, isOpen }) => - isOpen ? theme.colors.PRIMARY : theme.colors.GRAY[300]}; + isOpen ? theme.colors.PRIMARY : theme.colors.GRAY[100]}; } ${({ disabled }) => disabled && disabledStyle} @@ -68,7 +68,7 @@ const Dropdown = styled.div` width: 100%; margin-top: 4px; padding: 8px; - border: 1px solid ${({ theme }) => theme.colors.GRAY[300]}; + border: 1px solid ${({ theme }) => theme.colors.GRAY[100]}; border-radius: 4px; background-color: ${({ theme }) => theme.colors.WHITE}; gap: 4px; @@ -84,7 +84,7 @@ const Option = styled.div<{ selectable?: boolean }>` line-height: 20px; font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR}; color: ${({ theme, selectable }) => - selectable ? theme.colors.BLACK : theme.colors.GRAY[300]}; + selectable ? theme.colors.BLACK : theme.colors.GRAY[100]}; ${({ selectable }) => selectable && css` @@ -103,7 +103,7 @@ const NoOption = styled.div` font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR}; text-align: center; pointer-events: none; - color: ${({ theme }) => theme.colors.GRAY[300]}; + color: ${({ theme }) => theme.colors.GRAY[100]}; `; const IconWrapper = styled.div` diff --git a/packages/web/src/common/components/Forms/TextInput.tsx b/packages/web/src/common/components/Forms/TextInput.tsx index 4661d68..f56cf7b 100644 --- a/packages/web/src/common/components/Forms/TextInput.tsx +++ b/packages/web/src/common/components/Forms/TextInput.tsx @@ -17,7 +17,7 @@ export interface TextInputProps } const errorBorderStyle = css` - border-color: ${({ theme }) => theme.colors.RED[600]}; + border-color: ${({ theme }) => theme.colors.RED[700]}; `; const disabledStyle = css` @@ -53,7 +53,7 @@ const Input = styled.input.attrs(({ area }) => ({ } &:hover:not(:focus) { border-color: ${({ theme, hasError, disabled }) => - !hasError && !disabled && theme.colors.GRAY[300]}; + !hasError && !disabled && theme.colors.GRAY[100]}; } &::placeholder { color: ${({ theme }) => theme.colors.GRAY[200]}; diff --git a/packages/web/src/common/components/SearchInput.tsx b/packages/web/src/common/components/SearchInput.tsx index 63531fc..7aa7704 100644 --- a/packages/web/src/common/components/SearchInput.tsx +++ b/packages/web/src/common/components/SearchInput.tsx @@ -18,7 +18,7 @@ const SearchInputWrapper = styled.div` align-items: center; flex: 1; &:hover { - border-color: ${({ theme }) => theme.colors.GRAY[300]}; + border-color: ${({ theme }) => theme.colors.GRAY[100]}; } &:focus-within { border-color: ${({ theme }) => theme.colors.PRIMARY}; diff --git a/packages/web/src/common/components/StepProcess/StepProcess.tsx b/packages/web/src/common/components/StepProcess/StepProcess.tsx index fae7f5f..64917cc 100644 --- a/packages/web/src/common/components/StepProcess/StepProcess.tsx +++ b/packages/web/src/common/components/StepProcess/StepProcess.tsx @@ -30,7 +30,7 @@ const StepContainer = styled.div<{ width: string }>` &::before { content: ""; position: absolute; - background: ${props => props.theme.colors.GRAY[300]}; + background: ${props => props.theme.colors.GRAY[100]}; height: 4px; border-radius: 2px; width: 100%; @@ -44,8 +44,8 @@ const StepContainer = styled.div<{ width: string }>` position: absolute; background: linear-gradient( to right, - ${props => props.theme.colors.MINT[300]} 100%, - ${props => props.theme.colors.GRAY[300]} 100% + ${props => props.theme.colors.GREEN[300]} 100%, + ${props => props.theme.colors.GRAY[100]} 100% ); height: 4px; border-radius: 2px; diff --git a/packages/web/src/common/components/StepProcess/_atomic/StepDot.tsx b/packages/web/src/common/components/StepProcess/_atomic/StepDot.tsx index 055fae8..cd8da58 100644 --- a/packages/web/src/common/components/StepProcess/_atomic/StepDot.tsx +++ b/packages/web/src/common/components/StepProcess/_atomic/StepDot.tsx @@ -23,9 +23,9 @@ const StepDot = styled.div<{ step: Step }>` ${props => { switch (props.step) { case Step.After: - return props.theme.colors.MINT[300]; + return props.theme.colors.GREEN[300]; case Step.Before: - return props.theme.colors.GRAY[300]; + return props.theme.colors.GRAY[100]; case Step.Current: default: return props.theme.colors.PRIMARY; @@ -34,7 +34,7 @@ const StepDot = styled.div<{ step: Step }>` background-color: ${props => { switch (props.step) { case Step.After: - return props.theme.colors.MINT[300]; + return props.theme.colors.GREEN[300]; case Step.Before: return props.theme.colors.GRAY[200]; case Step.Current: diff --git a/packages/web/src/common/components/StepProcess/_atomic/StepLabel.tsx b/packages/web/src/common/components/StepProcess/_atomic/StepLabel.tsx index 956178a..da65bf1 100644 --- a/packages/web/src/common/components/StepProcess/_atomic/StepLabel.tsx +++ b/packages/web/src/common/components/StepProcess/_atomic/StepLabel.tsx @@ -5,9 +5,9 @@ const StepLabel = styled.div<{ step: Step }>` color: ${props => { switch (props.step) { case Step.After: - return props.theme.colors.GRAY[600]; + return props.theme.colors.GRAY[700]; case Step.Before: - return props.theme.colors.GRAY[300]; + return props.theme.colors.GRAY[100]; case Step.Current: default: return props.theme.colors.BLACK; diff --git a/packages/web/src/common/components/Table/TableButtonCell.tsx b/packages/web/src/common/components/Table/TableButtonCell.tsx index 1c93990..81df5e7 100644 --- a/packages/web/src/common/components/Table/TableButtonCell.tsx +++ b/packages/web/src/common/components/Table/TableButtonCell.tsx @@ -33,7 +33,7 @@ const CellText = styled.div<{ isGray: boolean }>` line-height: 24px; font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR}; color: ${({ isGray, theme }) => - isGray ? theme.colors.GRAY[300] : theme.colors.BLACK}; + isGray ? theme.colors.GRAY[100] : theme.colors.BLACK}; `; const TableButtonCell: React.FC = ({ diff --git a/packages/web/src/common/components/Table/TableCell.tsx b/packages/web/src/common/components/Table/TableCell.tsx index ac95c2e..9d03900 100644 --- a/packages/web/src/common/components/Table/TableCell.tsx +++ b/packages/web/src/common/components/Table/TableCell.tsx @@ -32,7 +32,7 @@ const CellText = styled.div<{ isGray: boolean }>` line-height: 24px; font-weight: ${({ theme }) => theme.fonts.WEIGHT.REGULAR}; color: ${({ isGray, theme }) => - isGray ? theme.colors.GRAY[300] : theme.colors.BLACK}; + isGray ? theme.colors.GRAY[100] : theme.colors.BLACK}; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/packages/web/src/common/components/Tag.tsx b/packages/web/src/common/components/Tag.tsx index df20845..7958149 100644 --- a/packages/web/src/common/components/Tag.tsx +++ b/packages/web/src/common/components/Tag.tsx @@ -22,9 +22,9 @@ const TagInner = styled.div<{ color: TagColor }>` line-height: 16px; font-weight: ${({ theme }) => theme.fonts.WEIGHT.MEDIUM}; color: ${({ theme, color }) => - color === "RED" ? theme.colors.WHITE : theme.colors[color][600]}; + color === "RED" ? theme.colors.WHITE : theme.colors.GREEN[600]}; background-color: ${({ theme, color }) => - color === "RED" ? theme.colors.RED[600] : theme.colors[color][200]}; + color === "RED" ? theme.colors.RED[700] : theme.colors.GREEN[300]}; border-radius: ${({ theme }) => theme.round.sm}; `; @@ -32,7 +32,7 @@ interface TagProps extends React.PropsWithChildren { color?: TagColor; } -const Tag: React.FC = ({ children =
, color = "BLUE" }) => ( +const Tag: React.FC = ({ children =
, color = "GREEN" }) => ( {children} ); diff --git a/packages/web/src/common/components/TextButton.tsx b/packages/web/src/common/components/TextButton.tsx index 9d84fb4..2bac887 100644 --- a/packages/web/src/common/components/TextButton.tsx +++ b/packages/web/src/common/components/TextButton.tsx @@ -9,7 +9,7 @@ const StyledTextButton = styled.button` background: none; border: none; color: ${({ theme, disabled }) => - disabled ? theme.colors.GRAY[300] : theme.colors.PRIMARY}; + disabled ? theme.colors.GRAY[100] : theme.colors.PRIMARY}; cursor: ${({ disabled }) => (disabled ? "not-allowed" : "pointer")}; font-size: 16px; line-height: 20px; diff --git a/packages/web/src/common/components/Timetable/_atomic/TimetableCell.tsx b/packages/web/src/common/components/Timetable/_atomic/TimetableCell.tsx index 04a3b72..ec6628e 100644 --- a/packages/web/src/common/components/Timetable/_atomic/TimetableCell.tsx +++ b/packages/web/src/common/components/Timetable/_atomic/TimetableCell.tsx @@ -17,12 +17,12 @@ const styleSwitch = (theme: DefaultTheme, type: TimetableCellType) => { case "hover": return { background: theme.colors.WHITE, - border: `1px solid ${theme.colors.GRAY[300]}`, + border: `1px solid ${theme.colors.GRAY[100]}`, }; case "selected": return { background: theme.colors.PRIMARY, - border: `1px solid ${theme.colors.MINT[800]}`, + border: `1px solid ${theme.colors.GREEN[800]}`, }; case "disabled": return { @@ -31,7 +31,7 @@ const styleSwitch = (theme: DefaultTheme, type: TimetableCellType) => { }; case "past": return { - background: theme.colors.MINT[300], + background: theme.colors.GREEN[300], border: `1px solid ${theme.colors.GRAY[200]}`, }; default: diff --git a/packages/web/src/styles/themes/colors.ts b/packages/web/src/styles/themes/colors.ts index 493c856..be6d447 100644 --- a/packages/web/src/styles/themes/colors.ts +++ b/packages/web/src/styles/themes/colors.ts @@ -27,31 +27,6 @@ const colors = { 200: "#F5A3A8", 700: "#B7202A", }, - ORANGE: { - 200: "#FDF7E6", - 600: "#FF9211", - }, - BLUE: { - 200: "#E7F0FF", - 600: "#065DAC", - }, - PURPLE: { - 200: "#F6EEFE", - 600: "#9836EF", - }, - PINK: { - 200: "#FFF1F9", - 600: "#DB2777", - }, - YELLOW: { - 200: "#FFFDE9", - 600: "#E9A311", - }, - - MINT: { - 300: "#92CCD4", - 800: "#0C7F8E", - }, }; export default colors; From ced2fe4b4c8c92c091e523dd77e68216fdf9cbc3 Mon Sep 17 00:00:00 2001 From: malloc3141 Date: Mon, 7 Oct 2024 23:13:06 +0900 Subject: [PATCH 5/9] feat: rollback change and fix build error 2 --- .../src/common/components/Calendar/_atomic/CalendarWeekdays.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/src/common/components/Calendar/_atomic/CalendarWeekdays.tsx b/packages/web/src/common/components/Calendar/_atomic/CalendarWeekdays.tsx index a50666b..39d248e 100644 --- a/packages/web/src/common/components/Calendar/_atomic/CalendarWeekdays.tsx +++ b/packages/web/src/common/components/Calendar/_atomic/CalendarWeekdays.tsx @@ -17,7 +17,7 @@ const DayWrapper = styled.div<{ font-weight: ${({ theme }) => theme.fonts.WEIGHT.MEDIUM}; line-height: 20px; font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD}; - color: ${({ theme }) => theme.colors.GRAY[600]}; + color: ${({ theme }) => theme.colors.GRAY[400]}; width: 100%; ${({ size }) => { switch (size) { From ec58c7e859296fca36e2dc27295de93ce8fe50e8 Mon Sep 17 00:00:00 2001 From: malloc3141 Date: Mon, 7 Oct 2024 23:15:49 +0900 Subject: [PATCH 6/9] feat: rollback change and fix build error 3 --- .../web/src/common/components/Forms/_atomic/ErrorMessage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/src/common/components/Forms/_atomic/ErrorMessage.tsx b/packages/web/src/common/components/Forms/_atomic/ErrorMessage.tsx index 8faf433..b3cbc65 100644 --- a/packages/web/src/common/components/Forms/_atomic/ErrorMessage.tsx +++ b/packages/web/src/common/components/Forms/_atomic/ErrorMessage.tsx @@ -5,7 +5,7 @@ import styled from "styled-components"; const StyledErrorMessage = styled.span` display: block; padding: 0px 0px 0px 2px; - color: ${({ theme }) => theme.colors.RED[600]}; + color: ${({ theme }) => theme.colors.RED[700]}; font-family: ${({ theme }) => theme.fonts.FAMILY.PRETENDARD}; font-weight: ${({ theme }) => theme.fonts.WEIGHT.MEDIUM}; font-size: 12px; From 8fe77ad8860c5f760045dd0bb5887b13ca09934c Mon Sep 17 00:00:00 2001 From: malloc3141 Date: Mon, 7 Oct 2024 23:25:19 +0900 Subject: [PATCH 7/9] feat: rollback change and fix build error 4 --- packages/web/src/common/components/Forms/PhoneInput.tsx | 4 ++-- .../web/src/common/components/Forms/SearchSelect/index.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/web/src/common/components/Forms/PhoneInput.tsx b/packages/web/src/common/components/Forms/PhoneInput.tsx index c4c1e25..11b047c 100644 --- a/packages/web/src/common/components/Forms/PhoneInput.tsx +++ b/packages/web/src/common/components/Forms/PhoneInput.tsx @@ -37,7 +37,7 @@ export interface PhoneInputProps } const errorBorderStyle = css` - border-color: ${({ theme }) => theme.colors.RED[600]}; + border-color: ${({ theme }) => theme.colors.RED[700]}; `; const disabledStyle = css` @@ -67,7 +67,7 @@ const Input = styled.input.withConfig({ } &:hover:not(:focus) { border-color: ${({ theme, hasError, disabled }) => - !hasError && !disabled && theme.colors.GRAY[300]}; + !hasError && !disabled && theme.colors.GRAY[100]}; } &::placeholder { color: ${({ theme }) => theme.colors.GRAY[200]}; diff --git a/packages/web/src/common/components/Forms/SearchSelect/index.tsx b/packages/web/src/common/components/Forms/SearchSelect/index.tsx index 307a862..50549fe 100644 --- a/packages/web/src/common/components/Forms/SearchSelect/index.tsx +++ b/packages/web/src/common/components/Forms/SearchSelect/index.tsx @@ -43,7 +43,7 @@ interface InputProps extends InputHTMLAttributes { } const errorBorderStyle = css` - border-color: ${({ theme }) => theme.colors.RED[600]}; + border-color: ${({ theme }) => theme.colors.RED[700]}; `; const disabledStyle = css` @@ -71,7 +71,7 @@ const Input = styled.input` } &:hover:not(:focus) { border-color: ${({ theme, hasError, disabled }) => - !hasError && !disabled && theme.colors.GRAY[300]}; + !hasError && !disabled && theme.colors.GRAY[100]}; } &::placeholder { color: ${({ theme }) => theme.colors.GRAY[200]}; @@ -99,7 +99,7 @@ const SearchList = styled.div` opacity: 1; background-color: ${({ theme }) => theme.colors.WHITE}; border-radius: 4px; - border: 1px solid ${({ theme }) => theme.colors.GRAY[300]}; + border: 1px solid ${({ theme }) => theme.colors.GRAY[100]}; padding: 8px; max-height: 280px; overflow-y: auto; From 5f00e3bb8d0956a31b3c9e93ba22ae307ac0d9e1 Mon Sep 17 00:00:00 2001 From: malloc3141 Date: Mon, 7 Oct 2024 23:27:41 +0900 Subject: [PATCH 8/9] feat: rollback change and fix build error 5 --- packages/web/src/common/components/NavTools/MobileNavMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/src/common/components/NavTools/MobileNavMenu.tsx b/packages/web/src/common/components/NavTools/MobileNavMenu.tsx index 84b2d2a..e0994b3 100644 --- a/packages/web/src/common/components/NavTools/MobileNavMenu.tsx +++ b/packages/web/src/common/components/NavTools/MobileNavMenu.tsx @@ -32,7 +32,7 @@ const MobileNavMenuInner = styled.div` justify-content: flex-start; gap: 8px; - background: ${({ theme }) => theme.colors.BACKGROUND}; + background: ${({ theme }) => theme.colors.WHITE}; @media (max-width: ${({ theme }) => theme.responsive.BREAKPOINT.xs}) { display: none; From ca83bdb8ebbef849d46775e3428853024af57609 Mon Sep 17 00:00:00 2001 From: malloc3141 Date: Mon, 7 Oct 2024 23:29:51 +0900 Subject: [PATCH 9/9] feat: rollback change and fix build error 6 --- packages/web/src/common/components/SelectedItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/src/common/components/SelectedItem.tsx b/packages/web/src/common/components/SelectedItem.tsx index 933073b..3c50b79 100644 --- a/packages/web/src/common/components/SelectedItem.tsx +++ b/packages/web/src/common/components/SelectedItem.tsx @@ -38,7 +38,7 @@ const SelectedItem: React.FC = ({ {text}