diff --git a/src/alf/themes.ts b/src/alf/themes.ts index 559edefbc7..ba18ee0072 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_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, + 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, 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[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]}%)`, + 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]}%)`, 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 7881fc9b5e..4fe0ab4b12 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -202,10 +202,28 @@ export const Button = React.forwardRef( } else if (color === 'secondary') { if (variant === 'solid') { if (!disabled) { - baseStyles.push(t.atoms.bg_contrast_25) - hoverStyles.push(t.atoms.bg_contrast_50) + 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, + }), + }) } else { - baseStyles.push(t.atoms.bg_contrast_100) + baseStyles.push({ + backgroundColor: select(t.name, { + light: t.palette.contrast_100, + dim: t.palette.contrast_25, + dark: t.palette.contrast_25, + }), + }) } } 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 4f28dd8cec..a75fec5463 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -162,7 +162,6 @@ 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() @@ -413,7 +412,7 @@ export function SettingsScreen({}: Props) { accessibilityRole="button" accessibilityLabel={_(msg`Add account`)} accessibilityHint={_(msg`Create a new Bluesky account`)}> - + - + - + - + - + @@ -528,7 +527,7 @@ export function SettingsScreen({}: Props) { accessibilityRole="button" accessibilityLabel={_(msg`Following feed preferences`)} accessibilityHint={_(msg`Opens the Following feed preferences`)}> - + - + - + @@ -593,7 +592,7 @@ export function SettingsScreen({}: Props) { accessibilityRole="button" accessibilityLabel={_(msg`Chat settings`)} accessibilityHint={_(msg`Opens chat settings`)}> - + - + - + - + - + - + () const [isActive, setIsActive] = React.useState(false) @@ -184,7 +183,8 @@ export function DesktopSearch() { return ( - +