From 6ae9c5d45c6f12ee015fa2ed6857948825f44322 Mon Sep 17 00:00:00 2001 From: dan Date: Fri, 23 Feb 2024 23:09:50 +0000 Subject: [PATCH] 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 Co-authored-by: Paul Frazee Co-authored-by: Hailey --- src/alf/themes.ts | 77 ++++++++----- .../forms/DateField/index.android.tsx | 2 +- src/components/forms/DateField/index.tsx | 2 +- src/lib/themes.ts | 4 +- src/view/com/post-thread/PostThreadItem.tsx | 4 +- src/view/screens/Storybook/Palette.tsx | 103 +++--------------- 6 files changed, 71 insertions(+), 121 deletions(-) diff --git a/src/alf/themes.ts b/src/alf/themes.ts index 72e08e89..da96f6ef 100644 --- a/src/alf/themes.ts +++ b/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_50: tokens.color.gray_975, - contrast_100: tokens.color.gray_950, - contrast_200: tokens.color.gray_900, - contrast_300: tokens.color.gray_800, - contrast_400: tokens.color.gray_700, - contrast_500: tokens.color.gray_600, - contrast_600: tokens.color.gray_500, - contrast_700: tokens.color.gray_400, - contrast_800: tokens.color.gray_300, - contrast_900: tokens.color.gray_200, - contrast_950: tokens.color.gray_100, - contrast_975: tokens.color.gray_50, + contrast_25: `hsl(211, 28%, 8%)`, + contrast_50: `hsl(211, 28%, 11%)`, + contrast_100: `hsl(211, 28%, 16%)`, + contrast_200: `hsl(211, 28%, 24%)`, + contrast_300: `hsl(211, 24%, 31%)`, + contrast_400: `hsl(211, 24%, 38%)`, + contrast_500: `hsl(211, 20%, 44%)`, + contrast_600: `hsl(211, 20%, 55%)`, + contrast_700: `hsl(211, 20%, 63%)`, + contrast_800: `hsl(211, 20%, 71%)`, + contrast_900: `hsl(211, 20%, 79%)`, + contrast_950: `hsl(211, 20%, 87%)`, + 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_50: tokens.color.gray_950, - contrast_100: tokens.color.gray_900, - contrast_200: tokens.color.gray_800, - contrast_300: tokens.color.gray_700, - contrast_400: tokens.color.gray_600, - contrast_500: tokens.color.gray_500, - contrast_600: tokens.color.gray_400, - contrast_700: tokens.color.gray_300, - contrast_800: tokens.color.gray_200, - contrast_900: tokens.color.gray_100, - contrast_950: tokens.color.gray_50, - contrast_975: tokens.color.gray_25, + contrast_25: `hsl(211, 28%, 15%)`, + contrast_50: `hsl(211, 28%, 18%)`, + contrast_100: `hsl(211, 28%, 24%)`, + contrast_200: `hsl(211, 28%, 27%)`, + contrast_300: `hsl(211, 24%, 34%)`, + contrast_400: `hsl(211, 24%, 41%)`, + contrast_500: `hsl(211, 20%, 52%)`, + contrast_600: `hsl(211, 20%, 55%)`, + contrast_700: `hsl(211, 20%, 67%)`, + contrast_800: `hsl(211, 20%, 71%)`, + contrast_900: `hsl(211, 20%, 79%)`, + contrast_950: `hsl(211, 20%, 87%)`, + 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%)`, + }, }, } diff --git a/src/components/forms/DateField/index.android.tsx b/src/components/forms/DateField/index.android.tsx index 83fa285f..cddb643d 100644 --- a/src/components/forms/DateField/index.android.tsx +++ b/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} /> diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx index c359a9d4..e65936e0 100644 --- a/src/components/forms/DateField/index.tsx +++ b/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} /> diff --git a/src/lib/themes.ts b/src/lib/themes.ts index f75ac8ab..bd75aabe 100644 --- a/src/lib/themes.ts +++ b/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, diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 2ef1b144..ebd73983 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/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, }, ]} diff --git a/src/view/screens/Storybook/Palette.tsx b/src/view/screens/Storybook/Palette.tsx index b521fe86..90075468 100644 --- a/src/view/screens/Storybook/Palette.tsx +++ b/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 ( - - - - - - - - - - - - - - - + + + + + + + + + + + + +