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>
zio/stable
dan 2024-02-23 23:09:50 +00:00 committed by GitHub
parent de9df50af3
commit 6ae9c5d45c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 71 additions and 121 deletions

View File

@ -73,19 +73,19 @@ export const darkPalette: Palette = {
white: tokens.color.gray_0, white: tokens.color.gray_0,
black: tokens.color.trueBlack, 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_25: tokens.color.blue_25,
primary_50: tokens.color.blue_50, primary_50: tokens.color.blue_50,
@ -132,21 +132,28 @@ export const darkPalette: Palette = {
export const dimPalette: Palette = { export const dimPalette: Palette = {
...darkPalette, ...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 } as const
export const light = { export const light = {
@ -325,6 +332,7 @@ export const dark: Theme = {
export const dim: Theme = { export const dim: Theme = {
...dark, ...dark,
name: 'dim', name: 'dim',
palette: dimPalette,
atoms: { atoms: {
...dark.atoms, ...dark.atoms,
text: { text: {
@ -393,5 +401,20 @@ export const dim: Theme = {
border_contrast_high: { border_contrast_high: {
borderColor: dimPalette.contrast_300, 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%)`,
},
}, },
} }

View File

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

View File

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

View File

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

View File

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

View File

@ -2,99 +2,26 @@ import React from 'react'
import {View} from 'react-native' import {View} from 'react-native'
import * as tokens from '#/alf/tokens' import * as tokens from '#/alf/tokens'
import {atoms as a} from '#/alf' import {atoms as a, useTheme} from '#/alf'
export function Palette() { export function Palette() {
const t = useTheme()
return ( return (
<View style={[a.gap_md]}> <View style={[a.gap_md]}>
<View style={[a.flex_row, 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>
<View style={[a.flex_row, a.gap_md]}> <View style={[a.flex_row, a.gap_md]}>