starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-18 07:23:51 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

More themes!

Browse Source
This commit is contained in:
Gregory Schier
2024-05-23 09:40:11 -07:00
parent ab33630ef6
commit 9e6bce0e41
11 changed files with 729 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src-web/components/Overlay.tsx
View File

@@ -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' && (
<div data-tauri-drag-region className="absolute top-0 left-0 h-md right-0" />
)}
</motion.div>
</FocusTrap>
)}

17
src-web/components/Settings/SettingsAppearance.tsx
View File

@@ -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() {
</div>
<VStack
space={3}
className="mt-3 w-full bg-background p-3 border border-dashed border-background-highlight rounded"
className="mt-3 w-full bg-background p-3 border border-dashed border-background-highlight rounded overflow-x-auto"
>
<div className="text-sm text-fg font-bold">
Theme Preview <span className="text-fg-subtle">({appearance})</span>
@@ -157,6 +160,18 @@ export function SettingsAppearance() {
contentType="application/javascript"
/>
</VStack>
<Button
color="secondary"
variant="border"
size="sm"
className="mr-auto"
rightSlot={<Icon icon="externalLink" />}
onClick={async () => {
await invoke('cmd_new_window', { url: window.location.pathname });
}}
>
Open Preview Window
</Button>
</VStack>
);
}

4
src-web/components/Workspace.tsx
View File

@@ -209,10 +209,10 @@ export default function Workspace() {
}
interface HeaderSizeProps extends HTMLAttributes<HTMLDivElement> {
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;

6
src-web/hooks/useThemes.ts
View File

@@ -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)

396
src-web/lib/theme/themes.ts
View File

@@ -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;

172
src-web/lib/theme/themes/catppuccin.ts Normal file
View File

@@ -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];

57
src-web/lib/theme/themes/github.ts Normal file
View File

@@ -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];

245
src-web/lib/theme/themes/monokai-pro.ts Normal file
View File

@@ -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,
];

20
src-web/lib/theme/themes/relaxing.ts Normal file
View File

@@ -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];

108
src-web/lib/theme/themes/rose-pine.ts Normal file
View File

@@ -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];

84
src-web/lib/theme/themes/yaak.ts Normal file
View File

@@ -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];