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,
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%)`,
},
},
}

View File

@ -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}
/>

View File

@ -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}
/>

View File

@ -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,

View File

@ -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,
},
]}

View File

@ -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
style={[a.flex_1, {height: 60, backgroundColor: tokens.color.gray_0}]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_25},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.gray_50},
]}
/>
<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 style={[a.flex_1, t.atoms.bg_contrast_25, {height: 60}]} />
<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 style={[a.flex_1, t.atoms.bg_contrast_200, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_300, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_400, {height: 60}]} />
<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 style={[a.flex_1, t.atoms.bg_contrast_800, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_900, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_950, {height: 60}]} />
<View style={[a.flex_1, t.atoms.bg_contrast_975, {height: 60}]} />
</View>
<View style={[a.flex_row, a.gap_md]}>