Revert "Adjust colors"

This reverts commit fb118f3bdf.
2024-08-09 11:06:35 +09:00
parent fb118f3bdf
commit 711e443ce8
4 changed files with 64 additions and 47 deletions
@@ -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]}%)`,
@@ -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)
-            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, {
@@ -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}
@@ -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}