Adjust colors

src/alf/themes.ts

@@ -186,19 +186,19 @@ export function createThemes({
     white: color.gray_0,
     black: color.trueBlack,
 
-    contrast_25: color.gray_1000,
+    contrast_25: color.gray_950,
-    contrast_50: color.gray_975,
+    contrast_50: color.gray_900,
-    contrast_100: color.gray_950,
+    contrast_100: color.gray_800,
-    contrast_200: color.gray_900,
+    contrast_200: color.gray_700,
-    contrast_300: color.gray_800,
+    contrast_300: color.gray_600,
-    contrast_400: color.gray_700,
+    contrast_400: color.gray_500,
-    contrast_500: color.gray_600,
+    contrast_500: color.gray_400,
-    contrast_600: color.gray_500,
+    contrast_600: color.gray_300,
-    contrast_700: color.gray_400,
+    contrast_700: color.gray_200,
-    contrast_800: color.gray_300,
+    contrast_800: color.gray_100,
-    contrast_900: color.gray_200,
+    contrast_900: color.gray_50,
-    contrast_950: color.gray_100,
+    contrast_950: color.gray_25,
-    contrast_975: color.gray_50,
+    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_25: `hsl(${hues.primary}, 28%, ${dimScale[2]}%)`,
-    contrast_50: `hsl(${hues.primary}, 28%, ${dimScale[2]}%)`,
+    contrast_50: `hsl(${hues.primary}, 28%, ${dimScale[3]}%)`,
-    contrast_100: `hsl(${hues.primary}, 28%, ${dimScale[3]}%)`,
+    contrast_100: `hsl(${hues.primary}, 28%, ${dimScale[4]}%)`,
-    contrast_200: `hsl(${hues.primary}, 28%, ${dimScale[4]}%)`,
+    contrast_200: `hsl(${hues.primary}, 24%, ${dimScale[5]}%)`,
-    contrast_300: `hsl(${hues.primary}, 24%, ${dimScale[5]}%)`,
+    contrast_300: `hsl(${hues.primary}, 24%, ${dimScale[6]}%)`,
-    contrast_400: `hsl(${hues.primary}, 24%, ${dimScale[6]}%)`,
+    contrast_400: `hsl(${hues.primary}, 20%, ${dimScale[7]}%)`,
-    contrast_500: `hsl(${hues.primary}, 20%, ${dimScale[7]}%)`,
+    contrast_500: `hsl(${hues.primary}, 20%, ${dimScale[8]}%)`,
-    contrast_600: `hsl(${hues.primary}, 20%, ${dimScale[8]}%)`,
+    contrast_600: `hsl(${hues.primary}, 20%, ${dimScale[9]}%)`,
-    contrast_700: `hsl(${hues.primary}, 20%, ${dimScale[9]}%)`,
+    contrast_700: `hsl(${hues.primary}, 20%, ${dimScale[10]}%)`,
-    contrast_800: `hsl(${hues.primary}, 20%, ${dimScale[10]}%)`,
+    contrast_800: `hsl(${hues.primary}, 20%, ${dimScale[11]}%)`,
-    contrast_900: `hsl(${hues.primary}, 20%, ${dimScale[11]}%)`,
+    contrast_900: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`,
-    contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`,
+    contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`,
-    contrast_975: `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]}%)`,

src/components/Button.tsx

@@ -202,28 +202,10 @@ export const Button = React.forwardRef<View, ButtonProps>(
       } else if (color === 'secondary') {
         if (variant === 'solid') {
           if (!disabled) {
-            baseStyles.push({
+            baseStyles.push(t.atoms.bg_contrast_25)
-              backgroundColor: select(t.name, {
+            hoverStyles.push(t.atoms.bg_contrast_50)
-                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({
+            baseStyles.push(t.atoms.bg_contrast_100)
-              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, {

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`)}>
-            <View style={[styles.iconContainer, pal.btn]}>
+            <View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
               <FontAwesomeIcon
                 icon="plus"
                 style={pal.text as FontAwesomeIconStyle}
@@ -442,7 +443,7 @@ export function SettingsScreen({}: Props) {
           accessibilityRole="button"
           accessibilityLabel={_(msg`Accessibility settings`)}
           accessibilityHint={_(msg`Opens accessibility settings`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
+          <View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
             <FontAwesomeIcon
               icon="universal-access"
               style={pal.text as FontAwesomeIconStyle}
@@ -463,7 +464,7 @@ export function SettingsScreen({}: Props) {
           accessibilityRole="button"
           accessibilityLabel={_(msg`Appearance settings`)}
           accessibilityHint={_(msg`Opens appearance settings`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
+          <View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
             <FontAwesomeIcon
               icon="paint-roller"
               style={pal.text as FontAwesomeIconStyle}
@@ -484,7 +485,7 @@ export function SettingsScreen({}: Props) {
           accessibilityRole="button"
           accessibilityLabel={_(msg`Language settings`)}
           accessibilityHint={_(msg`Opens configurable language settings`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
+          <View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
             <FontAwesomeIcon
               icon="language"
               style={pal.text as FontAwesomeIconStyle}
@@ -509,7 +510,7 @@ export function SettingsScreen({}: Props) {
           accessibilityRole="button"
           accessibilityLabel={_(msg`Moderation settings`)}
           accessibilityHint={_(msg`Opens moderation settings`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
+          <View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
             <HandIcon style={pal.text} size={18} strokeWidth={6} />
           </View>
           <Text type="lg" style={pal.text}>
@@ -527,7 +528,7 @@ export function SettingsScreen({}: Props) {
           accessibilityRole="button"
           accessibilityLabel={_(msg`Following feed preferences`)}
           accessibilityHint={_(msg`Opens the Following feed preferences`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
+          <View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
             <FontAwesomeIcon
               icon="sliders"
               style={pal.text as FontAwesomeIconStyle}
@@ -548,7 +549,7 @@ export function SettingsScreen({}: Props) {
           accessibilityRole="button"
           accessibilityLabel={_(msg`Thread preferences`)}
           accessibilityHint={_(msg`Opens the threads preferences`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
+          <View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
             <FontAwesomeIcon
               icon={['far', 'comments']}
               style={pal.text as FontAwesomeIconStyle}
@@ -570,7 +571,7 @@ export function SettingsScreen({}: Props) {
           accessibilityRole="button"
           accessibilityLabel={_(msg`My saved feeds`)}
           accessibilityHint={_(msg`Opens screen with all saved feeds`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
+          <View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
             <HashtagIcon style={pal.text} size={18} strokeWidth={3} />
           </View>
           <Text type="lg" style={pal.text}>
@@ -592,7 +593,7 @@ export function SettingsScreen({}: Props) {
           accessibilityRole="button"
           accessibilityLabel={_(msg`Chat settings`)}
           accessibilityHint={_(msg`Opens chat settings`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
+          <View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
             <FontAwesomeIcon
               icon={['far', 'comment-dots']}
               style={pal.text as FontAwesomeIconStyle}
@@ -624,7 +625,7 @@ export function SettingsScreen({}: Props) {
           accessibilityRole="button"
           accessibilityLabel={_(msg`External media settings`)}
           accessibilityHint={_(msg`Opens external embeds settings`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
+          <View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
             <FontAwesomeIcon
               icon={['far', 'circle-play']}
               style={pal.text as FontAwesomeIconStyle}
@@ -651,7 +652,7 @@ export function SettingsScreen({}: Props) {
           accessibilityRole="button"
           accessibilityLabel={_(msg`App password settings`)}
           accessibilityHint={_(msg`Opens the app password settings`)}>
-          <View style={[styles.iconContainer, pal.btn]}>
+          <View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
             <FontAwesomeIcon
               icon="lock"
               style={pal.text as FontAwesomeIconStyle}
@@ -674,7 +675,7 @@ export function SettingsScreen({}: Props) {
           accessibilityHint={_(
             msg`Opens modal for choosing a new Bluesky handle`,
           )}>
-          <View style={[styles.iconContainer, pal.btn]}>
+          <View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
             <FontAwesomeIcon
               icon="at"
               style={pal.text as FontAwesomeIconStyle}
@@ -719,7 +720,7 @@ export function SettingsScreen({}: Props) {
           accessibilityHint={_(
             msg`Opens modal for changing your Bluesky password`,
           )}>
-          <View style={[styles.iconContainer, pal.btn]}>
+          <View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
             <FontAwesomeIcon
               icon="lock"
               style={pal.text as FontAwesomeIconStyle}
@@ -742,7 +743,7 @@ export function SettingsScreen({}: Props) {
           accessibilityHint={_(
             msg`Opens modal for downloading your Bluesky account data (repository)`,
           )}>
-          <View style={[styles.iconContainer, pal.btn]}>
+          <View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
             <FontAwesomeIcon
               icon="download"
               style={pal.text as FontAwesomeIconStyle}

src/view/shell/desktop/Search.tsx

@@ -30,7 +30,7 @@ import {precacheProfile} from 'state/queries/profile'
 import {Link} from '#/view/com/util/Link'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {Text} from 'view/com/util/text/Text'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 
 let SearchLinkCard = ({
   label,
@@ -149,6 +149,7 @@ export {SearchProfileCard}
 
 export function DesktopSearch() {
   const {_} = useLingui()
+  const t = useTheme()
   const pal = usePalette('default')
   const navigation = useNavigation<NavigationProp>()
   const [isActive, setIsActive] = React.useState<boolean>(false)
@@ -183,8 +184,7 @@ export function DesktopSearch() {
 
   return (
     <View style={[styles.container, pal.view]}>
-      <View
+      <View style={[t.atoms.bg_contrast_25, styles.search]}>
-        style={[{backgroundColor: pal.colors.backgroundLight}, styles.search]}>
         <View style={[styles.inputContainer]}>
           <MagnifyingGlassIcon2
             size={18}