diff --git a/.changeset/add_catppuccin_theme.md b/.changeset/add_catppuccin_theme.md new file mode 100644 index 000000000..2c146ebb5 --- /dev/null +++ b/.changeset/add_catppuccin_theme.md @@ -0,0 +1,5 @@ +--- +default: minor +--- + +Add Catppuccin themeset and reorganize list diff --git a/src/app/features/settings/about/About.tsx b/src/app/features/settings/about/About.tsx index 44639f719..486379ec3 100644 --- a/src/app/features/settings/about/About.tsx +++ b/src/app/features/settings/about/About.tsx @@ -304,7 +304,6 @@ export function About({ requestBack, requestClose }: Readonly) { >
  • - {' '} ) { > Cinny - is ©{' '} + {', © '} Ajay Bura - {' '} - used under the terms of{' '} + + {', is used under the terms of '} ) {
  • - The{' '} + {'The '} matrix-js-sdk - {' '} - is ©{' '} + + {`, © `} The Matrix.org Foundation C.I.C - {' '} - used under the terms of{' '} + + {', is used under the terms of '} ) {
  • - The{' '} + {'The '} twemoji-colr - {' '} - font is ©{' '} + + {` font, © `} Mozilla Foundation - {' '} - used under the terms of{' '} + + {', is used under the terms of '} ) {
  • - The{' '} + {'The '} Twemoji - {' '} - emoji art is ©{' '} + + {' emoji art, © '} Twitter, Inc and other contributors - {' '} - used under the terms of{' '} + + {', used under the terms of '} ) {
  • - The{' '} + {'The '} ) { > Material sound resources {' '} - are ©{' '} + {', © '} Google - {' '} - used under the terms of{' '} + + {', used under the terms of '} ) { .
    • +
  • + + {'The '} + + Catppuccin Themes + + {', © '} + + Catppuccin + + {', are used under the terms of '} + + MIT + + . + +
    • diff --git a/src/app/features/settings/cosmetics/Themes.tsx b/src/app/features/settings/cosmetics/Themes.tsx index edc860478..efa9e22cf 100644 --- a/src/app/features/settings/cosmetics/Themes.tsx +++ b/src/app/features/settings/cosmetics/Themes.tsx @@ -1,6 +1,6 @@ import type { ChangeEventHandler, KeyboardEventHandler } from 'react'; import { type MouseEventHandler, useState } from 'react'; -import { Box, Chip, config, Icon, Icons, Input, Switch, Text, toRem } from 'folds'; +import { Box, Chip, color, config, Icon, Icons, Input, Switch, Text, toRem } from 'folds'; import { isKeyHotkey } from 'is-hotkey'; import { SettingMenuSelector } from '$components/setting-menu-selector'; @@ -30,6 +30,13 @@ function makeThemeOptions(themes: Theme[], themeNames: Record) { return themes.map((theme) => ({ value: theme.id, label: themeNames[theme.id] ?? theme.id, + icon: ( + + ), })); } diff --git a/src/app/hooks/useTheme.ts b/src/app/hooks/useTheme.ts index 846c103ad..d29870294 100755 --- a/src/app/hooks/useTheme.ts +++ b/src/app/hooks/useTheme.ts @@ -14,6 +14,10 @@ import { gruvdarkTheme, accordTheme, blackTheme, + catppuccinLatteTheme, + catppuccinFrappeTheme, + catppuccinMacchiatoTheme, + catppuccinMochaTheme, } from '../../colors.css'; export enum ThemeKind { @@ -88,20 +92,48 @@ export const BlackTheme: Theme = { classNames: ['black-theme', blackTheme, onDarkFontWeight], }; +export const CatppuccinLatteTheme: Theme = { + id: 'catppuccin-latte-theme', + kind: ThemeKind.Light, + classNames: ['catppuccin-latte-theme', catppuccinLatteTheme, onLightFontWeight], +}; + +export const CatppuccinFrappeTheme: Theme = { + id: 'catppuccin-frappe-theme', + kind: ThemeKind.Dark, + classNames: ['catppuccin-frappe-theme', catppuccinFrappeTheme, onDarkFontWeight], +}; + +export const CatppuccinMacchiatoTheme: Theme = { + id: 'catppuccin-macchiato-theme', + kind: ThemeKind.Dark, + classNames: ['catppuccin-macchiato-theme', catppuccinMacchiatoTheme, onDarkFontWeight], +}; + +export const CatppuccinMochaTheme: Theme = { + id: 'catppuccin-mocha-theme', + kind: ThemeKind.Dark, + classNames: ['catppuccin-mocha-theme', catppuccinMochaTheme, onDarkFontWeight], +}; + export const useThemes = (): Theme[] => { const themes: Theme[] = useMemo( () => [ LightTheme, SilverTheme, - CinnyLightTheme, - CinnySilverTheme, DarkTheme, - ButterTheme, RosePineTheme, + CinnyLightTheme, + CinnySilverTheme, CinnyDarkTheme, + ButterTheme, GruvdarkTheme, AccordTheme, BlackTheme, + CatppuccinLatteTheme, + CatppuccinFrappeTheme, + CatppuccinMacchiatoTheme, + CatppuccinMochaTheme, ], [] ); @@ -123,6 +155,10 @@ export const useThemeNames = (): Record => [GruvdarkTheme.id]: 'GruvDark', [AccordTheme.id]: 'Accord', [BlackTheme.id]: 'Black', + [CatppuccinLatteTheme.id]: 'Catppuccin Latte', + [CatppuccinFrappeTheme.id]: 'Catppuccin Frappe', + [CatppuccinMacchiatoTheme.id]: 'Catppuccin Macchiato', + [CatppuccinMochaTheme.id]: 'Catppuccin Mocha', }), [] ); diff --git a/src/app/styles/themes.css b/src/app/styles/themes.css index 116eb0949..c77b13f59 100755 --- a/src/app/styles/themes.css +++ b/src/app/styles/themes.css @@ -889,6 +889,7 @@ --sable-overlay: rgba(0, 0, 0, 0.8); } +/* --- Black Theme --- */ .black-theme { /* Background */ --sable-bg-container: #000000; @@ -976,3 +977,359 @@ --sable-shadow: rgba(0, 0, 0, 0.4); --sable-overlay: rgba(15, 14, 18, 0.85); } + +/* --- Catppuccin Latte --- */ +.catppuccin-latte-theme { + /* Background */ + --sable-bg-container: #e6e9ef; + --sable-bg-container-hover: #eff1f5; + --sable-bg-container-active: #ccd0da; + --sable-bg-container-line: #bcc0cc; + --sable-bg-on-container: #4c4f69; + + /* Surface */ + --sable-surface-container: #eff1f5; + --sable-surface-container-hover: #ccd0da; + --sable-surface-container-active: #bcc0cc; + --sable-surface-container-line: #acb0be; + --sable-surface-on-container: #4c4f69; + + /* Surface Variant */ + --sable-surface-var-container: #e6e9ef; + --sable-surface-var-container-hover: #e6e9ef80; + --sable-surface-var-container-active: #ccd0da; + --sable-surface-var-container-line: #bcc0cc; + --sable-surface-var-on-container: #4c4f69; + + /* Primary */ + --sable-primary-main: #8839ef; + --sable-primary-main-hover: #8839efd8; + --sable-primary-main-active: #8839efb4; + --sable-primary-main-line: #8839efa0; + --sable-primary-on-main: #eff1f5; + --sable-primary-container: #cba6f712; + --sable-primary-container-hover: #cba6f71a; + --sable-primary-container-active: #cba6f712; + --sable-primary-container-line: #cba6f708; + --sable-primary-on-container: #8839ef; + + /* Secondary */ + --sable-sec-main: #5c5f77; + --sable-sec-main-hover: #6c6f85; + --sable-sec-main-active: #7c7f93; + --sable-sec-main-line: #8c8fa1; + --sable-sec-on-main: #eff1f5; + --sable-sec-container: #ccd0da; + --sable-sec-container-hover: #bcc0cc; + --sable-sec-container-active: #acb0be; + --sable-sec-container-line: #9ca0b0; + --sable-sec-on-container: #4c4f69; + + /* Success */ + --sable-success-main: #40a02b; + --sable-success-main-hover: #40a02bd8; + --sable-success-main-active: #40a02bb4; + --sable-success-main-line: #40a02ba0; + --sable-success-on-main: #e6e9ef; + --sable-success-container: #ccd0da; + --sable-success-container-hover: #40a02b1a; + --sable-success-container-active: #40a02b12; + --sable-success-container-line: #ccd0da; + --sable-success-on-container: #40a02b; + + /* Warning */ + --sable-warn-main: #fe640b; + --sable-warn-main-hover: #fe640bd8; + --sable-warn-main-active: #fe640bb4; + --sable-warn-main-line: #fe640ba0; + --sable-warn-on-main: #e6e9ef; + --sable-warn-container: #ccd0da; + --sable-warn-container-hover: #fe640b1a; + --sable-warn-container-active: #fe640b12; + --sable-warn-container-line: #ccd0da; + --sable-warn-on-container: #fe640b; + + /* Crtical */ + --sable-crit-main: #d20f39; + --sable-crit-main-hover: #d20f39d8; + --sable-crit-main-active: #d20f39b4; + --sable-crit-main-line: #d20f39a0; + --sable-crit-on-main: #e6e9ef; + --sable-crit-container: #ccd0da; + --sable-crit-container-hover: #d20f391a; + --sable-crit-container-active: #d20f3912; + --sable-crit-container-line: #ccd0da; + --sable-crit-on-container: #d20f39; + + /* Other */ + --sable-focus-ring: rgba(136, 57, 239, 0.5); + --sable-shadow: rgba(0, 0, 0, 0.4); + --sable-overlay: rgba(220, 224, 232, 0.8); +} + +/* --- Catppuccin Frappe --- */ +.catppuccin-frappe-theme { + /* Background */ + --sable-bg-container: #292c3c; + --sable-bg-container-hover: #303446; + --sable-bg-container-active: #414559; + --sable-bg-container-line: #51576d; + --sable-bg-on-container: #c6d0f5; + + /* Surface */ + --sable-surface-container: #303446; + --sable-surface-container-hover: #414559; + --sable-surface-container-active: #51576d; + --sable-surface-container-line: #626880; + --sable-surface-on-container: #c6d0f5; + + /* Surface Variant */ + --sable-surface-var-container: #292c3c; + --sable-surface-var-container-hover: #292c3c80; + --sable-surface-var-container-active: #414559; + --sable-surface-var-container-line: #51576d; + --sable-surface-var-on-container: #c6d0f5; + + /* Primary */ + --sable-primary-main: #ca9ee6; + --sable-primary-main-hover: #ca9ee6d8; + --sable-primary-main-active: #ca9ee6b4; + --sable-primary-main-line: #ca9ee6a0; + --sable-primary-on-main: #303446; + --sable-primary-container: #ca9ee612; + --sable-primary-container-hover: #ca9ee61a; + --sable-primary-container-active: #ca9ee612; + --sable-primary-container-line: #ca9ee608; + --sable-primary-on-container: #ca9ee6; + + /* Secondary */ + --sable-sec-main: #b5bfe2; + --sable-sec-main-hover: #a5adce; + --sable-sec-main-active: #949cbb; + --sable-sec-main-line: #838ba7; + --sable-sec-on-main: #303446; + --sable-sec-container: #414559; + --sable-sec-container-hover: #51576d; + --sable-sec-container-active: #626880; + --sable-sec-container-line: #737994; + --sable-sec-on-container: #c6d0f5; + + /* Success */ + --sable-success-main: #a6d189; + --sable-success-main-hover: #a6d189d8; + --sable-success-main-active: #a6d189b4; + --sable-success-main-line: #a6d189a0; + --sable-success-on-main: #292c3c; + --sable-success-container: #414559; + --sable-success-container-hover: #a6d1891a; + --sable-success-container-active: #a6d189b12; + --sable-success-container-line: #414559; + --sable-success-on-container: #a6d189; + + /* Warning */ + --sable-warn-main: #ef9f76; + --sable-warn-main-hover: #ef9f76d8; + --sable-warn-main-active: #ef9f76b4; + --sable-warn-main-line: #ef9f76a0; + --sable-warn-on-main: #292c3c; + --sable-warn-container: #414559; + --sable-warn-container-hover: #ef9f761a; + --sable-warn-container-active: #ef9f7612; + --sable-warn-container-line: #414559; + --sable-warn-on-container: #ef9f76; + + /* Crtical */ + --sable-crit-main: #e78284; + --sable-crit-main-hover: #e78284d8; + --sable-crit-main-active: #e78284b4; + --sable-crit-main-line: #e78284a0; + --sable-crit-on-main: #292c3c; + --sable-crit-container: #414559; + --sable-crit-container-hover: #e782841a; + --sable-crit-container-active: #e7828412; + --sable-crit-container-line: #414559; + --sable-crit-on-container: #e78284; + + /* Other */ + --sable-focus-ring: rgb(202, 158, 230, 0.5); + --sable-shadow: rgba(0, 0, 0, 0.4); + --sable-overlay: rgba(41, 44, 60, 0.8); +} + +/* --- Catppuccin Macchiato --- */ +.catppuccin-macchiato-theme { + /* Background */ + --sable-bg-container: #1e2030; + --sable-bg-container-hover: #24273a; + --sable-bg-container-active: #363a4f; + --sable-bg-container-line: #494d64; + --sable-bg-on-container: #cad3f5; + + /* Surface */ + --sable-surface-container: #24273a; + --sable-surface-container-hover: #363a4f; + --sable-surface-container-active: #494d64; + --sable-surface-container-line: #5b6078; + --sable-surface-on-container: #cad3f5; + + /* Surface Variant */ + --sable-surface-var-container: #1e2030; + --sable-surface-var-container-hover: #1e203080; + --sable-surface-var-container-active: #363a4f; + --sable-surface-var-container-line: #494d64; + --sable-surface-var-on-container: #cad3f5; + + /* Primary */ + --sable-primary-main: #c6a0f6; + --sable-primary-main-hover: #c6a0f6d8; + --sable-primary-main-active: #c6a0f6b4; + --sable-primary-main-line: #c6a0f6a0; + --sable-primary-on-main: #24273a; + --sable-primary-container: #c6a0f612; + --sable-primary-container-hover: #c6a0f61a; + --sable-primary-container-active: #c6a0f612; + --sable-primary-container-line: #c6a0f608; + --sable-primary-on-container: #c6a0f6; + + /* Secondary */ + --sable-sec-main: #b8c0e0; + --sable-sec-main-hover: #a5adcb; + --sable-sec-main-active: #939ab7; + --sable-sec-main-line: #8087a2; + --sable-sec-on-main: #24273a; + --sable-sec-container: #363a4f; + --sable-sec-container-hover: #494d64; + --sable-sec-container-active: #5b6078; + --sable-sec-container-line: #6e738d; + --sable-sec-on-container: #cad3f5; + + /* Success */ + --sable-success-main: #a6da95; + --sable-success-main-hover: #a6da95d8; + --sable-success-main-active: #a6da95b4; + --sable-success-main-line: #a6da95a0; + --sable-success-on-main: #24273a; + --sable-success-container: #313244; + --sable-success-container-hover: #a6da951a; + --sable-success-container-active: #a6da9512; + --sable-success-container-line: #313244; + --sable-success-on-container: #a6da95; + + /* Warning */ + --sable-warn-main: #f5a97f; + --sable-warn-main-hover: #f5a97fd8; + --sable-warn-main-active: #f5a97fb4; + --sable-warn-main-line: #f5a97fa0; + --sable-warn-on-main: #24273a; + --sable-warn-container: #313244; + --sable-warn-container-hover: #f5a97f1a; + --sable-warn-container-active: #f5a97f12; + --sable-warn-container-line: #313244; + --sable-warn-on-container: #f5a97f; + + /* Crtical */ + --sable-crit-main: #ed8796; + --sable-crit-main-hover: #ed8796d8; + --sable-crit-main-active: #ed8796b4; + --sable-crit-main-line: #ed8796a0; + --sable-crit-on-main: #24273a; + --sable-crit-container: #313244; + --sable-crit-container-hover: #ed87961a; + --sable-crit-container-active: #ed879612; + --sable-crit-container-line: #313244; + --sable-crit-on-container: #ed8796; + + /* Other */ + --sable-focus-ring: rgba(198, 160, 246, 0.5); + --sable-shadow: rgba(0, 0, 0, 0.4); + --sable-overlay: rgba(30, 32, 48, 0.8); +} + +/* --- Catppuccin Mocha --- */ +.catppuccin-mocha-theme { + /* Background */ + --sable-bg-container: #181825; + --sable-bg-container-hover: #1e1e2e; + --sable-bg-container-active: #313244; + --sable-bg-container-line: #45475a; + --sable-bg-on-container: #cdd6f4; + + /* Surface */ + --sable-surface-container: #1e1e2e; + --sable-surface-container-hover: #313244; + --sable-surface-container-active: #45475a; + --sable-surface-container-line: #585b70; + --sable-surface-on-container: #cdd6f4; + + /* Surface Variant */ + --sable-surface-var-container: #181825; + --sable-surface-var-container-hover: #18182580; + --sable-surface-var-container-active: #313244; + --sable-surface-var-container-line: #45475a; + --sable-surface-var-on-container: #cdd6f4; + + /* Primary */ + --sable-primary-main: #cba6f7; + --sable-primary-main-hover: #cba6f7d8; + --sable-primary-main-active: #cba6f7b4; + --sable-primary-main-line: #cba6f7a0; + --sable-primary-on-main: #1e1e2e; + --sable-primary-container: #cba6f712; + --sable-primary-container-hover: #cba6f71a; + --sable-primary-container-active: #cba6f712; + --sable-primary-container-line: #cba6f708; + --sable-primary-on-container: #cba6f7; + + /* Secondary */ + --sable-sec-main: #bac2de; + --sable-sec-main-hover: #a6adc8; + --sable-sec-main-active: #9399b2; + --sable-sec-main-line: #7f849c; + --sable-sec-on-main: #1e1e2e; + --sable-sec-container: #313244; + --sable-sec-container-hover: #45475a; + --sable-sec-container-active: #585b70; + --sable-sec-container-line: #6c7086; + --sable-sec-on-container: #cdd6f4; + + /* Success */ + --sable-success-main: #a6e3a1; + --sable-success-main-hover: #a6e3a1d8; + --sable-success-main-active: #a6e3a1b4; + --sable-success-main-line: #a6e3a1a0; + --sable-success-on-main: #181825; + --sable-success-container: #313244; + --sable-success-container-hover: #a6e3a11a; + --sable-success-container-active: #a6e3a1b412; + --sable-success-container-line: #313244; + --sable-success-on-container: #a6e3a1; + + /* Warning */ + --sable-warn-main: #fab387; + --sable-warn-main-hover: #fab387d8; + --sable-warn-main-active: #fab387b4; + --sable-warn-main-line: #fab387a0; + --sable-warn-on-main: #181825; + --sable-warn-container: #313244; + --sable-warn-container-hover: #fab3871a; + --sable-warn-container-active: #fab38712; + --sable-warn-container-line: #313244; + --sable-warn-on-container: #fab387; + + /* Crtical */ + --sable-crit-main: #f38ba8; + --sable-crit-main-hover: #f38ba8d8; + --sable-crit-main-active: #f38ba8b4; + --sable-crit-main-line: #f38ba8a0; + --sable-crit-on-main: #181825; + --sable-crit-container: #313244; + --sable-crit-container-hover: #f38ba81a; + --sable-crit-container-active: #f38ba812; + --sable-crit-container-line: #313244; + --sable-crit-on-container: #f38ba8; + + /* Other */ + --sable-focus-ring: rgb(203, 166, 247, 0.5); + --sable-shadow: rgba(0, 0, 0, 0.4); + --sable-overlay: rgb(24, 24, 37, 0.8); +} diff --git a/src/colors.css.ts b/src/colors.css.ts index 562dd362a..82272031a 100755 --- a/src/colors.css.ts +++ b/src/colors.css.ts @@ -102,3 +102,7 @@ export const rosePineTheme = createTheme(color, sableThemeMapping); export const cinnyDarkTheme = createTheme(color, sableThemeMapping); export const accordTheme = createTheme(color, sableThemeMapping); export const blackTheme = createTheme(color, sableThemeMapping); +export const catppuccinLatteTheme = createTheme(color, sableThemeMapping); +export const catppuccinFrappeTheme = createTheme(color, sableThemeMapping); +export const catppuccinMacchiatoTheme = createTheme(color, sableThemeMapping); +export const catppuccinMochaTheme = createTheme(color, sableThemeMapping); diff --git a/src/index.css b/src/index.css index cde45ce4c..0272cb9ef 100755 --- a/src/index.css +++ b/src/index.css @@ -75,6 +75,70 @@ --font-monospace: 'Space Mono', monospace; } +.catppuccin-latte-theme { + --tc-link: #7287fd; + + /* user mxid colors */ + --mx-uc-1: hsl(197deg, 97%, 46%); + --mx-uc-2: hsl(266deg, 85%, 58%); + --mx-uc-3: hsl(109deg, 58%, 40%); + --mx-uc-4: hsl(347deg, 87%, 44%); + --mx-uc-5: hsl(22deg, 99%, 52%); + --mx-uc-6: hsl(183deg, 74%, 35%); + --mx-uc-7: hsl(220deg, 91%, 54%); + --mx-uc-8: hsl(189deg, 70%, 42%); + + --font-secondary: 'Nunito Variable', var(--font-emoji), sans-serif; + --font-monospace: 'Space Mono', monospace; +} + +.catppuccin-frappe-theme { + --tc-link: #babbf1; + + --mx-uc-1: hsl(316deg, 73%, 84%); + --mx-uc-2: hsl(358deg, 66%, 76%); + --mx-uc-3: hsl(172deg, 39%, 65%); + --mx-uc-4: hsl(96deg, 44%, 68%); + --mx-uc-5: hsl(222deg, 74%, 74%); + --mx-uc-6: hsl(277deg, 59%, 76%); + --mx-uc-7: hsl(40deg, 62%, 73%); + --mx-uc-8: hsl(359deg, 68%, 71%); + + --font-secondary: 'Nunito Variable', var(--font-emoji), sans-serif; + --font-monospace: 'Space Mono', monospace; +} +.catppuccin-macchiato-theme { + --tc-link: #b7bdf8; + + --mx-uc-1: hsl(316deg, 74%, 85%); + --mx-uc-2: hsl(355deg, 71%, 77%); + --mx-uc-3: hsl(171deg, 47%, 69%); + --mx-uc-4: hsl(105deg, 48%, 72%); + --mx-uc-5: hsl(220deg, 83%, 75%); + --mx-uc-6: hsl(267deg, 83%, 80%); + --mx-uc-7: hsl(40deg, 70%, 78%); + --mx-uc-8: hsl(351deg, 74%, 73%); + + --font-secondary: 'Nunito Variable', var(--font-emoji), sans-serif; + --font-monospace: 'Space Mono', monospace; +} + +.catppuccin-mocha-theme { + --tc-link: #b4befe; + + --mx-uc-1: hsl(316deg, 72%, 86%); + --mx-uc-2: hsl(350deg, 65%, 77%); + --mx-uc-3: hsl(170deg, 57%, 73%); + --mx-uc-4: hsl(115deg, 54%, 76%); + --mx-uc-5: hsl(217deg, 92%, 76%); + --mx-uc-6: hsl(267deg, 84%, 81%); + --mx-uc-7: hsl(41deg, 86%, 83%); + --mx-uc-8: hsl(343deg, 81%, 75%); + + --font-secondary: 'Nunito Variable', var(--font-emoji), sans-serif; + --font-monospace: 'Space Mono', monospace; +} + html { height: 100%; overflow: hidden;