diff --git a/src/alf/index.tsx b/src/alf/index.tsx index 7afa0b37f..e3ca894e1 100644 --- a/src/alf/index.tsx +++ b/src/alf/index.tsx @@ -14,6 +14,7 @@ import { blackskyscheme, blueskyscheme, catppuccinscheme, + cyanscheme, deerscheme, evergardenscheme, kittyscheme, @@ -189,6 +190,9 @@ export function useScheme(): SchemeType { case 'evergarden': currentScheme = evergardenscheme break + case 'cyan base': + currentScheme = cyanscheme + break case 'material3': currentScheme = getMaterial3Colors(palette).scheme break diff --git a/src/alf/themes.ts b/src/alf/themes.ts index 4bbb028a6..540c59f27 100644 --- a/src/alf/themes.ts +++ b/src/alf/themes.ts @@ -643,6 +643,152 @@ export const blueskyscheme = { dim: BLUESKY_THEMES.dim, } +export const CYAN_PALETTE: Palette = { + white: STATIC_VALUES.white, + black: STATIC_VALUES.black, + pink: STATIC_VALUES.pink, + yellow: STATIC_VALUES.yellow, + like: STATIC_VALUES.pink, + + contrast_0: '#FFFFFF', + contrast_25: '#F9FAFB', + contrast_50: '#EFF2F6', + contrast_100: '#DCE2EA', + contrast_200: '#C0CAD8', + contrast_300: '#A5B2C5', + contrast_400: '#8798B0', + contrast_500: '#667B99', + contrast_600: '#526580', + contrast_700: '#405168', + contrast_800: '#313F54', + contrast_900: '#232E3E', + contrast_950: '#19222E', + contrast_975: '#111822', + contrast_1000: '#000000', + + primary_25: `hsl(174, 55%, 97%)`, + primary_50: `hsl(174, 55%, 95%)`, + primary_100: `hsl(174, 55%, 90%)`, + primary_200: `hsl(174, 55%, 80%)`, + primary_300: `hsl(174, 60%, 70%)`, + primary_400: `hsl(174, 72%, 58%)`, + primary_500: `hsl(174, 83%, 38%)`, + primary_600: `hsl(174, 78%, 32%)`, + primary_700: `hsl(174, 72%, 26%)`, + primary_800: `hsl(174, 66%, 20%)`, + primary_900: `hsl(174, 60%, 15%)`, + primary_950: `hsl(174, 55%, 10%)`, + primary_975: `hsl(174, 55%, 6%)`, + + positive_25: '#ECFEF5', + positive_50: '#D3FDE8', + positive_100: '#A3FACF', + positive_200: '#6AF6B0', + positive_300: '#2CF28F', + positive_400: '#0DD370', + positive_500: '#09B35E', + positive_600: '#04904A', + positive_700: '#036D38', + positive_800: '#04522B', + positive_900: '#033F21', + positive_950: '#032A17', + positive_975: '#021D0F', + + negative_25: '#FFF5F7', + negative_50: '#FEE7EC', + negative_100: '#FDD3DD', + negative_200: '#FBBBCA', + negative_300: '#F891A9', + negative_400: '#F65A7F', + negative_500: '#E91646', + negative_600: '#CA123D', + negative_700: '#A71134', + negative_800: '#7F0B26', + negative_900: '#5F071C', + negative_950: '#430413', + negative_975: '#30030D', +} + +export const CYAN_SUBDUED_PALETTE: Palette = { + white: STATIC_VALUES.white, + black: STATIC_VALUES.black, + pink: STATIC_VALUES.pink, + yellow: STATIC_VALUES.yellow, + like: STATIC_VALUES.pink, + + contrast_0: '#FFFFFF', + contrast_25: '#F9FAFB', + contrast_50: '#F2F4F8', + contrast_100: '#E2E7EE', + contrast_200: '#C3CDDA', + contrast_300: '#ABB8C9', + contrast_400: '#8D9DB4', + contrast_500: '#6F839F', + contrast_600: '#586C89', + contrast_700: '#485B75', + contrast_800: '#394A58', + contrast_900: '#2C3D4C', + contrast_950: '#22323D', + contrast_975: '#1C2B35', + contrast_1000: '#15232C', + + primary_25: `hsl(174, 35%, 97%)`, + primary_50: `hsl(174, 35%, 95%)`, + primary_100: `hsl(174, 35%, 90%)`, + primary_200: `hsl(174, 35%, 80%)`, + primary_300: `hsl(174, 40%, 70%)`, + primary_400: `hsl(174, 50%, 58%)`, + primary_500: `hsl(174, 58%, 38%)`, + primary_600: `hsl(174, 54%, 32%)`, + primary_700: `hsl(174, 50%, 26%)`, + primary_800: `hsl(174, 46%, 20%)`, + primary_900: `hsl(174, 42%, 15%)`, + primary_950: `hsl(174, 40%, 10%)`, + primary_975: `hsl(174, 40%, 6%)`, + + positive_25: '#ECFEF5', + positive_50: '#D8FDEB', + positive_100: '#A8FAD1', + positive_200: '#6FF6B3', + positive_300: '#31F291', + positive_400: '#0EDD75', + positive_500: '#0AC266', + positive_600: '#049F52', + positive_700: '#038142', + positive_800: '#056636', + positive_900: '#04522B', + positive_950: '#053D21', + positive_975: '#052917', + + negative_25: '#FFF5F7', + negative_50: '#FEEBEF', + negative_100: '#FDD8E1', + negative_200: '#FCC0CE', + negative_300: '#F99AB0', + negative_400: '#F76486', + negative_500: '#EB2452', + negative_600: '#D81341', + negative_700: '#BA1239', + negative_800: '#910D2C', + negative_900: '#6F0B22', + negative_950: '#500B1C', + negative_975: '#3E0915', +} + +const CYAN_THEMES = createThemes({ + defaultPalette: CYAN_PALETTE, + subduedPalette: CYAN_SUBDUED_PALETTE, +}) + +export const cyanscheme = { + lightPalette: CYAN_THEMES.light.palette, + darkPalette: CYAN_THEMES.dark.palette, + dimPalette: CYAN_THEMES.dim.palette, + light: CYAN_THEMES.light, + dark: CYAN_THEMES.dark, + dim: CYAN_THEMES.dim, +} + export const DEER_PALETTE: Palette = { white: `hsl(${DEER_BLUE_HUE}, 20%, ${DEER_defaultScale[14]}%)`, black: STATIC_VALUES.black, diff --git a/src/screens/Settings/AppearanceSettings/shared.tsx b/src/screens/Settings/AppearanceSettings/shared.tsx index 0ac8cebaf..03dcd0c01 100644 --- a/src/screens/Settings/AppearanceSettings/shared.tsx +++ b/src/screens/Settings/AppearanceSettings/shared.tsx @@ -9,6 +9,7 @@ import { BLACKSKY_PALETTE, BLUESKY_PALETTE, CATPPUCIN_PALETTE, + CYAN_PALETTE, DEER_PALETTE, DEFAULT_PALETTE, EVERGARDEN_PALETTE, @@ -34,6 +35,7 @@ export type ColorSchemeName = | 'reddwarf' | 'catppuccin' | 'evergarden' + | 'cyan base' | 'material3' export type ColorSchemeOption = { @@ -97,6 +99,11 @@ export function useColorSchemes() { label: _(msg`Evergarden`), primary: EVERGARDEN_PALETTE.primary_500, }, + { + name: 'cyan base', + label: _(msg`Cyan Base`), + primary: CYAN_PALETTE.primary_500, + }, { name: 'material3', label: _(msg`Material You`), diff --git a/src/state/persisted/schema.ts b/src/state/persisted/schema.ts index 29c407045..62645fe55 100644 --- a/src/state/persisted/schema.ts +++ b/src/state/persisted/schema.ts @@ -63,6 +63,7 @@ const schema = z.object({ 'reddwarf', 'catppuccin', 'evergarden', + 'cyan base', 'material3', ]), hue: z.number(),