Extract shared UI and theme packages

apps/yaak-client/lib/theme/themes.ts

@@ -1,14 +1,21 @@
-import type { GetThemesResponse } from '@yaakapp-internal/plugins';
-import { invokeCmd } from '../tauri';
-import type { Appearance } from './appearance';
-import { resolveAppearance } from './appearance';
+import type { GetThemesResponse } from "@yaakapp-internal/plugins";
+import { defaultDarkTheme, defaultLightTheme } from "@yaakapp-internal/theme";
+import { invokeCmd } from "../tauri";
+import type { Appearance } from "./appearance";
+import { resolveAppearance } from "./appearance";
+
+export { defaultDarkTheme, defaultLightTheme } from "@yaakapp-internal/theme";
 
 export async function getThemes() {
-  const themes = (await invokeCmd<GetThemesResponse[]>('cmd_get_themes')).flatMap((t) => t.themes);
+  const themes = (
+    await invokeCmd<GetThemesResponse[]>("cmd_get_themes")
+  ).flatMap((t) => t.themes);
   themes.sort((a, b) => a.label.localeCompare(b.label));
   // Remove duplicates, in case multiple plugins provide the same theme
-  const uniqueThemes = Array.from(new Map(themes.map((t) => [t.id, t])).values());
-  return { themes: [yaakDark, yaakLight, ...uniqueThemes] };
+  const uniqueThemes = Array.from(
+    new Map(themes.map((t) => [t.id, t])).values(),
+  );
+  return { themes: [defaultDarkTheme, defaultLightTheme, ...uniqueThemes] };
 }
 
 export async function getResolvedTheme(
@@ -23,88 +30,16 @@ export async function getResolvedTheme(
   const darkThemes = themes.filter((t) => t.dark);
   const lightThemes = themes.filter((t) => !t.dark);
 
-  const dark = darkThemes.find((t) => t.id === themeDark) ?? darkThemes[0] ?? yaakDark;
-  const light = lightThemes.find((t) => t.id === themeLight) ?? lightThemes[0] ?? yaakLight;
+  const dark =
+    darkThemes.find((t) => t.id === themeDark) ??
+    darkThemes[0] ??
+    defaultDarkTheme;
+  const light =
+    lightThemes.find((t) => t.id === themeLight) ??
+    lightThemes[0] ??
+    defaultLightTheme;
 
-  const active = appearance === 'dark' ? dark : light;
+  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%,85%)',
-    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%,23%)',
-    },
-    appHeader: {
-      surface: 'hsl(244,23%,12%)',
-      border: 'hsl(244,23%,21%)',
-    },
-  },
-};
-
-const yaakLight = {
-  id: 'yaak-light',
-  label: 'Yaak',
-  dark: false,
-  base: {
-    surface: 'hsl(0,0%,100%)',
-    surfaceHighlight: 'hsl(218,24%,87%)',
-    text: 'hsl(217,24%,10%)',
-    textSubtle: 'hsl(217,24%,40%)',
-    textSubtlest: 'hsl(217,24%,58%)',
-    border: 'hsl(217,22%,90%)',
-    primary: 'hsl(266,100%,60%)',
-    secondary: 'hsl(220,24%,50%)',
-    info: 'hsl(206,100%,40%)',
-    success: 'hsl(139,66%,34%)',
-    notice: 'hsl(45,100%,34%)',
-    warning: 'hsl(30,100%,36%)',
-    danger: 'hsl(335,75%,48%)',
-  },
-  components: {
-    sidebar: {
-      surface: 'hsl(220,20%,98%)',
-      border: 'hsl(217,22%,88%)',
-      surfaceHighlight: 'hsl(217,25%,90%)',
-    },
-  },
-};
-
-export const defaultDarkTheme = yaakDark;
-export const defaultLightTheme = yaakLight;