Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

update: refine theme contrast scale

Includes:
- update: adjust default theme contrast colors for softer borders/hovers
- update: soften light grays and add warmth to dark mode backgrounds
- fix: restore visible hover states for Blacksky and Red Dwarf light mode themes
- feat: add cyan base color theme
- update: tone down dark mode warmth from overly brown to neutral-warm grey
- update: refine dark mode contrast scale to warm burgundy-charcoal (patch)

authored by ellioth.co and committed by

xan.lol aed2c0a2 ea831047

+188 -30
+4
src/alf/index.tsx
··· 14 14 blackskyscheme, 15 15 blueskyscheme, 16 16 catppuccinscheme, 17 + cyanscheme, 17 18 deerscheme, 18 19 evergardenscheme, 19 20 kittyscheme, ··· 188 189 break 189 190 case 'evergarden': 190 191 currentScheme = evergardenscheme 192 + break 193 + case 'cyan base': 194 + currentScheme = cyanscheme 191 195 break 192 196 case 'material3': 193 197 currentScheme = getMaterial3Colors(palette).scheme
+176 -30
src/alf/themes.ts
··· 106 106 yellow: STATIC_VALUES.yellow, 107 107 108 108 contrast_0: '#FEFBFB', 109 - contrast_25: '#ECE9E9', 110 - contrast_50: '#DBD8D8', 111 - contrast_100: '#C9C7C7', 112 - contrast_200: '#B8B6B6', 113 - contrast_300: '#A8A5A5', 114 - contrast_400: '#979595', 115 - contrast_500: '#878585', 116 - contrast_600: '#787575', 117 - contrast_700: '#686666', 118 - contrast_800: '#595757', 119 - contrast_900: '#4B4848', 120 - contrast_950: '#3D3A3A', 121 - contrast_975: '#1b1a1aff', 122 - contrast_1000: '#000000ff', 109 + contrast_25: '#F5F2F1', 110 + contrast_50: '#EDE9E8', 111 + contrast_100: '#E0DBD9', 112 + contrast_200: '#D0CBC9', 113 + contrast_300: '#C0BBB9', 114 + contrast_400: '#B0ABA9', 115 + contrast_500: '#A09B99', 116 + contrast_600: '#88736c', 117 + contrast_700: '#755f57', 118 + contrast_800: '#624c43', 119 + contrast_900: '#4f3a31', 120 + contrast_950: '#3e2b21', 121 + contrast_975: '#2a1a15', 122 + contrast_1000: '#150b08', 123 123 124 124 primary_25: `hsl(5, 30%, 97%)`, 125 125 primary_50: `hsl(5, 30%, 95%)`, ··· 172 172 yellow: STATIC_VALUES.yellow, 173 173 174 174 contrast_0: '#FEFBFB', 175 - contrast_25: '#ECE9E9', 176 - contrast_50: '#DBD8D8', 177 - contrast_100: '#C9C7C7', 178 - contrast_200: '#B8B6B6', 179 - contrast_300: '#A8A5A5', 180 - contrast_400: '#979595', 181 - contrast_500: '#878585', 182 - contrast_600: '#787575', 183 - contrast_700: '#686666', 184 - contrast_800: '#595757', 185 - contrast_900: '#4B4848', 186 - contrast_950: '#3D3A3A', 187 - contrast_975: '#2F2D2D', 188 - contrast_1000: '#222020', 175 + contrast_25: '#F5F2F1', 176 + contrast_50: '#EDE9E8', 177 + contrast_100: '#E0DBD9', 178 + contrast_200: '#D0CBC9', 179 + contrast_300: '#C0BBB9', 180 + contrast_400: '#B0ABA9', 181 + contrast_500: '#A09B99', 182 + contrast_600: '#88736c', 183 + contrast_700: '#755f57', 184 + contrast_800: '#624c43', 185 + contrast_900: '#4f3a31', 186 + contrast_950: '#3e2b21', 187 + contrast_975: '#2f201f', 188 + contrast_1000: '#281c1c', 189 189 190 190 primary_25: `hsl(5, 30%, 97%)`, 191 191 primary_50: `hsl(5, 30%, 95%)`, ··· 346 346 347 347 // neutrals 348 348 contrast_0: BLACKSKY_BRAND.white, 349 - contrast_25: BLACKSKY_BRAND.white, // Very Light 349 + contrast_25: '#F4F6F5', // Very Light 350 350 contrast_50: '#F0F2F2', 351 351 contrast_100: '#E6E8E8', 352 352 contrast_200: '#D1D3D3', ··· 643 643 dim: BLUESKY_THEMES.dim, 644 644 } 645 645 646 + export const CYAN_PALETTE: Palette = { 647 + white: STATIC_VALUES.white, 648 + black: STATIC_VALUES.black, 649 + pink: STATIC_VALUES.pink, 650 + yellow: STATIC_VALUES.yellow, 651 + like: STATIC_VALUES.pink, 652 + 653 + contrast_0: '#FFFFFF', 654 + contrast_25: '#F9FAFB', 655 + contrast_50: '#EFF2F6', 656 + contrast_100: '#DCE2EA', 657 + contrast_200: '#C0CAD8', 658 + contrast_300: '#A5B2C5', 659 + contrast_400: '#8798B0', 660 + contrast_500: '#667B99', 661 + contrast_600: '#526580', 662 + contrast_700: '#405168', 663 + contrast_800: '#313F54', 664 + contrast_900: '#232E3E', 665 + contrast_950: '#19222E', 666 + contrast_975: '#111822', 667 + contrast_1000: '#000000', 668 + 669 + primary_25: `hsl(174, 55%, 97%)`, 670 + primary_50: `hsl(174, 55%, 95%)`, 671 + primary_100: `hsl(174, 55%, 90%)`, 672 + primary_200: `hsl(174, 55%, 80%)`, 673 + primary_300: `hsl(174, 60%, 70%)`, 674 + primary_400: `hsl(174, 72%, 58%)`, 675 + primary_500: `hsl(174, 83%, 38%)`, 676 + primary_600: `hsl(174, 78%, 32%)`, 677 + primary_700: `hsl(174, 72%, 26%)`, 678 + primary_800: `hsl(174, 66%, 20%)`, 679 + primary_900: `hsl(174, 60%, 15%)`, 680 + primary_950: `hsl(174, 55%, 10%)`, 681 + primary_975: `hsl(174, 55%, 6%)`, 682 + 683 + positive_25: '#ECFEF5', 684 + positive_50: '#D3FDE8', 685 + positive_100: '#A3FACF', 686 + positive_200: '#6AF6B0', 687 + positive_300: '#2CF28F', 688 + positive_400: '#0DD370', 689 + positive_500: '#09B35E', 690 + positive_600: '#04904A', 691 + positive_700: '#036D38', 692 + positive_800: '#04522B', 693 + positive_900: '#033F21', 694 + positive_950: '#032A17', 695 + positive_975: '#021D0F', 696 + 697 + negative_25: '#FFF5F7', 698 + negative_50: '#FEE7EC', 699 + negative_100: '#FDD3DD', 700 + negative_200: '#FBBBCA', 701 + negative_300: '#F891A9', 702 + negative_400: '#F65A7F', 703 + negative_500: '#E91646', 704 + negative_600: '#CA123D', 705 + negative_700: '#A71134', 706 + negative_800: '#7F0B26', 707 + negative_900: '#5F071C', 708 + negative_950: '#430413', 709 + negative_975: '#30030D', 710 + } 711 + 712 + export const CYAN_SUBDUED_PALETTE: Palette = { 713 + white: STATIC_VALUES.white, 714 + black: STATIC_VALUES.black, 715 + pink: STATIC_VALUES.pink, 716 + yellow: STATIC_VALUES.yellow, 717 + like: STATIC_VALUES.pink, 718 + 719 + contrast_0: '#FFFFFF', 720 + contrast_25: '#F9FAFB', 721 + contrast_50: '#F2F4F8', 722 + contrast_100: '#E2E7EE', 723 + contrast_200: '#C3CDDA', 724 + contrast_300: '#ABB8C9', 725 + contrast_400: '#8D9DB4', 726 + contrast_500: '#6F839F', 727 + contrast_600: '#586C89', 728 + contrast_700: '#485B75', 729 + contrast_800: '#394A58', 730 + contrast_900: '#2C3D4C', 731 + contrast_950: '#22323D', 732 + contrast_975: '#1C2B35', 733 + contrast_1000: '#15232C', 734 + 735 + primary_25: `hsl(174, 35%, 97%)`, 736 + primary_50: `hsl(174, 35%, 95%)`, 737 + primary_100: `hsl(174, 35%, 90%)`, 738 + primary_200: `hsl(174, 35%, 80%)`, 739 + primary_300: `hsl(174, 40%, 70%)`, 740 + primary_400: `hsl(174, 50%, 58%)`, 741 + primary_500: `hsl(174, 58%, 38%)`, 742 + primary_600: `hsl(174, 54%, 32%)`, 743 + primary_700: `hsl(174, 50%, 26%)`, 744 + primary_800: `hsl(174, 46%, 20%)`, 745 + primary_900: `hsl(174, 42%, 15%)`, 746 + primary_950: `hsl(174, 40%, 10%)`, 747 + primary_975: `hsl(174, 40%, 6%)`, 748 + 749 + positive_25: '#ECFEF5', 750 + positive_50: '#D8FDEB', 751 + positive_100: '#A8FAD1', 752 + positive_200: '#6FF6B3', 753 + positive_300: '#31F291', 754 + positive_400: '#0EDD75', 755 + positive_500: '#0AC266', 756 + positive_600: '#049F52', 757 + positive_700: '#038142', 758 + positive_800: '#056636', 759 + positive_900: '#04522B', 760 + positive_950: '#053D21', 761 + positive_975: '#052917', 762 + 763 + negative_25: '#FFF5F7', 764 + negative_50: '#FEEBEF', 765 + negative_100: '#FDD8E1', 766 + negative_200: '#FCC0CE', 767 + negative_300: '#F99AB0', 768 + negative_400: '#F76486', 769 + negative_500: '#EB2452', 770 + negative_600: '#D81341', 771 + negative_700: '#BA1239', 772 + negative_800: '#910D2C', 773 + negative_900: '#6F0B22', 774 + negative_950: '#500B1C', 775 + negative_975: '#3E0915', 776 + } 777 + 778 + const CYAN_THEMES = createThemes({ 779 + defaultPalette: CYAN_PALETTE, 780 + subduedPalette: CYAN_SUBDUED_PALETTE, 781 + }) 782 + 783 + export const cyanscheme = { 784 + lightPalette: CYAN_THEMES.light.palette, 785 + darkPalette: CYAN_THEMES.dark.palette, 786 + dimPalette: CYAN_THEMES.dim.palette, 787 + light: CYAN_THEMES.light, 788 + dark: CYAN_THEMES.dark, 789 + dim: CYAN_THEMES.dim, 790 + } 791 + 646 792 export const DEER_PALETTE: Palette = { 647 793 white: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[14]}%)`, 648 794 black: STATIC_VALUES.black, ··· 1032 1178 yellow: STATIC_VALUES.yellow, 1033 1179 1034 1180 contrast_0: REDDWARF_TAILWIND_ATOMS.color_gray_50, 1035 - contrast_25: REDDWARF_TAILWIND_ATOMS.color_gray_50, 1181 + contrast_25: '#FFF5F2', 1036 1182 contrast_50: REDDWARF_TAILWIND_ATOMS.color_gray_100, 1037 1183 contrast_100: REDDWARF_TAILWIND_ATOMS.color_gray_200, 1038 1184 contrast_200: REDDWARF_TAILWIND_ATOMS.color_gray_200,
+7
src/screens/Settings/AppearanceSettings/shared.tsx
··· 9 9 BLACKSKY_PALETTE, 10 10 BLUESKY_PALETTE, 11 11 CATPPUCIN_PALETTE, 12 + CYAN_PALETTE, 12 13 DEER_PALETTE, 13 14 DEFAULT_PALETTE, 14 15 EVERGARDEN_PALETTE, ··· 34 35 | 'reddwarf' 35 36 | 'catppuccin' 36 37 | 'evergarden' 38 + | 'cyan base' 37 39 | 'material3' 38 40 39 41 export type ColorSchemeOption = { ··· 96 98 name: 'evergarden', 97 99 label: _(msg`Evergarden`), 98 100 primary: EVERGARDEN_PALETTE.primary_500, 101 + }, 102 + { 103 + name: 'cyan base', 104 + label: _(msg`Cyan Base`), 105 + primary: CYAN_PALETTE.primary_500, 99 106 }, 100 107 { 101 108 name: 'material3',
+1
src/state/persisted/schema.ts
··· 63 63 'reddwarf', 64 64 'catppuccin', 65 65 'evergarden', 66 + 'cyan base', 66 67 'material3', 67 68 ]), 68 69 hue: z.number(),