From 9e6bce0e41f3843ab35a3217ee2c8d1a5501041e Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Thu, 23 May 2024 09:40:11 -0700 Subject: [PATCH] More themes! --- src-web/components/Overlay.tsx | 7 + .../Settings/SettingsAppearance.tsx | 17 +- src-web/components/Workspace.tsx | 4 +- src-web/hooks/useThemes.ts | 6 +- src-web/lib/theme/themes.ts | 396 +----------------- src-web/lib/theme/themes/catppuccin.ts | 172 ++++++++ src-web/lib/theme/themes/github.ts | 57 +++ src-web/lib/theme/themes/monokai-pro.ts | 245 +++++++++++ src-web/lib/theme/themes/relaxing.ts | 20 + src-web/lib/theme/themes/rose-pine.ts | 108 +++++ src-web/lib/theme/themes/yaak.ts | 84 ++++ 11 files changed, 729 insertions(+), 387 deletions(-) create mode 100644 src-web/lib/theme/themes/catppuccin.ts create mode 100644 src-web/lib/theme/themes/github.ts create mode 100644 src-web/lib/theme/themes/monokai-pro.ts create mode 100644 src-web/lib/theme/themes/relaxing.ts create mode 100644 src-web/lib/theme/themes/rose-pine.ts create mode 100644 src-web/lib/theme/themes/yaak.ts diff --git a/src-web/components/Overlay.tsx b/src-web/components/Overlay.tsx index 38728da1..052b7b4e 100644 --- a/src-web/components/Overlay.tsx +++ b/src-web/components/Overlay.tsx @@ -2,6 +2,7 @@ import classNames from 'classnames'; import FocusTrap from 'focus-trap-react'; import { motion } from 'framer-motion'; import type { ReactNode } from 'react'; +import React from 'react'; import { Portal } from './Portal'; interface Props { @@ -47,6 +48,12 @@ export function Overlay({ )} /> {children} + + {/* Show draggable region at the top */} + {/* TODO: Figure out tauri drag region and also make clickable still */} + {variant === 'default' && ( +
+ )} )} diff --git a/src-web/components/Settings/SettingsAppearance.tsx b/src-web/components/Settings/SettingsAppearance.tsx index e40cae81..69fe9e31 100644 --- a/src-web/components/Settings/SettingsAppearance.tsx +++ b/src-web/components/Settings/SettingsAppearance.tsx @@ -1,3 +1,4 @@ +import { invoke } from '@tauri-apps/api/core'; import React from 'react'; import { useActiveWorkspace } from '../../hooks/useActiveWorkspace'; import { useResolvedAppearance } from '../../hooks/useResolvedAppearance'; @@ -8,8 +9,10 @@ import { useUpdateSettings } from '../../hooks/useUpdateSettings'; import { trackEvent } from '../../lib/analytics'; import { isThemeDark } from '../../lib/theme/window'; import type { ButtonProps } from '../core/Button'; +import { Button } from '../core/Button'; import { Editor } from '../core/Editor'; import type { IconProps } from '../core/Icon'; +import { Icon } from '../core/Icon'; import { IconButton } from '../core/IconButton'; import type { SelectOption } from '../core/Select'; import { Select } from '../core/Select'; @@ -116,7 +119,7 @@ export function SettingsAppearance() {
Theme Preview ({appearance}) @@ -157,6 +160,18 @@ export function SettingsAppearance() { contentType="application/javascript" /> + ); } diff --git a/src-web/components/Workspace.tsx b/src-web/components/Workspace.tsx index 58a94de1..cfbed29f 100644 --- a/src-web/components/Workspace.tsx +++ b/src-web/components/Workspace.tsx @@ -209,10 +209,10 @@ export default function Workspace() { } interface HeaderSizeProps extends HTMLAttributes { - children: ReactNode; + children?: ReactNode; } -function HeaderSize({ className, style, ...props }: HeaderSizeProps) { +export function HeaderSize({ className, style, ...props }: HeaderSizeProps) { const platform = useOsInfo(); const fullscreen = useIsFullscreen(); const stoplightsVisible = platform?.osType === 'macos' && !fullscreen; diff --git a/src-web/hooks/useThemes.ts b/src-web/hooks/useThemes.ts index 91c609f0..eb2b7123 100644 --- a/src-web/hooks/useThemes.ts +++ b/src-web/hooks/useThemes.ts @@ -1,8 +1,8 @@ -import { yaakDark, yaakLight, yaakThemes } from '../lib/theme/themes'; +import { defaultDarkTheme, defaultLightTheme, yaakThemes } from '../lib/theme/themes'; export function useThemes() { - const dark = yaakDark; - const light = yaakLight; + const dark = defaultDarkTheme; + const light = defaultLightTheme; const otherThemes = yaakThemes .filter((t) => t.id !== dark.id && t.id !== light.id) diff --git a/src-web/lib/theme/themes.ts b/src-web/lib/theme/themes.ts index 8afd56bb..ace9c25d 100644 --- a/src-web/lib/theme/themes.ts +++ b/src-web/lib/theme/themes.ts @@ -1,384 +1,18 @@ -import { Color } from './color'; -import type { YaakTheme } from './window'; - -export const yaakLight: YaakTheme = { - id: 'yaak-light', - name: 'Yaak', - background: new Color('hsl(216,24%,100%)', 'light'), - backgroundHighlight: new Color('hsl(216,24%,93%)', 'light'), - backgroundHighlightSecondary: new Color('hsl(216,24%,87%)', 'light'), - foreground: new Color('hsl(219,23%,15%)', 'light'), - foregroundSubtle: new Color('hsl(219,23%,15%)', 'light').lower(0.3), - foregroundSubtler: new Color('hsl(219,23%,15%)', 'light').lower(0.5), - colors: { - primary: new Color('hsl(266,100%,70%)', 'light'), - secondary: new Color('hsl(220,24%,59%)', 'light'), - info: new Color('hsl(206,100%,48%)', 'light'), - success: new Color('hsl(155,95%,33%)', 'light'), - notice: new Color('hsl(45,100%,41%)', 'light'), - warning: new Color('hsl(30,100%,43%)', 'light'), - danger: new Color('hsl(335,75%,57%)', 'light'), - }, - components: { - sidebar: { - background: new Color('hsl(216,24%,97%)', 'light'), - backgroundHighlight: new Color('hsl(216,24%,93%)', 'light'), - backgroundHighlightSecondary: new Color('hsl(216,24%,90%)', 'light'), - }, - }, -}; - -export const yaakDark: YaakTheme = { - id: 'yaak-dark', - name: 'Yaak', - background: new Color('hsl(244,23%,13%)', 'dark'), - backgroundHighlight: new Color('hsl(244,23%,23%)', 'dark'), - backgroundHighlightSecondary: new Color('hsl(244,23%,20%)', 'dark'), - foreground: new Color('hsl(245,23%,86%)', 'dark'), - foregroundSubtle: new Color('hsl(245,20%,65%)', 'dark'), - foregroundSubtler: new Color('hsl(245,18%,50%)', 'dark'), - - colors: { - primary: new Color('hsl(266,100%,79%)', 'dark'), - secondary: new Color('hsl(245,23%,60%)', 'dark'), - info: new Color('hsl(206,100%,63%)', 'dark'), - success: new Color('hsl(150,99%,44%)', 'dark'), - notice: new Color('hsl(48,80%,63%)', 'dark'), - warning: new Color('hsl(28,100%,61%)', 'dark'), - danger: new Color('hsl(342,90%,68%)', 'dark'), - }, - - components: { - button: { - colors: { - primary: new Color('hsl(266,100%,79%)', 'dark').lower(0.1), - secondary: new Color('hsl(245,23%,60%)', 'dark').lower(0.1), - info: new Color('hsl(206,100%,63%)', 'dark').lower(0.1), - success: new Color('hsl(150,99%,44%)', 'dark').lower(0.1), - notice: new Color('hsl(48,80%,63%)', 'dark').lower(0.1), - warning: new Color('hsl(28,100%,61%)', 'dark').lower(0.1), - danger: new Color('hsl(342,90%,68%)', 'dark').lower(0.1), - }, - }, - input: { - backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'), - }, - dialog: { - backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'), - }, - sidebar: { - background: new Color('hsl(243,23%,16%)', 'dark'), - backgroundHighlight: new Color('hsl(244,23%,22%)', 'dark'), - }, - responsePane: { - background: new Color('hsl(243,23%,16%)', 'dark'), - backgroundHighlight: new Color('hsl(244,23%,16%)', 'dark').lift(0.08), - }, - appHeader: { - background: new Color('hsl(244,23%,12%)', 'dark'), - backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.1), - }, - }, -}; - -const monokaiProOctagon: YaakTheme = { - id: 'monokai-pro-octagon', - name: 'Monokai Pro Octagon', - background: new Color('#282a3a', 'dark'), - foreground: new Color('#eaf2f1', 'dark'), - foregroundSubtle: new Color('#b2b9bd', 'dark'), - foregroundSubtler: new Color('#767b81', 'dark'), - - colors: { - primary: new Color('#c39ac9', 'dark'), - secondary: new Color('#b2b9bd', 'dark'), - info: new Color('#9cd1bb', 'dark'), - success: new Color('#bad761', 'dark'), - notice: new Color('#ffd76d', 'dark'), - warning: new Color('#ff9b5e', 'dark'), - danger: new Color('#ff657a', 'dark'), - }, - - components: { - appHeader: { - background: new Color('#1e1f2b', 'dark'), - foreground: new Color('#b2b9bd', 'dark'), - foregroundSubtle: new Color('#767b81', 'dark'), - foregroundSubtler: new Color('#696d77', 'dark'), - }, - button: { - colors: { - primary: new Color('#c39ac9', 'dark').lower(0.1).desaturate(0.1), - secondary: new Color('#b2b9bd', 'dark').lower(0.1).desaturate(0.1), - info: new Color('#9cd1bb', 'dark').lower(0.1).desaturate(0.1), - success: new Color('#bad761', 'dark').lower(0.1).desaturate(0.1), - notice: new Color('#ffd76d', 'dark').lower(0.1).desaturate(0.1), - warning: new Color('#ff9b5e', 'dark').lower(0.1).desaturate(0.1), - danger: new Color('#ff657a', 'dark').lower(0.1).desaturate(0.1), - }, - }, - }, -}; - -const catppuccinLatte: YaakTheme = { - name: 'Catppuccin Latte', - id: 'catppuccin-light', - background: new Color('#eff1f5', 'light'), - foreground: new Color('#4c4f69', 'dark'), - foregroundSubtle: new Color('#6c6f85', 'light'), - foregroundSubtler: new Color('#8c8fa1', 'light'), - colors: { - primary: new Color('#8839ef', 'light'), - secondary: new Color('#6c6f85', 'light'), - info: new Color('#7287fd', 'light'), - success: new Color('#179299', 'light'), - notice: new Color('#df8e1d', 'light'), - warning: new Color('#fe640b', 'light'), - danger: new Color('#e64553', 'light'), - }, - components: { - sidebar: { - background: new Color('#e6e9ef', 'light'), - backgroundHighlight: new Color('#e6e9ef', 'light').lift(0.05), - foregroundSubtler: new Color('#7287fd', 'light'), - }, - appHeader: { - background: new Color('#dce0e8', 'light'), - backgroundHighlight: new Color('#e6e9ef', 'light').lift(0.05), - foregroundSubtler: new Color('#7287fd', 'light'), - }, - }, -}; - -const catppuccinMocha: YaakTheme = { - name: 'Catppuccin Mocha', - id: 'catppuccin-mocha', - background: new Color('#181825', 'dark'), - foreground: new Color('#cdd6f4', 'dark'), - foregroundSubtle: new Color('#a6adc8', 'dark'), - foregroundSubtler: new Color('#7f849c', 'dark'), - colors: { - primary: new Color('#c6a0f6', 'dark'), - secondary: new Color('#bac2de', 'dark'), - info: new Color('#89b4fa', 'dark'), - success: new Color('#a6e3a1', 'dark'), - notice: new Color('#f9e2af', 'dark'), - warning: new Color('#fab387', 'dark'), - danger: new Color('#f38ba8', 'dark'), - }, - components: { - dialog: { - background: new Color('#181825', 'dark'), - }, - sidebar: { - background: new Color('#1e1e2e', 'dark'), - backgroundHighlight: new Color('#1e1e2e', 'dark').lift(0.05), - }, - appHeader: { - background: new Color('#11111b', 'dark'), - backgroundHighlight: new Color('#11111b', 'dark').lift(0.1), - }, - responsePane: { - background: new Color('#1e1e2e', 'dark'), - backgroundHighlight: new Color('#1e1e2e', 'dark').lift(0.05), - }, - button: { - colors: { - primary: new Color('#cba6f7', 'dark').lower(0.2).desaturate(0.2), - secondary: new Color('#bac2de', 'dark').lower(0.2).desaturate(0.2), - info: new Color('#89b4fa', 'dark').lower(0.2).desaturate(0.2), - success: new Color('#a6e3a1', 'dark').lower(0.2).desaturate(0.2), - notice: new Color('#f9e2af', 'dark').lower(0.2).desaturate(0.2), - warning: new Color('#fab387', 'dark').lower(0.2).desaturate(0.2), - danger: new Color('#f38ba8', 'dark').lower(0.2).desaturate(0.2), - }, - }, - }, -}; - -const relaxing: YaakTheme = { - name: 'Relaxing', - id: 'relaxing', - background: new Color('#2b1e3b', 'dark'), - foreground: new Color('#ede2f5', 'dark'), - colors: { - primary: new Color('#cba6f7', 'dark'), - secondary: new Color('#bac2de', 'dark'), - info: new Color('#89b4fa', 'dark'), - success: new Color('#a6e3a1', 'dark'), - notice: new Color('#f9e2af', 'dark'), - warning: new Color('#fab387', 'dark'), - danger: new Color('#f38ba8', 'dark'), - }, -}; - -export const rosePineMoon: YaakTheme = { - id: 'rose-pine-moon', - name: 'Rosé Pine Moon', - background: new Color('#232136', 'dark'), - foreground: new Color('#e0def4', 'dark'), - foregroundSubtle: new Color('#908caa', 'dark'), - foregroundSubtler: new Color('#6e6a86', 'dark'), - colors: { - primary: new Color('#c4a7e7', 'dark'), - secondary: new Color('#908caa', 'dark'), - info: new Color('#68aeca', 'dark'), - success: new Color('#9ccfd8', 'dark'), - notice: new Color('#f6c177', 'dark'), - warning: new Color('#ea9a97', 'dark'), - danger: new Color('#eb6f92', 'dark'), - }, - components: { - responsePane: { - background: new Color('#2a273f', 'dark'), - }, - sidebar: { - background: new Color('#2a273f', 'dark'), - }, - menu: { - background: new Color('#393552', 'dark'), - foregroundSubtle: new Color('#908caa', 'dark').lift(0.15), - foregroundSubtler: new Color('#6e6a86', 'dark').lift(0.15), - }, - }, -}; - -export const rosePineDawn: YaakTheme = { - id: 'rose-pine-dawn', - name: 'Rosé Pine Dawn', - background: new Color('#faf4ed', 'light'), - backgroundHighlight: new Color('#dfdad9', 'light'), - backgroundHighlightSecondary: new Color('#f4ede8', 'light'), - foreground: new Color('#575279', 'light'), - foregroundSubtle: new Color('#797593', 'light'), - foregroundSubtler: new Color('#9893a5', 'light'), - colors: { - primary: new Color('#9070ad', 'light'), - secondary: new Color('#6e6a86', 'light'), - info: new Color('#2d728d', 'light'), - success: new Color('#4f8c96', 'light'), - notice: new Color('#cb862d', 'light'), - warning: new Color('#ce7b78', 'light'), - danger: new Color('#b4637a', 'light'), - }, - components: { - responsePane: { - backgroundHighlight: new Color('#e8e4e2', 'light'), - }, - sidebar: { - backgroundHighlight: new Color('#e8e4e2', 'light'), - }, - appHeader: { - backgroundHighlight: new Color('#e8e4e2', 'light'), - }, - input: { - backgroundHighlight: new Color('#dfdad9', 'light'), - }, - dialog: { - backgroundHighlight: new Color('#e8e4e2', 'light'), - }, - menu: { - background: new Color('#f2e9e1', 'light'), - backgroundHighlight: new Color('#dfdad9', 'light'), - backgroundHighlightSecondary: new Color('#6e6a86', 'light'), - }, - }, -}; - -export const rosePine: YaakTheme = { - id: 'rose-pine', - name: 'Rosé Pine', - background: new Color('#191724', 'dark'), - foreground: new Color('#e0def4', 'dark'), - foregroundSubtle: new Color('#908caa', 'dark'), - foregroundSubtler: new Color('#6e6a86', 'dark'), - colors: { - primary: new Color('#c4a7e7', 'dark'), - secondary: new Color('#6e6a86', 'dark'), - info: new Color('#67abcb', 'dark'), - success: new Color('#9cd8d8', 'dark'), - notice: new Color('#f6c177', 'dark'), - warning: new Color('#f1a3a1', 'dark'), - danger: new Color('#eb6f92', 'dark'), - }, - components: { - responsePane: { - background: new Color('#1f1d2e', 'dark'), - }, - sidebar: { - background: new Color('#1f1d2e', 'dark'), - }, - menu: { - background: new Color('#393552', 'dark'), - foregroundSubtle: new Color('#908caa', 'dark').lift(0.15), - foregroundSubtler: new Color('#6e6a86', 'dark').lift(0.15), - }, - }, -}; - -export const githubDark: YaakTheme = { - id: 'github-dark', - name: 'GitHub', - background: new Color('#0d1218', 'dark'), - backgroundHighlight: new Color('#171c23', 'dark'), - backgroundHighlightSecondary: new Color('#1c2127', 'dark'), - foreground: new Color('#dce3eb', 'dark'), - foregroundSubtle: new Color('#88919b', 'dark'), - foregroundSubtler: new Color('#6b727d', 'dark'), - colors: { - primary: new Color('#a579ef', 'dark').lift(0.1), - secondary: new Color('#6b727d', 'dark').lift(0.1), - info: new Color('#458def', 'dark').lift(0.1), - success: new Color('#3eb24f', 'dark').lift(0.1), - notice: new Color('#dca132', 'dark').lift(0.1), - warning: new Color('#ec7934', 'dark').lift(0.1), - danger: new Color('#ee5049', 'dark').lift(0.1), - }, - components: { - button: { - colors: { - primary: new Color('#a579ef', 'dark'), - secondary: new Color('#6b727d', 'dark'), - info: new Color('#458def', 'dark'), - success: new Color('#3eb24f', 'dark'), - notice: new Color('#dca132', 'dark'), - warning: new Color('#ec7934', 'dark'), - danger: new Color('#ee5049', 'dark'), - }, - }, - }, -}; - -export const githubLight: YaakTheme = { - id: 'github-light', - name: 'GitHub', - background: new Color('#ffffff', 'light'), - backgroundHighlight: new Color('#e8ebee', 'light'), - backgroundHighlightSecondary: new Color('#f6f8fa', 'light'), - foreground: new Color('#1f2328', 'light'), - foregroundSubtle: new Color('#636c76', 'light'), - foregroundSubtler: new Color('#828d94', 'light'), - colors: { - primary: new Color('#8250df', 'light'), - secondary: new Color('#6e7781', 'light'), - info: new Color('#0969da', 'light'), - success: new Color('#1a7f37', 'light'), - notice: new Color('#9a6700', 'light'), - warning: new Color('#bc4c00', 'light'), - danger: new Color('#d1242f', 'light'), - }, -}; +import { catppuccin } from './themes/catppuccin'; +import { github } from './themes/github'; +import { monokaiPro } from './themes/monokai-pro'; +import { relaxing } from './themes/relaxing'; +import { rosePine } from './themes/rose-pine'; +import { yaak, yaakDark, yaakLight } from './themes/yaak'; export const yaakThemes = [ - yaakLight, - yaakDark, - catppuccinMocha, - catppuccinLatte, - relaxing, - monokaiProOctagon, - rosePine, - rosePineMoon, - rosePineDawn, - githubLight, - githubDark, + ...yaak, + ...catppuccin, + ...relaxing, + ...rosePine, + ...github, + ...monokaiPro, ]; + +export const defaultDarkTheme = yaakDark; +export const defaultLightTheme = yaakLight; diff --git a/src-web/lib/theme/themes/catppuccin.ts b/src-web/lib/theme/themes/catppuccin.ts new file mode 100644 index 00000000..6420c5dc --- /dev/null +++ b/src-web/lib/theme/themes/catppuccin.ts @@ -0,0 +1,172 @@ +import { Color } from '../color'; +import type { YaakTheme } from '../window'; + +const catppuccinLatte: YaakTheme = { + name: 'Catppuccin Latte', + id: 'catppuccin-light', + background: new Color('#eff1f5', 'light'), + foreground: new Color('#4c4f69', 'dark'), + foregroundSubtle: new Color('#6c6f85', 'light'), + foregroundSubtler: new Color('#8c8fa1', 'light'), + colors: { + primary: new Color('#8839ef', 'light'), + secondary: new Color('#6c6f85', 'light'), + info: new Color('#7287fd', 'light'), + success: new Color('#179299', 'light'), + notice: new Color('#df8e1d', 'light'), + warning: new Color('#fe640b', 'light'), + danger: new Color('#e64553', 'light'), + }, + components: { + sidebar: { + background: new Color('#e6e9ef', 'light'), + backgroundHighlight: new Color('#e6e9ef', 'light').lift(0.05), + foregroundSubtler: new Color('#7287fd', 'light'), + }, + appHeader: { + background: new Color('#dce0e8', 'light'), + backgroundHighlight: new Color('#e6e9ef', 'light').lift(0.05), + foregroundSubtler: new Color('#7287fd', 'light'), + }, + }, +}; + +const catppuccinMacchiato: YaakTheme = { + name: 'Catppuccin Macchiato', + id: 'catppuccin-Macchiato', + background: new Color('#1e2030', 'dark'), + foreground: new Color('#cad3f5', 'dark'), + foregroundSubtle: new Color('#a5adcb', 'dark'), + foregroundSubtler: new Color('#8087a2', 'dark'), + colors: { + primary: new Color('#c6a0f6', 'dark'), + secondary: new Color('#b8c0e0', 'dark'), + info: new Color('#8aadf4', 'dark'), + success: new Color('#a6da95', 'dark'), + notice: new Color('#eed49f', 'dark'), + warning: new Color('#f5a97f', 'dark'), + danger: new Color('#ed8796', 'dark'), + }, + components: { + dialog: { + background: new Color('#181825', 'dark'), + }, + sidebar: { + background: new Color('#24273a', 'dark'), + backgroundHighlight: new Color('#24273a', 'dark').lift(0.05), + }, + appHeader: { + background: new Color('#181926', 'dark'), + backgroundHighlight: new Color('#181926', 'dark').lift(0.1), + }, + responsePane: { + background: new Color('#24273a', 'dark'), + backgroundHighlight: new Color('#24273a', 'dark').lift(0.05), + }, + button: { + colors: { + primary: new Color('#c6a0f6', 'dark').lower(0.1), + secondary: new Color('#b8c0e0', 'dark').lower(0.1), + info: new Color('#8aadf4', 'dark').lower(0.1), + success: new Color('#a6da95', 'dark').lower(0.1), + notice: new Color('#eed49f', 'dark').lower(0.1), + warning: new Color('#f5a97f', 'dark').lower(0.1), + danger: new Color('#ed8796', 'dark').lower(0.1), + }, + }, + }, +}; + +const catppuccinFrappe: YaakTheme = { + name: 'Catppuccin Frappé', + id: 'catppuccin-frappe', + background: new Color('#292c3c', 'dark'), + foreground: new Color('#c6d0f5', 'dark'), + foregroundSubtle: new Color('#a5adce', 'dark'), + foregroundSubtler: new Color('#838ba7', 'dark'), + colors: { + primary: new Color('#ca9ee6', 'dark'), + secondary: new Color('#b8c0e0', 'dark'), + info: new Color('#8caaee', 'dark'), + success: new Color('#a6d189', 'dark'), + notice: new Color('#e5c890', 'dark'), + warning: new Color('#ef9f76', 'dark'), + danger: new Color('#e78284', 'dark'), + }, + components: { + dialog: { + background: new Color('#181825', 'dark'), + }, + sidebar: { + background: new Color('#303446', 'dark'), + backgroundHighlight: new Color('#303446', 'dark').lift(0.05), + }, + appHeader: { + background: new Color('#232634', 'dark'), + backgroundHighlight: new Color('#232634', 'dark').lift(0.1), + }, + responsePane: { + background: new Color('#303446', 'dark'), + backgroundHighlight: new Color('#303446', 'dark').lift(0.05), + }, + button: { + colors: { + primary: new Color('#ca9ee6', 'dark').lower(0.1), + secondary: new Color('#b8c0e0', 'dark').lower(0.1), + info: new Color('#8caaee', 'dark').lower(0.1), + success: new Color('#a6d189', 'dark').lower(0.1), + notice: new Color('#e5c890', 'dark').lower(0.1), + warning: new Color('#ef9f76', 'dark').lower(0.1), + danger: new Color('#e78284', 'dark').lower(0.1), + }, + }, + }, +}; + +const catppuccinMocha: YaakTheme = { + name: 'Catppuccin Mocha', + id: 'catppuccin-mocha', + background: new Color('#181825', 'dark'), + foreground: new Color('#cdd6f4', 'dark'), + foregroundSubtle: new Color('#a6adc8', 'dark'), + foregroundSubtler: new Color('#7f849c', 'dark'), + colors: { + primary: new Color('#c6a0f6', 'dark'), + secondary: new Color('#bac2de', 'dark'), + info: new Color('#89b4fa', 'dark'), + success: new Color('#a6e3a1', 'dark'), + notice: new Color('#f9e2af', 'dark'), + warning: new Color('#fab387', 'dark'), + danger: new Color('#f38ba8', 'dark'), + }, + components: { + dialog: { + background: new Color('#181825', 'dark'), + }, + sidebar: { + background: new Color('#1e1e2e', 'dark'), + backgroundHighlight: new Color('#1e1e2e', 'dark').lift(0.05), + }, + appHeader: { + background: new Color('#11111b', 'dark'), + backgroundHighlight: new Color('#11111b', 'dark').lift(0.1), + }, + responsePane: { + background: new Color('#1e1e2e', 'dark'), + backgroundHighlight: new Color('#1e1e2e', 'dark').lift(0.05), + }, + button: { + colors: { + primary: new Color('#cba6f7', 'dark').lower(0.2).desaturate(0.2), + secondary: new Color('#bac2de', 'dark').lower(0.2).desaturate(0.2), + info: new Color('#89b4fa', 'dark').lower(0.2).desaturate(0.2), + success: new Color('#a6e3a1', 'dark').lower(0.2).desaturate(0.2), + notice: new Color('#f9e2af', 'dark').lower(0.2).desaturate(0.2), + warning: new Color('#fab387', 'dark').lower(0.2).desaturate(0.2), + danger: new Color('#f38ba8', 'dark').lower(0.2).desaturate(0.2), + }, + }, + }, +}; + +export const catppuccin = [catppuccinFrappe, catppuccinMacchiato, catppuccinMocha, catppuccinLatte]; diff --git a/src-web/lib/theme/themes/github.ts b/src-web/lib/theme/themes/github.ts new file mode 100644 index 00000000..fd06a57c --- /dev/null +++ b/src-web/lib/theme/themes/github.ts @@ -0,0 +1,57 @@ +import { Color } from '../color'; +import type { YaakTheme } from '../window'; + +const githubDark: YaakTheme = { + id: 'github-dark', + name: 'GitHub', + background: new Color('#0d1218', 'dark'), + backgroundHighlight: new Color('#171c23', 'dark'), + backgroundHighlightSecondary: new Color('#1c2127', 'dark'), + foreground: new Color('#dce3eb', 'dark'), + foregroundSubtle: new Color('#88919b', 'dark'), + foregroundSubtler: new Color('#6b727d', 'dark'), + colors: { + primary: new Color('#a579ef', 'dark').lift(0.1), + secondary: new Color('#6b727d', 'dark').lift(0.1), + info: new Color('#458def', 'dark').lift(0.1), + success: new Color('#3eb24f', 'dark').lift(0.1), + notice: new Color('#dca132', 'dark').lift(0.1), + warning: new Color('#ec7934', 'dark').lift(0.1), + danger: new Color('#ee5049', 'dark').lift(0.1), + }, + components: { + button: { + colors: { + primary: new Color('#a579ef', 'dark'), + secondary: new Color('#6b727d', 'dark'), + info: new Color('#458def', 'dark'), + success: new Color('#3eb24f', 'dark'), + notice: new Color('#dca132', 'dark'), + warning: new Color('#ec7934', 'dark'), + danger: new Color('#ee5049', 'dark'), + }, + }, + }, +}; + +const githubLight: YaakTheme = { + id: 'github-light', + name: 'GitHub', + background: new Color('#ffffff', 'light'), + backgroundHighlight: new Color('#e8ebee', 'light'), + backgroundHighlightSecondary: new Color('#f6f8fa', 'light'), + foreground: new Color('#1f2328', 'light'), + foregroundSubtle: new Color('#636c76', 'light'), + foregroundSubtler: new Color('#828d94', 'light'), + colors: { + primary: new Color('#8250df', 'light'), + secondary: new Color('#6e7781', 'light'), + info: new Color('#0969da', 'light'), + success: new Color('#1a7f37', 'light'), + notice: new Color('#9a6700', 'light'), + warning: new Color('#bc4c00', 'light'), + danger: new Color('#d1242f', 'light'), + }, +}; + +export const github = [githubDark, githubLight]; diff --git a/src-web/lib/theme/themes/monokai-pro.ts b/src-web/lib/theme/themes/monokai-pro.ts new file mode 100644 index 00000000..1c115657 --- /dev/null +++ b/src-web/lib/theme/themes/monokai-pro.ts @@ -0,0 +1,245 @@ +import { Color } from '../color'; +import type { YaakTheme } from '../window'; + +const monokaiProDefault: YaakTheme = { + id: 'monokai-pro', + name: 'Monokai Pro', + background: new Color('#2d2a2e', 'dark'), + foreground: new Color('#fcfcfa', 'dark'), + foregroundSubtle: new Color('#c1c0c0', 'dark'), + foregroundSubtler: new Color('#939293', 'dark'), + + colors: { + primary: new Color('#ab9df2', 'dark'), + secondary: new Color('#c1c0c0', 'dark'), + info: new Color('#78dce8', 'dark'), + success: new Color('#a9dc76', 'dark'), + notice: new Color('#ffd866', 'dark'), + warning: new Color('#fc9867', 'dark'), + danger: new Color('#ff6188', 'dark'), + }, + + components: { + appHeader: { + background: new Color('#221f22', 'dark'), + foreground: new Color('#c1c0c0', 'dark'), + foregroundSubtle: new Color('#939293', 'dark'), + foregroundSubtler: new Color('#727072', 'dark'), + }, + button: { + colors: { + primary: new Color('#ab9df2', 'dark').lower(0.1), + secondary: new Color('#c1c0c0', 'dark').lower(0.1), + info: new Color('#78dce8', 'dark').lower(0.1), + success: new Color('#a9dc76', 'dark').lower(0.1), + notice: new Color('#ffd866', 'dark').lower(0.1), + warning: new Color('#fc9867', 'dark').lower(0.1), + danger: new Color('#ff6188', 'dark').lower(0.1), + }, + }, + }, +}; + +const monokaiProClassic: YaakTheme = { + id: 'monokai-pro-classic', + name: 'Monokai Pro Classic', + background: new Color('#272822', 'dark'), + foreground: new Color('#fdfff1', 'dark'), + foregroundSubtle: new Color('#c0c1b5', 'dark'), + foregroundSubtler: new Color('#919288', 'dark'), + + colors: { + primary: new Color('#ae81ff', 'dark'), + secondary: new Color('#b2b9bd', 'dark'), + info: new Color('#66d9ef', 'dark'), + success: new Color('#a6e22e', 'dark'), + notice: new Color('#e6db74', 'dark'), + warning: new Color('#fd971f', 'dark'), + danger: new Color('#f92672', 'dark'), + }, + + components: { + appHeader: { + background: new Color('#1d1e19', 'dark'), + foreground: new Color('#b2b9bd', 'dark'), + foregroundSubtle: new Color('#767b81', 'dark'), + foregroundSubtler: new Color('#696d77', 'dark'), + }, + button: { + colors: { + primary: new Color('#ae81ff', 'dark').lower(0.1), + secondary: new Color('#b2b9bd', 'dark').lower(0.1), + info: new Color('#66d9ef', 'dark').lower(0.1), + success: new Color('#a6e22e', 'dark').lower(0.1), + notice: new Color('#e6db74', 'dark').lower(0.1), + warning: new Color('#fd971f', 'dark').lower(0.1), + danger: new Color('#f92672', 'dark').lower(0.1), + }, + }, + }, +}; + +const monokaiProMachine: YaakTheme = { + id: 'monokai-pro-machine', + name: 'Monokai Pro Machine', + background: new Color('#273136', 'dark'), + foreground: new Color('#eaf2f1', 'dark'), + foregroundSubtle: new Color('#8b9798', 'dark'), + foregroundSubtler: new Color('#6b7678', 'dark'), + + colors: { + primary: new Color('#baa0f8', 'dark'), + secondary: new Color('#b8c4c3', 'dark'), + info: new Color('#7cd5f1', 'dark'), + success: new Color('#a2e57b', 'dark'), + notice: new Color('#ffed72', 'dark'), + warning: new Color('#ffb270', 'dark'), + danger: new Color('#ff6d7e', 'dark'), + }, + + components: { + appHeader: { + background: new Color('#1d2528', 'dark'), + foreground: new Color('#b2b9bd', 'dark'), + foregroundSubtle: new Color('#767b81', 'dark'), + foregroundSubtler: new Color('#696d77', 'dark'), + }, + button: { + colors: { + primary: new Color('#baa0f8', 'dark').lower(0.1), + secondary: new Color('#b8c4c3', 'dark').lower(0.1), + info: new Color('#7cd5f1', 'dark').lower(0.1), + success: new Color('#a2e57b', 'dark').lower(0.1), + notice: new Color('#ffed72', 'dark').lower(0.1), + warning: new Color('#ffb270', 'dark').lower(0.1), + danger: new Color('#ff6d7e', 'dark').lower(0.1), + }, + }, + }, +}; + +const monokaiProOctagon: YaakTheme = { + id: 'monokai-pro-octagon', + name: 'Monokai Pro Octagon', + background: new Color('#282a3a', 'dark'), + foreground: new Color('#eaf2f1', 'dark'), + foregroundSubtle: new Color('#b2b9bd', 'dark'), + foregroundSubtler: new Color('#767b81', 'dark'), + + colors: { + primary: new Color('#c39ac9', 'dark'), + secondary: new Color('#b2b9bd', 'dark'), + info: new Color('#9cd1bb', 'dark'), + success: new Color('#bad761', 'dark'), + notice: new Color('#ffd76d', 'dark'), + warning: new Color('#ff9b5e', 'dark'), + danger: new Color('#ff657a', 'dark'), + }, + + components: { + appHeader: { + background: new Color('#1e1f2b', 'dark'), + foreground: new Color('#b2b9bd', 'dark'), + foregroundSubtle: new Color('#767b81', 'dark'), + foregroundSubtler: new Color('#696d77', 'dark'), + }, + button: { + colors: { + primary: new Color('#c39ac9', 'dark').lower(0.1).desaturate(0.1), + secondary: new Color('#b2b9bd', 'dark').lower(0.1).desaturate(0.1), + info: new Color('#9cd1bb', 'dark').lower(0.1).desaturate(0.1), + success: new Color('#bad761', 'dark').lower(0.1).desaturate(0.1), + notice: new Color('#ffd76d', 'dark').lower(0.1).desaturate(0.1), + warning: new Color('#ff9b5e', 'dark').lower(0.1).desaturate(0.1), + danger: new Color('#ff657a', 'dark').lower(0.1).desaturate(0.1), + }, + }, + }, +}; + +const monokaiProRistretto: YaakTheme = { + id: 'monokai-pro-ristretto', + name: 'Monokai Pro Ristretto', + background: new Color('#2c2525', 'dark'), + foreground: new Color('#fff1f3', 'dark'), + foregroundSubtle: new Color('#c3b7b8', 'dark'), + foregroundSubtler: new Color('#948a8b', 'dark'), + + colors: { + primary: new Color('#a8a9eb', 'dark'), + secondary: new Color('#c3b7b8', 'dark'), + info: new Color('#85dacc', 'dark'), + success: new Color('#adda78', 'dark'), + notice: new Color('#f9cc6c', 'dark'), + warning: new Color('#f38d70', 'dark'), + danger: new Color('#fd6883', 'dark'), + }, + + components: { + appHeader: { + background: new Color('#211c1c', 'dark'), + foreground: new Color('#c3b7b8', 'dark'), + foregroundSubtle: new Color('#948a8b', 'dark'), + foregroundSubtler: new Color('#72696a', 'dark'), + }, + button: { + colors: { + primary: new Color('#a8a9eb', 'dark').lower(0.1), + secondary: new Color('#c3b7b8', 'dark').lower(0.1), + info: new Color('#85dacc', 'dark').lower(0.1), + success: new Color('#adda78', 'dark').lower(0.1), + notice: new Color('#f9cc6c', 'dark').lower(0.1), + warning: new Color('#f38d70', 'dark').lower(0.1), + danger: new Color('#fd6883', 'dark').lower(0.1), + }, + }, + }, +}; + +const monokaiProSpectrum: YaakTheme = { + id: 'monokai-pro-spectrum', + name: 'Monokai Pro Spectrum', + background: new Color('#222222', 'dark'), + foreground: new Color('#f7f1ff', 'dark'), + foregroundSubtle: new Color('#bab6c0', 'dark'), + foregroundSubtler: new Color('#8b888f', 'dark'), + + colors: { + primary: new Color('#948ae3', 'dark'), + secondary: new Color('#bab6c0', 'dark'), + info: new Color('#5ad4e6', 'dark'), + success: new Color('#7bd88f', 'dark'), + notice: new Color('#fce566', 'dark'), + warning: new Color('#fd9353', 'dark'), + danger: new Color('#fc618d', 'dark'), + }, + + components: { + appHeader: { + background: new Color('#191919', 'dark'), + foreground: new Color('#bab6c0', 'dark'), + foregroundSubtle: new Color('#8b888f', 'dark'), + foregroundSubtler: new Color('#69676c', 'dark'), + }, + button: { + colors: { + primary: new Color('#948ae3', 'dark').lower(0.1), + secondary: new Color('#bab6c0', 'dark').lower(0.1), + info: new Color('#5ad4e6', 'dark').lower(0.1), + success: new Color('#7bd88f', 'dark').lower(0.1), + notice: new Color('#fce566', 'dark').lower(0.1), + warning: new Color('#fd9353', 'dark').lower(0.1), + danger: new Color('#fc618d', 'dark').lower(0.1), + }, + }, + }, +}; + +export const monokaiPro = [ + monokaiProDefault, + monokaiProClassic, + monokaiProMachine, + monokaiProOctagon, + monokaiProRistretto, + monokaiProSpectrum, +]; diff --git a/src-web/lib/theme/themes/relaxing.ts b/src-web/lib/theme/themes/relaxing.ts new file mode 100644 index 00000000..76466b66 --- /dev/null +++ b/src-web/lib/theme/themes/relaxing.ts @@ -0,0 +1,20 @@ +import { Color } from '../color'; +import type { YaakTheme } from '../window'; + +const relaxingDefault: YaakTheme = { + name: 'Relaxing', + id: 'relaxing', + background: new Color('#2b1e3b', 'dark'), + foreground: new Color('#ede2f5', 'dark'), + colors: { + primary: new Color('#cba6f7', 'dark'), + secondary: new Color('#bac2de', 'dark'), + info: new Color('#89b4fa', 'dark'), + success: new Color('#a6e3a1', 'dark'), + notice: new Color('#f9e2af', 'dark'), + warning: new Color('#fab387', 'dark'), + danger: new Color('#f38ba8', 'dark'), + }, +}; + +export const relaxing = [relaxingDefault]; diff --git a/src-web/lib/theme/themes/rose-pine.ts b/src-web/lib/theme/themes/rose-pine.ts new file mode 100644 index 00000000..a3035982 --- /dev/null +++ b/src-web/lib/theme/themes/rose-pine.ts @@ -0,0 +1,108 @@ +import { Color } from '../color'; +import type { YaakTheme } from '../window'; + +const rosePineClassic: YaakTheme = { + id: 'rose-pine', + name: 'Rosé Pine', + background: new Color('#191724', 'dark'), + foreground: new Color('#e0def4', 'dark'), + foregroundSubtle: new Color('#908caa', 'dark'), + foregroundSubtler: new Color('#6e6a86', 'dark'), + colors: { + primary: new Color('#c4a7e7', 'dark'), + secondary: new Color('#6e6a86', 'dark'), + info: new Color('#67abcb', 'dark'), + success: new Color('#9cd8d8', 'dark'), + notice: new Color('#f6c177', 'dark'), + warning: new Color('#f1a3a1', 'dark'), + danger: new Color('#eb6f92', 'dark'), + }, + components: { + responsePane: { + background: new Color('#1f1d2e', 'dark'), + }, + sidebar: { + background: new Color('#1f1d2e', 'dark'), + }, + menu: { + background: new Color('#393552', 'dark'), + foregroundSubtle: new Color('#908caa', 'dark').lift(0.15), + foregroundSubtler: new Color('#6e6a86', 'dark').lift(0.15), + }, + }, +}; + +const rosePineMoon: YaakTheme = { + id: 'rose-pine-moon', + name: 'Rosé Pine Moon', + background: new Color('#232136', 'dark'), + foreground: new Color('#e0def4', 'dark'), + foregroundSubtle: new Color('#908caa', 'dark'), + foregroundSubtler: new Color('#6e6a86', 'dark'), + colors: { + primary: new Color('#c4a7e7', 'dark'), + secondary: new Color('#908caa', 'dark'), + info: new Color('#68aeca', 'dark'), + success: new Color('#9ccfd8', 'dark'), + notice: new Color('#f6c177', 'dark'), + warning: new Color('#ea9a97', 'dark'), + danger: new Color('#eb6f92', 'dark'), + }, + components: { + responsePane: { + background: new Color('#2a273f', 'dark'), + }, + sidebar: { + background: new Color('#2a273f', 'dark'), + }, + menu: { + background: new Color('#393552', 'dark'), + foregroundSubtle: new Color('#908caa', 'dark').lift(0.15), + foregroundSubtler: new Color('#6e6a86', 'dark').lift(0.15), + }, + }, +}; + +const rosePineDawn: YaakTheme = { + id: 'rose-pine-dawn', + name: 'Rosé Pine Dawn', + background: new Color('#faf4ed', 'light'), + backgroundHighlight: new Color('#dfdad9', 'light'), + backgroundHighlightSecondary: new Color('#f4ede8', 'light'), + foreground: new Color('#575279', 'light'), + foregroundSubtle: new Color('#797593', 'light'), + foregroundSubtler: new Color('#9893a5', 'light'), + colors: { + primary: new Color('#9070ad', 'light'), + secondary: new Color('#6e6a86', 'light'), + info: new Color('#2d728d', 'light'), + success: new Color('#4f8c96', 'light'), + notice: new Color('#cb862d', 'light'), + warning: new Color('#ce7b78', 'light'), + danger: new Color('#b4637a', 'light'), + }, + components: { + responsePane: { + backgroundHighlight: new Color('#e8e4e2', 'light'), + }, + sidebar: { + backgroundHighlight: new Color('#e8e4e2', 'light'), + }, + appHeader: { + backgroundHighlight: new Color('#e8e4e2', 'light'), + }, + input: { + backgroundHighlight: new Color('#dfdad9', 'light'), + }, + dialog: { + backgroundHighlight: new Color('#e8e4e2', 'light'), + }, + menu: { + background: new Color('#f2e9e1', 'light'), + backgroundHighlight: new Color('#dfdad9', 'light'), + backgroundHighlightSecondary: new Color('#6e6a86', 'light'), + }, + }, +}; + +export const rosePine = [rosePineClassic, rosePineDawn, rosePineMoon]; diff --git a/src-web/lib/theme/themes/yaak.ts b/src-web/lib/theme/themes/yaak.ts new file mode 100644 index 00000000..ece7ace6 --- /dev/null +++ b/src-web/lib/theme/themes/yaak.ts @@ -0,0 +1,84 @@ +import { Color } from '../color'; +import type { YaakTheme } from '../window'; + +export const yaakLight: YaakTheme = { + id: 'yaak-light', + name: 'Yaak', + background: new Color('hsl(216,24%,100%)', 'light'), + backgroundHighlight: new Color('hsl(216,24%,93%)', 'light'), + backgroundHighlightSecondary: new Color('hsl(216,24%,87%)', 'light'), + foreground: new Color('hsl(219,23%,15%)', 'light'), + foregroundSubtle: new Color('hsl(219,23%,15%)', 'light').lower(0.3), + foregroundSubtler: new Color('hsl(219,23%,15%)', 'light').lower(0.5), + colors: { + primary: new Color('hsl(266,100%,70%)', 'light'), + secondary: new Color('hsl(220,24%,59%)', 'light'), + info: new Color('hsl(206,100%,48%)', 'light'), + success: new Color('hsl(155,95%,33%)', 'light'), + notice: new Color('hsl(45,100%,41%)', 'light'), + warning: new Color('hsl(30,100%,43%)', 'light'), + danger: new Color('hsl(335,75%,57%)', 'light'), + }, + components: { + sidebar: { + background: new Color('hsl(216,24%,97%)', 'light'), + backgroundHighlight: new Color('hsl(216,24%,93%)', 'light'), + backgroundHighlightSecondary: new Color('hsl(216,24%,90%)', 'light'), + }, + }, +}; + +export const yaakDark: YaakTheme = { + id: 'yaak-dark', + name: 'Yaak', + background: new Color('hsl(244,23%,13%)', 'dark'), + backgroundHighlight: new Color('hsl(244,23%,23%)', 'dark'), + backgroundHighlightSecondary: new Color('hsl(244,23%,20%)', 'dark'), + foreground: new Color('hsl(245,23%,86%)', 'dark'), + foregroundSubtle: new Color('hsl(245,20%,65%)', 'dark'), + foregroundSubtler: new Color('hsl(245,18%,50%)', 'dark'), + + colors: { + primary: new Color('hsl(266,100%,79%)', 'dark'), + secondary: new Color('hsl(245,23%,60%)', 'dark'), + info: new Color('hsl(206,100%,63%)', 'dark'), + success: new Color('hsl(150,99%,44%)', 'dark'), + notice: new Color('hsl(48,80%,63%)', 'dark'), + warning: new Color('hsl(28,100%,61%)', 'dark'), + danger: new Color('hsl(342,90%,68%)', 'dark'), + }, + + components: { + button: { + colors: { + primary: new Color('hsl(266,100%,79%)', 'dark').lower(0.1), + secondary: new Color('hsl(245,23%,60%)', 'dark').lower(0.1), + info: new Color('hsl(206,100%,63%)', 'dark').lower(0.1), + success: new Color('hsl(150,99%,44%)', 'dark').lower(0.1), + notice: new Color('hsl(48,80%,63%)', 'dark').lower(0.1), + warning: new Color('hsl(28,100%,61%)', 'dark').lower(0.1), + danger: new Color('hsl(342,90%,68%)', 'dark').lower(0.1), + }, + }, + input: { + backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'), + }, + dialog: { + backgroundHighlight: new Color('hsl(244,23%,24%)', 'dark'), + }, + sidebar: { + background: new Color('hsl(243,23%,16%)', 'dark'), + backgroundHighlight: new Color('hsl(244,23%,22%)', 'dark'), + }, + responsePane: { + background: new Color('hsl(243,23%,16%)', 'dark'), + backgroundHighlight: new Color('hsl(244,23%,16%)', 'dark').lift(0.08), + }, + appHeader: { + background: new Color('hsl(244,23%,12%)', 'dark'), + backgroundHighlight: new Color('hsl(244,23%,12%)', 'dark').lift(0.1), + }, + }, +}; + +export const yaak = [yaakDark, yaakLight];