diff --git a/src/alf/index.tsx b/src/alf/index.tsx index ca24bd786..fd6b349f7 100644 --- a/src/alf/index.tsx +++ b/src/alf/index.tsx @@ -13,6 +13,7 @@ import { import { blackskyscheme, blueskyscheme, + catppuccinscheme, deerscheme, kittyscheme, type Palette, @@ -155,6 +156,8 @@ export function selectScheme(colorScheme: string | undefined): SchemeType { return kittyscheme case 'reddwarf': return reddwarfscheme + case 'catppuccin': + return catppuccinscheme default: return themes } diff --git a/src/alf/themes.ts b/src/alf/themes.ts index bdd074da2..ee43b19a4 100644 --- a/src/alf/themes.ts +++ b/src/alf/themes.ts @@ -1095,6 +1095,152 @@ export const reddwarfscheme = { dim: REDDWARF_THEMES.dim, } +export const CATPPUCIN_PALETTE: Palette = { + white: STATIC_VALUES.white, + black: STATIC_VALUES.black, + pink: STATIC_VALUES.pink, + yellow: STATIC_VALUES.yellow, + like: STATIC_VALUES.pink, + + contrast_0: '#EFF1F5', + contrast_25: '#D3D7DE', + contrast_50: '#E6E9EF', + contrast_100: '#ccd0da', + contrast_200: '#bcc0cc', + contrast_300: '#acb0be', + contrast_400: '#9ca0b0', + contrast_500: '#8c8fa1', + contrast_600: '#7c7f93', + contrast_700: '#585b70', + contrast_800: '#45475a', + contrast_900: '#313244', + contrast_950: '#181825', + contrast_975: '#11111b', + contrast_1000: '#1e1e2e', + + primary_25: `hsl(266, 30%, 97%)`, + primary_50: `hsl(266, 30%, 95%)`, + primary_100: `hsl(266, 30%, 90%)`, + primary_200: `hsl(266, 42%, 80%)`, + primary_300: `hsl(266, 54%, 70%)`, + primary_400: `hsl(266, 65%, 58%)`, + primary_500: `hsl(266, 75%, 58%)`, + primary_600: `hsl(266, 68%, 38%)`, + primary_700: `hsl(266, 50%, 32%)`, + primary_800: `hsl(266, 42%, 25%)`, + primary_900: `hsl(266, 45%, 18%)`, + primary_950: `hsl(266, 48%, 10%)`, + primary_975: `hsl(266, 50%, 7%)`, + + 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 CATPPUCIN_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: '#EFF1F5', + contrast_25: '#D3D7DE', + contrast_50: '#E6E9EF', + contrast_100: '#ccd0da', + contrast_200: '#bcc0cc', + contrast_300: '#acb0be', + contrast_400: '#939ab7', + contrast_500: '#8087a2', + contrast_600: '#6e738d', + contrast_700: '#5b6078', + contrast_800: '#494d64', + contrast_900: '#363a4f', + contrast_950: '#1e2030', + contrast_975: '#181926', + contrast_1000: '#24273a', + + primary_25: `hsl(267, 30%, 97%)`, + primary_50: `hsl(267, 40%, 96%)`, + primary_100: `hsl(267, 50%, 92%)`, + primary_200: `hsl(267, 62%, 81%)`, + primary_300: `hsl(267, 83%, 80%)`, + primary_400: `hsl(267, 75%, 78%)`, + primary_500: `hsl(267, 74%, 72%)`, + primary_600: `hsl(267, 38%, 41%)`, + primary_700: `hsl(267, 40%, 36%)`, + primary_800: `hsl(267, 42%, 29%)`, + primary_900: `hsl(267, 45%, 22%)`, + primary_950: `hsl(267, 48%, 10%)`, + primary_975: `hsl(267, 50%, 8%)`, + + 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 CATPPUCIN_THEMES = createThemes({ + defaultPalette: CATPPUCIN_PALETTE, + subduedPalette: CATPPUCIN_SUBDUED_PALETTE, +}) + +export const catppuccinscheme = { + lightPalette: CATPPUCIN_THEMES.light.palette, + darkPalette: CATPPUCIN_THEMES.dark.palette, + dimPalette: CATPPUCIN_THEMES.dim.palette, + light: CATPPUCIN_THEMES.light, + dark: CATPPUCIN_THEMES.dark, + dim: CATPPUCIN_THEMES.dim, +} + /** * @deprecated use ALF and access palette from `useTheme()` */ diff --git a/src/screens/Settings/AppearanceSettings.tsx b/src/screens/Settings/AppearanceSettings.tsx index 88a42c02a..4b95395f3 100644 --- a/src/screens/Settings/AppearanceSettings.tsx +++ b/src/screens/Settings/AppearanceSettings.tsx @@ -77,7 +77,8 @@ export function AppearanceSettingsScreen({}: Props) { | 'deer' | 'zeppelin' | 'kitty' - | 'reddwarf', + | 'reddwarf' + | 'catppuccin', ) => { setColorScheme(value) }, @@ -113,6 +114,7 @@ export function AppearanceSettingsScreen({}: Props) { {name: 'zeppelin', label: _(msg`Zeppelin`)}, {name: 'kitty', label: _(msg`Kitty`)}, {name: 'reddwarf', label: _(msg`Red Dwarf`)}, + {name: 'catppuccin', label: _(msg`Catppuccin`)}, ] return ( diff --git a/src/state/persisted/schema.ts b/src/state/persisted/schema.ts index 11e6c5643..644387382 100644 --- a/src/state/persisted/schema.ts +++ b/src/state/persisted/schema.ts @@ -1,6 +1,6 @@ import {z} from 'zod' -import { DEFAULT_ALT_TEXT_AI_MODEL } from '#/lib/constants' +import {DEFAULT_ALT_TEXT_AI_MODEL} from '#/lib/constants' import {deviceLanguageCodes, deviceLocales} from '#/locale/deviceLocales' import {findSupportedAppLanguage} from '#/locale/helpers' import {logger} from '#/logger' @@ -58,6 +58,7 @@ const schema = z.object({ 'zeppelin', 'kitty', 'reddwarf', + 'catppuccin', ]), hue: z.number(), session: z.object({