zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Theme tweaks (#3004) 

* Improve contrast using existing scale

* Make it mathy

* Tweaks

* Adjust noty

* Remove console

* Cleanup

* Match saturation

* Replace usages of tokens with correct palette

(cherry picked from commit 1d9c7079dc25dfa492bd482c1c7661ea2e822d68)

* Replace other colors, tweak usages

(cherry picked from commit df97f249b2f140bbc010449fddb011a31795919a)

* Last couple things

(cherry picked from commit 3b5cee131f68ea8f4125f2c32b9a4b20f5b91086)

* fix "Users" being the wrong color on user list about

---------

Co-authored-by: Hailey <me@haileyok.com>
zio/stable
Eric Bailey 2024-03-01 18:06:59 -06:00 committed by GitHub
parent 411061ea32
commit 2962862de2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 199 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/alf/themes.ts
View File

@ -1,6 +1,7 @@
import * as tokens from '#/alf/tokens' import * as tokens from '#/alf/tokens'
import type {Mutable} from '#/alf/types' import type {Mutable} from '#/alf/types'
import {atoms} from '#/alf/atoms' import {atoms} from '#/alf/atoms'
import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
export type ThemeName = 'light' | 'dim' | 'dark' export type ThemeName = 'light' | 'dim' | 'dark'
export type ReadonlyTheme = typeof light export type ReadonlyTheme = typeof light
@ -73,19 +74,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: `hsl(211, 28%, 8%)`, contrast_25: tokens.color.gray_1000,
contrast_50: `hsl(211, 28%, 11%)`, contrast_50: tokens.color.gray_975,
contrast_100: `hsl(211, 28%, 16%)`, contrast_100: tokens.color.gray_950,
contrast_200: `hsl(211, 28%, 24%)`, contrast_200: tokens.color.gray_900,
contrast_300: `hsl(211, 24%, 31%)`, contrast_300: tokens.color.gray_800,
contrast_400: `hsl(211, 24%, 38%)`, contrast_400: tokens.color.gray_700,
contrast_500: `hsl(211, 20%, 44%)`, contrast_500: tokens.color.gray_600,
contrast_600: `hsl(211, 20%, 55%)`, contrast_600: tokens.color.gray_500,
contrast_700: `hsl(211, 20%, 63%)`, contrast_700: tokens.color.gray_400,
contrast_800: `hsl(211, 20%, 71%)`, contrast_800: tokens.color.gray_300,
contrast_900: `hsl(211, 20%, 79%)`, contrast_900: tokens.color.gray_200,
contrast_950: `hsl(211, 20%, 87%)`, contrast_950: tokens.color.gray_100,
contrast_975: `hsl(211, 20%, 95%)`, contrast_975: tokens.color.gray_50,
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,28 +133,63 @@ export const darkPalette: Palette = {
export const dimPalette: Palette = { export const dimPalette: Palette = {
...darkPalette, ...darkPalette,
black: `hsl(211, 28%, 12%)`, black: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[0]}%)`,
contrast_25: `hsl(211, 28%, 15%)`, contrast_25: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[1]}%)`,
contrast_50: `hsl(211, 28%, 18%)`, contrast_50: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[2]}%)`,
contrast_100: `hsl(211, 28%, 24%)`, contrast_100: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[3]}%)`,
contrast_200: `hsl(211, 28%, 27%)`, contrast_200: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[4]}%)`,
contrast_300: `hsl(211, 24%, 34%)`, contrast_300: `hsl(${BLUE_HUE}, 24%, ${tokens.dimScale[5]}%)`,
contrast_400: `hsl(211, 24%, 41%)`, contrast_400: `hsl(${BLUE_HUE}, 24%, ${tokens.dimScale[6]}%)`,
contrast_500: `hsl(211, 20%, 52%)`, contrast_500: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[7]}%)`,
contrast_600: `hsl(211, 20%, 55%)`, contrast_600: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[8]}%)`,
contrast_700: `hsl(211, 20%, 67%)`, contrast_700: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[9]}%)`,
contrast_800: `hsl(211, 20%, 71%)`, contrast_800: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[10]}%)`,
contrast_900: `hsl(211, 20%, 79%)`, contrast_900: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[11]}%)`,
contrast_950: `hsl(211, 20%, 87%)`, contrast_950: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[12]}%)`,
contrast_975: `hsl(211, 20%, 95%)`, contrast_975: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[13]}%)`,
primary_600: `hsl(211, 95%, 39%)`, primary_25: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[13]}%)`,
primary_700: `hsl(211, 90%, 30%)`, primary_50: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[12]}%)`,
primary_800: `hsl(211, 90%, 23%)`, primary_100: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[11]}%)`,
primary_900: `hsl(211, 80%, 16%)`, primary_200: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[10]}%)`,
primary_950: `hsl(211, 80%, 13%)`, primary_300: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[9]}%)`,
primary_975: `hsl(211, 80%, 10%)`, primary_400: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[8]}%)`,
primary_500: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[7]}%)`,
primary_600: `hsl(${BLUE_HUE}, 95%, ${tokens.dimScale[6]}%)`,
primary_700: `hsl(${BLUE_HUE}, 90%, ${tokens.dimScale[5]}%)`,
primary_800: `hsl(${BLUE_HUE}, 82%, ${tokens.dimScale[4]}%)`,
primary_900: `hsl(${BLUE_HUE}, 70%, ${tokens.dimScale[3]}%)`,
primary_950: `hsl(${BLUE_HUE}, 60%, ${tokens.dimScale[2]}%)`,
primary_975: `hsl(${BLUE_HUE}, 50%, ${tokens.dimScale[1]}%)`,
positive_25: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[13]}%)`,
positive_50: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[12]}%)`,
positive_100: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[11]}%)`,
positive_200: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[10]}%)`,
positive_300: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[9]}%)`,
positive_400: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[8]}%)`,
positive_500: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[7]}%)`,
positive_600: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[6]}%)`,
positive_700: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[5]}%)`,
positive_800: `hsl(${GREEN_HUE}, 82%, ${tokens.dimScale[4]}%)`,
positive_900: `hsl(${GREEN_HUE}, 70%, ${tokens.dimScale[3]}%)`,
positive_950: `hsl(${GREEN_HUE}, 60%, ${tokens.dimScale[2]}%)`,
positive_975: `hsl(${GREEN_HUE}, 50%, ${tokens.dimScale[1]}%)`,
negative_25: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[13]}%)`,
negative_50: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[12]}%)`,
negative_100: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[11]}%)`,
negative_200: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[10]}%)`,
negative_300: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[9]}%)`,
negative_400: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[8]}%)`,
negative_500: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[7]}%)`,
negative_600: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[6]}%)`,
negative_700: `hsl(${RED_HUE}, 91%, ${tokens.dimScale[5]}%)`,
negative_800: `hsl(${RED_HUE}, 88%, ${tokens.dimScale[4]}%)`,
negative_900: `hsl(${RED_HUE}, 84%, ${tokens.dimScale[3]}%)`,
negative_950: `hsl(${RED_HUE}, 80%, ${tokens.dimScale[2]}%)`,
negative_975: `hsl(${RED_HUE}, 70%, ${tokens.dimScale[1]}%)`,
} as const } as const
export const light = { export const light = {
@ -404,17 +440,17 @@ export const dim: Theme = {
shadow_sm: { shadow_sm: {
...atoms.shadow_sm, ...atoms.shadow_sm,
shadowOpacity: 0.7, shadowOpacity: 0.7,
shadowColor: `hsl(211, 28%, 3%)`, shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
}, },
shadow_md: { shadow_md: {
...atoms.shadow_md, ...atoms.shadow_md,
shadowOpacity: 0.7, shadowOpacity: 0.7,
shadowColor: `hsl(211, 28%, 3%)`, shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
}, },
shadow_lg: { shadow_lg: {
...atoms.shadow_lg, ...atoms.shadow_lg,
shadowOpacity: 0.7, shadowOpacity: 0.7,
shadowColor: `hsl(211, 28%, 3%)`, shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`,
}, },
}, },
} }

43
src/alf/tokens.ts
View File

@ -1,25 +1,32 @@
const BLUE_HUE = 211 import {
const RED_HUE = 346 BLUE_HUE,
const GREEN_HUE = 152 RED_HUE,
GREEN_HUE,
generateScale,
} from '#/alf/util/colorGeneration'
export const scale = generateScale(6, 100)
// dim shifted 6% lighter
export const dimScale = generateScale(12, 100)
export const color = { export const color = {
trueBlack: '#000000', trueBlack: '#000000',
gray_0: `hsl(${BLUE_HUE}, 20%, 100%)`, gray_0: `hsl(${BLUE_HUE}, 20%, ${scale[14]}%)`,
gray_25: `hsl(${BLUE_HUE}, 20%, 97%)`, gray_25: `hsl(${BLUE_HUE}, 20%, ${scale[13]}%)`,
gray_50: `hsl(${BLUE_HUE}, 20%, 95%)`, gray_50: `hsl(${BLUE_HUE}, 20%, ${scale[12]}%)`,
gray_100: `hsl(${BLUE_HUE}, 20%, 90%)`, gray_100: `hsl(${BLUE_HUE}, 20%, ${scale[11]}%)`,
gray_200: `hsl(${BLUE_HUE}, 20%, 80%)`, gray_200: `hsl(${BLUE_HUE}, 20%, ${scale[10]}%)`,
gray_300: `hsl(${BLUE_HUE}, 20%, 70%)`, gray_300: `hsl(${BLUE_HUE}, 20%, ${scale[9]}%)`,
gray_400: `hsl(${BLUE_HUE}, 20%, 60%)`, gray_400: `hsl(${BLUE_HUE}, 20%, ${scale[8]}%)`,
gray_500: `hsl(${BLUE_HUE}, 20%, 50%)`, gray_500: `hsl(${BLUE_HUE}, 20%, ${scale[7]}%)`,
gray_600: `hsl(${BLUE_HUE}, 24%, 42%)`, gray_600: `hsl(${BLUE_HUE}, 24%, ${scale[6]}%)`,
gray_700: `hsl(${BLUE_HUE}, 24%, 34%)`, gray_700: `hsl(${BLUE_HUE}, 24%, ${scale[5]}%)`,
gray_800: `hsl(${BLUE_HUE}, 28%, 26%)`, gray_800: `hsl(${BLUE_HUE}, 28%, ${scale[4]}%)`,
gray_900: `hsl(${BLUE_HUE}, 28%, 18%)`, gray_900: `hsl(${BLUE_HUE}, 28%, ${scale[3]}%)`,
gray_950: `hsl(${BLUE_HUE}, 28%, 10%)`, gray_950: `hsl(${BLUE_HUE}, 28%, ${scale[2]}%)`,
gray_975: `hsl(${BLUE_HUE}, 28%, 7%)`, gray_975: `hsl(${BLUE_HUE}, 28%, ${scale[1]}%)`,
gray_1000: `hsl(${BLUE_HUE}, 28%, 4%)`, gray_1000: `hsl(${BLUE_HUE}, 28%, ${scale[0]}%)`,
blue_25: `hsl(${BLUE_HUE}, 99%, 97%)`, blue_25: `hsl(${BLUE_HUE}, 99%, 97%)`,
blue_50: `hsl(${BLUE_HUE}, 99%, 95%)`, blue_50: `hsl(${BLUE_HUE}, 99%, 95%)`,

17
src/alf/util/colorGeneration.ts 100644
View File

@ -0,0 +1,17 @@
export const BLUE_HUE = 211
export const RED_HUE = 346
export const GREEN_HUE = 152
/**
* Smooth progression of lightness "stops" for generating HSL colors.
*/
export const COLOR_STOPS = [
0, 0.05, 0.1, 0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.85, 0.9, 0.95, 1,
]
export function generateScale(start: number, end: number) {
const range = end - start
return COLOR_STOPS.map(stop => {
return start + range * stop
})
}

48
src/components/Button.tsx
View File

@ -165,7 +165,7 @@ export function Button({
if (!disabled) { if (!disabled) {
baseStyles.push(a.border, { baseStyles.push(a.border, {
borderColor: tokens.color.blue_500, borderColor: t.palette.primary_500,
}) })
hoverStyles.push(a.border, { hoverStyles.push(a.border, {
backgroundColor: light backgroundColor: light
@ -174,7 +174,7 @@ export function Button({
}) })
} else { } else {
baseStyles.push(a.border, { baseStyles.push(a.border, {
borderColor: light ? tokens.color.blue_200 : tokens.color.blue_900, borderColor: light ? t.palette.primary_200 : t.palette.primary_900,
}) })
} }
} else if (variant === 'ghost') { } else if (variant === 'ghost') {
@ -191,20 +191,14 @@ export function Button({
if (variant === 'solid') { if (variant === 'solid') {
if (!disabled) { if (!disabled) {
baseStyles.push({ baseStyles.push({
backgroundColor: light backgroundColor: t.palette.contrast_50,
? tokens.color.gray_50
: tokens.color.gray_900,
}) })
hoverStyles.push({ hoverStyles.push({
backgroundColor: light backgroundColor: t.palette.contrast_100,
? tokens.color.gray_100
: tokens.color.gray_950,
}) })
} else { } else {
baseStyles.push({ baseStyles.push({
backgroundColor: light backgroundColor: t.palette.contrast_200,
? tokens.color.gray_200
: tokens.color.gray_950,
}) })
} }
} else if (variant === 'outline') { } else if (variant === 'outline') {
@ -214,21 +208,19 @@ export function Button({
if (!disabled) { if (!disabled) {
baseStyles.push(a.border, { baseStyles.push(a.border, {
borderColor: light ? tokens.color.gray_300 : tokens.color.gray_700, borderColor: t.palette.contrast_300,
}) })
hoverStyles.push(a.border, t.atoms.bg_contrast_50) hoverStyles.push(t.atoms.bg_contrast_50)
} else { } else {
baseStyles.push(a.border, { baseStyles.push(a.border, {
borderColor: light ? tokens.color.gray_200 : tokens.color.gray_800, borderColor: t.palette.contrast_200,
}) })
} }
} else if (variant === 'ghost') { } else if (variant === 'ghost') {
if (!disabled) { if (!disabled) {
baseStyles.push(t.atoms.bg) baseStyles.push(t.atoms.bg)
hoverStyles.push({ hoverStyles.push({
backgroundColor: light backgroundColor: t.palette.contrast_100,
? tokens.color.gray_100
: tokens.color.gray_900,
}) })
} }
} }
@ -236,14 +228,14 @@ export function Button({
if (variant === 'solid') { if (variant === 'solid') {
if (!disabled) { if (!disabled) {
baseStyles.push({ baseStyles.push({
backgroundColor: t.palette.negative_400, backgroundColor: t.palette.negative_500,
}) })
hoverStyles.push({ hoverStyles.push({
backgroundColor: t.palette.negative_500, backgroundColor: t.palette.negative_600,
}) })
} else { } else {
baseStyles.push({ baseStyles.push({
backgroundColor: t.palette.negative_600, backgroundColor: t.palette.negative_700,
}) })
} }
} else if (variant === 'outline') { } else if (variant === 'outline') {
@ -253,7 +245,7 @@ export function Button({
if (!disabled) { if (!disabled) {
baseStyles.push(a.border, { baseStyles.push(a.border, {
borderColor: t.palette.negative_400, borderColor: t.palette.negative_500,
}) })
hoverStyles.push(a.border, { hoverStyles.push(a.border, {
backgroundColor: light backgroundColor: light
@ -273,7 +265,7 @@ export function Button({
hoverStyles.push({ hoverStyles.push({
backgroundColor: light backgroundColor: light
? t.palette.negative_100 ? t.palette.negative_100
: t.palette.negative_950, : t.palette.negative_975,
}) })
} }
} }
@ -461,31 +453,31 @@ export function useSharedButtonTextStyles() {
if (variant === 'solid' || variant === 'gradient') { if (variant === 'solid' || variant === 'gradient') {
if (!disabled) { if (!disabled) {
baseStyles.push({ baseStyles.push({
color: light ? tokens.color.gray_700 : tokens.color.gray_100, color: t.palette.contrast_700,
}) })
} else { } else {
baseStyles.push({ baseStyles.push({
color: light ? tokens.color.gray_400 : tokens.color.gray_700, color: t.palette.contrast_400,
}) })
} }
} else if (variant === 'outline') { } else if (variant === 'outline') {
if (!disabled) { if (!disabled) {
baseStyles.push({ baseStyles.push({
color: light ? tokens.color.gray_600 : tokens.color.gray_300, color: t.palette.contrast_600,
}) })
} else { } else {
baseStyles.push({ baseStyles.push({
color: light ? tokens.color.gray_400 : tokens.color.gray_700, color: t.palette.contrast_300,
}) })
} }
} else if (variant === 'ghost') { } else if (variant === 'ghost') {
if (!disabled) { if (!disabled) {
baseStyles.push({ baseStyles.push({
color: light ? tokens.color.gray_600 : tokens.color.gray_300, color: t.palette.contrast_600,
}) })
} else { } else {
baseStyles.push({ baseStyles.push({
color: light ? tokens.color.gray_400 : tokens.color.gray_600, color: t.palette.contrast_300,
}) })
} }
} }

4
src/components/forms/TextField.tsx
View File

@ -10,7 +10,7 @@ import {
} from 'react-native' } from 'react-native'
import {HITSLOP_20} from 'lib/constants' import {HITSLOP_20} from 'lib/constants'
import {useTheme, atoms as a, web, tokens, android} from '#/alf' import {useTheme, atoms as a, web, android} from '#/alf'
import {Text} from '#/components/Typography' import {Text} from '#/components/Typography'
import {useInteractionState} from '#/components/hooks/useInteractionState' import {useInteractionState} from '#/components/hooks/useInteractionState'
import {Props as SVGIconProps} from '#/components/icons/common' import {Props as SVGIconProps} from '#/components/icons/common'
@ -110,7 +110,7 @@ export function useSharedInputStyles() {
{ {
backgroundColor: backgroundColor:
t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900, t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
borderColor: tokens.color.red_500, borderColor: t.palette.negative_500,
}, },
] ]

4
src/components/forms/Toggle.tsx
View File

@ -301,7 +301,7 @@ export function createSharedToggleStyles({
if (isInvalid) { if (isInvalid) {
base.push({ base.push({
backgroundColor: backgroundColor:
t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900, t.name === 'light' ? t.palette.negative_25 : t.palette.negative_975,
borderColor: borderColor:
t.name === 'light' ? t.palette.negative_300 : t.palette.negative_800, t.name === 'light' ? t.palette.negative_300 : t.palette.negative_800,
}) })
@ -310,7 +310,7 @@ export function createSharedToggleStyles({
baseHover.push({ baseHover.push({
backgroundColor: backgroundColor:
t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900, t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
borderColor: t.palette.negative_500, borderColor: t.palette.negative_600,
}) })
} }
} }

4
src/lib/themes.ts
View File

@ -357,8 +357,8 @@ export const dimTheme: Theme = {
textVeryLight: dimPalette.contrast_400, textVeryLight: dimPalette.contrast_400,
replyLine: dimPalette.contrast_200, replyLine: dimPalette.contrast_200,
replyLineDot: dimPalette.contrast_200, replyLineDot: dimPalette.contrast_200,
unreadNotifBg: `hsl(211, 48%, 17%)`, unreadNotifBg: dimPalette.primary_975,
unreadNotifBorder: `hsl(211, 48%, 30%)`, unreadNotifBorder: dimPalette.primary_900,
postCtrl: dimPalette.contrast_500, postCtrl: dimPalette.contrast_500,
brandText: dimPalette.primary_500, brandText: dimPalette.primary_500,
emptyStateIcon: dimPalette.contrast_300, emptyStateIcon: dimPalette.contrast_300,

15
src/view/screens/ProfileList.tsx
View File

@ -60,7 +60,7 @@ import {
import {logger} from '#/logger' import {logger} from '#/logger'
import {useAnalytics} from '#/lib/analytics/analytics' import {useAnalytics} from '#/lib/analytics/analytics'
import {listenSoftReset} from '#/state/events' import {listenSoftReset} from '#/state/events'
import {atoms as a} from '#/alf' import {atoms as a, useTheme} from '#/alf'
const SECTION_TITLES_CURATE = ['Posts', 'About'] const SECTION_TITLES_CURATE = ['Posts', 'About']
const SECTION_TITLES_MOD = ['About'] const SECTION_TITLES_MOD = ['About']
@ -699,6 +699,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
ref, ref,
) { ) {
const pal = usePalette('default') const pal = usePalette('default')
const t = useTheme()
const {_} = useLingui() const {_} = useLingui()
const {isMobile} = useWebMediaQueries() const {isMobile} = useWebMediaQueries()
const {currentAccount} = useSession() const {currentAccount} = useSession()
@ -792,7 +793,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
paddingBottom: isMobile ? 14 : 18, paddingBottom: isMobile ? 14 : 18,
}, },
]}> ]}>
<Text type="lg-bold"> <Text type="lg-bold" style={t.atoms.text}>
<Trans>Users</Trans> <Trans>Users</Trans>
</Text> </Text>
{isOwner && ( {isOwner && (
@ -817,14 +818,18 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
</View> </View>
) )
}, [ }, [
pal,
list,
isMobile, isMobile,
pal.border,
pal.textLight,
pal.colors.link,
pal.link,
descriptionRT, descriptionRT,
isCurateList, isCurateList,
isOwner, isOwner,
onPressAddUser, list.creator,
t.atoms.text,
_, _,
onPressAddUser,
]) ])
const renderEmptyState = useCallback(() => { const renderEmptyState = useCallback(() => {

93
src/view/screens/Storybook/Palette.tsx
View File

@ -1,7 +1,6 @@
import React from 'react' import React from 'react'
import {View} from 'react-native' import {View} from 'react-native'
import * as tokens from '#/alf/tokens'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
export function Palette() { export function Palette() {
@ -28,79 +27,79 @@ export function Palette() {
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_25}, {height: 60, backgroundColor: t.palette.primary_25},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_50}, {height: 60, backgroundColor: t.palette.primary_50},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_100}, {height: 60, backgroundColor: t.palette.primary_100},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_200}, {height: 60, backgroundColor: t.palette.primary_200},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_300}, {height: 60, backgroundColor: t.palette.primary_300},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_400}, {height: 60, backgroundColor: t.palette.primary_400},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_500}, {height: 60, backgroundColor: t.palette.primary_500},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_600}, {height: 60, backgroundColor: t.palette.primary_600},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_700}, {height: 60, backgroundColor: t.palette.primary_700},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_800}, {height: 60, backgroundColor: t.palette.primary_800},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_900}, {height: 60, backgroundColor: t.palette.primary_900},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_950}, {height: 60, backgroundColor: t.palette.primary_950},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_975}, {height: 60, backgroundColor: t.palette.primary_975},
]} ]}
/> />
</View> </View>
@ -108,153 +107,159 @@ export function Palette() {
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.green_25}, {height: 60, backgroundColor: t.palette.positive_25},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.green_50}, {height: 60, backgroundColor: t.palette.positive_50},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.green_100}, {height: 60, backgroundColor: t.palette.positive_100},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.green_200}, {height: 60, backgroundColor: t.palette.positive_200},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.green_300}, {height: 60, backgroundColor: t.palette.positive_300},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.green_400}, {height: 60, backgroundColor: t.palette.positive_400},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.green_500}, {height: 60, backgroundColor: t.palette.positive_500},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.green_600}, {height: 60, backgroundColor: t.palette.positive_600},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.green_700}, {height: 60, backgroundColor: t.palette.positive_700},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.green_800}, {height: 60, backgroundColor: t.palette.positive_800},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.green_900}, {height: 60, backgroundColor: t.palette.positive_900},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.green_950}, {height: 60, backgroundColor: t.palette.positive_950},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.green_975}, {height: 60, backgroundColor: t.palette.positive_975},
]} ]}
/> />
</View> </View>
<View style={[a.flex_row, a.gap_md]}> <View style={[a.flex_row, a.gap_md]}>
<View
style={[a.flex_1, {height: 60, backgroundColor: tokens.color.red_25}]}
/>
<View
style={[a.flex_1, {height: 60, backgroundColor: tokens.color.red_50}]}
/>
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.red_100}, {height: 60, backgroundColor: t.palette.negative_25},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.red_200}, {height: 60, backgroundColor: t.palette.negative_50},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.red_300}, {height: 60, backgroundColor: t.palette.negative_100},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.red_400}, {height: 60, backgroundColor: t.palette.negative_200},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.red_500}, {height: 60, backgroundColor: t.palette.negative_300},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.red_600}, {height: 60, backgroundColor: t.palette.negative_400},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.red_700}, {height: 60, backgroundColor: t.palette.negative_500},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.red_800}, {height: 60, backgroundColor: t.palette.negative_600},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.red_900}, {height: 60, backgroundColor: t.palette.negative_700},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.red_950}, {height: 60, backgroundColor: t.palette.negative_800},
]} ]}
/> />
<View <View
style={[ style={[
a.flex_1, a.flex_1,
{height: 60, backgroundColor: tokens.color.red_975}, {height: 60, backgroundColor: t.palette.negative_900},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: t.palette.negative_950},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: t.palette.negative_975},
]} ]}
/> />
</View> </View>