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;
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);
}
});
}

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

@@ -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;
}

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

@@ -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;
}

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

@@ -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() {

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

@@ -443,8 +443,8 @@
flex-direction: row;
}
.target-name {
border-color: var(--neutral-400);
.target-name {
background: var(--input-background-fill);
border-color: var(--input-border-color);
padding: 0.8rem 1.0rem;
@@ -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);
padding: 0.4rem 1.0rem;
}
.target-name, .category-name {
border-width: var(--block-border-width);
color: var(--body-text-color);
.type {

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

@@ -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 {

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

@@ -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
})

2
src/lib/utils.ts
View File

@@ -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);

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

@@ -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);
}
}

70
src/scss/global.scss
View File

@@ -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;
}
}

772
src/scss/gradio.scss
View File

@@ -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;
}