acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Expand color palette

Browse Source
This commit is contained in:
Eric Bailey
2024-01-18 18:30:25 -06:00
parent 34c9eece6f
commit 8532e8145d
7 changed files with 246 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/alf/themes.ts
+102 -77
View File
@@ -9,8 +9,8 @@ export type ReadonlyPalette = typeof lightPalette
export type Palette = Mutable<ReadonlyPalette>
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,
src/alf/tokens.ts
+58 -46
View File
@@ -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 = {
src/components/Button.tsx
+22 -18
View File
@@ -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 {
src/components/Prompt.tsx
+1 -1
View File
@@ -55,7 +55,7 @@ export function Title({children}: React.PropsWithChildren<{}>) {
return (
<H4
nativeID={titleId}
style={[a.font_bold, t.atoms.text_contrast_600, a.pb_sm]}>
style={[a.font_bold, t.atoms.text_contrast_700, a.pb_sm]}>
{children}
</H4>
)
src/components/forms/TextField.tsx
+2 -1
View File
@@ -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 : {},
src/components/forms/Toggle.tsx
+4 -3
View File
@@ -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,
})
}
src/view/screens/Storybook/Palette.tsx
+57
View File
@@ -8,6 +8,9 @@ export function Palette() {
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,
@@ -74,6 +77,24 @@ export function Palette() {
{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>
<View style={[a.flex_row, a.gap_md]}>
@@ -143,6 +164,18 @@ export function Palette() {
{height: 60, backgroundColor: tokens.color.blue_900},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_950},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.blue_975},
]}
/>
</View>
<View style={[a.flex_row, a.gap_md]}>
<View
@@ -211,6 +244,18 @@ export function Palette() {
{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
@@ -273,6 +318,18 @@ export function Palette() {
{height: 60, backgroundColor: tokens.color.red_900},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_950},
]}
/>
<View
style={[
a.flex_1,
{height: 60, backgroundColor: tokens.color.red_975},
]}
/>
</View>
</View>
)