diff options
Diffstat (limited to 'src/view/screens/Storybook/Palette.tsx')
| -rw-r--r-- | src/view/screens/Storybook/Palette.tsx | 182 |
1 files changed, 57 insertions, 125 deletions
diff --git a/src/view/screens/Storybook/Palette.tsx b/src/view/screens/Storybook/Palette.tsx index b521fe860..42000aa81 100644 --- a/src/view/screens/Storybook/Palette.tsx +++ b/src/view/screens/Storybook/Palette.tsx @@ -1,179 +1,185 @@ 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, 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]}> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_50}, + {height: 60, backgroundColor: t.palette.primary_25}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_100}, + {height: 60, backgroundColor: t.palette.primary_50}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_200}, + {height: 60, backgroundColor: t.palette.primary_100}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_300}, + {height: 60, backgroundColor: t.palette.primary_200}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_400}, + {height: 60, backgroundColor: t.palette.primary_300}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_500}, + {height: 60, backgroundColor: t.palette.primary_400}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_600}, + {height: 60, backgroundColor: t.palette.primary_500}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_700}, + {height: 60, backgroundColor: t.palette.primary_600}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_800}, + {height: 60, backgroundColor: t.palette.primary_700}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_900}, + {height: 60, backgroundColor: t.palette.primary_800}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_950}, + {height: 60, backgroundColor: t.palette.primary_900}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_975}, + {height: 60, backgroundColor: t.palette.primary_950}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.gray_1000}, + {height: 60, backgroundColor: t.palette.primary_975}, ]} /> </View> - <View style={[a.flex_row, a.gap_md]}> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_25}, + {height: 60, backgroundColor: t.palette.positive_25}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_50}, + {height: 60, backgroundColor: t.palette.positive_50}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_100}, + {height: 60, backgroundColor: t.palette.positive_100}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_200}, + {height: 60, backgroundColor: t.palette.positive_200}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_300}, + {height: 60, backgroundColor: t.palette.positive_300}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_400}, + {height: 60, backgroundColor: t.palette.positive_400}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_500}, + {height: 60, backgroundColor: t.palette.positive_500}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_600}, + {height: 60, backgroundColor: t.palette.positive_600}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_700}, + {height: 60, backgroundColor: t.palette.positive_700}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_800}, + {height: 60, backgroundColor: t.palette.positive_800}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_900}, + {height: 60, backgroundColor: t.palette.positive_900}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_950}, + {height: 60, backgroundColor: t.palette.positive_950}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.blue_975}, + {height: 60, backgroundColor: t.palette.positive_975}, ]} /> </View> @@ -181,153 +187,79 @@ export function Palette() { <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.green_25}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_50}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_100}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_200}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_300}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_400}, + {height: 60, backgroundColor: t.palette.negative_25}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.green_500}, + {height: 60, backgroundColor: t.palette.negative_50}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.green_600}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_700}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_800}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_900}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_950}, - ]} - /> - <View - style={[ - a.flex_1, - {height: 60, backgroundColor: tokens.color.green_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_100}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_200}, + {height: 60, backgroundColor: t.palette.negative_200}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_300}, + {height: 60, backgroundColor: t.palette.negative_300}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_400}, + {height: 60, backgroundColor: t.palette.negative_400}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_500}, + {height: 60, backgroundColor: t.palette.negative_500}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_600}, + {height: 60, backgroundColor: t.palette.negative_600}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_700}, + {height: 60, backgroundColor: t.palette.negative_700}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_800}, + {height: 60, backgroundColor: t.palette.negative_800}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_900}, + {height: 60, backgroundColor: t.palette.negative_900}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_950}, + {height: 60, backgroundColor: t.palette.negative_950}, ]} /> <View style={[ a.flex_1, - {height: 60, backgroundColor: tokens.color.red_975}, + {height: 60, backgroundColor: t.palette.negative_975}, ]} /> </View> |