Make dim theme dim (#2966)

* Make dim color scheme dim

* Tweaks

* Overall tweaks

* We have to go darker

* Tweak saturation of blues in dim

* Increase contrast on dark-dark mode

* adjust dim

---------

Co-authored-by: Eric Bailey <git@esb.lol>
Co-authored-by: Paul Frazee <pfrazee@gmail.com>
Co-authored-by: Hailey <me@haileyok.com>

src/alf/themes.ts

@@ -73,19 +73,19 @@ export const darkPalette: Palette = {
   white: tokens.color.gray_0,
   black: tokens.color.trueBlack,
 
-  contrast_25: tokens.color.gray_1000,
+  contrast_25: `hsl(211, 28%, 8%)`,
-  contrast_50: tokens.color.gray_975,
+  contrast_50: `hsl(211, 28%, 11%)`,
-  contrast_100: tokens.color.gray_950,
+  contrast_100: `hsl(211, 28%, 16%)`,
-  contrast_200: tokens.color.gray_900,
+  contrast_200: `hsl(211, 28%, 24%)`,
-  contrast_300: tokens.color.gray_800,
+  contrast_300: `hsl(211, 24%, 31%)`,
-  contrast_400: tokens.color.gray_700,
+  contrast_400: `hsl(211, 24%, 38%)`,
-  contrast_500: tokens.color.gray_600,
+  contrast_500: `hsl(211, 20%, 44%)`,
-  contrast_600: tokens.color.gray_500,
+  contrast_600: `hsl(211, 20%, 55%)`,
-  contrast_700: tokens.color.gray_400,
+  contrast_700: `hsl(211, 20%, 63%)`,
-  contrast_800: tokens.color.gray_300,
+  contrast_800: `hsl(211, 20%, 71%)`,
-  contrast_900: tokens.color.gray_200,
+  contrast_900: `hsl(211, 20%, 79%)`,
-  contrast_950: tokens.color.gray_100,
+  contrast_950: `hsl(211, 20%, 87%)`,
-  contrast_975: tokens.color.gray_50,
+  contrast_975: `hsl(211, 20%, 95%)`,
 
   primary_25: tokens.color.blue_25,
   primary_50: tokens.color.blue_50,
@@ -132,21 +132,28 @@ export const darkPalette: Palette = {
 
 export const dimPalette: Palette = {
   ...darkPalette,
-  black: tokens.color.gray_1000,
+  black: `hsl(211, 28%, 12%)`,
 
-  contrast_25: tokens.color.gray_975,
+  contrast_25: `hsl(211, 28%, 15%)`,
-  contrast_50: tokens.color.gray_950,
+  contrast_50: `hsl(211, 28%, 18%)`,
-  contrast_100: tokens.color.gray_900,
+  contrast_100: `hsl(211, 28%, 24%)`,
-  contrast_200: tokens.color.gray_800,
+  contrast_200: `hsl(211, 28%, 27%)`,
-  contrast_300: tokens.color.gray_700,
+  contrast_300: `hsl(211, 24%, 34%)`,
-  contrast_400: tokens.color.gray_600,
+  contrast_400: `hsl(211, 24%, 41%)`,
-  contrast_500: tokens.color.gray_500,
+  contrast_500: `hsl(211, 20%, 52%)`,
-  contrast_600: tokens.color.gray_400,
+  contrast_600: `hsl(211, 20%, 55%)`,
-  contrast_700: tokens.color.gray_300,
+  contrast_700: `hsl(211, 20%, 67%)`,
-  contrast_800: tokens.color.gray_200,
+  contrast_800: `hsl(211, 20%, 71%)`,
-  contrast_900: tokens.color.gray_100,
+  contrast_900: `hsl(211, 20%, 79%)`,
-  contrast_950: tokens.color.gray_50,
+  contrast_950: `hsl(211, 20%, 87%)`,
-  contrast_975: tokens.color.gray_25,
+  contrast_975: `hsl(211, 20%, 95%)`,
+
+  primary_600: `hsl(211, 95%, 39%)`,
+  primary_700: `hsl(211, 90%, 30%)`,
+  primary_800: `hsl(211, 90%, 23%)`,
+  primary_900: `hsl(211, 80%, 16%)`,
+  primary_950: `hsl(211, 80%, 13%)`,
+  primary_975: `hsl(211, 80%, 10%)`,
 } as const
 
 export const light = {
@@ -325,6 +332,7 @@ export const dark: Theme = {
 export const dim: Theme = {
   ...dark,
   name: 'dim',
+  palette: dimPalette,
   atoms: {
     ...dark.atoms,
     text: {
@@ -393,5 +401,20 @@ export const dim: Theme = {
     border_contrast_high: {
       borderColor: dimPalette.contrast_300,
     },
+    shadow_sm: {
+      ...atoms.shadow_sm,
+      shadowOpacity: 0.7,
+      shadowColor: `hsl(211, 28%, 3%)`,
+    },
+    shadow_md: {
+      ...atoms.shadow_md,
+      shadowOpacity: 0.7,
+      shadowColor: `hsl(211, 28%, 3%)`,
+    },
+    shadow_lg: {
+      ...atoms.shadow_lg,
+      shadowOpacity: 0.7,
+      shadowColor: `hsl(211, 28%, 3%)`,
+    },
   },
 }

src/components/forms/DateField/index.android.tsx

@@ -98,7 +98,7 @@ export function DateField({
           timeZoneName={'Etc/UTC'}
           display="spinner"
           // @ts-ignore applies in iOS only -prf
-          themeVariant={t.name === 'dark' ? 'dark' : 'light'}
+          themeVariant={t.name === 'light' ? 'light' : 'dark'}
           value={new Date(value)}
           onChange={onChangeInternal}
         />

src/components/forms/DateField/index.tsx

@@ -47,7 +47,7 @@ export function DateField({
         mode="date"
         timeZoneName={'Etc/UTC'}
         display="spinner"
-        themeVariant={t.name === 'dark' ? 'dark' : 'light'}
+        themeVariant={t.name === 'light' ? 'light' : 'dark'}
         value={new Date(value)}
         onChange={onChangeInternal}
       />

src/lib/themes.ts

@@ -306,7 +306,7 @@ export const darkTheme: Theme = {
 
       // non-standard
       textVeryLight: darkPalette.contrast_400,
-      replyLine: darkPalette.contrast_100,
+      replyLine: darkPalette.contrast_200,
       replyLineDot: darkPalette.contrast_200,
       unreadNotifBg: darkPalette.primary_975,
       unreadNotifBorder: darkPalette.primary_900,
@@ -355,7 +355,7 @@ export const dimTheme: Theme = {
 
       // non-standard
       textVeryLight: dimPalette.contrast_400,
-      replyLine: dimPalette.contrast_100,
+      replyLine: dimPalette.contrast_200,
       replyLineDot: dimPalette.contrast_200,
       unreadNotifBg: dimPalette.primary_975,
       unreadNotifBorder: dimPalette.primary_900,

src/view/com/post-thread/PostThreadItem.tsx

@@ -449,7 +449,7 @@ let PostThreadItemLoaded = ({
                       styles.replyLine,
                       {
                         flexGrow: 1,
-                        backgroundColor: pal.colors.border,
+                        backgroundColor: pal.colors.replyLine,
                         marginBottom: 4,
                       },
                     ]}
@@ -487,7 +487,7 @@ let PostThreadItemLoaded = ({
                         styles.replyLine,
                         {
                           flexGrow: 1,
-                          backgroundColor: pal.colors.border,
+                          backgroundColor: pal.colors.replyLine,
                           marginTop: 4,
                         },
                       ]}

src/view/screens/Storybook/Palette.tsx

@@ -2,99 +2,26 @@ import React from 'react'
 import {View} from 'react-native'
 
 import * as tokens from '#/alf/tokens'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 
 export function Palette() {
+  const t = useTheme()
   return (
     <View style={[a.gap_md]}>
       <View style={[a.flex_row, a.gap_md]}>
-        <View
+        <View style={[a.flex_1, t.atoms.bg_contrast_25, {height: 60}]} />
-          style={[a.flex_1, {height: 60, backgroundColor: tokens.color.gray_0}]}
+        <View style={[a.flex_1, t.atoms.bg_contrast_50, {height: 60}]} />
-        />
+        <View style={[a.flex_1, t.atoms.bg_contrast_100, {height: 60}]} />
-        <View
+        <View style={[a.flex_1, t.atoms.bg_contrast_200, {height: 60}]} />
-          style={[
+        <View style={[a.flex_1, t.atoms.bg_contrast_300, {height: 60}]} />
-            a.flex_1,
+        <View style={[a.flex_1, t.atoms.bg_contrast_400, {height: 60}]} />
-            {height: 60, backgroundColor: tokens.color.gray_25},
+        <View style={[a.flex_1, t.atoms.bg_contrast_500, {height: 60}]} />
-          ]}
+        <View style={[a.flex_1, t.atoms.bg_contrast_600, {height: 60}]} />
-        />
+        <View style={[a.flex_1, t.atoms.bg_contrast_700, {height: 60}]} />
-        <View
+        <View style={[a.flex_1, t.atoms.bg_contrast_800, {height: 60}]} />
-          style={[
+        <View style={[a.flex_1, t.atoms.bg_contrast_900, {height: 60}]} />
-            a.flex_1,
+        <View style={[a.flex_1, t.atoms.bg_contrast_950, {height: 60}]} />
-            {height: 60, backgroundColor: tokens.color.gray_50},
+        <View style={[a.flex_1, t.atoms.bg_contrast_975, {height: 60}]} />
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_100},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_200},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_300},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_400},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_500},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_600},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_700},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_800},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_900},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_950},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_975},
-          ]}
-        />
-        <View
-          style={[
-            a.flex_1,
-            {height: 60, backgroundColor: tokens.color.gray_1000},
-          ]}
-        />
       </View>
 
       <View style={[a.flex_row, a.gap_md]}>