@stainless-api/ui-primitives 0.1.0-beta.5 → 0.1.0-beta.51

package/dist/components/dropdown/DropdownMenu.js

@@ -0,0 +1,76 @@
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ExternalLink } from "lucide-react";
+//#region src/components/dropdown/DropdownMenu.tsx
+function Menu({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		role: "menu",
+		"data-state": "closed",
+		"data-part": "menu",
+		className: clsx("stl-ui-dropdown-menu", className)
+	});
+}
+function MenuItemText({ className, subtle, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"data-part": "item-text",
+		className: clsx(`stl-ui-dropdown-menu__item-text`, { "stl-ui-dropdown-menu__item-text--subtle": subtle }, className)
+	});
+}
+function MenuItem({ children, value, href, isExternalLink, isSelected, ...props }) {
+	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: "stl-ui-dropdown-menu__item-content",
+			children
+		}),
+		isSelected && /* @__PURE__ */ jsx("div", {
+			className: "stl-ui-dropdown-menu__item-icon",
+			"data-part": "item-selected-icon",
+			children: /* @__PURE__ */ jsx(CheckIcon, { size: 16 })
+		}),
+		isExternalLink && /* @__PURE__ */ jsx("div", {
+			className: "stl-ui-dropdown-menu__item-subtle-icon",
+			"data-part": "item-external-link-icon",
+			children: /* @__PURE__ */ jsx(ExternalLink, { size: 16 })
+		})
+	] });
+	if (href) return /* @__PURE__ */ jsx("a", {
+		role: "menuitem",
+		"data-part": "item",
+		"data-value": value,
+		"aria-selected": isSelected,
+		href,
+		...props,
+		className: clsx("stl-ui-dropdown-menu__item", "stl-ui-dropdown-menu__item-link", props.className),
+		children: inner
+	});
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		role: "menuitem",
+		"data-part": "item",
+		"data-value": value,
+		"aria-selected": isSelected,
+		className: clsx("stl-ui-dropdown-menu__item", props.className),
+		children: inner
+	});
+}
+/**
+* A template component that defines the content to be displayed in the dropdown trigger
+* when a menu item is selected. This template is used to customize the appearance of
+* the selected item in the trigger button.
+*
+* @param props - Standard HTML template element props
+* @returns A template element marked with the "selected-template" data part
+*/
+function MenuItemTemplate({ ...props }) {
+	return /* @__PURE__ */ jsx("template", {
+		"data-part": "selected-template",
+		...props
+	});
+}
+Menu.Item = MenuItem;
+Menu.ItemText = MenuItemText;
+Menu.ItemTemplate = MenuItemTemplate;
+//#endregion
+export { Menu };

package/dist/components/icons/Function.d.ts

@@ -0,0 +1,9 @@
+import * as react from "react";
+import * as lucide_react0 from "lucide-react";
+import { IconNode } from "lucide-react";
+
+//#region src/components/icons/Function.d.ts
+declare const __iconNode: IconNode;
+declare const FunctionIcon: react.ForwardRefExoticComponent<Omit<lucide_react0.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+//#endregion
+export { FunctionIcon, __iconNode };

package/dist/components/icons/Function.js

@@ -0,0 +1,6 @@
+import { createLucideIcon } from "lucide-react";
+//#region src/components/icons/Function.tsx
+const __iconNode = [["path", { d: "m 7.5982756,10.85526 h 8.3632754 m -8.3632756,8.509999 c 2.9344826,0 4.1082756,-1.467241 4.1082756,-4.108276 V 9.0945701 c 0,-2.9344826 1.467243,-4.8418966 4.695174,-4.4017241" }]];
+const FunctionIcon = createLucideIcon("function", __iconNode);
+//#endregion
+export { FunctionIcon, __iconNode };

package/dist/components/icons/index.d.ts

@@ -0,0 +1,2 @@
+import { FunctionIcon } from "./Function.js";
+export { FunctionIcon };

package/dist/components/icons/index.js

@@ -0,0 +1,2 @@
+import { FunctionIcon } from "./Function.js";
+export { FunctionIcon };

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { Accordion, AccordionProps } from "./components/Accordion.js";
+import { Badge, BadgeIntent, HTTPMethod, getHttpMethod } from "./components/Badge.js";
+import { Button, ButtonProps, ButtonVariant } from "./components/Button.js";
+import { Callout, CalloutProps, CalloutVariant } from "./components/Callout.js";
+import { Step, Steps } from "./components/Steps.js";
+import { Dropdown } from "./components/dropdown/Dropdown.js";
+import { DropdownButton } from "./components/dropdown/DropdownButton.js";
+export { Accordion, AccordionProps, Badge, BadgeIntent, Button, ButtonProps, ButtonVariant, Callout, CalloutProps, CalloutVariant, Dropdown, DropdownButton, HTTPMethod, Step, Steps, getHttpMethod };

package/dist/index.js

@@ -0,0 +1,8 @@
+import { Button } from "./components/Button.js";
+import { Dropdown } from "./components/dropdown/Dropdown.js";
+import { DropdownButton } from "./components/dropdown/DropdownButton.js";
+import { Callout } from "./components/Callout.js";
+import { Accordion } from "./components/Accordion.js";
+import { Step, Steps } from "./components/Steps.js";
+import { Badge, getHttpMethod } from "./components/Badge.js";
+export { Accordion, Badge, Button, Callout, Dropdown, DropdownButton, Step, Steps, getHttpMethod };

package/dist/scripts/index.d.ts

@@ -0,0 +1,23 @@
+//#region src/scripts/dropdown-button.d.ts
+declare function initDropdownButton({
+  dropdown,
+  onSelect,
+  onPrimaryAction
+}: {
+  dropdown: Element;
+  onSelect: (value: string) => void;
+  onPrimaryAction: (primaryActionElement: Element) => void;
+}): void;
+//#endregion
+//#region src/scripts/dropdown.d.ts
+declare function initDropdown({
+  root,
+  onSelect,
+  initialValue
+}: {
+  root?: Element | null;
+  onSelect?: (value: string) => void;
+  initialValue?: string;
+}): void;
+//#endregion
+export { initDropdown, initDropdownButton };

package/dist/scripts/index.js

@@ -0,0 +1,162 @@
+//#region src/scripts/dropdown.ts
+const initialized = /* @__PURE__ */ new WeakSet();
+function initDropdown({ root, onSelect, initialValue }) {
+	if (!root) {
+		console.error("Dropdown root element not found");
+		return;
+	}
+	if (initialized.has(root)) return;
+	const trigger = root.querySelector("[data-part=\"trigger\"]");
+	const menu = root.querySelector("[data-part=\"menu\"]");
+	if (!trigger) {
+		console.error("Dropdown trigger not found");
+		return;
+	}
+	if (!menu) {
+		console.error("Dropdown menu not found");
+		return;
+	}
+	const selectedSlot = trigger.querySelector("[data-part=\"trigger-selected\"]");
+	const items = Array.from(menu.querySelectorAll("[data-part=\"item\"]"));
+	function open() {
+		if (!trigger || !menu || !root) return;
+		trigger.setAttribute("aria-expanded", "true");
+		menu.dataset.state = "open";
+		menu.removeAttribute("aria-hidden");
+		const triggerRect = trigger.getBoundingClientRect();
+		const menuHeight = menu.offsetHeight;
+		const spaceBelow = window.innerHeight - triggerRect.bottom;
+		const spaceAbove = triggerRect.top;
+		menu.classList.remove("stl-ui-dropdown-menu--above", "stl-ui-dropdown-menu--below");
+		if (spaceBelow < menuHeight && spaceAbove > spaceBelow) menu.classList.add("stl-ui-dropdown-menu--above");
+		else menu.classList.add("stl-ui-dropdown-menu--below");
+	}
+	function close() {
+		if (!trigger || !menu || !root) return;
+		trigger.setAttribute("aria-expanded", "false");
+		menu.dataset.state = "closed";
+		menu.setAttribute("aria-hidden", "true");
+	}
+	function renderSelectedFromItem(item) {
+		if (!selectedSlot) return;
+		const tmpl = item.querySelector("template[data-part=\"selected-template\"]");
+		if (!tmpl) {
+			console.error("Dropdown item template not found");
+			return;
+		}
+		selectedSlot.innerHTML = "";
+		selectedSlot.appendChild(tmpl.content.cloneNode(true));
+		selectedSlot.removeAttribute("data-placeholder");
+	}
+	function selectItem(item) {
+		if (!trigger) {
+			console.error("Dropdown trigger not found");
+			return;
+		}
+		items.forEach((i) => i.setAttribute("aria-selected", String(i === item)));
+		trigger.dataset.value = item.getAttribute("data-value") || "";
+		renderSelectedFromItem(item);
+	}
+	function handleItemSelection(e) {
+		const item = e.target.closest("[data-part=\"item\"]");
+		if (!item) {
+			console.error("Dropdown item not found");
+			return;
+		}
+		if (!trigger) {
+			console.error("Dropdown trigger not found");
+			return;
+		}
+		selectItem(item);
+		onSelect?.(item.getAttribute("data-value") || "");
+		close();
+		trigger.focus();
+	}
+	function handleTriggerClick() {
+		if (!trigger) return false;
+		if (trigger.getAttribute("aria-expanded") === "true") {
+			close();
+			return false;
+		} else {
+			open();
+			return true;
+		}
+	}
+	const initial = (initialValue ? items.find((i) => i.getAttribute("data-value") === initialValue) : items.find((i) => i.getAttribute("aria-selected") === "true")) ?? items[0];
+	if (initial) selectItem(initial);
+	trigger.addEventListener("click", () => {
+		handleTriggerClick();
+	});
+	trigger.addEventListener("keydown", (e) => {
+		if (e.key !== "Enter" && e.key !== " ") return;
+		e.preventDefault();
+		if (handleTriggerClick()) items[0]?.focus();
+	});
+	menu.addEventListener("click", (e) => {
+		handleItemSelection(e);
+	});
+	document.addEventListener("keydown", (e) => {
+		if (!(trigger.getAttribute("aria-expanded") === "true")) return;
+		if (e.key === "Escape") {
+			close();
+			trigger.focus();
+			return;
+		}
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			const activeElement = document.activeElement;
+			if (activeElement === trigger) {
+				items[0]?.focus();
+				return;
+			}
+			let nextSibling = activeElement?.nextElementSibling;
+			while (nextSibling && nextSibling.tagName.toLowerCase() === "hr") nextSibling = nextSibling.nextElementSibling;
+			if (nextSibling instanceof HTMLElement && items.includes(nextSibling)) nextSibling.focus();
+			return;
+		}
+		if (e.key === "ArrowUp") {
+			e.preventDefault();
+			const activeElement = document.activeElement;
+			if (activeElement === trigger) {
+				items[items.length - 1]?.focus();
+				return;
+			}
+			let prevSibling = activeElement?.previousElementSibling;
+			while (prevSibling && prevSibling.tagName.toLowerCase() === "hr") prevSibling = prevSibling.previousElementSibling;
+			if (prevSibling instanceof HTMLElement && items.includes(prevSibling)) prevSibling.focus();
+			return;
+		}
+	});
+	document.addEventListener("click", (e) => {
+		if (!root.contains(e.target)) close();
+	});
+	initialized.add(root);
+}
+//#endregion
+//#region src/scripts/dropdown-button.ts
+function initDropdownButton({ dropdown, onSelect, onPrimaryAction }) {
+	const trigger = dropdown.querySelector("[data-part=\"trigger\"]");
+	const menu = dropdown.querySelector("[data-part=\"menu\"]");
+	const primaryAction = dropdown.querySelector("[data-part=\"primary-action\"]");
+	if (!trigger) {
+		console.error("Dropdown trigger not found");
+		return;
+	}
+	if (!menu) {
+		console.error("Dropdown menu not found");
+		return;
+	}
+	if (!primaryAction) {
+		console.error("Dropdown primary action not found");
+		return;
+	}
+	primaryAction.addEventListener("click", () => {
+		onPrimaryAction(primaryAction);
+	});
+	initDropdown({
+		root: dropdown,
+		onSelect
+	});
+}
+//#endregion
+export { initDropdown, initDropdownButton };

package/dist/styles/starlight-compat.css

@@ -0,0 +1,131 @@
+:root {
+  --sl-font: var(--stl-typography-font);
+  --sl-font-mono: var(--stl-typography-font-mono);
+  --sl-line-height: var(--stl-typography-line-height);
+  --sl-text-h1: var(--stl-typography-text-h1);
+  --sl-text-h2: var(--stl-typography-text-h2);
+  --sl-text-h3: var(--stl-typography-text-h3);
+  --sl-text-h4: var(--stl-typography-text-h4);
+  --sl-text-h5: var(--stl-typography-text-h5);
+  --sl-text-body: var(--stl-typography-scale-base);
+  --sl-text-sm: var(--stl-typography-scale-sm);
+  --sl-text-body-sm: var(--stl-typography-scale-sm);
+  --sl-text-code: var(--stl-typography-scale-sm);
+  --sl-text-code-sm: var(--stl-typography-scale-xs);
+  --sl-color-bg: var(--stl-color-background);
+  --sl-color-bg-sidebar: var(--stl-color-background);
+  --sl-color-bg-ui: var(--stl-color-ui-background);
+  --sl-color-bg-nav: var(--stl-color-background);
+  --sl-color-bg-inline-code: var(--stl-color-muted-background);
+  --sl-color-bg-accent: var(--stl-color-accent-inverse-background);
+  --sl-color-text: var(--stl-color-foreground);
+  --sl-color-text-secondary: var(--stl-color-foreground-reduced);
+  --sl-color-text-tertiary: var(--stl-color-foreground-muted);
+  --sl-color-text-accent: var(--stl-color-accent-foreground);
+  --sl-color-hairline: var(--stl-color-border);
+  --sl-color-hairline-light: var(--stl-color-border-faint);
+  --sl-color-hairline-shade: var(--stl-color-border-strong);
+  --sl-color-text-invert: var(--stl-color-inverse-foreground);
+  --sl-color-accent-low: var(--stl-color-accent-muted-background);
+  --sl-color-accent: var(--stl-color-accent);
+  --sl-color-accent-high: var(--stl-color-accent);
+  --sl-color-red-low: var(--stl-color-red-muted-background);
+  --sl-color-red: var(--stl-color-red);
+  --sl-color-red-high: var(--stl-color-red);
+  --sl-color-green-low: var(--stl-color-green-muted-background);
+  --sl-color-green: var(--stl-color-green);
+  --sl-color-green-high: var(--stl-color-green);
+  --sl-color-blue-low: var(--stl-color-blue-muted-background);
+  --sl-color-blue: var(--stl-color-blue);
+  --sl-color-blue-high: var(--stl-color-blue);
+  --sl-color-orange-low: var(--stl-color-orange-muted-background);
+  --sl-color-orange: var(--stl-color-orange);
+  --sl-color-orange-high: var(--stl-color-orange);
+  --sl-color-purple-low: var(--stl-color-purple-muted-background);
+  --sl-color-purple: var(--stl-color-purple);
+  --sl-color-purple-high: var(--stl-color-purple);
+  --sl-color-teal-low: var(--stl-color-cyan-muted-background);
+  --sl-color-teal: var(--stl-color-cyan);
+  --sl-color-teal-high: var(--stl-color-cyan);
+  --sl-color-magenta-low: var(--stl-color-pink-muted-background);
+  --sl-color-magenta: var(--stl-color-pink);
+  --sl-color-magenta-high: var(--stl-color-pink);
+  --sl-color-yellow-low: var(--stl-color-yellow-muted-background);
+  --sl-color-yellow: var(--stl-color-yellow);
+  --sl-color-yellow-high: var(--stl-color-yellow);
+}
+
+.stl-ui-prose {
+  & .sl-heading-wrapper {
+    line-height: var(--stl-typography-line-height-heading);
+    font-family: var(--stl-typography-font-heading);
+    --sl-anchor-icon-size: .8em;
+
+    & :is(h1, h2, h3, h4, h5) {
+      font-size: inherit;
+    }
+  }
+
+  & .sl-heading-wrapper.level-h1 {
+    font-size: var(--stl-typography-text-h1);
+    letter-spacing: -.03em;
+    margin-top: 64px;
+  }
+
+  & .sl-heading-wrapper.level-h2 {
+    font-size: var(--stl-typography-text-h2);
+    letter-spacing: -.03em;
+    margin-top: 48px;
+  }
+
+  & .sl-heading-wrapper.level-h3 {
+    font-size: var(--stl-typography-text-h3);
+    letter-spacing: -.02em;
+    margin-top: 40px;
+  }
+
+  & .sl-heading-wrapper.level-h4 {
+    font-size: var(--stl-typography-text-h4);
+    letter-spacing: -.02em;
+    margin-top: 32px;
+  }
+
+  & .sl-heading-wrapper.level-h5 {
+    font-size: var(--stl-typography-text-h5);
+    letter-spacing: -.02em;
+    margin-top: 24px;
+  }
+
+  & .sl-anchor-link svg {
+    margin-top: 0;
+  }
+}
+
+.stl-ui-prose starlight-tabs {
+  & a[role="tab"] {
+    line-height: unset;
+    color: var(--stl-color-foreground);
+    text-decoration: none;
+
+    &[aria-selected="true"] {
+      color: var(--stl-color-accent-foreground);
+      font-weight: normal;
+    }
+  }
+
+  & [role="tablist"]:is(ol, ul) {
+    padding-left: 0;
+  }
+
+  & li.tab:not(.stl-ui-not-prose *) {
+    margin-bottom: 0;
+
+    & > a:first-child {
+      display: flex;
+    }
+  }
+}
+
+ol.sl-steps {
+  padding-left: 0;
+}

package/dist/styles/theme.css

@@ -0,0 +1,183 @@
+@charset "UTF-8";
+/* 1. Base colors */
+@layer stl-ui.tokens {
+  :root {
+    --stl-opacity-level-080: 0.80;
+    --stl-opacity-level-040: 0.40;
+    --stl-opacity-level-016: 0.16;
+    --stl-opacity-level-008: 0.08;
+    --stl-opacity-level-004: 0.04;
+    /* background */
+    --stl-color-background: light-dark(rgb(255 255 255), rgb(10 10 10));
+    --stl-color-background-hover: light-dark(rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004))), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))));
+    /* background shades */
+    /* muted background */
+    --stl-color-muted-background: light-dark(rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-muted-background-hover: rgb(from var(--stl-color-muted-background) r g b/calc(alpha * 2));
+    /* faint background */
+    --stl-color-faint-background: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004)));
+    --stl-color-faint-background-hover: rgb(from var(--stl-color-faint-background) r g b/calc(alpha * 2));
+    /* ui elements like cards and buttons match --stl-color-background in light mode, but have a slight tint in dark mode */
+    --stl-color-ui-background: light-dark(
+      var(--stl-color-background),
+      rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-004)))
+    );
+    --stl-color-ui-background-hover: light-dark(
+      var(--stl-color-background-hover),
+      rgb(from var(--stl-color-ui-background) r g b/calc(alpha * 2))
+    );
+    /* foreground */
+    --stl-color-foreground: light-dark(rgb(38 38 38), rgb(245 245 245));
+    --stl-color-foreground-reduced: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-foreground-muted: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    /* inverse */
+    --stl-color-inverse-background: var(--stl-color-foreground);
+    --stl-color-inverse-background-hover: rgb(from var(--stl-color-inverse-background) r g b/calc(alpha * 0.9));
+    --stl-color-inverse-foreground: var(--stl-color-background);
+    /* default border (“foreground border”) */
+    --stl-color-border: rgb(from var(--stl-color-foreground) r g b/calc(alpha * var(--stl-opacity-level-016)));
+    --stl-color-border-faint: rgb(from var(--stl-color-border) r g b/calc(alpha * 0.5));
+    --stl-color-border-strong: rgb(from var(--stl-color-border) r g b/calc(alpha * 2.5));
+  }
+}
+/* 2. Color palettes (accent, red, green, etc) */
+@layer stl-ui.tokens {
+  :root {
+    /* accent */
+    --stl-color-accent: light-dark(#155dfc, #2b7fff);
+    --stl-color-accent-foreground: var(--stl-color-accent);
+    --stl-color-accent-foreground-reduced: rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-accent-foreground-muted: rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-accent-muted-background: light-dark(rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-accent-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-accent-muted-background-hover: rgb(from var(--stl-color-accent-muted-background) r g b/calc(alpha * 2));
+    --stl-color-accent-border: light-dark(rgb(from var(--stl-color-accent) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-accent) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-accent-border-faint: rgb(from var(--stl-color-accent-border) r g b/calc(alpha * 0.5));
+    --stl-color-accent-border-strong: var(--stl-color-accent);
+    --stl-color-accent-inverse-background: var(--stl-color-accent);
+    --stl-color-accent-inverse-background-hover: rgb(from var(--stl-color-accent-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-accent-inverse-foreground: rgb(255, 255, 255);
+    /* red */
+    --stl-color-red: light-dark(#d01e22, #e34041);
+    --stl-color-red-foreground: var(--stl-color-red);
+    --stl-color-red-foreground-reduced: rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-red-foreground-muted: rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-red-muted-background: light-dark(rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-red-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-red-muted-background-hover: rgb(from var(--stl-color-red-muted-background) r g b/calc(alpha * 2));
+    --stl-color-red-border: light-dark(rgb(from var(--stl-color-red) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-red) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-red-border-faint: rgb(from var(--stl-color-red-border) r g b/calc(alpha * 0.5));
+    --stl-color-red-border-strong: var(--stl-color-red);
+    --stl-color-red-inverse-background: var(--stl-color-red);
+    --stl-color-red-inverse-background-hover: rgb(from var(--stl-color-red-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-red-inverse-foreground: rgb(255, 255, 255);
+    /* green */
+    --stl-color-green: light-dark(#16a34a, #22c55e);
+    --stl-color-green-foreground: var(--stl-color-green);
+    --stl-color-green-foreground-reduced: rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-green-foreground-muted: rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-green-muted-background: light-dark(rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-green-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-green-muted-background-hover: rgb(from var(--stl-color-green-muted-background) r g b/calc(alpha * 2));
+    --stl-color-green-border: light-dark(rgb(from var(--stl-color-green) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-green) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-green-border-faint: rgb(from var(--stl-color-green-border) r g b/calc(alpha * 0.5));
+    --stl-color-green-border-strong: var(--stl-color-green);
+    --stl-color-green-inverse-background: var(--stl-color-green);
+    --stl-color-green-inverse-background-hover: rgb(from var(--stl-color-green-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-green-inverse-foreground: rgb(255, 255, 255);
+    /* blue */
+    --stl-color-blue: light-dark(#155dfc, #2b7fff);
+    --stl-color-blue-foreground: var(--stl-color-blue);
+    --stl-color-blue-foreground-reduced: rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-blue-foreground-muted: rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-blue-muted-background: light-dark(rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-blue-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-blue-muted-background-hover: rgb(from var(--stl-color-blue-muted-background) r g b/calc(alpha * 2));
+    --stl-color-blue-border: light-dark(rgb(from var(--stl-color-blue) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-blue) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-blue-border-faint: rgb(from var(--stl-color-blue-border) r g b/calc(alpha * 0.5));
+    --stl-color-blue-border-strong: var(--stl-color-blue);
+    --stl-color-blue-inverse-background: var(--stl-color-blue);
+    --stl-color-blue-inverse-background-hover: rgb(from var(--stl-color-blue-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-blue-inverse-foreground: rgb(255, 255, 255);
+    /* yellow */
+    --stl-color-yellow: light-dark(#ca8a04, #eab308);
+    --stl-color-yellow-foreground: var(--stl-color-yellow);
+    --stl-color-yellow-foreground-reduced: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-yellow-foreground-muted: rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-yellow-muted-background: light-dark(rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-yellow-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-yellow-muted-background-hover: rgb(from var(--stl-color-yellow-muted-background) r g b/calc(alpha * 2));
+    --stl-color-yellow-border: light-dark(rgb(from var(--stl-color-yellow) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-yellow) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-yellow-border-faint: rgb(from var(--stl-color-yellow-border) r g b/calc(alpha * 0.5));
+    --stl-color-yellow-border-strong: var(--stl-color-yellow);
+    --stl-color-yellow-inverse-background: var(--stl-color-yellow);
+    --stl-color-yellow-inverse-background-hover: rgb(from var(--stl-color-yellow-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-yellow-inverse-foreground: rgb(255, 255, 255);
+    /* orange */
+    --stl-color-orange: light-dark(#ea580c, #f97316);
+    --stl-color-orange-foreground: var(--stl-color-orange);
+    --stl-color-orange-foreground-reduced: rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-orange-foreground-muted: rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-orange-muted-background: light-dark(rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-orange-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-orange-muted-background-hover: rgb(from var(--stl-color-orange-muted-background) r g b/calc(alpha * 2));
+    --stl-color-orange-border: light-dark(rgb(from var(--stl-color-orange) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-orange) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-orange-border-faint: rgb(from var(--stl-color-orange-border) r g b/calc(alpha * 0.5));
+    --stl-color-orange-border-strong: var(--stl-color-orange);
+    --stl-color-orange-inverse-background: var(--stl-color-orange);
+    --stl-color-orange-inverse-background-hover: rgb(from var(--stl-color-orange-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-orange-inverse-foreground: rgb(255, 255, 255);
+    /* purple */
+    --stl-color-purple: light-dark(#9333ea, #a855f7);
+    --stl-color-purple-foreground: var(--stl-color-purple);
+    --stl-color-purple-foreground-reduced: rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-purple-foreground-muted: rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-purple-muted-background: light-dark(rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-purple-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-purple-muted-background-hover: rgb(from var(--stl-color-purple-muted-background) r g b/calc(alpha * 2));
+    --stl-color-purple-border: light-dark(rgb(from var(--stl-color-purple) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-purple) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-purple-border-faint: rgb(from var(--stl-color-purple-border) r g b/calc(alpha * 0.5));
+    --stl-color-purple-border-strong: var(--stl-color-purple);
+    --stl-color-purple-inverse-background: var(--stl-color-purple);
+    --stl-color-purple-inverse-background-hover: rgb(from var(--stl-color-purple-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-purple-inverse-foreground: rgb(255, 255, 255);
+    /* cyan */
+    --stl-color-cyan: light-dark(#0891b2, #06b6d4);
+    --stl-color-cyan-foreground: var(--stl-color-cyan);
+    --stl-color-cyan-foreground-reduced: rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-cyan-foreground-muted: rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-cyan-muted-background: light-dark(rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-cyan-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-cyan-muted-background-hover: rgb(from var(--stl-color-cyan-muted-background) r g b/calc(alpha * 2));
+    --stl-color-cyan-border: light-dark(rgb(from var(--stl-color-cyan) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-cyan) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-cyan-border-faint: rgb(from var(--stl-color-cyan-border) r g b/calc(alpha * 0.5));
+    --stl-color-cyan-border-strong: var(--stl-color-cyan);
+    --stl-color-cyan-inverse-background: var(--stl-color-cyan);
+    --stl-color-cyan-inverse-background-hover: rgb(from var(--stl-color-cyan-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-cyan-inverse-foreground: rgb(255, 255, 255);
+    /* pink */
+    --stl-color-pink: light-dark(#ec4899, #ec4899);
+    --stl-color-pink-foreground: var(--stl-color-pink);
+    --stl-color-pink-foreground-reduced: rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-pink-foreground-muted: rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-040)));
+    --stl-color-pink-muted-background: light-dark(rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-008))), rgb(from var(--stl-color-pink-foreground) r g b/calc(alpha * var(--stl-opacity-level-016))));
+    --stl-color-pink-muted-background-hover: rgb(from var(--stl-color-pink-muted-background) r g b/calc(alpha * 2));
+    --stl-color-pink-border: light-dark(rgb(from var(--stl-color-pink) r g b/calc(alpha * var(--stl-opacity-level-016))), rgb(from var(--stl-color-pink) r g b/calc(alpha * calc(var(--stl-opacity-level-016) * 1.5))));
+    --stl-color-pink-border-faint: rgb(from var(--stl-color-pink-border) r g b/calc(alpha * 0.5));
+    --stl-color-pink-border-strong: var(--stl-color-pink);
+    --stl-color-pink-inverse-background: var(--stl-color-pink);
+    --stl-color-pink-inverse-background-hover: rgb(from var(--stl-color-pink-inverse-background) r g b/calc(alpha * var(--stl-opacity-level-080)));
+    --stl-color-pink-inverse-foreground: rgb(255, 255, 255);
+  }
+  :root[data-theme=dark],
+  .stl-theme-dark {
+    color-scheme: dark;
+    background: var(--stl-color-background);
+    color: var(--stl-color-foreground);
+  }
+  :root[data-theme=light],
+  .stl-theme-light {
+    color-scheme: light;
+    background: var(--stl-color-background);
+    color: var(--stl-color-foreground);
+  }
+}
+/* Semantic color roles */
+@layer stl-ui.tokens {
+  :root {
+    --stl-color-link-foreground: var(--stl-color-accent-foreground);
+    --stl-color-text-selection: var(--stl-color-accent-inverse-background);
+  }
+}