diff options
Diffstat (limited to 'src/view')
| -rw-r--r-- | src/view/com/post-thread/PostThreadItem.tsx | 4 | ||||
| -rw-r--r-- | src/view/screens/Storybook/Palette.tsx | 103 |
2 files changed, 17 insertions, 90 deletions
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]}> |