From c35c5e4931d472bce0680560f4ae0ad0d1fb4b90 Mon Sep 17 00:00:00 2001 From: asdf99245 Date: Sat, 8 Jul 2023 23:09:14 +0900 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20tailwind=20semantic=20color=20c?= =?UTF-8?q?ss=20variable=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 기존에 semantic color token을 사용함에도 tailwind classname을 적용할 때 _dark를 color명 뒤에 붙여서 dark 선택자를 통해 중복 선언하던 것을 css variable을 통해 classname 하나로 한번에 처리할 수 있도록 하였습니다. --- src/styles/tailwind.css | 62 +++++++++++++++++++++++++++++ tailwind.config.js | 87 ++++++++++++++++++----------------------- 2 files changed, 100 insertions(+), 49 deletions(-) diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index 474ab70d..0a93e419 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -7,4 +7,66 @@ body { font-family: Pretendard Variable; } + + :root { + --color-text-primary: 0 0 0; + --color-text-secondary: 115 115 115; + --color-text-tertiary: 181 181 181; + + --color-bg-primary: 255 255 255; + --color-bg-alpha-base: 255 255 255; + --color-bg-secondary: 243 244 246; + --color-bg-tertiary: 209 213 219; + + --color-border-primary: 209 213 219; + --color-border-secondary: 243 244 246; + + --color-button-secondary-bg: 235 235 235; + + --color-white: 255 255 255; + --color-black: 0 0 0; + --color-green: 40 205 65; + --color-yellow: 255 204 0; + --color-cyan: 50 173 230; + --color-indigo: 88 86 214; + --color-mint: 0 199 190; + --color-pink: 255 45 85; + --color-brown: 162 132 94; + --color-red: 255 59 48; + + --color-blue_200: 56 189 248; + --color-blue_300: 2 132 199; + + --color-system-100: 186 230 253; + --color-system-200: 56 189 248; + --color-system-300: 2 132 199; + + --color-green-100: 187 247 208; + --color-green-200: 34 197 94; + --color-green-300: 22 163 74; + + --color-red-100: 254 202 202; + --color-red-200: 255 59 48; + --color-red-300: 220 38 38; + + --color-yellow-100: 254 240 138; + --color-yellow-200: 250 204 21; + --color-yellow-300: 202 138 4; + } + + :root[class~='dark'] { + --color-text-primary: 255 255 255; + --color-text-secondary: 186 186 186; + --color-text-tertiary: 122 122 122; + + --color-bg-primary: 10 10 10; + --color-bg-alpha-base: 0 0 0; + --color-bg-secondary: 20 20 20; + --color-bg-tertiary: 51 51 51; + + --color-border-primary: 82 82 82; + --color-border-secondary: 38 38 38; + + --color-button-secondary-bg: 46 46 46; + } } diff --git a/tailwind.config.js b/tailwind.config.js index fbc64d27..0c1f584c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -37,63 +37,52 @@ module.exports = { }, colors: { text: { - primary: '#000000', - primary_dark: '#FFFFFF', - secondary: '#737373', - secondary_dark: '#BABABA', - tertiary: '#B5B5B5', - tertiary_dark: '#7A7A7A', + primary: 'rgb(var(--color-text-primary) / )', + secondary: 'rgb(var(--color-text-secondary) / )', + tertiary: 'rgb(var(--color-text-tertiary) / )', }, bg: { - primary: '#FFFFFF', - primary_dark: '#0A0A0A', - primary_alpha_0: '#FFFFFF00', - primary_alpha_0_dark: '#00000000', - secondary: '#F4F5F6', - secondary_dark: '#141414', - tertiary: '#E3E3E3', - tertiary_dark: '#333333', - tertiary_alpha_0: '#E3E3E300', - tertiary_alpha_0_dark: '#33333300', - alpha_60: '#FFFFFF99', - alpha_60_dark: '#00000099', + primary: 'rgb(var(--color-bg-primary) / )', + primary_alpha_0: 'rgb(var(--color-bg-alpha-base) / 0)', + secondary: 'rgb(var(--color-bg-secondary) / )', + tertiary: 'rgb(var(--color-bg-tertiary) / )', + tertiary_alpha_0: 'rgb(var(--color-bg-tertiary) / 0)', + tertiary_alpha_0_dark: 'rgb(var(--color-bg-tertiary) / 0)', + alpha_60: 'rgb(var(--color-bg-alpha-base) / 0.99)', }, border: { - primary: '#D1D5DB', - primary_dark: '#525252', - secondary: '#F3F4F6', - secondary_dark: '#262626', + primary: 'rgb(var(--color-border-primary) / )', + secondary: 'rgb(var(--color-border-secondary) / )', }, button: { - secondary_bg: '#EBEBEB', - secondary_bg_dark: '#2E2E2E', + secondary_bg: 'rgb(var(--color-button-secondary-bg) / )', }, color: { - white: '#FFFFFF', - black: '#000000', - green: '#28CD41', - yellow: '#FFCC00', - cyan: '#32ADE6', - indigo: '#5856D6', - mint: '#00C7BE', - blue_200: '#38BDF8', - blue_300: '#0284C7', - pink: '#FF2D55', - brown: '#A2845E', - red: '#FF3B30', - system_100: '#BAE6FD', - system_200: '#38BDF8', - system_300: '#0284C7', - green_100: '#BBF7D0', - green_200: '#22C55E', - green_300: '#16A34A', - red_100: '#FECACA', - red_200: '#FF3B30', - red_300: '#DC2626', - yellow_100: '#FEF08A', - yellow_200: '#FACC15', - yellow_300: '#CA8A04', - overlay: '#00000052', + white: 'rgb(var(--color-white) / )', + black: 'rgb(var(--color-black) / )', + green: 'rgb(var(--color-green) / )', + yellow: 'rgb(var(--color-yellow) / )', + cyan: 'rgb(var(--color-cyan) / )', + indigo: 'rgb(var(--color-indigo) / )', + mint: 'rgb(var(--color-mint) / )', + pink: 'rgb(var(--color-pink) / )', + brown: 'rgb(var(--color-brown) / )', + red: 'rgb(var(--color-red) / )', + system_100: 'rgb(var(--color-system-100) / )', + system_200: 'rgb(var(--color-system-200) / )', + system_300: 'rgb(var(--color-system-300) / )', + blue_200: 'rgb(var(--color-blue-200) / )', + blue_300: 'rgb(var(--color-blue-300) / )', + green_100: 'rgb(var(--color-green-100) / )', + green_200: 'rgb(var(--color-green-200) / )', + green_300: 'rgb(var(--color-green-300) / )', + red_100: 'rgb(var(--color-red-100) / )', + red_200: 'rgb(var(--color-red-200) / )', + red_300: 'rgb(var(--color-red-300) / )', + yellow_100: 'rgb(var(--color-yellow-100) / )', + yellow_200: 'rgb(var(--color-yellow-200) / )', + yellow_300: 'rgb(var(--color-yellow-300) / )', + overlay: 'rgb(var(--color-black) / 0.52)', }, }, }, From ba202ed41d44d5920a8040f03c7f8c26d76dc5c8 Mon Sep 17 00:00:00 2001 From: asdf99245 Date: Sat, 8 Jul 2023 23:11:30 +0900 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20darkmode=20css=20variable?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=EC=97=90=20=EB=94=B0=EB=A5=B8=20classname=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Badge/Badge.tsx | 6 +++--- src/components/Button/Button.tsx | 11 ++++------- src/components/Checkbox/Checkbox.tsx | 4 ++-- src/components/Chip/Chip.tsx | 8 ++------ src/components/Comment/Comment.tsx | 2 +- src/components/Divider/Divider.tsx | 4 ++-- src/components/Feed/Feed.tsx | 2 +- src/components/GroupHeader/GroupHeader.tsx | 2 +- src/components/IconText/IconText.tsx | 2 +- src/components/Input/Input.tsx | 13 +++++-------- src/components/ListItem/ListItem.tsx | 4 +--- src/components/Radio/Radio.tsx | 6 +++--- src/components/SearchBar/SearchBar.tsx | 6 +++--- src/components/Text/Text.tsx | 6 +++--- 14 files changed, 32 insertions(+), 44 deletions(-) diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx index 379049d7..6ef2452f 100644 --- a/src/components/Badge/Badge.tsx +++ b/src/components/Badge/Badge.tsx @@ -26,7 +26,7 @@ const colorConfig = { blue: 'bg-color-blue_200', pink: 'bg-color-pink', brown: 'bg-color-brown', - mono: 'bg-bg-primary_dark dark:bg-bg-primary', + mono: 'bg-text-primary', outline: 'bg-none', }; @@ -35,7 +35,7 @@ export function Badge({ color = 'outline', text, className }: Props) {
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index e4cf8d8f..c9d304c8 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -44,8 +44,7 @@ type Props = ButtonProps & Omit, keyof B const variantStyles: Record = { primary: 'bg-color-system_200 border-0 hover:bg-color-system_300', - secondary: - 'border-border-primary dark:border-border-primary_dark hover:border-color-system_200 hover:dark:border-color-system_200', + secondary: 'border-border-primary hover:border-color-system_200', text: 'border-0', }; @@ -70,10 +69,8 @@ export function Button(props: Props) { size="small" className={twMerge( 'transition-colors duration-200', - variant === 'primary' - ? 'fill-color-white' - : 'fill-text-secondary group-hover:fill-color-system_200 dark:fill-text-secondary_dark', - activated && 'fill-color-system_200 dark:fill-color-system_200', + variant === 'primary' ? 'fill-color-white' : 'fill-text-secondary group-hover:fill-color-system_200', + activated && 'fill-color-system_200', )} /> )} @@ -85,7 +82,7 @@ export function Button(props: Props) { color={variant === 'primary' ? 'white' : 'secondary'} className={cx('transition-colors duration-200', { 'group-hover:text-color-system_200': variant !== 'primary', - 'text-color-system_200 dark:text-color-system_200': activated, + 'text-color-system_200': activated, })} /> )} diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx index f238f2e5..9212744f 100644 --- a/src/components/Checkbox/Checkbox.tsx +++ b/src/components/Checkbox/Checkbox.tsx @@ -30,9 +30,9 @@ export function Checkbox({ labelText, checked = false, disabled = false, onChang
diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx index aa3d15cb..8eeb9a4b 100644 --- a/src/components/Chip/Chip.tsx +++ b/src/components/Chip/Chip.tsx @@ -24,9 +24,7 @@ export function Chip({ icon, text, isSelected }: Props) { className={cx( 'group flex h-8 w-fit select-none flex-row items-center rounded-lg duration-200 ease-out active:scale-92', text ? 'px-3' : 'px-2', - isSelected - ? 'bg-bg-secondary dark:bg-bg-secondary_dark' - : 'bg-bg-tertiary_alpha_0 dark:bg-bg-primary_alpha_0_dark', + isSelected ? 'bg-bg-secondary' : 'bg-bg-primary_alpha_0', )} > {icon && ( @@ -34,9 +32,7 @@ export function Chip({ icon, text, isSelected }: Props) { svg={icon} className={cx( 'mr-2 transition-[fill] group-hover:fill-color-system_200', - isSelected - ? 'fill-text-primary dark:fill-text-primary_dark' - : 'fill-text-secondary dark:fill-text-secondary_dark', + isSelected ? 'fill-text-primary' : 'fill-text-secondary', )} /> )} diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx index e6512389..5855ee90 100644 --- a/src/components/Comment/Comment.tsx +++ b/src/components/Comment/Comment.tsx @@ -81,7 +81,7 @@ export function Comment({
-
- {rightAddon} -
+
{rightAddon}
{hasBorder && } diff --git a/src/components/Radio/Radio.tsx b/src/components/Radio/Radio.tsx index 7f99bc07..b7463847 100644 --- a/src/components/Radio/Radio.tsx +++ b/src/components/Radio/Radio.tsx @@ -27,10 +27,10 @@ export function Radio({ label, selected, disabled, onChange }: Props) {
diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx index 9313f2df..6b978a46 100644 --- a/src/components/SearchBar/SearchBar.tsx +++ b/src/components/SearchBar/SearchBar.tsx @@ -17,18 +17,18 @@ const variantStyles: Record = { primary: 'bg-gradient-to-r from-green-200 to-color-system_100 shadow-searchbar hover:shadow-searchbar_hover dark:shadow-searchbar_dark dark:hover:shadow-searchbar_hover_dark', solid: - 'bg-border-primary dark:bg-border-primary_dark focus-within:bg-color-system_200 dark:focus-within:bg-color-system_200 hover:shadow-searchbar_solid_hover dark:hover:shadow-searchbar_solid_hover_dark', + 'bg-border-primary focus-within:bg-color-system_200 hover:shadow-searchbar_solid_hover dark:hover:shadow-searchbar_solid_hover_dark', }; export const SearchBar = forwardRef( ({ variant = 'primary', className, ...restProps }, ref) => { return (
-
+
= { }; export const textColorConfig: Record = { - primary: 'text-text-primary dark:text-text-primary_dark', - secondary: 'text-text-secondary dark:text-text-secondary_dark', - tertiary: 'text-text-tertiary dark:text-text-tertiary_dark', + primary: 'text-text-primary', + secondary: 'text-text-secondary', + tertiary: 'text-text-tertiary', white: 'text-white', black: 'text-black', red_100: 'text-red-300', From d36329ae3fb3126252f62583954b197ad3f6cfbd Mon Sep 17 00:00:00 2001 From: asdf99245 Date: Sat, 8 Jul 2023 23:17:24 +0900 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20shadow=20extend=20css=20variabl?= =?UTF-8?q?e=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/SearchBar/SearchBar.tsx | 6 ++---- src/styles/tailwind.css | 8 ++++++++ tailwind.config.js | 9 +++------ 3 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/SearchBar/SearchBar.tsx index 6b978a46..cc50bf39 100644 --- a/src/components/SearchBar/SearchBar.tsx +++ b/src/components/SearchBar/SearchBar.tsx @@ -14,10 +14,8 @@ interface InputProps { type Props = InputProps & Omit, keyof InputProps>; const variantStyles: Record = { - primary: - 'bg-gradient-to-r from-green-200 to-color-system_100 shadow-searchbar hover:shadow-searchbar_hover dark:shadow-searchbar_dark dark:hover:shadow-searchbar_hover_dark', - solid: - 'bg-border-primary focus-within:bg-color-system_200 hover:shadow-searchbar_solid_hover dark:hover:shadow-searchbar_solid_hover_dark', + primary: 'bg-gradient-to-r from-green-200 to-color-system_100 shadow-searchbar hover:shadow-searchbar_hover', + solid: 'bg-border-primary focus-within:bg-color-system_200 hover:shadow-searchbar_solid_hover', }; export const SearchBar = forwardRef( diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css index 0a93e419..c5095941 100644 --- a/src/styles/tailwind.css +++ b/src/styles/tailwind.css @@ -52,6 +52,10 @@ --color-yellow-100: 254 240 138; --color-yellow-200: 250 204 21; --color-yellow-300: 202 138 4; + + --shadow-searchbar: 0px 0px 1px 0px #f3f4f6; + --shadow-searchbar-hover: 0px 0px 5px 1px #d1d5db; + --shadow-searchbar-solid-hover: 0px 0px 16px 4px #b5b5b5; } :root[class~='dark'] { @@ -68,5 +72,9 @@ --color-border-secondary: 38 38 38; --color-button-secondary-bg: 46 46 46; + + --shadow-searchbar: 0px 0px 1px 0px #262626; + --shadow-searchbar-hover: 0px 0px 5px 1px #525252; + --shadow-searchbar-solid-hover: 0px 0px 16px 4px #7a7a7a; } } diff --git a/tailwind.config.js b/tailwind.config.js index 0c1f584c..57261d82 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -25,12 +25,9 @@ module.exports = { gap: 'gap', }, boxShadow: { - searchbar: '0px 0px 1px 0px #F3F4F6', - searchbar_dark: '0px 0px 1px 0px #262626', - searchbar_hover: '0px 0px 5px 1px #D1D5DB', - searchbar_hover_dark: '0px 0px 5px 1px #525252', - searchbar_solid_hover: '0px 0px 16px 4px #B5B5B5', - searchbar_solid_hover_dark: '0px 0px 16px 4px #7A7A7A', + searchbar: 'var(--shadow-searchbar)', + searchbar_hover: 'var(--shadow-searchbar-hover)', + searchbar_solid_hover: 'var(--shadow-searchbar-solid-hover)', }, scale: { 92: '0.92',