@jonmilner/ui 0.6.1 → 0.8.0

package/dist/Badge/Badge.css.mjs

@@ -12,11 +12,16 @@ var t = "_1ixfil10", n = e({
 			accent: "_1ixfil13",
 			success: "_1ixfil14",
 			warning: "_1ixfil15",
-			danger: "_1ixfil16"
+			danger: "_1ixfil16",
+			done: "_1ixfil17"
+		},
+		subtle: {
+			true: "_1ixfil18",
+			false: "_1ixfil19"
 		},
 		size: {
-			sm: "_1ixfil17",
-			med: "_1ixfil18"
+			sm: "_1ixfil1a",
+			med: "_1ixfil1b"
 		}
 	},
 	defaultVariants: {},

package/dist/Badge/index.d.mts

@@ -1,11 +1,13 @@
 import { OmitEach } from "../types.mjs";
 import { StyleProps } from "../Box/index.mjs";
+import { Tone } from "../styles/subtle-fills.mjs";
 import { ComponentPropsWithRef } from "react";
 //#region src/Badge/index.d.ts
 export type BadgeOwnProps = {
   size?: "sm" | "med";
-  variant?: "neutral" | "accent" | "success" | "warning" | "danger";
+  subtle?: boolean;
+  variant?: Tone;
 };
 export type BadgeProps = StyleProps & BadgeOwnProps & OmitEach<ComponentPropsWithRef<"span">, keyof StyleProps | keyof BadgeOwnProps>;
-export declare function Badge({ variant, size, display, paddingInline, paddingBlock, borderRadius, backgroundColor, color, className, children, ...props }: BadgeProps): import("react").JSX.Element | null;
+export declare function Badge({ variant, subtle, size, display, paddingInline, paddingBlock, borderRadius, backgroundColor, color, className, children, ...props }: BadgeProps): import("react").JSX.Element | null;
 //#endregion

package/dist/Badge/index.mjs

@@ -1,10 +1,11 @@
 import { join as e } from "../styles/join.mjs";
 import { Box as t } from "../Box/index.mjs";
 import { Text as n } from "../Text/index.mjs";
-import { badge as r, root as i } from "./Badge.css.mjs";
-import { jsx as a } from "react/jsx-runtime";
+import { subtleFills as r } from "../styles/subtle-fills.mjs";
+import { badge as i, root as a } from "./Badge.css.mjs";
+import { jsx as o } from "react/jsx-runtime";
 //#region src/Badge/index.tsx
-var o = {
+var s = {
 	neutral: {
 		backgroundColor: "bgMuted",
 		color: "fgMuted"
@@ -24,8 +25,12 @@ var o = {
 	danger: {
 		backgroundColor: "danger",
 		color: "dangerFg"
+	},
+	done: {
+		backgroundColor: "done",
+		color: "doneFg"
 	}
-}, s = {
+}, c = {
 	sm: {
 		paddingInline: "6",
 		paddingBlock: "4"
@@ -35,29 +40,30 @@ var o = {
 		paddingBlock: "6"
 	}
 };
-function c({ variant: c = "neutral", size: l = "med", display: u = "inline-block", paddingInline: d = s[l].paddingInline, paddingBlock: f = s[l].paddingBlock, borderRadius: p = "sm", backgroundColor: m = o[c].backgroundColor, color: h = o[c].color, className: g, children: _, ...v }) {
-	return _ == null || typeof _ == "boolean" || _ === "" ? null : /* @__PURE__ */ a(t, {
-		...v,
+function l({ variant: l = "neutral", subtle: u = !1, size: d = "med", display: f = "inline-block", paddingInline: p = c[d].paddingInline, paddingBlock: m = c[d].paddingBlock, borderRadius: h = "sm", backgroundColor: g = (u ? r : s)[l].backgroundColor, color: _ = (u ? r : s)[l].color, className: v, children: y, ...b }) {
+	return y == null || typeof y == "boolean" || y === "" ? null : /* @__PURE__ */ o(t, {
+		...b,
 		as: "span",
-		backgroundColor: m,
-		borderRadius: p,
-		className: e(i, r({
-			variant: c,
-			size: l
-		}), g),
-		color: h,
-		display: u,
-		paddingBlock: f,
-		paddingInline: d,
-		children: /* @__PURE__ */ a(n, {
+		backgroundColor: g,
+		borderRadius: h,
+		className: e(a, i({
+			variant: l,
+			subtle: u,
+			size: d
+		}), v),
+		color: _,
+		display: f,
+		paddingBlock: m,
+		paddingInline: p,
+		children: /* @__PURE__ */ o(n, {
 			as: "span",
 			font: "label",
-			size: l,
+			size: d,
 			weight: "medium",
 			wrap: "nowrap",
-			children: _
+			children: y
 		})
 	});
 }
 //#endregion
-export { c as Badge };
+export { l as Badge };

package/dist/Button/Button.css

@@ -1,2 +1,2 @@
 @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
-@keyframes hkhd8a{to{opacity:.25}}@layer components.button{.hkhd80{border-width:var(--space-1);border-style:solid}.hkhd80[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent));box-shadow:inset 0 0 0 var(--space-1) currentColor}.hkhd82{border-color:#0000}.hkhd83{border-color:var(--color-border-strong)}.hkhd84{border-color:#0000}.hkhd88{justify-items:center}.hkhd89{grid-area:1/1}.hkhd80[aria-busy=true] .hkhd89{opacity:0}.hkhd8b{grid-area:1/1}.hkhd8c{animation-name:hkhd8a;animation-duration:var(--duration-slow);animation-timing-function:var(--easing-standard);animation-iteration-count:infinite;animation-direction:alternate}.hkhd8c:nth-child(2){animation-delay:calc(var(--duration-slow) / 3)}.hkhd8c:nth-child(3){animation-delay:calc(var(--duration-slow) * 2 / 3)}@media (hover:hover){.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){.hkhd80{forced-color-adjust:none}.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:none}.hkhd80[aria-disabled=true]{color:graytext;border-color:graytext}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:none}.hkhd84{--color-danger:var(--color-accent);--color-danger-fg:var(--color-accent-fg)}}@media (prefers-reduced-motion:reduce){.hkhd8c{animation-name:none}}}
+@keyframes hkhd8a{to{opacity:.25}}@layer components.button{.hkhd80{border-width:var(--space-1);border-style:solid}.hkhd80[aria-disabled=true]{background-color:var(--color-bg-muted);border-color:var(--color-border-strong);color:var(--color-fg-muted);border-style:dashed}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent));box-shadow:inset 0 0 0 var(--space-1) currentColor}.hkhd82{border-color:#0000}.hkhd83{border-color:var(--color-border-strong)}.hkhd84{border-color:#0000}.hkhd88{justify-items:center}.hkhd89{grid-area:1/1}.hkhd80[aria-busy=true] .hkhd89{opacity:0}.hkhd8b{grid-area:1/1}.hkhd8c{animation-name:hkhd8a;animation-duration:var(--duration-slow);animation-timing-function:var(--easing-standard);animation-iteration-count:infinite;animation-direction:alternate}.hkhd8c:nth-child(2){animation-delay:calc(var(--duration-slow) / 3)}.hkhd8c:nth-child(3){animation-delay:calc(var(--duration-slow) * 2 / 3)}@media (hover:hover){.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:linear-gradient(color-mix(in srgb, var(--color-fg) 15%, transparent), color-mix(in srgb, var(--color-fg) 15%, transparent))}}@media (forced-colors:active){.hkhd80{forced-color-adjust:none}.hkhd80:not([aria-disabled=true]):not([aria-busy=true]):hover{background-image:none}.hkhd80[aria-disabled=true]{color:graytext;border-color:graytext}.hkhd80:not([aria-disabled=true]):not([aria-busy=true])[aria-expanded=true]{background-image:none}.hkhd84{--color-danger:var(--color-accent-fill);--color-danger-fg:var(--color-accent-fill-fg)}}@media (prefers-reduced-motion:reduce){.hkhd8c{animation-name:none}}}

package/dist/SearchField/SearchField.css

@@ -1,2 +1,2 @@
 @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
-@layer components.search-field{._1cj8r6g0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._1cj8r6g1{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);grid-area:1/1;padding-block:0}._1cj8r6g1::placeholder{color:var(--color-fg-muted);opacity:1}._1cj8r6g1:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1cj8r6g1:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._1cj8r6g1[aria-invalid=true]{border-color:var(--color-danger)}._1cj8r6g1::-webkit-search-cancel-button{appearance:none}._1cj8r6g1::-webkit-search-decoration{appearance:none}._1cj8r6g2{block-size:var(--size-sm);padding-inline-start:calc(var(--space-8) + var(--space-8) + var(--font-size-sm));padding-inline-end:var(--size-sm)}._1cj8r6g3{block-size:var(--size-med);padding-inline-start:calc(var(--space-12) + var(--space-8) + var(--font-size-med));padding-inline-end:var(--size-med)}._1cj8r6g4{block-size:var(--size-lg);padding-inline-start:calc(var(--space-16) + var(--space-8) + var(--font-size-lg));padding-inline-end:var(--size-lg)}._1cj8r6g5{pointer-events:none;color:var(--color-fg-muted);grid-area:1/1;justify-self:start}._1cj8r6g6{margin-inline-start:var(--space-8)}._1cj8r6g7{margin-inline-start:var(--space-12)}._1cj8r6g8{margin-inline-start:var(--space-16)}._1cj8r6g9{border-color:#0000;grid-area:1/1;justify-self:end;margin-inline-end:var(--space-4)}@media (forced-colors:active){._1cj8r6g1:disabled{color:graytext;border-color:graytext}}}
+@layer components.search-field{._1cj8r6g0{clip-path:inset(50%);white-space:nowrap;border:0;block-size:1px;inline-size:1px;margin:0;padding:0;position:absolute;overflow:hidden}._1cj8r6g2{grid-template-columns:var(--space-8) auto minmax(0, 1fr) auto var(--space-4)}._1cj8r6g3{grid-template-columns:var(--space-12) auto minmax(0, 1fr) auto var(--space-4)}._1cj8r6g4{grid-template-columns:var(--space-16) auto minmax(0, 1fr) auto var(--space-4)}._1cj8r6g5{appearance:none;border-width:var(--space-1);border-style:solid;border-color:var(--color-border-strong);border-radius:var(--radius-med);background-color:var(--color-bg);inline-size:100%;min-inline-size:0;color:var(--color-fg);grid-area:1/1/auto/-1;padding-block:0}._1cj8r6g5::placeholder{color:var(--color-fg-muted);opacity:1}._1cj8r6g5:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}._1cj8r6g5:disabled{background-color:var(--color-bg-muted);color:var(--color-fg-muted);cursor:not-allowed;border-style:dashed}._1cj8r6g5[aria-invalid=true]{border-color:var(--color-danger)}._1cj8r6g5::-webkit-search-cancel-button{appearance:none}._1cj8r6g5::-webkit-search-decoration{appearance:none}._1cj8r6g6{block-size:var(--size-sm);padding-inline-start:calc(var(--space-8) + var(--space-8) + var(--font-size-sm));padding-inline-end:var(--size-sm)}._1cj8r6g7{block-size:var(--size-med);padding-inline-start:calc(var(--space-12) + var(--space-8) + var(--font-size-med));padding-inline-end:var(--size-med)}._1cj8r6g8{block-size:var(--size-lg);padding-inline-start:calc(var(--space-16) + var(--space-8) + var(--font-size-lg));padding-inline-end:var(--size-lg)}._1cj8r6g9{pointer-events:none;color:var(--color-fg-muted);grid-area:1/2}._1cj8r6ga{border-color:#0000;grid-area:1/4}@media (forced-colors:active){._1cj8r6g5:disabled{color:graytext;border-color:graytext}}}

package/dist/SearchField/SearchField.css.mjs

@@ -22,6 +22,6 @@ var t = "_1cj8r6g0", n = e({
 	} },
 	defaultVariants: {},
 	compoundVariants: []
-}), i = "_1cj8r6g9";
+}), i = "_1cj8r6g9", a = "_1cj8r6ga";
 //#endregion
-export { i as clear, t as hiddenLabel, r as icon, n as input };
+export { a as clear, t as hiddenLabel, i as icon, r as input, n as root };

package/dist/SearchField/client.mjs

@@ -4,12 +4,12 @@ import { Text as t } from "../Text/index.mjs";
 import { IconButton as n } from "../IconButton/index.mjs";
 import { SearchIcon as r } from "../icons/SearchIcon.mjs";
 import { XIcon as i } from "../icons/XIcon.mjs";
-import { icon as a, input as o } from "./SearchField.css.mjs";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { useRef as l, useState as u } from "react";
-import { Input as d } from "@base-ui/react/input";
+import { icon as a, input as o, root as s } from "./SearchField.css.mjs";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useRef as u, useState as d } from "react";
+import { Input as f } from "@base-ui/react/input";
 //#region src/SearchField/client.tsx
-var f = {
+var p = {
 	sm: {
 		size: "sm",
 		square: "xs"
@@ -23,52 +23,53 @@ var f = {
 		square: "med"
 	}
 };
-function p({ value: p, defaultValue: m, onValueChange: h, placeholder: g, size: _, disabled: v, required: y, name: b, clearLabel: x, inputProps: { ref: S, onKeyDown: C, ...w } = {} }) {
-	let T = l(null), [E, D] = u(m), O = p ?? E, k = (e) => {
-		p === void 0 && D(e), h?.(e);
-	}, A = O !== "" && (p === void 0 || h !== void 0), j = (e) => {
-		if (C?.(e), e.defaultPrevented) return;
+function m({ value: m, defaultValue: h, onValueChange: g, placeholder: _, size: v, disabled: y, required: b, name: x, clearLabel: S, inputProps: { ref: C, onKeyDown: w, ...T } = {} }) {
+	let E = u(null), [D, O] = d(h), k = m ?? D, A = (e) => {
+		m === void 0 && O(e), g?.(e);
+	}, j = k !== "" && (m === void 0 || g !== void 0), M = (e) => {
+		if (w?.(e), e.defaultPrevented) return;
 		let t = e.nativeEvent.isComposing || e.keyCode === 229;
-		e.key === "Escape" && A && !t && (e.preventDefault(), e.stopPropagation(), k(""));
-	}, M = f[_];
-	return /* @__PURE__ */ c(e, {
+		e.key === "Escape" && j && !t && (e.preventDefault(), e.stopPropagation(), A(""));
+	}, N = p[v];
+	return /* @__PURE__ */ l(e, {
 		alignItems: "center",
+		className: s({ size: v }),
 		display: "grid",
 		children: [
-			/* @__PURE__ */ s(d, {
-				...w,
-				name: b,
-				onKeyDown: j,
-				onValueChange: k,
-				placeholder: g,
-				ref: S,
-				render: /* @__PURE__ */ s(t, {
+			/* @__PURE__ */ c(f, {
+				...T,
+				name: x,
+				onKeyDown: M,
+				onValueChange: A,
+				placeholder: _,
+				ref: C,
+				render: /* @__PURE__ */ c(t, {
 					as: "input",
-					className: o({ size: _ }),
-					ref: T,
-					size: _
+					className: o({ size: v }),
+					ref: E,
+					size: v
 				}),
-				required: y,
+				required: b,
 				type: "search",
-				value: O
+				value: k
 			}),
-			/* @__PURE__ */ s(r, {
-				className: a({ size: _ }),
-				size: _
+			/* @__PURE__ */ c(r, {
+				className: a,
+				size: v
 			}),
-			O !== "" && !v && /* @__PURE__ */ s(n, {
-				className: "_1cj8r6g9",
+			k !== "" && !y && /* @__PURE__ */ c(n, {
+				className: "_1cj8r6ga",
 				icon: i,
-				label: x,
-				minBlockSize: M.square,
-				minInlineSize: M.square,
+				label: S,
+				minBlockSize: N.square,
+				minInlineSize: N.square,
 				onClick: () => {
-					k(""), T.current?.focus();
+					A(""), E.current?.focus();
 				},
-				size: M.size
+				size: N.size
 			})
 		]
 	});
 }
 //#endregion
-export { p as SearchFieldControl };
+export { m as SearchFieldControl };

package/dist/Tabs/Tabs.css

@@ -1,2 +1,2 @@
 @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
-@layer components.tabs{.xowpd00{border-block-end:var(--space-1) solid var(--color-border)}.xowpd00[aria-orientation=vertical]{border-block-end:none;border-inline-end:var(--space-1) solid var(--color-border);flex-direction:column}.xowpd01{transition:color var(--duration-fast) var(--easing-standard)}.xowpd01[aria-selected=true]{color:var(--color-fg)}.xowpd01[aria-disabled=true]{opacity:.5}.xowpd02{border-block-end:var(--space-2) solid var(--color-accent);opacity:0;scale:calc(1 - var(--scale-lg)) 1;transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-standard);pointer-events:none;inset-block-end:calc(-1 * var(--space-1));inset-inline:0}[aria-orientation=vertical]>[role=tab]>.xowpd02{inset-inline:auto;border-block-end:none;border-inline-end:var(--space-2) solid var(--color-accent);scale:1 calc(1 - var(--scale-lg));inset-block:0;inset-inline-end:calc(-1 * var(--space-1))}[aria-selected=true]>.xowpd02{opacity:1;scale:1}.xowpd03:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.xowpd03[data-orientation=vertical]{flex-basis:0}@media (hover:hover){.xowpd01:not([aria-disabled=true]):hover{color:var(--color-fg)}}@media (forced-colors:active){.xowpd01[aria-disabled=true]{color:graytext}.xowpd02{border-color:highlight}}}
+@layer components.tabs{.xowpd00{border-block-end:var(--space-1) solid var(--color-border)}.xowpd00[aria-orientation=vertical]{border-block-end:none;border-inline-end:var(--space-1) solid var(--color-border);flex-direction:column}.xowpd01{transition:color var(--duration-fast) var(--easing-standard)}.xowpd01[aria-selected=true]{color:var(--color-fg)}.xowpd01[aria-disabled=true]{opacity:.5}.xowpd02{border-block-end:var(--space-2) solid var(--color-accent);opacity:0;scale:calc(1 - var(--scale-lg)) 1;transition:opacity var(--duration-med) var(--easing-standard), scale var(--duration-med) var(--easing-standard);pointer-events:none;inset-block-end:calc(-1 * var(--space-1));inset-inline:0}[data-orientation=vertical]>.xowpd02{inset-inline:auto;border-block-end:none;border-inline-end:var(--space-2) solid var(--color-accent);scale:1 calc(1 - var(--scale-lg));inset-block:0;inset-inline-end:calc(-1 * var(--space-1))}[aria-selected=true]>.xowpd02{opacity:1;scale:1}.xowpd03:focus-visible{outline:var(--space-2) solid var(--color-focus);outline-offset:var(--space-2)}.xowpd03[data-orientation=vertical]{flex-basis:0}@media (hover:hover){.xowpd01:not([aria-disabled=true]):hover{color:var(--color-fg)}}@media (forced-colors:active){.xowpd01[aria-disabled=true]{color:graytext}.xowpd02{border-color:highlight}}}

package/dist/Tag/Tag.css.mjs

@@ -6,10 +6,20 @@ import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/Tag/Tag.css.ts
 var t = "_1jsyd8s0", n = "_1jsyd8s1", r = "_1jsyd8s2", i = "_1jsyd8s3", a = e({
 	defaultClassName: "_1jsyd8s4",
-	variantClassNames: { size: {
-		sm: "_1jsyd8s5",
-		med: "_1jsyd8s6"
-	} },
+	variantClassNames: {
+		variant: {
+			neutral: "_1jsyd8s5",
+			accent: "_1jsyd8s6",
+			success: "_1jsyd8s7",
+			warning: "_1jsyd8s8",
+			danger: "_1jsyd8s9",
+			done: "_1jsyd8sa"
+		},
+		size: {
+			sm: "_1jsyd8sb",
+			med: "_1jsyd8sc"
+		}
+	},
 	defaultVariants: {},
 	compoundVariants: []
 });

package/dist/Tag/index.d.mts

@@ -1,5 +1,6 @@
 import { OmitEach } from "../types.mjs";
 import { StyleProps } from "../Box/index.mjs";
+import { Tone } from "../styles/subtle-fills.mjs";
 import { ComponentPropsWithRef } from "react";
 //#region src/Tag/index.d.ts
 export type TagOwnProps = {
@@ -7,7 +8,8 @@ export type TagOwnProps = {
   onRemove?: () => void;
   removeLabel?: string;
   size?: "sm" | "med";
+  variant?: Tone;
 };
 export type TagProps = StyleProps & TagOwnProps & OmitEach<ComponentPropsWithRef<"span">, keyof StyleProps | keyof TagOwnProps>;
-export declare function Tag({ size, href, onRemove, removeLabel, display, alignItems, gap, minBlockSize, paddingInlineStart, paddingInlineEnd, borderRadius, backgroundColor, color, maxInlineSize, className, style, children, ...props }: TagProps): import("react").JSX.Element | null;
+export declare function Tag({ variant, size, href, onRemove, removeLabel, display, alignItems, gap, minBlockSize, paddingInlineStart, paddingInlineEnd, borderRadius, backgroundColor, color, maxInlineSize, className, style, children, ...props }: TagProps): import("react").JSX.Element | null;
 //#endregion

package/dist/Tag/index.mjs

@@ -2,29 +2,30 @@ import { join as e } from "../styles/join.mjs";
 import { Box as t } from "../Box/index.mjs";
 import { Clickable as n } from "../Clickable/index.mjs";
 import { Text as r } from "../Text/index.mjs";
-import { XIcon as i } from "../icons/XIcon.mjs";
-import { size as a } from "../tokens/scales.mjs";
-import { label as o, link as s, root as c, tag as l } from "./Tag.css.mjs";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { subtleFills as i } from "../styles/subtle-fills.mjs";
+import { XIcon as a } from "../icons/XIcon.mjs";
+import { size as o } from "../tokens/scales.mjs";
+import { label as s, link as c, root as l, tag as u } from "./Tag.css.mjs";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/Tag/index.tsx
-function f(e) {
+function p(e) {
 	if (typeof e == "string" || typeof e == "number") return String(e);
 	if (!Array.isArray(e)) return;
-	let t = e.map(f);
+	let t = e.map(p);
 	return t.every((e) => e !== void 0) ? t.join("") : void 0;
 }
-var p = /* @__PURE__ */ new Set([...Object.keys(a), "full"]), m = /* @__PURE__ */ new Set([
+var m = /* @__PURE__ */ new Set([...Object.keys(o), "full"]), h = /* @__PURE__ */ new Set([
 	"",
 	"none",
 	"auto",
 	"initial",
 	"unset"
 ]);
-function h(e, t) {
+function g(e, t) {
 	let n = t?.maxInlineSize ?? t?.maxWidth;
-	return n == null ? typeof e != "object" || !e ? p.has(e) : e.base != null && Object.values(e).every((e) => e == null || p.has(e)) : !m.has(String(n).trim()) && !/-content\b/.test(String(n));
+	return n == null ? typeof e != "object" || !e ? m.has(e) : e.base != null && Object.values(e).every((e) => e == null || m.has(e)) : !h.has(String(n).trim()) && !/-content\b/.test(String(n));
 }
-var g = {
+var _ = {
 	sm: {
 		paddingInlineStart: "6",
 		paddingInlineEnd: "6"
@@ -34,50 +35,53 @@ var g = {
 		paddingInlineEnd: "8"
 	}
 };
-function _({ size: a = "med", href: p, onRemove: m, removeLabel: _, display: v = "inline-flex", alignItems: y = "center", gap: b = "2", minBlockSize: x = "xs", paddingInlineStart: S = g[a].paddingInlineStart, paddingInlineEnd: C = m ? "2" : g[a].paddingInlineEnd, borderRadius: w = "lg", backgroundColor: T = "bgMuted", color: E = "fg", maxInlineSize: D, className: O, style: k, children: A, ...j }) {
-	if (A == null || typeof A == "boolean" || A === "" || f(A) === "") return null;
-	let M = h(D, k), N = /* @__PURE__ */ u(r, {
+function v({ variant: o = "neutral", size: m = "med", href: h, onRemove: v, removeLabel: y, display: b = "inline-flex", alignItems: x = "center", gap: S = "2", minBlockSize: C = "xs", paddingInlineStart: w = _[m].paddingInlineStart, paddingInlineEnd: T = v ? "2" : _[m].paddingInlineEnd, borderRadius: E = "lg", backgroundColor: D = i[o].backgroundColor, color: O = i[o].color, maxInlineSize: k, className: A, style: j, children: M, ...N }) {
+	if (M == null || typeof M == "boolean" || M === "" || p(M) === "") return null;
+	let P = g(k, j), F = /* @__PURE__ */ d(r, {
 		as: "span",
-		className: o,
+		className: s,
 		font: "label",
-		paddingBlock: M ? void 0 : "4",
-		size: a,
-		truncate: M,
+		paddingBlock: P ? void 0 : "4",
+		size: m,
+		truncate: P,
 		weight: "medium",
-		children: A
-	}), P = f(A), F = _ ?? (P === void 0 ? void 0 : `Remove ${P}`);
-	return /* @__PURE__ */ d(t, {
-		...j,
-		alignItems: y,
+		children: M
+	}), I = p(M), L = y ?? (I === void 0 ? void 0 : `Remove ${I}`);
+	return /* @__PURE__ */ f(t, {
+		...N,
+		alignItems: x,
 		as: "span",
-		backgroundColor: T,
-		borderRadius: w,
-		className: e(c, l({ size: a }), O),
-		color: E,
+		backgroundColor: D,
+		borderRadius: E,
+		className: e(l, u({
+			variant: o,
+			size: m
+		}), A),
+		color: O,
 		"data-text-reveal": "",
-		display: v,
-		gap: b,
-		maxInlineSize: D,
-		minBlockSize: x,
-		paddingInlineEnd: C,
-		paddingInlineStart: S,
-		style: k,
-		children: [p ? /* @__PURE__ */ u(n, {
+		display: b,
+		gap: S,
+		maxInlineSize: k,
+		minBlockSize: C,
+		paddingInlineEnd: T,
+		paddingInlineStart: w,
+		style: j,
+		children: [h ? /* @__PURE__ */ d(n, {
 			as: "a",
-			className: s,
-			href: p,
+			className: c,
+			href: h,
 			overflow: "hidden",
-			children: N
-		}) : N, m && /* @__PURE__ */ u(n, {
+			children: F
+		}) : F, v && /* @__PURE__ */ d(n, {
 			alignSelf: "start",
-			"aria-label": F ?? "Remove",
+			"aria-label": L ?? "Remove",
 			borderRadius: "full",
 			className: "_1jsyd8s3",
 			flexShrink: 0,
-			onClick: m,
-			children: /* @__PURE__ */ u(i, { size: a })
+			onClick: v,
+			children: /* @__PURE__ */ d(a, { size: m })
 		})]
 	});
 }
 //#endregion
-export { _ as Tag };
+export { v as Tag };

package/dist/base.css

@@ -1,6 +1,6 @@
 @layer tokens, reset, atoms, components.box, components.checkbox, components.clickable, components.icon, components.icon-button, components.inline, components.stack, components.text, components.avatar, components.badge, components.button, components.chip, components.field, components.color-field, components.heading, components.dialog, components.alert-dialog, components.menu, components.multiselect, components.search-field, components.tabs, components.tag, components.text-field, components.toast, components.visually-hidden;
 @layer tokens{:root{--space-0:0rem;--space-1:.0625rem;--space-2:.125rem;--space-4:.25rem;--space-6:.375rem;--space-8:.5rem;--space-12:.75rem;--space-16:1rem;--space-20:1.25rem;--space-24:1.5rem;--space-32:2rem;--space-40:2.5rem;--space-48:3rem;--space-64:4rem;--space-80:5rem;--space-96:6rem;--size-xs:1.5rem;--size-sm:2rem;--size-med:2.5rem;--size-lg:3rem;--size-xl:3.5rem;--container-prose:40rem;--container-page:64rem;--container-wide:80rem;--radius-none:0;--radius-sm:.25rem;--radius-med:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-med:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-sm:1.25;--line-height-med:1.5;--line-height-lg:1.75;--z-index-base:0;--z-index-raised:1;--z-index-dropdown:1000;--z-index-sticky:1100;--z-index-overlay:1200;--z-index-modal:1300;--z-index-popover:1400;--z-index-toast:1500;--z-index-tooltip:1600;--duration-fast:.12s;--duration-med:.2s;--duration-slow:.32s;--easing-standard:cubic-bezier(.2, 0, 0, 1);--easing-enter:cubic-bezier(0, 0, 0, 1);--easing-exit:cubic-bezier(.3, 0, 1, 1);--distance-sm:.25rem;--distance-med:.5rem;--distance-lg:1rem;--scale-sm:.02;--scale-med:.05;--scale-lg:.1}[data-brand]{--shadow-sm:0 1px 2px color-mix(in srgb, var(--color-shadow) 12%, transparent);--shadow-med:0 2px 8px color-mix(in srgb, var(--color-shadow) 14%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 8%, transparent);--shadow-lg:0 8px 24px color-mix(in srgb, var(--color-shadow) 16%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 8%, transparent)}[data-brand][data-mode=light]{color-scheme:light}[data-brand][data-mode=dark]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent);color-scheme:dark}[data-brand][data-mode=system]{color-scheme:light dark}:dir(ltr){--dir:1}:dir(rtl){--dir:-1}@media (prefers-color-scheme:dark){[data-brand][data-mode=system]{--shadow-sm:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 40%, transparent);--shadow-med:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 2px 8px color-mix(in srgb, var(--color-shadow) 48%, transparent), 0 1px 2px color-mix(in srgb, var(--color-shadow) 32%, transparent);--shadow-lg:0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent), 0 8px 24px color-mix(in srgb, var(--color-shadow) 56%, transparent), 0 2px 6px color-mix(in srgb, var(--color-shadow) 32%, transparent)}}@media (prefers-reduced-motion:reduce){:root{--distance-sm:0rem;--distance-med:0rem;--distance-lg:0rem;--scale-sm:0;--scale-med:0;--scale-lg:0;--duration-fast:.12s;--duration-med:.12s;--duration-slow:.12s}}}
 
-@font-face{src:local(Arial),local(ArialMT);font-weight:400;font-style:normal;size-adjust:101.568%;ascent-override:95.3892%;descent-override:23.7511%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Bold),local(Arial-BoldMT);font-weight:700;font-style:normal;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Italic),local(Arial-ItalicMT);font-weight:400;font-style:italic;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Bold Italic),local(Arial-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:101.706%;ascent-override:95.2591%;descent-override:23.7187%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Menlo Regular),local(Menlo-Regular);font-weight:400;font-style:normal;size-adjust:100.137%;ascent-override:101.871%;descent-override:29.9621%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Bold),local(Menlo-Bold);font-weight:700;font-style:normal;size-adjust:100.003%;ascent-override:102.007%;descent-override:30.0022%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Italic),local(Menlo-Italic);font-weight:400;font-style:italic;size-adjust:100.137%;ascent-override:101.871%;descent-override:29.9621%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Bold Italic),local(Menlo-BoldItalic);font-weight:700;font-style:italic;size-adjust:100.003%;ascent-override:102.007%;descent-override:30.0022%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Consolas);font-weight:400;font-style:normal;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Bold),local(Consolas-Bold);font-weight:700;font-style:normal;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Italic),local(Consolas-Italic);font-weight:400;font-style:italic;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Bold Italic),local(Consolas-BoldItalic);font-weight:700;font-style:italic;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Courier New),local(CourierNewPSMT);font-weight:400;font-style:normal;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Bold),local(CourierNewPS-BoldMT);font-weight:700;font-style:normal;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Italic),local(CourierNewPS-ItalicMT);font-weight:400;font-style:italic;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Bold Italic),local(CourierNewPS-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@layer tokens{[data-brand=default]{--color-bg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-bg-muted:light-dark(oklch(96.8% .004 265),oklch(27% .01 265));--color-bg-raised:light-dark(oklch(100% 0 0),oklch(20.5% .008 265));--color-fg:light-dark(oklch(14.5% .006 265),oklch(98.5% .002 265));--color-fg-muted:light-dark(oklch(44.5% .014 265),oklch(71% .012 265));--color-border:light-dark(oklch(92.5% .006 265),oklch(27% .01 265));--color-border-strong:oklch(55.5% .014 265);--color-accent:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-accent-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-danger:light-dark(oklch(56% .2 25),oklch(70.4% .17 25));--color-danger-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-success:light-dark(oklch(52% .135 150),oklch(76% .15 150));--color-success-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-warning:light-dark(oklch(53% .11 75),oklch(81% .145 75));--color-warning-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-focus:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-shadow:light-dark(oklch(14.5% .006 265),oklch(0% 0 0));--font-body:"Inter", "Inter Fallback Arial", sans-serif;--font-heading:"Inter", "Inter Fallback Arial", sans-serif;--font-display:"Inter", "Inter Fallback Arial", sans-serif;--font-label:"Inter", "Inter Fallback Arial", sans-serif;--font-mono:"JetBrains Mono", "JetBrains Mono Fallback Menlo", "JetBrains Mono Fallback Consolas", "JetBrains Mono Fallback Courier New", monospace;--font-trim-body-cap:.36377;--font-trim-body-baseline:.36377;--font-trim-heading-cap:.36377;--font-trim-heading-baseline:.36377;--font-trim-display-cap:.36377;--font-trim-display-baseline:.36377;--font-trim-label-cap:.36377;--font-trim-label-baseline:.36377;--font-trim-mono-cap:.37;--font-trim-mono-baseline:.36}@media (forced-colors:active){[data-brand][data-brand]{--color-bg:Canvas;--color-bg-muted:Canvas;--color-bg-raised:Canvas;--color-fg:CanvasText;--color-fg-muted:CanvasText;--color-border:CanvasText;--color-border-strong:CanvasText;--color-accent:LinkText;--color-accent-fg:Canvas;--color-danger:CanvasText;--color-danger-fg:Canvas;--color-success:CanvasText;--color-success-fg:Canvas;--color-warning:CanvasText;--color-warning-fg:Canvas;--color-focus:Highlight;--color-shadow:CanvasText}}}
+@font-face{src:local(Arial),local(ArialMT);font-weight:400;font-style:normal;size-adjust:101.568%;ascent-override:95.3892%;descent-override:23.7511%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Bold),local(Arial-BoldMT);font-weight:700;font-style:normal;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Italic),local(Arial-ItalicMT);font-weight:400;font-style:italic;size-adjust:101.637%;ascent-override:95.3241%;descent-override:23.7349%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Arial Bold Italic),local(Arial-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:101.706%;ascent-override:95.2591%;descent-override:23.7187%;line-gap-override:0%;font-family:Inter Fallback Arial}@font-face{src:local(Menlo Regular),local(Menlo-Regular);font-weight:400;font-style:normal;size-adjust:100.137%;ascent-override:101.871%;descent-override:29.9621%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Bold),local(Menlo-Bold);font-weight:700;font-style:normal;size-adjust:100.003%;ascent-override:102.007%;descent-override:30.0022%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Italic),local(Menlo-Italic);font-weight:400;font-style:italic;size-adjust:100.137%;ascent-override:101.871%;descent-override:29.9621%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Menlo Bold Italic),local(Menlo-BoldItalic);font-weight:700;font-style:italic;size-adjust:100.003%;ascent-override:102.007%;descent-override:30.0022%;line-gap-override:0%;font-family:JetBrains Mono Fallback Menlo}@font-face{src:local(Consolas);font-weight:400;font-style:normal;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Bold),local(Consolas-Bold);font-weight:700;font-style:normal;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Italic),local(Consolas-Italic);font-weight:400;font-style:italic;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Consolas Bold Italic),local(Consolas-BoldItalic);font-weight:700;font-style:italic;size-adjust:114.387%;ascent-override:89.1798%;descent-override:26.2293%;line-gap-override:0%;font-family:JetBrains Mono Fallback Consolas}@font-face{src:local(Courier New),local(CourierNewPSMT);font-weight:400;font-style:normal;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Bold),local(CourierNewPS-BoldMT);font-weight:700;font-style:normal;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Italic),local(CourierNewPS-ItalicMT);font-weight:400;font-style:italic;size-adjust:127.781%;ascent-override:79.8319%;descent-override:23.48%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@font-face{src:local(Courier New Bold Italic),local(CourierNewPS-BoldItalicMT);font-weight:700;font-style:italic;size-adjust:123.353%;ascent-override:82.6977%;descent-override:24.3229%;line-gap-override:0%;font-family:JetBrains Mono Fallback Courier New}@layer tokens{[data-brand=default]{--color-bg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-bg-muted:light-dark(oklch(96.8% .004 265),oklch(27% .01 265));--color-bg-raised:light-dark(oklch(100% 0 0),oklch(20.5% .008 265));--color-fg:light-dark(oklch(14.5% .006 265),oklch(98.5% .002 265));--color-fg-muted:light-dark(oklch(44.5% .014 265),oklch(71% .012 265));--color-border:light-dark(oklch(92.5% .006 265),oklch(27% .01 265));--color-border-strong:oklch(55.5% .014 265);--color-accent:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-accent-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-accent-fill:light-dark(oklch(54.6% .19 258),oklch(48.8% .18 258));--color-accent-fill-fg:oklch(100% 0 0);--color-danger:light-dark(oklch(56% .2 25),oklch(70.4% .17 25));--color-danger-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-success:light-dark(oklch(52% .135 150),oklch(76% .15 150));--color-success-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-warning:light-dark(oklch(53% .11 75),oklch(81% .145 75));--color-warning-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-done:light-dark(oklch(55% .2 295),oklch(72% .15 295));--color-done-fg:light-dark(oklch(100% 0 0),oklch(14.5% .006 265));--color-neutral-subtle:light-dark(oklch(96.8% .004 265),oklch(27% .01 265));--color-neutral-subtle-fg:light-dark(oklch(37% .013 265),oklch(92.5% .006 265));--color-accent-subtle:light-dark(oklch(93.2% .032 258),oklch(28.2% .09 258));--color-accent-subtle-fg:light-dark(oklch(48.8% .18 258),oklch(80.9% .095 258));--color-success-subtle:light-dark(oklch(94.5% .04 150),oklch(26% .06 150));--color-success-subtle-fg:light-dark(oklch(46.5% .12 150),oklch(84% .115 150));--color-warning-subtle:light-dark(oklch(95.5% .03 75),oklch(27% .05 75));--color-warning-subtle-fg:light-dark(oklch(47.5% .1 75),oklch(86% .105 75));--color-danger-subtle:light-dark(oklch(93.6% .032 25),oklch(25.8% .085 25));--color-danger-subtle-fg:light-dark(oklch(50.5% .19 25),oklch(80.8% .105 25));--color-done-subtle:light-dark(oklch(93.8% .032 295),oklch(28% .095 295));--color-done-subtle-fg:light-dark(oklch(49% .19 295),oklch(81.5% .1 295));--color-focus:light-dark(oklch(54.6% .19 258),oklch(70.7% .14 258));--color-shadow:light-dark(oklch(14.5% .006 265),oklch(0% 0 0));--font-body:"Inter", "Inter Fallback Arial", sans-serif;--font-heading:"Inter", "Inter Fallback Arial", sans-serif;--font-display:"Inter", "Inter Fallback Arial", sans-serif;--font-label:"Inter", "Inter Fallback Arial", sans-serif;--font-mono:"JetBrains Mono", "JetBrains Mono Fallback Menlo", "JetBrains Mono Fallback Consolas", "JetBrains Mono Fallback Courier New", monospace;--font-trim-body-cap:.36377;--font-trim-body-baseline:.36377;--font-trim-heading-cap:.36377;--font-trim-heading-baseline:.36377;--font-trim-display-cap:.36377;--font-trim-display-baseline:.36377;--font-trim-label-cap:.36377;--font-trim-label-baseline:.36377;--font-trim-mono-cap:.37;--font-trim-mono-baseline:.36}@media (forced-colors:active){[data-brand][data-brand]{--color-bg:Canvas;--color-bg-muted:Canvas;--color-bg-raised:Canvas;--color-fg:CanvasText;--color-fg-muted:CanvasText;--color-border:CanvasText;--color-border-strong:CanvasText;--color-accent:LinkText;--color-accent-fg:Canvas;--color-accent-fill:LinkText;--color-accent-fill-fg:Canvas;--color-danger:CanvasText;--color-danger-fg:Canvas;--color-success:CanvasText;--color-success-fg:Canvas;--color-warning:CanvasText;--color-warning-fg:Canvas;--color-done:CanvasText;--color-done-fg:Canvas;--color-neutral-subtle:Canvas;--color-neutral-subtle-fg:CanvasText;--color-accent-subtle:Canvas;--color-accent-subtle-fg:CanvasText;--color-success-subtle:Canvas;--color-success-subtle-fg:CanvasText;--color-warning-subtle:Canvas;--color-warning-subtle-fg:CanvasText;--color-danger-subtle:Canvas;--color-danger-subtle-fg:CanvasText;--color-done-subtle:Canvas;--color-done-subtle-fg:CanvasText;--color-focus:Highlight;--color-shadow:CanvasText}}}
 
 @layer reset{*,:before,:after{box-sizing:border-box}*{margin:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-block-size:100dvb;line-height:1.5}img,picture,video,canvas,svg{max-inline-size:100%;display:block}input,button,textarea,select{font:inherit;color:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}h1,h2,h3,h4,h5,h6{text-wrap:balance}}

package/dist/brands/default.mjs

@@ -61,11 +61,23 @@ var s = (e, t) => Object.fromEntries(Object.entries(t).map(([t, [n, r]]) => [t,
 	800: [.42, .085],
 	900: [.37, .07],
 	950: [.27, .05]
-}), h = {
+}), h = s(295, {
+	50: [.97, .014],
+	100: [.938, .032],
+	200: [.886, .06],
+	300: [.815, .1],
+	400: [.72, .15],
+	500: [.63, .19],
+	600: [.55, .2],
+	700: [.49, .19],
+	800: [.425, .165],
+	900: [.38, .14],
+	950: [.28, .095]
+}), g = {
 	metrics: i,
 	fallback: t,
 	generic: "sans-serif"
-}, g = {
+}, _ = {
 	metrics: a,
 	fallback: [
 		o,
@@ -73,7 +85,7 @@ var s = (e, t) => Object.fromEntries(Object.entries(t).map(([t, [n, r]]) => [t,
 		r
 	],
 	generic: "monospace"
-}, _ = {
+}, v = {
 	name: "default",
 	color: {
 		bg: e(c, u[950]),
@@ -85,22 +97,38 @@ var s = (e, t) => Object.fromEntries(Object.entries(t).map(([t, [n, r]]) => [t,
 		borderStrong: e(u[500], u[500]),
 		accent: e(d[600], d[400]),
 		accentFg: e(c, u[950]),
+		accentFill: e(d[600], d[700]),
+		accentFillFg: e(c, c),
 		danger: e(f[600], f[400]),
 		dangerFg: e(c, u[950]),
 		success: e(p[600], p[400]),
 		successFg: e(c, u[950]),
 		warning: e(m[600], m[400]),
 		warningFg: e(c, u[950]),
+		done: e(h[600], h[400]),
+		doneFg: e(c, u[950]),
+		neutralSubtle: e(u[100], u[800]),
+		neutralSubtleFg: e(u[700], u[200]),
+		accentSubtle: e(d[100], d[950]),
+		accentSubtleFg: e(d[700], d[300]),
+		successSubtle: e(p[100], p[950]),
+		successSubtleFg: e(p[700], p[300]),
+		warningSubtle: e(m[100], m[950]),
+		warningSubtleFg: e(m[700], m[300]),
+		dangerSubtle: e(f[100], f[950]),
+		dangerSubtleFg: e(f[700], f[300]),
+		doneSubtle: e(h[100], h[950]),
+		doneSubtleFg: e(h[700], h[300]),
 		focus: e(d[600], d[400]),
 		shadow: e(u[950], l)
 	},
 	font: {
-		body: h,
-		heading: h,
-		display: h,
-		label: h,
-		mono: g
+		body: g,
+		heading: g,
+		display: g,
+		label: g,
+		mono: _
 	}
 };
 //#endregion
-export { _ as defaultBrand };
+export { v as defaultBrand };

package/dist/brands/forced-colors.mjs

@@ -9,12 +9,28 @@ var e = {
 	borderStrong: "CanvasText",
 	accent: "LinkText",
 	accentFg: "Canvas",
+	accentFill: "LinkText",
+	accentFillFg: "Canvas",
 	danger: "CanvasText",
 	dangerFg: "Canvas",
 	success: "CanvasText",
 	successFg: "Canvas",
 	warning: "CanvasText",
 	warningFg: "Canvas",
+	done: "CanvasText",
+	doneFg: "Canvas",
+	neutralSubtle: "Canvas",
+	neutralSubtleFg: "CanvasText",
+	accentSubtle: "Canvas",
+	accentSubtleFg: "CanvasText",
+	successSubtle: "Canvas",
+	successSubtleFg: "CanvasText",
+	warningSubtle: "Canvas",
+	warningSubtleFg: "CanvasText",
+	dangerSubtle: "Canvas",
+	dangerSubtleFg: "CanvasText",
+	doneSubtle: "Canvas",
+	doneSubtleFg: "CanvasText",
 	focus: "Highlight",
 	shadow: "CanvasText"
 };