move theme options to sub menu

src/app.css

@@ -44,6 +44,42 @@
   --padding-l: .75em;
   --padding-xl: 1em;
   --padding-xxl: 1.5em;
+
+  --shadow-color: 220 3% 15%;
+  --shadow-strength: 1%;
+
+  --shadow-1: 0 1px 2px -1px oklch(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
+  --shadow-2:
+    0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
+  --shadow-3:
+    0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
+    0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
+    0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+    0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+    0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
+  --shadow-4:
+    0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
+    0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+    0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+    0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
+  --shadow-5:
+    0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
+    0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+    0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+    0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
+  --shadow-6:
+    0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
+    0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
+    0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
+    0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
+    0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
+    0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
 }
 
 html {

src/routes/(editor).tsx

@@ -1,12 +1,13 @@
-import { Link, Meta, Style, Title } from "@solidjs/meta";
+import { Link, Meta, Title } from "@solidjs/meta";
-import { Component, createEffect, createMemo, createSignal, ErrorBoundary, ParentProps, Show, Suspense } from "solid-js";
+import { Component, createMemo, createSignal, createUniqueId, ErrorBoundary, ParentProps, Show } from "solid-js";
 import { FilesProvider } from "~/features/file";
 import { CommandPalette, CommandPaletteApi, Menu, MenuProvider } from "~/features/menu";
 import { A, RouteDefinition, useBeforeLeave } from "@solidjs/router";
 import { createCommand, Modifier } from "~/features/command";
 import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/components/colorschemepicker";
-import { getRequestEvent, isServer } from "solid-js/web";
+import { getRequestEvent } from "solid-js/web";
 import { HttpHeader } from "@solidjs/start";
+import { FaSolidPalette } from "solid-icons/fa";
 import css from "./editor.module.css";
 
 const event = getRequestEvent();
@@ -21,6 +22,7 @@ export const route: RouteDefinition = {
 
 export default function Editor(props: ParentProps) {
     const theme = useTheme();
+    const themeMenuId = createUniqueId();
 
     const [commandPalette, setCommandPalette] = createSignal<CommandPaletteApi>();
 
@@ -85,8 +87,15 @@ export default function Editor(props: ParentProps) {
                 <Menu.Mount />
 
                 <section class={css.right}>
-                    <ColorSchemePicker />
+                    <div class={css.themeMenu}>
+                        <button class={css.themeMenuButton} id={`${themeMenuId}-button`} popoverTarget={`${themeMenuId}-dialog`} title="Open theme picker menu">
+                            <FaSolidPalette />
+                        </button>
 
+                        <dialog class={css.themeMenuDialog} id={`${themeMenuId}-dialog`} popover anchor={`${themeMenuId}-button`}>
+                            <ColorSchemePicker />
+                        </dialog>
+                    </div>
                 </section>
             </nav>
 

src/routes/editor.module.css

@@ -47,6 +47,41 @@
             display: grid;
             grid-auto-flow: column;
             align-content: center;
+
+            & .themeMenu {
+                display: contents;
+
+                & > button {
+                    display: flex;
+                    justify-content: center;
+                    padding: var(--padding-m);
+                    border: none;
+                    border-radius: var(--radii-m);
+                    background-color: transparent;
+
+                    &:hover {
+                        background-color: var(--surface-500);
+                    }
+                }
+
+                & > dialog {
+                    inset-inline-end: anchor(right);
+                    inset-block-start: anchor(bottom);
+
+                    padding: var(--padding-m);
+                    border: none;
+                    border-radius: var(--radii-m);
+                    border-top-right-radius: 0;
+                    background-color: var(--surface-600);
+                    box-shadow: var(--shadow-3);
+                }
+
+                &:has(:popover-open) > button {
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
+                    background-color: var(--surface-600);
+                }
+            }
         }
     }