From 3bf774ba0cee789af4037fa96b807c8180c465c4 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Fri, 12 May 2023 11:22:35 -0500
Subject: [PATCH] Gradio dark theme

---
 src/lib/api.ts                               |   6 +-
 src/lib/components/AccordionContainer.svelte |   4 +-
 src/lib/components/ComfyApp.svelte           |  34 +-
 src/lib/components/ComfyApp.ts               |   7 +-
 src/lib/components/ComfyProperties.svelte    |   9 +-
 src/lib/components/ComfyQueue.svelte         | 192 +++--
 src/lib/stores/queueState.ts                 |  93 ++-
 src/lib/utils.ts                             |   2 +-
 src/lib/widgets/ComboWidget.svelte           |  38 +-
 src/scss/global.scss                         |  70 ++
 src/scss/gradio.scss                         | 772 ++++++++++---------
 11 files changed, 735 insertions(+), 492 deletions(-)

diff --git a/src/lib/api.ts b/src/lib/api.ts
index d668fe8..b7d502d 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -154,7 +154,7 @@ export default class ComfyAPI {
                             this.clientId = msg.data.sid;
                             sessionStorage["Comfy.SessionId"] = this.clientId;
                         }
-                        this.eventBus.emit("status", msg.data.status);
+                        this.eventBus.emit("status", { execInfo: { queueRemaining: msg.data.status.exec_info.queue_remaining } });
                         break;
                     case "progress":
                         this.eventBus.emit("progress", msg.data as Progress);
@@ -172,10 +172,10 @@ export default class ComfyAPI {
                         this.eventBus.emit("execution_error", msg.data.prompt_id, msg.data.message);
                         break;
                     default:
-                        throw new Error(`Unknown message type: ${msg.type} ${msg}`);
+                        console.warn("Unhandled message:", event.data);
                 }
             } catch (error) {
-                console.warn("Unhandled message:", event.data);
+                console.error("Error handling message", event.data, error);
             }
         });
     }
diff --git a/src/lib/components/AccordionContainer.svelte b/src/lib/components/AccordionContainer.svelte
index 6b99cc2..978da9e 100644
--- a/src/lib/components/AccordionContainer.svelte
+++ b/src/lib/components/AccordionContainer.svelte
@@ -179,8 +179,8 @@
      }
  }
 
- :global(.label-wrap > span:not(.icon)) {
-     /* color: var(--block-title-text-color); */
+ :global(.label-wrap > span) {
+     color: var(--block-title-text-color);
      font-size: 16px;
  }
 
diff --git a/src/lib/components/ComfyApp.svelte b/src/lib/components/ComfyApp.svelte
index 589efe1..8eddb03 100644
--- a/src/lib/components/ComfyApp.svelte
+++ b/src/lib/components/ComfyApp.svelte
@@ -31,7 +31,7 @@
  let containerElem: HTMLDivElement;
  let resizeTimeout: NodeJS.Timeout | null;
  let hasShownUIHelpToast: boolean = false;
- let uiTheme: string = "";
+ let uiTheme: string = "gradio-dark";
  let fileInput: HTMLInputElement = undefined;
 
  let debugLayout: boolean = false;
@@ -182,6 +182,13 @@
  async function doRefreshCombos() {
      await app.refreshComboInNodes(true)
  }
+
+ $: if (uiTheme === "gradio-dark") {
+     document.getElementById("app").classList.add("dark")
+ }
+ else {
+     document.getElementById("app").classList.remove("dark")
+ }
 </script>
 
 <svelte:head>
@@ -190,7 +197,7 @@
     {/if}
 </svelte:head>
 
-<div id="main">
+<div id="main" class:dark={uiTheme === "gradio-dark"}>
     <div id="dropzone" class="dropzone"></div>
     <div id="container" bind:this={containerElem}>
         <Splitpanes theme="comfy" on:resize={refreshView}>
@@ -264,7 +271,8 @@
             <span class="label" for="ui-theme">
                 <BlockTitle>Theme</BlockTitle>
                 <select id="ui-theme" name="ui-theme" bind:value={uiTheme}>
-                    <option value="">None</option>
+                    <option value="gradio-dark">Gradio Dark</option>
+                    <option value="gradio-light">Gradio Light</option>
                     <option value="anapnoe">Anapnoe</option>
                 </select>
             </span>
@@ -280,8 +288,10 @@
 <SvelteToast options={toastOptions} />
 
 <style lang="scss">
+ $bottom-bar-height: 70px;
+
  #container {
-     height: calc(100vh - 70px);
+     height: calc(100vh - $bottom-bar-height);
      max-width: 100vw;
      display: grid;
      width: 100%;
@@ -301,7 +311,7 @@
      padding-right: 1em;
      margin-top: auto;
      overflow-x: auto;
-     height: 70px;
+     height: $bottom-bar-height;
 
      > .left {
          flex-shrink: 0;
@@ -338,28 +348,30 @@
  }
 
  :global(.splitpanes.comfy>.splitpanes__splitter) {
-     background-color: var(--secondary-100);
+     background: var(--comfy-splitpanes-background-fill);
 
      &:hover:not([disabled]) {
-         background-color: var(--secondary-300);
+         background: var(--comfy-splitpanes-background-fill-hover);
      }
      &:active:not([disabled]) {
-         background-color: var(--secondary-400);
+         background: var(--comfy-splitpanes-background-fill-active);
      }
  }
 
+ $splitter-size: 1rem;
+
  :global(.splitpanes.comfy.splitpanes--horizontal>.splitpanes__splitter) {
-     min-height: 20px;
+     min-height: $splitter-size;
      cursor: row-resize;
  }
 
  :global(.splitpanes.comfy.splitpanes--vertical>.splitpanes__splitter) {
-     min-width: 20px;
+     min-width: $splitter-size;
      cursor: col-resize;
  }
 
  :global(.splitpanes.comfy) {
-     max-height: calc(100vh - 70px);
+     max-height: calc(100vh - $bottom-bar-height);
      max-width: 100vw;
  }
 
diff --git a/src/lib/components/ComfyApp.ts b/src/lib/components/ComfyApp.ts
index 087b98c..8f8f0c4 100644
--- a/src/lib/components/ComfyApp.ts
+++ b/src/lib/components/ComfyApp.ts
@@ -346,10 +346,6 @@ export default class ComfyApp {
             this.lGraph.setDirtyCanvas(true, false);
         });
 
-        this.api.addEventListener("status", (status: ComfyAPIStatusResponse | null) => {
-            queueState.statusUpdated(status);
-        });
-
         this.api.addEventListener("executed", (promptID: PromptID, nodeID: NodeID, output: GalleryOutput) => {
             this.nodeOutputs[nodeID] = output;
             const node = this.lGraph.getNodeById(parseInt(nodeID)) as ComfyGraphNode;
@@ -388,8 +384,7 @@ export default class ComfyApp {
     private async updateHistoryAndQueue() {
         const queue = await this.api.getQueue();
         const history = await this.api.getHistory();
-        console.warn("QUEUE", queue)
-        console.warn("HISTORY", history)
+        queueState.queueUpdated(queue);
     }
 
     private requestPermissions() {
diff --git a/src/lib/components/ComfyProperties.svelte b/src/lib/components/ComfyProperties.svelte
index 9a65f5d..164f37c 100644
--- a/src/lib/components/ComfyProperties.svelte
+++ b/src/lib/components/ComfyProperties.svelte
@@ -443,8 +443,8 @@
  }
 
  .target-name {
-     border-color: var(--neutral-400);
-     background: var(--neutral-300);
+     background: var(--input-background-fill);
+     border-color: var(--input-border-color);
      padding: 0.8rem 1.0rem;
 
      .title {
@@ -458,13 +458,14 @@
  }
 
  .category-name {
+     background: var(--panel-background-fill);
+     border-color: var(--panel-border-color);
      padding: 0.4rem 1.0rem;
-     border-color: var(--neutral-300);
-     background: var(--neutral-200);
  }
 
  .target-name, .category-name {
      border-width: var(--block-border-width);
+     color: var(--body-text-color);
 
      .type {
          color: var(--neutral-500);
diff --git a/src/lib/components/ComfyQueue.svelte b/src/lib/components/ComfyQueue.svelte
index 15b5d71..d32ebba 100644
--- a/src/lib/components/ComfyQueue.svelte
+++ b/src/lib/components/ComfyQueue.svelte
@@ -1,76 +1,89 @@
 <script lang="ts">
- import queueState from "$lib/stores/queueState";
+ import queueState, { type QueueEntry } from "$lib/stores/queueState";
  import ProgressBar from "./ProgressBar.svelte";
  import { getNodeInfo } from "$lib/utils"
+	import type { Writable } from "svelte/store";
 
- const entries = [
-     {
-         "outputs": {
-             44: {
-                 "images": [
-                     {
-                         "filename": "ComfyUI_00052_.png",
-                         "subfolder": "",
-                         "type": "output"
-                     }
-                 ]
-             }
-         }
-     },
-     {
-         "outputs": {
-             44: {
-                 "images": [
-                     {
-                         "filename": "ComfyUI_00052_.png",
-                         "subfolder": "",
-                         "type": "output"
-                     }
-                 ]
-             }
-         }
-     },
-     {
-         "outputs": {
-             44: {
-                 "images": [
-                     {
-                         "filename": "ComfyUI_00052_.png",
-                         "subfolder": "",
-                         "type": "output"
-                     }
-                 ]
-             }
-         }
-     }
- ]
+ let queuePending: Writable<QueueEntry[]> | null = null;
+ let queueRunning: Writable<QueueEntry[]> | null = null;
 
- let _entries: any[] = []
+ type QueueUIEntry = {
+     message: string,
+     submessage: string,
+     date?: string,
+     status: "success" | "error" | "pending" | "running" | "all_cached",
+     images?: string[] // URLs
+ }
 
- $: if (entries) {
+ $: if ($queueState) {
+     queuePending = $queueState.queuePending
+     queueRunning = $queueState.queueRunning
+ }
+
+ let _entries: QueueUIEntry[] = []
+
+ $: if ($queuePending && $queuePending.length != _entries.length) {
      _entries = []
-     for (const entry of entries) {
-         for (const outputs of Object.values(entry.outputs)) {
-             const allImages = outputs.images.map(r => {
-                 // TODO configure backend URL
-                 const url = "http://localhost:8188/view?"
-                 const params = new URLSearchParams(r)
-                 return url + params
-             });
+     for (const entry of $queuePending) {
+         // for (const outputs of Object.values(entry.outputs)) {
+         //     const allImages = outputs.images.map(r => {
+         //         // TODO configure backend URL
+         //         const url = "http://localhost:8188/view?"
+         //         const params = new URLSearchParams(r)
+         //         return url + params
+         //     });
+         //
+         //     _entries.push({ allImages, name: "Output" })
+         // }
 
-             _entries.push({ allImages, name: "Output" })
+         let date = null;
+         if (entry.queuedAt) {
+             const options: Intl.DateTimeFormatOptions = {
+                 year: 'numeric',
+                 month: '2-digit',
+                 day: '2-digit',
+                 hour: 'numeric',
+                 minute: 'numeric'
+             };
+             const dateTimeFormat = new Intl.DateTimeFormat('en-US', options);
+             date = dateTimeFormat.format(entry.queuedAt);
          }
+
+         _entries.push({
+             message: "Prompt",
+             submessage: ".......",
+             date,
+             status: "pending",
+             images: null
+         })
      }
+     console.error("BUILDENTRIES", _entries, $queuePending)
  }
 </script>
 
 <div class="queue">
     <div class="queue-entries">
         {#each _entries as entry}
-            <div class="queue-entry">
-                <img class="queue-entry-image" src={entry.allImages[0]} alt="thumbnail" />
+            <div class="queue-entry {entry.status}">
+                {#if entry.images}
+                    <img class="queue-entry-image" src={entry.images[0]} alt="thumbnail" />
+                {:else}
+                    <div class="queue-entry-image-placeholder" />
+                {/if}
                 <div class="queue-entry-details">
-                    {entry.name}
+                    <div class="queue-entry-message">
+                        {entry.message}
+                    </div>
+                    <div class="queue-entry-submessage">
+                        {entry.submessage}
+                    </div>
+                </div>
+                <div class="queue-entry-rest">
+                    {#if entry.date != null}
+                        <span class="queue-entry-queued-at">
+                            {entry.date}
+                        </span>
+                    {/if}
                 </div>
             </div>
         {/each}
@@ -101,6 +114,11 @@
 </div>
 
 <style lang="scss">
+ $pending-height: 300px;
+
+ .queue {
+ }
+
  .queue-remaining {
      height: 5em;
      width: 100%;
@@ -112,18 +130,70 @@
      align-items: center;
  }
 
+ .queue-entries {
+     overflow-y: scroll;
+     max-height: calc(100vh - $pending-height);
+ }
+
  .queue-entry {
-     padding: 0.5rem 0.5rem 0 0.5rem;
+     padding: 0.5rem;
      display: flex;
      flex-direction: row;
+     border-top: 2px solid var(--neutral-200);
+     border-bottom: 1px solid var(--neutral-400);
+
+     &.success {
+         background: green
+     }
+     &.error {
+         background: red
+     }
+     &.cached {
+         background: grey
+     }
  }
 
  .queue-entry-image {
-     width: var(--size-20)
+     width: var(--size-20);
+ }
+
+ .queue-entry-image-placeholder {
+     width: var(--size-20);
+     background: grey;
+ }
+
+ .queue-entry-rest {
+     width: 100%;
+     position: relative;
  }
 
  .queue-entry-details {
-     width: var(--size-20)
+     position: relative;
+     padding: 1rem;
+     width: 100%;
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+ }
+
+ .queue-entry-message {
+     width: var(--size-20);
+     font-size: large;
+ }
+
+ .queue-entry-submessage {
+     width: var(--size-20);
+ }
+
+ .queue-entry-queued-at {
+     width: auto;
+     font-size: 14px;
+     position:absolute;
+     right: 0px;
+     bottom:0px;
+     padding: 0.0rem 0.4rem;
+     /* color: var(--neutral-600) */
+     color: var(--neutral-600);
  }
 
  .node-name {
@@ -137,10 +207,8 @@
 
  .bottom {
      width: 100%;
-     height: auto;
+     height: $pending-height;
      position: absolute;
-     bottom: 0;
-     padding: 0.5em;
  }
 
  .in-progress {
diff --git a/src/lib/stores/queueState.ts b/src/lib/stores/queueState.ts
index 8974708..f0eabc8 100644
--- a/src/lib/stores/queueState.ts
+++ b/src/lib/stores/queueState.ts
@@ -1,7 +1,7 @@
 import type { ComfyAPIHistoryItem, ComfyAPIQueueResponse, ComfyAPIStatusResponse, NodeID, PromptID } from "$lib/api";
 import type { Progress, SerializedPrompt, SerializedPromptOutputs } from "$lib/components/ComfyApp";
 import type { GalleryOutput } from "$lib/nodes/ComfyWidgetNodes";
-import { writable, type Writable } from "svelte/store";
+import { get, writable, type Writable } from "svelte/store";
 
 export type QueueItem = {
     name: string
@@ -20,6 +20,8 @@ type QueueStateOps = {
 
 export type QueueEntry = {
     number: number,
+    queuedAt?: Date,
+    finishedAt?: Date,
     promptID: PromptID,
     prompt: SerializedPrompt,
     extraData: any,
@@ -36,9 +38,9 @@ export type CompletedQueueEntry = {
 }
 
 export type QueueState = {
-    queueRunning: QueueEntry[],
-    queuePending: QueueEntry[],
-    queueCompleted: CompletedQueueEntry[],
+    queueRunning: Writable<QueueEntry[]>,
+    queuePending: Writable<QueueEntry[]>,
+    queueCompleted: Writable<CompletedQueueEntry[]>,
     queueRemaining: number | "X" | null;
     runningNodeID: number | null;
     progress: Progress | null
@@ -46,9 +48,9 @@ export type QueueState = {
 type WritableQueueStateStore = Writable<QueueState> & QueueStateOps;
 
 const store: Writable<QueueState> = writable({
-    queueRunning: [],
-    queuePending: [],
-    queueCompleted: [],
+    queueRunning: writable([]),
+    queuePending: writable([]),
+    queueCompleted: writable([]),
     queueRemaining: null,
     runningNodeID: null,
     progress: null
@@ -58,6 +60,8 @@ function toQueueEntry(resp: ComfyAPIHistoryItem): QueueEntry {
     const [num, promptID, prompt, extraData, goodOutputs] = resp
     return {
         number: num,
+        queuedAt: null, // TODO when ComfyUI passes the date
+        finishedAt: null,
         promptID,
         prompt,
         extraData,
@@ -67,15 +71,17 @@ function toQueueEntry(resp: ComfyAPIHistoryItem): QueueEntry {
 }
 
 function queueUpdated(queue: ComfyAPIQueueResponse) {
+    console.debug("[queueState] queueUpdated", queue.running.length, queue.pending.length)
     store.update((s) => {
-        s.queueRunning = queue.running.map(toQueueEntry);
-        s.queuePending = queue.pending.map(toQueueEntry);
-        s.queueRemaining = s.queuePending.length;
+        s.queueRunning.set(queue.running.map(toQueueEntry));
+        s.queuePending.set(queue.pending.map(toQueueEntry));
+        s.queueRemaining = queue.pending.length;
         return s
     })
 }
 
 function progressUpdated(progress: Progress) {
+    // console.debug("[queueState] progressUpdated", progress)
     store.update((s) => {
         s.progress = progress;
         return s
@@ -83,6 +89,7 @@ function progressUpdated(progress: Progress) {
 }
 
 function statusUpdated(status: ComfyAPIStatusResponse | null) {
+    console.debug("[queueState] statusUpdated", status)
     store.update((s) => {
         if (status !== null)
             s.queueRemaining = status.execInfo.queueRemaining;
@@ -99,9 +106,20 @@ function executingUpdated(promptID: PromptID | null, runningNodeID: NodeID | nul
         }
         else if (promptID != null) {
             // Prompt finished executing.
-            const index = s.queuePending.findIndex(e => e.promptID === promptID)
+            const queuePending = get(s.queuePending)
+            const index = queuePending.findIndex(e => e.promptID === promptID)
             if (index) {
-                s.queuePending = s.queuePending.splice(index, 1);
+                const entry = queuePending[index]
+                entry.finishedAt = new Date() // Now
+                s.queuePending.update(qp => { qp.splice(index, 1); return qp });
+                s.queueCompleted.update(qc => {
+                    const completed: CompletedQueueEntry = {
+                        entry,
+                        type: "success",
+                    }
+                    qc.push(completed)
+                    return qc
+                })
             }
             s.progress = null;
             s.runningNodeID = null;
@@ -113,17 +131,22 @@ function executingUpdated(promptID: PromptID | null, runningNodeID: NodeID | nul
 function executionCached(promptID: PromptID, nodes: NodeID[]) {
     console.debug("[queueState] executionCached", promptID, nodes)
     store.update(s => {
-        const index = s.queuePending.findIndex(e => e.promptID === promptID)
+        const queuePending = get(s.queuePending)
+        const index = queuePending.findIndex(e => e.promptID === promptID)
         if (index) {
-            const entry = s.queuePending[index]
+            const entry = queuePending[index]
 
             if (nodes.length >= Object.keys(entry.prompt.output).length) {
-                s.queuePending = s.queuePending.splice(index, 1);
-                const completed: CompletedQueueEntry = {
-                    entry,
-                    type: "all_cached"
-                }
-                s.queueCompleted.push(completed)
+                entry.finishedAt = new Date() // Now
+                s.queuePending.update(qp => { qp.splice(index, 1); return qp });
+                s.queueCompleted.update(qc => {
+                    const completed: CompletedQueueEntry = {
+                        entry,
+                        type: "all_cached",
+                    }
+                    qc.push(completed)
+                    return qc
+                })
             }
         }
         s.progress = null;
@@ -135,16 +158,21 @@ function executionCached(promptID: PromptID, nodes: NodeID[]) {
 function executionError(promptID: PromptID, message: string) {
     console.debug("[queueState] executionError", promptID, message)
     store.update(s => {
-        const index = s.queuePending.findIndex(e => e.promptID === promptID)
+        const queuePending = get(s.queuePending)
+        const index = queuePending.findIndex(e => e.promptID === promptID)
         if (index) {
             const entry = s.queuePending[index]
-            s.queuePending = s.queuePending.splice(index, 1);
-            const completed: CompletedQueueEntry = {
-                entry,
-                type: "error",
-                error: message
-            }
-            s.queueCompleted.push(completed)
+            entry.finishedAt = new Date() // Now
+            s.queuePending.update(qp => { qp.splice(index, 1); return qp });
+            s.queueCompleted.update(qc => {
+                const completed: CompletedQueueEntry = {
+                    entry,
+                    type: "error",
+                    error: message
+                }
+                qc.push(completed)
+                return qc
+            })
         }
         s.progress = null;
         s.runningNodeID = null;
@@ -157,13 +185,15 @@ function afterQueued(promptID: PromptID, number: number, prompt: SerializedPromp
     store.update(s => {
         const entry: QueueEntry = {
             number,
+            queuedAt: new Date(), // Now
+            finishedAt: null,
             promptID,
             prompt,
             extraData,
             goodOutputs: [],
             outputs: {}
         }
-        s.queuePending.push(entry)
+        s.queuePending.update(qp => { qp.push(entry); return qp })
         return s
     })
 }
@@ -171,10 +201,11 @@ function afterQueued(promptID: PromptID, number: number, prompt: SerializedPromp
 function onExecuted(promptID: PromptID, nodeID: NodeID, output: GalleryOutput) {
     console.debug("[queueState] onExecuted", promptID, nodeID, output)
     store.update(s => {
-        const entry = s.queuePending.find(e => e.promptID === promptID)
+        const queuePending = get(s.queuePending)
+        const entry = queuePending.find(e => e.promptID === promptID)
         if (entry) {
             entry.outputs[nodeID] = output;
-            s.queuePending.push(entry)
+            s.queuePending.update(qp => { qp.push(entry); return qp; })
         }
         return s
     })
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 62e72a0..005dd6a 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -104,7 +104,7 @@ export function promptToGraphVis(prompt: SerializedPrompt): string {
 
 export function getNodeInfo(nodeId: number): string {
     let app = (window as any).app;
-    if (!app)
+    if (!app || !app.lGraph)
         return String(nodeId);
 
     const title = app.lGraph.getNodeById(nodeId)?.title || String(nodeId);
diff --git a/src/lib/widgets/ComboWidget.svelte b/src/lib/widgets/ComboWidget.svelte
index 30c4880..999813a 100644
--- a/src/lib/widgets/ComboWidget.svelte
+++ b/src/lib/widgets/ComboWidget.svelte
@@ -246,6 +246,22 @@
      width: auto;
      --font-size: 13px;
      --height: 32px;
+     --background: var(--input-background-fill);
+     --selected-item-color: var(--body-text-color);
+     --input-color: var(--body-text-color);
+     --chevron-color: var(--body-text-color);
+     --border: 1px solid var(--input-border-color);
+     --border-hover: 1px solid var(--input-border-color-hover);
+     --border-focused: 1px solid var(--input-border-color-focus);
+     --border-radius-focused: 0px;
+     --border-radius: 0px;
+     --list-background: var(--comfy-dropdown-list-background);
+     --item-border: var(--comfy-dropdown-border-color);
+     --item-color: var(--body-text-color);
+     --item-color-hover: var(--comfy-dropdown-item-color-hover);
+     --item-background-hover: var(--comfy-dropdown-item-background-hover);
+     --item-color-active: var(--comfy-dropdown-item-color-active);
+     --item-background-active: var(--comfy-dropdown-item-background-active);
  }
 
  :global(.svelte-select-list) {
@@ -263,10 +279,11 @@
 
  .comfy-select-list {
      width: 30rem;
+     color: var(--item-color);
 
      > :global(.virtual-list-wrapper) {
          box-shadow: var(--block-shadow);
-         background-color: white;
+         background-color: var(--list-background);
      }
 
      .comfy-empty-list {
@@ -279,35 +296,34 @@
      }
 
      .comfy-select-item {
-         border: 1px solid var(--neutral-300);
+         border: 1px solid var(--item-border);
          border-top: none;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: flex;
          align-items: center;
-         background-color: white;
+         background-color: var(--list-background);
 
          font-size: 14px;
          padding: 0.2rem;
 
+         .comfy-select-label {
+         }
+
          &.mobile {
              font-size: 16px;
              padding: 1.2rem;
          }
 
          &.hover {
-             color: white;
-             background: var(--neutral-400);
+             color: var(--item-color-hover);
+             background: var(--item-background-hover);
              cursor: pointer;
          }
          &.active {
-             color: white;
-             background: var(--color-blue-500);
-         }
-
-         .comfy-select-label {
-
+             color: var(--item-color-active);
+             background: var(--item-background-active);
          }
      }
 
diff --git a/src/scss/global.scss b/src/scss/global.scss
index 2663526..475fb90 100644
--- a/src/scss/global.scss
+++ b/src/scss/global.scss
@@ -7,8 +7,33 @@ body {
     overscroll-behavior-y: contain;
 }
 
+#app {
+    background: var(--body-background-fill);
+}
+
 :root {
     --color-blue-500: #3985f5;
+
+    --comfy-splitpanes-background-fill: var(--secondary-100);
+    --comfy-splitpanes-background-fill-hover: var(--secondary-300);
+    --comfy-splitpanes-background-fill-active: var(--secondary-400);
+    --comfy-dropdown-item-color-hover: white;
+    --comfy-dropdown-item-background-hover: var(--neutral-400);
+    --comfy-dropdown-item-color-active: var(--neutral-100);
+    --comfy-dropdown-item-background-active: var(--secondary-600);
+}
+
+.dark {
+    color-scheme: dark;
+
+    --comfy-splitpanes-background-fill: var(--panel-border-color);
+    --comfy-splitpanes-background-fill-hover: var(--secondary-500);
+    --comfy-splitpanes-background-fill-active: var(--secondary-300);
+    --comfy-dropdown-list-background: var(--neutral-800);
+    --comfy-dropdown-item-color-hover: var(--neutral-400);
+    --comfy-dropdown-item-background-hover: var(--neutral-600);
+    --comfy-dropdown-item-background-active: var(--secondary-600);
+    --comfy-dropdown-border-color: var(--neutral-600);
 }
 
 @mixin disable-input {
@@ -18,3 +43,48 @@ body {
     box-shadow: 0 0 0 var(--shadow-spread) transparent, rgba(0, 0, 0, 0.08) 0px 2px 4px 0px inset;
     cursor: not-allowed;
 }
+
+select {
+    color: var(--body-text-color);
+    background: var(--block-background-fill);
+}
+
+.container {
+    background: var(--body-background-fill) !important;
+    &.selected {
+        background: var(--ae-primary-color) !important;
+        > .block.padded {
+            background: var(--ae-primary-color) !important;
+        }
+    }
+    > .block {
+        background: var(--body-background-fill) !important;
+        // border-radius: var(--ae-panel-border-radius) !important;
+    }
+    &.z-index0 {
+        > .block {
+            background: var(--panel-background-fill) !important;
+        }
+    }
+
+    // &:not(.edit) {
+    //     &.z-index1 > .block {
+    //         padding: calc(var(--ae-outside-gap-size) / 2) !important;
+    //         border-width: 0px !important;
+    //     }
+
+    //     > .block {
+    //         border: solid var(--ae-panel-border-width) var(--ae-panel-border-color) !important;
+    //     }
+    // }
+}
+
+.widget {
+    // padding: var(--ae-outside-gap-size);
+    // border: 1px solid var(--ae-panel-border-color);
+    .block {
+        // background: var(--ae-frame-bg-color) !important;
+        background: var(--block-background-fill) !important;
+    }
+
+}
diff --git a/src/scss/gradio.scss b/src/scss/gradio.scss
index 21d6a27..daeab29 100644
--- a/src/scss/gradio.scss
+++ b/src/scss/gradio.scss
@@ -1,365 +1,415 @@
 :root {
-	--primary-50: #fff7ed;
-	--primary-100: #ffedd5;
-	--primary-200: #fed7aa;
-	--primary-300: #fdba74;
-	--primary-400: #fb923c;
-	--primary-500: #f97316;
-	--primary-600: #ea580c;
-	--primary-700: #c2410c;
-	--primary-800: #9a3412;
-	--primary-900: #7c2d12;
-	--primary-950: #6c2e12;
-	--secondary-50: #eff6ff;
-	--secondary-100: #dbeafe;
-	--secondary-200: #bfdbfe;
-	--secondary-300: #93c5fd;
-	--secondary-400: #60a5fa;
-	--secondary-500: #3b82f6;
-	--secondary-600: #2563eb;
-	--secondary-700: #1d4ed8;
-	--secondary-800: #1e40af;
-	--secondary-900: #1e3a8a;
-	--secondary-950: #1d3660;
-	--neutral-50: #f9fafb;
-	--neutral-100: #f3f4f6;
-	--neutral-200: #e5e7eb;
-	--neutral-300: #d1d5db;
-	--neutral-400: #9ca3af;
-	--neutral-500: #6b7280;
-	--neutral-600: #4b5563;
-	--neutral-700: #374151;
-	--neutral-800: #1f2937;
-	--neutral-900: #111827;
-	--neutral-950: #0b0f19;
-	--spacing-xxs: 1px;
-	--spacing-xs: 2px;
-	--spacing-sm: 4px;
-	--spacing-md: 6px;
-	--spacing-lg: 8px;
-	--spacing-xl: 10px;
-	--spacing-xxl: 16px;
-	--radius-xxs: 1px;
-	--radius-xs: 2px;
-	--radius-sm: 4px;
-	--radius-md: 6px;
-	--radius-lg: 8px;
-	--radius-xl: 12px;
-	--radius-xxl: 22px;
-	--text-xxs: 9px;
-	--text-xs: 10px;
-	--text-sm: 12px;
-	--text-md: 14px;
-	--text-lg: 16px;
-	--text-xl: 22px;
-	--text-xxl: 26px;
-	--color-accent: var(--primary-500);
-	--color-accent-soft: var(--primary-50);
-	--background-fill-primary: white;
-	--background-fill-secondary: var(--neutral-50);
-	--border-color-accent: var(--primary-300);
-	--border-color-primary: var(--neutral-200);
-	--text-color-code-background-fill: var(--neutral-200);
-	--text-color-code-border: var(--border-color-primary);
-	--link-text-color: var(--secondary-600);
-	--link-text-color-active: var(--secondary-600);
-	--link-text-color-hover: var(--secondary-700);
-	--link-text-color-visited: var(--secondary-500);
-	--body-text-color-subdued: var(--neutral-400);
-	--body-background-fill: var(--background-fill-primary);
-	--body-text-color: var(--neutral-800);
-	--body-text-size: var(--text-md);
-	--body-text-weight: 400;
-	--embed-radius: var(--radius-lg);
-	--shadow-drop: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
-	--shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1),
-		0 1px 2px -1px rgb(0 0 0 / 0.1);
-	--shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
-	--shadow-spread: 3px;
-	--block-background-fill: var(--background-fill-primary);
-	--block-border-color: var(--border-color-primary);
-	--block-border-width: 1px;
-	--block-info-text-color: var(--body-text-color-subdued);
-	--block-info-text-size: var(--text-sm);
-	--block-info-text-weight: 400;
-	--block-label-background-fill: var(--background-fill-primary);
-	--block-label-border-color: var(--border-color-primary);
-	--block-label-border-width: 1px;
-	--block-label-text-color: var(--neutral-500);
-	--block-label-icon-color: var(--block-label-text-color);
-	--block-label-margin: 0;
-	--block-label-padding: var(--spacing-sm) var(--spacing-lg);
-	--block-label-radius: calc(var(--radius-lg) - 1px) 0
-		calc(var(--radius-lg) - 1px) 0;
-	--block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0
-		calc(var(--radius-lg) - 1px);
-	--block-label-text-size: var(--text-sm);
-	--block-label-text-weight: 400;
-	--block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
-	--block-radius: var(--radius-lg);
-	--block-shadow: var(--shadow-drop);
-	--block-title-background-fill: none;
-	--block-title-border-color: none;
-	--block-title-border-width: 0px;
-	--block-title-text-color: var(--neutral-500);
-	--block-title-padding: 0;
-	--block-title-radius: none;
-	--block-title-text-size: var(--text-md);
-	--block-title-text-weight: 400;
-	--container-radius: var(--radius-lg);
-	--form-gap-width: 1px;
-	--layout-gap: var(--spacing-xxl);
-	--panel-background-fill: var(--background-fill-secondary);
-	--panel-border-color: var(--border-color-primary);
-	--panel-border-width: 0;
-	--section-header-text-size: var(--text-md);
-	--section-header-text-weight: 400;
-	--checkbox-background-color: var(--background-fill-primary);
-	--checkbox-background-color-focus: var(--background-fill-primary);
-	--checkbox-background-color-hover: var(--background-fill-primary);
-	--checkbox-background-color-selected: var(--secondary-600);
-	--checkbox-border-color: var(--neutral-300);
-	--checkbox-border-color-focus: var(--secondary-500);
-	--checkbox-border-color-hover: var(--neutral-300);
-	--checkbox-border-color-selected: var(--secondary-600);
-	--checkbox-border-radius: var(--radius-sm);
-	--checkbox-border-width: var(--input-border-width);
-	--checkbox-label-background-fill: linear-gradient(
-		to top,
-		var(--neutral-50),
-		white
-	);
-	--checkbox-label-background-fill-hover: linear-gradient(
-		to top,
-		var(--neutral-100),
-		white
-	);
-	--checkbox-label-background-fill-selected: var(
-		--checkbox-label-background-fill
-	);
-	--checkbox-label-border-color: var(--border-color-primary);
-	--checkbox-label-border-color-hover: var(--border-color-primary);
-	--checkbox-label-border-width: var(--input-border-width);
-	--checkbox-label-gap: var(--spacing-lg);
-	--checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
-	--checkbox-label-shadow: var(--shadow-drop);
-	--checkbox-label-text-size: var(--text-md);
-	--checkbox-label-text-weight: 400;
-	--checkbox-shadow: var(--input-shadow);
-	--checkbox-label-text-color: var(--body-text-color);
-	--checkbox-label-text-color-selected: var(--checkbox-label-text-color);
-	--error-background-fill: linear-gradient(
-		to right,
-		#fee2e2,
-		var(--background-fill-secondary)
-	);
-	--error-border-color: #fecaca;
-	--error-border-width: 1px;
-	--error-text-color: #ef4444;
-	--prose-header-text-weight: 600;
-	--input-background-fill: white;
-	--input-background-fill-focus: var(--secondary-500);
-	--input-background-fill-hover: var(--input-background-fill);
-	--input-border-color: var(--border-color-primary);
-	--input-border-color-focus: var(--secondary-300);
-	--input-border-color-hover: var(--border-color-primary);
-	--input-border-width: 1px;
-	--input-padding: var(--spacing-xl);
-	--input-placeholder-color: var(--neutral-400);
-	--input-radius: var(--radius-lg);
-	--input-shadow: 0 0 0 var(--shadow-spread) transparent, var(--shadow-inset);
-	--input-shadow-focus: 0 0 0 var(--shadow-spread) var(--secondary-50),
-		var(--shadow-inset);
-	--input-text-size: var(--text-md);
-	--input-text-weight: 400;
-	--loader-color: var(--color-accent);
-	--prose-text-size: var(--text-md);
-	--prose-text-weight: 400;
-	--stat-background-fill: linear-gradient(
-		to right,
-		var(--primary-400),
-		var(--primary-200)
-	);
-	--table-border-color: var(--neutral-300);
-	--table-even-background-fill: white;
-	--table-odd-background-fill: var(--neutral-50);
-	--table-radius: var(--radius-lg);
-	--table-row-focus: var(--color-accent-soft);
-	--button-border-width: var(--input-border-width);
-	--button-cancel-background-fill: linear-gradient(
-		to bottom right,
-		#fee2e2,
-		#fecaca
-	);
-	--button-cancel-background-fill-hover: linear-gradient(
-		to bottom right,
-		#fee2e2,
-		#fee2e2
-	);
-	--button-cancel-border-color: #fecaca;
-	--button-cancel-border-color-hover: var(--button-cancel-border-color);
-	--button-cancel-text-color: #dc2626;
-	--button-cancel-text-color-hover: var(--button-cancel-text-color);
-	--button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
-	--button-large-radius: var(--radius-lg);
-	--button-large-text-size: var(--text-lg);
-	--button-large-text-weight: 600;
-	--button-primary-background-fill: linear-gradient(
-		to bottom right,
-		var(--primary-100),
-		var(--primary-300)
-	);
-	--button-primary-background-fill-hover: linear-gradient(
-		to bottom right,
-		var(--primary-100),
-		var(--primary-200)
-	);
-	--button-primary-border-color: var(--primary-200);
-	--button-primary-border-color-hover: var(--button-primary-border-color);
-	--button-primary-text-color: var(--primary-600);
-	--button-primary-text-color-hover: var(--button-primary-text-color);
-	--button-secondary-background-fill: linear-gradient(
-		to bottom right,
-		var(--neutral-100),
-		var(--neutral-200)
-	);
-	--button-secondary-background-fill-hover: linear-gradient(
-		to bottom right,
-		var(--neutral-100),
-		var(--neutral-100)
-	);
-	--button-secondary-border-color: var(--neutral-200);
-	--button-secondary-border-color-hover: var(--button-secondary-border-color);
-	--button-secondary-text-color: var(--neutral-700);
-	--button-secondary-text-color-hover: var(--button-secondary-text-color);
-	--button-shadow: var(--shadow-drop);
-	--button-shadow-active: var(--shadow-inset);
-	--button-shadow-hover: var(--shadow-drop-lg);
-	--button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
-	--button-small-radius: var(--radius-lg);
-	--button-small-text-size: var(--text-md);
-	--button-small-text-weight: 400;
-	--button-transition: none;
+  --name: default;
+  --primary-50: #fff7ed;
+  --primary-100: #ffedd5;
+  --primary-200: #fed7aa;
+  --primary-300: #fdba74;
+  --primary-400: #fb923c;
+  --primary-500: #f97316;
+  --primary-600: #ea580c;
+  --primary-700: #c2410c;
+  --primary-800: #9a3412;
+  --primary-900: #7c2d12;
+  --primary-950: #6c2e12;
+  --secondary-50: #eff6ff;
+  --secondary-100: #dbeafe;
+  --secondary-200: #bfdbfe;
+  --secondary-300: #93c5fd;
+  --secondary-400: #60a5fa;
+  --secondary-500: #3b82f6;
+  --secondary-600: #2563eb;
+  --secondary-700: #1d4ed8;
+  --secondary-800: #1e40af;
+  --secondary-900: #1e3a8a;
+  --secondary-950: #1d3660;
+  --neutral-50: #f9fafb;
+  --neutral-100: #f3f4f6;
+  --neutral-200: #e5e7eb;
+  --neutral-300: #d1d5db;
+  --neutral-400: #9ca3af;
+  --neutral-500: #6b7280;
+  --neutral-600: #4b5563;
+  --neutral-700: #374151;
+  --neutral-800: #1f2937;
+  --neutral-900: #111827;
+  --neutral-950: #0b0f19;
+  --spacing-xxs: 1px;
+  --spacing-xs: 2px;
+  --spacing-sm: 4px;
+  --spacing-md: 6px;
+  --spacing-lg: 8px;
+  --spacing-xl: 10px;
+  --spacing-xxl: 16px;
+  --radius-xxs: 1px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-xxl: 22px;
+  --text-xxs: 9px;
+  --text-xs: 10px;
+  --text-sm: 12px;
+  --text-md: 14px;
+  --text-lg: 16px;
+  --text-xl: 22px;
+  --text-xxl: 26px;
+  --font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
+  --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
+  --body-background-fill: var(--background-fill-primary);
+  --body-text-color: var(--neutral-800);
+  --body-text-size: var(--text-md);
+  --body-text-weight: 400;
+  --embed-radius: var(--radius-lg);
+  --color-accent: var(--primary-500);
+  --color-accent-soft: var(--primary-50);
+  --background-fill-primary: white;
+  --background-fill-secondary: var(--neutral-50);
+  --border-color-accent: var(--primary-300);
+  --border-color-primary: var(--neutral-200);
+  --link-text-color: var(--secondary-600);
+  --link-text-color-active: var(--secondary-600);
+  --link-text-color-hover: var(--secondary-700);
+  --link-text-color-visited: var(--secondary-500);
+  --body-text-color-subdued: var(--neutral-400);
+  --shadow-drop: rgba(0,0,0,0.05) 0px 1px 2px 0px;
+  --shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-inset: rgba(0,0,0,0.05) 0px 2px 4px 0px inset;
+  --shadow-spread: 3px;
+  --block-background-fill: var(--background-fill-primary);
+  --block-border-color: var(--border-color-primary);
+  --block-border-width: 1px;
+  --block-info-text-color: var(--body-text-color-subdued);
+  --block-info-text-size: var(--text-sm);
+  --block-info-text-weight: 400;
+  --block-label-background-fill: var(--background-fill-primary);
+  --block-label-border-color: var(--border-color-primary);
+  --block-label-border-width: 1px;
+  --block-label-shadow: var(--block-shadow);
+  --block-label-text-color: var(--neutral-500);
+  --block-label-margin: 0;
+  --block-label-padding: var(--spacing-sm) var(--spacing-lg);
+  --block-label-radius: calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px) 0;
+  --block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
+  --block-label-text-size: var(--text-sm);
+  --block-label-text-weight: 400;
+  --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
+  --block-radius: var(--radius-lg);
+  --block-shadow: var(--shadow-drop);
+  --block-title-background-fill: none;
+  --block-title-border-color: none;
+  --block-title-border-width: 0px;
+  --block-title-text-color: var(--neutral-500);
+  --block-title-padding: 0;
+  --block-title-radius: none;
+  --block-title-text-size: var(--text-md);
+  --block-title-text-weight: 400;
+  --container-radius: var(--radius-lg);
+  --form-gap-width: 1px;
+  --layout-gap: var(--spacing-xxl);
+  --panel-background-fill: var(--background-fill-secondary);
+  --panel-border-color: var(--border-color-primary);
+  --panel-border-width: 0;
+  --section-header-text-size: var(--text-md);
+  --section-header-text-weight: 400;
+  --checkbox-background-color: var(--background-fill-primary);
+  --checkbox-background-color-focus: var(--checkbox-background-color);
+  --checkbox-background-color-hover: var(--checkbox-background-color);
+  --checkbox-background-color-selected: var(--secondary-600);
+  --checkbox-border-color: var(--neutral-300);
+  --checkbox-border-color-focus: var(--secondary-500);
+  --checkbox-border-color-hover: var(--neutral-300);
+  --checkbox-border-color-selected: var(--secondary-600);
+  --checkbox-border-radius: var(--radius-sm);
+  --checkbox-border-width: var(--input-border-width);
+  --checkbox-label-background-fill: linear-gradient(to top, var(--neutral-50), white);
+  --checkbox-label-background-fill-hover: linear-gradient(to top, var(--neutral-100), white);
+  --checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
+  --checkbox-label-border-color: var(--border-color-primary);
+  --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
+  --checkbox-label-border-width: var(--input-border-width);
+  --checkbox-label-gap: var(--spacing-lg);
+  --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
+  --checkbox-label-shadow: var(--shadow-drop);
+  --checkbox-label-text-size: var(--text-md);
+  --checkbox-label-text-weight: 400;
+  --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+  --checkbox-shadow: var(--input-shadow);
+  --checkbox-label-text-color: var(--body-text-color);
+  --checkbox-label-text-color-selected: var(--checkbox-label-text-color);
+  --error-background-fill: linear-gradient(to right, #fee2e2, var(--background-fill-secondary));
+  --error-border-color: #fecaca;
+  --error-border-width: 1px;
+  --error-text-color: #ef4444;
+  --input-background-fill: white;
+  --input-background-fill-focus: var(--secondary-500);
+  --input-background-fill-hover: var(--input-background-fill);
+  --input-border-color: var(--border-color-primary);
+  --input-border-color-focus: var(--secondary-300);
+  --input-border-color-hover: var(--input-border-color);
+  --input-border-width: 1px;
+  --input-padding: var(--spacing-xl);
+  --input-placeholder-color: var(--neutral-400);
+  --input-radius: var(--radius-lg);
+  --input-shadow: 0 0 0 var(--shadow-spread) transparent, var(--shadow-inset);
+  --input-shadow-focus: 0 0 0 var(--shadow-spread) var(--secondary-50), var(--shadow-inset);
+  --input-text-size: var(--text-md);
+  --input-text-weight: 400;
+  --loader-color: var(--color-accent);
+  --prose-text-size: var(--text-md);
+  --prose-text-weight: 400;
+  --prose-header-text-weight: 600;
+  --slider-color: auto;
+  --stat-background-fill: linear-gradient(to right, var(--primary-400), var(--primary-200));
+  --table-border-color: var(--neutral-300);
+  --table-even-background-fill: white;
+  --table-odd-background-fill: var(--neutral-50);
+  --table-radius: var(--radius-lg);
+  --table-row-focus: var(--color-accent-soft);
+  --button-border-width: var(--input-border-width);
+  --button-cancel-background-fill: linear-gradient(to bottom right, #fee2e2, #fecaca);
+  --button-cancel-background-fill-hover: linear-gradient(to bottom right, #fee2e2, #fee2e2);
+  --button-cancel-border-color: #fecaca;
+  --button-cancel-border-color-hover: var(--button-cancel-border-color);
+  --button-cancel-text-color: #dc2626;
+  --button-cancel-text-color-hover: var(--button-cancel-text-color);
+  --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
+  --button-large-radius: var(--radius-lg);
+  --button-large-text-size: var(--text-lg);
+  --button-large-text-weight: 600;
+  --button-primary-background-fill: linear-gradient(to bottom right, var(--primary-100), var(--primary-300));
+  --button-primary-background-fill-hover: linear-gradient(to bottom right, var(--primary-100), var(--primary-200));
+  --button-primary-border-color: var(--primary-200);
+  --button-primary-border-color-hover: var(--button-primary-border-color);
+  --button-primary-text-color: var(--primary-600);
+  --button-primary-text-color-hover: var(--button-primary-text-color);
+  --button-secondary-background-fill: linear-gradient(to bottom right, var(--neutral-100), var(--neutral-200));
+  --button-secondary-background-fill-hover: linear-gradient(to bottom right, var(--neutral-100), var(--neutral-100));
+  --button-secondary-border-color: var(--neutral-200);
+  --button-secondary-border-color-hover: var(--button-secondary-border-color);
+  --button-secondary-text-color: var(--neutral-700);
+  --button-secondary-text-color-hover: var(--button-secondary-text-color);
+  --button-shadow: var(--shadow-drop);
+  --button-shadow-active: var(--shadow-inset);
+  --button-shadow-hover: var(--shadow-drop-lg);
+  --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
+  --button-small-radius: var(--radius-lg);
+  --button-small-text-size: var(--text-md);
+  --button-small-text-weight: 400;
+  --button-transition: none;
 }
+
 .dark {
-	--color-accent-soft: var(--neutral-900);
-	--background-fill-primary: var(--neutral-950);
-	--background-fill-secondary: var(--neutral-900);
-	--border-color-accent: var(--neutral-600);
-	--border-color-primary: var(--neutral-700);
-	--text-color-code-background-fill: var(--neutral-800);
-	--link-text-color-active: var(--secondary-500);
-	--link-text-color: var(--secondary-500);
-	--link-text-color-hover: var(--secondary-400);
-	--link-text-color-visited: var(--secondary-600);
-	--body-text-color-subdued: var(--neutral-400);
-	--body-background-fill: var(--background-fill-primary);
-	--body-text-color: var(--neutral-100);
-	--shadow-spread: 1px;
-	--block-background-fill: var(--neutral-800);
-	--block-border-color: var(--border-color-primary);
-	--block-border-width: 1px;
-	--block-info-text-color: var(--body-text-color-subdued);
-	--block-label-background-fill: var(--background-fill-secondary);
-	--block-label-border-color: var(--border-color-primary);
-	--block-label-border-width: 1px;
-	--block-label-text-color: var(--neutral-200);
-	--block-shadow: none;
-	--block-title-background-fill: none;
-	--block-title-border-color: none;
-	--block-title-border-width: 0px;
-	--block-title-text-color: var(--neutral-200);
-	--panel-background-fill: var(--background-fill-secondary);
-	--panel-border-color: var(--border-color-primary);
-	--checkbox-background-color: var(--neutral-800);
-	--checkbox-background-color-focus: var(--checkbox-background-color);
-	--checkbox-background-color-hover: var(--checkbox-background-color);
-	--checkbox-background-color-selected: var(--secondary-600);
-	--checkbox-border-color: var(--neutral-700);
-	--checkbox-border-color-focus: var(--secondary-500);
-	--checkbox-border-color-hover: var(--neutral-600);
-	--checkbox-border-color-selected: var(--secondary-600);
-	--checkbox-label-background-fill: linear-gradient(
-		to top,
-		var(--neutral-900),
-		var(--neutral-800)
-	);
-	--checkbox-label-background-fill-hover: linear-gradient(
-		to top,
-		var(--neutral-900),
-		var(--neutral-800)
-	);
-	--checkbox-label-background-fill-selected: var(
-		--checkbox-label-background-fill
-	);
-	--checkbox-label-border-color: var(--border-color-primary);
-	--checkbox-label-border-color-hover: var(--border-color-primary);
-	--checkbox-label-text-color: var(--body-text-color);
-	--checkbox-label-text-color-selected: var(--checkbox-label-text-color);
-	--error-background-fill: var(--background-fill-primary);
-	--error-border-color: var(--border-color-primary);
-	--error-border-width: var(--error-border-width);
-	--error-text-color: #ef4444;
-	--input-background-fill: var(--neutral-800);
-	--input-background-fill-focus: var(--secondary-600);
-	--input-background-fill-hover: var(--input-background-fill);
-	--input-border-color: var(--border-color-primary);
-	--input-border-color-focus: var(--neutral-700);
-	--input-border-color-hover: var(--border-color-primary);
-	--input-placeholder-color: var(--neutral-500);
-	--input-shadow: var(--input-shadow);
-	--input-shadow-focus: 0 0 0 var(--shadow-spread) var(--neutral-700),
-		var(--shadow-inset);
-	--loader-color: var(--loader-color);
-	--stat-background-fill: linear-gradient(
-		to right,
-		var(--primary-400),
-		var(--primary-600)
-	);
-	--table-border-color: var(--neutral-700);
-	--table-even-background-fill: var(--neutral-950);
-	--table-odd-background-fill: var(--neutral-900);
-	--table-row-focus: var(--color-accent-soft);
-	--button-cancel-background-fill: linear-gradient(
-		to bottom right,
-		#dc2626,
-		#b91c1c
-	);
-	--button-cancel-background-fill-hover: linear-gradient(
-		to bottom right,
-		#dc2626,
-		#dc2626
-	);
-	--button-cancel-border-color: #dc2626;
-	--button-cancel-border-color-hover: var(--button-cancel-border-color);
-	--button-cancel-text-color: white;
-	--button-cancel-text-color-hover: var(--button-cancel-text-color);
-	--button-primary-background-fill: linear-gradient(
-		to bottom right,
-		var(--primary-600),
-		var(--primary-700)
-	);
-	--button-primary-background-fill-hover: linear-gradient(
-		to bottom right,
-		var(--primary-600),
-		var(--primary-600)
-	);
-	--button-primary-border-color: var(--primary-600);
-	--button-primary-border-color-hover: var(--button-primary-border-color);
-	--button-primary-text-color: white;
-	--button-primary-text-color-hover: var(--button-primary-text-color);
-	--button-secondary-background-fill: linear-gradient(
-		to bottom right,
-		var(--neutral-600),
-		var(--neutral-700)
-	);
-	--button-secondary-background-fill-hover: linear-gradient(
-		to bottom right,
-		var(--neutral-600),
-		var(--neutral-600)
-	);
-	--button-secondary-border-color: var(--neutral-600);
-	--button-secondary-border-color-hover: var(--button-secondary-border-color);
-	--button-secondary-text-color: white;
-	--button-secondary-text-color-hover: var(--button-secondary-text-color);
+  --body-background-fill: var(--background-fill-primary);
+  --body-text-color: var(--neutral-100);
+  --color-accent-soft: var(--neutral-700);
+  --background-fill-primary: var(--neutral-950);
+  --background-fill-secondary: var(--neutral-900);
+  --border-color-accent: var(--neutral-600);
+  --border-color-primary: var(--neutral-700);
+  --link-text-color-active: var(--secondary-500);
+  --link-text-color: var(--secondary-500);
+  --link-text-color-hover: var(--secondary-400);
+  --link-text-color-visited: var(--secondary-600);
+  --body-text-color-subdued: var(--neutral-400);
+  --shadow-spread: 1px;
+  --block-background-fill: var(--neutral-800);
+  --block-border-color: var(--border-color-primary);
+  --block_border_width: None;
+  --block-info-text-color: var(--body-text-color-subdued);
+  --block-label-background-fill: var(--background-fill-secondary);
+  --block-label-border-color: var(--border-color-primary);
+  --block_label_border_width: None;
+  --block-label-text-color: var(--neutral-200);
+  --block_shadow: None;
+  --block_title_background_fill: None;
+  --block_title_border_color: None;
+  --block_title_border_width: None;
+  --block-title-text-color: var(--neutral-200);
+  --panel-background-fill: var(--background-fill-secondary);
+  --panel-border-color: var(--border-color-primary);
+  --panel_border_width: None;
+  --checkbox-background-color: var(--neutral-800);
+  --checkbox-background-color-focus: var(--checkbox-background-color);
+  --checkbox-background-color-hover: var(--checkbox-background-color);
+  --checkbox-background-color-selected: var(--secondary-600);
+  --checkbox-border-color: var(--neutral-700);
+  --checkbox-border-color-focus: var(--secondary-500);
+  --checkbox-border-color-hover: var(--neutral-600);
+  --checkbox-border-color-selected: var(--secondary-600);
+  --checkbox-border-width: var(--input-border-width);
+  --checkbox-label-background-fill: linear-gradient(to top, var(--neutral-900), var(--neutral-800));
+  --checkbox-label-background-fill-hover: linear-gradient(to top, var(--neutral-900), var(--neutral-800));
+  --checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
+  --checkbox-label-border-color: var(--border-color-primary);
+  --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
+  --checkbox-label-border-width: var(--input-border-width);
+  --checkbox-label-text-color: var(--body-text-color);
+  --checkbox-label-text-color-selected: var(--checkbox-label-text-color);
+  --error-background-fill: var(--background-fill-primary);
+  --error-border-color: var(--border-color-primary);
+  --error_border_width: None;
+  --error-text-color: #ef4444;
+  --input-background-fill: var(--neutral-800);
+  --input-background-fill-focus: var(--secondary-600);
+  --input-background-fill-hover: var(--input-background-fill);
+  --input-border-color: var(--border-color-primary);
+  --input-border-color-focus: var(--neutral-700);
+  --input-border-color-hover: var(--input-border-color);
+  --input_border_width: None;
+  --input-placeholder-color: var(--neutral-500);
+  --input_shadow: None;
+  --input-shadow-focus: 0 0 0 var(--shadow-spread) var(--neutral-700), var(--shadow-inset);
+  --loader_color: None;
+  --slider_color: None;
+  --stat-background-fill: linear-gradient(to right, var(--primary-400), var(--primary-600));
+  --table-border-color: var(--neutral-700);
+  --table-even-background-fill: var(--neutral-950);
+  --table-odd-background-fill: var(--neutral-900);
+  --table-row-focus: var(--color-accent-soft);
+  --button-border-width: var(--input-border-width);
+  --button-cancel-background-fill: linear-gradient(to bottom right, #dc2626, #b91c1c);
+  --button-cancel-background-fill-hover: linear-gradient(to bottom right, #dc2626, #dc2626);
+  --button-cancel-border-color: #dc2626;
+  --button-cancel-border-color-hover: var(--button-cancel-border-color);
+  --button-cancel-text-color: white;
+  --button-cancel-text-color-hover: var(--button-cancel-text-color);
+  --button-primary-background-fill: linear-gradient(to bottom right, var(--primary-500), var(--primary-600));
+  --button-primary-background-fill-hover: linear-gradient(to bottom right, var(--primary-500), var(--primary-500));
+  --button-primary-border-color: var(--primary-500);
+  --button-primary-border-color-hover: var(--button-primary-border-color);
+  --button-primary-text-color: white;
+  --button-primary-text-color-hover: var(--button-primary-text-color);
+  --button-secondary-background-fill: linear-gradient(to bottom right, var(--neutral-600), var(--neutral-700));
+  --button-secondary-background-fill-hover: linear-gradient(to bottom right, var(--neutral-600), var(--neutral-600));
+  --button-secondary-border-color: var(--neutral-600);
+  --button-secondary-border-color-hover: var(--button-secondary-border-color);
+  --button-secondary-text-color: white;
+  --button-secondary-text-color-hover: var(--button-secondary-text-color);
+  --name: default;
+  --primary-50: #fff7ed;
+  --primary-100: #ffedd5;
+  --primary-200: #fed7aa;
+  --primary-300: #fdba74;
+  --primary-400: #fb923c;
+  --primary-500: #f97316;
+  --primary-600: #ea580c;
+  --primary-700: #c2410c;
+  --primary-800: #9a3412;
+  --primary-900: #7c2d12;
+  --primary-950: #6c2e12;
+  --secondary-50: #eff6ff;
+  --secondary-100: #dbeafe;
+  --secondary-200: #bfdbfe;
+  --secondary-300: #93c5fd;
+  --secondary-400: #60a5fa;
+  --secondary-500: #3b82f6;
+  --secondary-600: #2563eb;
+  --secondary-700: #1d4ed8;
+  --secondary-800: #1e40af;
+  --secondary-900: #1e3a8a;
+  --secondary-950: #1d3660;
+  --neutral-50: #f9fafb;
+  --neutral-100: #f3f4f6;
+  --neutral-200: #e5e7eb;
+  --neutral-300: #d1d5db;
+  --neutral-400: #9ca3af;
+  --neutral-500: #6b7280;
+  --neutral-600: #4b5563;
+  --neutral-700: #374151;
+  --neutral-800: #1f2937;
+  --neutral-900: #111827;
+  --neutral-950: #0b0f19;
+  --spacing-xxs: 1px;
+  --spacing-xs: 2px;
+  --spacing-sm: 4px;
+  --spacing-md: 6px;
+  --spacing-lg: 8px;
+  --spacing-xl: 10px;
+  --spacing-xxl: 16px;
+  --radius-xxs: 1px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-xxl: 22px;
+  --text-xxs: 9px;
+  --text-xs: 10px;
+  --text-sm: 12px;
+  --text-md: 14px;
+  --text-lg: 16px;
+  --text-xl: 22px;
+  --text-xxl: 26px;
+  --font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
+  --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
+  --body-text-size: var(--text-md);
+  --body-text-weight: 400;
+  --embed-radius: var(--radius-lg);
+  --color-accent: var(--primary-500);
+  --shadow-drop: rgba(0,0,0,0.05) 0px 1px 2px 0px;
+  --shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --shadow-inset: rgba(0,0,0,0.05) 0px 2px 4px 0px inset;
+  --block-border-width: 1px;
+  --block-info-text-size: var(--text-sm);
+  --block-info-text-weight: 400;
+  --block-label-border-width: 1px;
+  --block-label-shadow: var(--block-shadow);
+  --block-label-margin: 0;
+  --block-label-padding: var(--spacing-sm) var(--spacing-lg);
+  --block-label-radius: calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px) 0;
+  --block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
+  --block-label-text-size: var(--text-sm);
+  --block-label-text-weight: 400;
+  --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
+  --block-radius: var(--radius-lg);
+  --block-shadow: var(--shadow-drop);
+  --block-title-background-fill: none;
+  --block-title-border-color: none;
+  --block-title-border-width: 0px;
+  --block-title-padding: 0;
+  --block-title-radius: none;
+  --block-title-text-size: var(--text-md);
+  --block-title-text-weight: 400;
+  --container-radius: var(--radius-lg);
+  --form-gap-width: 1px;
+  --layout-gap: var(--spacing-xxl);
+  --panel-border-width: 0;
+  --section-header-text-size: var(--text-md);
+  --section-header-text-weight: 400;
+  --checkbox-border-radius: var(--radius-sm);
+  --checkbox-label-gap: var(--spacing-lg);
+  --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
+  --checkbox-label-shadow: var(--shadow-drop);
+  --checkbox-label-text-size: var(--text-md);
+  --checkbox-label-text-weight: 400;
+  --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+  --checkbox-shadow: var(--input-shadow);
+  --error-border-width: 1px;
+  --input-border-width: 1px;
+  --input-padding: var(--spacing-xl);
+  --input-radius: var(--radius-lg);
+  --input-shadow: 0 0 0 var(--shadow-spread) transparent, var(--shadow-inset);
+  --input-text-size: var(--text-md);
+  --input-text-weight: 400;
+  --loader-color: var(--color-accent);
+  --prose-text-size: var(--text-md);
+  --prose-text-weight: 400;
+  --prose-header-text-weight: 600;
+  --slider-color: auto;
+  --table-radius: var(--radius-lg);
+  --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
+  --button-large-radius: var(--radius-lg);
+  --button-large-text-size: var(--text-lg);
+  --button-large-text-weight: 600;
+  --button-shadow: var(--shadow-drop);
+  --button-shadow-active: var(--shadow-inset);
+  --button-shadow-hover: var(--shadow-drop-lg);
+  --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
+  --button-small-radius: var(--radius-lg);
+  --button-small-text-size: var(--text-md);
+  --button-small-text-weight: 400;
+  --button-transition: none;
 }