Skip to content

Commit

Permalink
enhance: integrate catppuccin theme (#57)
Browse files Browse the repository at this point in the history
  • Loading branch information
1673beta authored Jul 1, 2024
1 parent 2ed14c7 commit e27e3a5
Show file tree
Hide file tree
Showing 57 changed files with 5,322 additions and 0 deletions.
58 changes: 58 additions & 0 deletions packages/frontend/src/scripts/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,20 @@ export const getBuiltinThemes = () => Promise.all(
'l-cherry',
'l-sushi',
'l-u0',
'catppuccin-latte-blue',
'catppuccin-latte-flamingo',
'catppuccin-latte-blue',
'catppuccin-latte-lavender',
'catppuccin-latte-maroon',
'catppuccin-latte-mauve',
'catppuccin-latte-peach',
'catppuccin-latte-pink',
'catppuccin-latte-red',
'catppuccin-latte-rosewater',
'catppuccin-latte-sapphire',
'catppuccin-latte-sky',
'catppuccin-latte-teal',
'catppuccin-latte-yellow',

'd-cherrypick',
'd-rosepine',
Expand All @@ -68,6 +82,50 @@ export const getBuiltinThemes = () => Promise.all(
'd-cherry',
'd-ice',
'd-u0',
'catppuccin-frappe-blue',
'catppuccin-frappe-flamingo',
'catppuccin-frappe-green',
'catppuccin-frappe-lavender',
'catppuccin-frappe-maroon',
'catppuccin-frappe-mauve',
'catppuccin-frappe-peach',
'catppuccin-frappe-pink',
'catppuccin-frappe-red',
'catppuccin-frappe-rosewater',
'catppuccin-frappe-sapphire',
'catppuccin-frappe-sky',
'catppuccin-frappe-teal',
'catppuccin-frappe-yellow',

'catppuccin-macchiato-blue',
'catppuccin-macchiato-flamingo',
'catppuccin-macchiato-green',
'catppuccin-macchiato-lavender',
'catppuccin-macchiato-maroon',
'catppuccin-macchiato-mauve',
'catppuccin-macchiato-peach',
'catppuccin-macchiato-pink',
'catppuccin-macchiato-red',
'catppuccin-macchiato-rosewater',
'catppuccin-macchiato-sapphire',
'catppuccin-macchiato-sky',
'catppuccin-macchiato-teal',
'catppuccin-macchiato-yellow',

'catppuccin-mocha-blue',
'catppuccin-mocha-flamingo',
'catppuccin-mocha-green',
'catppuccin-mocha-lavender',
'catppuccin-mocha-maroon',
'catppuccin-mocha-mauve',
'catppuccin-mocha-peach',
'catppuccin-mocha-pink',
'catppuccin-mocha-red',
'catppuccin-mocha-rosewater',
'catppuccin-mocha-sapphire',
'catppuccin-mocha-sky',
'catppuccin-mocha-teal',
'catppuccin-mocha-yellow',
].map(name => import(`@/themes/${name}.json5`).then(({ default: _default }): Theme => _default)),
);

Expand Down
94 changes: 94 additions & 0 deletions packages/frontend/src/themes/catppuccin-frappe-blue.json5
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
{
id: '4ccfbe22-290d-4620-97f1-f8fe2accec89',
base: 'dark',
name: 'Catppuccin Frappé Blue',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: '#232634',
fg: '#c6d0f5',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#51576d',
cwFg: '#b5bfe2',
link: '#8caaee',
warn: '#ef9f76',
badge: '#8caaee',
error: '#e78284',
focus: ':alpha<0.3<@accent',
navBg: '@panel',
navFg: '@fg',
panel: ':lighten<3<@bg',
popup: ':lighten<3<@panel',
accent: '#8caaee',
header: ':alpha<0.7<@panel',
infoBg: '#414559',
infoFg: '#a5adce',
renote: '#8caaee',
shadow: 'rgba(0, 0, 0, 0.3)',
divider: 'rgba(255, 255, 255, 0.1)',
hashtag: '#85c1dc',
mention: '@accent',
modalBg: 'rgba(0, 0, 0, 0.5)',
success: '#a6d189',
buttonBg: 'rgba(255, 255, 255, 0.05)',
switchBg: 'rgba(255, 255, 255, 0.15)',
acrylicBg: ':alpha<0.5<@bg',
cwHoverBg: '#626880',
indicator: '@accent',
mentionMe: '@mention',
messageBg: '@bg',
navActive: '@accent',
accentedBg: ':alpha<0.15<@accent',
codeNumber: '#a6d189',
codeString: '#ef9f76',
fgOnAccent: '#303446',
infoWarnBg: '#414559',
infoWarnFg: '#b5bfe2',
navHoverFg: ':lighten<17<@fg',
switchOnBg: '@accentedBg',
switchOnFg: '@accent',
codeBoolean: '@accent',
dateLabelFg: '@fg',
deckDivider: '#737994',
inputBorder: 'rgba(255, 255, 255, 0.1)',
panelBorder: 'solid 1px var(--divider)',
switchOffBg: 'rgba(255, 255, 255, 0.1)',
switchOffFg: '@fg',
accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@indicator',
windowHeader: ':alpha<0.85<@panel',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':lighten<3<@fg',
fgTransparent: ':alpha<0.5<@fg',
panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg',
buttonGradateA: '@accent',
buttonGradateB: ':hue<20<@accent',
htmlThemeColor: '@bg',
panelHighlight: ':lighten<3<@panel',
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
},
author: 'Catppuccin'
}
94 changes: 94 additions & 0 deletions packages/frontend/src/themes/catppuccin-frappe-flamingo.json5
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
{
id: 'ffcd3328-5c57-4ca3-9dac-4580cbf7742f',
base: 'dark',
name: 'Catppuccin Frappé Flamingo',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: '#232634',
fg: '#c6d0f5',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#51576d',
cwFg: '#b5bfe2',
link: '#8caaee',
warn: '#ef9f76',
badge: '#8caaee',
error: '#e78284',
focus: ':alpha<0.3<@accent',
navBg: '@panel',
navFg: '@fg',
panel: ':lighten<3<@bg',
popup: ':lighten<3<@panel',
accent: '#eebebe',
header: ':alpha<0.7<@panel',
infoBg: '#414559',
infoFg: '#a5adce',
renote: '#8caaee',
shadow: 'rgba(0, 0, 0, 0.3)',
divider: 'rgba(255, 255, 255, 0.1)',
hashtag: '#85c1dc',
mention: '@accent',
modalBg: 'rgba(0, 0, 0, 0.5)',
success: '#a6d189',
buttonBg: 'rgba(255, 255, 255, 0.05)',
switchBg: 'rgba(255, 255, 255, 0.15)',
acrylicBg: ':alpha<0.5<@bg',
cwHoverBg: '#626880',
indicator: '@accent',
mentionMe: '@mention',
messageBg: '@bg',
navActive: '@accent',
accentedBg: ':alpha<0.15<@accent',
codeNumber: '#a6d189',
codeString: '#ef9f76',
fgOnAccent: '#303446',
infoWarnBg: '#414559',
infoWarnFg: '#b5bfe2',
navHoverFg: ':lighten<17<@fg',
switchOnBg: '@accentedBg',
switchOnFg: '@accent',
codeBoolean: '@accent',
dateLabelFg: '@fg',
deckDivider: '#737994',
inputBorder: 'rgba(255, 255, 255, 0.1)',
panelBorder: 'solid 1px var(--divider)',
switchOffBg: 'rgba(255, 255, 255, 0.1)',
switchOffFg: '@fg',
accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@indicator',
windowHeader: ':alpha<0.85<@panel',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':lighten<3<@fg',
fgTransparent: ':alpha<0.5<@fg',
panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg',
buttonGradateA: '@accent',
buttonGradateB: ':hue<20<@accent',
htmlThemeColor: '@bg',
panelHighlight: ':lighten<3<@panel',
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
},
author: 'Catppuccin'
}
94 changes: 94 additions & 0 deletions packages/frontend/src/themes/catppuccin-frappe-green.json5
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
{
id: '491fc957-6f96-4389-9e8e-c2b681a70a74',
base: 'dark',
name: 'Catppuccin Frappé Green',
props: {
X2: ':darken<2<@panel',
X3: 'rgba(255, 255, 255, 0.05)',
X4: 'rgba(255, 255, 255, 0.1)',
X5: 'rgba(255, 255, 255, 0.05)',
X6: 'rgba(255, 255, 255, 0.15)',
X7: 'rgba(255, 255, 255, 0.05)',
X8: ':lighten<5<@accent',
X9: ':darken<5<@accent',
bg: '#232634',
fg: '#c6d0f5',
X10: ':alpha<0.4<@accent',
X11: 'rgba(0, 0, 0, 0.3)',
X12: 'rgba(255, 255, 255, 0.1)',
X13: 'rgba(255, 255, 255, 0.15)',
X14: ':alpha<0.5<@navBg',
X15: ':alpha<0<@panel',
X16: ':alpha<0.7<@panel',
X17: ':alpha<0.8<@bg',
cwBg: '#51576d',
cwFg: '#b5bfe2',
link: '#8caaee',
warn: '#ef9f76',
badge: '#8caaee',
error: '#e78284',
focus: ':alpha<0.3<@accent',
navBg: '@panel',
navFg: '@fg',
panel: ':lighten<3<@bg',
popup: ':lighten<3<@panel',
accent: '#a6d189',
header: ':alpha<0.7<@panel',
infoBg: '#414559',
infoFg: '#a5adce',
renote: '#8caaee',
shadow: 'rgba(0, 0, 0, 0.3)',
divider: 'rgba(255, 255, 255, 0.1)',
hashtag: '#85c1dc',
mention: '@accent',
modalBg: 'rgba(0, 0, 0, 0.5)',
success: '#a6d189',
buttonBg: 'rgba(255, 255, 255, 0.05)',
switchBg: 'rgba(255, 255, 255, 0.15)',
acrylicBg: ':alpha<0.5<@bg',
cwHoverBg: '#626880',
indicator: '@accent',
mentionMe: '@mention',
messageBg: '@bg',
navActive: '@accent',
accentedBg: ':alpha<0.15<@accent',
codeNumber: '#a6d189',
codeString: '#ef9f76',
fgOnAccent: '#303446',
infoWarnBg: '#414559',
infoWarnFg: '#b5bfe2',
navHoverFg: ':lighten<17<@fg',
switchOnBg: '@accentedBg',
switchOnFg: '@accent',
codeBoolean: '@accent',
dateLabelFg: '@fg',
deckDivider: '#737994',
inputBorder: 'rgba(255, 255, 255, 0.1)',
panelBorder: 'solid 1px var(--divider)',
switchOffBg: 'rgba(255, 255, 255, 0.1)',
switchOffFg: '@fg',
accentDarken: ':darken<10<@accent',
acrylicPanel: ':alpha<0.5<@panel',
navIndicator: '@indicator',
windowHeader: ':alpha<0.85<@panel',
accentLighten: ':lighten<10<@accent',
buttonHoverBg: 'rgba(255, 255, 255, 0.1)',
driveFolderBg: ':alpha<0.3<@accent',
fgHighlighted: ':lighten<3<@fg',
fgTransparent: ':alpha<0.5<@fg',
panelHeaderBg: ':lighten<3<@panel',
panelHeaderFg: '@fg',
buttonGradateA: '@accent',
buttonGradateB: ':hue<20<@accent',
htmlThemeColor: '@bg',
panelHighlight: ':lighten<3<@panel',
listItemHoverBg: 'rgba(255, 255, 255, 0.03)',
scrollbarHandle: 'rgba(255, 255, 255, 0.2)',
inputBorderHover: 'rgba(255, 255, 255, 0.2)',
wallpaperOverlay: 'rgba(0, 0, 0, 0.5)',
fgTransparentWeak: ':alpha<0.75<@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
},
author: 'Catppuccin'
}
Loading

0 comments on commit e27e3a5

Please sign in to comment.