neuro_llc/ComfyBox
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Gradio dark theme

Browse Source
This commit is contained in:
space-nuko
2023-05-12 11:22:35 -05:00
parent 34c18dea90
commit 3bf774ba0c
11 changed files with 735 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/api.ts
View File

@@ -154,7 +154,7 @@ export default class ComfyAPI {
this.clientId = msg.data.sid; this.clientId = msg.data.sid;
sessionStorage["Comfy.SessionId"] = this.clientId; 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; break;
case "progress": case "progress":
this.eventBus.emit("progress", msg.data as 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); this.eventBus.emit("execution_error", msg.data.prompt_id, msg.data.message);
break; break;
default: default:
throw new Error(`Unknown message type: ${msg.type} ${msg}`); console.warn("Unhandled message:", event.data);
} }
} catch (error) { } catch (error) {
console.warn("Unhandled message:", event.data); console.error("Error handling message", event.data, error);
} }
}); });
} }

4
src/lib/components/AccordionContainer.svelte
View File

@@ -179,8 +179,8 @@
} }
} }
:global(.label-wrap > span:not(.icon)) { :global(.label-wrap > span) {
/* color: var(--block-title-text-color); */ color: var(--block-title-text-color);
font-size: 16px; font-size: 16px;
} }

34
src/lib/components/ComfyApp.svelte
View File

@@ -31,7 +31,7 @@
let containerElem: HTMLDivElement; let containerElem: HTMLDivElement;
let resizeTimeout: NodeJS.Timeout | null; let resizeTimeout: NodeJS.Timeout | null;
let hasShownUIHelpToast: boolean = false; let hasShownUIHelpToast: boolean = false;
let uiTheme: string = ""; let uiTheme: string = "gradio-dark";
let fileInput: HTMLInputElement = undefined; let fileInput: HTMLInputElement = undefined;
let debugLayout: boolean = false; let debugLayout: boolean = false;
@@ -182,6 +182,13 @@
async function doRefreshCombos() { async function doRefreshCombos() {
await app.refreshComboInNodes(true) await app.refreshComboInNodes(true)
} }
$: if (uiTheme === "gradio-dark") {
document.getElementById("app").classList.add("dark")
}
else {
document.getElementById("app").classList.remove("dark")
}
</script> </script>
<svelte:head> <svelte:head>
@@ -190,7 +197,7 @@
{/if} {/if}
</svelte:head> </svelte:head>
<div id="main"> <div id="main" class:dark={uiTheme === "gradio-dark"}>
<div id="dropzone" class="dropzone"></div> <div id="dropzone" class="dropzone"></div>
<div id="container" bind:this={containerElem}> <div id="container" bind:this={containerElem}>
<Splitpanes theme="comfy" on:resize={refreshView}> <Splitpanes theme="comfy" on:resize={refreshView}>
@@ -264,7 +271,8 @@
<span class="label" for="ui-theme"> <span class="label" for="ui-theme">
<BlockTitle>Theme</BlockTitle> <BlockTitle>Theme</BlockTitle>
<select id="ui-theme" name="ui-theme" bind:value={uiTheme}> <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> <option value="anapnoe">Anapnoe</option>
</select> </select>
</span> </span>
@@ -280,8 +288,10 @@
<SvelteToast options={toastOptions} /> <SvelteToast options={toastOptions} />
<style lang="scss"> <style lang="scss">
$bottom-bar-height: 70px;
#container { #container {
height: calc(100vh - 70px); height: calc(100vh - $bottom-bar-height);
max-width: 100vw; max-width: 100vw;
display: grid; display: grid;
width: 100%; width: 100%;
@@ -301,7 +311,7 @@
padding-right: 1em; padding-right: 1em;
margin-top: auto; margin-top: auto;
overflow-x: auto; overflow-x: auto;
height: 70px; height: $bottom-bar-height;
> .left { > .left {
flex-shrink: 0; flex-shrink: 0;
@@ -338,28 +348,30 @@
} }
:global(.splitpanes.comfy>.splitpanes__splitter) { :global(.splitpanes.comfy>.splitpanes__splitter) {
background-color: var(--secondary-100); background: var(--comfy-splitpanes-background-fill);
&:hover:not([disabled]) { &:hover:not([disabled]) {
background-color: var(--secondary-300); background: var(--comfy-splitpanes-background-fill-hover);
} }
&:active:not([disabled]) { &: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) { :global(.splitpanes.comfy.splitpanes--horizontal>.splitpanes__splitter) {
min-height: 20px; min-height: $splitter-size;
cursor: row-resize; cursor: row-resize;
} }
:global(.splitpanes.comfy.splitpanes--vertical>.splitpanes__splitter) { :global(.splitpanes.comfy.splitpanes--vertical>.splitpanes__splitter) {
min-width: 20px; min-width: $splitter-size;
cursor: col-resize; cursor: col-resize;
} }
:global(.splitpanes.comfy) { :global(.splitpanes.comfy) {
max-height: calc(100vh - 70px); max-height: calc(100vh - $bottom-bar-height);
max-width: 100vw; max-width: 100vw;
} }

7
src/lib/components/ComfyApp.ts
View File

@@ -346,10 +346,6 @@ export default class ComfyApp {
this.lGraph.setDirtyCanvas(true, false); 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.api.addEventListener("executed", (promptID: PromptID, nodeID: NodeID, output: GalleryOutput) => {
this.nodeOutputs[nodeID] = output; this.nodeOutputs[nodeID] = output;
const node = this.lGraph.getNodeById(parseInt(nodeID)) as ComfyGraphNode; const node = this.lGraph.getNodeById(parseInt(nodeID)) as ComfyGraphNode;
@@ -388,8 +384,7 @@ export default class ComfyApp {
private async updateHistoryAndQueue() { private async updateHistoryAndQueue() {
const queue = await this.api.getQueue(); const queue = await this.api.getQueue();
const history = await this.api.getHistory(); const history = await this.api.getHistory();
console.warn("QUEUE", queue) queueState.queueUpdated(queue);
console.warn("HISTORY", history)
} }
private requestPermissions() { private requestPermissions() {

9
src/lib/components/ComfyProperties.svelte
View File

@@ -443,8 +443,8 @@
flex-direction: row; flex-direction: row;
} }
.target-name { .target-name {
border-color: var(--neutral-400); background: var(--input-background-fill);
border-color: var(--input-border-color); border-color: var(--input-border-color);
padding: 0.8rem 1.0rem; padding: 0.8rem 1.0rem;
@@ -458,13 +458,14 @@
} }
} }
.category-name {
background: var(--panel-background-fill);
border-color: var(--panel-border-color); border-color: var(--panel-border-color);
padding: 0.4rem 1.0rem;
border-color: var(--neutral-300);
padding: 0.4rem 1.0rem; padding: 0.4rem 1.0rem;
} }
.target-name, .category-name { .target-name, .category-name {
border-width: var(--block-border-width);
color: var(--body-text-color); color: var(--body-text-color);
.type { .type {

192
src/lib/components/ComfyQueue.svelte
View File

@@ -1,76 +1,89 @@
<script lang="ts"> <script lang="ts">
import queueState from "$lib/stores/queueState"; import queueState, { type QueueEntry } from "$lib/stores/queueState";
import ProgressBar from "./ProgressBar.svelte"; import ProgressBar from "./ProgressBar.svelte";
import { getNodeInfo } from "$lib/utils" import { getNodeInfo } from "$lib/utils"
import type { Writable } from "svelte/store";
const entries = [ let queuePending: Writable<QueueEntry[]> | null = null;
{ let queueRunning: Writable<QueueEntry[]> | null = null;
"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 _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 = [] _entries = []
for (const entry of entries) { for (const entry of $queuePending) {
for (const outputs of Object.values(entry.outputs)) { // for (const outputs of Object.values(entry.outputs)) {
const allImages = outputs.images.map(r => { // const allImages = outputs.images.map(r => {
// TODO configure backend URL // // TODO configure backend URL
const url = "http://localhost:8188/view?" // const url = "http://localhost:8188/view?"
const params = new URLSearchParams(r) // const params = new URLSearchParams(r)
return url + params // 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> </script>
<div class="queue"> <div class="queue">
<div class="queue-entries"> <div class="queue-entries">
{#each _entries as entry} {#each _entries as entry}
<div class="queue-entry"> <div class="queue-entry {entry.status}">
<img class="queue-entry-image" src={entry.allImages[0]} alt="thumbnail" /> {#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"> <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>
</div> </div>
{/each} {/each}
@@ -101,6 +114,11 @@
</div> </div>
<style lang="scss"> <style lang="scss">
$pending-height: 300px;
.queue {
}
.queue-remaining { .queue-remaining {
height: 5em; height: 5em;
width: 100%; width: 100%;
@@ -112,18 +130,70 @@
align-items: center; align-items: center;
} }
.queue-entries {
overflow-y: scroll;
max-height: calc(100vh - $pending-height);
}
.queue-entry { .queue-entry {
padding: 0.5rem 0.5rem 0 0.5rem; padding: 0.5rem;
display: flex; display: flex;
flex-direction: row; 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 { .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 { .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 { .node-name {
@@ -137,10 +207,8 @@
.bottom { .bottom {
width: 100%; width: 100%;
height: auto; height: $pending-height;
position: absolute; position: absolute;
bottom: 0;
padding: 0.5em;
} }
.in-progress { .in-progress {

77
src/lib/stores/queueState.ts
View File

@@ -1,7 +1,7 @@
import type { ComfyAPIHistoryItem, ComfyAPIQueueResponse, ComfyAPIStatusResponse, NodeID, PromptID } from "$lib/api"; import type { ComfyAPIHistoryItem, ComfyAPIQueueResponse, ComfyAPIStatusResponse, NodeID, PromptID } from "$lib/api";
import type { Progress, SerializedPrompt, SerializedPromptOutputs } from "$lib/components/ComfyApp"; import type { Progress, SerializedPrompt, SerializedPromptOutputs } from "$lib/components/ComfyApp";
import type { GalleryOutput } from "$lib/nodes/ComfyWidgetNodes"; 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 = { export type QueueItem = {
name: string name: string
@@ -20,6 +20,8 @@ type QueueStateOps = {
export type QueueEntry = { export type QueueEntry = {
number: number, number: number,
queuedAt?: Date,
finishedAt?: Date,
promptID: PromptID, promptID: PromptID,
prompt: SerializedPrompt, prompt: SerializedPrompt,
extraData: any, extraData: any,
@@ -36,9 +38,9 @@ export type CompletedQueueEntry = {
} }
export type QueueState = { export type QueueState = {
queueRunning: QueueEntry[], queueRunning: Writable<QueueEntry[]>,
queuePending: QueueEntry[], queuePending: Writable<QueueEntry[]>,
queueCompleted: CompletedQueueEntry[], queueCompleted: Writable<CompletedQueueEntry[]>,
queueRemaining: number | "X" | null; queueRemaining: number | "X" | null;
runningNodeID: number | null; runningNodeID: number | null;
progress: Progress | null progress: Progress | null
@@ -46,9 +48,9 @@ export type QueueState = {
type WritableQueueStateStore = Writable<QueueState> & QueueStateOps; type WritableQueueStateStore = Writable<QueueState> & QueueStateOps;
const store: Writable<QueueState> = writable({ const store: Writable<QueueState> = writable({
queueRunning: [], queueRunning: writable([]),
queuePending: [], queuePending: writable([]),
queueCompleted: [], queueCompleted: writable([]),
queueRemaining: null, queueRemaining: null,
runningNodeID: null, runningNodeID: null,
progress: null progress: null
@@ -58,6 +60,8 @@ function toQueueEntry(resp: ComfyAPIHistoryItem): QueueEntry {
const [num, promptID, prompt, extraData, goodOutputs] = resp const [num, promptID, prompt, extraData, goodOutputs] = resp
return { return {
number: num, number: num,
queuedAt: null, // TODO when ComfyUI passes the date
finishedAt: null,
promptID, promptID,
prompt, prompt,
extraData, extraData,
@@ -67,15 +71,17 @@ function toQueueEntry(resp: ComfyAPIHistoryItem): QueueEntry {
} }
function queueUpdated(queue: ComfyAPIQueueResponse) { function queueUpdated(queue: ComfyAPIQueueResponse) {
console.debug("[queueState] queueUpdated", queue.running.length, queue.pending.length)
store.update((s) => { store.update((s) => {
s.queueRunning = queue.running.map(toQueueEntry); s.queueRunning.set(queue.running.map(toQueueEntry));
s.queuePending = queue.pending.map(toQueueEntry); s.queuePending.set(queue.pending.map(toQueueEntry));
s.queueRemaining = s.queuePending.length; s.queueRemaining = queue.pending.length;
return s return s
}) })
} }
function progressUpdated(progress: Progress) { function progressUpdated(progress: Progress) {
// console.debug("[queueState] progressUpdated", progress)
store.update((s) => { store.update((s) => {
s.progress = progress; s.progress = progress;
return s return s
@@ -83,6 +89,7 @@ function progressUpdated(progress: Progress) {
} }
function statusUpdated(status: ComfyAPIStatusResponse | null) { function statusUpdated(status: ComfyAPIStatusResponse | null) {
console.debug("[queueState] statusUpdated", status)
store.update((s) => { store.update((s) => {
if (status !== null) if (status !== null)
s.queueRemaining = status.execInfo.queueRemaining; s.queueRemaining = status.execInfo.queueRemaining;
@@ -99,9 +106,20 @@ function executingUpdated(promptID: PromptID | null, runningNodeID: NodeID | nul
} }
else if (promptID != null) { else if (promptID != null) {
// Prompt finished executing. // 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) { 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.progress = null;
s.runningNodeID = null; s.runningNodeID = null;
@@ -113,17 +131,22 @@ function executingUpdated(promptID: PromptID | null, runningNodeID: NodeID | nul
function executionCached(promptID: PromptID, nodes: NodeID[]) { function executionCached(promptID: PromptID, nodes: NodeID[]) {
console.debug("[queueState] executionCached", promptID, nodes) console.debug("[queueState] executionCached", promptID, nodes)
store.update(s => { 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) { if (index) {
const entry = s.queuePending[index] const entry = queuePending[index]
if (nodes.length >= Object.keys(entry.prompt.output).length) { if (nodes.length >= Object.keys(entry.prompt.output).length) {
s.queuePending = s.queuePending.splice(index, 1); entry.finishedAt = new Date() // Now
s.queuePending.update(qp => { qp.splice(index, 1); return qp });
s.queueCompleted.update(qc => {
const completed: CompletedQueueEntry = { const completed: CompletedQueueEntry = {
entry, entry,
type: "all_cached" type: "all_cached",
} }
s.queueCompleted.push(completed) qc.push(completed)
return qc
})
} }
} }
s.progress = null; s.progress = null;
@@ -135,16 +158,21 @@ function executionCached(promptID: PromptID, nodes: NodeID[]) {
function executionError(promptID: PromptID, message: string) { function executionError(promptID: PromptID, message: string) {
console.debug("[queueState] executionError", promptID, message) console.debug("[queueState] executionError", promptID, message)
store.update(s => { 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) { if (index) {
const entry = s.queuePending[index] const entry = s.queuePending[index]
s.queuePending = s.queuePending.splice(index, 1); entry.finishedAt = new Date() // Now
s.queuePending.update(qp => { qp.splice(index, 1); return qp });
s.queueCompleted.update(qc => {
const completed: CompletedQueueEntry = { const completed: CompletedQueueEntry = {
entry, entry,
type: "error", type: "error",
error: message error: message
} }
s.queueCompleted.push(completed) qc.push(completed)
return qc
})
} }
s.progress = null; s.progress = null;
s.runningNodeID = null; s.runningNodeID = null;
@@ -157,13 +185,15 @@ function afterQueued(promptID: PromptID, number: number, prompt: SerializedPromp
store.update(s => { store.update(s => {
const entry: QueueEntry = { const entry: QueueEntry = {
number, number,
queuedAt: new Date(), // Now
finishedAt: null,
promptID, promptID,
prompt, prompt,
extraData, extraData,
goodOutputs: [], goodOutputs: [],
outputs: {} outputs: {}
} }
s.queuePending.push(entry) s.queuePending.update(qp => { qp.push(entry); return qp })
return s return s
}) })
} }
@@ -171,10 +201,11 @@ function afterQueued(promptID: PromptID, number: number, prompt: SerializedPromp
function onExecuted(promptID: PromptID, nodeID: NodeID, output: GalleryOutput) { function onExecuted(promptID: PromptID, nodeID: NodeID, output: GalleryOutput) {
console.debug("[queueState] onExecuted", promptID, nodeID, output) console.debug("[queueState] onExecuted", promptID, nodeID, output)
store.update(s => { 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) { if (entry) {
entry.outputs[nodeID] = output; entry.outputs[nodeID] = output;
s.queuePending.push(entry) s.queuePending.update(qp => { qp.push(entry); return qp; })
} }
return s return s
}) })

2
src/lib/utils.ts
View File

@@ -104,7 +104,7 @@ export function promptToGraphVis(prompt: SerializedPrompt): string {
export function getNodeInfo(nodeId: number): string { export function getNodeInfo(nodeId: number): string {
let app = (window as any).app; let app = (window as any).app;
if (!app) if (!app || !app.lGraph)
return String(nodeId); return String(nodeId);
const title = app.lGraph.getNodeById(nodeId)?.title || String(nodeId); const title = app.lGraph.getNodeById(nodeId)?.title || String(nodeId);

38
src/lib/widgets/ComboWidget.svelte
View File

@@ -246,6 +246,22 @@
width: auto; width: auto;
--font-size: 13px; --font-size: 13px;
--height: 32px; --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) { :global(.svelte-select-list) {
@@ -263,10 +279,11 @@
.comfy-select-list { .comfy-select-list {
width: 30rem; width: 30rem;
color: var(--item-color);
> :global(.virtual-list-wrapper) { > :global(.virtual-list-wrapper) {
box-shadow: var(--block-shadow); box-shadow: var(--block-shadow);
background-color: white; background-color: var(--list-background);
} }
.comfy-empty-list { .comfy-empty-list {
@@ -279,35 +296,34 @@
} }
.comfy-select-item { .comfy-select-item {
border: 1px solid var(--neutral-300); border: 1px solid var(--item-border);
border-top: none; border-top: none;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: flex; display: flex;
align-items: center; align-items: center;
background-color: white; background-color: var(--list-background);
font-size: 14px; font-size: 14px;
padding: 0.2rem; padding: 0.2rem;
.comfy-select-label {
}
&.mobile { &.mobile {
font-size: 16px; font-size: 16px;
padding: 1.2rem; padding: 1.2rem;
} }
&.hover { &.hover {
color: white; color: var(--item-color-hover);
background: var(--neutral-400); background: var(--item-background-hover);
cursor: pointer; cursor: pointer;
} }
&.active { &.active {
color: white; color: var(--item-color-active);
background: var(--color-blue-500); background: var(--item-background-active);
}
.comfy-select-label {
} }
} }

70
src/scss/global.scss
View File

@@ -7,8 +7,33 @@ body {
overscroll-behavior-y: contain; overscroll-behavior-y: contain;
} }
#app {
background: var(--body-background-fill);
}
:root { :root {
--color-blue-500: #3985f5; --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 { @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; box-shadow: 0 0 0 var(--shadow-spread) transparent, rgba(0, 0, 0, 0.08) 0px 2px 4px 0px inset;
cursor: not-allowed; 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;
}
}

330
src/scss/gradio.scss
View File

@@ -1,4 +1,5 @@
:root { :root {
--name: default;
--primary-50: #fff7ed; --primary-50: #fff7ed;
--primary-100: #ffedd5; --primary-100: #ffedd5;
--primary-200: #fed7aa; --primary-200: #fed7aa;
@@ -53,27 +54,26 @@
--text-lg: 16px; --text-lg: 16px;
--text-xl: 22px; --text-xl: 22px;
--text-xxl: 26px; --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: var(--primary-500);
--color-accent-soft: var(--primary-50); --color-accent-soft: var(--primary-50);
--background-fill-primary: white; --background-fill-primary: white;
--background-fill-secondary: var(--neutral-50); --background-fill-secondary: var(--neutral-50);
--border-color-accent: var(--primary-300); --border-color-accent: var(--primary-300);
--border-color-primary: var(--neutral-200); --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: var(--secondary-600);
--link-text-color-active: var(--secondary-600); --link-text-color-active: var(--secondary-600);
--link-text-color-hover: var(--secondary-700); --link-text-color-hover: var(--secondary-700);
--link-text-color-visited: var(--secondary-500); --link-text-color-visited: var(--secondary-500);
--body-text-color-subdued: var(--neutral-400); --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: rgba(0,0,0,0.05) 0px 1px 2px 0px;
--shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1), --shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px 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-inset: rgba(0,0,0,0.05) 0px 2px 4px 0px inset;
--shadow-spread: 3px; --shadow-spread: 3px;
--block-background-fill: var(--background-fill-primary); --block-background-fill: var(--background-fill-primary);
@@ -85,14 +85,12 @@
--block-label-background-fill: var(--background-fill-primary); --block-label-background-fill: var(--background-fill-primary);
--block-label-border-color: var(--border-color-primary); --block-label-border-color: var(--border-color-primary);
--block-label-border-width: 1px; --block-label-border-width: 1px;
--block-label-shadow: var(--block-shadow);
--block-label-text-color: var(--neutral-500); --block-label-text-color: var(--neutral-500);
--block-label-icon-color: var(--block-label-text-color);
--block-label-margin: 0; --block-label-margin: 0;
--block-label-padding: var(--spacing-sm) var(--spacing-lg); --block-label-padding: var(--spacing-sm) var(--spacing-lg);
--block-label-radius: calc(var(--radius-lg) - 1px) 0 --block-label-radius: calc(var(--radius-lg) - 1px) 0 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-right-radius: 0 calc(var(--radius-lg) - 1px) 0
calc(var(--radius-lg) - 1px);
--block-label-text-size: var(--text-sm); --block-label-text-size: var(--text-sm);
--block-label-text-weight: 400; --block-label-text-weight: 400;
--block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px); --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
@@ -115,8 +113,8 @@
--section-header-text-size: var(--text-md); --section-header-text-size: var(--text-md);
--section-header-text-weight: 400; --section-header-text-weight: 400;
--checkbox-background-color: var(--background-fill-primary); --checkbox-background-color: var(--background-fill-primary);
--checkbox-background-color-focus: var(--background-fill-primary); --checkbox-background-color-focus: var(--checkbox-background-color);
--checkbox-background-color-hover: var(--background-fill-primary); --checkbox-background-color-hover: var(--checkbox-background-color);
--checkbox-background-color-selected: var(--secondary-600); --checkbox-background-color-selected: var(--secondary-600);
--checkbox-border-color: var(--neutral-300); --checkbox-border-color: var(--neutral-300);
--checkbox-border-color-focus: var(--secondary-500); --checkbox-border-color-focus: var(--secondary-500);
@@ -124,78 +122,54 @@
--checkbox-border-color-selected: var(--secondary-600); --checkbox-border-color-selected: var(--secondary-600);
--checkbox-border-radius: var(--radius-sm); --checkbox-border-radius: var(--radius-sm);
--checkbox-border-width: var(--input-border-width); --checkbox-border-width: var(--input-border-width);
--checkbox-label-background-fill: linear-gradient( --checkbox-label-background-fill: linear-gradient(to top, var(--neutral-50), white);
to top, --checkbox-label-background-fill-hover: linear-gradient(to top, var(--neutral-100), white);
var(--neutral-50), --checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
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: var(--border-color-primary);
--checkbox-label-border-color-hover: var(--border-color-primary); --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
--checkbox-label-border-width: var(--input-border-width); --checkbox-label-border-width: var(--input-border-width);
--checkbox-label-gap: var(--spacing-lg); --checkbox-label-gap: var(--spacing-lg);
--checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md)); --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
--checkbox-label-shadow: var(--shadow-drop); --checkbox-label-shadow: var(--shadow-drop);
--checkbox-label-text-size: var(--text-md); --checkbox-label-text-size: var(--text-md);
--checkbox-label-text-weight: 400; --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-shadow: var(--input-shadow);
--checkbox-label-text-color: var(--body-text-color); --checkbox-label-text-color: var(--body-text-color);
--checkbox-label-text-color-selected: var(--checkbox-label-text-color); --checkbox-label-text-color-selected: var(--checkbox-label-text-color);
--error-background-fill: linear-gradient( --error-background-fill: linear-gradient(to right, #fee2e2, var(--background-fill-secondary));
to right,
#fee2e2,
var(--background-fill-secondary)
);
--error-border-color: #fecaca; --error-border-color: #fecaca;
--error-border-width: 1px; --error-border-width: 1px;
--error-text-color: #ef4444; --error-text-color: #ef4444;
--prose-header-text-weight: 600;
--input-background-fill: white; --input-background-fill: white;
--input-background-fill-focus: var(--secondary-500); --input-background-fill-focus: var(--secondary-500);
--input-background-fill-hover: var(--input-background-fill); --input-background-fill-hover: var(--input-background-fill);
--input-border-color: var(--border-color-primary); --input-border-color: var(--border-color-primary);
--input-border-color-focus: var(--secondary-300); --input-border-color-focus: var(--secondary-300);
--input-border-color-hover: var(--border-color-primary); --input-border-color-hover: var(--input-border-color);
--input-border-width: 1px; --input-border-width: 1px;
--input-padding: var(--spacing-xl); --input-padding: var(--spacing-xl);
--input-placeholder-color: var(--neutral-400); --input-placeholder-color: var(--neutral-400);
--input-radius: var(--radius-lg); --input-radius: var(--radius-lg);
--input-shadow: 0 0 0 var(--shadow-spread) transparent, var(--shadow-inset); --input-shadow: 0 0 0 var(--shadow-spread) transparent, var(--shadow-inset);
--input-shadow-focus: 0 0 0 var(--shadow-spread) var(--secondary-50), --input-shadow-focus: 0 0 0 var(--shadow-spread) var(--secondary-50), var(--shadow-inset);
var(--shadow-inset);
--input-text-size: var(--text-md); --input-text-size: var(--text-md);
--input-text-weight: 400; --input-text-weight: 400;
--loader-color: var(--color-accent); --loader-color: var(--color-accent);
--prose-text-size: var(--text-md); --prose-text-size: var(--text-md);
--prose-text-weight: 400; --prose-text-weight: 400;
--stat-background-fill: linear-gradient( --prose-header-text-weight: 600;
to right, --slider-color: auto;
var(--primary-400), --stat-background-fill: linear-gradient(to right, var(--primary-400), var(--primary-200));
var(--primary-200)
);
--table-border-color: var(--neutral-300); --table-border-color: var(--neutral-300);
--table-even-background-fill: white; --table-even-background-fill: white;
--table-odd-background-fill: var(--neutral-50); --table-odd-background-fill: var(--neutral-50);
--table-radius: var(--radius-lg); --table-radius: var(--radius-lg);
--table-row-focus: var(--color-accent-soft); --table-row-focus: var(--color-accent-soft);
--button-border-width: var(--input-border-width); --button-border-width: var(--input-border-width);
--button-cancel-background-fill: linear-gradient( --button-cancel-background-fill: linear-gradient(to bottom right, #fee2e2, #fecaca);
to bottom right, --button-cancel-background-fill-hover: linear-gradient(to bottom right, #fee2e2, #fee2e2);
#fee2e2,
#fecaca
);
--button-cancel-background-fill-hover: linear-gradient(
to bottom right,
#fee2e2,
#fee2e2
);
--button-cancel-border-color: #fecaca; --button-cancel-border-color: #fecaca;
--button-cancel-border-color-hover: var(--button-cancel-border-color); --button-cancel-border-color-hover: var(--button-cancel-border-color);
--button-cancel-text-color: #dc2626; --button-cancel-text-color: #dc2626;
@@ -204,30 +178,14 @@
--button-large-radius: var(--radius-lg); --button-large-radius: var(--radius-lg);
--button-large-text-size: var(--text-lg); --button-large-text-size: var(--text-lg);
--button-large-text-weight: 600; --button-large-text-weight: 600;
--button-primary-background-fill: linear-gradient( --button-primary-background-fill: linear-gradient(to bottom right, var(--primary-100), var(--primary-300));
to bottom right, --button-primary-background-fill-hover: linear-gradient(to bottom right, var(--primary-100), var(--primary-200));
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: var(--primary-200);
--button-primary-border-color-hover: var(--button-primary-border-color); --button-primary-border-color-hover: var(--button-primary-border-color);
--button-primary-text-color: var(--primary-600); --button-primary-text-color: var(--primary-600);
--button-primary-text-color-hover: var(--button-primary-text-color); --button-primary-text-color-hover: var(--button-primary-text-color);
--button-secondary-background-fill: linear-gradient( --button-secondary-background-fill: linear-gradient(to bottom right, var(--neutral-100), var(--neutral-200));
to bottom right, --button-secondary-background-fill-hover: linear-gradient(to bottom right, var(--neutral-100), var(--neutral-100));
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: var(--neutral-200);
--button-secondary-border-color-hover: var(--button-secondary-border-color); --button-secondary-border-color-hover: var(--button-secondary-border-color);
--button-secondary-text-color: var(--neutral-700); --button-secondary-text-color: var(--neutral-700);
@@ -241,36 +199,37 @@
--button-small-text-weight: 400; --button-small-text-weight: 400;
--button-transition: none; --button-transition: none;
} }
.dark { .dark {
--color-accent-soft: var(--neutral-900); --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-primary: var(--neutral-950);
--background-fill-secondary: var(--neutral-900); --background-fill-secondary: var(--neutral-900);
--border-color-accent: var(--neutral-600); --border-color-accent: var(--neutral-600);
--border-color-primary: var(--neutral-700); --border-color-primary: var(--neutral-700);
--text-color-code-background-fill: var(--neutral-800);
--link-text-color-active: var(--secondary-500); --link-text-color-active: var(--secondary-500);
--link-text-color: var(--secondary-500); --link-text-color: var(--secondary-500);
--link-text-color-hover: var(--secondary-400); --link-text-color-hover: var(--secondary-400);
--link-text-color-visited: var(--secondary-600); --link-text-color-visited: var(--secondary-600);
--body-text-color-subdued: var(--neutral-400); --body-text-color-subdued: var(--neutral-400);
--body-background-fill: var(--background-fill-primary);
--body-text-color: var(--neutral-100);
--shadow-spread: 1px; --shadow-spread: 1px;
--block-background-fill: var(--neutral-800); --block-background-fill: var(--neutral-800);
--block-border-color: var(--border-color-primary); --block-border-color: var(--border-color-primary);
--block-border-width: 1px; --block_border_width: None;
--block-info-text-color: var(--body-text-color-subdued); --block-info-text-color: var(--body-text-color-subdued);
--block-label-background-fill: var(--background-fill-secondary); --block-label-background-fill: var(--background-fill-secondary);
--block-label-border-color: var(--border-color-primary); --block-label-border-color: var(--border-color-primary);
--block-label-border-width: 1px; --block_label_border_width: None;
--block-label-text-color: var(--neutral-200); --block-label-text-color: var(--neutral-200);
--block-shadow: none; --block_shadow: None;
--block-title-background-fill: none; --block_title_background_fill: None;
--block-title-border-color: none; --block_title_border_color: None;
--block-title-border-width: 0px; --block_title_border_width: None;
--block-title-text-color: var(--neutral-200); --block-title-text-color: var(--neutral-200);
--panel-background-fill: var(--background-fill-secondary); --panel-background-fill: var(--background-fill-secondary);
--panel-border-color: var(--border-color-primary); --panel-border-color: var(--border-color-primary);
--panel_border_width: None;
--checkbox-background-color: var(--neutral-800); --checkbox-background-color: var(--neutral-800);
--checkbox-background-color-focus: var(--checkbox-background-color); --checkbox-background-color-focus: var(--checkbox-background-color);
--checkbox-background-color-hover: var(--checkbox-background-color); --checkbox-background-color-hover: var(--checkbox-background-color);
@@ -279,87 +238,178 @@
--checkbox-border-color-focus: var(--secondary-500); --checkbox-border-color-focus: var(--secondary-500);
--checkbox-border-color-hover: var(--neutral-600); --checkbox-border-color-hover: var(--neutral-600);
--checkbox-border-color-selected: var(--secondary-600); --checkbox-border-color-selected: var(--secondary-600);
--checkbox-label-background-fill: linear-gradient( --checkbox-border-width: var(--input-border-width);
to top, --checkbox-label-background-fill: linear-gradient(to top, var(--neutral-900), var(--neutral-800));
var(--neutral-900), --checkbox-label-background-fill-hover: linear-gradient(to top, var(--neutral-900), var(--neutral-800));
var(--neutral-800) --checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
);
--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: var(--border-color-primary);
--checkbox-label-border-color-hover: 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: var(--body-text-color);
--checkbox-label-text-color-selected: var(--checkbox-label-text-color); --checkbox-label-text-color-selected: var(--checkbox-label-text-color);
--error-background-fill: var(--background-fill-primary); --error-background-fill: var(--background-fill-primary);
--error-border-color: var(--border-color-primary); --error-border-color: var(--border-color-primary);
--error-border-width: var(--error-border-width); --error_border_width: None;
--error-text-color: #ef4444; --error-text-color: #ef4444;
--input-background-fill: var(--neutral-800); --input-background-fill: var(--neutral-800);
--input-background-fill-focus: var(--secondary-600); --input-background-fill-focus: var(--secondary-600);
--input-background-fill-hover: var(--input-background-fill); --input-background-fill-hover: var(--input-background-fill);
--input-border-color: var(--border-color-primary); --input-border-color: var(--border-color-primary);
--input-border-color-focus: var(--neutral-700); --input-border-color-focus: var(--neutral-700);
--input-border-color-hover: var(--border-color-primary); --input-border-color-hover: var(--input-border-color);
--input_border_width: None;
--input-placeholder-color: var(--neutral-500); --input-placeholder-color: var(--neutral-500);
--input-shadow: var(--input-shadow); --input_shadow: None;
--input-shadow-focus: 0 0 0 var(--shadow-spread) var(--neutral-700), --input-shadow-focus: 0 0 0 var(--shadow-spread) var(--neutral-700), var(--shadow-inset);
var(--shadow-inset); --loader_color: None;
--loader-color: var(--loader-color); --slider_color: None;
--stat-background-fill: linear-gradient( --stat-background-fill: linear-gradient(to right, var(--primary-400), var(--primary-600));
to right,
var(--primary-400),
var(--primary-600)
);
--table-border-color: var(--neutral-700); --table-border-color: var(--neutral-700);
--table-even-background-fill: var(--neutral-950); --table-even-background-fill: var(--neutral-950);
--table-odd-background-fill: var(--neutral-900); --table-odd-background-fill: var(--neutral-900);
--table-row-focus: var(--color-accent-soft); --table-row-focus: var(--color-accent-soft);
--button-cancel-background-fill: linear-gradient( --button-border-width: var(--input-border-width);
to bottom right, --button-cancel-background-fill: linear-gradient(to bottom right, #dc2626, #b91c1c);
#dc2626, --button-cancel-background-fill-hover: linear-gradient(to bottom right, #dc2626, #dc2626);
#b91c1c
);
--button-cancel-background-fill-hover: linear-gradient(
to bottom right,
#dc2626,
#dc2626
);
--button-cancel-border-color: #dc2626; --button-cancel-border-color: #dc2626;
--button-cancel-border-color-hover: var(--button-cancel-border-color); --button-cancel-border-color-hover: var(--button-cancel-border-color);
--button-cancel-text-color: white; --button-cancel-text-color: white;
--button-cancel-text-color-hover: var(--button-cancel-text-color); --button-cancel-text-color-hover: var(--button-cancel-text-color);
--button-primary-background-fill: linear-gradient( --button-primary-background-fill: linear-gradient(to bottom right, var(--primary-500), var(--primary-600));
to bottom right, --button-primary-background-fill-hover: linear-gradient(to bottom right, var(--primary-500), var(--primary-500));
var(--primary-600), --button-primary-border-color: var(--primary-500);
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-border-color-hover: var(--button-primary-border-color);
--button-primary-text-color: white; --button-primary-text-color: white;
--button-primary-text-color-hover: var(--button-primary-text-color); --button-primary-text-color-hover: var(--button-primary-text-color);
--button-secondary-background-fill: linear-gradient( --button-secondary-background-fill: linear-gradient(to bottom right, var(--neutral-600), var(--neutral-700));
to bottom right, --button-secondary-background-fill-hover: linear-gradient(to bottom right, var(--neutral-600), var(--neutral-600));
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: var(--neutral-600);
--button-secondary-border-color-hover: var(--button-secondary-border-color); --button-secondary-border-color-hover: var(--button-secondary-border-color);
--button-secondary-text-color: white; --button-secondary-text-color: white;
--button-secondary-text-color-hover: var(--button-secondary-text-color); --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;
} }