diff --git a/src/alf/themes.ts b/src/alf/themes.ts index 08aee75512..acd180333f 100644 --- a/src/alf/themes.ts +++ b/src/alf/themes.ts @@ -9,8 +9,8 @@ export type ReadonlyPalette = typeof lightPalette export type Palette = Mutable export const lightPalette = { - white: tokens.color.white, - black: tokens.color.black, + white: tokens.color.gray_0, + black: tokens.color.gray_1000, contrast_25: tokens.color.gray_25, contrast_50: tokens.color.gray_50, @@ -23,6 +23,8 @@ export const lightPalette = { contrast_700: tokens.color.gray_700, contrast_800: tokens.color.gray_800, contrast_900: tokens.color.gray_900, + contrast_950: tokens.color.gray_950, + contrast_975: tokens.color.gray_975, primary_25: tokens.color.blue_25, primary_50: tokens.color.blue_50, @@ -35,6 +37,8 @@ export const lightPalette = { primary_700: tokens.color.blue_700, primary_800: tokens.color.blue_800, primary_900: tokens.color.blue_900, + primary_950: tokens.color.blue_950, + primary_975: tokens.color.blue_975, positive_25: tokens.color.green_25, positive_50: tokens.color.green_50, @@ -47,6 +51,8 @@ export const lightPalette = { positive_700: tokens.color.green_700, positive_800: tokens.color.green_800, positive_900: tokens.color.green_900, + positive_950: tokens.color.green_950, + positive_975: tokens.color.green_975, negative_25: tokens.color.red_25, negative_50: tokens.color.red_50, @@ -59,23 +65,27 @@ export const lightPalette = { negative_700: tokens.color.red_700, negative_800: tokens.color.red_800, negative_900: tokens.color.red_900, + negative_950: tokens.color.red_950, + negative_975: tokens.color.red_975, } as const export const darkPalette: Palette = { - white: tokens.color.white, - black: tokens.color.black, + white: tokens.color.gray_0, + black: tokens.color.gray_1000, - contrast_25: tokens.color.gray_900, - contrast_50: tokens.color.gray_800, - contrast_100: tokens.color.gray_700, - contrast_200: tokens.color.gray_600, - contrast_300: tokens.color.gray_500, - contrast_400: tokens.color.gray_400, - contrast_500: tokens.color.gray_300, - contrast_600: tokens.color.gray_200, - contrast_700: tokens.color.gray_100, - contrast_800: tokens.color.gray_50, - contrast_900: tokens.color.gray_25, + contrast_25: tokens.color.gray_975, + contrast_50: tokens.color.gray_950, + contrast_100: tokens.color.gray_900, + contrast_200: tokens.color.gray_800, + contrast_300: tokens.color.gray_700, + contrast_400: tokens.color.gray_600, + contrast_500: tokens.color.gray_500, + contrast_600: tokens.color.gray_400, + contrast_700: tokens.color.gray_300, + contrast_800: tokens.color.gray_200, + contrast_900: tokens.color.gray_100, + contrast_950: tokens.color.gray_50, + contrast_975: tokens.color.gray_25, primary_25: tokens.color.blue_25, primary_50: tokens.color.blue_50, @@ -88,6 +98,8 @@ export const darkPalette: Palette = { primary_700: tokens.color.blue_700, primary_800: tokens.color.blue_800, primary_900: tokens.color.blue_900, + primary_950: tokens.color.blue_950, + primary_975: tokens.color.blue_975, positive_25: tokens.color.green_25, positive_50: tokens.color.green_50, @@ -100,6 +112,8 @@ export const darkPalette: Palette = { positive_700: tokens.color.green_700, positive_800: tokens.color.green_800, positive_900: tokens.color.green_900, + positive_950: tokens.color.green_950, + positive_975: tokens.color.green_975, negative_25: tokens.color.red_25, negative_50: tokens.color.red_50, @@ -112,6 +126,8 @@ export const darkPalette: Palette = { negative_700: tokens.color.red_700, negative_800: tokens.color.red_800, negative_900: tokens.color.red_900, + negative_950: tokens.color.red_950, + negative_975: tokens.color.red_975, } as const export const light = { @@ -121,6 +137,9 @@ export const light = { text: { color: lightPalette.black, }, + text_contrast_700: { + color: lightPalette.contrast_700, + }, text_contrast_600: { color: lightPalette.contrast_600, }, @@ -179,6 +198,73 @@ export const dim: Theme = { text: { color: darkPalette.white, }, + text_contrast_700: { + color: darkPalette.contrast_800, + }, + text_contrast_600: { + color: darkPalette.contrast_700, + }, + text_contrast_500: { + color: darkPalette.contrast_600, + }, + text_contrast_400: { + color: darkPalette.contrast_500, + }, + text_inverted: { + color: darkPalette.black, + }, + bg: { + backgroundColor: darkPalette.contrast_50, + }, + bg_contrast_25: { + backgroundColor: darkPalette.contrast_100, + }, + bg_contrast_50: { + backgroundColor: darkPalette.contrast_200, + }, + bg_contrast_100: { + backgroundColor: darkPalette.contrast_300, + }, + bg_contrast_200: { + backgroundColor: darkPalette.contrast_400, + }, + bg_contrast_300: { + backgroundColor: darkPalette.contrast_500, + }, + border: { + borderColor: darkPalette.contrast_200, + }, + border_contrast: { + borderColor: darkPalette.contrast_400, + }, + shadow_sm: { + ...atoms.shadow_sm, + shadowOpacity: 0.7, + shadowColor: tokens.color.trueBlack, + }, + shadow_md: { + ...atoms.shadow_md, + shadowOpacity: 0.7, + shadowColor: tokens.color.trueBlack, + }, + shadow_lg: { + ...atoms.shadow_lg, + shadowOpacity: 0.7, + shadowColor: tokens.color.trueBlack, + }, + }, +} + +export const dark: Theme = { + name: 'dark', + palette: darkPalette, + atoms: { + text: { + color: darkPalette.white, + }, + text_contrast_700: { + color: darkPalette.contrast_700, + }, text_contrast_600: { color: darkPalette.contrast_600, }, @@ -210,68 +296,7 @@ export const dim: Theme = { backgroundColor: darkPalette.contrast_400, }, border: { - borderColor: darkPalette.contrast_50, - }, - border_contrast: { - borderColor: darkPalette.contrast_300, - }, - shadow_sm: { - ...atoms.shadow_sm, - shadowOpacity: 0.7, - shadowColor: tokens.color.trueBlack, - }, - shadow_md: { - ...atoms.shadow_md, - shadowOpacity: 0.7, - shadowColor: tokens.color.trueBlack, - }, - shadow_lg: { - ...atoms.shadow_lg, - shadowOpacity: 0.7, - shadowColor: tokens.color.trueBlack, - }, - }, -} - -export const dark: Theme = { - name: 'dark', - palette: darkPalette, - atoms: { - text: { - color: darkPalette.white, - }, - text_contrast_600: { - color: darkPalette.contrast_600, - }, - text_contrast_500: { - color: darkPalette.contrast_500, - }, - text_contrast_400: { - color: darkPalette.contrast_400, - }, - text_inverted: { - color: darkPalette.black, - }, - bg: { - backgroundColor: darkPalette.black, - }, - bg_contrast_25: { - backgroundColor: darkPalette.contrast_25, - }, - bg_contrast_50: { - backgroundColor: darkPalette.contrast_50, - }, - bg_contrast_100: { - backgroundColor: darkPalette.contrast_100, - }, - bg_contrast_200: { - backgroundColor: darkPalette.contrast_200, - }, - bg_contrast_300: { - backgroundColor: darkPalette.contrast_300, - }, - border: { - borderColor: darkPalette.contrast_50, + borderColor: darkPalette.contrast_100, }, border_contrast: { borderColor: darkPalette.contrast_300, diff --git a/src/alf/tokens.ts b/src/alf/tokens.ts index 36f6f3992a..0e370cdc17 100644 --- a/src/alf/tokens.ts +++ b/src/alf/tokens.ts @@ -1,55 +1,67 @@ +const BLUE_HUE = 211 +const RED_HUE = 346 +const GREEN_HUE = 152 + export const color = { - white: '#FFFFFF', - black: '#080B12', trueBlack: '#000000', - gray_25: `#FCFCFD`, - gray_50: `#F9FAFB`, - gray_100: `#F3F4F6`, - gray_200: `#E5E7EB`, - gray_300: `#D2D6DB`, - gray_400: `#9DA4AE`, - gray_500: `#6C737F`, - gray_600: `#4D5761`, - gray_700: `#384250`, - gray_800: `#1F2A37`, - gray_900: `#111927`, + 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}, 20%, 42%)`, + gray_700: `hsl(${BLUE_HUE}, 20%, 34%)`, + gray_800: `hsl(${BLUE_HUE}, 20%, 26%)`, + gray_900: `hsl(${BLUE_HUE}, 20%, 18%)`, + gray_950: `hsl(${BLUE_HUE}, 20%, 10%)`, + gray_975: `hsl(${BLUE_HUE}, 20%, 7%)`, + gray_1000: `hsl(${BLUE_HUE}, 20%, 4%)`, - blue_25: `#F5FAFF`, - blue_50: `#EFF8FF`, - blue_100: `#D1E9FF`, - blue_200: `#B2DDFF`, - blue_300: `#84CAFF`, - blue_400: `#53B1FD`, - blue_500: `#1185FE`, - blue_600: `#1073DB`, - blue_700: `#0B5CB2`, - blue_800: `#084585`, - blue_900: `#08305A`, + blue_25: `hsl(${BLUE_HUE}, 99%, 97%)`, + blue_50: `hsl(${BLUE_HUE}, 99%, 95%)`, + blue_100: `hsl(${BLUE_HUE}, 99%, 90%)`, + blue_200: `hsl(${BLUE_HUE}, 99%, 80%)`, + blue_300: `hsl(${BLUE_HUE}, 99%, 70%)`, + blue_400: `hsl(${BLUE_HUE}, 99%, 60%)`, + blue_500: `hsl(${BLUE_HUE}, 99%, 53%)`, + blue_600: `hsl(${BLUE_HUE}, 99%, 42%)`, + blue_700: `hsl(${BLUE_HUE}, 99%, 34%)`, + blue_800: `hsl(${BLUE_HUE}, 99%, 26%)`, + blue_900: `hsl(${BLUE_HUE}, 99%, 18%)`, + blue_950: `hsl(${BLUE_HUE}, 99%, 10%)`, + blue_975: `hsl(${BLUE_HUE}, 99%, 7%)`, - green_25: `#F6FEF9`, - green_50: `#ECFDF3`, - green_100: `#D1FADF`, - green_200: `#A6F4C5`, - green_300: `#6CE9A6`, - green_400: `#32D583`, - green_500: `#12B76A`, - green_600: `#039855`, - green_700: `#027A48`, - green_800: `#05603A`, - green_900: `#054F31`, + green_25: `hsl(${GREEN_HUE}, 82%, 97%)`, + green_50: `hsl(${GREEN_HUE}, 82%, 95%)`, + green_100: `hsl(${GREEN_HUE}, 82%, 90%)`, + green_200: `hsl(${GREEN_HUE}, 82%, 80%)`, + green_300: `hsl(${GREEN_HUE}, 82%, 70%)`, + green_400: `hsl(${GREEN_HUE}, 82%, 60%)`, + green_500: `hsl(${GREEN_HUE}, 82%, 50%)`, + green_600: `hsl(${GREEN_HUE}, 82%, 42%)`, + green_700: `hsl(${GREEN_HUE}, 82%, 34%)`, + green_800: `hsl(${GREEN_HUE}, 82%, 26%)`, + green_900: `hsl(${GREEN_HUE}, 82%, 18%)`, + green_950: `hsl(${GREEN_HUE}, 82%, 10%)`, + green_975: `hsl(${GREEN_HUE}, 82%, 7%)`, - red_25: `#FFF5F6`, - red_50: `#FFF1F3`, - red_100: `#FFE4E8`, - red_200: `#FECDD6`, - red_300: `#FEA3B4`, - red_400: `#FD6F8E`, - red_500: `#F63D68`, - red_600: `#E31B54`, - red_700: `#C01048`, - red_800: `#A11043`, - red_900: `#89123E`, + red_25: `hsl(${RED_HUE}, 91%, 97%)`, + red_50: `hsl(${RED_HUE}, 91%, 95%)`, + red_100: `hsl(${RED_HUE}, 91%, 90%)`, + red_200: `hsl(${RED_HUE}, 91%, 80%)`, + red_300: `hsl(${RED_HUE}, 91%, 70%)`, + red_400: `hsl(${RED_HUE}, 91%, 60%)`, + red_500: `hsl(${RED_HUE}, 91%, 50%)`, + red_600: `hsl(${RED_HUE}, 91%, 42%)`, + red_700: `hsl(${RED_HUE}, 91%, 34%)`, + red_800: `hsl(${RED_HUE}, 91%, 26%)`, + red_900: `hsl(${RED_HUE}, 91%, 18%)`, + red_950: `hsl(${RED_HUE}, 91%, 10%)`, + red_975: `hsl(${RED_HUE}, 91%, 7%)`, } as const export const space = { diff --git a/src/components/Button.tsx b/src/components/Button.tsx index a37017decc..d2100f0b42 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -152,8 +152,8 @@ export function Button({ }) hoverStyles.push(a.border, { backgroundColor: light - ? t.palette.primary_100 - : t.palette.primary_900, + ? t.palette.primary_50 + : t.palette.primary_950, }) } else { baseStyles.push(a.border, { @@ -175,19 +175,19 @@ export function Button({ if (!disabled) { baseStyles.push({ backgroundColor: light - ? tokens.color.gray_200 - : tokens.color.gray_800, + ? tokens.color.gray_100 + : tokens.color.gray_900, }) hoverStyles.push({ backgroundColor: light - ? tokens.color.gray_300 - : tokens.color.gray_900, + ? tokens.color.gray_200 + : tokens.color.gray_950, }) } else { baseStyles.push({ backgroundColor: light ? tokens.color.gray_300 - : tokens.color.gray_900, + : tokens.color.gray_950, }) } } else if (variant === 'outline') { @@ -211,7 +211,7 @@ export function Button({ hoverStyles.push({ backgroundColor: light ? tokens.color.gray_100 - : tokens.color.gray_800, + : tokens.color.gray_900, }) } } @@ -219,14 +219,14 @@ export function Button({ if (variant === 'solid') { if (!disabled) { baseStyles.push({ - backgroundColor: t.palette.negative_500, + backgroundColor: t.palette.negative_400, }) hoverStyles.push({ - backgroundColor: t.palette.negative_600, + backgroundColor: t.palette.negative_500, }) } else { baseStyles.push({ - backgroundColor: t.palette.negative_700, + backgroundColor: t.palette.negative_600, }) } } else if (variant === 'outline') { @@ -236,10 +236,12 @@ export function Button({ if (!disabled) { baseStyles.push(a.border, { - borderColor: t.palette.negative_600, + borderColor: t.palette.negative_400, }) hoverStyles.push(a.border, { - backgroundColor: light ? t.palette.negative_50 : '#2D0614', // darker red + backgroundColor: light + ? t.palette.negative_50 + : t.palette.negative_975, }) } else { baseStyles.push(a.border, { @@ -252,7 +254,9 @@ export function Button({ if (!disabled) { baseStyles.push(t.atoms.bg) hoverStyles.push({ - backgroundColor: light ? t.palette.negative_50 : '#2D0614', // darker red + backgroundColor: light + ? t.palette.negative_100 + : t.palette.negative_950, }) } } @@ -437,15 +441,15 @@ export function useSharedButtonTextStyles() { } } else if (variant === 'outline') { if (!disabled) { - baseStyles.push({color: t.palette.negative_500}) + baseStyles.push({color: t.palette.negative_400}) } else { - baseStyles.push({color: t.palette.negative_500, opacity: 0.5}) + baseStyles.push({color: t.palette.negative_400, opacity: 0.5}) } } else if (variant === 'ghost') { if (!disabled) { - baseStyles.push({color: t.palette.negative_500}) + baseStyles.push({color: t.palette.negative_400}) } else { - baseStyles.push({color: t.palette.negative_500, opacity: 0.5}) + baseStyles.push({color: t.palette.negative_400, opacity: 0.5}) } } } else { diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx index 27169d2fe4..7115f61901 100644 --- a/src/components/Prompt.tsx +++ b/src/components/Prompt.tsx @@ -55,7 +55,7 @@ export function Title({children}: React.PropsWithChildren<{}>) { return (

+ style={[a.font_bold, t.atoms.text_contrast_700, a.pb_sm]}> {children}

) diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx index d5b6bcbf8c..00abc8a5d2 100644 --- a/src/components/forms/TextField.tsx +++ b/src/components/forms/TextField.tsx @@ -94,6 +94,7 @@ export function Root({children, isInvalid = false}: RootProps) { paddingVertical: 14, }, ]} + // onPressIn/out don't work on android web onPress={() => inputRef.current?.focus()} onHoverIn={onHoverIn} onHoverOut={onHoverOut}> @@ -214,7 +215,7 @@ export function createInput(Component: typeof TextInput) { a.absolute, a.inset_0, a.rounded_sm, - t.atoms.bg_contrast_50, + t.atoms.bg_contrast_25, {borderColor: 'transparent', borderWidth: 2}, ctx.hovered ? chromeHover : {}, ctx.focused ? chromeFocus : {}, diff --git a/src/components/forms/Toggle.tsx b/src/components/forms/Toggle.tsx index f653d115d4..f2ca0fd927 100644 --- a/src/components/forms/Toggle.tsx +++ b/src/components/forms/Toggle.tsx @@ -288,7 +288,8 @@ export function createSharedToggleStyles({ } else { if (hovered || focused) { baseHover.push({ - backgroundColor: t.palette.contrast_50, + backgroundColor: + t.name === 'light' ? t.palette.contrast_50 : t.palette.contrast_100, borderColor: t.palette.contrast_500, }) } @@ -313,8 +314,8 @@ export function createSharedToggleStyles({ if (disabled) { base.push({ - backgroundColor: t.palette.contrast_200, - borderColor: t.palette.contrast_300, + backgroundColor: t.palette.contrast_100, + borderColor: t.palette.contrast_400, }) } diff --git a/src/view/screens/Storybook/Palette.tsx b/src/view/screens/Storybook/Palette.tsx index 1844f8d900..b521fe8607 100644 --- a/src/view/screens/Storybook/Palette.tsx +++ b/src/view/screens/Storybook/Palette.tsx @@ -8,6 +8,9 @@ export function Palette() { return ( + + + + @@ -143,6 +164,18 @@ export function Palette() { {height: 60, backgroundColor: tokens.color.blue_900}, ]} /> + + + + + + )