@plastic-js/tsumiki 0.1.52 → 0.1.53

package/dist/components/Drawer.js

@@ -10,7 +10,7 @@ var _tmpl = template("<div><div><!><!></div><!></div>");
 var backdropClass = css({
 	position: "fixed",
 	inset: 0,
-	background: "rgba(0, 0, 0, 0.6)",
+	background: "var(--tsu-bg-overlay)",
 	backdropFilter: "blur(4px)",
 	"&[hidden]": { display: "none" }
 });
@@ -24,8 +24,8 @@ var positionerClass = css({
 });
 var contentClass = css({
 	pointerEvents: "auto",
-	background: "var(--tsu-surface)",
-	borderLeft: "1px solid var(--tsu-neutral-7)",
+	background: "var(--tsu-bg-panel)",
+	borderLeft: "1px solid var(--tsu-border)",
 	width: "min(320px, calc(100vw - 24px))",
 	height: "100%",
 	display: "flex",
@@ -39,7 +39,7 @@ var headClass = css({
 	alignItems: "center",
 	justifyContent: "space-between",
 	padding: "18px var(--tsu-container-padding-lg)",
-	borderBottom: "1px solid var(--tsu-neutral-7)",
+	borderBottom: "1px solid var(--tsu-border)",
 	flexShrink: 0
 });
 var titleWrapClass = css({
@@ -50,7 +50,7 @@ var titleWrapClass = css({
 });
 var titleIconClass = css({
 	flexShrink: 0,
-	color: "var(--tsu-accent-9)"
+	color: "var(--tsu-accent-solid-bg)"
 });
 var titleClass = css({
 	fontSize: "18px",
@@ -63,7 +63,7 @@ var closeBtnClass = css({
 	borderRadius: "50%",
 	background: "transparent",
 	border: "none",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	fontSize: "22px",
 	lineHeight: 1,
 	cursor: "pointer",
@@ -80,7 +80,7 @@ var bodyClass = css({
 var descClass = css({
 	margin: "8px 0 0",
 	fontSize: "var(--tsu-comp-font-size-sm)",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	lineHeight: 1.5
 });
 var ArkRoot = Drawer.Root;

package/dist/components/Field.js

@@ -33,18 +33,18 @@ var inputWrapClass = css({
 	gap: "var(--tsu-spacing-xs)"
 });
 var requiredClass = css({
-	color: "var(--tsu-danger-9)",
+	color: "var(--tsu-danger-solid-bg)",
 	marginLeft: "var(--tsu-spacing-xxs)"
 });
 var errorTextClass = css({
 	fontSize: "var(--tsu-font-size-sm)",
-	color: "var(--tsu-danger-9)",
+	color: "var(--tsu-danger-solid-bg)",
 	margin: 0,
 	flexBasis: "100%"
 });
 var helperTextClass = css({
 	fontSize: "var(--tsu-font-size-sm)",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	margin: 0,
 	flexBasis: "100%"
 });

package/dist/components/Fieldset.js

@@ -7,7 +7,7 @@ var rootClass = css({
 	display: "flex",
 	flexDirection: "column",
 	gap: "var(--tsu-spacing-xs)",
-	border: "1px solid var(--tsu-neutral-7)",
+	border: "1px solid var(--tsu-border)",
 	borderRadius: "var(--tsu-radius-l1-md)",
 	padding: "var(--tsu-spacing-lg)"
 });
@@ -20,7 +20,7 @@ var legendClass = css({
 });
 var helperClass = css({
 	fontSize: "var(--tsu-font-size-sm)",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	margin: 0
 });
 var read = (v) => typeof v === "function" ? v() : v;

package/dist/components/FileUpload.js

@@ -23,22 +23,22 @@ var dropzoneClass = css({
 	justifyContent: "center",
 	gap: "var(--tsu-spacing-sm)",
 	padding: "var(--tsu-spacing-xl)",
-	border: "2px dashed var(--tsu-accent-7)",
+	border: "2px dashed var(--tsu-accent-outline-border)",
 	borderRadius: "var(--tsu-radius-l2-md)",
-	backgroundColor: "var(--tsu-surface)",
+	backgroundColor: "var(--tsu-bg-panel)",
 	cursor: "pointer",
 	minHeight: "120px",
 	transition: "border-color var(--tsu-transition-fast), background-color var(--tsu-transition-fast)",
 	touchAction: "manipulation",
 	"&[data-disabled]": {
-		opacity: .5,
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed",
 		pointerEvents: "none"
 	}
 });
 var dropzoneTextClass = css({
 	fontSize: "var(--tsu-font-size-sm)",
-	color: "var(--tsu-neutral-9)",
+	color: "var(--tsu-text-subtle)",
 	textAlign: "center"
 });
 var itemGroupClass = css({
@@ -54,8 +54,8 @@ var itemClass = css({
 	alignItems: "center",
 	gap: "var(--tsu-spacing-sm)",
 	padding: "var(--tsu-spacing-sm) var(--tsu-spacing-md)",
-	backgroundColor: "var(--tsu-surface)",
-	border: "1px solid var(--tsu-neutral-5)",
+	backgroundColor: "var(--tsu-bg-panel)",
+	border: "1px solid var(--tsu-border)",
 	borderRadius: "var(--tsu-radius-l2-md)"
 });
 var itemNameClass = css({
@@ -68,7 +68,7 @@ var itemNameClass = css({
 });
 var itemSizeTextClass = css({
 	fontSize: "var(--tsu-font-size-xs)",
-	color: "var(--tsu-neutral-9)",
+	color: "var(--tsu-text-subtle)",
 	marginTop: "var(--tsu-spacing-xxs)"
 });
 var itemDeleteClass = css({
@@ -80,7 +80,7 @@ var itemDeleteClass = css({
 	flexShrink: 0,
 	border: "none",
 	background: "none",
-	color: "var(--tsu-neutral-9)",
+	color: "var(--tsu-text-subtle)",
 	cursor: "pointer",
 	borderRadius: "var(--tsu-radius-l1-md)",
 	padding: 0
@@ -90,16 +90,16 @@ var clearClass = css({
 	alignItems: "center",
 	gap: "var(--tsu-spacing-xs)",
 	padding: "var(--tsu-spacing-sm) var(--tsu-spacing-md)",
-	border: "1px solid var(--tsu-neutral-7)",
+	border: "1px solid var(--tsu-neutral-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)",
 	cursor: "pointer",
 	fontFamily: "inherit",
 	touchAction: "manipulation",
 	"&:disabled": {
-		opacity: .5,
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	}
 });

package/dist/components/FilterGroup.js

@@ -1,46 +1,10 @@
-import ToggleGroup, { ToggleGroupItem } from "./ToggleGroup.js";
+import Button from "./Button.js";
 import { insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
 import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
 //#region src/components/FilterGroup.jsx
-var _tmpl = template("<button type=\"button\"></button>");
+var _tmpl = template("<div></div>");
 var access = (v) => typeof v === "function" ? v() : v;
-var sizeVars = {
-	xs: {
-		"--_tg-padding-y": "var(--tsu-comp-padding-y-xs)",
-		"--_tg-padding-x": "var(--tsu-comp-padding-x-xs)",
-		"--_tg-font-size": "var(--tsu-comp-font-size-xs)",
-		"--_tg-radius": "var(--tsu-radius-l1-xs)"
-	},
-	sm: {
-		"--_tg-padding-y": "var(--tsu-comp-padding-y-sm)",
-		"--_tg-padding-x": "var(--tsu-comp-padding-x-sm)",
-		"--_tg-font-size": "var(--tsu-comp-font-size-sm)",
-		"--_tg-radius": "var(--tsu-radius-l1-sm)"
-	},
-	md: {
-		"--_tg-padding-y": "var(--tsu-comp-padding-y-md)",
-		"--_tg-padding-x": "var(--tsu-comp-padding-x-md)",
-		"--_tg-font-size": "var(--tsu-comp-font-size-md)",
-		"--_tg-radius": "var(--tsu-radius-l1-md)"
-	},
-	lg: {
-		"--_tg-padding-y": "var(--tsu-comp-padding-y-lg)",
-		"--_tg-padding-x": "var(--tsu-comp-padding-x-lg)",
-		"--_tg-font-size": "var(--tsu-comp-font-size-lg)",
-		"--_tg-radius": "var(--tsu-radius-l1-lg)"
-	},
-	xl: {
-		"--_tg-padding-y": "var(--tsu-comp-padding-y-xl)",
-		"--_tg-padding-x": "var(--tsu-comp-padding-x-xl)",
-		"--_tg-font-size": "var(--tsu-comp-font-size-xl)",
-		"--_tg-radius": "var(--tsu-radius-l1-xl)"
-	}
-};
-var defaultStyle = {
-	"--_tg-border": "var(--tsu-neutral-6)",
-	"--_fg-gap": "var(--tsu-spacing-sm)"
-};
 var rootClass = css({
 	display: "flex",
 	width: "100%",
@@ -53,53 +17,22 @@ var stickyClass = css({
 	zIndex: "var(--tsu-z-dropdown)",
 	backgroundColor: "var(--tsu-surface)"
 });
-var allClass = css({
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "center",
-	flexShrink: 0,
-	padding: "var(--_tg-padding-y, var(--tsu-comp-padding-y-md)) var(--_tg-padding-x, var(--tsu-comp-padding-x-md))",
-	border: "1px solid var(--_tg-border)",
+var pillClass = css({
 	borderRadius: "var(--tsu-radius-round)",
-	background: "transparent",
-	color: "var(--tsu-neutral-11)",
-	fontSize: "var(--_tg-font-size, var(--tsu-comp-font-size-md))",
-	fontWeight: "var(--tsu-font-weight-medium)",
-	fontFamily: "inherit",
-	cursor: "pointer",
-	touchAction: "manipulation",
-	transition: "background-color var(--tsu-transition-fast), color var(--tsu-transition-fast), border-color var(--tsu-transition-fast)",
-	"&[data-state=\"on\"]": {
-		backgroundColor: "var(--tsu-neutral-9)",
-		borderColor: "var(--tsu-neutral-9)",
-		color: "var(--tsu-bg)"
-	},
-	"&:disabled": {
-		opacity: .5,
-		cursor: "not-allowed"
-	}
+	flexShrink: 0
 });
+var selectedItemClass = css({ backgroundColor: "var(--tsu-accent-outline-bg-active)" });
 var groupClass = css({
-	border: "none",
-	overflowX: "auto",
-	overflowY: "hidden",
+	display: "flex",
+	alignItems: "center",
+	gap: "var(--_fg-gap, var(--tsu-spacing-sm))",
 	flex: "1 1 auto",
 	minWidth: 0,
-	gap: "var(--_fg-gap, var(--tsu-spacing-sm))",
+	overflowX: "auto",
+	overflowY: "hidden",
 	scrollbarWidth: "none",
 	"::-webkit-scrollbar": { display: "none" }
 });
-var itemClass = css({
-	border: "1px solid var(--_tg-border)",
-	borderRadius: "var(--tsu-radius-round)",
-	flexShrink: 0,
-	"&[data-state=\"on\"]": {
-		backgroundColor: "transparent",
-		borderColor: "var(--tsu-accent-9)",
-		color: "var(--tsu-accent-11)"
-	},
-	"&:last-child": { border: "1px solid var(--_tg-border)" }
-});
 var FilterGroup = (props = {}) => {
 	const [local, rest] = splitProps(mergeProps$1({
 		size: "md",
@@ -126,7 +59,11 @@ var FilterGroup = (props = {}) => {
 		if (allActive()) return;
 		emit([]);
 	};
-	const handleChange = (value) => emit(value);
+	const handleItemClick = (itemValue) => {
+		const current = value();
+		emit(current.includes(itemValue) ? current.filter((v) => v !== itemValue) : [...current, itemValue]);
+	};
+	const buttonClassNames = [pillClass, local.buttonClass].filter(Boolean).join(" ");
 	return jsx("div", mergeProps(rest, {
 		className: () => [
 			rootClass,
@@ -134,50 +71,48 @@ var FilterGroup = (props = {}) => {
 			local.className
 		].filter(Boolean).join(" "),
 		style: () => ({
-			...defaultStyle,
-			...sizeVars[access(local.size)],
+			"--_fg-gap": "var(--tsu-spacing-sm)",
 			...typeof sticky() === "number" ? { top: `${sticky()}px` } : void 0
 		}),
-		children: [() => {
-			const _el0 = _tmpl.cloneNode(true);
-			insert(_el0, () => local.allLabel);
-			setProp(_el0, "className", () => [allClass, local.buttonClass].filter(Boolean).join(" "));
-			setProp(_el0, "data-state", () => allActive() ? "on" : "off");
-			setProp(_el0, "onClick", () => handleAllClick);
-			return _el0;
-		}, jsx(ToggleGroup, mergeProps({
-			multiple: true,
+		children: [jsx(Button, mergeProps({
+			type: "button",
 			get size() {
 				return local.size;
 			},
-			get value() {
-				return allActive() ? [] : value();
-			},
-			onValueChange: handleChange,
-			get className() {
-				return [groupClass, local.groupClass].filter(Boolean).join(" ");
+			get solid() {
+				return allActive();
 			},
-			children: () => local.items.map((item) => jsx(ToggleGroupItem, mergeProps({
-				get key() {
-					return item.value;
-				},
-				get value() {
-					return item.value;
-				},
-				get disabled() {
-					return item.disabled;
-				},
-				get className() {
-					return [itemClass, local.buttonClass].filter(Boolean).join(" ");
-				},
-				children: () => item.label
-			})))
-		}))]
+			className: buttonClassNames,
+			onClick: handleAllClick,
+			children: () => local.allLabel
+		})), () => {
+			const _el0 = _tmpl.cloneNode(true);
+			insert(_el0, () => local.items.map((item) => {
+				const selected = value().includes(item.value);
+				return jsx(Button, mergeProps({
+					get key() {
+						return item.value;
+					},
+					type: "button",
+					get size() {
+						return local.size;
+					},
+					intent: selected ? "default" : "neutral",
+					get disabled() {
+						return item.disabled;
+					},
+					get className() {
+						return [selected && selectedItemClass, buttonClassNames].filter(Boolean).join(" ");
+					},
+					onClick: () => handleItemClick(item.value),
+					children: () => item.label
+				}));
+			}));
+			setProp(_el0, "className", () => [groupClass, local.groupClass].filter(Boolean).join(" "));
+			return _el0;
+		}]
 	}));
 };
-FilterGroup.origin = {
-	ToggleGroup,
-	ToggleGroupItem
-};
+FilterGroup.origin = { Button };
 //#endregion
 export { FilterGroup as default };

package/dist/components/Input.js

@@ -65,7 +65,7 @@ var variantClasses = {
 		}
 	}),
 	outline: css({
-		border: "1px solid var(--_input-border, var(--tsu-accent-8))",
+		border: "1px solid var(--_input-border)",
 		color: "var(--tsu-fg)",
 		"&:focus-within": {
 			backgroundColor: "var(--tsu-focus-bg)",
@@ -74,18 +74,16 @@ var variantClasses = {
 	})
 };
 var intentClasses = {
-	default: css({ "--_input-border": "var(--tsu-accent-8)" }),
-	neutral: css({ "--_input-border": "var(--tsu-neutral-6)" }),
-	danger: css({ "--_input-border": "var(--tsu-danger-9)" })
+	default: css({ "--_input-border": "var(--tsu-accent-outline-border)" }),
+	neutral: css({ "--_input-border": "var(--tsu-neutral-outline-border)" }),
+	danger: css({ "--_input-border": "var(--tsu-danger-outline-border)" })
 };
 var errorClass = css({
-	borderColor: "var(--tsu-danger-9) !important",
-	"&:focus-within": { borderColor: "var(--tsu-danger-9) !important" }
+	borderColor: "var(--tsu-danger-outline-border) !important",
+	"&:focus-within": { 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 inputClass = css({
@@ -97,13 +95,13 @@ var inputClass = css({
 	fontSize: "inherit",
 	color: "inherit",
 	padding: 0,
-	"&::placeholder": { color: "var(--tsu-neutral-11)" }
+	"&::placeholder": { color: "var(--tsu-text-secondary)" }
 });
 var affixClass = css({
 	flexShrink: 0,
 	display: "inline-flex",
 	alignItems: "center",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	userSelect: "none",
 	"& > svg": {
 		width: "1.3em",
@@ -124,16 +122,19 @@ var eyeButtonClass = css({
 	background: "none",
 	border: "none",
 	borderRadius: "var(--tsu-radius-l1-sm)",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	cursor: "pointer",
 	"& svg": {
 		width: "100%",
 		height: "100%",
 		display: "block"
 	},
-	"&:hover": { color: "var(--tsu-fg)" },
+	"&:active": {
+		color: "var(--tsu-fg)",
+		backgroundColor: "var(--tsu-pressed)"
+	},
 	"&:focus-visible": {
-		outline: "2px solid var(--tsu-accent-9)",
+		outline: "2px solid var(--tsu-accent-outline-border-hover)",
 		outlineOffset: "1px"
 	}
 });

package/dist/components/Link.js

@@ -3,14 +3,14 @@ import { css } from "@emotion/css";
 import { mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
 //#region src/components/Link.jsx
 var baseClass = css({
-	color: "var(--tsu-accent-11)",
+	color: "var(--tsu-accent-plain-fg)",
 	textDecoration: "none",
 	cursor: "pointer",
 	fontWeight: "var(--tsu-font-weight-medium)",
 	transition: "color var(--tsu-transition-fast), text-decoration-color var(--tsu-transition-fast)",
 	"&:hover": {
 		textDecoration: "underline",
-		textDecorationColor: "var(--tsu-accent-6)"
+		textDecorationColor: "var(--tsu-accent-subtle-bg-hover)"
 	},
 	"&:focus-visible": {
 		outline: "2px solid var(--tsu-focus-border)",

package/dist/components/Listbox.js

@@ -4,8 +4,8 @@ import { Listbox } from "@plastic-js/ark";
 import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Listbox.jsx
 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)",
 	zIndex: "var(--tsu-z-dropdown)",
@@ -21,12 +21,13 @@ css({
 	color: "var(--tsu-fg)",
 	cursor: "pointer",
 	"&[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)",
-		pointerEvents: "none"
+		opacity: "var(--tsu-disabled-opacity)",
+		pointerEvents: "none",
+		cursor: "not-allowed"
 	}
 });
 var Listbox$1 = (props = {}) => {

package/dist/components/Menu.js

@@ -6,8 +6,8 @@ import { splitProps } from "@plastic-js/plastic";
 //#region src/components/Menu.jsx
 var positionerClass = css({ zIndex: "var(--tsu-z-dropdown)" });
 var contentClass = 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)",
 	padding: "6px",
@@ -31,17 +31,18 @@ var itemClass = css({
 	textAlign: "left",
 	lineHeight: 1.4,
 	"&[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]": {
-		opacity: .4,
-		pointerEvents: "none"
+		opacity: "var(--tsu-disabled-opacity)",
+		pointerEvents: "none",
+		cursor: "not-allowed"
 	}
 });
 var separatorClass = css({
 	height: "1px",
-	backgroundColor: "var(--tsu-neutral-6)",
+	backgroundColor: "var(--tsu-border)",
 	margin: "4px 0"
 });
 var Menu$1 = (props = {}) => {

package/dist/components/MoneyInput.js

@@ -9,7 +9,7 @@ var affixSuffixClass = css({
 	fontWeight: "var(--tsu-font-weight-semibold)",
 	paddingLeft: "10px",
 	marginLeft: "var(--tsu-spacing-xs)",
-	borderLeft: "1px solid var(--tsu-neutral-7)"
+	borderLeft: "1px solid var(--tsu-border)"
 });
 var read = (value) => {
 	return typeof value === "function" ? value() : value;

package/dist/components/NumberInput.js

@@ -13,7 +13,7 @@ var rootBaseClass = css({
 });
 var variantClasses = {
 	solid: css({
-		backgroundColor: "var(--tsu-surface)",
+		backgroundColor: "var(--tsu-bg-control)",
 		border: "1px solid transparent",
 		"&:focus-within": {
 			backgroundColor: "var(--tsu-focus-bg)",
@@ -21,7 +21,7 @@ var variantClasses = {
 		}
 	}),
 	outline: css({
-		border: "1px solid var(--tsu-accent-8)",
+		border: "1px solid var(--tsu-accent-outline-border)",
 		"&:focus-within": {
 			backgroundColor: "var(--tsu-focus-bg)",
 			borderColor: "var(--tsu-focus-border)"
@@ -29,8 +29,8 @@ var variantClasses = {
 	})
 };
 var disabledClass = css({
-	borderColor: "var(--tsu-disabled-border)",
-	"& *": { color: "var(--tsu-disabled-fg)" }
+	opacity: "var(--tsu-disabled-opacity)",
+	cursor: "not-allowed"
 });
 var sizeClasses = {
 	xs: css({
@@ -62,8 +62,7 @@ var inputClass = css({
 	color: "var(--tsu-fg)",
 	fontFamily: "inherit",
 	textAlign: "center",
-	padding: 0,
-	"&:disabled": { color: "var(--tsu-disabled-fg)" }
+	padding: 0
 });
 var btnClass = css({
 	width: "28px",
@@ -73,14 +72,14 @@ var btnClass = css({
 	justifyContent: "center",
 	border: "none",
 	background: "transparent",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	cursor: "pointer",
 	fontFamily: "inherit",
 	fontSize: "14px",
 	touchAction: "manipulation",
-	"&:active:not(:disabled)": { backgroundColor: "var(--tsu-accent-3)" },
+	"&:active:not(:disabled)": { backgroundColor: "var(--tsu-pressed-accent)" },
 	"&:disabled": {
-		color: "var(--tsu-disabled-fg)",
+		color: "var(--tsu-text-subtle)",
 		cursor: "not-allowed"
 	}
 });

package/dist/components/Pagination.js

@@ -16,10 +16,10 @@ var itemClass = css({
 	minWidth: "var(--tsu-level-primary-md)",
 	height: "var(--tsu-level-primary-md)",
 	padding: "0 var(--tsu-spacing-sm)",
-	border: "1px solid var(--tsu-neutral-5)",
+	border: "1px solid var(--tsu-neutral-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",
@@ -27,12 +27,12 @@ var itemClass = css({
 	touchAction: "manipulation",
 	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast)",
 	"&[data-selected]": {
-		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)"
 	},
 	"&:disabled, &[data-disabled]": {
-		opacity: .5,
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	}
 });
@@ -41,7 +41,7 @@ var ellipsisClass = css({
 	alignItems: "center",
 	justifyContent: "center",
 	width: "var(--tsu-level-primary-md)",
-	color: "var(--tsu-neutral-9)",
+	color: "var(--tsu-text-subtle)",
 	fontSize: "var(--tsu-font-size-sm)",
 	userSelect: "none"
 });