Revert "Adjust colors"

This reverts commit fb118f3bdf.

src/alf/themes.ts

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

src/components/Button.tsx

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

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