Mostly working

src-web/lib/theme/themes.ts

@@ -1,63 +1,108 @@
+import type { GetThemesResponse } from '@yaakapp-internal/plugins';
+import { invokeCmd } from '../tauri';
 import type { Appearance } from './appearance';
 import { resolveAppearance } from './appearance';
-import { catppuccin } from './themes/catppuccin';
-import { dracula } from './themes/dracula';
-import { github } from './themes/github';
-import { gruvbox } from './themes/gruvbox';
-import { hotdogStand } from './themes/hotdog-stand';
-import { monokaiPro } from './themes/monokai-pro';
-import { nord } from './themes/nord';
-import { moonlight } from './themes/moonlight';
-import { relaxing } from './themes/relaxing';
-import { rosePine } from './themes/rose-pine';
-import { yaak, yaakDark, yaakLight } from './themes/yaak';
-import { isThemeDark } from './window';
 
-export const defaultDarkTheme = yaakDark;
-export const defaultLightTheme = yaakLight;
-
-const allThemes = [
-  ...yaak,
-  ...catppuccin,
-  ...dracula,
-  ...relaxing,
-  ...rosePine,
-  ...github,
-  ...gruvbox,
-  ...monokaiPro,
-  ...nord,
-  ...moonlight,
-  ...hotdogStand,
-];
-
-export function getThemes() {
-  const dark = defaultDarkTheme;
-  const light = defaultLightTheme;
-
-  const otherThemes = allThemes
-    .filter((t) => t.id !== dark.id && t.id !== light.id)
-    .sort((a, b) => a.name.localeCompare(b.name));
-
-  const themes = [dark, light, ...otherThemes];
-  return { themes, fallback: { dark, light } };
+export async function getThemes() {
+  const themes = (await invokeCmd<GetThemesResponse[]>('cmd_get_themes')).flatMap((t) => t.themes);
+  themes.sort((a, b) => a.label.localeCompare(b.label));
+  return { themes: [yaakDark, yaakLight, ...themes] };
 }
 
-export function getResolvedTheme(
+export async function getResolvedTheme(
   preferredAppearance: Appearance,
   appearanceSetting: string,
   themeLight: string,
   themeDark: string,
 ) {
   const appearance = resolveAppearance(preferredAppearance, appearanceSetting);
-  const { themes, fallback } = getThemes();
+  const { themes } = await getThemes();
 
-  const darkThemes = themes.filter((t) => isThemeDark(t));
-  const lightThemes = themes.filter((t) => !isThemeDark(t));
+  const darkThemes = themes.filter((t) => t.dark);
+  const lightThemes = themes.filter((t) => !t.dark);
 
-  const dark = darkThemes.find((t) => t.id === themeDark) ?? fallback.dark;
-  const light = lightThemes.find((t) => t.id === themeLight) ?? fallback.light;
+  const dark = darkThemes.find((t) => t.id === themeDark) ?? darkThemes[0] ?? yaakDark;
+  const light = lightThemes.find((t) => t.id === themeLight) ?? lightThemes[0] ?? yaakLight;
 
   const active = appearance === 'dark' ? dark : light;
 
   return { dark, light, active };
 }
+
+const yaakDark = {
+  id: 'yaak-dark',
+  label: 'Yaak',
+  dark: true,
+  base: {
+    surface: 'hsl(244,23%,14%)',
+    surfaceHighlight: 'hsl(244,23%,20%)',
+    text: 'hsl(245,23%,84%)',
+    textSubtle: 'hsl(245,18%,58%)',
+    textSubtlest: 'hsl(245,18%,45%)',
+    border: 'hsl(244,23%,25%)',
+    primary: 'hsl(266,100%,79%)',
+    secondary: 'hsl(245,23%,60%)',
+    info: 'hsl(206,100%,63%)',
+    success: 'hsl(150,99%,44%)',
+    notice: 'hsl(48,80%,63%)',
+    warning: 'hsl(28,100%,61%)',
+    danger: 'hsl(342,90%,68%)',
+  },
+  components: {
+    button: {
+      primary: 'hsl(266,100%,71.1%)',
+      secondary: 'hsl(244,23%,54%)',
+      info: 'hsl(206,100%,56.7%)',
+      success: 'hsl(150,99%,37.4%)',
+      notice: 'hsl(48,80%,50.4%)',
+      warning: 'hsl(28,100%,54.9%)',
+      danger: 'hsl(342,90%,61.2%)',
+    },
+    dialog: {
+      border: 'hsl(244,23%,24%)',
+    },
+    sidebar: {
+      surface: 'hsl(243,23%,16%)',
+      border: 'hsl(244,23%,22%)',
+    },
+    responsePane: {
+      surface: 'hsl(243,23%,16%)',
+      border: 'hsl(246,23%,22.72%)',
+    },
+    appHeader: {
+      surface: 'hsl(244,23%,12%)',
+      border: 'hsl(244,23%,20.8%)',
+    },
+  },
+};
+
+const yaakLight = {
+  id: 'yaak-light',
+  label: 'Yaak',
+  dark: false,
+  base: {
+    surface: 'hsl(0,0%,100%)',
+    surfaceHighlight: 'hsl(218,24%,87%)',
+    text: 'hsl(217,24%,15%)',
+    textSubtle: 'hsl(217,24%,40%)',
+    textSubtlest: 'hsl(217,24%,58%)',
+    border: 'hsl(217,22%,93%)',
+    primary: 'hsl(266,100%,70%)',
+    secondary: 'hsl(220,24%,59%)',
+    info: 'hsl(206,100%,48%)',
+    success: 'hsl(155,95%,33%)',
+    notice: 'hsl(45,100%,41%)',
+    warning: 'hsl(30,100%,43%)',
+    danger: 'hsl(335,75%,57%)',
+  },
+  components: {
+    sidebar: {
+      surface: 'hsl(220,20%,97%)',
+      border: 'hsl(217,22%,93%)',
+      surfaceHighlight: 'hsl(217,25%,90%)',
+    },
+  },
+};
+
+export const defaultDarkTheme = yaakDark;
+export const defaultLightTheme = yaakLight;

src-web/lib/theme/themes/catppuccin.ts

@@ -1,156 +0,0 @@
-import { YaakColor } from '../yaakColor';
-import type { YaakTheme } from '../window';
-
-export const catppuccinLatte: YaakTheme = {
-  name: 'Catppuccin Latte',
-  id: 'catppuccin-latte',
-  surface: new YaakColor('#eff1f5', 'light'),
-  text: new YaakColor('#4c4f69', 'dark'),
-  textSubtle: new YaakColor('#6c6f85', 'light'),
-  textSubtlest: new YaakColor('#8c8fa1', 'light'),
-  primary: new YaakColor('#8839ef', 'light'),
-  secondary: new YaakColor('#6c6f85', 'light'),
-  info: new YaakColor('#7287fd', 'light'),
-  success: new YaakColor('#179299', 'light'),
-  notice: new YaakColor('#df8e1d', 'light'),
-  warning: new YaakColor('#fe640b', 'light'),
-  danger: new YaakColor('#e64553', 'light'),
-  components: {
-    sidebar: {
-      surface: new YaakColor('#e6e9ef', 'light'),
-      border: new YaakColor('#e6e9ef', 'light').lift(0.05),
-    },
-    appHeader: {
-      surface: new YaakColor('#dce0e8', 'light'),
-      border: new YaakColor('#e6e9ef', 'light').lift(0.05),
-    },
-  },
-};
-
-export const catppuccinMacchiato: YaakTheme = {
-  name: 'Catppuccin Macchiato',
-  id: 'catppuccin-macchiato',
-  surface: new YaakColor('#1e2030', 'dark'),
-  text: new YaakColor('#cad3f5', 'dark'),
-  textSubtle: new YaakColor('#a5adcb', 'dark'),
-  textSubtlest: new YaakColor('#8087a2', 'dark'),
-  primary: new YaakColor('#c6a0f6', 'dark'),
-  secondary: new YaakColor('#b8c0e0', 'dark'),
-  info: new YaakColor('#8aadf4', 'dark'),
-  success: new YaakColor('#a6da95', 'dark'),
-  notice: new YaakColor('#eed49f', 'dark'),
-  warning: new YaakColor('#f5a97f', 'dark'),
-  danger: new YaakColor('#ed8796', 'dark'),
-  components: {
-    dialog: {
-      surface: new YaakColor('#181825', 'dark'),
-    },
-    sidebar: {
-      surface: new YaakColor('#24273a', 'dark'),
-      border: new YaakColor('#24273a', 'dark').lift(0.05),
-    },
-    appHeader: {
-      surface: new YaakColor('#181926', 'dark'),
-      border: new YaakColor('#181926', 'dark').lift(0.1),
-    },
-    responsePane: {
-      surface: new YaakColor('#24273a', 'dark'),
-      border: new YaakColor('#24273a', 'dark').lift(0.05),
-    },
-    button: {
-      primary: new YaakColor('#c6a0f6', 'dark').lower(0.1),
-      secondary: new YaakColor('#b8c0e0', 'dark').lower(0.1),
-      info: new YaakColor('#8aadf4', 'dark').lower(0.1),
-      success: new YaakColor('#a6da95', 'dark').lower(0.1),
-      notice: new YaakColor('#eed49f', 'dark').lower(0.1),
-      warning: new YaakColor('#f5a97f', 'dark').lower(0.1),
-      danger: new YaakColor('#ed8796', 'dark').lower(0.1),
-    },
-  },
-};
-
-export const catppuccinFrappe: YaakTheme = {
-  name: 'Catppuccin Frappé',
-  id: 'catppuccin-frappe',
-  surface: new YaakColor('#292c3c', 'dark'),
-  text: new YaakColor('#c6d0f5', 'dark'),
-  textSubtle: new YaakColor('#a5adce', 'dark'),
-  textSubtlest: new YaakColor('#838ba7', 'dark'),
-  primary: new YaakColor('#ca9ee6', 'dark'),
-  secondary: new YaakColor('#b8c0e0', 'dark'),
-  info: new YaakColor('#8caaee', 'dark'),
-  success: new YaakColor('#a6d189', 'dark'),
-  notice: new YaakColor('#e5c890', 'dark'),
-  warning: new YaakColor('#ef9f76', 'dark'),
-  danger: new YaakColor('#e78284', 'dark'),
-  components: {
-    dialog: {
-      surface: new YaakColor('#181825', 'dark'),
-    },
-    sidebar: {
-      surface: new YaakColor('#303446', 'dark'),
-      border: new YaakColor('#303446', 'dark').lift(0.05),
-    },
-    appHeader: {
-      surface: new YaakColor('#232634', 'dark'),
-      border: new YaakColor('#232634', 'dark').lift(0.1),
-    },
-    responsePane: {
-      surface: new YaakColor('#303446', 'dark'),
-      border: new YaakColor('#303446', 'dark').lift(0.05),
-    },
-    button: {
-      primary: new YaakColor('#ca9ee6', 'dark').lower(0.1),
-      secondary: new YaakColor('#b8c0e0', 'dark').lower(0.1),
-      info: new YaakColor('#8caaee', 'dark').lower(0.1),
-      success: new YaakColor('#a6d189', 'dark').lower(0.1),
-      notice: new YaakColor('#e5c890', 'dark').lower(0.1),
-      warning: new YaakColor('#ef9f76', 'dark').lower(0.1),
-      danger: new YaakColor('#e78284', 'dark').lower(0.1),
-    },
-  },
-};
-
-const catppuccinMocha: YaakTheme = {
-  name: 'Catppuccin Mocha',
-  id: 'catppuccin-mocha',
-  surface: new YaakColor('#181825', 'dark'),
-  text: new YaakColor('#cdd6f4', 'dark'),
-  textSubtle: new YaakColor('#a6adc8', 'dark'),
-  textSubtlest: new YaakColor('#7f849c', 'dark'),
-  primary: new YaakColor('#c6a0f6', 'dark'),
-  secondary: new YaakColor('#bac2de', 'dark'),
-  info: new YaakColor('#89b4fa', 'dark'),
-  success: new YaakColor('#a6e3a1', 'dark'),
-  notice: new YaakColor('#f9e2af', 'dark'),
-  warning: new YaakColor('#fab387', 'dark'),
-  danger: new YaakColor('#f38ba8', 'dark'),
-  components: {
-    dialog: {
-      surface: new YaakColor('#181825', 'dark'),
-    },
-    sidebar: {
-      surface: new YaakColor('#1e1e2e', 'dark'),
-      border: new YaakColor('#1e1e2e', 'dark').lift(0.05),
-    },
-    appHeader: {
-      surface: new YaakColor('#11111b', 'dark'),
-      border: new YaakColor('#11111b', 'dark').lift(0.1),
-    },
-    responsePane: {
-      surface: new YaakColor('#1e1e2e', 'dark'),
-      border: new YaakColor('#1e1e2e', 'dark').lift(0.05),
-    },
-    button: {
-      primary: new YaakColor('#cba6f7', 'dark').lower(0.2).desaturate(0.2),
-      secondary: new YaakColor('#bac2de', 'dark').lower(0.2).desaturate(0.2),
-      info: new YaakColor('#89b4fa', 'dark').lower(0.2).desaturate(0.2),
-      success: new YaakColor('#a6e3a1', 'dark').lower(0.2).desaturate(0.2),
-      notice: new YaakColor('#f9e2af', 'dark').lower(0.2).desaturate(0.2),
-      warning: new YaakColor('#fab387', 'dark').lower(0.2).desaturate(0.2),
-      danger: new YaakColor('#f38ba8', 'dark').lower(0.2).desaturate(0.2),
-    },
-  },
-};
-
-export const catppuccin = [catppuccinFrappe, catppuccinMacchiato, catppuccinMocha, catppuccinLatte];

src-web/lib/theme/themes/dracula.ts

@@ -1,29 +0,0 @@
-import type { YaakTheme } from '../window';
-import { YaakColor } from '../yaakColor';
-
-const draculaDefault: YaakTheme = {
-  id: 'dracula',
-  name: 'Dracula',
-  surface: new YaakColor('#282A36', 'dark'),
-  surfaceHighlight: new YaakColor('#343746', 'dark'),
-  text: new YaakColor('#F8F8F2', 'dark'),
-  textSubtle: new YaakColor('hsl(232,14%,65%)', 'dark'),
-  textSubtlest: new YaakColor('hsl(232,14%,50%)', 'dark'),
-  primary: new YaakColor('#BD93F9', 'dark'),
-  secondary: new YaakColor('#6272A4', 'dark'),
-  info: new YaakColor('#8BE9FD', 'dark'),
-  success: new YaakColor('#50FA7B', 'dark'),
-  notice: new YaakColor('#F1FA8C', 'dark'),
-  warning: new YaakColor('#FFB86C', 'dark'),
-  danger: new YaakColor('#FF5555', 'dark'),
-  components: {
-    sidebar: {
-      backdrop: new YaakColor('hsl(230,15%,24%)', 'dark'),
-    },
-    appHeader: {
-      backdrop: new YaakColor('#21222C', 'dark'),
-    },
-  },
-};
-
-export const dracula = [draculaDefault];

src-web/lib/theme/themes/github.ts

@@ -1,52 +0,0 @@
-import { YaakColor } from '../yaakColor';
-import type { YaakTheme } from '../window';
-
-const githubDark: YaakTheme = {
-  id: 'github-dark',
-  name: 'GitHub',
-  surface: new YaakColor('#0d1218', 'dark'),
-  border: new YaakColor('#171c23', 'dark'),
-  surfaceHighlight: new YaakColor('#1c2127', 'dark'),
-  text: new YaakColor('#dce3eb', 'dark'),
-  textSubtle: new YaakColor('#88919b', 'dark'),
-  textSubtlest: new YaakColor('#6b727d', 'dark'),
-  primary: new YaakColor('#a579ef', 'dark').lift(0.1),
-  secondary: new YaakColor('#6b727d', 'dark').lift(0.1),
-  info: new YaakColor('#458def', 'dark').lift(0.1),
-  success: new YaakColor('#3eb24f', 'dark').lift(0.1),
-  notice: new YaakColor('#dca132', 'dark').lift(0.1),
-  warning: new YaakColor('#ec7934', 'dark').lift(0.1),
-  danger: new YaakColor('#ee5049', 'dark').lift(0.1),
-  components: {
-    button: {
-      primary: new YaakColor('#a579ef', 'dark'),
-      secondary: new YaakColor('#6b727d', 'dark'),
-      info: new YaakColor('#458def', 'dark'),
-      success: new YaakColor('#3eb24f', 'dark'),
-      notice: new YaakColor('#dca132', 'dark'),
-      warning: new YaakColor('#ec7934', 'dark'),
-      danger: new YaakColor('#ee5049', 'dark'),
-    },
-  },
-};
-
-export const githubLight: YaakTheme = {
-  id: 'github-light',
-  name: 'GitHub',
-  surface: new YaakColor('#ffffff', 'light'),
-  surfaceHighlight: new YaakColor('hsl(210,29%,94%)', 'light'),
-  border: new YaakColor('hsl(210,15%,92%)', 'light'),
-  borderSubtle: new YaakColor('hsl(210,15%,92%)', 'light'),
-  text: new YaakColor('#1f2328', 'light'),
-  textSubtle: new YaakColor('#636c76', 'light'),
-  textSubtlest: new YaakColor('#828d94', 'light'),
-  primary: new YaakColor('#8250df', 'light'),
-  secondary: new YaakColor('#6e7781', 'light'),
-  info: new YaakColor('hsl(212,92%,48%)', 'light'),
-  success: new YaakColor('hsl(137,66%,32%)', 'light'),
-  notice: new YaakColor('hsl(40,100%,40%)', 'light'),
-  warning: new YaakColor('hsl(24,100%,44%)', 'light'),
-  danger: new YaakColor('#d1242f', 'light'),
-};
-
-export const github = [githubDark, githubLight];

src-web/lib/theme/themes/gruvbox.ts

@@ -1,21 +0,0 @@
-import type { YaakTheme } from '../window';
-import { YaakColor } from '../yaakColor';
-
-export const gruvboxDefault: YaakTheme = {
-  id: 'gruvbox',
-  name: 'Gruvbox',
-  surface: new YaakColor('#282828', 'dark'),
-  surfaceHighlight: new YaakColor('#32302f', 'dark'),
-  text: new YaakColor('#f9f5d7', 'dark'),
-  textSubtle: new YaakColor('#bdae93', 'dark'),
-  textSubtlest: new YaakColor('#928374', 'dark'),
-  primary: new YaakColor('#d3869b', 'dark'),
-  secondary: new YaakColor('#83a598', 'dark'),
-  info: new YaakColor('#8ec07c', 'dark'),
-  success: new YaakColor('#b8bb26', 'dark'),
-  notice: new YaakColor('#fabd2f', 'dark'),
-  warning: new YaakColor('#fe8019', 'dark'),
-  danger: new YaakColor('#fb4934', 'dark'),
-};
-
-export const gruvbox = [gruvboxDefault];

src-web/lib/theme/themes/hotdog-stand.ts

@@ -1,58 +0,0 @@
-import { YaakColor } from '../yaakColor';
-import type { YaakTheme } from '../window';
-
-export const hotdogStandDefault: YaakTheme = {
-  id: 'hotdog-stand',
-  name: 'Hotdog Stand',
-  surface: new YaakColor('#ff0000', 'dark'),
-  border: new YaakColor('#000000', 'dark'),
-  surfaceHighlight: new YaakColor('#000000', 'dark'),
-  text: new YaakColor('#ffffff', 'dark'),
-  textSubtle: new YaakColor('#ffffff', 'dark'),
-  textSubtlest: new YaakColor('#ffff00', 'dark'),
-  primary: new YaakColor('#ffff00', 'dark'),
-  secondary: new YaakColor('#ffff00', 'dark'),
-  info: new YaakColor('#ffff00', 'dark'),
-  success: new YaakColor('#ffff00', 'dark'),
-  notice: new YaakColor('#ffff00', 'dark'),
-  warning: new YaakColor('#ffff00', 'dark'),
-  danger: new YaakColor('#ffff00', 'dark'),
-  components: {
-    appHeader: {
-      surface: new YaakColor('#000000', 'dark'),
-      text: new YaakColor('#ffffff', 'dark'),
-      textSubtle: new YaakColor('#ffff00', 'dark'),
-      textSubtlest: new YaakColor('#ff0000', 'dark'),
-    },
-    menu: {
-      surface: new YaakColor('#000000', 'dark'),
-      border: new YaakColor('#ff0000', 'dark'),
-      surfaceHighlight: new YaakColor('#ff0000', 'dark'),
-      text: new YaakColor('#ffffff', 'dark'),
-      textSubtle: new YaakColor('#ffff00', 'dark'),
-      textSubtlest: new YaakColor('#ffff00', 'dark'),
-    },
-    button: {
-      surface: new YaakColor('#000000', 'dark'),
-      text: new YaakColor('#ffffff', 'dark'),
-      primary: new YaakColor('#000000', 'dark'),
-      secondary: new YaakColor('#ffffff', 'dark'),
-      info: new YaakColor('#000000', 'dark'),
-      success: new YaakColor('#ffff00', 'dark'),
-      notice: new YaakColor('#ffff00', 'dark'),
-      warning: new YaakColor('#000000', 'dark'),
-      danger: new YaakColor('#ff0000', 'dark'),
-    },
-    editor: {
-      primary: new YaakColor('#ffffff', 'dark'),
-      secondary: new YaakColor('#ffffff', 'dark'),
-      info: new YaakColor('#ffffff', 'dark'),
-      success: new YaakColor('#ffffff', 'dark'),
-      notice: new YaakColor('#ffff00', 'dark'),
-      warning: new YaakColor('#ffffff', 'dark'),
-      danger: new YaakColor('#ffffff', 'dark'),
-    },
-  },
-};
-
-export const hotdogStand = [hotdogStandDefault];

src-web/lib/theme/themes/monokai-pro.ts

@@ -1,221 +0,0 @@
-import { YaakColor } from '../yaakColor';
-import type { YaakTheme } from '../window';
-
-export const monokaiProDefault: YaakTheme = {
-  id: 'monokai-pro',
-  name: 'Monokai Pro',
-  surface: new YaakColor('#2d2a2e', 'dark'),
-  text: new YaakColor('#fcfcfa', 'dark'),
-  textSubtle: new YaakColor('#c1c0c0', 'dark'),
-  textSubtlest: new YaakColor('#939293', 'dark'),
-
-  primary: new YaakColor('#ab9df2', 'dark'),
-  secondary: new YaakColor('#c1c0c0', 'dark'),
-  info: new YaakColor('#78dce8', 'dark'),
-  success: new YaakColor('#a9dc76', 'dark'),
-  notice: new YaakColor('#ffd866', 'dark'),
-  warning: new YaakColor('#fc9867', 'dark'),
-  danger: new YaakColor('#ff6188', 'dark'),
-
-  components: {
-    appHeader: {
-      surface: new YaakColor('#221f22', 'dark'),
-      text: new YaakColor('#c1c0c0', 'dark'),
-      textSubtle: new YaakColor('#939293', 'dark'),
-      textSubtlest: new YaakColor('#727072', 'dark'),
-    },
-    button: {
-      primary: new YaakColor('#ab9df2', 'dark').lower(0.1),
-      secondary: new YaakColor('#c1c0c0', 'dark').lower(0.1),
-      info: new YaakColor('#78dce8', 'dark').lower(0.1),
-      success: new YaakColor('#a9dc76', 'dark').lower(0.1),
-      notice: new YaakColor('#ffd866', 'dark').lower(0.1),
-      warning: new YaakColor('#fc9867', 'dark').lower(0.1),
-      danger: new YaakColor('#ff6188', 'dark').lower(0.1),
-    },
-  },
-};
-
-const monokaiProClassic: YaakTheme = {
-  id: 'monokai-pro-classic',
-  name: 'Monokai Pro Classic',
-  surface: new YaakColor('#272822', 'dark'),
-  text: new YaakColor('#fdfff1', 'dark'),
-  textSubtle: new YaakColor('#c0c1b5', 'dark'),
-  textSubtlest: new YaakColor('#919288', 'dark'),
-
-  primary: new YaakColor('#ae81ff', 'dark'),
-  secondary: new YaakColor('#b2b9bd', 'dark'),
-  info: new YaakColor('#66d9ef', 'dark'),
-  success: new YaakColor('#a6e22e', 'dark'),
-  notice: new YaakColor('#e6db74', 'dark'),
-  warning: new YaakColor('#fd971f', 'dark'),
-  danger: new YaakColor('#f92672', 'dark'),
-
-  components: {
-    appHeader: {
-      surface: new YaakColor('#1d1e19', 'dark'),
-      text: new YaakColor('#b2b9bd', 'dark'),
-      textSubtle: new YaakColor('#767b81', 'dark'),
-      textSubtlest: new YaakColor('#696d77', 'dark'),
-    },
-    button: {
-      primary: new YaakColor('#ae81ff', 'dark').lower(0.1),
-      secondary: new YaakColor('#b2b9bd', 'dark').lower(0.1),
-      info: new YaakColor('#66d9ef', 'dark').lower(0.1),
-      success: new YaakColor('#a6e22e', 'dark').lower(0.1),
-      notice: new YaakColor('#e6db74', 'dark').lower(0.1),
-      warning: new YaakColor('#fd971f', 'dark').lower(0.1),
-      danger: new YaakColor('#f92672', 'dark').lower(0.1),
-    },
-  },
-};
-
-const monokaiProMachine: YaakTheme = {
-  id: 'monokai-pro-machine',
-  name: 'Monokai Pro Machine',
-  surface: new YaakColor('#273136', 'dark'),
-  text: new YaakColor('#eaf2f1', 'dark'),
-  textSubtle: new YaakColor('#8b9798', 'dark'),
-  textSubtlest: new YaakColor('#6b7678', 'dark'),
-
-  primary: new YaakColor('#baa0f8', 'dark'),
-  secondary: new YaakColor('#b8c4c3', 'dark'),
-  info: new YaakColor('#7cd5f1', 'dark'),
-  success: new YaakColor('#a2e57b', 'dark'),
-  notice: new YaakColor('#ffed72', 'dark'),
-  warning: new YaakColor('#ffb270', 'dark'),
-  danger: new YaakColor('#ff6d7e', 'dark'),
-
-  components: {
-    appHeader: {
-      surface: new YaakColor('#1d2528', 'dark'),
-      text: new YaakColor('#b2b9bd', 'dark'),
-      textSubtle: new YaakColor('#767b81', 'dark'),
-      textSubtlest: new YaakColor('#696d77', 'dark'),
-    },
-    button: {
-      primary: new YaakColor('#baa0f8', 'dark').lower(0.1),
-      secondary: new YaakColor('#b8c4c3', 'dark').lower(0.1),
-      info: new YaakColor('#7cd5f1', 'dark').lower(0.1),
-      success: new YaakColor('#a2e57b', 'dark').lower(0.1),
-      notice: new YaakColor('#ffed72', 'dark').lower(0.1),
-      warning: new YaakColor('#ffb270', 'dark').lower(0.1),
-      danger: new YaakColor('#ff6d7e', 'dark').lower(0.1),
-    },
-  },
-};
-
-const monokaiProOctagon: YaakTheme = {
-  id: 'monokai-pro-octagon',
-  name: 'Monokai Pro Octagon',
-  surface: new YaakColor('#282a3a', 'dark'),
-  text: new YaakColor('#eaf2f1', 'dark'),
-  textSubtle: new YaakColor('#b2b9bd', 'dark'),
-  textSubtlest: new YaakColor('#767b81', 'dark'),
-
-  primary: new YaakColor('#c39ac9', 'dark'),
-  secondary: new YaakColor('#b2b9bd', 'dark'),
-  info: new YaakColor('#9cd1bb', 'dark'),
-  success: new YaakColor('#bad761', 'dark'),
-  notice: new YaakColor('#ffd76d', 'dark'),
-  warning: new YaakColor('#ff9b5e', 'dark'),
-  danger: new YaakColor('#ff657a', 'dark'),
-
-  components: {
-    appHeader: {
-      surface: new YaakColor('#1e1f2b', 'dark'),
-      text: new YaakColor('#b2b9bd', 'dark'),
-      textSubtle: new YaakColor('#767b81', 'dark'),
-      textSubtlest: new YaakColor('#696d77', 'dark'),
-    },
-    button: {
-      primary: new YaakColor('#c39ac9', 'dark').lower(0.1).desaturate(0.1),
-      secondary: new YaakColor('#b2b9bd', 'dark').lower(0.1).desaturate(0.1),
-      info: new YaakColor('#9cd1bb', 'dark').lower(0.1).desaturate(0.1),
-      success: new YaakColor('#bad761', 'dark').lower(0.1).desaturate(0.1),
-      notice: new YaakColor('#ffd76d', 'dark').lower(0.1).desaturate(0.1),
-      warning: new YaakColor('#ff9b5e', 'dark').lower(0.1).desaturate(0.1),
-      danger: new YaakColor('#ff657a', 'dark').lower(0.1).desaturate(0.1),
-    },
-  },
-};
-
-const monokaiProRistretto: YaakTheme = {
-  id: 'monokai-pro-ristretto',
-  name: 'Monokai Pro Ristretto',
-  surface: new YaakColor('#2c2525', 'dark'),
-  text: new YaakColor('#fff1f3', 'dark'),
-  textSubtle: new YaakColor('#c3b7b8', 'dark'),
-  textSubtlest: new YaakColor('#948a8b', 'dark'),
-
-  primary: new YaakColor('#a8a9eb', 'dark'),
-  secondary: new YaakColor('#c3b7b8', 'dark'),
-  info: new YaakColor('#85dacc', 'dark'),
-  success: new YaakColor('#adda78', 'dark'),
-  notice: new YaakColor('#f9cc6c', 'dark'),
-  warning: new YaakColor('#f38d70', 'dark'),
-  danger: new YaakColor('#fd6883', 'dark'),
-
-  components: {
-    appHeader: {
-      surface: new YaakColor('#211c1c', 'dark'),
-      text: new YaakColor('#c3b7b8', 'dark'),
-      textSubtle: new YaakColor('#948a8b', 'dark'),
-      textSubtlest: new YaakColor('#72696a', 'dark'),
-    },
-    button: {
-      primary: new YaakColor('#a8a9eb', 'dark').lower(0.1),
-      secondary: new YaakColor('#c3b7b8', 'dark').lower(0.1),
-      info: new YaakColor('#85dacc', 'dark').lower(0.1),
-      success: new YaakColor('#adda78', 'dark').lower(0.1),
-      notice: new YaakColor('#f9cc6c', 'dark').lower(0.1),
-      warning: new YaakColor('#f38d70', 'dark').lower(0.1),
-      danger: new YaakColor('#fd6883', 'dark').lower(0.1),
-    },
-  },
-};
-
-const monokaiProSpectrum: YaakTheme = {
-  id: 'monokai-pro-spectrum',
-  name: 'Monokai Pro Spectrum',
-  surface: new YaakColor('#222222', 'dark'),
-  text: new YaakColor('#f7f1ff', 'dark'),
-  textSubtle: new YaakColor('#bab6c0', 'dark'),
-  textSubtlest: new YaakColor('#8b888f', 'dark'),
-
-  primary: new YaakColor('#948ae3', 'dark'),
-  secondary: new YaakColor('#bab6c0', 'dark'),
-  info: new YaakColor('#5ad4e6', 'dark'),
-  success: new YaakColor('#7bd88f', 'dark'),
-  notice: new YaakColor('#fce566', 'dark'),
-  warning: new YaakColor('#fd9353', 'dark'),
-  danger: new YaakColor('#fc618d', 'dark'),
-
-  components: {
-    appHeader: {
-      surface: new YaakColor('#191919', 'dark'),
-      text: new YaakColor('#bab6c0', 'dark'),
-      textSubtle: new YaakColor('#8b888f', 'dark'),
-      textSubtlest: new YaakColor('#69676c', 'dark'),
-    },
-    button: {
-      primary: new YaakColor('#948ae3', 'dark').lower(0.1),
-      secondary: new YaakColor('#bab6c0', 'dark').lower(0.1),
-      info: new YaakColor('#5ad4e6', 'dark').lower(0.1),
-      success: new YaakColor('#7bd88f', 'dark').lower(0.1),
-      notice: new YaakColor('#fce566', 'dark').lower(0.1),
-      warning: new YaakColor('#fd9353', 'dark').lower(0.1),
-      danger: new YaakColor('#fc618d', 'dark').lower(0.1),
-    },
-  },
-};
-
-export const monokaiPro = [
-  monokaiProDefault,
-  monokaiProClassic,
-  monokaiProMachine,
-  monokaiProOctagon,
-  monokaiProRistretto,
-  monokaiProSpectrum,
-];

src-web/lib/theme/themes/moonlight.ts

@@ -1,64 +0,0 @@
-import type { YaakTheme } from '../window';
-import { YaakColor } from '../yaakColor';
-
-export const colors = {
-  lightRed: '#ff98a4',
-  red: '#ff757f',
-  darkRed: '#ff5370',
-  lightOrange: '#f8b576',
-  orange: '#ff966c',
-  darkOrange: '#fc7b7b',
-  yellow: '#ffc777',
-  green: '#c3e88d',
-  lightTeal: '#7af8ca',
-  teal: '#3ad7c7',
-  lightCyan: '#b4f9f8',
-  cyan: '#78dbff',
-  sky: '#60bdff',
-  blue: '#7cafff',
-  darkBlue: '#3d6fe0',
-  darkestBlue: '#3b63cf',
-  indigo: '#af9fff',
-  purple: '#c4a2ff',
-  pink: '#fca7ea',
-  darkPink: '#fd8aca',
-  saturatedGray: '#7a88cf',
-  desaturatedGray: '#979bb6',
-  gray11: '#d5def8',
-  gray10: '#c8d3f5',
-  gray9: '#b4c2f0',
-  gray8: '#a9b8e8',
-  gray7: '#828bb8',
-  gray6: '#444a73',
-  gray5: '#2f334d',
-  gray4: '#222436',
-  gray3: '#1e2030',
-  gray2: '#191a2a',
-  gray1: '#131421',
-} as const;
-
-const moonlightDefault: YaakTheme = {
-  id: 'moonlight',
-  name: 'Moonlight',
-  surface: new YaakColor('#222436', 'dark'),
-  text: new YaakColor('#d5def8', 'dark'),
-  textSubtle: new YaakColor('#828bb8', 'dark'),
-  textSubtlest: new YaakColor('hsl(232,26%,43%)', 'dark'),
-  primary: new YaakColor(colors.purple, 'dark'),
-  secondary: new YaakColor(colors.desaturatedGray, 'dark'),
-  info: new YaakColor(colors.blue, 'dark'),
-  success: new YaakColor(colors.teal, 'dark'),
-  notice: new YaakColor(colors.yellow, 'dark'),
-  warning: new YaakColor(colors.orange, 'dark'),
-  danger: new YaakColor(colors.red, 'dark'),
-  components: {
-    appHeader: {
-      surface: new YaakColor(colors.gray3, 'dark'),
-    },
-    sidebar: {
-      surface: new YaakColor(colors.gray3, 'dark'),
-    },
-  },
-};
-
-export const moonlight = [moonlightDefault];

src-web/lib/theme/themes/nord.ts

@@ -1,30 +0,0 @@
-import type { YaakTheme } from '../window';
-import { YaakColor } from '../yaakColor';
-
-const nordDefault: YaakTheme = {
-  id: 'nord',
-  name: 'Nord',
-  surface: new YaakColor('hsl(220, 16%, 22%)', 'dark'),          // Nord0 (#2e3440)
-  surfaceHighlight: new YaakColor('hsl(220, 14%, 28%)', 'dark'), // Nord1 (#3b4252)
-  text: new YaakColor('hsl(220, 28%, 93%)', 'dark'),             // Nord6 (#ECEFF4)
-  textSubtle: new YaakColor('hsl(220, 26%, 90%)', 'dark'),       // Nord5 (#E5E9F0)
-  textSubtlest: new YaakColor('hsl(220, 24%, 86%)', 'dark'),     // Nord4 (#D8DEE9)
-  primary: new YaakColor('hsl(193, 38%, 68%)', 'dark'),          // Nord8 (#88C0D0)
-  secondary: new YaakColor('hsl(210, 34%, 63%)', 'dark'),        // Nord9 (#81A1C1)
-  info: new YaakColor('hsl(174, 25%, 69%)', 'dark'),             // Nord7 (#8FBCBB)
-  success: new YaakColor('hsl(89, 26%, 66%)', 'dark'),           // Nord14 (#A3BE8C)
-  notice: new YaakColor('hsl(40, 66%, 73%)', 'dark'),            // Nord13 (#EBCB8B)
-  warning: new YaakColor('hsl(17, 48%, 64%)', 'dark'),           // Nord12 (#D08770)
-  danger: new YaakColor('hsl(353, 43%, 56%)', 'dark'),           // Nord11 (#BF616A)
-  components: {
-    sidebar: {
-      backdrop: new YaakColor('hsl(220, 16%, 22%)', 'dark'),     // Nord0 (#2e3440)
-    },
-    appHeader: {
-      backdrop: new YaakColor('hsl(220, 14%, 28%)', 'dark'),     // Nord1 (#3b4252)
-    },
-  },
-};
-
-export const nord = [nordDefault];
-

src-web/lib/theme/themes/relaxing.ts

@@ -1,18 +0,0 @@
-import { YaakColor } from '../yaakColor';
-import type { YaakTheme } from '../window';
-
-const relaxingDefault: YaakTheme = {
-  name: 'Relaxing',
-  id: 'relaxing',
-  surface: new YaakColor('#2b1e3b', 'dark'),
-  text: new YaakColor('#ede2f5', 'dark'),
-  primary: new YaakColor('#cba6f7', 'dark'),
-  secondary: new YaakColor('#bac2de', 'dark'),
-  info: new YaakColor('#89b4fa', 'dark'),
-  success: new YaakColor('#a6e3a1', 'dark'),
-  notice: new YaakColor('#f9e2af', 'dark'),
-  warning: new YaakColor('#fab387', 'dark'),
-  danger: new YaakColor('#f38ba8', 'dark'),
-};
-
-export const relaxing = [relaxingDefault];

src-web/lib/theme/themes/rose-pine.ts

@@ -1,105 +0,0 @@
-import { YaakColor } from '../yaakColor';
-import type { YaakTheme } from '../window';
-
-export const rosePineDefault: YaakTheme = {
-  id: 'rose-pine',
-  name: 'Rosé Pine',
-  surface: new YaakColor('#191724', 'dark'),
-  text: new YaakColor('#e0def4', 'dark'),
-  textSubtle: new YaakColor('#908caa', 'dark'),
-  textSubtlest: new YaakColor('#6e6a86', 'dark'),
-  primary: new YaakColor('#c4a7e7', 'dark'),
-  secondary: new YaakColor('#6e6a86', 'dark'),
-  info: new YaakColor('#67abcb', 'dark'),
-  success: new YaakColor('#9cd8d8', 'dark'),
-  notice: new YaakColor('#f6c177', 'dark'),
-  warning: new YaakColor('#f1a3a1', 'dark'),
-  danger: new YaakColor('#eb6f92', 'dark'),
-  components: {
-    responsePane: {
-      surface: new YaakColor('#1f1d2e', 'dark'),
-    },
-    sidebar: {
-      surface: new YaakColor('#1f1d2e', 'dark'),
-    },
-    menu: {
-      surface: new YaakColor('#393552', 'dark'),
-      textSubtle: new YaakColor('#908caa', 'dark').lift(0.15),
-      textSubtlest: new YaakColor('#6e6a86', 'dark').lift(0.15),
-      border: new YaakColor('#393552', 'dark').lift(0.2),
-      borderSubtle: new YaakColor('#393552', 'dark').lift(0.12),
-    },
-  },
-};
-
-const rosePineMoon: YaakTheme = {
-  id: 'rose-pine-moon',
-  name: 'Rosé Pine Moon',
-  surface: new YaakColor('#232136', 'dark'),
-  text: new YaakColor('#e0def4', 'dark'),
-  textSubtle: new YaakColor('#908caa', 'dark'),
-  textSubtlest: new YaakColor('#6e6a86', 'dark'),
-  primary: new YaakColor('#c4a7e7', 'dark'),
-  secondary: new YaakColor('#908caa', 'dark'),
-  info: new YaakColor('#68aeca', 'dark'),
-  success: new YaakColor('#9ccfd8', 'dark'),
-  notice: new YaakColor('#f6c177', 'dark'),
-  warning: new YaakColor('#ea9a97', 'dark'),
-  danger: new YaakColor('#eb6f92', 'dark'),
-  components: {
-    responsePane: {
-      surface: new YaakColor('#2a273f', 'dark'),
-    },
-    sidebar: {
-      surface: new YaakColor('#2a273f', 'dark'),
-    },
-    menu: {
-      surface: new YaakColor('#393552', 'dark'),
-      textSubtle: new YaakColor('#908caa', 'dark').lift(0.15),
-      textSubtlest: new YaakColor('#6e6a86', 'dark').lift(0.15),
-      border: new YaakColor('#393552', 'dark').lift(0.2),
-      borderSubtle: new YaakColor('#393552', 'dark').lift(0.12),
-    },
-  },
-};
-
-const rosePineDawn: YaakTheme = {
-  id: 'rose-pine-dawn',
-  name: 'Rosé Pine Dawn',
-  surface: new YaakColor('#faf4ed', 'light'),
-  border: new YaakColor('#dfdad9', 'light'),
-  surfaceHighlight: new YaakColor('#f4ede8', 'light'),
-  text: new YaakColor('#575279', 'light'),
-  textSubtle: new YaakColor('#797593', 'light'),
-  textSubtlest: new YaakColor('#9893a5', 'light'),
-  primary: new YaakColor('#9070ad', 'light'),
-  secondary: new YaakColor('#6e6a86', 'light'),
-  info: new YaakColor('#2d728d', 'light'),
-  success: new YaakColor('#4f8c96', 'light'),
-  notice: new YaakColor('#cb862d', 'light'),
-  warning: new YaakColor('#ce7b78', 'light'),
-  danger: new YaakColor('#b4637a', 'light'),
-  components: {
-    responsePane: {
-      border: new YaakColor('#e8e4e2', 'light'),
-    },
-    sidebar: {
-      border: new YaakColor('#e8e4e2', 'light'),
-    },
-    appHeader: {
-      border: new YaakColor('#e8e4e2', 'light'),
-    },
-    input: {
-      border: new YaakColor('#dfdad9', 'light'),
-    },
-    dialog: {
-      border: new YaakColor('#e8e4e2', 'light'),
-    },
-    menu: {
-      surface: new YaakColor('#f2e9e1', 'light'),
-      border: new YaakColor('#dfdad9', 'light'),
-    },
-  },
-};
-
-export const rosePine = [rosePineDefault, rosePineDawn, rosePineMoon];

src-web/lib/theme/themes/yaak.ts

@@ -1,74 +0,0 @@
-import { YaakColor } from '../yaakColor';
-import type { YaakTheme } from '../window';
-
-export const yaakLight: YaakTheme = {
-  id: 'yaak-light',
-  name: 'Yaak',
-  surface: new YaakColor('hsl(216,24%,100%)', 'light'),
-  border: new YaakColor('hsl(216,24%,93%)', 'light'),
-  surfaceHighlight: new YaakColor('hsl(216,24%,87%)', 'light'),
-  text: new YaakColor('hsl(219,23%,15%)', 'light'),
-  textSubtle: new YaakColor('hsl(219,23%,15%)', 'light').lower(0.3),
-  textSubtlest: new YaakColor('hsl(219,23%,15%)', 'light').lower(0.5),
-  primary: new YaakColor('hsl(266,100%,70%)', 'light'),
-  secondary: new YaakColor('hsl(220,24%,59%)', 'light'),
-  info: new YaakColor('hsl(206,100%,48%)', 'light'),
-  success: new YaakColor('hsl(155,95%,33%)', 'light'),
-  notice: new YaakColor('hsl(45,100%,41%)', 'light'),
-  warning: new YaakColor('hsl(30,100%,43%)', 'light'),
-  danger: new YaakColor('hsl(335,75%,57%)', 'light'),
-  components: {
-    sidebar: {
-      surface: new YaakColor('hsl(216,24%,97%)', 'light'),
-      border: new YaakColor('hsl(216,24%,93%)', 'light'),
-      surfaceHighlight: new YaakColor('hsl(216,24%,90%)', 'light'),
-    },
-  },
-};
-
-export const yaakDark: YaakTheme = {
-  id: 'yaak-dark',
-  name: 'Yaak',
-  surface: new YaakColor('hsl(244,23%,14%)', 'dark'),
-  border: new YaakColor('hsl(244,23%,25%)', 'dark'),
-  surfaceHighlight: new YaakColor('hsl(244,23%,20%)', 'dark'),
-  text: new YaakColor('hsl(245,23%,84%)', 'dark'),
-  textSubtle: new YaakColor('hsl(245,18%,58%)', 'dark'),
-  textSubtlest: new YaakColor('hsl(245,18%,45%)', 'dark'),
-  primary: new YaakColor('hsl(266,100%,79%)', 'dark'),
-  secondary: new YaakColor('hsl(245,23%,60%)', 'dark'),
-  info: new YaakColor('hsl(206,100%,63%)', 'dark'),
-  success: new YaakColor('hsl(150,99%,44%)', 'dark'),
-  notice: new YaakColor('hsl(48,80%,63%)', 'dark'),
-  warning: new YaakColor('hsl(28,100%,61%)', 'dark'),
-  danger: new YaakColor('hsl(342,90%,68%)', 'dark'),
-
-  components: {
-    button: {
-      primary: new YaakColor('hsl(266,100%,79%)', 'dark').lower(0.1),
-      secondary: new YaakColor('hsl(245,23%,60%)', 'dark').lower(0.1),
-      info: new YaakColor('hsl(206,100%,63%)', 'dark').lower(0.1),
-      success: new YaakColor('hsl(150,99%,44%)', 'dark').lower(0.15),
-      notice: new YaakColor('hsl(48,80%,63%)', 'dark').lower(0.2),
-      warning: new YaakColor('hsl(28,100%,61%)', 'dark').lower(0.1),
-      danger: new YaakColor('hsl(342,90%,68%)', 'dark').lower(0.1),
-    },
-    dialog: {
-      border: new YaakColor('hsl(244,23%,24%)', 'dark'),
-    },
-    sidebar: {
-      surface: new YaakColor('hsl(243,23%,16%)', 'dark'),
-      border: new YaakColor('hsl(244,23%,22%)', 'dark'),
-    },
-    responsePane: {
-      surface: new YaakColor('hsl(243,23%,16%)', 'dark'),
-      border: new YaakColor('hsl(244,23%,16%)', 'dark').lift(0.08),
-    },
-    appHeader: {
-      surface: new YaakColor('hsl(244,23%,12%)', 'dark'),
-      border: new YaakColor('hsl(244,23%,12%)', 'dark').lift(0.1),
-    },
-  },
-};
-
-export const yaak = [yaakDark, yaakLight];

src-web/lib/theme/window.ts

@@ -1,3 +1,4 @@
+import type { Theme, ThemeComponentColors } from '@yaakapp-internal/plugins';
 import { defaultDarkTheme, defaultLightTheme } from './themes';
 import { YaakColor } from './yaakColor';
 
@@ -27,9 +28,10 @@ export type YaakColors = {
   danger?: YaakColor;
 };
 
-export type YaakTheme = YaakColors & {
+export type YaakTheme = {
   id: string;
   name: string;
+  base: YaakColors;
   components?: Partial<{
     dialog: Partial<YaakColors>;
     menu: Partial<YaakColors>;
@@ -46,35 +48,46 @@ export type YaakTheme = YaakColors & {
   }>;
 };
 
-export type YaakColorKey = keyof YaakColors;
+export type YaakColorKey = keyof ThemeComponentColors;
 
 type ComponentName = keyof NonNullable<YaakTheme['components']>;
 
-type CSSVariables = Record<YaakColorKey, YaakColor | undefined>;
+type CSSVariables = Record<YaakColorKey, string | undefined>;
 
-function themeVariables(theme?: Partial<YaakColors>, base?: CSSVariables): CSSVariables | null {
+function themeVariables(
+  theme: Theme,
+  component?: ComponentName,
+  base?: CSSVariables,
+): CSSVariables | null {
+  const cmp =
+    component == null
+      ? theme.base
+      : (theme.components?.[component] ?? ({} as ThemeComponentColors));
+  const c = (s: string | undefined) => yc(theme, s);
   const vars: CSSVariables = {
-    surface: theme?.surface,
-    surfaceHighlight: theme?.surfaceHighlight ?? theme?.surface?.lift(0.06),
-    surfaceActive: theme?.surfaceActive ?? theme?.primary?.lower(0.2).translucify(0.8),
-    backdrop: theme?.surface?.lower(0.2).translucify(0.2),
-    selection: theme?.primary?.lower(0.1).translucify(0.7),
-    border: theme?.border ?? theme?.surface?.lift(0.11),
-    borderSubtle: theme?.borderSubtle ?? theme?.border?.lower(0.06),
-    borderFocus: theme?.info?.translucify(0.5),
-    text: theme?.text,
-    textSubtle: theme?.textSubtle ?? theme?.text?.lower(0.2),
-    textSubtlest: theme?.textSubtlest ?? theme?.text?.lower(0.3),
+    surface: cmp.surface,
+    surfaceHighlight: cmp.surfaceHighlight ?? c(cmp.surface)?.lift(0.06).css(),
+    surfaceActive: cmp.surfaceActive ?? c(cmp.primary)?.lower(0.2).translucify(0.8).css(),
+    backdrop: cmp.backdrop ?? c(cmp.surface)?.lower(0.2).translucify(0.2).css(),
+    selection: cmp.selection ?? c(cmp.primary)?.lower(0.1).translucify(0.7).css(),
+    border: cmp.border ?? c(cmp.surface)?.lift(0.11)?.css(),
+    borderSubtle: cmp.borderSubtle ?? c(cmp.border)?.lower(0.06)?.css(),
+    borderFocus: c(cmp.info)?.translucify(0.5)?.css(),
+    text: cmp.text,
+    textSubtle: cmp.textSubtle ?? c(cmp.text)?.lower(0.2)?.css(),
+    textSubtlest: cmp.textSubtlest ?? c(cmp.text)?.lower(0.3)?.css(),
     shadow:
-      theme?.shadow ??
-      YaakColor.black().translucify(isThemeDark(theme ?? ({} as Partial<YaakColors>)) ? 0.7 : 0.93),
-    primary: theme?.primary,
-    secondary: theme?.secondary,
-    info: theme?.info,
-    success: theme?.success,
-    notice: theme?.notice,
-    warning: theme?.warning,
-    danger: theme?.danger,
+      cmp.shadow ??
+      YaakColor.black()
+        .translucify(theme.dark ? 0.7 : 0.93)
+        .css(),
+    primary: cmp.primary,
+    secondary: cmp.secondary,
+    info: cmp.info,
+    success: cmp.success,
+    notice: cmp.notice,
+    warning: cmp.warning,
+    danger: cmp.danger,
   };
 
   // Extend with base
@@ -87,76 +100,86 @@ function themeVariables(theme?: Partial<YaakColors>, base?: CSSVariables): CSSVa
   return vars;
 }
 
-function templateTagColorVariables(color: YaakColor): Partial<CSSVariables> {
+function templateTagColorVariables(color: YaakColor | null): Partial<CSSVariables> {
+  if (color == null) return {};
+
   return {
-    text: color.lift(0.6),
-    textSubtle: color.lift(0.4),
-    textSubtlest: color,
-    surface: color.lower(0.2).translucify(0.8),
-    border: color.lower(0.2).translucify(0.2),
-    surfaceHighlight: color.lower(0.1).translucify(0.7),
+    text: color.lift(0.6).css(),
+    textSubtle: color.lift(0.4).css(),
+    textSubtlest: color.css(),
+    surface: color.lower(0.2).translucify(0.8).css(),
+    border: color.lower(0.2).translucify(0.2).css(),
+    surfaceHighlight: color.lower(0.1).translucify(0.7).css(),
   };
 }
 
-function toastColorVariables(color: YaakColor): Partial<CSSVariables> {
+function toastColorVariables(color: YaakColor | null): Partial<CSSVariables> {
+  if (color == null) return {};
+
   return {
-    text: color.lift(0.8),
-    textSubtle: color,
-    surface: color.translucify(0.9),
-    surfaceHighlight: color.translucify(0.8),
-    border: color.lift(0.3).translucify(0.6),
+    text: color.lift(0.8).css(),
+    textSubtle: color.css(),
+    surface: color.translucify(0.9).css(),
+    surfaceHighlight: color.translucify(0.8).css(),
+    border: color.lift(0.3).translucify(0.6).css(),
   };
 }
 
-function bannerColorVariables(color: YaakColor): Partial<CSSVariables> {
+function bannerColorVariables(color: YaakColor | null): Partial<CSSVariables> {
+  if (color == null) return {};
+
   return {
-    text: color.lift(0.8),
-    textSubtle: color.translucify(0.3),
-    textSubtlest: color.translucify(0.6),
-    surface: color.translucify(0.95),
-    border: color.lift(0.3).translucify(0.8),
+    text: color.lift(0.8).css(),
+    textSubtle: color.translucify(0.3).css(),
+    textSubtlest: color.translucify(0.6).css(),
+    surface: color.translucify(0.95).css(),
+    border: color.lift(0.3).translucify(0.8).css(),
   };
 }
 
 function buttonSolidColorVariables(
-  color: YaakColor,
+  color: YaakColor | null,
   isDefault: boolean = false,
 ): Partial<CSSVariables> {
-  const theme: Partial<YaakTheme> = {
-    text: new YaakColor('white', 'dark'),
-    surface: color.lower(0.3),
-    surfaceHighlight: color.lower(0.1),
-    border: color,
+  if (color == null) return {};
+
+  const theme: Partial<ThemeComponentColors> = {
+    text: 'white',
+    surface: color.lower(0.3).css(),
+    surfaceHighlight: color.lower(0.1).css(),
+    border: color.css(),
   };
 
   if (isDefault) {
-    theme.text = color.lift(0.8);
-    theme.surface = undefined; // Inherit from root
-    theme.surfaceHighlight = color.lift(0.08);
+    theme.text = undefined; // Inherit from parent
+    theme.surface = undefined; // Inherit from parent
+    theme.surfaceHighlight = color.lift(0.08).css();
   }
 
   return theme;
 }
 
 function buttonBorderColorVariables(
-  color: YaakColor,
+  color: YaakColor | null,
   isDefault: boolean = false,
 ): Partial<CSSVariables> {
-  const theme = {
-    text: color.lift(0.8),
-    textSubtle: color.lift(0.55),
-    textSubtlest: color.lift(0.4).translucify(0.6),
-    surfaceHighlight: color.translucify(0.8),
-    borderSubtle: color.translucify(0.5),
-    border: color.translucify(0.3),
+  if (color == null) return {};
+
+  const vars: Partial<CSSVariables> = {
+    text: color.lift(0.8).css(),
+    textSubtle: color.lift(0.55).css(),
+    textSubtlest: color.lift(0.4).translucify(0.6).css(),
+    surfaceHighlight: color.translucify(0.8).css(),
+    borderSubtle: color.translucify(0.5).css(),
+    border: color.translucify(0.3).css(),
   };
 
   if (isDefault) {
-    theme.borderSubtle = color.lift(0.28);
-    theme.border = color.lift(0.5);
+    vars.borderSubtle = color.lift(0.28).css();
+    vars.border = color.lift(0.5).css();
   }
 
-  return theme;
+  return vars;
 }
 
 function variablesToCSS(
@@ -169,26 +192,27 @@ function variablesToCSS(
 
   const css = Object.entries(vars ?? {})
     .filter(([, value]) => value)
-    .map(([name, value]) => `--${name}: ${value?.css()};`)
+    .map(([name, value]) => `--${name}: ${value};`)
     .join('\n');
 
   return selector == null ? css : `${selector} {\n${indent(css)}\n}`;
 }
 
-function componentCSS(
-  component: ComponentName,
-  components?: YaakTheme['components'],
-): string | null {
-  if (components == null) {
+function componentCSS(theme: Theme, component: ComponentName): string | null {
+  if (theme.components == null) {
     return null;
   }
 
-  const themeVars = themeVariables(components[component]);
+  const themeVars = themeVariables(theme, component);
   return variablesToCSS(`.x-theme-${component}`, themeVars);
 }
 
-function buttonCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string | null {
-  const yaakColor = colors?.[color];
+function buttonCSS(
+  theme: Theme,
+  color: YaakColorKey,
+  colors?: ThemeComponentColors,
+): string | null {
+  const yaakColor = yc(theme, colors?.[color]);
   if (yaakColor == null) {
     return null;
   }
@@ -199,8 +223,12 @@ function buttonCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string |
   ].join('\n\n');
 }
 
-function bannerCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string | null {
-  const yaakColor = colors?.[color];
+function bannerCSS(
+  theme: Theme,
+  color: YaakColorKey,
+  colors?: ThemeComponentColors,
+): string | null {
+  const yaakColor = yc(theme, colors?.[color]);
   if (yaakColor == null) {
     return null;
   }
@@ -210,8 +238,8 @@ function bannerCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string |
   );
 }
 
-function toastCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string | null {
-  const yaakColor = colors?.[color];
+function toastCSS(theme: Theme, color: YaakColorKey, colors?: ThemeComponentColors): string | null {
+  const yaakColor = yc(theme, colors?.[color]);
   if (yaakColor == null) {
     return null;
   }
@@ -219,8 +247,12 @@ function toastCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string | n
   return [variablesToCSS(`.x-theme-toast--${color}`, toastColorVariables(yaakColor))].join('\n\n');
 }
 
-function templateTagCSS(color: YaakColorKey, colors?: Partial<YaakColors>): string | null {
-  const yaakColor = colors?.[color];
+function templateTagCSS(
+  theme: Theme,
+  color: YaakColorKey,
+  colors?: ThemeComponentColors,
+): string | null {
+  const yaakColor = yc(theme, colors?.[color]);
   if (yaakColor == null) {
     return null;
   }
@@ -230,63 +262,56 @@ function templateTagCSS(color: YaakColorKey, colors?: Partial<YaakColors>): stri
   ].join('\n\n');
 }
 
-export function isThemeDark(theme: Partial<YaakColors>): boolean {
-  if (theme.surface && theme.text) {
-    return theme.text.lighterThan(theme.surface);
-  }
-
-  return false;
-}
-
-export function getThemeCSS(theme: YaakTheme): string {
+export function getThemeCSS(theme: Theme): string {
   theme.components = theme.components ?? {};
   // Toast defaults to menu styles
   theme.components.toast = theme.components.toast ?? theme.components.menu ?? {};
-  const { components, id, name } = theme;
-  const colors = Object.keys(theme)
-    .filter((key) => theme[key as YaakColorKey] instanceof YaakColor)
-    .reduce((prev, key) => {
-      return { ...prev, [key]: theme[key as YaakColorKey] };
-    }, {});
+  const { components, id, label } = theme;
+  const colors = Object.keys(theme.base).reduce((prev, key) => {
+    return { ...prev, [key]: theme.base[key as YaakColorKey] };
+  }, {}) as ThemeComponentColors;
 
   let themeCSS = '';
   try {
     const baseCss = variablesToCSS(null, themeVariables(theme));
     themeCSS = [
       baseCss,
-      ...Object.keys(components ?? {}).map((key) =>
-        componentCSS(key as ComponentName, theme.components),
-      ),
+      ...Object.keys(components ?? {}).map((key) => componentCSS(theme, key as ComponentName)),
       variablesToCSS(
         `.x-theme-button--solid--default`,
-        buttonSolidColorVariables(theme.surface, true),
+        buttonSolidColorVariables(yc(theme, theme.base.surface), true),
       ),
       variablesToCSS(
         `.x-theme-button--border--default`,
-        buttonBorderColorVariables(theme.surface, true),
+        buttonBorderColorVariables(yc(theme, theme.base.surface), true),
       ),
       ...Object.keys(colors ?? {}).map((key) =>
-        buttonCSS(key as YaakColorKey, theme.components?.button ?? colors),
+        buttonCSS(theme, key as YaakColorKey, theme.components?.button ?? colors),
       ),
       ...Object.keys(colors ?? {}).map((key) =>
-        bannerCSS(key as YaakColorKey, theme.components?.banner ?? colors),
+        bannerCSS(theme, key as YaakColorKey, theme.components?.banner ?? colors),
       ),
       ...Object.keys(colors ?? {}).map((key) =>
-        toastCSS(key as YaakColorKey, theme.components?.banner ?? colors),
+        toastCSS(theme, key as YaakColorKey, theme.components?.banner ?? colors),
       ),
       ...Object.keys(colors ?? {}).map((key) =>
-        templateTagCSS(key as YaakColorKey, theme.components?.templateTag ?? colors),
+        templateTagCSS(theme, key as YaakColorKey, theme.components?.templateTag ?? colors),
       ),
     ].join('\n\n');
   } catch (err) {
     console.error('Failed to generate CSS', err);
   }
 
-  return [`/* ${name} */`, `[data-theme="${id}"] {`, indent(themeCSS), '}'].join('\n');
+  return [`/* ${label} */`, `[data-theme="${id}"] {`, indent(themeCSS), '}'].join('\n');
 }
 
-export function addThemeStylesToDocument(theme: YaakTheme) {
-  theme = completeTheme(theme);
+export function addThemeStylesToDocument(rawTheme: Theme | null) {
+  if (rawTheme == null) {
+    console.error('Failed to add theme styles: theme is null');
+    return;
+  }
+
+  const theme = completeTheme(rawTheme);
   let styleEl = document.head.querySelector(`style[data-theme]`);
   if (!styleEl) {
     styleEl = document.createElement('style');
@@ -298,7 +323,12 @@ export function addThemeStylesToDocument(theme: YaakTheme) {
   styleEl.textContent = getThemeCSS(theme);
 }
 
-export function setThemeOnDocument(theme: YaakTheme) {
+export function setThemeOnDocument(theme: Theme | null) {
+  if (theme == null) {
+    console.error('Failed to set theme: theme is null');
+    return;
+  }
+
   document.documentElement.setAttribute('data-theme', theme.id);
 }
 
@@ -309,72 +339,36 @@ export function indent(text: string, space = '    '): string {
     .join('\n');
 }
 
-export function completeTheme(theme: YaakTheme): YaakTheme {
-  const isDark = isThemeDark(theme);
+function yc<T extends string | null | undefined>(
+  theme: Theme,
+  s: T,
+): T extends string ? YaakColor : null {
+  if (s == null) return null as never;
+  return new YaakColor(s, theme.dark ? 'dark' : 'light') as never;
+}
 
-  // Clone the theme
-  theme = deserializeTheme(serializeTheme(theme), isDark ? 'dark' : 'light');
+export function completeTheme(theme: Theme): Theme {
+  const fallback = theme.dark ? defaultDarkTheme.base : defaultLightTheme.base;
+  const c = (s: string | null | undefined) => yc(theme, s);
 
-  const base = isDark ? defaultDarkTheme : defaultLightTheme;
+  theme.base.primary ??= fallback.primary;
+  theme.base.secondary ??= fallback.secondary;
+  theme.base.info ??= fallback.info;
+  theme.base.success ??= fallback.success;
+  theme.base.notice ??= fallback.notice;
+  theme.base.warning ??= fallback.warning;
+  theme.base.danger ??= fallback.danger;
 
-  theme.primary = theme.primary ?? base.primary;
-  theme.secondary = theme.secondary ?? base.secondary;
-  theme.info = theme.info ?? base.info;
-  theme.success = theme.success ?? base.success;
-  theme.notice = theme.notice ?? base.notice;
-  theme.warning = theme.warning ?? base.warning;
-  theme.danger = theme.danger ?? base.danger;
+  theme.base.surface ??= fallback.surface;
+  theme.base.surfaceHighlight ??= c(theme.base.surface)?.lift(0.06)?.css();
+  theme.base.surfaceActive ??= c(theme.base.primary)?.lower(0.2).translucify(0.8).css();
 
-  theme.surface = theme.surface ?? base.surface;
-  theme.surfaceHighlight = theme.surfaceHighlight ?? theme.surface?.lift(0.06);
-  theme.surfaceActive = theme.surfaceActive ?? theme.primary?.lower(0.2).translucify(0.8);
+  theme.base.border ??= c(theme.base.surface)?.lift(0.12)?.css();
+  theme.base.borderSubtle ??= c(theme.base.border)?.lower(0.08)?.css();
 
-  theme.border = theme.border ?? theme.surface?.lift(0.12);
-  theme.borderSubtle = theme.borderSubtle ?? theme.border?.lower(0.08);
-
-  theme.text = theme.text ?? theme.border?.lift(1).lower(0.2);
-  theme.textSubtle = theme.textSubtle ?? theme.text?.lower(0.3);
-  theme.textSubtlest = theme.textSubtlest ?? theme.text?.lower(0.5);
+  theme.base.text ??= fallback.text;
+  theme.base.textSubtle ??= c(theme.base.text)?.lower(0.3)?.css();
+  theme.base.textSubtlest ??= c(theme.base.text)?.lower(0.5)?.css();
 
   return theme;
 }
-
-export function serializeTheme(theme: YaakTheme): string {
-  function next(o: Record<string, unknown>) {
-    o = { ...o }; // Clone first
-
-    for (const k of Object.keys(o)) {
-      const v = o[k];
-      if (v instanceof YaakColor) {
-        o[k] = v.css();
-      } else if (Object.prototype.toString.call(v) === '[object Object]') {
-        o[k] = next(v as Record<string, unknown>);
-      } else {
-        o[k] = v;
-      }
-    }
-    return o;
-  }
-
-  return JSON.stringify(next(theme));
-}
-
-export function deserializeTheme(theme: string, appearance: 'dark' | 'light'): YaakTheme {
-  function next(o: Record<string, unknown>) {
-    for (const k of Object.keys(o)) {
-      const v = o[k];
-      if (v instanceof YaakColor) {
-        o[k] = v;
-      } else if (typeof v === 'string' && v.match(/^(#|hsla\()/)) {
-        o[k] = new YaakColor(v, appearance);
-      } else if (Object.prototype.toString.call(v) === '[object Object]') {
-        o[k] = next(v as Record<string, unknown>);
-      } else {
-        o[k] = v;
-      }
-    }
-    return o;
-  }
-
-  return next(JSON.parse(theme)) as YaakTheme;
-}