@plastic-js/tsumiki 0.1.51 → 0.1.53

package/dist/components/Progress.js

@@ -19,13 +19,13 @@ var rootClass = css({
 });
 var trackClass = css({
 	width: "100%",
-	backgroundColor: "var(--tsu-neutral-3)",
+	backgroundColor: "var(--tsu-bg-control)",
 	borderRadius: "999px",
 	overflow: "hidden"
 });
 var rangeClass = css({
 	height: "100%",
-	backgroundColor: "var(--tsu-accent-9)",
+	backgroundColor: "var(--tsu-accent-solid-bg)",
 	borderRadius: "999px",
 	transition: "width var(--tsu-transition-normal)"
 });
@@ -41,7 +41,7 @@ var stripedClass = css({
 });
 var labelClass = css({
 	fontSize: "var(--tsu-font-size-sm)",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	fontWeight: "var(--tsu-font-weight-medium)"
 });
 var sizeHeights = {

package/dist/components/RadioGroup.js

@@ -28,7 +28,7 @@ var itemClass = css({
 	touchAction: "manipulation",
 	"&:active": { backgroundColor: "transparent" },
 	"&[data-disabled]": {
-		color: "var(--tsu-disabled-fg)",
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	}
 });
@@ -36,8 +36,8 @@ var itemControlClass = css({
 	width: "20px",
 	height: "20px",
 	borderRadius: "50%",
-	border: "2px solid var(--tsu-accent-8)",
-	background: "var(--tsu-surface)",
+	border: "2px solid var(--tsu-accent-outline-border)",
+	background: "var(--tsu-bg-panel)",
 	display: "flex",
 	alignItems: "center",
 	justifyContent: "center",
@@ -45,18 +45,13 @@ var itemControlClass = css({
 	touchAction: "manipulation",
 	transition: "border-color var(--tsu-transition-fast), background-color var(--tsu-transition-fast)",
 	"&:active": { backgroundColor: "transparent" },
-	"&[data-state=\"checked\"]": { borderColor: "var(--tsu-accent-9)" },
-	"&[data-disabled]": {
-		borderColor: "var(--tsu-disabled-border)",
-		background: "var(--tsu-disabled-bg)"
-	}
+	"&[data-state=\"checked\"]": { borderColor: "var(--tsu-accent-solid-bg)" }
 });
 var indicatorClass = css({
 	width: "10px",
 	height: "10px",
 	borderRadius: "50%",
-	background: "var(--tsu-accent-9)",
-	"&[data-disabled]": { background: "var(--tsu-disabled-fg)" }
+	background: "var(--tsu-accent-solid-bg)"
 });
 var RadioGroup$1 = (props = {}) => {
 	const [local, rest] = splitProps(mergeProps$2({}, props), [

package/dist/components/RatingGroup.js

@@ -12,7 +12,7 @@ var rootClass = css({
 var labelClass = css({
 	fontSize: "var(--tsu-comp-font-size-sm)",
 	fontWeight: "var(--tsu-font-weight-medium)",
-	color: "var(--tsu-neutral-11)"
+	color: "var(--tsu-text-secondary)"
 });
 var controlClass = css({
 	display: "flex",
@@ -24,12 +24,12 @@ var itemClass = css({
 	padding: 0,
 	cursor: "pointer",
 	lineHeight: 0,
-	color: "var(--tsu-neutral-6)",
+	color: "var(--tsu-border)",
 	transition: "color var(--tsu-transition-fast)",
-	"&[data-highlighted]": { color: "var(--tsu-warning-9)" },
-	"&[data-checked]": { color: "var(--tsu-warning-9)" },
+	"&[data-highlighted]": { color: "var(--tsu-warning-solid-bg)" },
+	"&[data-checked]": { color: "var(--tsu-warning-solid-bg)" },
 	"&[data-disabled]": {
-		opacity: .4,
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed",
 		pointerEvents: "none"
 	}

package/dist/components/SearchInput.js

@@ -21,7 +21,10 @@ var clearButtonClass = css({
 		width: "100%",
 		height: "100%"
 	},
-	"&:hover": { color: "var(--tsu-fg)" }
+	"&:active": {
+		color: "var(--tsu-fg)",
+		backgroundColor: "var(--tsu-pressed)"
+	}
 });
 function SearchIcon() {
 	return _tmpl.cloneNode(true);

package/dist/components/Select.js

@@ -27,20 +27,32 @@ var triggerBaseClass = css({
 	fontFamily: "inherit",
 	textAlign: "left",
 	cursor: "pointer",
-	"&:focus-visible": { borderColor: "var(--tsu-accent-9)" },
+	"&:focus-visible": { borderColor: "var(--tsu-accent-outline-border-hover)" },
 	"&[data-disabled]": {
-		backgroundColor: "var(--tsu-disabled-bg)",
-		borderColor: "var(--tsu-disabled-border)",
-		color: "var(--tsu-disabled-fg)",
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	}
 });
 var triggerVariants = {
 	solid: css({
-		backgroundColor: "var(--tsu-surface)",
+		backgroundColor: "var(--tsu-bg-control)",
 		border: "1px solid transparent"
 	}),
-	outline: css({ border: "1px solid var(--tsu-accent-8)" })
+	outline: css({ border: "1px solid var(--_sel-border)" })
+};
+var intentClasses = {
+	default: css({
+		"--_sel-border": "var(--tsu-accent-outline-border)",
+		"--_sel-border-focus": "var(--tsu-accent-outline-border-hover)"
+	}),
+	neutral: css({
+		"--_sel-border": "var(--tsu-neutral-outline-border)",
+		"--_sel-border-focus": "var(--tsu-neutral-outline-border-hover)"
+	}),
+	danger: css({
+		"--_sel-border": "var(--tsu-danger-outline-border)",
+		"--_sel-border-focus": "var(--tsu-danger-outline-border-hover)"
+	})
 };
 var sizeClasses = {
 	xs: css({
@@ -79,10 +91,10 @@ var triggerValueClass = css({
 	textOverflow: "ellipsis",
 	whiteSpace: "nowrap"
 });
-var triggerPlaceholderClass = css({ color: "var(--tsu-neutral-11)" });
+var triggerPlaceholderClass = css({ color: "var(--tsu-text-secondary)" });
 var triggerIndicatorClass = css({
 	flexShrink: 0,
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	display: "flex",
 	"& svg": {
 		width: "16px",
@@ -113,12 +125,16 @@ var itemClass = css({
 	fontFamily: "inherit",
 	textAlign: "left",
 	cursor: "pointer",
-	"&:active": { background: "rgba(255,255,255,0.06)" },
-	"&[data-selected]": { background: "var(--tsu-accent-3)" }
+	"&:active": { background: "var(--tsu-pressed)" },
+	"&[data-selected]": { background: "var(--tsu-pressed-accent)" },
+	"&:disabled": {
+		opacity: "var(--tsu-disabled-opacity)",
+		cursor: "not-allowed"
+	}
 });
 var itemIndicatorClass = css({
 	flexShrink: 0,
-	color: "var(--tsu-accent-9)",
+	color: "var(--tsu-accent-solid-bg)",
 	display: "flex",
 	"& svg": {
 		width: "18px",
@@ -133,15 +149,15 @@ var filterInputClass = css({
 	width: "100%",
 	height: "42px",
 	padding: "0 36px 0 40px",
-	background: "var(--tsu-surface)",
-	border: "1px solid var(--tsu-accent-8)",
+	background: "var(--tsu-bg-panel)",
+	border: "1px solid var(--_sel-border)",
 	borderRadius: "10px",
 	color: "var(--tsu-fg)",
 	fontSize: "16px",
 	fontFamily: "inherit",
 	boxSizing: "border-box",
-	"&:focus": { borderColor: "var(--tsu-accent-9)" },
-	"&::placeholder": { color: "var(--tsu-neutral-11)" },
+	"&:focus": { borderColor: "var(--_sel-border-focus)" },
+	"&::placeholder": { color: "var(--tsu-text-secondary)" },
 	"&::-webkit-search-cancel-button": { appearance: "none" }
 });
 var filterIconClass = css({
@@ -149,7 +165,7 @@ var filterIconClass = css({
 	left: "12px",
 	top: "50%",
 	transform: "translateY(-50%)",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	pointerEvents: "none",
 	display: "flex",
 	"& svg": {
@@ -171,7 +187,7 @@ var filterClearClass = css({
 	background: "none",
 	border: "none",
 	borderRadius: "6px",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	cursor: "pointer",
 	"& svg": {
 		width: "16px",
@@ -181,7 +197,7 @@ var filterClearClass = css({
 var noResultsClass = css({
 	padding: "20px 14px",
 	textAlign: "center",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	fontSize: "14px"
 });
 var SelectContext = createContext(null);
@@ -196,7 +212,8 @@ var read = (source) => {
 var Select = (props) => {
 	const [local, rest] = splitProps(mergeProps$1({
 		size: "md",
-		solid: false
+		solid: false,
+		intent: "default"
 	}, props), [
 		"value",
 		"onValueChange",
@@ -211,7 +228,8 @@ var Select = (props) => {
 		"backdropClassName",
 		"backdropStyle",
 		"filter",
-		"solid"
+		"solid",
+		"intent"
 	]);
 	const open = (v) => {
 		if (v === void 0) return read(local.open);
@@ -265,6 +283,10 @@ var Select = (props) => {
 		disabled: () => local.disabled ?? false,
 		size: () => read(local.size),
 		solid: () => read(local.solid),
+		intent: () => {
+			const intent = read(local.intent);
+			return intent === "neutral" && read(local.solid) ? "default" : intent;
+		},
 		backdropClassName: local.backdropClassName,
 		backdropStyle: local.backdropStyle,
 		filter: local.filter,
@@ -285,7 +307,7 @@ var SelectTrigger = (props) => {
 	]);
 	return jsx("div", mergeProps(() => part("trigger"), {
 		get className() {
-			return `${triggerBaseClass} ${triggerVariants[ctx.solid() ? "solid" : "outline"]} ${sizeClasses[ctx.size()] || ""} ${local.className || ""}`;
+			return `${triggerBaseClass} ${triggerVariants[ctx.solid() ? "solid" : "outline"]} ${intentClasses[ctx.intent()]} ${sizeClasses[ctx.size()] || ""} ${local.className || ""}`;
 		},
 		"data-disabled": () => ctx.disabled() ? "" : void 0,
 		onClick: () => {
@@ -317,14 +339,18 @@ var Item = (props) => {
 		"children"
 	]);
 	const value = () => local.item !== void 0 ? ctx.itemToValue(local.item) : local.value;
+	const disabled = () => (local.item !== void 0 ? local.item.disabled : local.disabled) ?? false;
 	return jsx("button", mergeProps(() => part("item"), {
 		get className() {
 			return `${itemClass} ${local.className || ""}`;
 		},
 		"data-selected": () => ctx.isSelected(value()) ? "" : void 0,
-		onClick: () => ctx.setValue(value()),
+		disabled: () => disabled(),
+		onClick: () => {
+			if (!disabled()) ctx.setValue(value());
+		},
 		type: "button"
-	}, rest, { children: [jsx("span", mergeProps(() => part("itemText"), { children: () => local.children ?? (local.item !== void 0 && ctx.itemToLabel(local.item)) })), () => ctx.isSelected(value()) && jsx("span", mergeProps(() => part("itemIndicator"), {
+	}, rest, { children: [jsx("span", mergeProps(() => part("itemText"), { children: () => local.children ?? (local.item !== void 0 && ctx.itemToLabel(local.item)) })), () => ctx.isSelected(value()) && !disabled() && jsx("span", mergeProps(() => part("itemIndicator"), {
 		className: itemIndicatorClass,
 		children: jsx(Icon, mergeProps({ svg: checkSvg }))
 	}))] }));
@@ -351,7 +377,7 @@ var List = () => {
 			setProp(_el2, "ref", (el) => {
 				filterInputEl = el;
 			});
-			setProp(_el2, "className", () => filterInputClass);
+			setProp(_el2, "className", () => `${filterInputClass} ${intentClasses[ctx.intent()]}`);
 			setProp(_el2, "value", () => ctx.query);
 			setProp(_el2, "onInput", (e) => ctx.query(e.target.value));
 			setProp(_el2, "onClick", (e) => e.stopPropagation());
@@ -398,7 +424,7 @@ var Content = () => {
 			return ctx.backdropClassName;
 		},
 		get backdropStyle() {
-			return ctx.backdropStyle ?? { background: "rgba(0,0,0,0.5)" };
+			return ctx.backdropStyle ?? { background: "var(--tsu-bg-overlay)" };
 		},
 		contentClassName: listBodyClass,
 		children: jsx(List, {})

package/dist/components/SelectPc.js

@@ -20,7 +20,7 @@ var triggerBaseClass = css({
 	cursor: "pointer",
 	textAlign: "start",
 	color: "var(--tsu-fg)",
-	"&[data-placeholder-shown]": { color: "var(--tsu-neutral-11)" }
+	"&[data-placeholder-shown]": { color: "var(--tsu-text-secondary)" }
 });
 var sizeClasses = {
 	xs: css({
@@ -56,12 +56,12 @@ var sizeClasses = {
 };
 var variantClasses = {
 	solid: css({
-		backgroundColor: "var(--tsu-neutral-3)",
+		backgroundColor: "var(--tsu-bg-control)",
 		border: "1px solid transparent",
-		"&:hover:not(:disabled)": { backgroundColor: "var(--tsu-neutral-4)" },
+		"&:hover:not(:disabled)": { backgroundColor: "var(--tsu-bg-control-hover)" },
 		"&:active:not(:disabled)": {
-			backgroundColor: "var(--tsu-neutral-5)",
-			borderColor: "var(--tsu-accent-9)"
+			backgroundColor: "var(--tsu-pressed)",
+			borderColor: "var(--tsu-accent-solid-bg)"
 		},
 		"&:focus-visible": {
 			backgroundColor: "var(--tsu-focus-bg)",
@@ -69,10 +69,10 @@ var variantClasses = {
 		}
 	}),
 	outline: css({
-		border: "1px solid var(--tsu-accent-8)",
+		border: "1px solid var(--tsu-accent-outline-border)",
 		"&:active:not(:disabled)": {
-			backgroundColor: "var(--tsu-accent-3)",
-			borderColor: "var(--tsu-accent-9)"
+			backgroundColor: "var(--tsu-pressed-accent)",
+			borderColor: "var(--tsu-accent-solid-bg)"
 		},
 		"&:focus-visible": {
 			backgroundColor: "var(--tsu-focus-bg)",
@@ -81,13 +81,11 @@ var variantClasses = {
 	})
 };
 var errorClass = css({
-	borderColor: "var(--tsu-danger-9) !important",
-	"&:focus-visible": { borderColor: "var(--tsu-danger-9) !important" }
+	borderColor: "var(--tsu-danger-outline-border) !important",
+	"&:focus-visible": { borderColor: "var(--tsu-danger-outline-border) !important" }
 });
 var disabledClass = css({
-	backgroundColor: "var(--tsu-disabled-bg) !important",
-	borderColor: "var(--tsu-disabled-border) !important",
-	color: "var(--tsu-disabled-fg) !important",
+	opacity: "var(--tsu-disabled-opacity)",
 	cursor: "not-allowed"
 });
 var indicatorClass = css({
@@ -95,13 +93,13 @@ var indicatorClass = css({
 	display: "flex",
 	alignItems: "center",
 	transition: "transform var(--tsu-transition-fast)",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	"&[data-state=\"open\"]": { transform: "rotate(180deg)" }
 });
 var positionerClass = css({ zIndex: "var(--tsu-z-dropdown)" });
 var contentBaseClass = css({
-	backgroundColor: "var(--tsu-surface)",
-	border: "1px solid var(--tsu-neutral-6)",
+	backgroundColor: "var(--tsu-bg-panel)",
+	border: "1px solid var(--tsu-border)",
 	borderRadius: "var(--tsu-radius-l2-md)",
 	boxShadow: "var(--tsu-shadow-lg)",
 	overflow: "hidden"
@@ -116,13 +114,13 @@ var itemClass = css({
 	cursor: "pointer",
 	color: "var(--tsu-fg)",
 	minHeight: "var(--_item-min-height)",
-	"&:active": { backgroundColor: "var(--tsu-neutral-3)" },
+	"&:active": { backgroundColor: "var(--tsu-pressed)" },
 	"&[data-highlighted]": {
-		backgroundColor: "var(--tsu-accent-3)",
-		color: "var(--tsu-accent-9)"
+		backgroundColor: "var(--tsu-pressed-accent)",
+		color: "var(--tsu-accent-subtle-fg)"
 	},
 	"&[data-disabled]": {
-		color: "var(--tsu-disabled-fg)",
+		opacity: "var(--tsu-disabled-opacity)",
 		pointerEvents: "none"
 	}
 });

package/dist/components/SignaturePad.js

@@ -14,9 +14,9 @@ var labelClass = css({
 	fontWeight: "var(--tsu-font-weight-medium)"
 });
 var canvasClass = css({
-	border: "1px solid var(--tsu-neutral-7)",
+	border: "1px solid var(--tsu-border)",
 	borderRadius: "var(--tsu-radius-l2-md)",
-	backgroundColor: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-bg-page)",
 	color: "var(--tsu-fg)",
 	touchAction: "none",
 	width: "100%",
@@ -31,16 +31,15 @@ var clearClass = css({
 	justifyContent: "center",
 	gap: "6px",
 	padding: "var(--tsu-comp-padding-y-sm) var(--tsu-comp-padding-x-md)",
-	border: "1px solid var(--tsu-neutral-7)",
+	border: "1px solid var(--tsu-neutral-outline-border)",
 	borderRadius: "var(--tsu-radius-l2-md)",
-	background: "var(--tsu-bg)",
-	color: "var(--tsu-neutral-11)",
+	background: "var(--tsu-bg-page)",
+	color: "var(--tsu-text-secondary)",
 	fontSize: "var(--tsu-comp-font-size-sm)",
 	fontFamily: "inherit",
 	cursor: "pointer",
 	touchAction: "manipulation",
-	"&:hover": { borderColor: "var(--tsu-focus-border)" },
-	"&:active": { background: "var(--tsu-neutral-3)" }
+	"&:active": { background: "var(--tsu-pressed)" }
 });
 var ClearTrigger = (props = {}) => {
 	const [local, rest] = splitProps(props, ["className", "children"]);

package/dist/components/Skeleton.js

@@ -4,7 +4,7 @@ import { css, keyframes } from "@emotion/css";
 var _tmpl = template("<span></span>");
 var baseClass = css({
 	display: "block",
-	background: "linear-gradient(90deg, var(--tsu-neutral-6) 25%, var(--tsu-neutral-7) 50%, var(--tsu-neutral-6) 75%)",
+	background: "linear-gradient(90deg, var(--tsu-border) 25%, var(--tsu-border-strong) 50%, var(--tsu-border) 75%)",
 	backgroundSize: "200% 100%",
 	animation: `${keyframes({
 		"0%": { backgroundPosition: "-200% 0" },

package/dist/components/Slider.js

@@ -27,25 +27,25 @@ var trackClass = css({
 	width: "100%",
 	height: "4px",
 	borderRadius: "2px",
-	backgroundColor: "var(--tsu-neutral-7)"
+	backgroundColor: "var(--tsu-border)"
 });
 var rangeClass = css({
 	position: "absolute",
 	height: "100%",
 	borderRadius: "2px",
-	backgroundColor: "var(--tsu-accent-9)"
+	backgroundColor: "var(--tsu-accent-solid-bg)"
 });
 var thumbClass = css({
 	width: "20px",
 	height: "20px",
 	borderRadius: "50%",
-	backgroundColor: "var(--tsu-accent-9)",
-	border: "2px solid var(--tsu-accent-9)",
-	boxShadow: "0 1px 3px rgba(0,0,0,0.4)",
+	backgroundColor: "var(--tsu-accent-solid-bg)",
+	border: "2px solid var(--tsu-accent-solid-bg)",
+	boxShadow: "var(--tsu-shadow-sm)",
 	cursor: "pointer",
 	zIndex: 2,
 	transition: "box-shadow var(--tsu-transition-fast)",
-	"&:focus-visible": { boxShadow: "0 0 0 3px var(--tsu-accent-3)" }
+	"&:focus-visible": { boxShadow: "0 0 0 3px var(--tsu-accent-subtle-bg)" }
 });
 var indicatorClass = css({
 	position: "absolute",
@@ -55,7 +55,7 @@ var indicatorClass = css({
 	padding: "4px 8px",
 	borderRadius: "6px",
 	backgroundColor: "var(--tsu-fg)",
-	color: "var(--tsu-bg)",
+	color: "var(--tsu-bg-page)",
 	fontSize: "13px",
 	lineHeight: 1,
 	fontFamily: "inherit",

package/dist/components/Spinner.js

@@ -6,7 +6,7 @@ var rotate = keyframes({
 	from: { transform: "rotate(0deg)" },
 	to: { transform: "rotate(360deg)" }
 });
-var Spinner = ({ size = 24, strokeWidth = 2, color = "var(--tsu-accent-9)", duration = "0.8s", easing = "cubic-bezier(0.4, 0, 0.2, 1)", className } = {}) => {
+var Spinner = ({ size = 24, strokeWidth = 2, color = "var(--tsu-accent-solid-bg)", duration = "0.8s", easing = "cubic-bezier(0.4, 0, 0.2, 1)", className } = {}) => {
 	const style = {
 		"--spinner-size": typeof size === "number" ? `${size}px` : size,
 		"--spinner-stroke": strokeWidth,

package/dist/components/Steps.js

@@ -60,13 +60,13 @@ var triggerClass = css({
 	fontFamily: "inherit",
 	touchAction: "manipulation",
 	"&[data-complete] .steps-title, &[data-current] .steps-title": {
-		color: "var(--tsu-accent-9)",
+		color: "var(--tsu-accent-subtle-fg)",
 		fontWeight: "var(--tsu-font-weight-semibold)"
 	}
 });
 var titleClass = css({
 	fontSize: "var(--tsu-font-size-xs)",
-	color: "var(--tsu-neutral-9)",
+	color: "var(--tsu-text-subtle)",
 	textAlign: "center"
 });
 var indicatorClass = css({
@@ -76,21 +76,21 @@ var indicatorClass = css({
 	width: "28px",
 	height: "28px",
 	borderRadius: "50%",
-	border: "2px solid var(--tsu-neutral-5)",
-	backgroundColor: "var(--tsu-surface)",
+	border: "2px solid var(--tsu-border)",
+	backgroundColor: "var(--tsu-bg-panel)",
 	fontSize: "var(--tsu-font-size-sm)",
 	fontWeight: "var(--tsu-font-weight-semibold)",
-	color: "var(--tsu-neutral-9)",
+	color: "var(--tsu-text-subtle)",
 	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast), color var(--tsu-transition-fast)",
 	".steps-trigger[data-current] &": {
-		borderColor: "var(--tsu-accent-8)",
-		backgroundColor: "var(--tsu-accent-9)",
-		color: "var(--tsu-bg)"
+		borderColor: "var(--tsu-accent-outline-border)",
+		backgroundColor: "var(--tsu-accent-solid-bg)",
+		color: "var(--tsu-accent-solid-fg)"
 	},
 	".steps-trigger[data-complete] &": {
-		borderColor: "var(--tsu-accent-8)",
-		backgroundColor: "var(--tsu-accent-3)",
-		color: "var(--tsu-accent-9)"
+		borderColor: "var(--tsu-accent-outline-border)",
+		backgroundColor: "var(--tsu-accent-subtle-bg)",
+		color: "var(--tsu-accent-subtle-fg)"
 	},
 	".steps-trigger[data-complete] & .steps-indicator-index": { display: "none" },
 	".steps-trigger[data-complete] & .steps-indicator-check": { display: "flex" },
@@ -104,24 +104,24 @@ var indicatorClass = css({
 var separatorClass = css({
 	flex: 1,
 	height: "2px",
-	backgroundColor: "var(--tsu-neutral-5)",
+	backgroundColor: "var(--tsu-border)",
 	margin: "0 var(--tsu-spacing-xs)",
 	marginBottom: "20px",
-	"&[data-complete]": { backgroundColor: "var(--tsu-accent-9)" }
+	"&[data-complete]": { backgroundColor: "var(--tsu-accent-solid-bg)" }
 });
 var contentClass = css({
 	padding: "var(--tsu-spacing-md)",
-	backgroundColor: "var(--tsu-neutral-2)",
+	backgroundColor: "var(--tsu-bg-panel)",
 	borderRadius: "var(--tsu-radius-l2-md)",
 	fontSize: "var(--tsu-font-size-sm)",
-	color: "var(--tsu-neutral-11)"
+	color: "var(--tsu-text-secondary)"
 });
 var completedContentClass = css({
 	padding: "var(--tsu-spacing-md)",
 	textAlign: "center",
 	fontSize: "var(--tsu-font-size-md)",
 	fontWeight: "var(--tsu-font-weight-semibold)",
-	color: "var(--tsu-success-9)"
+	color: "var(--tsu-success-solid-bg)"
 });
 var navClass = css({
 	display: "flex",
@@ -130,24 +130,24 @@ var navClass = css({
 });
 var navBtnClass = css({
 	padding: "var(--tsu-spacing-sm) var(--tsu-spacing-md)",
-	border: "1px solid var(--tsu-accent-7)",
+	border: "1px solid var(--tsu-accent-outline-border)",
 	borderRadius: "var(--tsu-radius-l2-md)",
-	backgroundColor: "var(--tsu-surface)",
-	color: "var(--tsu-neutral-11)",
+	backgroundColor: "var(--tsu-bg-panel)",
+	color: "var(--tsu-text-secondary)",
 	fontSize: "var(--tsu-font-size-sm)",
 	fontWeight: "var(--tsu-font-weight-medium)",
 	cursor: "pointer",
 	fontFamily: "inherit",
 	touchAction: "manipulation",
 	"&:disabled": {
-		opacity: .4,
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	}
 });
 var navNextClass = css({
-	backgroundColor: "var(--tsu-accent-9)",
-	borderColor: "var(--tsu-accent-8)",
-	color: "var(--tsu-bg)"
+	backgroundColor: "var(--tsu-accent-solid-bg)",
+	borderColor: "var(--tsu-accent-solid-bg)",
+	color: "var(--tsu-accent-solid-fg)"
 });
 var checkIcon = _tmpl.cloneNode(true);
 var Steps$1 = (props = {}) => {

package/dist/components/Switch.js

@@ -76,17 +76,21 @@ var rootClass = css({
 	touchAction: "manipulation",
 	"&[data-disabled]": { cursor: "not-allowed" }
 });
+var intentClasses = {
+	default: css({ "--_sw-track-checked": "var(--tsu-accent-solid-bg)" }),
+	danger: css({ "--_sw-track-checked": "var(--tsu-danger-solid-bg)" })
+};
 var controlClass = css({
 	position: "relative",
 	width: "var(--_sw-track-width, calc(2 * var(--tsu-comp-secondary-height-md)))",
 	height: "var(--_sw-track-height, var(--tsu-comp-secondary-height-md))",
 	flexShrink: 0,
 	borderRadius: "var(--_sw-track-radius, calc(var(--tsu-comp-secondary-height-md) / 2))",
-	backgroundColor: "var(--tsu-neutral-7)",
+	backgroundColor: "var(--tsu-border)",
 	transition: "background-color var(--tsu-transition-fast)",
-	"&[data-state=\"checked\"]": { backgroundColor: "var(--tsu-accent-9)" },
-	"&[data-disabled]": { backgroundColor: "var(--tsu-neutral-5)" },
-	"&[data-disabled][data-state=\"checked\"]": { backgroundColor: "var(--tsu-disabled-border)" }
+	"&[data-state=\"checked\"]": { backgroundColor: "var(--_sw-track-checked)" },
+	"&[data-disabled]": { backgroundColor: "var(--tsu-border-strong)" },
+	"&[data-disabled][data-state=\"checked\"]": { backgroundColor: "var(--tsu-border-strong)" }
 });
 var thumbClass = css({
 	position: "absolute",
@@ -95,32 +99,37 @@ var thumbClass = css({
 	width: "var(--_sw-thumb-size, calc(var(--tsu-comp-secondary-height-md) - 4px))",
 	height: "var(--_sw-thumb-size, calc(var(--tsu-comp-secondary-height-md) - 4px))",
 	borderRadius: "50%",
-	backgroundColor: "var(--tsu-surface)",
-	boxShadow: "0 1px 3px rgba(0,0,0,0.15)",
+	backgroundColor: "var(--tsu-bg-panel)",
+	boxShadow: "var(--tsu-shadow-sm)",
 	transform: "translateX(0)",
 	transition: "transform var(--tsu-transition-fast)",
 	"&[data-state=\"checked\"]": { transform: "translateX(var(--_sw-thumb-travel, var(--tsu-comp-secondary-height-md)))" },
 	"&[data-disabled]": {
-		backgroundColor: "var(--tsu-neutral-8)",
+		backgroundColor: "var(--tsu-text-subtle)",
 		boxShadow: "none"
 	},
-	"&[data-disabled][data-state=\"checked\"]": { backgroundColor: "var(--tsu-surface)" }
+	"&[data-disabled][data-state=\"checked\"]": { backgroundColor: "var(--tsu-bg-panel)" }
 });
 var labelClass = css({
 	fontSize: "var(--_sw-font-size, var(--tsu-comp-font-size-md))",
 	lineHeight: "var(--_sw-line-height, var(--tsu-comp-line-height-md))",
 	color: "var(--tsu-fg)",
-	"&[data-disabled]": { color: "var(--tsu-disabled-fg)" }
+	"&[data-disabled]": { opacity: "var(--tsu-disabled-opacity)" }
 });
 var Switch$1 = (props = {}) => {
-	const [local, rest] = splitProps(mergeProps$2({ size: "md" }, props), [
+	const [local, rest] = splitProps(mergeProps$2({
+		size: "md",
+		intent: "default"
+	}, props), [
 		"size",
+		"intent",
 		"className",
 		"children"
 	]);
 	const classNames = [
 		rootClass,
 		sizeClasses[local.size],
+		intentClasses[local.intent],
 		local.className
 	].filter(Boolean).join(" ");
 	return jsx(Switch.Root, mergeProps(rest, {