diff options
| -rw-r--r-- | src/alf/themes.ts | 77 | ||||
| -rw-r--r-- | src/components/forms/DateField/index.android.tsx | 2 | ||||
| -rw-r--r-- | src/components/forms/DateField/index.tsx | 2 | ||||
| -rw-r--r-- | src/lib/themes.ts | 4 | ||||
| -rw-r--r-- | src/view/com/post-thread/PostThreadItem.tsx | 4 | ||||
| -rw-r--r-- | 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 72e08e894..da96f6eff 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 83fa285f5..cddb643d6 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 c359a9d46..e65936e0e 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 f75ac8ab4..bd75aabea 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 2ef1b1447..ebd739839 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 b521fe860..900754681 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 ( <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]}> |