From fb118f3bdf757899583d7224b5e0c64e9939f510 Mon Sep 17 00:00:00 2001 From: Minseo Lee Date: Fri, 9 Aug 2024 11:01:19 +0900 Subject: [PATCH] Adjust colors --- src/alf/themes.ts | 52 ++++++++++++++--------------- src/components/Button.tsx | 24 ++----------- src/view/screens/Settings/index.tsx | 29 ++++++++-------- src/view/shell/desktop/Search.tsx | 6 ++-- 4 files changed, 47 insertions(+), 64 deletions(-) diff --git a/src/alf/themes.ts b/src/alf/themes.ts index ba18ee0072..559edefbc7 100644 --- a/src/alf/themes.ts +++ b/src/alf/themes.ts @@ -186,19 +186,19 @@ export function createThemes({ white: color.gray_0, black: color.trueBlack, - contrast_25: color.gray_1000, - contrast_50: color.gray_975, - contrast_100: color.gray_950, - contrast_200: color.gray_900, - contrast_300: color.gray_800, - contrast_400: color.gray_700, - contrast_500: color.gray_600, - contrast_600: color.gray_500, - contrast_700: color.gray_400, - contrast_800: color.gray_300, - contrast_900: color.gray_200, - contrast_950: color.gray_100, - contrast_975: color.gray_50, + contrast_25: color.gray_950, + contrast_50: color.gray_900, + contrast_100: color.gray_800, + contrast_200: color.gray_700, + contrast_300: color.gray_600, + contrast_400: color.gray_500, + contrast_500: color.gray_400, + contrast_600: color.gray_300, + contrast_700: color.gray_200, + contrast_800: color.gray_100, + contrast_900: color.gray_50, + contrast_950: color.gray_25, + contrast_975: color.gray_0, primary_25: color.primary_975, primary_50: color.primary_950, @@ -247,19 +247,19 @@ export function createThemes({ ...darkPalette, black: `hsl(${hues.primary}, 28%, ${dimScale[0]}%)`, - contrast_25: `hsl(${hues.primary}, 28%, ${dimScale[1]}%)`, - contrast_50: `hsl(${hues.primary}, 28%, ${dimScale[2]}%)`, - contrast_100: `hsl(${hues.primary}, 28%, ${dimScale[3]}%)`, - contrast_200: `hsl(${hues.primary}, 28%, ${dimScale[4]}%)`, - contrast_300: `hsl(${hues.primary}, 24%, ${dimScale[5]}%)`, - contrast_400: `hsl(${hues.primary}, 24%, ${dimScale[6]}%)`, - contrast_500: `hsl(${hues.primary}, 20%, ${dimScale[7]}%)`, - contrast_600: `hsl(${hues.primary}, 20%, ${dimScale[8]}%)`, - contrast_700: `hsl(${hues.primary}, 20%, ${dimScale[9]}%)`, - contrast_800: `hsl(${hues.primary}, 20%, ${dimScale[10]}%)`, - contrast_900: `hsl(${hues.primary}, 20%, ${dimScale[11]}%)`, - contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`, - contrast_975: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`, + contrast_25: `hsl(${hues.primary}, 28%, ${dimScale[2]}%)`, + contrast_50: `hsl(${hues.primary}, 28%, ${dimScale[3]}%)`, + contrast_100: `hsl(${hues.primary}, 28%, ${dimScale[4]}%)`, + contrast_200: `hsl(${hues.primary}, 24%, ${dimScale[5]}%)`, + contrast_300: `hsl(${hues.primary}, 24%, ${dimScale[6]}%)`, + contrast_400: `hsl(${hues.primary}, 20%, ${dimScale[7]}%)`, + contrast_500: `hsl(${hues.primary}, 20%, ${dimScale[8]}%)`, + contrast_600: `hsl(${hues.primary}, 20%, ${dimScale[9]}%)`, + contrast_700: `hsl(${hues.primary}, 20%, ${dimScale[10]}%)`, + contrast_800: `hsl(${hues.primary}, 20%, ${dimScale[11]}%)`, + contrast_900: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`, + contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`, + contrast_975: `hsl(${hues.primary}, 20%, ${dimScale[14]}%)`, primary_25: `hsl(${hues.primary}, 50%, ${dimScale[1]}%)`, primary_50: `hsl(${hues.primary}, 60%, ${dimScale[2]}%)`, diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 4fe0ab4b12..7881fc9b5e 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -202,28 +202,10 @@ export const Button = React.forwardRef( } else if (color === 'secondary') { if (variant === 'solid') { if (!disabled) { - baseStyles.push({ - backgroundColor: select(t.name, { - light: t.palette.contrast_25, - dim: t.palette.contrast_100, - dark: t.palette.contrast_100, - }), - }) - hoverStyles.push({ - backgroundColor: select(t.name, { - light: t.palette.contrast_50, - dim: t.palette.contrast_200, - dark: t.palette.contrast_200, - }), - }) + baseStyles.push(t.atoms.bg_contrast_25) + hoverStyles.push(t.atoms.bg_contrast_50) } else { - baseStyles.push({ - backgroundColor: select(t.name, { - light: t.palette.contrast_100, - dim: t.palette.contrast_25, - dark: t.palette.contrast_25, - }), - }) + baseStyles.push(t.atoms.bg_contrast_100) } } else if (variant === 'outline') { baseStyles.push(a.border, t.atoms.bg, { diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index a75fec5463..4f28dd8cec 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -162,6 +162,7 @@ export function SettingsScreen({}: Props) { const queryClient = useQueryClient() const pal = usePalette('default') const {_} = useLingui() + const t = useTheme() const setMinimalShellMode = useSetMinimalShellMode() const inAppBrowserPref = useInAppBrowser() const setUseInAppBrowser = useSetInAppBrowser() @@ -412,7 +413,7 @@ export function SettingsScreen({}: Props) { accessibilityRole="button" accessibilityLabel={_(msg`Add account`)} accessibilityHint={_(msg`Create a new Bluesky account`)}> - + - + - + - + - + @@ -527,7 +528,7 @@ export function SettingsScreen({}: Props) { accessibilityRole="button" accessibilityLabel={_(msg`Following feed preferences`)} accessibilityHint={_(msg`Opens the Following feed preferences`)}> - + - + - + @@ -592,7 +593,7 @@ export function SettingsScreen({}: Props) { accessibilityRole="button" accessibilityLabel={_(msg`Chat settings`)} accessibilityHint={_(msg`Opens chat settings`)}> - + - + - + - + - + - + () const [isActive, setIsActive] = React.useState(false) @@ -183,8 +184,7 @@ export function DesktopSearch() { return ( - +