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>
This commit is contained in:
Eric Bailey
GitHub
parent
411061ea32
commit
2962862de2
9 changed files with 199 additions and 137 deletions
|
|
@ -60,7 +60,7 @@ import {
|
|||
import {logger} from '#/logger'
|
||||
import {useAnalytics} from '#/lib/analytics/analytics'
|
||||
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_MOD = ['About']
|
||||
|
|
@ -699,6 +699,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
|
|||
ref,
|
||||
) {
|
||||
const pal = usePalette('default')
|
||||
const t = useTheme()
|
||||
const {_} = useLingui()
|
||||
const {isMobile} = useWebMediaQueries()
|
||||
const {currentAccount} = useSession()
|
||||
|
|
@ -792,7 +793,7 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
|
|||
paddingBottom: isMobile ? 14 : 18,
|
||||
},
|
||||
]}>
|
||||
<Text type="lg-bold">
|
||||
<Text type="lg-bold" style={t.atoms.text}>
|
||||
<Trans>Users</Trans>
|
||||
</Text>
|
||||
{isOwner && (
|
||||
|
|
@ -817,14 +818,18 @@ const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
|
|||
</View>
|
||||
)
|
||||
}, [
|
||||
pal,
|
||||
list,
|
||||
isMobile,
|
||||
pal.border,
|
||||
pal.textLight,
|
||||
pal.colors.link,
|
||||
pal.link,
|
||||
descriptionRT,
|
||||
isCurateList,
|
||||
isOwner,
|
||||
onPressAddUser,
|
||||
list.creator,
|
||||
t.atoms.text,
|
||||
_,
|
||||
onPressAddUser,
|
||||
])
|
||||
|
||||
const renderEmptyState = useCallback(() => {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
|
||||
import * as tokens from '#/alf/tokens'
|
||||
import {atoms as a, useTheme} from '#/alf'
|
||||
|
||||
export function Palette() {
|
||||
|
|
@ -28,79 +27,79 @@ export function Palette() {
|
|||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.blue_25},
|
||||
{height: 60, backgroundColor: t.palette.primary_25},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.blue_50},
|
||||
{height: 60, backgroundColor: t.palette.primary_50},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.blue_100},
|
||||
{height: 60, backgroundColor: t.palette.primary_100},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.blue_200},
|
||||
{height: 60, backgroundColor: t.palette.primary_200},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.blue_300},
|
||||
{height: 60, backgroundColor: t.palette.primary_300},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.blue_400},
|
||||
{height: 60, backgroundColor: t.palette.primary_400},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.blue_500},
|
||||
{height: 60, backgroundColor: t.palette.primary_500},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.blue_600},
|
||||
{height: 60, backgroundColor: t.palette.primary_600},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.blue_700},
|
||||
{height: 60, backgroundColor: t.palette.primary_700},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.blue_800},
|
||||
{height: 60, backgroundColor: t.palette.primary_800},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.blue_900},
|
||||
{height: 60, backgroundColor: t.palette.primary_900},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.blue_950},
|
||||
{height: 60, backgroundColor: t.palette.primary_950},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.blue_975},
|
||||
{height: 60, backgroundColor: t.palette.primary_975},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
|
|
@ -108,153 +107,159 @@ export function Palette() {
|
|||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.green_25},
|
||||
{height: 60, backgroundColor: t.palette.positive_25},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.green_50},
|
||||
{height: 60, backgroundColor: t.palette.positive_50},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.green_100},
|
||||
{height: 60, backgroundColor: t.palette.positive_100},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.green_200},
|
||||
{height: 60, backgroundColor: t.palette.positive_200},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.green_300},
|
||||
{height: 60, backgroundColor: t.palette.positive_300},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.green_400},
|
||||
{height: 60, backgroundColor: t.palette.positive_400},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.green_500},
|
||||
{height: 60, backgroundColor: t.palette.positive_500},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.green_600},
|
||||
{height: 60, backgroundColor: t.palette.positive_600},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.green_700},
|
||||
{height: 60, backgroundColor: t.palette.positive_700},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.green_800},
|
||||
{height: 60, backgroundColor: t.palette.positive_800},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.green_900},
|
||||
{height: 60, backgroundColor: t.palette.positive_900},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.green_950},
|
||||
{height: 60, backgroundColor: t.palette.positive_950},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.green_975},
|
||||
{height: 60, backgroundColor: t.palette.positive_975},
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
<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
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.red_100},
|
||||
{height: 60, backgroundColor: t.palette.negative_25},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.red_200},
|
||||
{height: 60, backgroundColor: t.palette.negative_50},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.red_300},
|
||||
{height: 60, backgroundColor: t.palette.negative_100},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.red_400},
|
||||
{height: 60, backgroundColor: t.palette.negative_200},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.red_500},
|
||||
{height: 60, backgroundColor: t.palette.negative_300},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.red_600},
|
||||
{height: 60, backgroundColor: t.palette.negative_400},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.red_700},
|
||||
{height: 60, backgroundColor: t.palette.negative_500},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.red_800},
|
||||
{height: 60, backgroundColor: t.palette.negative_600},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.red_900},
|
||||
{height: 60, backgroundColor: t.palette.negative_700},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
a.flex_1,
|
||||
{height: 60, backgroundColor: tokens.color.red_950},
|
||||
{height: 60, backgroundColor: t.palette.negative_800},
|
||||
]}
|
||||
/>
|
||||
<View
|
||||
style={[
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue