WorkRoot/Astro-Component
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed Some Bugs

Browse Source
This commit is contained in:
Clintchiz
2025-08-17 15:05:44 +05:30
parent f8a0e82076
commit b362d10519
16 changed files with 549 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ColorSwitcher.astro
+2
View File
@@ -27,6 +27,8 @@ const {
{ key: "sunset", label: "Sunset" },
{ key: "grape", label: "Grape" },
{ key: "slate", label: "Slate" },
{ key: "gray", label: "Gray" },
{ key: "neutral", label: "Neutral" },
{ key: "mint", label: "Mint" },
{ key: "amber", label: "Amber" },
{ key: "crimson", label: "Crimson" },
src/components/Dropdown.astro
+110 -88
View File
@@ -197,13 +197,18 @@ const id = `dd-${Math.random().toString(36).slice(2)}`;
const side = sideOf(pref);
const align = alignOf(pref);
const AR = showArrow && arrowEl ? 8 : 0; // arrow size
const SAFE = Math.max(shiftPadding, 8); // viewport padding
const GAP = offset + AR; // desired gap + arrow
let x = 0,
y = 0;
if (side === "bottom") y = t.bottom + offset;
else if (side === "top") y = t.top - p.height - offset;
else if (side === "right") x = t.right + offset;
else if (side === "left") x = t.left - p.width - offset;
if (side === "bottom") y = t.bottom + GAP;
else if (side === "top") y = t.top - p.height - GAP;
else if (side === "right") x = t.right + GAP;
else if (side === "left") x = t.left - p.width - GAP;
if (side === "top" || side === "bottom") {
if (align === "start") x = t.left;
@@ -215,116 +220,99 @@ const id = `dd-${Math.random().toString(36).slice(2)}`;
else y = t.top + (t.height - p.height) / 2;
}
const pad = shiftPadding;
x = Math.max(pad, Math.min(x, vw - p.width - pad));
y = Math.max(pad, Math.min(y, vh - p.height - pad));
return { x, y }; // no Math.round
}
// Clamp into viewport
x = Math.max(SAFE, Math.min(x, vw - p.width - SAFE));
y = Math.max(SAFE, Math.min(y, vh - p.height - SAFE));
function positionPanel() {
if (!open) return;
if (matchTriggerWidth) {
const w = Math.max(192, trigger.getBoundingClientRect().width);
panel.style.minWidth = `${w}px`;
}
const best = smartPosition();
panel.style.left = `${best.x}px`;
panel.style.top = `${best.y}px`;
// Return overflow score (lower is better)
const over =
Math.max(0, SAFE - x) +
Math.max(0, SAFE - y) +
Math.max(0, x + p.width - (vw - SAFE)) +
Math.max(0, y + p.height - (vh - SAFE));
const side = sideOf(best.cand),
align = alignOf(best.cand);
setOriginFor(side, align);
panel.dataset.side = side;
if (showArrow && arrowEl) {
Object.assign(arrowEl.style, {
left: "",
top: "",
right: "",
bottom: "",
});
const t = trigger.getBoundingClientRect();
const p = panel.getBoundingClientRect();
const aw = arrowEl.getBoundingClientRect().width;
const ah = arrowEl.getBoundingClientRect().height;
const AR = 7;
if (side === "bottom") {
arrowEl.style.top = `${-AR}px`;
const cx = t.left + t.width / 2;
arrowEl.style.left = `${cx - p.left - aw / 2}px`;
} else if (side === "top") {
arrowEl.style.bottom = `${-AR}px`;
const cx = t.left + t.width / 2;
arrowEl.style.left = `${cx - p.left - aw / 2}px`;
} else if (side === "right") {
arrowEl.style.left = `${-AR}px`;
const cy = t.top + t.height / 2;
arrowEl.style.top = `${cy - p.top - ah / 2}px`;
} else if (side === "left") {
arrowEl.style.right = `${-AR}px`;
const cy = t.top + t.height / 2;
arrowEl.style.top = `${cy - p.top - ah / 2}px`;
}
}
return { x: Math.round(x), y: Math.round(y), over };
}
function smartPosition() {
const s = sideOf(placement),
a = alignOf(placement);
const flips = {
const s = sideOf(placement);
const a = alignOf(placement);
const flipSide = {
top: "bottom",
bottom: "top",
left: "right",
right: "left",
};
const candidates = [placement, `${flips[s]}${a ? `-${a}` : ""}`];
if (s === "top" || s === "bottom")
candidates.push(
`left-${a || "start"}`,
`right-${a || "start"}`,
);
else
candidates.push(
`top-${a || "start"}`,
`bottom-${a || "start"}`,
);
}[s];
const vw = document.documentElement.clientWidth;
const vh = document.documentElement.clientHeight;
// Try: requested → side flipped → align flipped → both flipped → orthogonal sides
const aligns = a
? [a, a === "start" ? "end" : "start", "center"]
: ["center", "start", "end"];
const candidates = [];
aligns.forEach((al) =>
candidates.push(`${s}${al === "center" ? "" : "-" + al}`),
);
aligns.forEach((al) =>
candidates.push(
`${flipSide}${al === "center" ? "" : "-" + al}`,
),
);
if (s === "top" || s === "bottom") {
aligns.forEach((al) =>
candidates.push(`left-${al === "center" ? "start" : al}`),
);
aligns.forEach((al) =>
candidates.push(`right-${al === "center" ? "start" : al}`),
);
} else {
aligns.forEach((al) =>
candidates.push(`top-${al === "center" ? "start" : al}`),
);
aligns.forEach((al) =>
candidates.push(`bottom-${al === "center" ? "start" : al}`),
);
}
let best = null;
for (const cand of candidates) {
const pos = placeOnce(cand);
const p = panel.getBoundingClientRect();
const w = p.width,
h = p.height;
const over =
Math.max(0, -pos.x) +
Math.max(0, -pos.y) +
Math.max(0, pos.x + w - vw) +
Math.max(0, pos.y + h - vh);
if (!best || over < best.score)
best = { cand, ...pos, score: over };
if (!best || pos.over < best.over) best = { cand, ...pos };
if (pos.over === 0) break; // perfect fit
}
return best;
}
function positionPanel() {
if (!open) return;
// Constrain size so the panel never forces overflow
const vw = document.documentElement.clientWidth;
const vh = document.documentElement.clientHeight;
const PAD = Math.max(shiftPadding, 8);
// Optional: match trigger width
if (matchTriggerWidth) {
const w = Math.max(192, trigger.getBoundingClientRect().width);
panel.style.minWidth = `${Math.round(w)}px`;
}
panel.style.maxWidth = `${vw - PAD * 2}px`;
panel.style.maxHeight = `${vh - PAD * 2}px`;
panel.style.overflow = "auto"; // scroll when needed
const best = smartPosition();
panel.style.left = best.x + "px";
panel.style.top = best.y + "px";
const side = sideOf(best.cand),
align = alignOf(best.cand);
const side = sideOf(best.cand);
const align = alignOf(best.cand);
setOriginFor(side, align);
panel.dataset.side = side;
// Arrow
if (showArrow && arrowEl) {
Object.assign(arrowEl.style, {
left: "",
@@ -336,26 +324,60 @@ const id = `dd-${Math.random().toString(36).slice(2)}`;
const p = panel.getBoundingClientRect();
const aw = arrowEl.getBoundingClientRect().width;
const ah = arrowEl.getBoundingClientRect().height;
const AR = 7;
const AR = 8;
if (side === "bottom") {
arrowEl.style.top = -AR + "px";
const cx = t.left + t.width / 2;
arrowEl.style.left =
Math.round(cx - p.left - aw / 2) + "px";
Math.round(
Math.max(
PAD,
Math.min(
cx - p.left - aw / 2,
p.width - PAD - aw,
),
),
) + "px";
} else if (side === "top") {
arrowEl.style.bottom = -AR + "px";
const cx = t.left + t.width / 2;
arrowEl.style.left =
Math.round(cx - p.left - aw / 2) + "px";
Math.round(
Math.max(
PAD,
Math.min(
cx - p.left - aw / 2,
p.width - PAD - aw,
),
),
) + "px";
} else if (side === "right") {
arrowEl.style.left = -AR + "px";
const cy = t.top + t.height / 2;
arrowEl.style.top = Math.round(cy - p.top - ah / 2) + "px";
arrowEl.style.top =
Math.round(
Math.max(
PAD,
Math.min(
cy - p.top - ah / 2,
p.height - PAD - ah,
),
),
) + "px";
} else if (side === "left") {
arrowEl.style.right = -AR + "px";
const cy = t.top + t.height / 2;
arrowEl.style.top = Math.round(cy - p.top - ah / 2) + "px";
arrowEl.style.top =
Math.round(
Math.max(
PAD,
Math.min(
cy - p.top - ah / 2,
p.height - PAD - ah,
),
),
) + "px";
}
}
}
src/components/Field.astro
+9 -9
View File
@@ -53,7 +53,7 @@ const descId = p.description ? `${fieldId}-desc` : undefined;
const errId = `${fieldId}-err`;
const inputBase = cva(
"wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:border-gray-200 wr:rounded-lg wr:sm:text-sm wr:focus:border-blue-500 wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-900 wr:dark:border-neutral-700 wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
"wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:border-border wr:rounded-lg wr:sm:text-sm wr:focus:border-border wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-border wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
{
variants: {
size: {
@@ -68,7 +68,7 @@ const inputBase = cva(
);
const selectBase = cva(
"wr:py-3 wr:px-4 wr:pe-9 wr:block wr:w-full wr:border-gray-200 wr:rounded-lg wr:text-sm wr:focus:border-blue-500 wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-900 wr:dark:border-neutral-700 wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
"wr:py-3 wr:px-4 wr:pe-9 wr:block wr:w-full wr:border-border wr:rounded-lg wr:text-sm wr:focus:border-border wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-border wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
{
variants: {
size: {
@@ -90,7 +90,7 @@ const helpCls = "wr:mt-2 wr:text-sm wr:text-gray-500 wr:dark:text-neutral-500";
const errCls = "wr:text-sm wr:text-red-600 wr:mt-2";
const groupCls = "wr:relative wr:flex wr:items-stretch";
const addonBase =
"wr:px-4 wr:inline-flex wr:items-center wr:min-w-fit wr:rounded-md wr:border wr:border-gray-200 wr:bg-gray-50 wr:text-sm wr:text-gray-500 wr:dark:bg-neutral-700 wr:dark:border-neutral-700 wr:dark:text-neutral-400";
"wr:px-4 wr:inline-flex wr:items-center wr:min-w-fit wr:rounded-md wr:border wr:border-border wr:bg-gray-200 wr:text-sm wr:text-gray-500 wr:dark:bg-card wr:dark:border-border wr:dark:text-neutral-400";
const controlWrap = "wr:relative";
---
@@ -220,7 +220,7 @@ const controlWrap = "wr:relative";
name={p.name}
type={(p.kind as any) ?? "text"}
class={cn(
"wr:block wr:w-full wr:border wr:border-gray-200 wr:shadow-sm wr:rounded-lg wr:text-sm wr:focus:z-10 wr:focus:border-blue-500 wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-900 wr:dark:border-neutral-700 wr:dark:text-neutral-400 wr:file:bg-gray-50 wr:file:border-0 wr:file:me-4 wr:file:py-3 wr:file:px-4 wr:dark:file:bg-neutral-700 wr:dark:file:text-neutral-400",
"wr:block wr:w-full wr:border wr:border-border wr:shadow-sm wr:rounded-lg wr:text-sm wr:focus:z-10 wr:focus:border-border wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-border wr:dark:text-neutral-400 wr:file:bg-gray-50 wr:file:border-0 wr:file:me-4 wr:file:py-3 wr:file:px-4 wr:dark:file:bg-input wr:dark:file:text-neutral-400",
p.prefixText && "wr:rounded-l-none",
p.suffixText && "wr:rounded-r-none",
p.error &&
@@ -281,7 +281,7 @@ const controlWrap = "wr:relative";
.join(" ") || undefined
}
class={cn(
"wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:border-gray-200 wr:rounded-lg wr:sm:text-sm wr:focus:border-blue-500 wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-900 wr:dark:border-neutral-700 wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
"wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:border-border wr:rounded-lg wr:sm:text-sm wr:focus:border-border wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-border wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
p.size === "sm"
? "wr:text-sm wr:p-3"
: p.size === "lg"
@@ -352,7 +352,7 @@ const controlWrap = "wr:relative";
id={fieldId}
name={p.name}
type="checkbox"
class="wr:shrink-0 wr:mt-0.5 wr:border-gray-200 wr:rounded-sm wr:text-blue-600 wr:focus:ring-blue-500 wr:checked:border-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-800 wr:dark:border-neutral-700 wr:dark:checked:bg-blue-500 wr:dark:checked:border-blue-500 wr:dark:focus:ring-offset-gray-800"
class="wr:shrink-0 wr:mt-0.5 wr:border-border wr:rounded-sm wr:text-blue-600 wr:focus:ring-blue-500 wr:checked:border-border wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-border wr:dark:checked:bg-blue-500 wr:dark:checked:border-border wr:dark:focus:ring-offset-gray-800"
checked={!!p.value}
disabled={p.disabled}
data-control
@@ -395,7 +395,7 @@ const controlWrap = "wr:relative";
name={p.name}
value={opt.value}
checked={String(p.value) === opt.value}
class="wr:shrink-0 wr:mt-0.5 wr:border-gray-200 wr:rounded-full wr:text-blue-600 wr:focus:ring-blue-500 wr:checked:border-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-800 wr:dark:border-neutral-700 wr:dark:checked:bg-blue-500 wr:dark:checked:border-blue-500 wr:dark:focus:ring-offset-gray-800"
class="wr:shrink-0 wr:mt-0.5 wr:border-border wr:rounded-full wr:text-blue-600 wr:focus:ring-blue-500 wr:checked:border-border wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-border wr:dark:checked:bg-blue-500 wr:dark:checked:border-border wr:dark:focus:ring-offset-gray-800"
disabled={opt.disabled || p.disabled}
data-control
/>
@@ -422,8 +422,8 @@ const controlWrap = "wr:relative";
disabled={p.disabled}
data-control
/>
<span class="wr:absolute wr:inset-0 wr:bg-gray-200 wr:rounded-full wr:transition-colors wr:duration-200 wr:ease-in-out wr:peer-checked:bg-blue-600 wr:dark:bg-neutral-700 wr:dark:peer-checked:bg-blue-500 wr:peer-disabled:opacity-50 wr:peer-disabled:pointer-events-none" />
<span class="wr:absolute wr:top-1/2 wr:start-0.5 wr:-translate-y-1/2 wr:size-5 wr:bg-white wr:rounded-full wr:shadow-xs wr:transition-transform wr:duration-200 wr:ease-in-out wr:peer-checked:translate-x-full wr:dark:bg-neutral-400 wr:dark:peer-checked:bg-white" />
<span class="wr:absolute wr:inset-0 wr:bg-gray-200 wr:rounded-full wr:transition-colors wr:duration-200 wr:ease-in-out wr:peer-checked:bg-blue-600 wr:dark:bg-input wr:dark:peer-checked:bg-blue-500 wr:peer-disabled:opacity-50 wr:peer-disabled:pointer-events-none" />
<span class="wr:absolute wr:top-1/2 wr:start-0.5 wr:-translate-y-1/2 wr:size-5 wr:bg-white wr:rounded-full wr:shadow-xs wr:transition-transform wr:duration-200 wr:ease-in-out wr:peer-checked:translate-x-full wr:dark:bg-white wr:dark:peer-checked:bg-white" />
</label>
{p.label && (
<label
src/components/MultiSelect.astro
+4 -4
View File
@@ -51,7 +51,7 @@ const sizeCls =
const controlCls =
"wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:border-gray-200 wr:rounded-lg wr:sm:text-sm " +
"wr:focus:border-blue-500 wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none " +
"wr:dark:bg-neutral-900 wr:dark:border-neutral-700 wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600";
"wr:dark:bg-input wr:dark:border-border wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600";
const chipBase =
"wr:inline-flex wr:items-center wr:gap-1 wr:rounded-full wr:px-2 wr:py-0.5 wr:text-xs wr:bg-muted wr:text-foreground";
@@ -133,7 +133,7 @@ const displayMode = p.display ?? "text";
</div>
<div
class="wr:absolute wr:border-border wr:bg-popover wr:text-popover-foreground wr:shadow-lg wr:hidden wr:mt-2 wr:z-50 wr:w-full wr:max-h-72 wr:p-1 wr:space-y-0.5 wr:bg-white wr:border wr:border-gray-200 wr:rounded-lg wr:overflow-hidden wr:overflow-y-auto wr:[&::-webkit-scrollbar]:w-2 wr:[&::-webkit-scrollbar-thumb]:rounded-full wr:[&::-webkit-scrollbar-track]:bg-gray-100 wr:[&::-webkit-scrollbar-thumb]:bg-gray-300 wr:dark:[&::-webkit-scrollbar-track]:bg-neutral-700 wr:dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 wr:dark:bg-neutral-900 wr:dark:border-neutral-700"
class="wr:absolute wr:text-popover-foreground wr:shadow-lg wr:hidden wr:mt-2 wr:z-50 wr:w-full wr:max-h-96 wr:p-1 wr:space-y-0.5 wr:bg-white wr:border wr:border-gray-200 wr:rounded-lg wr:overflow-hidden wr:overflow-y-auto wr:[&::-webkit-scrollbar]:w-2 wr:[&::-webkit-scrollbar-thumb]:rounded-full wr:[&::-webkit-scrollbar-track]:bg-gray-100 wr:[&::-webkit-scrollbar-thumb]:bg-gray-300 wr:dark:[&::-webkit-scrollbar-track]:bg-input wr:dark:[&::-webkit-scrollbar-thumb]:bg-input wr:dark:bg-input wr:dark:border-border"
id={`${containerId}-panel`}
>
{
@@ -147,7 +147,7 @@ const displayMode = p.display ?? "text";
<input
type="text"
class={cn(
"wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:border-gray-200 wr:rounded-lg wr:sm:text-sm wr:focus:border-blue-500 wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-900 wr:dark:border-neutral-700 wr:dark:text-neutral-400 wr:dark:placeholder-neutral-500 wr:dark:focus:ring-neutral-600",
"wr:py-2.5 wr:sm:py-3 wr:px-4 wr:block wr:w-full wr:border-gray-200 wr:rounded-lg wr:sm:text-sm wr:focus:border-blue-500 wr:focus:ring-blue-500 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-input wr:dark:border-neutral-400 wr:dark:text-neutral-400 wr:dark:placeholder-neutral-400 wr:dark:focus:ring-neutral-400",
"wr:h-9 wr:pl-8 wr:pr-2 wr:text-sm",
)}
placeholder="Search…"
@@ -226,7 +226,7 @@ const displayMode = p.display ?? "text";
p.description && (
<p
id={descId}
class="wr:mt-2 wr:text-sm wr:text-gray-500 wr:dark:text-neutral-500"
class="wr:mt-2 wr:text-sm wr:text-gray-500 wr:dark:text-input"
>
{p.description}
</p>
src/components/ThemeSwitcher.astro
+115 -155
View File
@@ -1,198 +1,158 @@
---
import type { HTMLAttributes } from "astro/types";
import Dropdown from "./Dropdown.astro";
import { Icon } from "astro-icon/components";
interface Props extends HTMLAttributes<"div"> {
storageKey?: string;
rootSelector?: string; // where to toggle theme, e.g. "html"
compact?: boolean; // smaller trigger button
darkBgClass?: string[]; // non–pure-black dark background class
lightBgClass?: string[]; // light background class
rootExtraClass?: string; // always-on root class (optional)
showLabel?: boolean; // show text next to icon in trigger
rootSelector?: string;
compact?: boolean;
showLabel?: boolean;
darkBgClass?: string[];
lightBgClass?: string[];
rootExtraClass?: string;
}
const {
storageKey = "wr-theme",
rootSelector = "html",
compact = false,
darkBgClass = ["wr-theme-dark-soft"],
lightBgClass = ["wr-theme-light"],
rootExtraClass = "",
showLabel = false,
darkBgClass = [],
lightBgClass = [],
rootExtraClass = "",
class: className,
...rest
}: Props = Astro.props;
const iconBtn =
"wr:py-3 wr:px-4 wr:inline-flex wr:items-center wr:gap-x-2 wr:text-sm wr:font-medium wr:rounded-lg wr:border wr:border-gray-200 wr:bg-white wr:text-gray-800 wr:shadow-2xs wr:hover:bg-gray-50 wr:focus:outline-hidden wr:focus:bg-gray-50 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-800 wr:dark:border-neutral-700 wr:dark:text-white wr:dark:hover:bg-neutral-700 wr:dark:focus:bg-neutral-700";
const menuBtn =
"wr:py-3 wr:px-4 wr:inline-flex wr:items-center wr:gap-x-2 wr:text-sm wr:font-medium wr:rounded-lg wr:border wr:border-gray-200 wr:bg-white wr:text-gray-800 wr:shadow-2xs wr:hover:bg-gray-50 wr:focus:outline-hidden wr:focus:bg-gray-50 wr:disabled:opacity-50 wr:disabled:pointer-events-none wr:dark:bg-neutral-800 wr:dark:border-neutral-700 wr:dark:text-white wr:dark:hover:bg-neutral-700 wr:dark:focus:bg-neutral-700";
const containerId = `ts-${Math.random().toString(36).slice(2)}`;
const icon = "wr:size-4";
const item =
"wr:flex wr:items-center wr:gap-3 wr:w-full wr:px-3 wr:py-2.5 wr:rounded-lg wr:text-sm wr:hover:bg-muted/70 wr:transition wr:duration-150";
const icon = "wr:size-4";
const checkBase = "wr:size-4 wr:opacity-0 wr:scale-90 wr:transition";
const containerId = `ts-${Math.random().toString(36).slice(2)}`;
---
<div id={containerId} class={["wr:relative", className].join(" ")} {...rest}>
<!-- Trigger: icon-only by default; set showLabel=true to include text -->
<button
type="button"
class={showLabel ? menuBtn : [iconBtn, compact && "wr:h-8 wr:w-8"].filter(Boolean).join(" ")}
data-menu-trigger
aria-haspopup="menu"
aria-expanded="false"
title="Theme"
>
<span class="wr:inline-flex wr:items-center wr:gap-2">
<span data-current-icon="light" class="wr:inline"><Icon name="mdi:weather-sunny" class={icon} /></span>
<span data-current-icon="dark" class="wr:hidden"><Icon name="mdi:weather-night" class={icon} /></span>
<span data-current-icon="system" class="wr:hidden"><Icon name="mdi:laptop" class={icon} /></span>
<div id={containerId} class={["wr:inline-flex", className].join(" ")} data-compact={compact ? "1" : ""} {...rest}>
<Dropdown openOn="click" placement="bottom-end" offset={10} shiftPadding={10} showArrow={true} closeOnSelect={true}>
<span slot="trigger" class="wr:inline-flex wr:items-center wr:gap-2">
<span data-current-icon="light" class="wr:inline">
<Icon name="mdi:weather-sunny" class={icon} />
</span>
<span data-current-icon="dark" class="wr:hidden">
<Icon name="mdi:weather-night" class={icon} />
</span>
<span data-current-icon="system" class="wr:hidden">
<Icon name="mdi:laptop" class={icon} />
</span>
{showLabel && <span data-current-label class="wr:text-sm wr:font-medium">System</span>}
<svg data-dd-chev class="wr:size-4 wr:opacity-70 wr:transition-transform wr:duration-150" viewBox="0 0 24 24" fill="none">
<path d="M7 10l5 5 5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
{showLabel && <Icon name="mdi:chevron-down" class="wr:size-4 wr:opacity-70" />}
</button>
<!-- Dropdown -->
<div
class="wr:absolute wr:right-0 wr:z-50 wr:w-56 wr:border-border wr:bg-popover/90 wr:backdrop-blur-md wr:text-popover-foreground wr:p-1.5 wr:origin-top-right wr:scale-95 wr:duration-150 wr:ease-out wr:transition-[opacity,margin] wr:border wr:border-gray-100 wr:duration wr:hs-dropdown-open:opacity-100 wr:opacity-0 wr:hidden wr:min-w-60 wr:bg-white wr:shadow-md wr:rounded-lg wr:mt-2 wr:dark:bg-neutral-800 wr:dark:border wr:dark:border-neutral-700 wr:dark:divide-neutral-700 wr:after:h-4 wr:after:absolute wr:after:-bottom-4 wr:after:start-0 wr:after:w-full wr:before:h-4 wr:before:absolute wr:before:-top-4 wr:before:start-0 wr:before:w-full"
role="menu"
aria-label="Theme"
data-menu-panel
>
<button type="button" role="menuitemradio" aria-checked="false" class={item} data-set-theme="light">
<!-- Note: each item carries data-owner={containerId} so we can find it after portal -->
<button type="button" role="menuitemradio" aria-checked="false" class={item} data-dd-item data-set-theme="light" data-owner={containerId}>
<Icon name="mdi:weather-sunny" class={icon} />
<div class="wr:flex-1 wr:font-medium">Light</div>
<Icon name="mdi:check" class={checkBase} data-check />
</button>
<button type="button" role="menuitemradio" aria-checked="false" class={item} data-set-theme="dark">
<button type="button" role="menuitemradio" aria-checked="false" class={item} data-dd-item data-set-theme="dark" data-owner={containerId}>
<Icon name="mdi:weather-night" class={icon} />
<div class="wr:flex-1 wr:font-medium">Dark</div>
<Icon name="mdi:check" class={checkBase} data-check />
</button>
<button type="button" role="menuitemradio" aria-checked="true" class={item} data-set-theme="system">
<button type="button" role="menuitemradio" aria-checked="true" class={item} data-dd-item data-set-theme="system" data-owner={containerId}>
<Icon name="mdi:laptop" class={icon} />
<div class="wr:flex-1 wr:font-medium">System</div>
<Icon name="mdi:check" class={checkBase} data-check />
</button>
</div>
</Dropdown>
</div>
<script is:inline define:vars={{ containerId, storageKey, rootSelector, darkBgClass, lightBgClass, rootExtraClass }}>
(() => {
const host = document.getElementById(containerId);
if (!host) return;
const root = rootSelector === "html"
? document.documentElement
: document.querySelector(rootSelector) || document.documentElement;
const mql = window.matchMedia("(prefers-color-scheme: dark)");
let lastThemeClasses = [];
function setRootClasses(list) {
lastThemeClasses.forEach(c => c && root.classList.remove(c));
list.filter(Boolean).forEach(c => root.classList.add(c));
lastThemeClasses = list.filter(Boolean);
}
function reflectUI(mode) {
// Trigger icon + optional label
const trig = host.querySelector("[data-menu-trigger]");
if (trig) {
const labelSpan = trig.querySelector("[data-current-label]");
if (labelSpan) labelSpan.textContent = mode[0].toUpperCase() + mode.slice(1);
trig.querySelectorAll("[data-current-icon]").forEach(el => {
const is = el.getAttribute("data-current-icon") === mode;
el.classList.toggle("wr:hidden", !is);
el.classList.toggle("wr:inline", is);
});
}
// Menu radios & checks
const panel = host.querySelector("[data-menu-panel]");
if (panel) {
panel.querySelectorAll("[role='menuitemradio']").forEach(item => {
const active = item.getAttribute("data-set-theme") === mode;
item.setAttribute("aria-checked", active ? "true" : "false");
item.classList.toggle("wr:bg-muted/60", active);
});
}
}
function openMenu(open) {
const trigger = host.querySelector("[data-menu-trigger]");
const panel = host.querySelector("[data-menu-panel]");
trigger?.setAttribute("aria-expanded", open ? "true" : "false");
if (!panel) return;
if (open) {
panel.classList.remove("wr:hidden");
requestAnimationFrame(() => {
panel.classList.remove("wr:scale-95","wr:opacity-0");
panel.classList.add("wr:scale-100","wr:opacity-100");
});
} else {
panel.classList.add("wr:scale-95","wr:opacity-0");
setTimeout(() => panel.classList.add("wr:hidden"), 150);
}
}
function apply(mode) {
const resolved = mode === "system" ? (mql.matches ? "dark" : "light") : mode;
root.classList.toggle("dark", resolved === "dark");
root.setAttribute("data-theme", resolved);
document.documentElement.style.colorScheme = resolved;
setRootClasses([rootExtraClass, ...(resolved === "dark" ? darkBgClass : lightBgClass)]);
localStorage.setItem(storageKey, mode);
reflectUI(mode);
}
// Init
const saved = (localStorage.getItem(storageKey) ) || "system";
apply(saved);
// react to system changes when mode=system
mql.addEventListener?.("change", () => {
if ((localStorage.getItem(storageKey) ) === "system") apply("system");
});
// Events (scoped to this component)
host.addEventListener("click", (e) => {
const trigger = (e.target )?.closest?.("[data-menu-trigger]");
if (trigger && host.contains(trigger)) {
const expanded = trigger.getAttribute("aria-expanded") === "true";
openMenu(!expanded);
return;
}
const choose = (e.target )?.closest?.("[data-set-theme]");
if (choose && host.contains(choose)) {
apply(choose.getAttribute("data-set-theme") );
openMenu(false);
return;
}
});
// Close on outside click
document.addEventListener("click", (e) => {
if (!host.contains(e.target )) openMenu(false);
});
// Esc to close
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") openMenu(false);
});
})();
</script>
<style is:inline>
/* Check icon ONLY on active item */
#{containerId} [role="menuitemradio"][aria-checked="true"] [data-check] {
/* Compact trigger tweak without touching Dropdown source */
#{containerId}[data-compact="1"] [data-dd-trigger]{
height: 2.25rem;
padding-left: .5rem;
padding-right: .5rem;
}
/* Show check icon ONLY on active */
#{containerId} [role="menuitemradio"][aria-checked="true"] [data-check]{
opacity: 1 !important;
transform: scale(1) !important;
}
</style>
/* Subtle active row styling */
#{containerId} [role="menuitemradio"][aria-checked="true"]{
background-color: color-mix(in hsl, hsl(var(--muted)) 70%, transparent);
}
</style>
<script is:inline define:vars={{ containerId, storageKey, rootSelector, darkBgClass, lightBgClass, rootExtraClass }}>
(() => {
const host = document.getElementById(containerId);
if (!host) return;
const root = rootSelector === "html"
? document.documentElement
: document.querySelector(rootSelector) || document.documentElement;
const mql = window.matchMedia("(prefers-color-scheme: dark)");
let lastThemeClasses = [];
const itemSelector = `[data-set-theme][data-owner="${containerId}"]`;
function setRootClasses(list) {
lastThemeClasses.forEach(c => c && root.classList.remove(c));
list.filter(Boolean).forEach(c => root.classList.add(c));
lastThemeClasses = list.filter(Boolean);
}
function reflectUI(mode) {
const label = host.querySelector("[data-current-label]");
if (label) label.textContent = mode[0].toUpperCase() + mode.slice(1);
host.querySelectorAll("[data-current-icon]").forEach(el => {
const on = el.getAttribute("data-current-icon") === mode;
el.classList.toggle("wr:hidden", !on);
el.classList.toggle("wr:inline", on);
});
// Items are portaled; query document by owner
document.querySelectorAll(itemSelector).forEach((el) => {
const active = el.getAttribute("data-set-theme") === mode;
el.setAttribute("aria-checked", active ? "true" : "false");
});
}
function apply(mode) {
const resolved = mode === "system" ? (mql.matches ? "dark" : "light") : mode;
root.classList.toggle("dark", resolved === "dark");
root.setAttribute("data-theme", resolved);
document.documentElement.style.colorScheme = resolved;
setRootClasses([rootExtraClass, ...(resolved === "dark" ? darkBgClass : lightBgClass)]);
localStorage.setItem(storageKey, mode);
reflectUI(mode);
}
// Init
const saved = (localStorage.getItem(storageKey)) || "system";
apply(saved);
// React to system changes when mode=system
mql.addEventListener?.("change", () => {
if ((localStorage.getItem(storageKey)) === "system") apply("system");
});
// Listen globally because panel is portaled outside host
document.addEventListener("click", (e) => {
const btn = (e.target)?.closest?.(itemSelector);
if (!btn) return;
apply(btn.getAttribute("data-set-theme"));
});
})();
</script>
src/layouts/Base.astro
+1 -1
View File
@@ -15,7 +15,7 @@ const attributes = Astro.props;
</head>
<body
class={cn(
"bg-white dark:bg-neutral-700 text-black dark:text-white",
"wr:bg-white wr:dark:bg-background wr:text-black wr:dark:text-white",
attributes.class,
)}
{...attributes}
src/layouts/ComponentLayout.astro
+48
View File
@@ -0,0 +1,48 @@
---
import ColorSwitcher from "../components/ColorSwitcher.astro";
import ThemeSwitcher from "../components/ThemeSwitcher.astro";
import Base from "./Base.astro";
---
<Base>
<div class="wr:flex wr:items-center wr:gap-3 wr:pb-3 wr:p-4">
<ThemeSwitcher
darkBgClass={["wr:dark:bg-neutral-500", "wr:text-white"]}
lightBgClass={["wr:bg-white", "wr:text-black"]}
/>
<ColorSwitcher ui="menu" />
</div>
<div class="wr:flex-1 wr:flex">
<div class="wr:w-1/6 wr:p-4 wr:space-y-3">
<h1 class="text-xl font-bold">Component List</h1>
<ul class="list-outside list-decimal">
<li class="list-item">
<a href="/icons">Icons</a>
</li>
<li class="list-item">
<a href="/buttons">Buttons</a>
</li>
<li class="list-item">
<a href="/forms">Forms</a>
</li>
<li class="list-item">
<a href="/forms1">Forms 1</a>
</li>
<li class="list-item">
<a href="/forms2">Forms 2</a>
</li>
<li class="list-item">
<a href="/theme">Theme</a>
</li>
<li class="list-item">
<a href="/dropdown">Dropdown</a>
</li>
</ul>
</div>
<div class="wr:w-5/6 wr:p-4">
<slot />
</div>
</div>
</Base>
src/pages/buttons.astro
+4 -14
View File
@@ -1,22 +1,12 @@
---
import Base from "../layouts/Base.astro";
import ComponentLayout from "../layouts/ComponentLayout.astro";
import Button from "../components/Button.astro";
import ThemeSwitcher from "../components/ThemeSwitcher.astro";
import ColorSwitcher from "../components/ColorSwitcher.astro";
---
<Base>
<ThemeSwitcher
ui="select"
darkBgClass={["wr:dark:bg-neutral-700", "wr:text-white"]}
lightBgClass={["wr:bg-white", "wr:text-black"]}
rootExtraClass=""
/>
<ColorSwitcher />
<ComponentLayout>
<div class="wr:p-4">
<Button
variant="outline"
variant="solid"
icon="lets-icons:check-ring-duotone-line"
color="primary"
size="md"
@@ -24,4 +14,4 @@ import ColorSwitcher from "../components/ColorSwitcher.astro";
Submit
</Button>
</div>
</Base>
</ComponentLayout>
src/pages/dropdown.astro
+3 -12
View File
@@ -1,21 +1,12 @@
---
import Base from "../layouts/Base.astro";
import ComponentLayout from "../layouts/ComponentLayout.astro";
import Dropdown from "../components/Dropdown.astro";
import ThemeSwitcher from "../components/ThemeSwitcher.astro";
import ColorSwitcher from "../components/ColorSwitcher.astro";
---
<Base>
<ComponentLayout>
<div
class="wrnx wr:flex wr:items-center wr:flex-col wr:gap-4 wr:w-full wr:h-screen"
>
<ThemeSwitcher
darkBgClass={["wr:dark:bg-neutral-500", "wr:text-white"]}
lightBgClass={["wr:bg-white", "wr:text-black"]}
/>
<ColorSwitcher ui="menu" />
<Dropdown placement="bottom">
<div slot="trigger" class="wr:inline-flex wr:items-center wr:gap-2">
Actions
@@ -56,7 +47,7 @@ import ColorSwitcher from "../components/ColorSwitcher.astro";
</div>
</Dropdown>
</div>
</Base>
</ComponentLayout>
<script>
const alerthere = document.getElementById("alertHere");
src/pages/forms.astro
+3 -3
View File
@@ -1,10 +1,10 @@
---
import Form from "../components/Form.astro";
import Field from "../components/Field.astro";
import Base from "../layouts/Base.astro";
import ComponentLayout from "../layouts/ComponentLayout.astro";
---
<Base class="wr:p-4">
<ComponentLayout class="wr:p-4">
<Form
title="Create Project"
description="Fields marked * are required."
@@ -69,7 +69,7 @@ import Base from "../layouts/Base.astro";
class="wr:sm:col-span-2"
/>
</Form>
</Base>
</ComponentLayout>
<script>
import { z } from "zod";
src/pages/forms1.astro
+3 -3
View File
@@ -1,10 +1,10 @@
---
import Form from "../components/Form.astro";
import Field from "../components/Field.astro";
import Base from "../layouts/Base.astro";
import ComponentLayout from "../layouts/ComponentLayout.astro";
---
<Base class="wr:p-4">
<ComponentLayout class="wr:p-4">
<Form
title="Account Settings"
description="Basic profile & auth fields. * indicates required."
@@ -74,7 +74,7 @@ import Base from "../layouts/Base.astro";
class="wr:sm:col-span-2"
/>
</Form>
</Base>
</ComponentLayout>
<script>
import { z } from "zod";
src/pages/forms2.astro
+3 -3
View File
@@ -2,10 +2,10 @@
import Field from "../components/Field.astro";
import Form from "../components/Form.astro";
import MultiSelect from "../components/MultiSelect.astro";
import Base from "../layouts/Base.astro";
import ComponentLayout from "../layouts/ComponentLayout.astro";
---
<Base class="wr:p-4">
<ComponentLayout class="wr:p-4">
<Form
title="Job Application"
description="Tell us about yourself. Fields marked * are required."
@@ -155,7 +155,7 @@ import Base from "../layouts/Base.astro";
class="wr:sm:col-span-2"
/>
</Form>
</Base>
</ComponentLayout>
<script>
import { z } from "zod";
src/pages/icons.astro
+3 -3
View File
@@ -1,8 +1,8 @@
---
import { Icon } from "astro-icon/components";
import Base from "../layouts/Base.astro";
import ComponentLayout from "../layouts/ComponentLayout.astro";
---
<Base>
<ComponentLayout>
<Icon name="lets-icons:chart-alt-duotone-line" size="xl" />
</Base>
</ComponentLayout>
src/pages/theme.astro
+11 -11
View File
@@ -1,23 +1,23 @@
---
import ThemeSwitcher from "../components/ThemeSwitcher.astro";
import ColorSwitcher from "../components/ColorSwitcher.astro";
import Base from "../layouts/Base.astro";
import ThemeSwitcher from "../components/ThemeSwitcher.astro";
import ComponentLayout from "../layouts/ComponentLayout.astro";
---
<Base>
<ComponentLayout>
<div
class="wrnx wr:flex wr:items-center wr:flex-col wr:gap-4 wr:w-full wr:h-screen"
>
<!-- Icon-only trigger (default) -->
<ThemeSwitcher
darkBgClass={["wr:dark:bg-neutral-500", "wr:text-white"]}
lightBgClass={["wr:bg-white", "wr:text-black"]}
/>
<ColorSwitcher ui="menu" trigger="dot" />
<div class="wr:flex wr:items-center wr:gap-3 wr:pb-3 wr:p-4">
<ThemeSwitcher
darkBgClass={["wr:dark:bg-neutral-500", "wr:text-white"]}
lightBgClass={["wr:bg-white", "wr:text-black"]}
/>
<ColorSwitcher ui="menu" />
</div>
<div>
<h1 class="wr:text-primary">Test Heading</h1>
</div>
</div>
</Base>
</ComponentLayout>
src/styles/global.css
+10
View File
@@ -33,4 +33,14 @@
--color-danger-foreground: hsl(var(--danger-foreground));
--color-neutral: hsl(var(--neutral));
--color-neutral-foreground: hsl(var(--neutral-foreground));
--color-background: hsl(var(--background));
--color-foreground: hsl(var(--foreground));
--color-card: hsl(var(--card));
--color-card-foreground: hsl(var(--card-foreground));
--color-popover: hsl(var(--popover));
--color-popover-foreground: hsl(var(--popover-foreground));
--color-muted: hsl(var(--muted));
--color-muted-foreground: hsl(var(--muted-foreground));
--color-border: hsl(var(--border));
--color-input: hsl(var(--input));
}
src/styles/style.css
+220
View File
@@ -20,6 +20,17 @@
--neutral-foreground: 210 40% 98%;
--link: 221 83% 53%;
--link-visited: 262 83% 58%;
--background: 0 0% 100%;
--foreground: 222 47% 11%;
--card: 0 0% 100%;
--card-foreground: 222 47% 11%;
--popover: 0 0% 100%;
--popover-foreground: 222 47% 11%;
--muted: 220 14% 96%;
--muted-foreground: 215 16% 46%;
--border: 214 31% 91%;
--input: 214 31% 91%;
--ring: 221 83% 53%;
}
/* ---------- Brand palettes (swap only role colors) ---------- */
@@ -210,4 +221,213 @@
--danger-foreground: 0 0% 100%;
--neutral: 215 16% 47%;
--neutral-foreground: 210 40% 98%;
}
[data-color="neutral"] {
--primary: 215 16% 47%;
--primary-foreground: 210 40% 98%;
--secondary: 220 14% 34%;
--secondary-foreground: 210 40% 98%;
--tertiary: 220 10% 60%;
--tertiary-foreground: 222 47% 10%;
--accent: 216 12% 52%;
--accent-foreground: 210 40% 98%;
--info: 201 96% 48%;
--success: 142 71% 45%;
--success-foreground: 144 60% 98%;
--warning: 38 92% 50%;
--warning-foreground: 26 83% 15%;
--danger: 0 84% 60%;
--danger-foreground: 0 0% 100%;
--neutral: 215 16% 47%;
--neutral-foreground: 210 40% 98%;
}
[data-color="gray"] {
--primary: 220 9% 46%;
--primary-foreground: 210 40% 98%;
--secondary: 220 7% 38%;
--secondary-foreground: 210 40% 98%;
--tertiary: 220 10% 60%;
--tertiary-foreground: 222 47% 10%;
--accent: 220 12% 52%;
--accent-foreground: 210 40% 98%;
--info: 201 96% 48%;
--success: 142 71% 45%;
--success-foreground: 144 60% 98%;
--warning: 38 92% 50%;
--warning-foreground: 26 83% 15%;
--danger: 0 84% 60%;
--danger-foreground: 0 0% 100%;
--neutral: 220 10% 40%;
--neutral-foreground: 210 40% 98%;
}
/* =======================
Dark surfaces baseline
======================= */
:root.dark {
color-scheme: dark;
--background: 222 14% 12%;
--foreground: 210 40% 96%;
--card: 222 12% 14%;
--card-foreground: 210 40% 96%;
--popover: 222 12% 14%;
--popover-foreground: 210 40% 96%;
--muted: 220 10% 18%;
--muted-foreground: 215 20% 72%;
--border: 220 12% 22%;
--input: 220 12% 22%;
--ring: 217 91% 60%;
}
/* =======================
Dark platters (surface-only)
======================= */
/* gray */
:root.dark[data-color="ocean"] {
--background: 201 20% 13%;
--foreground: 210 40% 96%;
--card: 201 18% 15%;
--card-foreground: 210 40% 96%;
--popover: 201 18% 15%;
--popover-foreground: 210 40% 96%;
--muted: 201 16% 20%;
--muted-foreground: 200 20% 78%;
--border: 201 16% 24%;
--input: 201 16% 24%;
}
:root.dark[data-color="forest"] {
--background: 150 16% 12%;
--foreground: 160 30% 96%;
--card: 150 14% 14%;
--card-foreground: 160 30% 96%;
--popover: 150 14% 14%;
--popover-foreground: 160 30% 96%;
--muted: 150 12% 19%;
--muted-foreground: 150 16% 78%;
--border: 150 12% 23%;
--input: 150 12% 23%;
}
:root.dark[data-color="sunset"] {
--background: 18 20% 12%;
--foreground: 24 30% 96%;
--card: 18 18% 14%;
--card-foreground: 24 30% 96%;
--popover: 18 18% 14%;
--popover-foreground: 24 30% 96%;
--muted: 18 16% 20%;
--muted-foreground: 20 20% 80%;
--border: 18 16% 24%;
--input: 18 16% 24%;
}
:root.dark[data-color="grape"] {
--background: 275 22% 13%;
--foreground: 0 0% 98%;
--card: 275 20% 15%;
--card-foreground: 0 0% 98%;
--popover: 275 20% 15%;
--popover-foreground: 0 0% 98%;
--muted: 275 18% 21%;
--muted-foreground: 275 14% 78%;
--border: 275 16% 25%;
--input: 275 16% 25%;
}
:root.dark[data-color="slate"] {
--background: 220 12% 12%;
--foreground: 210 40% 96%;
--card: 220 11% 14%;
--card-foreground: 210 40% 96%;
--popover: 220 11% 14%;
--popover-foreground: 210 40% 96%;
--muted: 220 8% 20%;
--muted-foreground: 215 18% 74%;
--border: 220 10% 24%;
--input: 220 10% 24%;
}
:root.dark[data-color="indigo"] {
--background: 238 22% 14%;
--foreground: 210 40% 96%;
--card: 238 20% 16%;
--card-foreground: 210 40% 96%;
--popover: 238 20% 16%;
--popover-foreground: 210 40% 96%;
--muted: 238 18% 22%;
--muted-foreground: 220 25% 80%;
--border: 238 18% 26%;
--input: 238 18% 26%;
}
/* Aliases for the remaining brands */
:root.dark[data-color="mint"] {
/* use forest surfaces */
--background: 150 16% 12%;
--foreground: 160 30% 96%;
--card: 150 14% 14%;
--card-foreground: 160 30% 96%;
--popover: 150 14% 14%;
--popover-foreground: 160 30% 96%;
--muted: 150 12% 19%;
--muted-foreground: 150 16% 78%;
--border: 150 12% 23%;
--input: 150 12% 23%;
}
:root.dark[data-color="amber"] {
/* use sunset surfaces */
--background: 18 20% 12%;
--foreground: 24 30% 96%;
--card: 18 18% 14%;
--card-foreground: 24 30% 96%;
--popover: 18 18% 14%;
--popover-foreground: 24 30% 96%;
--muted: 18 16% 20%;
--muted-foreground: 20 20% 80%;
--border: 18 16% 24%;
--input: 18 16% 24%;
}
:root.dark[data-color="crimson"] {
/* use gray baseline surfaces */
--background: 222 14% 12%;
--foreground: 210 40% 96%;
--card: 222 12% 14%;
--card-foreground: 210 40% 96%;
--popover: 222 12% 14%;
--popover-foreground: 210 40% 96%;
--muted: 220 10% 18%;
--muted-foreground: 215 20% 72%;
--border: 220 12% 22%;
--input: 220 12% 22%;
}
:root.dark[data-color="neutral"] {
--background: 220 12% 12%;
--foreground: 210 40% 96%;
--card: 220 11% 14%;
--card-foreground: 210 40% 96%;
--popover: 220 11% 14%;
--popover-foreground: 210 40% 96%;
--muted: 220 8% 20%;
--muted-foreground: 215 18% 74%;
--border: 220 10% 24%;
--input: 220 10% 24%;
}
:root.dark[data-color="gray"] {
--background: 220 10% 12%;
--foreground: 210 40% 96%;
--card: 220 9% 14%;
--card-foreground: 210 40% 96%;
--popover: 220 9% 14%;
--popover-foreground: 210 40% 96%;
--muted: 220 8% 19%;
--muted-foreground: 215 18% 74%;
--border: 220 9% 23%;
--input: 220 9% 23%;
}