diff options
| -rw-r--r-- | src/alf/themes.ts | 108 | ||||
| -rw-r--r-- | src/alf/tokens.ts | 43 | ||||
| -rw-r--r-- | src/alf/util/colorGeneration.ts | 17 | ||||
| -rw-r--r-- | src/components/Button.tsx | 48 | ||||
| -rw-r--r-- | src/components/forms/TextField.tsx | 4 | ||||
| -rw-r--r-- | src/components/forms/Toggle.tsx | 4 | ||||
| -rw-r--r-- | src/lib/themes.ts | 4 | ||||
| -rw-r--r-- | src/view/screens/ProfileList.tsx | 15 | ||||
| -rw-r--r-- | src/view/screens/Storybook/Palette.tsx | 85 |
9 files changed, 195 insertions, 133 deletions
diff --git a/src/alf/themes.ts b/src/alf/themes.ts index da96f6eff..0c95a459e 100644 --- a/src/alf/themes.ts +++ b/src/alf/themes.ts @@ -1,6 +1,7 @@ import * as tokens from '#/alf/tokens' import type {Mutable} from '#/alf/types' import {atoms} from '#/alf/atoms' +import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration' export type ThemeName = 'light' | 'dim' | 'dark' export type ReadonlyTheme = typeof light @@ -73,19 +74,19 @@ export const darkPalette: Palette = { white: tokens.color.gray_0, black: tokens.color.trueBlack, - 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%)`, + 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, primary_25: tokens.color.blue_25, primary_50: tokens.color.blue_50, @@ -132,28 +133,63 @@ export const darkPalette: Palette = { export const dimPalette: Palette = { ...darkPalette, - black: `hsl(211, 28%, 12%)`, + black: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[0]}%)`, - 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%)`, + contrast_25: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[1]}%)`, + contrast_50: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[2]}%)`, + contrast_100: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[3]}%)`, + contrast_200: `hsl(${BLUE_HUE}, 28%, ${tokens.dimScale[4]}%)`, + contrast_300: `hsl(${BLUE_HUE}, 24%, ${tokens.dimScale[5]}%)`, + contrast_400: `hsl(${BLUE_HUE}, 24%, ${tokens.dimScale[6]}%)`, + contrast_500: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[7]}%)`, + contrast_600: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[8]}%)`, + contrast_700: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[9]}%)`, + contrast_800: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[10]}%)`, + contrast_900: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[11]}%)`, + contrast_950: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[12]}%)`, + contrast_975: `hsl(${BLUE_HUE}, 20%, ${tokens.dimScale[13]}%)`, - 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%)`, + primary_25: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[13]}%)`, + primary_50: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[12]}%)`, + primary_100: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[11]}%)`, + primary_200: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[10]}%)`, + primary_300: `hsl(${BLUE_HUE}, 99%, ${tokens.dimScale[9]}%)`, + 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 export const light = { @@ -404,17 +440,17 @@ export const dim: Theme = { shadow_sm: { ...atoms.shadow_sm, shadowOpacity: 0.7, - shadowColor: `hsl(211, 28%, 3%)`, + shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`, }, shadow_md: { ...atoms.shadow_md, shadowOpacity: 0.7, - shadowColor: `hsl(211, 28%, 3%)`, + shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`, }, shadow_lg: { ...atoms.shadow_lg, shadowOpacity: 0.7, - shadowColor: `hsl(211, 28%, 3%)`, + shadowColor: `hsl(${BLUE_HUE}, 28%, 6%)`, }, }, } diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts index f0b8c7c69..b1468f461 100644 --- a/src/alf/tokens.ts +++ b/src/alf/tokens.ts @@ -1,25 +1,32 @@ -const BLUE_HUE = 211 -const RED_HUE = 346 -const GREEN_HUE = 152 +import { + BLUE_HUE, + 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 = { trueBlack: '#000000', - gray_0: `hsl(${BLUE_HUE}, 20%, 100%)`, - gray_25: `hsl(${BLUE_HUE}, 20%, 97%)`, - gray_50: `hsl(${BLUE_HUE}, 20%, 95%)`, - gray_100: `hsl(${BLUE_HUE}, 20%, 90%)`, - gray_200: `hsl(${BLUE_HUE}, 20%, 80%)`, - gray_300: `hsl(${BLUE_HUE}, 20%, 70%)`, - gray_400: `hsl(${BLUE_HUE}, 20%, 60%)`, - gray_500: `hsl(${BLUE_HUE}, 20%, 50%)`, - gray_600: `hsl(${BLUE_HUE}, 24%, 42%)`, - gray_700: `hsl(${BLUE_HUE}, 24%, 34%)`, - gray_800: `hsl(${BLUE_HUE}, 28%, 26%)`, - gray_900: `hsl(${BLUE_HUE}, 28%, 18%)`, - gray_950: `hsl(${BLUE_HUE}, 28%, 10%)`, - gray_975: `hsl(${BLUE_HUE}, 28%, 7%)`, - gray_1000: `hsl(${BLUE_HUE}, 28%, 4%)`, + gray_0: `hsl(${BLUE_HUE}, 20%, ${scale[14]}%)`, + gray_25: `hsl(${BLUE_HUE}, 20%, ${scale[13]}%)`, + gray_50: `hsl(${BLUE_HUE}, 20%, ${scale[12]}%)`, + gray_100: `hsl(${BLUE_HUE}, 20%, ${scale[11]}%)`, + gray_200: `hsl(${BLUE_HUE}, 20%, ${scale[10]}%)`, + gray_300: `hsl(${BLUE_HUE}, 20%, ${scale[9]}%)`, + gray_400: `hsl(${BLUE_HUE}, 20%, ${scale[8]}%)`, + gray_500: `hsl(${BLUE_HUE}, 20%, ${scale[7]}%)`, + gray_600: `hsl(${BLUE_HUE}, 24%, ${scale[6]}%)`, + gray_700: `hsl(${BLUE_HUE}, 24%, ${scale[5]}%)`, + gray_800: `hsl(${BLUE_HUE}, 28%, ${scale[4]}%)`, + gray_900: `hsl(${BLUE_HUE}, 28%, ${scale[3]}%)`, + gray_950: `hsl(${BLUE_HUE}, 28%, ${scale[2]}%)`, + gray_975: `hsl(${BLUE_HUE}, 28%, ${scale[1]}%)`, + gray_1000: `hsl(${BLUE_HUE}, 28%, ${scale[0]}%)`, blue_25: `hsl(${BLUE_HUE}, 99%, 97%)`, blue_50: `hsl(${BLUE_HUE}, 99%, 95%)`, diff --git a/src/alf/util/colorGeneration.ts b/src/alf/util/colorGeneration.ts new file mode 100644 index 000000000..929a01d3a --- /dev/null +++ b/src/alf/util/colorGeneration.ts @@ -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 + }) +} diff --git a/src/components/Button.tsx b/src/components/Button.tsx index e401bda2a..5361be963 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -165,7 +165,7 @@ export function Button({ if (!disabled) { baseStyles.push(a.border, { - borderColor: tokens.color.blue_500, + borderColor: t.palette.primary_500, }) hoverStyles.push(a.border, { backgroundColor: light @@ -174,7 +174,7 @@ export function Button({ }) } else { 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') { @@ -191,20 +191,14 @@ export function Button({ if (variant === 'solid') { if (!disabled) { baseStyles.push({ - backgroundColor: light - ? tokens.color.gray_50 - : tokens.color.gray_900, + backgroundColor: t.palette.contrast_50, }) hoverStyles.push({ - backgroundColor: light - ? tokens.color.gray_100 - : tokens.color.gray_950, + backgroundColor: t.palette.contrast_100, }) } else { baseStyles.push({ - backgroundColor: light - ? tokens.color.gray_200 - : tokens.color.gray_950, + backgroundColor: t.palette.contrast_200, }) } } else if (variant === 'outline') { @@ -214,21 +208,19 @@ export function Button({ if (!disabled) { 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 { baseStyles.push(a.border, { - borderColor: light ? tokens.color.gray_200 : tokens.color.gray_800, + borderColor: t.palette.contrast_200, }) } } else if (variant === 'ghost') { if (!disabled) { baseStyles.push(t.atoms.bg) hoverStyles.push({ - backgroundColor: light - ? tokens.color.gray_100 - : tokens.color.gray_900, + backgroundColor: t.palette.contrast_100, }) } } @@ -236,14 +228,14 @@ export function Button({ if (variant === 'solid') { if (!disabled) { baseStyles.push({ - backgroundColor: t.palette.negative_400, + backgroundColor: t.palette.negative_500, }) hoverStyles.push({ - backgroundColor: t.palette.negative_500, + backgroundColor: t.palette.negative_600, }) } else { baseStyles.push({ - backgroundColor: t.palette.negative_600, + backgroundColor: t.palette.negative_700, }) } } else if (variant === 'outline') { @@ -253,7 +245,7 @@ export function Button({ if (!disabled) { baseStyles.push(a.border, { - borderColor: t.palette.negative_400, + borderColor: t.palette.negative_500, }) hoverStyles.push(a.border, { backgroundColor: light @@ -273,7 +265,7 @@ export function Button({ hoverStyles.push({ backgroundColor: light ? 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 (!disabled) { baseStyles.push({ - color: light ? tokens.color.gray_700 : tokens.color.gray_100, + color: t.palette.contrast_700, }) } else { baseStyles.push({ - color: light ? tokens.color.gray_400 : tokens.color.gray_700, + color: t.palette.contrast_400, }) } } else if (variant === 'outline') { if (!disabled) { baseStyles.push({ - color: light ? tokens.color.gray_600 : tokens.color.gray_300, + color: t.palette.contrast_600, }) } else { baseStyles.push({ - color: light ? tokens.color.gray_400 : tokens.color.gray_700, + color: t.palette.contrast_300, }) } } else if (variant === 'ghost') { if (!disabled) { baseStyles.push({ - color: light ? tokens.color.gray_600 : tokens.color.gray_300, + color: t.palette.contrast_600, }) } else { baseStyles.push({ - color: light ? tokens.color.gray_400 : tokens.color.gray_600, + color: t.palette.contrast_300, }) } } diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx index a781bdd18..b37f4bfae 100644 --- a/src/components/forms/TextField.tsx +++ b/src/components/forms/TextField.tsx @@ -10,7 +10,7 @@ import { } from 'react-native' 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 {useInteractionState} from '#/components/hooks/useInteractionState' import {Props as SVGIconProps} from '#/components/icons/common' @@ -110,7 +110,7 @@ export function useSharedInputStyles() { { backgroundColor: t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900, - borderColor: tokens.color.red_500, + borderColor: t.palette.negative_500, }, ] diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx index 140740f70..a83f92a2a 100644 --- a/src/components/forms/Toggle.tsx +++ b/src/components/forms/Toggle.tsx @@ -301,7 +301,7 @@ export function createSharedToggleStyles({ if (isInvalid) { base.push({ backgroundColor: - t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900, + t.name === 'light' ? t.palette.negative_25 : t.palette.negative_975, borderColor: t.name === 'light' ? t.palette.negative_300 : t.palette.negative_800, }) @@ -310,7 +310,7 @@ export function createSharedToggleStyles({ baseHover.push({ backgroundColor: t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900, - borderColor: t.palette.negative_500, + borderColor: t.palette.negative_600, }) } } diff --git a/src/lib/themes.ts b/src/lib/themes.ts index 135d50ab6..bd75aabea 100644 --- a/src/lib/themes.ts +++ b/src/lib/themes.ts @@ -357,8 +357,8 @@ export const dimTheme: Theme = { textVeryLight: dimPalette.contrast_400, replyLine: dimPalette.contrast_200, replyLineDot: dimPalette.contrast_200, - unreadNotifBg: `hsl(211, 48%, 17%)`, - unreadNotifBorder: `hsl(211, 48%, 30%)`, + unreadNotifBg: dimPalette.primary_975, + unreadNotifBorder: dimPalette.primary_900, postCtrl: dimPalette.contrast_500, brandText: dimPalette.primary_500, emptyStateIcon: dimPalette.contrast_300, diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index d86b569e2..9e98757ef 100644 --- a/src/view/screens/ProfileList.tsx +++ b/src/view/screens/ProfileList.tsx @@ -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(() => { diff --git a/src/view/screens/Storybook/Palette.tsx b/src/view/screens/Storybook/Palette.tsx index 900754681..42000aa81 100644 --- a/src/view/screens/Storybook/Palette.tsx +++ b/src/view/screens/Storybook/Palette.tsx @@ -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}]} + style={[ + a.flex_1, + {height: 60, backgroundColor: t.palette.negative_25}, + ]} /> <View - style={[a.flex_1, {height: 60, backgroundColor: tokens.color.red_50}]} + style={[ + a.flex_1, + {height: 60, backgroundColor: t.palette.negative_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> |