actual-css 0.3.1 → 0.4.0

package/src/js/flyout.js

@@ -144,10 +144,29 @@ function connectTrigger(trigger) {
   trigger.addEventListener("keydown", onTriggerKeydown, { signal: controller.signal });
 }
 
-function resolvePanel(trigger, state) {
-  if (state.panel?.isConnected) return state.panel;
+function releasePanelReference(trigger, state) {
+  state.releaseMenu?.();
+  state.releaseMenu = null;
+
+  const panel = state.panel;
+  state.panel = null;
+  if (!panel) return;
+
+  const panelEntry = panelRefs.get(panel);
+  if (!panelEntry) return;
+
+  panelEntry.triggers.delete(trigger);
+  if (panelEntry.triggers.size === 0) {
+    panelEntry.release();
+    panelRefs.delete(panel);
+  }
+}
 
+function resolvePanel(trigger, state) {
   const panel = panelFor(trigger);
+  if (state.panel === panel && panel?.isConnected) return panel;
+
+  releasePanelReference(trigger, state);
   if (!panel) return null;
 
   let panelEntry = panelRefs.get(panel);
@@ -174,21 +193,12 @@ function resolvePanel(trigger, state) {
 function disconnectTrigger(trigger) {
   const state = triggerMap.get(trigger);
   if (!state) return;
-  state.releaseMenu?.();
   state.controller.abort();
   if (state.panel?.isConnected && isSurfaceOpen(state.panel)) {
     closeSurface(state.panel, { restoreFocus: false });
   }
+  releasePanelReference(trigger, state);
   triggerMap.delete(trigger);
-
-  const panelEntry = state.panel ? panelRefs.get(state.panel) : undefined;
-  if (panelEntry) {
-    panelEntry.triggers.delete(trigger);
-    if (panelEntry.triggers.size === 0) {
-      panelEntry.release();
-      panelRefs.delete(state.panel);
-    }
-  }
 }
 
 registerEnhancement("flyout", (trigger) => {

package/src/js/full.js

@@ -0,0 +1,26 @@
+/*
+ * Actual CSS - JavaScript runtime, full bundle entry.
+ *
+ * Each module self-registers via observer: importing this bundle enables
+ * common behaviors. No DOMContentLoaded ceremony, no init calls.
+ * Injected content wires automatically; removal cleans up automatically.
+ *
+ * A plain `<script src="actual.full.js"></script>` (no bundler, no import) still
+ * gets the full runtime, including declarative triggers like status's
+ * `command="--status"` and the `actual:status` event — no global needed to
+ * drive them from other inline scripts either.
+ */
+
+import "./flyout.js";
+import "./context-menu.js";
+import "./dialog.js";
+import "./dismiss.js";
+import "./tab.js";
+import "./tooltip.js";
+import "./scrollspy.js";
+import "./filter.js";
+import "./mask.js";
+import "./password.js";
+import "./validation.js";
+import "./status.js";
+import "./index.js";

package/src/js/index.js

@@ -1,28 +1,12 @@
 /*
- * Actual CSS - JavaScript runtime.
+ * Actual CSS - JavaScript runtime, core entry.
  *
- * Each module self-registers via observer: importing the default runtime
- * enables common behaviors. No DOMContentLoaded ceremony, no init calls.
- * Injected content wires automatically; removal cleans up automatically.
- *
- * A plain `<script src="actual.js"></script>` (no bundler, no import) still
- * gets the full runtime, including declarative triggers like status's
- * `command="--status"` and the `actual:status` event — no global needed to
- * drive them from other inline scripts either.
+ * This entry only starts the enhancement manifest loader. Built-in behaviors
+ * (dialogs, menus, tabs, validation, ...) ship in the full bundle entry
+ * (src/js/full.js). Use this module for pages that only need progressive
+ * enhancement via enhancement manifests.
  */
 
-import "./flyout.js";
-import "./context-menu.js";
-import "./dialog.js";
-import "./dismiss.js";
-import "./tab.js";
-import "./tooltip.js";
-import "./scrollspy.js";
-import "./filter.js";
-import "./mask.js";
-import "./password.js";
-import "./validation.js";
-import "./status.js";
 import { watchEnhancementManifests } from "./enhancement-loader.js";
 
 watchEnhancementManifests();

package/src/js/surface.js

@@ -1,4 +1,5 @@
 import enhance from "./enhance.js";
+import { registerEscapeDismissal } from "./escape.js";
 import { EVENTS } from "./events.js";
 import { autoUpdate, reposition, repositionAt } from "./floating.js";
 
@@ -418,37 +419,6 @@ function ensureDocumentClick(menu) {
   doc.addEventListener("click", onDocumentClick);
 }
 
-const dismissableStacks = new WeakMap();
-
-export function registerEscapeDismissal(element, dismiss) {
-  const doc = element.ownerDocument;
-  let stack = dismissableStacks.get(doc);
-  if (!stack) {
-    stack = [];
-    dismissableStacks.set(doc, stack);
-    doc.addEventListener("keydown", onDocumentEscape);
-  }
-
-  const entry = { element, dismiss };
-  stack.push(entry);
-
-  return () => {
-    const index = stack.indexOf(entry);
-    if (index >= 0) stack.splice(index, 1);
-  };
-}
-
-function onDocumentEscape(event) {
-  if (event.key !== "Escape" || event.ctrlKey || event.altKey || event.shiftKey) return;
-
-  const stack = dismissableStacks.get(event.currentTarget);
-  const entry = stack.at(-1);
-  if (!entry) return;
-
-  event.preventDefault();
-  entry.dismiss({ restoreFocus: true });
-}
-
 export function getSurfaceAutoClose(menu) {
   return surfaceMap.get(menu)?.autoClose ?? "outside";
 }

package/src/js/tooltip.js

@@ -28,6 +28,7 @@
  */
 
 import enhance from "./enhance.js";
+import { registerEscapeDismissal } from "./escape.js";
 import { autoUpdate, reposition } from "./floating.js";
 import { CLASSES } from "./selectors.js";
 
@@ -40,6 +41,8 @@ const HIDE_DELAY_MS = 100;
  * @property {Element | null} activeRef Trigger that last showed this tip.
  * @property {AbortController} controller Tip-level event listener cleanup.
  * @property {(() => void) | null} stopTracking Floating-position cleanup while visible.
+ * @property {(() => void) | null} unregisterEscape Escape-stack cleanup while visible and dismissable.
+ * @property {Element | null} escapeRef Trigger represented by the current Escape-stack entry.
  * @property {boolean} generated True when the tip was created from data-tooltip text.
  * @property {{ parent: Node, next: ChildNode | null } | null} mount Original DOM position for explicit tips moved into a dialog/body root.
  * @property {ReturnType<typeof setTimeout> | null} timer Pending delayed show.
@@ -140,15 +143,27 @@ function repositionTip(ref, tip) {
   });
 }
 
+function updateTrackedTip(tip, state) {
+  const ref = state.activeRef;
+  if (!ref) return;
+
+  const alwaysVisible = isAlwaysVisible(ref);
+  // Reveal before measuring: an always-visible tooltip may currently be
+  // hidden because its trigger was outside the positioning boundary.
+  if (alwaysVisible) tip.hidden = false;
+  if (tip.hidden || repositionTip(ref, tip)) {
+    syncEscapeDismissal(tip, state);
+    return;
+  }
+
+  if (alwaysVisible) tip.hidden = true;
+  else hideTip(tip, true);
+}
+
 function startTracking(tip, state) {
   if (state.stopTracking) return;
 
-  state.stopTracking = autoUpdate(tip, () => {
-    if (isAlwaysVisible(state.activeRef)) tip.hidden = false;
-    if (state.activeRef && !tip.hidden && !repositionTip(state.activeRef, tip)) {
-      hideTip(tip, true);
-    }
-  });
+  state.stopTracking = autoUpdate(tip, () => updateTrackedTip(tip, state));
 }
 
 function stopTracking(state) {
@@ -156,6 +171,22 @@ function stopTracking(state) {
   if (state) state.stopTracking = null;
 }
 
+function syncEscapeDismissal(tip, state) {
+  const ref = state.activeRef;
+  const dismissable = !tip.hidden && !isAlwaysVisible(ref);
+  // Position tracking calls this after every successful update. Preserve the
+  // current entry so a scroll/resize tick cannot reorder the LIFO stack.
+  if (dismissable && state.unregisterEscape && state.escapeRef === ref) return;
+
+  state.unregisterEscape?.();
+  state.unregisterEscape = null;
+  state.escapeRef = null;
+  if (!dismissable) return;
+
+  state.unregisterEscape = registerEscapeDismissal(tip, () => hideTip(tip, true));
+  state.escapeRef = ref;
+}
+
 function hideTip(tip, force = false) {
   const state = tipStates.get(tip);
   if (!force && isAlwaysVisible(state?.activeRef)) return;
@@ -168,6 +199,11 @@ function hideTip(tip, force = false) {
     state.hideTimer = null;
   }
   tip.hidden = true;
+  state?.unregisterEscape?.();
+  if (state) {
+    state.unregisterEscape = null;
+    state.escapeRef = null;
+  }
   stopTracking(state);
 }
 
@@ -203,6 +239,8 @@ function wireTip(tip, options = {}) {
     activeRef: null,
     controller,
     stopTracking: null,
+    unregisterEscape: null,
+    escapeRef: null,
     generated: options.generated === true,
     mount: options.mount || null,
     timer: null,
@@ -229,17 +267,6 @@ function wireTip(tip, options = {}) {
     { signal: controller.signal },
   );
 
-  tip.ownerDocument.addEventListener(
-    "keydown",
-    (event) => {
-      if (event.key !== "Escape" || event.ctrlKey || event.altKey || event.shiftKey) return;
-      if (tip.hidden) return;
-      event.preventDefault();
-      hideTip(tip);
-    },
-    { signal: controller.signal },
-  );
-
   tipStates.set(tip, state);
   return state;
 }
@@ -340,13 +367,14 @@ function show(tip, ref, immediate = false) {
   if (!state) return;
 
   state.activeRef = ref;
+  syncEscapeDismissal(tip, state);
   clearHide(tip);
   if (state.timer) clearTimeout(state.timer);
   const reveal = () => {
     state.timer = null;
     tip.hidden = false;
-    repositionTip(ref, tip);
     startTracking(tip, state);
+    updateTrackedTip(tip, state);
   };
 
   if (immediate) reveal();

package/src/js/validation.js

@@ -391,7 +391,7 @@ export class FormValidator {
   static setErrors(form, errors) {
     if (!isFormElement(form)) return;
     for (const [name, message] of Object.entries(errors)) {
-      const found = form.elements[name];
+      const found = form.elements.namedItem(name);
       if (!found) continue;
       if (found instanceof Element) {
         FormValidator.setFieldError(found, message);

package/src/tooling/css-bundle.js

@@ -0,0 +1,308 @@
+/*
+ * Shared CSS bundling helpers: inline @import chains, strip comments, minify.
+ * Used by build-dist.js (package artifacts), build-themes.js (demo asset),
+ * and the public CLI.
+ */
+import { existsSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { dirname, resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+
+const IMPORT_PREFIX_RE = /^\s*@import\b/;
+// Two or more characters before the colon: a Windows drive letter (D:/app.css)
+// is a local path, not a URL scheme.
+const EXTERNAL_SPECIFIER_RE = /^(?:[a-z][a-z0-9+.-]+:|\/\/|\/)/i;
+const CHARSET_RE = /^\s*@charset\s+["'][^"']*["']\s*;[^\n]*\n?/;
+const LAYER_TRAILER_RE = /^layer(?:\(\s*([A-Za-z_-][\w-]*(?:\.[A-Za-z_-][\w-]*)*)?\s*\))?$/;
+const RESOLVER_STUB = "__actual_css_resolve__.js";
+
+function skipWhitespace(source, index) {
+  let next = index;
+
+  while (next < source.length && /\s/.test(source[next])) {
+    next += 1;
+  }
+
+  return next;
+}
+
+function readQuoted(source, index) {
+  const quote = source[index];
+
+  if (quote !== '"' && quote !== "'") return null;
+
+  let value = "";
+
+  for (let cursor = index + 1; cursor < source.length; cursor += 1) {
+    const char = source[cursor];
+
+    if (char === "\\") {
+      const next = source[cursor + 1];
+      if (next === undefined) return null;
+      value += char;
+      value += next;
+      cursor += 1;
+      continue;
+    }
+
+    if (char === quote) {
+      return { value, index: cursor + 1 };
+    }
+
+    value += char;
+  }
+
+  return null;
+}
+
+function parseImportLine(line) {
+  let index = skipWhitespace(line, 0);
+
+  if (!line.startsWith("@import", index)) return null;
+
+  index += "@import".length;
+  index = skipWhitespace(line, index);
+
+  let parsed = null;
+
+  if (line.startsWith("url(", index)) {
+    index += 4;
+    index = skipWhitespace(line, index);
+
+    if (line[index] === '"' || line[index] === "'") {
+      parsed = readQuoted(line, index);
+      if (!parsed) return null;
+      index = parsed.index;
+    } else {
+      const end = line.indexOf(")", index);
+      if (end === -1) return null;
+      parsed = { value: line.slice(index, end).trim(), index: end };
+      index = end;
+    }
+
+    index = skipWhitespace(line, index);
+    if (line[index] !== ")") return null;
+    index += 1;
+  } else {
+    parsed = readQuoted(line, index);
+    if (!parsed) return null;
+    index = parsed.index;
+  }
+
+  const rest = line.slice(index);
+
+  // A comment opened on the import line and closed further down cannot be
+  // reasoned about line by line: treat the whole statement as unsupported.
+  if (hasUnterminatedComment(rest)) return null;
+
+  const trailer = stripComments(rest).replace(/;\s*$/, "").trim();
+
+  return {
+    specifier: parsed.value,
+    trailer,
+  };
+}
+
+function hasUnterminatedComment(text) {
+  const open = text.lastIndexOf("/*");
+  return open !== -1 && text.indexOf("*/", open + 2) === -1;
+}
+
+function isExternalImportSpecifier(specifier) {
+  return EXTERNAL_SPECIFIER_RE.test(specifier);
+}
+
+function resolveImportTarget(file, specifier) {
+  const dir = dirname(file);
+
+  if (specifier.startsWith("./") || specifier.startsWith("../")) {
+    return resolve(dir, specifier);
+  }
+
+  // Plain CSS reads "app.css" as a relative URL, so a neighbouring file wins
+  // over package resolution; everything else goes through the exports map.
+  const local = resolve(dir, specifier);
+  if (existsSync(local)) return local;
+
+  try {
+    const require = createRequire(pathToFileURL(resolve(dir, RESOLVER_STUB)));
+    return require.resolve(specifier);
+  } catch {
+    throw new Error(`Cannot resolve CSS @import "${specifier}" from ${file}`);
+  }
+}
+
+function preservedImportStatement(line) {
+  const statement = line.trim();
+  return statement.endsWith(";") ? statement : `${statement};`;
+}
+
+// `layer`, `layer()` and `layer(name)` are the only modifiers this bundler
+// understands: dropping the @import means re-stating the layer, which an
+// @layer block does exactly. Conditional modifiers stay out of scope.
+function parseLayerTrailer(trailer) {
+  const match = trailer.match(LAYER_TRAILER_RE);
+  return match ? { name: match[1] ?? "" } : null;
+}
+
+function wrapInLayer(css, name) {
+  const body = css
+    .split("\n")
+    .map((line) => (line.trim() === "" ? "" : `  ${line}`))
+    .join("\n")
+    .replace(/\n+$/, "");
+  const head = name ? `@layer ${name} {` : "@layer {";
+
+  return `${head}\n${body}\n}\n`;
+}
+
+async function inlineFile(path, stack, preserved, layered) {
+  if (stack.includes(path)) {
+    const chain = [...stack, path].map((item) => item.replace(/.*[/\\]/, ""));
+    throw new Error(`Circular CSS import: ${chain.join(" -> ")}`);
+  }
+
+  const css = await readFile(path, "utf8");
+  const nextStack = [...stack, path];
+  const chunks = [];
+
+  for (const line of css.split(/\r?\n/)) {
+    const parsed = parseImportLine(line);
+
+    if (!parsed) {
+      if (IMPORT_PREFIX_RE.test(line)) {
+        throw new Error(`Unsupported CSS @import syntax in ${path}: ${line.trim()}`);
+      }
+      chunks.push(line);
+      continue;
+    }
+
+    if (isExternalImportSpecifier(parsed.specifier)) {
+      // Hoisting is what keeps a surviving @import valid, but hoisting it out
+      // of a layer would silently move its rules to another layer.
+      if (layered) {
+        throw new Error(
+          `Remote CSS @import inside a layered import cannot be hoisted in ${path}: ${line.trim()}`,
+        );
+      }
+
+      const statement = preservedImportStatement(line);
+      if (!preserved.includes(statement)) preserved.push(statement);
+      continue;
+    }
+
+    const layer = parsed.trailer ? parseLayerTrailer(parsed.trailer) : null;
+
+    if (parsed.trailer && !layer) {
+      throw new Error(`Unsupported CSS @import modifiers in ${path}: ${line.trim()}`);
+    }
+
+    const target = resolveImportTarget(path, parsed.specifier);
+    const inlined = await inlineFile(target, nextStack, preserved, layered || layer !== null);
+    chunks.push(layer ? wrapInLayer(inlined, layer.name) : inlined);
+  }
+
+  return `${chunks.join("\n").trim()}\n`;
+}
+
+export async function inlineImports(file) {
+  const preserved = [];
+  const body = await inlineFile(resolve(file), [], preserved, false);
+
+  if (preserved.length === 0) return body;
+
+  // An @import that survives inlining must still precede every rule, so the
+  // preserved statements move to the top, after @charset if the entry has one.
+  const charset = body.match(CHARSET_RE);
+  const head = charset ? `${charset[0].trimEnd()}\n` : "";
+  const rest = (charset ? body.slice(charset[0].length) : body).replace(/^\n+/, "");
+
+  return `${head}${preserved.join("\n")}\n\n${rest}`;
+}
+
+export function stripComments(css) {
+  let out = "";
+  let quote = "";
+
+  for (let i = 0; i < css.length; i += 1) {
+    const char = css[i];
+    const next = css[i + 1];
+
+    if (quote) {
+      out += char;
+      if (char === "\\") {
+        out += next ?? "";
+        i += 1;
+      } else if (char === quote) {
+        quote = "";
+      }
+      continue;
+    }
+
+    if (char === '"' || char === "'") {
+      quote = char;
+      out += char;
+      continue;
+    }
+
+    if (char === "/" && next === "*") {
+      i += 2;
+      while (i < css.length && !(css[i] === "*" && css[i + 1] === "/")) i += 1;
+      i += 1;
+      continue;
+    }
+
+    out += char;
+  }
+
+  return out;
+}
+
+export function minifyCss(css) {
+  const source = stripComments(css).trim();
+  let out = "";
+  let quote = "";
+  let previousWasSpace = false;
+
+  for (let i = 0; i < source.length; i += 1) {
+    const char = source[i];
+    const next = source[i + 1];
+
+    if (quote) {
+      out += char;
+      if (char === "\\") {
+        out += next ?? "";
+        i += 1;
+      } else if (char === quote) {
+        quote = "";
+      }
+      previousWasSpace = false;
+      continue;
+    }
+
+    if (/\s/.test(char)) {
+      if (!previousWasSpace) out += " ";
+      previousWasSpace = true;
+      continue;
+    }
+
+    out += char;
+    previousWasSpace = false;
+  }
+
+  return `${out.trim()}\n`;
+}
+
+export function bundledCssIssues(css) {
+  const issues = [];
+
+  if (css.includes("@import")) issues.push("contains unresolved @import");
+  if (css.includes("--lightningcss")) issues.push("contains --lightningcss-* variables");
+  if (/color-mix\(in srgb/.test(css)) issues.push("contains color-mix(in srgb, ...)");
+  if (/@media[^{]*\(\s*width\s*[<>]=/.test(css)) {
+    issues.push("contains transpiled media query range syntax");
+  }
+
+  return issues;
+}

package/dist/actual-themes.min.css

@@ -1 +0,0 @@
-[data-theme="indigo"] { color-scheme: dark; --primary: hsl(220 90% 66%); --primary-fg: hsl(222 30% 8%); --secondary: hsl(270 65% 70%); --secondary-fg: hsl(270 30% 10%); --success: hsl(145 55% 54%); --success-fg: hsl(145 40% 8%); --warning: hsl(38 92% 62%); --warning-fg: hsl(35 35% 10%); --danger: hsl(0 75% 66%); --danger-fg: hsl(0 35% 10%); --neutral: hsl(220 10% 72%); --neutral-fg: hsl(222 24% 8%); --surface: hsl(222 24% 8%); --surface-raised: hsl(222 22% 11%); --surface-subtle: hsl(222 18% 15%); --surface-solid: hsl(0 0% 96%); --text: hsl(0 0% 96%); --text-muted: hsl(220 10% 68%); --text-subtle: hsl(220 8% 55%); --border: hsl(222 14% 24%); --focus: var(--primary); --focus-ring: hsl(220 90% 66% / 0.28); --hover-overlay: hsl(0 0% 100% / 0.06); } [data-theme="dim"] { color-scheme: dark; --primary: hsl(210 92% 70%); --primary-fg: hsl(218 28% 10%); --secondary: hsl(270 70% 74%); --secondary-fg: hsl(270 30% 10%); --success: hsl(150 56% 58%); --success-fg: hsl(150 38% 9%); --warning: hsl(40 92% 64%); --warning-fg: hsl(35 35% 10%); --danger: hsl(0 74% 68%); --danger-fg: hsl(0 35% 10%); --neutral: hsl(220 10% 72%); --neutral-fg: hsl(220 24% 10%); --surface: hsl(220 20% 13%); --surface-raised: hsl(220 18% 16%); --surface-subtle: hsl(220 16% 20%); --surface-solid: hsl(0 0% 96%); --text: hsl(220 18% 94%); --text-muted: hsl(220 10% 70%); --text-subtle: hsl(220 8% 58%); --border: hsl(220 12% 28%); --focus: var(--primary); --focus-ring: hsl(210 92% 70% / 0.28); --hover-overlay: hsl(0 0% 100% / 0.06); } [data-theme="corporate"] { color-scheme: light dark; --primary: hsl(214 82% 44%); --primary-fg: white; --secondary: hsl(250 45% 48%); --secondary-fg: white; --success: hsl(152 62% 32%); --success-fg: white; --warning: hsl(40 94% 48%); --warning-fg: hsl(35 30% 12%); --danger: hsl(355 70% 50%); --danger-fg: white; --neutral: hsl(220 12% 42%); --neutral-fg: white; --surface: hsl(0 0% 100%); --surface-raised: hsl(214 30% 98%); --surface-subtle: hsl(214 35% 95%); --surface-solid: hsl(220 24% 12%); --text: hsl(220 24% 12%); --text-muted: hsl(220 10% 42%); --text-subtle: hsl(220 8% 55%); --border: hsl(220 16% 86%); --focus: var(--primary); --focus-ring: hsl(214 82% 44% / 0.22); } @supports (color: light-dark(red, blue)) { [data-theme="corporate"] { --primary: light-dark(hsl(214 82% 44%), hsl(214 75% 80%)); --primary-fg: light-dark(white, hsl(214 30% 12%)); --secondary: light-dark(hsl(250 45% 48%), hsl(250 53% 80%)); --secondary-fg: light-dark(white, hsl(250 30% 12%)); --success: light-dark(hsl(152 62% 32%), hsl(152 70% 80%)); --success-fg: light-dark(white, hsl(152 30% 12%)); --warning: light-dark(hsl(40 94% 48%), hsl(40 75% 80%)); --warning-fg: light-dark(hsl(35 30% 12%), hsl(40 30% 12%)); --danger: light-dark(hsl(355 70% 50%), hsl(355 75% 80%)); --danger-fg: light-dark(white, hsl(355 30% 12%)); --neutral: light-dark(hsl(220 12% 42%), hsl(220 20% 80%)); --neutral-fg: light-dark(white, hsl(220 30% 12%)); --surface: light-dark(hsl(0 0% 100%), hsl(214 18% 8%)); --surface-raised: light-dark(hsl(214 30% 98%), hsl(214 16% 11%)); --surface-subtle: light-dark(hsl(214 35% 95%), hsl(214 14% 16%)); --surface-solid: light-dark(hsl(220 24% 12%), hsl(0 0% 96%)); --text: light-dark(hsl(220 24% 12%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(220 10% 42%), hsl(214 8% 68%)); --text-subtle: light-dark(hsl(220 8% 55%), hsl(214 7% 55%)); --border: light-dark(hsl(220 16% 86%), hsl(214 12% 24%)); --focus-ring: light-dark(hsl(214 82% 44% / 0.22), hsl(214 75% 80% / 0.28)); --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%)); } } [data-theme="forest"] { color-scheme: light dark; --primary: hsl(175 48% 26%); --primary-fg: white; --secondary: hsl(82 42% 34%); --secondary-fg: white; --success: hsl(148 58% 32%); --success-fg: white; --warning: hsl(42 88% 48%); --warning-fg: hsl(35 35% 12%); --danger: hsl(4 62% 48%); --danger-fg: white; --neutral: hsl(120 10% 34%); --neutral-fg: white; --surface: hsl(48 36% 96%); --surface-raised: hsl(45 36% 98%); --surface-subtle: hsl(112 26% 91%); --surface-solid: hsl(130 22% 15%); --text: hsl(130 20% 14%); --text-muted: hsl(125 10% 38%); --text-subtle: hsl(125 8% 50%); --border: hsl(105 18% 78%); --focus: var(--primary); --focus-ring: hsl(175 48% 26% / 0.22); --radius: 0.75rem; --radius-sm: 0.5rem; --radius-lg: 1.25rem; } @supports (color: light-dark(red, blue)) { [data-theme="forest"] { --primary: light-dark(hsl(175 48% 26%), hsl(175 45% 76%)); --primary-fg: light-dark(white, hsl(175 30% 12%)); --secondary: light-dark(hsl(82 42% 34%), hsl(82 50% 80%)); --secondary-fg: light-dark(white, hsl(82 30% 12%)); --success: light-dark(hsl(148 58% 32%), hsl(148 66% 80%)); --success-fg: light-dark(white, hsl(148 30% 12%)); --warning: light-dark(hsl(42 88% 48%), hsl(42 75% 80%)); --warning-fg: light-dark(hsl(35 35% 12%), hsl(42 30% 12%)); --danger: light-dark(hsl(4 62% 48%), hsl(4 70% 80%)); --danger-fg: light-dark(white, hsl(4 30% 12%)); --neutral: light-dark(hsl(120 10% 34%), hsl(120 18% 80%)); --neutral-fg: light-dark(white, hsl(120 30% 12%)); --surface: light-dark(hsl(48 36% 96%), hsl(130 18% 8%)); --surface-raised: light-dark(hsl(45 36% 98%), hsl(130 16% 11%)); --surface-subtle: light-dark(hsl(112 26% 91%), hsl(130 14% 16%)); --surface-solid: light-dark(hsl(130 22% 15%), hsl(0 0% 96%)); --text: light-dark(hsl(130 20% 14%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(125 10% 38%), hsl(130 8% 68%)); --text-subtle: light-dark(hsl(125 8% 50%), hsl(130 7% 55%)); --border: light-dark(hsl(105 18% 78%), hsl(130 12% 24%)); --focus-ring: light-dark(hsl(175 48% 26% / 0.22), hsl(175 45% 76% / 0.28)); --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%)); } } [data-theme="ocean"] { color-scheme: light dark; --primary: hsl(198 82% 35%); --primary-fg: white; --secondary: hsl(174 58% 30%); --secondary-fg: white; --success: hsl(160 62% 30%); --success-fg: white; --warning: hsl(36 90% 50%); --warning-fg: hsl(35 35% 12%); --danger: hsl(350 70% 52%); --danger-fg: white; --neutral: hsl(205 12% 38%); --neutral-fg: white; --surface: hsl(200 50% 98%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(198 42% 94%); --surface-solid: hsl(204 38% 16%); --text: hsl(205 34% 14%); --text-muted: hsl(205 12% 42%); --text-subtle: hsl(205 10% 56%); --border: hsl(198 30% 84%); --focus: var(--primary); --focus-ring: hsl(198 82% 35% / 0.22); } @supports (color: light-dark(red, blue)) { [data-theme="ocean"] { --primary: light-dark(hsl(198 82% 35%), hsl(198 75% 80%)); --primary-fg: light-dark(white, hsl(198 30% 12%)); --secondary: light-dark(hsl(174 58% 30%), hsl(174 66% 80%)); --secondary-fg: light-dark(white, hsl(174 30% 12%)); --success: light-dark(hsl(160 62% 30%), hsl(160 70% 80%)); --success-fg: light-dark(white, hsl(160 30% 12%)); --warning: light-dark(hsl(36 90% 50%), hsl(36 75% 80%)); --warning-fg: light-dark(hsl(35 35% 12%), hsl(36 30% 12%)); --danger: light-dark(hsl(350 70% 52%), hsl(350 75% 80%)); --danger-fg: light-dark(white, hsl(350 30% 12%)); --neutral: light-dark(hsl(205 12% 38%), hsl(205 20% 80%)); --neutral-fg: light-dark(white, hsl(205 30% 12%)); --surface: light-dark(hsl(200 50% 98%), hsl(200 18% 8%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(200 16% 11%)); --surface-subtle: light-dark(hsl(198 42% 94%), hsl(200 14% 16%)); --surface-solid: light-dark(hsl(204 38% 16%), hsl(0 0% 96%)); --text: light-dark(hsl(205 34% 14%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(205 12% 42%), hsl(200 8% 68%)); --text-subtle: light-dark(hsl(205 10% 56%), hsl(200 7% 55%)); --border: light-dark(hsl(198 30% 84%), hsl(200 12% 24%)); --focus-ring: light-dark(hsl(198 82% 35% / 0.22), hsl(198 75% 80% / 0.28)); --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%)); } } [data-theme="spruce"] { color-scheme: light dark; --primary: hsl(174 45% 24%); --primary-fg: hsl(160 30% 97%); --secondary: hsl(24 48% 42%); --secondary-fg: hsl(0 0% 98%); --success: hsl(135 38% 33%); --success-fg: hsl(0 0% 98%); --warning: hsl(42 72% 35%); --warning-fg: hsl(0 0% 98%); --danger: hsl(3 55% 44%); --danger-fg: hsl(0 0% 98%); --neutral: hsl(185 8% 40%); --neutral-fg: hsl(0 0% 98%); --surface: hsl(0 0% 100%); --surface-raised: hsl(160 20% 98%); --surface-subtle: hsl(168 18% 95%); --surface-solid: hsl(185 25% 11%); --text: hsl(185 25% 11%); --text-muted: hsl(183 9% 40%); --text-subtle: hsl(182 7% 55%); --border: hsl(170 12% 86%); --focus: var(--primary); --focus-ring: hsl(174 45% 24% / 0.22); } @supports (color: light-dark(red, blue)) { [data-theme="spruce"] { --primary: light-dark(hsl(174 45% 24%), hsl(170 35% 66%)); --primary-fg: light-dark(hsl(160 30% 97%), hsl(174 40% 9%)); --secondary: light-dark(hsl(24 48% 42%), hsl(26 50% 70%)); --secondary-fg: light-dark(hsl(0 0% 98%), hsl(26 35% 11%)); --success: light-dark(hsl(135 38% 33%), hsl(135 35% 60%)); --success-fg: light-dark(hsl(0 0% 98%), hsl(135 35% 8%)); --warning: light-dark(hsl(42 72% 35%), hsl(44 60% 62%)); --warning-fg: light-dark(hsl(0 0% 98%), hsl(42 35% 10%)); --danger: light-dark(hsl(3 55% 44%), hsl(3 58% 69%)); --danger-fg: light-dark(hsl(0 0% 98%), hsl(3 35% 10%)); --neutral: light-dark(hsl(185 8% 40%), hsl(183 10% 70%)); --neutral-fg: light-dark(hsl(0 0% 98%), hsl(185 18% 10%)); --surface: light-dark(hsl(0 0% 100%), hsl(182 20% 8%)); --surface-raised: light-dark(hsl(160 20% 98%), hsl(182 17% 11%)); --surface-subtle: light-dark(hsl(168 18% 95%), hsl(182 14% 15%)); --surface-solid: light-dark(hsl(185 25% 11%), hsl(0 0% 96%)); --text: light-dark(hsl(185 25% 11%), hsl(175 12% 94%)); --text-muted: light-dark(hsl(183 9% 40%), hsl(180 8% 66%)); --text-subtle: light-dark(hsl(182 7% 55%), hsl(180 7% 52%)); --border: light-dark(hsl(170 12% 86%), hsl(182 12% 23%)); --focus-ring: light-dark(hsl(174 45% 24% / 0.22), hsl(170 35% 66% / 0.28)); --hover-overlay: light-dark(hsl(185 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(185 30% 10%), hsl(0 0% 0%)); } } [data-theme="petrol"] { color-scheme: light dark; --primary: hsl(203 55% 30%); --primary-fg: hsl(0 0% 98%); --secondary: hsl(22 55% 47%); --secondary-fg: hsl(0 0% 98%); --success: hsl(155 45% 32%); --success-fg: hsl(0 0% 98%); --warning: hsl(38 70% 36%); --warning-fg: hsl(0 0% 98%); --danger: hsl(357 55% 45%); --danger-fg: hsl(0 0% 98%); --neutral: hsl(210 8% 43%); --neutral-fg: hsl(0 0% 98%); --surface: hsl(0 0% 100%); --surface-raised: hsl(204 30% 98%); --surface-subtle: hsl(204 25% 96%); --surface-solid: hsl(207 25% 12%); --text: hsl(207 25% 12%); --text-muted: hsl(206 9% 42%); --text-subtle: hsl(205 7% 57%); --border: hsl(205 15% 87%); --focus: var(--primary); --focus-ring: hsl(203 55% 30% / 0.22); } @supports (color: light-dark(red, blue)) { [data-theme="petrol"] { --primary: light-dark(hsl(203 55% 30%), hsl(202 55% 72%)); --primary-fg: light-dark(hsl(0 0% 98%), hsl(204 40% 10%)); --secondary: light-dark(hsl(22 55% 47%), hsl(24 55% 70%)); --secondary-fg: light-dark(hsl(0 0% 98%), hsl(24 35% 11%)); --success: light-dark(hsl(155 45% 32%), hsl(155 40% 60%)); --success-fg: light-dark(hsl(0 0% 98%), hsl(155 35% 8%)); --warning: light-dark(hsl(38 70% 36%), hsl(40 62% 63%)); --warning-fg: light-dark(hsl(0 0% 98%), hsl(38 35% 10%)); --danger: light-dark(hsl(357 55% 45%), hsl(357 58% 70%)); --danger-fg: light-dark(hsl(0 0% 98%), hsl(357 35% 10%)); --neutral: light-dark(hsl(210 8% 43%), hsl(208 10% 71%)); --neutral-fg: light-dark(hsl(0 0% 98%), hsl(208 18% 10%)); --surface: light-dark(hsl(0 0% 100%), hsl(206 22% 9%)); --surface-raised: light-dark(hsl(204 30% 98%), hsl(206 19% 12%)); --surface-subtle: light-dark(hsl(204 25% 96%), hsl(206 15% 16%)); --surface-solid: light-dark(hsl(207 25% 12%), hsl(0 0% 96%)); --text: light-dark(hsl(207 25% 12%), hsl(205 12% 95%)); --text-muted: light-dark(hsl(206 9% 42%), hsl(205 8% 67%)); --text-subtle: light-dark(hsl(205 7% 57%), hsl(205 7% 53%)); --border: light-dark(hsl(205 15% 87%), hsl(206 12% 24%)); --focus-ring: light-dark(hsl(203 55% 30% / 0.22), hsl(202 55% 72% / 0.28)); --hover-overlay: light-dark(hsl(207 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(207 30% 10%), hsl(0 0% 0%)); } } [data-theme="sunset"] { color-scheme: light dark; --primary: hsl(16 84% 43%); --primary-fg: white; --secondary: hsl(330 60% 52%); --secondary-fg: white; --success: hsl(142 52% 34%); --success-fg: white; --warning: hsl(42 94% 52%); --warning-fg: hsl(30 35% 12%); --danger: hsl(358 72% 52%); --danger-fg: white; --neutral: hsl(24 12% 38%); --neutral-fg: white; --surface: hsl(34 70% 97%); --surface-raised: hsl(30 80% 99%); --surface-subtle: hsl(28 62% 92%); --surface-solid: hsl(18 34% 18%); --text: hsl(20 34% 14%); --text-muted: hsl(20 12% 42%); --text-subtle: hsl(20 10% 55%); --border: hsl(25 38% 84%); --focus: var(--primary); --focus-ring: hsl(16 84% 43% / 0.22); --selection-bg: var(--secondary); --selection-fg: var(--secondary-fg); --shadow-color: hsl(20 60% 12%); } @supports (color: light-dark(red, blue)) { [data-theme="sunset"] { --primary: light-dark(hsl(16 84% 43%), hsl(16 75% 80%)); --primary-fg: light-dark(white, hsl(16 30% 12%)); --secondary: light-dark(hsl(330 60% 52%), hsl(330 68% 80%)); --secondary-fg: light-dark(white, hsl(330 30% 12%)); --success: light-dark(hsl(142 52% 34%), hsl(142 60% 80%)); --success-fg: light-dark(white, hsl(142 30% 12%)); --warning: light-dark(hsl(42 94% 52%), hsl(42 75% 80%)); --warning-fg: light-dark(hsl(30 35% 12%), hsl(42 30% 12%)); --danger: light-dark(hsl(358 72% 52%), hsl(358 75% 80%)); --danger-fg: light-dark(white, hsl(358 30% 12%)); --neutral: light-dark(hsl(24 12% 38%), hsl(24 20% 80%)); --neutral-fg: light-dark(white, hsl(24 30% 12%)); --surface: light-dark(hsl(34 70% 97%), hsl(20 18% 8%)); --surface-raised: light-dark(hsl(30 80% 99%), hsl(20 16% 11%)); --surface-subtle: light-dark(hsl(28 62% 92%), hsl(20 14% 16%)); --surface-solid: light-dark(hsl(18 34% 18%), hsl(0 0% 96%)); --text: light-dark(hsl(20 34% 14%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(20 12% 42%), hsl(20 8% 68%)); --text-subtle: light-dark(hsl(20 10% 55%), hsl(20 7% 55%)); --border: light-dark(hsl(25 38% 84%), hsl(20 12% 24%)); --focus-ring: light-dark(hsl(16 84% 43% / 0.22), hsl(16 75% 80% / 0.28)); --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(20 60% 12%), hsl(20 40% 2%)); } } [data-theme="lavender"] { color-scheme: light dark; --primary: hsl(258 70% 58%); --primary-fg: white; --secondary: hsl(305 45% 48%); --secondary-fg: white; --success: hsl(150 50% 33%); --success-fg: white; --warning: hsl(42 90% 52%); --warning-fg: hsl(35 35% 12%); --danger: hsl(350 68% 52%); --danger-fg: white; --neutral: hsl(260 10% 42%); --neutral-fg: white; --surface: hsl(260 45% 98%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(260 35% 94%); --surface-solid: hsl(260 30% 18%); --text: hsl(260 28% 15%); --text-muted: hsl(260 12% 43%); --text-subtle: hsl(260 10% 57%); --border: hsl(260 28% 85%); --focus: var(--primary); --focus-ring: hsl(258 70% 58% / 0.22); --soft-bg-mix: 92%; --soft-hover-alpha: 8%; --shadow-color: hsl(260 45% 20%); } @supports (color: light-dark(red, blue)) { [data-theme="lavender"] { --primary: light-dark(hsl(258 70% 58%), hsl(258 75% 80%)); --primary-fg: light-dark(white, hsl(258 30% 12%)); --secondary: light-dark(hsl(305 45% 48%), hsl(305 53% 80%)); --secondary-fg: light-dark(white, hsl(305 30% 12%)); --success: light-dark(hsl(150 50% 33%), hsl(150 58% 80%)); --success-fg: light-dark(white, hsl(150 30% 12%)); --warning: light-dark(hsl(42 90% 52%), hsl(42 75% 80%)); --warning-fg: light-dark(hsl(35 35% 12%), hsl(42 30% 12%)); --danger: light-dark(hsl(350 68% 52%), hsl(350 75% 80%)); --danger-fg: light-dark(white, hsl(350 30% 12%)); --neutral: light-dark(hsl(260 10% 42%), hsl(260 18% 80%)); --neutral-fg: light-dark(white, hsl(260 30% 12%)); --surface: light-dark(hsl(260 45% 98%), hsl(260 18% 8%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(260 16% 11%)); --surface-subtle: light-dark(hsl(260 35% 94%), hsl(260 14% 16%)); --surface-solid: light-dark(hsl(260 30% 18%), hsl(0 0% 96%)); --text: light-dark(hsl(260 28% 15%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(260 12% 43%), hsl(260 8% 68%)); --text-subtle: light-dark(hsl(260 10% 57%), hsl(260 7% 55%)); --border: light-dark(hsl(260 28% 85%), hsl(260 12% 24%)); --focus-ring: light-dark(hsl(258 70% 58% / 0.22), hsl(258 75% 80% / 0.28)); --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(260 45% 20%), hsl(260 40% 2%)); } } [data-theme="mono"] { color-scheme: light dark; --primary: hsl(220 8% 18%); --primary-fg: white; --secondary: hsl(220 7% 34%); --secondary-fg: white; --success: hsl(145 42% 32%); --success-fg: white; --warning: hsl(40 70% 44%); --warning-fg: hsl(35 35% 10%); --danger: hsl(0 56% 46%); --danger-fg: white; --neutral: hsl(220 6% 45%); --neutral-fg: white; --surface: hsl(0 0% 99%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(220 8% 94%); --surface-solid: hsl(220 8% 15%); --text: hsl(220 8% 12%); --text-muted: hsl(220 6% 42%); --text-subtle: hsl(220 5% 58%); --border: hsl(220 8% 84%); --focus: var(--primary); --focus-ring: hsl(220 8% 18% / 0.22); } @supports (color: light-dark(red, blue)) { [data-theme="mono"] { --primary: light-dark(hsl(220 8% 18%), hsl(220 16% 80%)); --primary-fg: light-dark(white, hsl(220 30% 12%)); --secondary: light-dark(hsl(220 7% 34%), hsl(220 15% 80%)); --secondary-fg: light-dark(white, hsl(220 30% 12%)); --success: light-dark(hsl(145 42% 32%), hsl(145 50% 80%)); --success-fg: light-dark(white, hsl(145 30% 12%)); --warning: light-dark(hsl(40 70% 44%), hsl(40 75% 80%)); --warning-fg: light-dark(hsl(35 35% 10%), hsl(40 30% 12%)); --danger: light-dark(hsl(0 56% 46%), hsl(0 64% 80%)); --danger-fg: light-dark(white, hsl(0 30% 12%)); --neutral: light-dark(hsl(220 6% 45%), hsl(220 14% 80%)); --neutral-fg: light-dark(white, hsl(220 30% 12%)); --surface: light-dark(hsl(0 0% 99%), hsl(0 0% 8%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(0 0% 11%)); --surface-subtle: light-dark(hsl(220 8% 94%), hsl(0 0% 16%)); --surface-solid: light-dark(hsl(220 8% 15%), hsl(0 0% 96%)); --text: light-dark(hsl(220 8% 12%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(220 6% 42%), hsl(0 0% 68%)); --text-subtle: light-dark(hsl(220 5% 58%), hsl(0 0% 55%)); --border: light-dark(hsl(220 8% 84%), hsl(0 0% 24%)); --focus-ring: light-dark(hsl(220 8% 18% / 0.22), hsl(220 16% 80% / 0.28)); --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%)); } } [data-theme="square"] { color-scheme: light dark; --primary: hsl(220 90% 56%); --primary-fg: white; --secondary: hsl(270 60% 56%); --secondary-fg: white; --success: hsl(145 60% 32%); --success-fg: white; --warning: hsl(38 92% 50%); --warning-fg: hsl(35 30% 12%); --danger: hsl(0 75% 51%); --danger-fg: white; --neutral: hsl(220 10% 42%); --neutral-fg: white; --surface: hsl(0 0% 100%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(220 20% 96%); --surface-solid: hsl(222 22% 12%); --text: hsl(222 22% 12%); --text-muted: hsl(220 10% 42%); --text-subtle: hsl(220 8% 55%); --border: hsl(220 15% 88%); --focus: var(--primary); --focus-ring: hsl(220 90% 56% / 0.22); --hover-overlay: hsl(220 30% 10% / 0.04); --radius: 0; --radius-sm: 0; --radius-lg: 0; } @supports (color: light-dark(red, blue)) { [data-theme="square"] { --primary: light-dark(hsl(220 90% 56%), hsl(220 75% 80%)); --primary-fg: light-dark(white, hsl(220 30% 12%)); --secondary: light-dark(hsl(270 60% 56%), hsl(270 68% 80%)); --secondary-fg: light-dark(white, hsl(270 30% 12%)); --success: light-dark(hsl(145 60% 32%), hsl(145 68% 80%)); --success-fg: light-dark(white, hsl(145 30% 12%)); --warning: light-dark(hsl(38 92% 50%), hsl(38 75% 80%)); --warning-fg: light-dark(hsl(35 30% 12%), hsl(38 30% 12%)); --danger: light-dark(hsl(0 75% 51%), hsl(0 75% 80%)); --danger-fg: light-dark(white, hsl(0 30% 12%)); --neutral: light-dark(hsl(220 10% 42%), hsl(220 18% 80%)); --neutral-fg: light-dark(white, hsl(220 30% 12%)); --surface: light-dark(hsl(0 0% 100%), hsl(222 18% 8%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(222 16% 11%)); --surface-subtle: light-dark(hsl(220 20% 96%), hsl(222 14% 16%)); --surface-solid: light-dark(hsl(222 22% 12%), hsl(0 0% 96%)); --text: light-dark(hsl(222 22% 12%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(220 10% 42%), hsl(222 8% 68%)); --text-subtle: light-dark(hsl(220 8% 55%), hsl(222 7% 55%)); --border: light-dark(hsl(220 15% 88%), hsl(222 12% 24%)); --focus-ring: light-dark(hsl(220 90% 56% / 0.22), hsl(220 75% 80% / 0.28)); --hover-overlay: light-dark(hsl(220 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(220 30% 10%), hsl(0 0% 0%)); } } [data-theme="edge"] { color-scheme: light dark; --primary: hsl(224 72% 42%); --primary-fg: white; --secondary: hsl(166 54% 30%); --secondary-fg: white; --success: hsl(145 46% 32%); --success-fg: white; --warning: hsl(36 80% 38%); --warning-fg: hsl(34 35% 10%); --danger: hsl(354 62% 46%); --danger-fg: white; --neutral: hsl(228 9% 42%); --neutral-fg: white; --surface: hsl(40 20% 99%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(220 24% 95%); --surface-solid: hsl(228 26% 12%); --text: hsl(228 24% 12%); --text-muted: hsl(228 9% 42%); --text-subtle: hsl(228 7% 56%); --border: hsl(220 14% 86%); --focus: var(--primary); --focus-ring: hsl(224 72% 42% / 0.22); --hover-overlay: hsl(228 30% 10% / 0.04); --radius: 0.375rem; --radius-sm: 0.25rem; --radius-lg: 0.625rem; --btn-default-bg: var(--surface-subtle); --btn-default-border: transparent; --btn-border-color: transparent; --btn-border-block-end-width: 2px; --control-border-block-end-color: var(--primary); --control-border-block-end-width: 2px; } [data-theme="edge"] .btn:not(.link) { --btn-border-block-end-color: var(--intent, var(--primary)); } [data-theme="edge"] .btn:not(:where(.solid, .soft, .outline, .ghost, .link)) { --btn-default-fg: var(--intent, var(--text)); --ui-hover-bg: var(--surface-raised); } [data-theme="edge"] .btn:not( :where(:disabled, [aria-disabled="true"], .solid, .soft, .outline, .ghost, .link) ):hover { box-shadow: none; } [data-theme="edge"] .alert { --alert-border-inline-start-color: var(--intent, var(--primary)); --alert-border-inline-start-width: 4px; } [data-theme="edge"] :is(.input, .textarea, .select):focus-visible { --control-border: var(--border); --control-border-block-end-width: 3px; } @supports (color: light-dark(red, blue)) { [data-theme="edge"] { --primary: light-dark(hsl(224 72% 42%), hsl(220 80% 76%)); --primary-fg: light-dark(white, hsl(224 35% 10%)); --secondary: light-dark(hsl(166 54% 30%), hsl(166 58% 70%)); --secondary-fg: light-dark(white, hsl(166 35% 9%)); --success: light-dark(hsl(145 46% 32%), hsl(145 48% 64%)); --success-fg: light-dark(white, hsl(145 35% 8%)); --warning: light-dark(hsl(36 80% 38%), hsl(40 72% 66%)); --warning-fg: light-dark(hsl(34 35% 10%), hsl(38 35% 10%)); --danger: light-dark(hsl(354 62% 46%), hsl(354 66% 72%)); --danger-fg: light-dark(white, hsl(354 35% 10%)); --neutral: light-dark(hsl(228 9% 42%), hsl(228 12% 72%)); --neutral-fg: light-dark(white, hsl(228 24% 10%)); --surface: light-dark(hsl(40 20% 99%), hsl(228 20% 8%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(228 17% 11%)); --surface-subtle: light-dark(hsl(220 24% 95%), hsl(228 14% 16%)); --surface-solid: light-dark(hsl(228 26% 12%), hsl(0 0% 96%)); --text: light-dark(hsl(228 24% 12%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(228 9% 42%), hsl(228 8% 68%)); --text-subtle: light-dark(hsl(228 7% 56%), hsl(228 7% 55%)); --border: light-dark(hsl(220 14% 86%), hsl(228 12% 24%)); --focus-ring: light-dark(hsl(224 72% 42% / 0.22), hsl(220 80% 76% / 0.28)); --hover-overlay: light-dark(hsl(228 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(228 30% 10%), hsl(0 0% 0%)); } } [data-theme="cyberpunk"] { color-scheme: light; --primary: hsl(330 100% 60%); --primary-fg: hsl(330 100% 10%); --secondary: hsl(187 100% 42%); --secondary-fg: hsl(187 100% 8%); --success: hsl(150 100% 35%); --success-fg: hsl(150 100% 6%); --warning: hsl(25 95% 50%); --warning-fg: hsl(25 100% 8%); --danger: hsl(0 85% 44%); --danger-fg: hsl(0 0% 98%); --neutral: hsl(56 30% 8%); --neutral-fg: hsl(56 100% 55%); --surface: hsl(56 100% 50%); --surface-raised: hsl(54 100% 64%); --surface-subtle: hsl(53 100% 80%); --surface-solid: hsl(56 30% 8%); --text: hsl(56 60% 6%); --text-muted: hsl(56 25% 22%); --text-subtle: hsl(56 14% 34%); --border: hsl(56 60% 6%); --focus: hsl(330 100% 42%); --focus-ring: hsl(330 100% 42% / 0.3); --hover-overlay: hsl(56 100% 8% / 0.08); --radius: 0; --radius-sm: 0; --radius-lg: 0; --border-width: 2px; --shadow: 0.25rem 0.25rem 0 hsl(56 60% 6%); --shadow-popout: 0.25rem 0.25rem 0 hsl(56 60% 6%); --shadow-color: hsl(56 60% 6%); --soft-bg-mix: 78%; --soft-border-mix: 40%; --selection-bg: hsl(56 60% 6%); --selection-fg: hsl(56 100% 50%); } [data-theme="neon"] { color-scheme: dark; --primary: hsl(315 95% 62%); --primary-fg: hsl(315 100% 8%); --secondary: hsl(182 100% 46%); --secondary-fg: hsl(182 100% 7%); --success: hsl(135 85% 52%); --success-fg: hsl(135 100% 6%); --warning: hsl(55 95% 55%); --warning-fg: hsl(55 100% 7%); --danger: hsl(350 100% 64%); --danger-fg: hsl(350 100% 8%); --neutral: hsl(260 12% 76%); --neutral-fg: hsl(260 25% 8%); --surface: hsl(260 25% 6%); --surface-raised: hsl(260 22% 9%); --surface-subtle: hsl(260 20% 13%); --surface-solid: hsl(0 0% 96%); --text: hsl(0 0% 97%); --text-muted: hsl(260 12% 70%); --text-subtle: hsl(260 8% 55%); --border: hsl(260 18% 24%); --focus: var(--secondary); --focus-ring: hsl(182 100% 46% / 0.35); --hover-overlay: hsl(0 0% 100% / 0.07); --shadow-color: hsl(260 60% 3%); --soft-bg-mix: 80%; --soft-border-mix: 45%; --soft-hover-alpha: 20%; --shadow-popout: 0 0 1rem hsl(315 95% 62% / 0.25); } @media (color-gamut: p3) { @supports (color: oklch(0% 0 0)) { [data-theme="neon"] { --primary: oklch(70% 0.32 340); --secondary: oklch(85% 0.17 195); --success: oklch(85% 0.28 148); --warning: oklch(92% 0.2 105); --danger: oklch(68% 0.26 15); --focus-ring: oklch(85% 0.17 195 / 0.35); --shadow-popout: 0 0 1rem oklch(70% 0.32 340 / 0.3); } } } [data-theme="gradient"] { color-scheme: light dark; --primary: hsl(211 100% 50%); --primary-fg: white; --secondary: hsl(208 7% 46%); --secondary-fg: white; --success: hsl(134 61% 41%); --success-fg: white; --warning: hsl(45 100% 51%); --warning-fg: hsl(45 100% 10%); --danger: hsl(354 70% 54%); --danger-fg: white; --neutral: hsl(210 10% 23%); --neutral-fg: white; --surface: hsl(0 0% 100%); --surface-raised: hsl(0 0% 100%); --surface-subtle: hsl(210 17% 95%); --surface-solid: hsl(210 10% 15%); --text: hsl(210 11% 15%); --text-muted: hsl(208 7% 46%); --text-subtle: hsl(210 9% 62%); --border: hsl(210 14% 89%); --focus: var(--primary); --focus-ring: hsl(211 100% 50% / 0.25); --hover-overlay: hsl(210 30% 10% / 0.04); --radius: 0.25rem; --radius-sm: 0.2rem; --radius-lg: 0.3rem; } @supports (color: light-dark(red, blue)) { [data-theme="gradient"] { --primary: light-dark(hsl(211 100% 50%), hsl(211 90% 72%)); --primary-fg: light-dark(white, hsl(211 40% 10%)); --secondary: light-dark(hsl(208 7% 46%), hsl(208 10% 72%)); --secondary-fg: light-dark(white, hsl(208 15% 10%)); --success: light-dark(hsl(134 61% 41%), hsl(134 55% 65%)); --success-fg: light-dark(white, hsl(134 40% 8%)); --warning: light-dark(hsl(45 100% 51%), hsl(45 90% 70%)); --warning-fg: light-dark(hsl(45 100% 10%), hsl(45 100% 10%)); --danger: light-dark(hsl(354 70% 54%), hsl(354 75% 74%)); --danger-fg: light-dark(white, hsl(354 40% 10%)); --neutral: light-dark(hsl(210 10% 23%), hsl(210 12% 75%)); --neutral-fg: light-dark(white, hsl(210 15% 10%)); --surface: light-dark(hsl(0 0% 100%), hsl(210 15% 8%)); --surface-raised: light-dark(hsl(0 0% 100%), hsl(210 13% 11%)); --surface-subtle: light-dark(hsl(210 17% 95%), hsl(210 12% 16%)); --surface-solid: light-dark(hsl(210 10% 15%), hsl(0 0% 96%)); --text: light-dark(hsl(210 11% 15%), hsl(0 0% 96%)); --text-muted: light-dark(hsl(208 7% 46%), hsl(210 8% 68%)); --text-subtle: light-dark(hsl(210 9% 62%), hsl(210 7% 55%)); --border: light-dark(hsl(210 14% 89%), hsl(210 12% 24%)); --focus-ring: light-dark(hsl(211 100% 50% / 0.25), hsl(211 90% 72% / 0.3)); --hover-overlay: light-dark(hsl(210 30% 10% / 0.04), hsl(0 0% 100% / 0.06)); --shadow-color: light-dark(hsl(210 30% 10%), hsl(0 0% 0%)); } } @supports (color: color-mix(in oklch, red, white)) { [data-theme="gradient"] .btn:not(:where(.soft, .outline, .ghost, .link)) { --gradient-hover-color: color-mix(in oklch, var(--intent, var(--neutral)) 88%, black); --ui-bg: linear-gradient( 180deg, color-mix(in oklch, white 15%, var(--intent, var(--neutral))), var(--intent, var(--neutral)) ); --btn-default-bg: var(--ui-bg); --ui-hover-bg: linear-gradient( 180deg, color-mix(in oklch, white 15%, var(--gradient-hover-color)), var(--gradient-hover-color) ); } }