Bluesky app fork with some witchin' additions 💫
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
+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
+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,