Use new palette values for main palette (#2566)

* Use new palette values for main palette

* Drawer bg in dark mode

bskyweb/templates/base.html

@@ -62,26 +62,26 @@
     :root {
       --text: black;
       --background: white;
-      --backgroundLight: #F3F3F8;
+      --backgroundLight: hsl(211, 20%, 95%);
     }
     html.colorMode--dark {
       --text: white;
-      --background: black;
+      --background: hsl(211, 20%, 4%);
-      --backgroundLight: #26272D;
+      --backgroundLight: hsl(211, 20%, 20%);
       color-scheme: dark;
     }
     @media (prefers-color-scheme: light) {
       html.colorMode--system {
         --text: black;
         --background: white;
-        --backgroundLight: #F3F3F8;
+        --backgroundLight: hsl(211, 20%, 95%);
       }
     }
     @media (prefers-color-scheme: dark) {
       html.colorMode--system {
         --text: white;
-        --background: black;
+        --background: hsl(211, 20%, 4%);
-        --backgroundLight: #26272D;
+        --backgroundLight: hsl(211, 20%, 20%);
         color-scheme: dark;
       }
     }

src/alf/themes.ts

@@ -171,7 +171,7 @@ export const light = {
       backgroundColor: lightPalette.contrast_300,
     },
     border: {
-      borderColor: lightPalette.contrast_200,
+      borderColor: lightPalette.contrast_100,
     },
     border_contrast: {
       borderColor: lightPalette.contrast_400,
@@ -278,7 +278,7 @@ export const dark: Theme = {
       color: darkPalette.black,
     },
     bg: {
-      backgroundColor: darkPalette.contrast_25,
+      backgroundColor: darkPalette.black,
     },
     bg_contrast_25: {
       backgroundColor: darkPalette.contrast_50,

src/lib/themes.ts

@@ -2,30 +2,32 @@ import {Platform} from 'react-native'
 import type {Theme} from './ThemeContext'
 import {colors} from './styles'
 
+import {darkPalette, lightPalette} from '#/alf/themes'
+
 export const defaultTheme: Theme = {
   colorScheme: 'light',
   palette: {
     default: {
-      background: colors.white,
+      background: lightPalette.white,
-      backgroundLight: colors.gray1,
+      backgroundLight: lightPalette.contrast_50,
-      text: colors.black,
+      text: lightPalette.black,
-      textLight: colors.gray5,
+      textLight: lightPalette.contrast_700,
-      textInverted: colors.white,
+      textInverted: lightPalette.white,
-      link: colors.blue3,
+      link: lightPalette.primary_500,
-      border: '#f0e9e9',
+      border: lightPalette.contrast_100,
-      borderDark: '#e0d9d9',
+      borderDark: lightPalette.contrast_200,
-      icon: colors.gray4,
+      icon: lightPalette.contrast_500,
 
       // non-standard
-      textVeryLight: colors.gray4,
+      textVeryLight: lightPalette.contrast_400,
-      replyLine: colors.gray2,
+      replyLine: lightPalette.contrast_100,
-      replyLineDot: colors.gray3,
+      replyLineDot: lightPalette.contrast_200,
-      unreadNotifBg: '#ebf6ff',
+      unreadNotifBg: lightPalette.primary_25,
-      unreadNotifBorder: colors.blue1,
+      unreadNotifBorder: lightPalette.primary_100,
-      postCtrl: '#71768A',
+      postCtrl: lightPalette.contrast_500,
-      brandText: '#0066FF',
+      brandText: lightPalette.primary_500,
-      emptyStateIcon: '#B6B6C9',
+      emptyStateIcon: lightPalette.contrast_300,
-      borderLinkHover: '#cac1c1',
+      borderLinkHover: lightPalette.contrast_300,
     },
     primary: {
       background: colors.blue3,
@@ -50,15 +52,15 @@ export const defaultTheme: Theme = {
       icon: colors.green4,
     },
     inverted: {
-      background: colors.black,
+      background: darkPalette.black,
-      backgroundLight: colors.gray6,
+      backgroundLight: darkPalette.contrast_50,
-      text: colors.white,
+      text: darkPalette.white,
-      textLight: colors.gray3,
+      textLight: darkPalette.contrast_700,
-      textInverted: colors.black,
+      textInverted: darkPalette.black,
-      link: colors.blue2,
+      link: darkPalette.primary_500,
-      border: colors.gray3,
+      border: darkPalette.contrast_100,
-      borderDark: colors.gray2,
+      borderDark: darkPalette.contrast_200,
-      icon: colors.gray5,
+      icon: darkPalette.contrast_500,
     },
     error: {
       background: colors.red3,
@@ -292,26 +294,26 @@ export const darkTheme: Theme = {
   palette: {
     ...defaultTheme.palette,
     default: {
-      background: colors.black,
+      background: darkPalette.black,
-      backgroundLight: colors.gray7,
+      backgroundLight: darkPalette.contrast_50,
-      text: colors.white,
+      text: darkPalette.white,
-      textLight: colors.gray3,
+      textLight: darkPalette.contrast_700,
-      textInverted: colors.black,
+      textInverted: darkPalette.black,
-      link: colors.blue3,
+      link: darkPalette.primary_500,
-      border: colors.gray7,
+      border: darkPalette.contrast_100,
-      borderDark: colors.gray6,
+      borderDark: darkPalette.contrast_200,
-      icon: colors.gray4,
+      icon: darkPalette.contrast_500,
 
       // non-standard
-      textVeryLight: colors.gray4,
+      textVeryLight: darkPalette.contrast_400,
-      replyLine: colors.gray5,
+      replyLine: darkPalette.contrast_100,
-      replyLineDot: colors.gray6,
+      replyLineDot: darkPalette.contrast_200,
-      unreadNotifBg: colors.blue7,
+      unreadNotifBg: darkPalette.primary_975,
-      unreadNotifBorder: colors.blue6,
+      unreadNotifBorder: darkPalette.primary_900,
-      postCtrl: '#707489',
+      postCtrl: darkPalette.contrast_500,
-      brandText: '#0085ff',
+      brandText: darkPalette.primary_500,
-      emptyStateIcon: colors.gray4,
+      emptyStateIcon: darkPalette.contrast_300,
-      borderLinkHover: colors.gray5,
+      borderLinkHover: darkPalette.contrast_300,
     },
     primary: {
       ...defaultTheme.palette.primary,
@@ -322,15 +324,15 @@ export const darkTheme: Theme = {
       textInverted: colors.green2,
     },
     inverted: {
-      background: colors.white,
+      background: lightPalette.white,
-      backgroundLight: colors.gray2,
+      backgroundLight: lightPalette.contrast_50,
-      text: colors.black,
+      text: lightPalette.black,
-      textLight: colors.gray5,
+      textLight: lightPalette.contrast_700,
-      textInverted: colors.white,
+      textInverted: lightPalette.white,
-      link: colors.blue3,
+      link: lightPalette.primary_500,
-      border: colors.gray3,
+      border: lightPalette.contrast_100,
-      borderDark: colors.gray4,
+      borderDark: lightPalette.contrast_200,
-      icon: colors.gray1,
+      icon: lightPalette.contrast_500,
     },
   },
 }

src/view/shell/Drawer.tsx

@@ -53,6 +53,8 @@ import {useInviteCodesQuery} from '#/state/queries/invites'
 import {NavSignupCard} from '#/view/shell/NavSignupCard'
 import {TextLink} from '../com/util/Link'
 
+import {useTheme as useAlfTheme} from '#/alf'
+
 let DrawerProfileCard = ({
   account,
   onPressProfile,
@@ -106,6 +108,7 @@ export {DrawerProfileCard}
 
 let DrawerContent = ({}: {}): React.ReactNode => {
   const theme = useTheme()
+  const t = useAlfTheme()
   const pal = usePalette('default')
   const {_} = useLingui()
   const setDrawerOpen = useSetDrawerOpen()
@@ -208,7 +211,7 @@ let DrawerContent = ({}: {}): React.ReactNode => {
       testID="drawer"
       style={[
         styles.view,
-        theme.colorScheme === 'light' ? pal.view : styles.viewDarkMode,
+        theme.colorScheme === 'light' ? pal.view : t.atoms.bg_contrast_25,
       ]}>
       <SafeAreaView style={s.flex1}>
         <ScrollView style={styles.main}>

web/index.html

@@ -66,26 +66,26 @@
       :root {
         --text: black;
         --background: white;
-        --backgroundLight: #F3F3F8;
+        --backgroundLight: hsl(211, 20%, 95%);
       }
       html.colorMode--dark {
         --text: white;
-        --background: black;
+        --background: hsl(211, 20%, 4%);
-        --backgroundLight: #26272D;
+        --backgroundLight: hsl(211, 20%, 10%);
         color-scheme: dark;
       }
       @media (prefers-color-scheme: light) {
         html.colorMode--system {
           --text: black;
           --background: white;
-          --backgroundLight: #F3F3F8;
+          --backgroundLight: hsl(211, 20%, 95%);
         }
       }
       @media (prefers-color-scheme: dark) {
         html.colorMode--system {
           --text: white;
-          --background: black;
+          --background: hsl(211, 20%, 4%);
-          --backgroundLight: #26272D;
+          --backgroundLight: hsl(211, 20%, 10%);
           color-scheme: dark;
         }
       }