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
parent
de9df50af3
commit
6ae9c5d45c
|
@ -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%)`,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
]}
|
]}
|
||||||
|
|
|
@ -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]}>
|
||||||
|
|
Loading…
Reference in New Issue