More theme stuff

src-web/components/Settings/SettingsDesign.tsx

@@ -1,12 +1,25 @@
+import { invoke } from '@tauri-apps/api/core';
+import { open } from '@tauri-apps/plugin-dialog';
 import React from 'react';
+import { useLocalStorage } from 'react-use';
+import { useThemes } from '../../hooks/useThemes';
 import { capitalize } from '../../lib/capitalize';
+import { catppuccinMacchiato } from '../../lib/theme/themes/catppuccin';
+import { githubLight } from '../../lib/theme/themes/github';
+import { monokaiProDefault } from '../../lib/theme/themes/monokai-pro';
+import { rosePineDefault } from '../../lib/theme/themes/rose-pine';
+import { yaakDark } from '../../lib/theme/themes/yaak';
+import { getThemeCSS } from '../../lib/theme/window';
 import { Banner } from '../core/Banner';
 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 { InlineCode } from '../core/InlineCode';
 import { Input } from '../core/Input';
+import { Separator } from '../core/Separator';
+import { HStack, VStack } from '../core/Stacks';
 
 const buttonColors = [
   'primary',
@@ -37,8 +50,62 @@ const icons: IconProps['icon'][] = [
 ];
 
 export function SettingsDesign() {
+  const themes = useThemes();
+
+  const [exportDir, setExportDir] = useLocalStorage<string | null>('theme_export_dir', null);
+
+  const saveThemes = async () => {
+    const dir = await open({ directory: true });
+    if (!dir) return;
+
+    const allThemesCSS = themes.themes.map(getThemeCSS).join('\n\n');
+    const coreThemeCSS = [
+      yaakDark,
+      catppuccinMacchiato,
+      rosePineDefault,
+      monokaiProDefault,
+      githubLight,
+    ]
+      .map(getThemeCSS)
+      .join('\n\n');
+
+    await invoke('cmd_write_file_dev', {
+      pathname: dir + '/themes-all.css',
+      contents: coreThemeCSS,
+    });
+    await invoke('cmd_write_file_dev', {
+      pathname: dir + '/themes-slim.css',
+      contents: allThemesCSS,
+    });
+  };
+
   return (
     <div className="p-2 flex flex-col gap-3">
+      <VStack space={2}>
+        <InlineCode>{exportDir}</InlineCode>
+        <HStack space={2}>
+          <Button
+            size="sm"
+            color="secondary"
+            variant="border"
+            onClick={() => {
+              open({ directory: true }).then(setExportDir);
+            }}
+          >
+            Change Export Dir
+          </Button>
+          <Button
+            disabled={exportDir == null}
+            size="sm"
+            color="primary"
+            variant="border"
+            onClick={saveThemes}
+          >
+            Export CSS
+          </Button>
+        </HStack>
+      </VStack>
+      <Separator className="my-6" />
       <Input
         label="Field Label"
         name="demo"

src-web/components/Settings/SettingsDialog.tsx

@@ -30,7 +30,6 @@ export const SettingsDialog = () => {
         value={tab}
         addBorders
         label="Settings"
-        tabListClassName="h-md !-ml-1 mt-2"
         onChangeValue={setTab}
         tabs={tabs
           .filter((t) => t !== Tab.Design || isDev)

src-web/components/core/Editor/Editor.css

@@ -56,7 +56,7 @@
       }
     }
 
-    .placeholder-widget {
+    .placeholder {
       /* Colors */
       @apply bg-background text-fg-subtle border-background-highlight-secondary;
       @apply hover:border-background-highlight hover:text-fg hover:bg-background-highlight-secondary;
@@ -150,7 +150,7 @@
 
 .cm-editor .cm-foldPlaceholder {
   @apply px-2 border border-fg-subtler bg-background-highlight;
-  @apply hover:text-fg hover:border-fg-subtle;
+  @apply hover:text-fg hover:border-fg-subtle text-fg;
   @apply cursor-default !important;
 }
 

src-web/components/core/Editor/twig/placeholder.ts

@@ -11,10 +11,8 @@ class PlaceholderWidget extends WidgetType {
   }
   toDOM() {
     const elt = document.createElement('span');
-    elt.className = `x-theme-placeholder-widget placeholder-widget ${
-      this.isExistingVariable
-        ? 'x-theme-placeholder-widget--primary'
-        : 'x-theme-placeholder-widget--danger'
+    elt.className = `x-theme-placeholder placeholder ${
+      this.isExistingVariable ? 'x-theme-placeholder--primary' : 'x-theme-placeholder--danger'
     }`;
     elt.title = !this.isExistingVariable ? 'Variable not found in active environment' : '';
     elt.textContent = this.name;

src-web/components/core/Tabs/Tabs.tsx

@@ -74,6 +74,7 @@ export function Tabs({
         aria-label={label}
         className={classNames(
           tabListClassName,
+          addBorders && '!-ml-1 h-md mt-2',
           'flex items-center overflow-x-auto overflow-y-visible hide-scrollbars mt-1 mb-2',
           // Give space for button focus states within overflow boundary.
           '-ml-5 pl-3 pr-1 py-1',
@@ -109,7 +110,6 @@ export function Tabs({
                     {option && 'shortLabel' in option
                       ? option.shortLabel
                       : option?.label ?? 'Unknown'}
-                    <TabAccent enabled isActive={isActive} />
                     <Icon
                       size="sm"
                       icon="chevronDown"
@@ -127,7 +127,6 @@ export function Tabs({
                   className={btnClassName}
                 >
                   {t.label}
-                  <TabAccent enabled isActive={isActive} />
                 </button>
               );
             }
@@ -160,14 +159,3 @@ export const TabContent = memo(function TabContent({
     </div>
   );
 });
-
-function TabAccent({ isActive, enabled }: { isActive: boolean; enabled: boolean }) {
-  return (
-    <div
-      className={classNames(
-        'w-full opacity-40 border-b-2',
-        isActive && enabled ? 'border-b-background-highlight' : 'border-b-transparent',
-      )}
-    />
-  );
-}