Skip to content

Commit

Permalink
Adjust colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@quiple
quiple committed Aug 9, 2024
1 parent ccf98d2 commit fb118f3
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 64 deletions.
52 changes: 26 additions & 26 deletions src/alf/themes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,19 +186,19 @@ export function createThemes({
white: color.gray_0,
black: color.trueBlack,

contrast_25: color.gray_1000,
contrast_50: color.gray_975,
contrast_100: color.gray_950,
contrast_200: color.gray_900,
contrast_300: color.gray_800,
contrast_400: color.gray_700,
contrast_500: color.gray_600,
contrast_600: color.gray_500,
contrast_700: color.gray_400,
contrast_800: color.gray_300,
contrast_900: color.gray_200,
contrast_950: color.gray_100,
contrast_975: color.gray_50,
contrast_25: color.gray_950,
contrast_50: color.gray_900,
contrast_100: color.gray_800,
contrast_200: color.gray_700,
contrast_300: color.gray_600,
contrast_400: color.gray_500,
contrast_500: color.gray_400,
contrast_600: color.gray_300,
contrast_700: color.gray_200,
contrast_800: color.gray_100,
contrast_900: color.gray_50,
contrast_950: color.gray_25,
contrast_975: color.gray_0,

primary_25: color.primary_975,
primary_50: color.primary_950,
Expand Down Expand Up @@ -247,19 +247,19 @@ export function createThemes({
...darkPalette,
black: `hsl(${hues.primary}, 28%, ${dimScale[0]}%)`,

contrast_25: `hsl(${hues.primary}, 28%, ${dimScale[1]}%)`,
contrast_50: `hsl(${hues.primary}, 28%, ${dimScale[2]}%)`,
contrast_100: `hsl(${hues.primary}, 28%, ${dimScale[3]}%)`,
contrast_200: `hsl(${hues.primary}, 28%, ${dimScale[4]}%)`,
contrast_300: `hsl(${hues.primary}, 24%, ${dimScale[5]}%)`,
contrast_400: `hsl(${hues.primary}, 24%, ${dimScale[6]}%)`,
contrast_500: `hsl(${hues.primary}, 20%, ${dimScale[7]}%)`,
contrast_600: `hsl(${hues.primary}, 20%, ${dimScale[8]}%)`,
contrast_700: `hsl(${hues.primary}, 20%, ${dimScale[9]}%)`,
contrast_800: `hsl(${hues.primary}, 20%, ${dimScale[10]}%)`,
contrast_900: `hsl(${hues.primary}, 20%, ${dimScale[11]}%)`,
contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`,
contrast_975: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`,
contrast_25: `hsl(${hues.primary}, 28%, ${dimScale[2]}%)`,
contrast_50: `hsl(${hues.primary}, 28%, ${dimScale[3]}%)`,
contrast_100: `hsl(${hues.primary}, 28%, ${dimScale[4]}%)`,
contrast_200: `hsl(${hues.primary}, 24%, ${dimScale[5]}%)`,
contrast_300: `hsl(${hues.primary}, 24%, ${dimScale[6]}%)`,
contrast_400: `hsl(${hues.primary}, 20%, ${dimScale[7]}%)`,
contrast_500: `hsl(${hues.primary}, 20%, ${dimScale[8]}%)`,
contrast_600: `hsl(${hues.primary}, 20%, ${dimScale[9]}%)`,
contrast_700: `hsl(${hues.primary}, 20%, ${dimScale[10]}%)`,
contrast_800: `hsl(${hues.primary}, 20%, ${dimScale[11]}%)`,
contrast_900: `hsl(${hues.primary}, 20%, ${dimScale[12]}%)`,
contrast_950: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`,
contrast_975: `hsl(${hues.primary}, 20%, ${dimScale[14]}%)`,

primary_25: `hsl(${hues.primary}, 50%, ${dimScale[1]}%)`,
primary_50: `hsl(${hues.primary}, 60%, ${dimScale[2]}%)`,
Expand Down
24 changes: 3 additions & 21 deletions src/components/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,28 +202,10 @@ export const Button = React.forwardRef<View, ButtonProps>(
} else if (color === 'secondary') {
if (variant === 'solid') {
if (!disabled) {
baseStyles.push({
backgroundColor: select(t.name, {
light: t.palette.contrast_25,
dim: t.palette.contrast_100,
dark: t.palette.contrast_100,
}),
})
hoverStyles.push({
backgroundColor: select(t.name, {
light: t.palette.contrast_50,
dim: t.palette.contrast_200,
dark: t.palette.contrast_200,
}),
})
baseStyles.push(t.atoms.bg_contrast_25)
hoverStyles.push(t.atoms.bg_contrast_50)
} else {
baseStyles.push({
backgroundColor: select(t.name, {
light: t.palette.contrast_100,
dim: t.palette.contrast_25,
dark: t.palette.contrast_25,
}),
})
baseStyles.push(t.atoms.bg_contrast_100)
}
} else if (variant === 'outline') {
baseStyles.push(a.border, t.atoms.bg, {
Expand Down
29 changes: 15 additions & 14 deletions src/view/screens/Settings/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,7 @@ export function SettingsScreen({}: Props) {
const queryClient = useQueryClient()
const pal = usePalette('default')
const {_} = useLingui()
const t = useTheme()
const setMinimalShellMode = useSetMinimalShellMode()
const inAppBrowserPref = useInAppBrowser()
const setUseInAppBrowser = useSetInAppBrowser()
Expand Down Expand Up @@ -412,7 +413,7 @@ export function SettingsScreen({}: Props) {
accessibilityRole="button"
accessibilityLabel={_(msg`Add account`)}
accessibilityHint={_(msg`Create a new Bluesky account`)}>
<View style={[styles.iconContainer, pal.btn]}>
<View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
<FontAwesomeIcon
icon="plus"
style={pal.text as FontAwesomeIconStyle}
Expand Down Expand Up @@ -442,7 +443,7 @@ export function SettingsScreen({}: Props) {
accessibilityRole="button"
accessibilityLabel={_(msg`Accessibility settings`)}
accessibilityHint={_(msg`Opens accessibility settings`)}>
<View style={[styles.iconContainer, pal.btn]}>
<View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
<FontAwesomeIcon
icon="universal-access"
style={pal.text as FontAwesomeIconStyle}
Expand All @@ -463,7 +464,7 @@ export function SettingsScreen({}: Props) {
accessibilityRole="button"
accessibilityLabel={_(msg`Appearance settings`)}
accessibilityHint={_(msg`Opens appearance settings`)}>
<View style={[styles.iconContainer, pal.btn]}>
<View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
<FontAwesomeIcon
icon="paint-roller"
style={pal.text as FontAwesomeIconStyle}
Expand All @@ -484,7 +485,7 @@ export function SettingsScreen({}: Props) {
accessibilityRole="button"
accessibilityLabel={_(msg`Language settings`)}
accessibilityHint={_(msg`Opens configurable language settings`)}>
<View style={[styles.iconContainer, pal.btn]}>
<View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
<FontAwesomeIcon
icon="language"
style={pal.text as FontAwesomeIconStyle}
Expand All @@ -509,7 +510,7 @@ export function SettingsScreen({}: Props) {
accessibilityRole="button"
accessibilityLabel={_(msg`Moderation settings`)}
accessibilityHint={_(msg`Opens moderation settings`)}>
<View style={[styles.iconContainer, pal.btn]}>
<View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
<HandIcon style={pal.text} size={18} strokeWidth={6} />
</View>
<Text type="lg" style={pal.text}>
Expand All @@ -527,7 +528,7 @@ export function SettingsScreen({}: Props) {
accessibilityRole="button"
accessibilityLabel={_(msg`Following feed preferences`)}
accessibilityHint={_(msg`Opens the Following feed preferences`)}>
<View style={[styles.iconContainer, pal.btn]}>
<View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
<FontAwesomeIcon
icon="sliders"
style={pal.text as FontAwesomeIconStyle}
Expand All @@ -548,7 +549,7 @@ export function SettingsScreen({}: Props) {
accessibilityRole="button"
accessibilityLabel={_(msg`Thread preferences`)}
accessibilityHint={_(msg`Opens the threads preferences`)}>
<View style={[styles.iconContainer, pal.btn]}>
<View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
<FontAwesomeIcon
icon={['far', 'comments']}
style={pal.text as FontAwesomeIconStyle}
Expand All @@ -570,7 +571,7 @@ export function SettingsScreen({}: Props) {
accessibilityRole="button"
accessibilityLabel={_(msg`My saved feeds`)}
accessibilityHint={_(msg`Opens screen with all saved feeds`)}>
<View style={[styles.iconContainer, pal.btn]}>
<View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
<HashtagIcon style={pal.text} size={18} strokeWidth={3} />
</View>
<Text type="lg" style={pal.text}>
Expand All @@ -592,7 +593,7 @@ export function SettingsScreen({}: Props) {
accessibilityRole="button"
accessibilityLabel={_(msg`Chat settings`)}
accessibilityHint={_(msg`Opens chat settings`)}>
<View style={[styles.iconContainer, pal.btn]}>
<View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
<FontAwesomeIcon
icon={['far', 'comment-dots']}
style={pal.text as FontAwesomeIconStyle}
Expand Down Expand Up @@ -624,7 +625,7 @@ export function SettingsScreen({}: Props) {
accessibilityRole="button"
accessibilityLabel={_(msg`External media settings`)}
accessibilityHint={_(msg`Opens external embeds settings`)}>
<View style={[styles.iconContainer, pal.btn]}>
<View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
<FontAwesomeIcon
icon={['far', 'circle-play']}
style={pal.text as FontAwesomeIconStyle}
Expand All @@ -651,7 +652,7 @@ export function SettingsScreen({}: Props) {
accessibilityRole="button"
accessibilityLabel={_(msg`App password settings`)}
accessibilityHint={_(msg`Opens the app password settings`)}>
<View style={[styles.iconContainer, pal.btn]}>
<View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
<FontAwesomeIcon
icon="lock"
style={pal.text as FontAwesomeIconStyle}
Expand All @@ -674,7 +675,7 @@ export function SettingsScreen({}: Props) {
accessibilityHint={_(
msg`Opens modal for choosing a new Bluesky handle`,
)}>
<View style={[styles.iconContainer, pal.btn]}>
<View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
<FontAwesomeIcon
icon="at"
style={pal.text as FontAwesomeIconStyle}
Expand Down Expand Up @@ -719,7 +720,7 @@ export function SettingsScreen({}: Props) {
accessibilityHint={_(
msg`Opens modal for changing your Bluesky password`,
)}>
<View style={[styles.iconContainer, pal.btn]}>
<View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
<FontAwesomeIcon
icon="lock"
style={pal.text as FontAwesomeIconStyle}
Expand All @@ -742,7 +743,7 @@ export function SettingsScreen({}: Props) {
accessibilityHint={_(
msg`Opens modal for downloading your Bluesky account data (repository)`,
)}>
<View style={[styles.iconContainer, pal.btn]}>
<View style={[styles.iconContainer, t.atoms.bg_contrast_25]}>
<FontAwesomeIcon
icon="download"
style={pal.text as FontAwesomeIconStyle}
Expand Down
6 changes: 3 additions & 3 deletions src/view/shell/desktop/Search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import {precacheProfile} from 'state/queries/profile'
import {Link} from '#/view/com/util/Link'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {Text} from 'view/com/util/text/Text'
import {atoms as a} from '#/alf'
import {atoms as a, useTheme} from '#/alf'

let SearchLinkCard = ({
label,
Expand Down Expand Up @@ -149,6 +149,7 @@ export {SearchProfileCard}

export function DesktopSearch() {
const {_} = useLingui()
const t = useTheme()
const pal = usePalette('default')
const navigation = useNavigation<NavigationProp>()
const [isActive, setIsActive] = React.useState<boolean>(false)
Expand Down Expand Up @@ -183,8 +184,7 @@ export function DesktopSearch() {

return (
<View style={[styles.container, pal.view]}>
<View
style={[{backgroundColor: pal.colors.backgroundLight}, styles.search]}>
<View style={[t.atoms.bg_contrast_25, styles.search]}>
<View style={[styles.inputContainer]}>
<MagnifyingGlassIcon2
size={18}
Expand Down

0 comments on commit fb118f3

Please sign in to comment.