@plastic-js/tsumiki 0.1.51 → 0.1.53

package/dist/components/Accordion.js

@@ -7,9 +7,9 @@ var _tmpl = template("<span aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" fill
 var rootClass = css({
 	display: "flex",
 	flexDirection: "column",
-	borderTop: "1px solid var(--tsu-neutral-6)"
+	borderTop: "1px solid var(--tsu-border)"
 });
-var itemClass = css({ borderBottom: "1px solid var(--tsu-neutral-6)" });
+var itemClass = css({ borderBottom: "1px solid var(--tsu-border)" });
 var triggerClass = css({
 	display: "flex",
 	alignItems: "center",
@@ -24,15 +24,15 @@ var triggerClass = css({
 	fontFamily: "inherit",
 	cursor: "pointer",
 	touchAction: "manipulation",
-	"&:active:not([disabled])": { backgroundColor: "var(--tsu-accent-3)" },
+	"&:active:not([disabled])": { backgroundColor: "var(--tsu-pressed-accent)" },
 	"&[disabled]": {
-		opacity: .4,
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	}
 });
 var chevronClass = css({
 	transition: "transform var(--tsu-transition-fast)",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	"& svg": {
 		width: "1em",
 		height: "1em",
@@ -43,7 +43,7 @@ var chevronClass = css({
 var contentClass = css({
 	padding: "0 var(--tsu-container-padding-md) var(--tsu-container-padding-md)",
 	fontSize: "var(--tsu-comp-font-size-sm)",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	lineHeight: 1.5
 });
 var AccordionRoot = (props = {}) => {

package/dist/components/Avatar.js

@@ -8,12 +8,12 @@ var NameCtx = createContext(() => "");
 var read = (v) => typeof v === "function" ? v() : v;
 var genderStyles = {
 	male: {
-		backgroundColor: "var(--tsu-accent-3)",
-		color: "var(--tsu-accent-11)"
+		backgroundColor: "var(--tsu-accent-subtle-bg)",
+		color: "var(--tsu-accent-subtle-fg)"
 	},
 	female: {
-		backgroundColor: "var(--red-3)",
-		color: "var(--red-11)"
+		backgroundColor: "var(--tsu-danger-subtle-bg)",
+		color: "var(--tsu-danger-subtle-fg)"
 	}
 };
 var getInitials = (name) => {

package/dist/components/BackToTop.js

@@ -16,8 +16,8 @@ var baseClass = css({
 	height: "48px",
 	border: "none",
 	borderRadius: "50%",
-	backgroundColor: "var(--tsu-accent-9)",
-	color: "var(--tsu-bg)",
+	backgroundColor: "var(--tsu-accent-solid-bg)",
+	color: "var(--tsu-accent-solid-fg)",
 	boxShadow: "var(--tsu-shadow-md)",
 	cursor: "pointer",
 	userSelect: "none",
@@ -29,7 +29,7 @@ var baseClass = css({
 	transition: "opacity var(--tsu-transition-normal), transform var(--tsu-transition-normal)",
 	"&:active": { transform: "scale(0.9)" },
 	"&:focus-visible": {
-		outline: "2px solid var(--tsu-accent-8)",
+		outline: "2px solid var(--tsu-accent-outline-border)",
 		outlineOffset: "2px"
 	}
 });

package/dist/components/BottomNavigation.js

@@ -13,8 +13,8 @@ var rootClass = css({
 	alignItems: "center",
 	height: "56px",
 	paddingBottom: "env(safe-area-inset-bottom)",
-	backgroundColor: "var(--tsu-surface)",
-	borderTop: "1px solid var(--tsu-neutral-6)",
+	backgroundColor: "var(--tsu-bg-panel)",
+	borderTop: "1px solid var(--tsu-border)",
 	zIndex: "var(--tsu-z-base)"
 });
 var itemClass = css({
@@ -26,13 +26,13 @@ var itemClass = css({
 	border: "none",
 	background: "none",
 	fontFamily: "inherit",
-	color: "var(--tsu-neutral-8)",
+	color: "var(--tsu-text-subtle)",
 	textDecoration: "none",
 	cursor: "pointer",
 	userSelect: "none",
 	touchAction: "manipulation",
 	transition: "color var(--tsu-transition-fast)",
-	"&[data-active]": { color: "var(--tsu-accent-11)" }
+	"&[data-active]": { color: "var(--tsu-accent-plain-fg)" }
 });
 var iconClass = css({
 	display: "flex",

package/dist/components/BottomSheet.js

@@ -13,7 +13,7 @@ var backdropClass = css({
 	position: "fixed",
 	inset: 0,
 	zIndex: 1400,
-	background: "rgba(0, 0, 0, 0.35)",
+	background: "var(--tsu-bg-overlay-soft)",
 	opacity: 0,
 	pointerEvents: "none",
 	transition: "opacity var(--tsu-transition-overlay-exit)",
@@ -84,7 +84,6 @@ var grabberClass = css({
 var contentClass = css({
 	display: "flex",
 	flexDirection: "column",
-	padding: "0 var(--tsu-container-padding-lg)",
 	flex: 1,
 	minHeight: 0
 });

package/dist/components/Button.js

@@ -18,9 +18,7 @@ var baseClass = css({
 	touchAction: "manipulation",
 	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast), opacity var(--tsu-transition-fast)",
 	"&:disabled": {
-		backgroundColor: "var(--tsu-disabled-bg)",
-		borderColor: "var(--tsu-disabled-border)",
-		color: "var(--tsu-disabled-fg)",
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	}
 });
@@ -82,25 +80,25 @@ var variantClasses = {
 };
 var intentClasses = {
 	default: css({
-		"--_btn-solid": "var(--tsu-accent-9)",
-		"--_btn-solid-active": "var(--tsu-accent-8)",
-		"--_btn-border": "var(--tsu-accent-9)",
-		"--_btn-border-active": "var(--tsu-accent-10)",
-		"--_btn-tint-bg": "var(--tsu-accent-3)"
+		"--_btn-solid": "var(--tsu-accent-solid-bg)",
+		"--_btn-solid-active": "var(--tsu-accent-solid-bg-hover)",
+		"--_btn-border": "var(--tsu-accent-outline-border)",
+		"--_btn-border-active": "var(--tsu-accent-outline-border-hover)",
+		"--_btn-tint-bg": "var(--tsu-accent-outline-bg-active)"
 	}),
 	neutral: css({
-		"--_btn-solid": "var(--tsu-neutral-9)",
-		"--_btn-solid-active": "var(--tsu-neutral-8)",
-		"--_btn-border": "var(--tsu-neutral-6)",
-		"--_btn-border-active": "var(--tsu-neutral-7)",
-		"--_btn-tint-bg": "var(--tsu-neutral-3)"
+		"--_btn-solid": "var(--tsu-neutral-solid-bg)",
+		"--_btn-solid-active": "var(--tsu-neutral-solid-bg-hover)",
+		"--_btn-border": "var(--tsu-neutral-outline-border)",
+		"--_btn-border-active": "var(--tsu-neutral-outline-border-hover)",
+		"--_btn-tint-bg": "var(--tsu-neutral-outline-bg-active)"
 	}),
 	danger: css({
-		"--_btn-solid": "var(--tsu-danger-9)",
-		"--_btn-solid-active": "var(--tsu-danger-8)",
-		"--_btn-border": "var(--tsu-danger-9)",
-		"--_btn-border-active": "var(--tsu-danger-10)",
-		"--_btn-tint-bg": "var(--tsu-danger-3)"
+		"--_btn-solid": "var(--tsu-danger-solid-bg)",
+		"--_btn-solid-active": "var(--tsu-danger-solid-bg-hover)",
+		"--_btn-border": "var(--tsu-danger-outline-border)",
+		"--_btn-border-active": "var(--tsu-danger-outline-border-hover)",
+		"--_btn-tint-bg": "var(--tsu-danger-outline-bg-active)"
 	})
 };
 var loadingOverlayClass = css({
@@ -115,7 +113,7 @@ var loadingOverlayClass = css({
 var loadingMaskClass = css({
 	position: "absolute",
 	inset: 0,
-	backgroundColor: "var(--tsu-neutral-3)",
+	backgroundColor: "var(--tsu-bg-control)",
 	opacity: .6,
 	borderRadius: "inherit"
 });

package/dist/components/Checkbox.js

@@ -71,40 +71,23 @@ var controlClass = css({
 	justifyContent: "center",
 	flexShrink: 0,
 	borderRadius: "var(--_cb-radius, var(--tsu-radius-l1-md))",
-	border: "1px solid var(--tsu-accent-8)",
-	backgroundColor: "var(--tsu-surface)",
+	border: "1px solid var(--tsu-accent-outline-border)",
+	backgroundColor: "var(--tsu-bg-panel)",
 	color: "transparent",
 	transition: "background-color var(--tsu-transition-fast), border-color var(--tsu-transition-fast), color var(--tsu-transition-fast), transform var(--tsu-transition-fast)",
 	"&[data-state=\"checked\"], &[data-state=\"indeterminate\"]": {
-		backgroundColor: "var(--tsu-accent-9)",
-		borderColor: "var(--tsu-accent-8)",
-		color: "var(--tsu-bg)"
-	},
-	"&[data-disabled]": {
-		backgroundColor: "var(--tsu-disabled-bg)",
-		borderColor: "var(--tsu-disabled-border)"
-	},
-	"&[data-disabled][data-state=\"checked\"], &[data-disabled][data-state=\"indeterminate\"]": {
-		backgroundColor: "var(--tsu-disabled-bg)",
-		borderColor: "var(--tsu-disabled-border)",
-		color: "var(--tsu-disabled-fg)"
+		backgroundColor: "var(--tsu-accent-solid-bg)",
+		borderColor: "var(--tsu-accent-solid-bg)",
+		color: "var(--tsu-accent-solid-fg)"
 	},
+	"&[data-disabled]": { opacity: "var(--tsu-disabled-opacity)" },
 	"&:active:not([data-disabled])": { transform: "scale(0.88)" }
 });
 var errorClass = css({
-	borderColor: "var(--tsu-danger-9)",
+	borderColor: "var(--tsu-danger-outline-border)",
 	"&[data-state=\"checked\"], &[data-state=\"indeterminate\"]": {
-		backgroundColor: "var(--tsu-danger-9)",
-		borderColor: "var(--tsu-danger-9)"
-	},
-	"&[data-disabled]": {
-		borderColor: "var(--tsu-danger-9)",
-		backgroundColor: "var(--tsu-surface)"
-	},
-	"&[data-disabled][data-state=\"checked\"], &[data-disabled][data-state=\"indeterminate\"]": {
-		backgroundColor: "var(--tsu-surface)",
-		borderColor: "var(--tsu-danger-9)",
-		color: "var(--tsu-danger-9)"
+		backgroundColor: "var(--tsu-danger-solid-bg)",
+		borderColor: "var(--tsu-danger-solid-bg)"
 	}
 });
 var indicatorClass = css({
@@ -122,10 +105,9 @@ var indicatorClass = css({
 var labelClass = css({
 	fontSize: "var(--_cb-font-size, var(--tsu-comp-font-size-md))",
 	lineHeight: "var(--_cb-line-height, var(--tsu-comp-line-height-md))",
-	color: "var(--tsu-fg)",
-	"&[data-disabled]": { color: "var(--tsu-disabled-fg)" }
+	color: "var(--tsu-fg)"
 });
-var errorLabelClass = css({ color: "var(--tsu-danger-11)" });
+var errorLabelClass = css({ color: "var(--tsu-danger-plain-fg)" });
 var roundedClass = css({ "--_cb-radius": "var(--tsu-radius-round)" });
 var read = (v) => typeof v === "function" ? v() : v;
 var Checkbox$1 = (props = {}) => {

package/dist/components/Clipboard.js

@@ -25,7 +25,7 @@ var baseClass = css({
 	borderRadius: "var(--_cb-radius, var(--tsu-radius-l1-md))",
 	fontFamily: "inherit",
 	cursor: "pointer",
-	color: "var(--tsu-neutral-9)",
+	color: "var(--tsu-text-subtle)",
 	backgroundColor: "transparent",
 	userSelect: "none",
 	touchAction: "manipulation",
@@ -73,7 +73,7 @@ var sizeClasses = {
 		"--_cb-radius": "var(--tsu-radius-l1-xl)"
 	})
 };
-var copiedClass = css({ color: "var(--tsu-success-9)" });
+var copiedClass = css({ color: "var(--tsu-success-solid-bg)" });
 var iconClass = css({
 	flexShrink: 0,
 	"& svg": {

package/dist/components/CloseButton.js

@@ -14,23 +14,23 @@ var baseClass = css({
 	border: "none",
 	borderRadius: "50%",
 	background: "transparent",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	cursor: "pointer",
 	fontFamily: "inherit",
 	touchAction: "manipulation",
 	transition: "background-color var(--tsu-transition-fast), color var(--tsu-transition-fast)",
 	"&:active:not([disabled])": {
 		color: "var(--tsu-fg)",
-		backgroundColor: "var(--tsu-accent-3)"
+		backgroundColor: "var(--tsu-pressed-accent)"
 	},
 	"&:focus-visible": {
 		color: "var(--tsu-fg)",
-		backgroundColor: "var(--tsu-accent-3)",
+		backgroundColor: "var(--tsu-pressed-accent)",
 		outline: "2px solid var(--tsu-focus-border)",
 		outlineOffset: "2px"
 	},
 	"&[disabled]": {
-		opacity: .4,
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	},
 	"& svg": {

package/dist/components/Collapsible.js

@@ -16,7 +16,7 @@ var triggerClass = css({
 	width: "100%",
 	padding: "var(--tsu-comp-padding-y-sm) var(--tsu-comp-padding-x-sm)",
 	border: "none",
-	background: "var(--tsu-neutral-2)",
+	background: "var(--tsu-bg-panel)",
 	borderRadius: "var(--tsu-radius-l1-md)",
 	color: "var(--tsu-fg)",
 	fontSize: "var(--tsu-comp-font-size-sm)",
@@ -30,12 +30,12 @@ var triggerClass = css({
 		flexShrink: 0,
 		width: "16px",
 		height: "16px",
-		color: "var(--tsu-neutral-11)",
+		color: "var(--tsu-text-secondary)",
 		transition: "transform var(--tsu-transition-normal)"
 	},
 	"&[aria-expanded=\"true\"] svg": { transform: "rotate(180deg)" },
 	"&:disabled": {
-		opacity: .5,
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed"
 	}
 });

package/dist/components/ColorPicker.js

@@ -47,7 +47,7 @@ var triggerClass = css({
 	width: "var(--_cp-trigger-size, var(--tsu-comp-secondary-height-md))",
 	height: "var(--_cp-trigger-size, var(--tsu-comp-secondary-height-md))",
 	padding: "3px",
-	border: "1px solid var(--tsu-neutral-7)",
+	border: "1px solid var(--tsu-border)",
 	borderRadius: "var(--tsu-radius-l1-md)",
 	cursor: "pointer",
 	background: "transparent",
@@ -65,8 +65,8 @@ var valueTextClass = css({
 	fontVariantNumeric: "tabular-nums"
 });
 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-xl)",
 	boxShadow: "var(--tsu-shadow-lg)",
 	padding: "16px",
@@ -119,7 +119,7 @@ var channelInputClass = css({
 	fontFamily: "inherit",
 	fontVariantNumeric: "tabular-nums",
 	textAlign: "center",
-	border: "1px solid var(--tsu-neutral-7)",
+	border: "1px solid var(--tsu-border)",
 	borderRadius: "var(--tsu-radius-l1-sm)",
 	padding: "4px 6px",
 	background: "transparent",
@@ -128,11 +128,11 @@ var channelInputClass = css({
 var eyeDropperClass = css({
 	fontSize: "12px",
 	padding: "6px 10px",
-	border: "1px solid var(--tsu-neutral-7)",
+	border: "1px solid var(--tsu-border)",
 	borderRadius: "var(--tsu-radius-l1-md)",
 	cursor: "pointer",
 	background: "transparent",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	fontFamily: "inherit"
 });
 var _Root = (props = {}) => {

package/dist/components/Combobox.js

@@ -7,21 +7,21 @@ var inputClass = css({
 	width: "100%",
 	height: "var(--tsu-comp-height-md)",
 	padding: "0 var(--tsu-comp-padding-x-md)",
-	background: "var(--tsu-surface)",
-	border: "1px solid var(--tsu-accent-8)",
+	background: "var(--tsu-bg-panel)",
+	border: "1px solid var(--tsu-accent-outline-border)",
 	borderRadius: "var(--tsu-radius-l1-md)",
 	color: "var(--tsu-fg)",
 	fontSize: "var(--tsu-comp-font-size-md)",
 	fontFamily: "inherit",
-	"&::placeholder": { color: "var(--tsu-neutral-11)" },
+	"&::placeholder": { color: "var(--tsu-text-secondary)" },
 	"&:focus": {
 		backgroundColor: "var(--tsu-focus-bg)",
 		borderColor: "var(--tsu-focus-border)"
 	}
 });
 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)",
 	zIndex: "var(--tsu-z-dropdown)",
@@ -37,12 +37,13 @@ var itemClass = css({
 	cursor: "pointer",
 	color: "var(--tsu-fg)",
 	"&[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 ArkRoot = Combobox.Root;

package/dist/components/{DateInput.js → DatePicker.js}

@@ -4,7 +4,7 @@ import { expandCircular, makeWheel } from "./DateWheel.js";
 import { Fragment, insert, jsx, mergeProps, setProp, template } from "@plastic-js/plastic/jsx-runtime";
 import { css } from "@emotion/css";
 import { createEffect, createSignal, mergeProps as mergeProps$1, splitProps } from "@plastic-js/plastic";
-//#region src/components/DateInput.jsx
+//#region src/components/DatePicker.jsx
 var _tmpl4 = template("<div></div>");
 var _tmpl3 = template("<div><div role=\"presentation\" aria-hidden=\"true\"></div><div role=\"dialog\" aria-label=\"Date picker\"><div><button type=\"button\">Cancel</button><span>Select Date</span><button type=\"button\">Done</button></div><div><div><div><span>Year</span><div><div></div><div></div></div></div><div><span>Month</span><div><div></div><div></div></div></div><div><span>Day</span><div><div></div><div></div></div></div></div></div></div></div>");
 var _tmpl2 = template("<span></span>");
@@ -55,29 +55,42 @@ var triggerWrapperClass = css({
 	cursor: "pointer",
 	color: "inherit",
 	borderRadius: "10px",
-	"&:focus-visible": { boxShadow: "0 0 0 2px var(--tsu-accent-9)" },
+	"&:focus-visible": { boxShadow: "0 0 0 2px var(--_di-border-focus)" },
 	"&:disabled, &[aria-disabled=\"true\"]": {
-		opacity: .4,
+		opacity: "var(--tsu-disabled-opacity)",
 		cursor: "not-allowed",
 		boxShadow: "none"
 	}
 });
 var triggerDisabledClass = css({
-	opacity: .4,
+	opacity: "var(--tsu-disabled-opacity)",
 	cursor: "not-allowed"
 });
+var intentClasses = {
+	default: css({
+		"--_di-border": "var(--tsu-accent-outline-border)",
+		"--_di-border-focus": "var(--tsu-accent-outline-border-hover)"
+	}),
+	neutral: css({
+		"--_di-border": "var(--tsu-neutral-outline-border)",
+		"--_di-border-focus": "var(--tsu-neutral-outline-border-hover)"
+	}),
+	danger: css({
+		"--_di-border": "var(--tsu-danger-outline-border)",
+		"--_di-border-focus": "var(--tsu-danger-outline-border-hover)"
+	})
+};
 var triggerBaseClass = css({
 	width: "100%",
 	background: "transparent",
-	border: "1px solid var(--tsu-accent-8)",
+	border: "1px solid var(--_di-border)",
 	color: "var(--tsu-fg)",
 	fontFamily: "inherit",
 	boxSizing: "border-box",
 	display: "flex",
 	alignItems: "center",
 	cursor: "pointer",
-	transition: "border-color var(--tsu-transition-fast), background-color var(--tsu-transition-fast)",
-	"&:hover:not(:disabled)": { borderColor: "var(--tsu-focus-border)" }
+	transition: "border-color var(--tsu-transition-fast), background-color var(--tsu-transition-fast)"
 });
 var triggerSizeClasses = {
 	xs: css({
@@ -111,7 +124,7 @@ var triggerSizeClasses = {
 		borderRadius: "var(--tsu-radius-l1-xl)"
 	})
 };
-var triggerPlaceholderClass = css({ color: "var(--tsu-neutral-11)" });
+var triggerPlaceholderClass = css({ color: "var(--tsu-text-secondary)" });
 var triggerValueClass = css({ color: "var(--tsu-fg)" });
 var calendarIconClass = css({
 	position: "absolute",
@@ -120,7 +133,7 @@ var calendarIconClass = css({
 	transform: "translateY(-50%)",
 	width: "18px",
 	height: "18px",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	pointerEvents: "none"
 });
 var overlayClass = css({
@@ -135,7 +148,7 @@ var overlayClass = css({
 var backdropClass = css({
 	position: "absolute",
 	inset: 0,
-	background: "rgba(0,0,0,0.5)",
+	background: "var(--tsu-bg-overlay)",
 	opacity: 0,
 	transition: "opacity 240ms ease"
 });
@@ -144,10 +157,10 @@ var sheetClass = css({
 	width: "100%",
 	display: "flex",
 	flexDirection: "column",
-	background: "var(--tsu-surface)",
-	borderTop: "1px solid var(--tsu-neutral-7)",
+	background: "var(--tsu-bg-panel)",
+	borderTop: "1px solid var(--tsu-border)",
 	borderRadius: "18px 18px 0 0",
-	boxShadow: "0 -8px 32px rgba(0,0,0,0.4)",
+	boxShadow: "var(--tsu-shadow-up)",
 	paddingBottom: "env(safe-area-inset-bottom, 0px)",
 	transform: "translateY(100%)",
 	transition: "transform 280ms cubic-bezier(0.32, 0.72, 0, 1)"
@@ -162,14 +175,14 @@ var toolbarClass = css({
 	justifyContent: "space-between",
 	alignItems: "center",
 	padding: "12px 16px",
-	borderBottom: "1px solid var(--tsu-neutral-7)",
+	borderBottom: "1px solid var(--tsu-border)",
 	flexShrink: 0
 });
 var toolbarBtnClass = css({
 	background: "none",
 	border: "none",
 	padding: "6px 0",
-	color: "var(--tsu-accent-9)",
+	color: "var(--tsu-accent-subtle-fg)",
 	fontSize: "16px",
 	fontFamily: "inherit",
 	cursor: "pointer"
@@ -195,7 +208,7 @@ var columnWrapperClass = css({
 });
 var columnLabelClass = css({
 	fontSize: "11px",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	textTransform: "uppercase",
 	letterSpacing: "0.5px",
 	marginBottom: "6px",
@@ -233,7 +246,7 @@ var highlightBarClass = css({
 	right: "10%",
 	height: `36px`,
 	borderRadius: "8px",
-	background: "rgba(255,255,255,0.06)",
+	background: "var(--tsu-pressed-accent)",
 	pointerEvents: "none",
 	zIndex: 1
 });
@@ -243,7 +256,7 @@ var itemBaseClass = css({
 	alignItems: "center",
 	justifyContent: "center",
 	fontSize: "20px",
-	color: "var(--tsu-neutral-11)",
+	color: "var(--tsu-text-secondary)",
 	userSelect: "none",
 	whiteSpace: "nowrap",
 	overflow: "hidden",
@@ -262,16 +275,18 @@ var mountWheel = (el, wheel) => {
 	wheel.mount(el);
 };
 var read = (v) => typeof v === "function" ? v() : v;
-var DateInput = (props = {}) => {
+var DatePicker = (props = {}) => {
 	const [local] = splitProps(mergeProps$1({
 		size: "md",
-		disabled: false
+		disabled: false,
+		intent: "default"
 	}, props), [
 		"value",
 		"onValueChange",
 		"placeholder",
 		"disabled",
 		"size",
+		"intent",
 		"className"
 	]);
 	const open = createSignal(false);
@@ -327,7 +342,7 @@ var DateInput = (props = {}) => {
 			return () => {
 				const _el0 = _tmpl2.cloneNode(true);
 				insert(_el0, () => displayDate ? formatDateLabel(displayDate) : local.placeholder || "Select date");
-				setProp(_el0, "className", () => `${triggerBaseClass} ${triggerSizeClasses[read(local.size)]} ${displayDate ? triggerValueClass : triggerPlaceholderClass}`);
+				setProp(_el0, "className", () => `${triggerBaseClass} ${intentClasses[read(local.intent)]} ${triggerSizeClasses[read(local.size)]} ${displayDate ? triggerValueClass : triggerPlaceholderClass}`);
 				return _el0;
 			};
 		}, _el1);
@@ -466,4 +481,4 @@ var DateInput = (props = {}) => {
 	}] });
 };
 //#endregion
-export { DateInput as default };
+export { DatePicker as default };

package/dist/components/Dialog.js

@@ -13,14 +13,14 @@ var _tmpl = template("<div><!><!></div>");
 var backdropModalClass = css({
 	position: "fixed",
 	inset: 0,
-	background: "rgba(0, 0, 0, 0.45)",
+	background: "var(--tsu-bg-overlay)",
 	backdropFilter: "blur(8px)",
 	WebkitBackdropFilter: "blur(8px)"
 });
 var backdropSheetClass = css({
 	position: "fixed",
 	inset: 0,
-	background: "rgba(0, 0, 0, 0.35)",
+	background: "var(--tsu-bg-overlay-soft)",
 	backdropFilter: "blur(8px)",
 	WebkitBackdropFilter: "blur(8px)"
 });
@@ -55,7 +55,7 @@ var sheetContentIn = keyframes({
 	to: { transform: "translateY(0)" }
 });
 var contentModalClass = css({
-	background: "var(--tsu-surface)",
+	background: "var(--tsu-bg-panel)",
 	borderRadius: "var(--tsu-radius-l3-md)",
 	width: "100%",
 	maxWidth: "440px",
@@ -68,7 +68,7 @@ var contentModalClass = css({
 	animation: `${modalContentIn} 200ms ease`
 });
 var contentSheetClass = css({
-	background: "var(--tsu-surface)",
+	background: "var(--tsu-bg-panel)",
 	borderRadius: "var(--tsu-radius-l3-md) var(--tsu-radius-l3-md) 0 0",
 	width: "100%",
 	maxHeight: "70vh",
@@ -84,7 +84,7 @@ var headerClass = css({
 	justifyContent: "space-between",
 	padding: "18px var(--tsu-container-padding-lg) var(--tsu-spacing-lg)",
 	marginBottom: "var(--tsu-spacing-sm)",
-	borderBottom: "1px solid var(--tsu-neutral-7)",
+	borderBottom: "1px solid var(--tsu-border)",
 	flexShrink: 0
 });
 var titleWrapClass = css({
@@ -95,7 +95,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",
@@ -108,7 +108,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",