@burdenoff/fe-libs 2026.619.2 → 2026.623.1

package/dist/ui/stepper.js

@@ -9,7 +9,7 @@ function a({ steps: a, active: o, onStepClick: s, allowSkipAhead: c = !1, classN
 		let t = a[o];
 		return /* @__PURE__ */ i("div", {
 			"data-slot": "stepper-mobile",
-			className: e("flex flex-col gap-2 rounded-lg border border-border-default bg-bg-surface px-4 py-3", l),
+			className: e("flex flex-col gap-2 rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 px-4 py-3", l),
 			role: "navigation",
 			"aria-label": "Steps",
 			children: [/* @__PURE__ */ i("div", {
@@ -31,7 +31,7 @@ function a({ steps: a, active: o, onStepClick: s, allowSkipAhead: c = !1, classN
 					return /* @__PURE__ */ r("span", {
 						role: "listitem",
 						"aria-current": i === "active" ? "step" : void 0,
-						className: e("h-1.5 flex-1 rounded-full transition-colors", i === "done" && "bg-action-primary-bg", i === "active" && "bg-action-primary-bg", i === "todo" && "bg-border-default")
+						className: e("h-1.5 flex-1 rounded-full transition-colors", i === "done" && "bg-action-primary-bg", i === "active" && "bg-action-primary-bg", i === "todo" && "bg-border-subtle")
 					}, t.key);
 				})
 			})]
@@ -43,7 +43,7 @@ function a({ steps: a, active: o, onStepClick: s, allowSkipAhead: c = !1, classN
 		"aria-label": "Steps",
 		children: a.map((t, l) => {
 			let u = l < o ? "done" : l === o ? "active" : "todo", d = !!s && (c || l <= o), f = /* @__PURE__ */ r("span", {
-				className: e("inline-flex size-7 items-center justify-center rounded-full border text-xs font-semibold transition-colors", u === "done" && "border-action-primary-bg bg-action-primary-bg text-action-primary-text", u === "active" && "border-action-primary-bg text-action-primary-bg", u === "todo" && "border-border-default text-text-tertiary"),
+				className: e("inline-flex size-7 items-center justify-center rounded-full border text-xs font-semibold transition-colors", u === "done" && "border-action-primary-bg bg-action-primary-bg text-action-primary-text", u === "active" && "border-action-primary-bg bg-[var(--color-accent-soft)] text-action-primary-bg", u === "todo" && "border-border-default text-text-muted"),
 				"aria-hidden": "true",
 				children: u === "done" ? /* @__PURE__ */ r(n, { className: "size-4" }) : l + 1
 			}), p = /* @__PURE__ */ i("span", {
@@ -52,7 +52,7 @@ function a({ steps: a, active: o, onStepClick: s, allowSkipAhead: c = !1, classN
 					className: e("block text-sm font-medium", u === "todo" ? "text-text-secondary" : "text-text-primary"),
 					children: t.label
 				}), t.description ? /* @__PURE__ */ r("span", {
-					className: "block text-xs text-text-tertiary",
+					className: "block text-xs text-text-muted",
 					children: t.description
 				}) : null]
 			});
@@ -62,13 +62,13 @@ function a({ steps: a, active: o, onStepClick: s, allowSkipAhead: c = !1, classN
 				children: [d ? /* @__PURE__ */ i("button", {
 					type: "button",
 					onClick: () => s(l),
-					className: "flex items-center gap-3 min-w-0 rounded-md py-1 pr-1 transition-colors hover:bg-bg-sunken focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-bg/40",
+					className: "flex items-center gap-3 min-w-0 rounded-button py-1 pr-1 transition-colors hover:bg-bg-sunken focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)] focus-visible:ring-1 focus-visible:ring-[var(--color-focus-ring)]",
 					children: [f, p]
 				}) : /* @__PURE__ */ i("div", {
 					className: "flex items-center gap-3 min-w-0",
 					children: [f, p]
 				}), l < a.length - 1 ? /* @__PURE__ */ r("span", {
-					className: e("flex-1 h-px", u === "done" ? "bg-action-primary-bg" : "bg-border-default"),
+					className: e("flex-1 h-px", u === "done" ? "bg-action-primary-bg" : "bg-border-subtle"),
 					"aria-hidden": "true"
 				}) : null]
 			}, t.key);

package/dist/ui/switch.js

@@ -7,11 +7,11 @@ import * as n from "@radix-ui/react-switch";
 function r({ className: r, ...i }) {
 	return /* @__PURE__ */ t(n.Root, {
 		"data-slot": "switch",
-		className: e("peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-border-default shadow-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-action-primary-bg/40 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-action-primary-bg data-[state=checked]:bg-action-primary-bg data-[state=unchecked]:bg-bg-sunken", r),
+		className: e("peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-border-default shadow-elevation-1 outline-none transition-colors duration-200 ease-[var(--motion-easing-out)] focus-visible:shadow-[var(--shadow-focus)] focus-visible:ring-1 focus-visible:ring-[var(--color-focus-ring)] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-action-primary-bg data-[state=checked]:bg-action-primary-bg data-[state=unchecked]:bg-bg-sunken", r),
 		...i,
 		children: /* @__PURE__ */ t(n.Thumb, {
 			"data-slot": "switch-thumb",
-			className: e("pointer-events-none block size-4 rounded-full border border-border-default bg-bg-surface shadow-sm ring-0 transition-transform dark:bg-text-primary data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0")
+			className: e("pointer-events-none block size-4 rounded-full border border-border-default bg-bg-surface shadow-elevation-1 ring-0 transition-transform dark:bg-text-primary data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0")
 		})
 	});
 }

package/dist/ui/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/ui/table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAI1F,iBAAS,KAAK,CAAC,EACb,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,gBAAgB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,2CAM1E;AACD,iBAAS,WAAW,CAAC,EACnB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,uBAAuB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAA;CAAE,2CAExF;AACD,iBAAS,SAAS,CAAC,EACjB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,uBAAuB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAA;CAAE,2CAExF;AACD,iBAAS,WAAW,CAAC,EACnB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,uBAAuB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAA;CAAE,2CAQxF;AACD,iBAAS,QAAQ,CAAC,EAChB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,mBAAmB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAA;CAAE,2CAWhF;AACD,iBAAS,SAAS,CAAC,EACjB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAA;CAAE,2CAWpF;AACD,iBAAS,SAAS,CAAC,EACjB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAA;CAAE,2CAQpF;AACD,iBAAS,YAAY,CAAC,EACpB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,uBAAuB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAA;CAAE,2CAIxF;AACD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/ui/table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAI1F,iBAAS,KAAK,CAAC,EACb,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,gBAAgB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAAE,2CAM1E;AACD,iBAAS,WAAW,CAAC,EACnB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,uBAAuB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAA;CAAE,2CAQxF;AACD,iBAAS,SAAS,CAAC,EACjB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,uBAAuB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAA;CAAE,2CAQxF;AACD,iBAAS,WAAW,CAAC,EACnB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,uBAAuB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAA;CAAE,2CAWxF;AACD,iBAAS,QAAQ,CAAC,EAChB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,mBAAmB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAA;CAAE,2CAWhF;AACD,iBAAS,SAAS,CAAC,EACjB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAA;CAAE,2CAWpF;AACD,iBAAS,SAAS,CAAC,EACjB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,gBAAgB,CAAC,oBAAoB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAA;CAAE,2CAQpF;AACD,iBAAS,YAAY,CAAC,EACpB,GAAG,EACH,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,uBAAuB,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAA;CAAE,2CAIxF;AACD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC"}

package/dist/ui/table.js

@@ -14,49 +14,49 @@ function n({ ref: n, className: r, ...i }) {
 function r({ ref: n, className: r, ...i }) {
 	return /* @__PURE__ */ t("thead", {
 		ref: n,
-		className: e("[&_tr]:border-b", r),
+		className: e("[&_tr]:border-b [&_tr]:border-border-subtle", r),
 		...i
 	});
 }
 function i({ ref: n, className: r, ...i }) {
 	return /* @__PURE__ */ t("tbody", {
 		ref: n,
-		className: e("[&_tr:last-child]:border-0", r),
+		className: e("divide-y divide-border-subtle [&_tr:last-child]:border-0", r),
 		...i
 	});
 }
 function a({ ref: n, className: r, ...i }) {
 	return /* @__PURE__ */ t("tfoot", {
 		ref: n,
-		className: e("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", r),
+		className: e("border-t border-border-subtle bg-bg-sunken font-medium text-text-primary [&>tr]:last:border-b-0", r),
 		...i
 	});
 }
 function o({ ref: n, className: r, ...i }) {
 	return /* @__PURE__ */ t("tr", {
 		ref: n,
-		className: e("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", r),
+		className: e("border-b border-border-subtle transition-colors hover:bg-bg-sunken data-[state=selected]:bg-[var(--color-accent-soft)]", r),
 		...i
 	});
 }
 function s({ ref: n, className: r, ...i }) {
 	return /* @__PURE__ */ t("th", {
 		ref: n,
-		className: e("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", r),
+		className: e("h-11 px-4 text-left align-middle text-xs font-medium uppercase tracking-wide text-text-muted [&:has([role=checkbox])]:pr-0", r),
 		...i
 	});
 }
 function c({ ref: n, className: r, ...i }) {
 	return /* @__PURE__ */ t("td", {
 		ref: n,
-		className: e("p-4 align-middle [&:has([role=checkbox])]:pr-0", r),
+		className: e("p-4 align-middle text-text-primary [&:has([role=checkbox])]:pr-0", r),
 		...i
 	});
 }
 function l({ ref: n, className: r, ...i }) {
 	return /* @__PURE__ */ t("caption", {
 		ref: n,
-		className: e("mt-4 text-sm text-muted-foreground", r),
+		className: e("mt-4 text-sm text-text-secondary", r),
 		...i
 	});
 }

package/dist/ui/tabs.js

@@ -13,14 +13,14 @@ function r({ className: r, ...i }) {
 function i({ className: r, ...i }) {
 	return /* @__PURE__ */ t(n.List, {
 		"data-slot": "tabs-list",
-		className: e("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", r),
+		className: e("bg-bg-sunken text-text-secondary inline-flex h-9 w-fit items-center justify-center rounded-button p-[3px]", r),
 		...i
 	});
 }
 function a({ className: r, ...i }) {
 	return /* @__PURE__ */ t(n.Trigger, {
 		"data-slot": "tabs-trigger",
-		className: e("data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", r),
+		className: e("text-text-secondary data-[state=active]:bg-bg-surface data-[state=active]:text-text-primary data-[state=active]:shadow-elevation-1 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-button border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all duration-200 ease-[var(--motion-easing-out)] hover:text-text-primary focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)] focus-visible:ring-1 focus-visible:ring-[var(--color-focus-ring)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", r),
 		...i
 	});
 }

package/dist/ui/textarea.js

@@ -3,7 +3,7 @@ import { jsx as t } from "react/jsx-runtime";
 //#region src/ui/textarea.tsx
 function n({ ref: n, className: r, ...i }) {
 	return /* @__PURE__ */ t("textarea", {
-		className: e("flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", r),
+		className: e("flex min-h-[80px] w-full rounded-input border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary transition-colors duration-200 placeholder:text-text-placeholder focus-visible:border-border-focus focus-visible:outline-none focus-visible:shadow-[var(--shadow-focus)] focus-visible:ring-1 focus-visible:ring-[var(--color-focus-ring)] disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-status-error-border", r),
 		ref: n,
 		...i
 	});

package/dist/ui/tooltip.js

@@ -7,7 +7,7 @@ function o({ ref: r, className: i, sideOffset: a = 4, ...o }) {
 	return /* @__PURE__ */ t(n.Content, {
 		ref: r,
 		sideOffset: a,
-		className: e("z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", i),
+		className: e("z-50 overflow-hidden rounded-button bg-bg-inverse px-3 py-1.5 text-xs font-medium text-text-inverse shadow-elevation-3 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", i),
 		...o
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@burdenoff/fe-libs",
-  "version": "2026.619.2",
+  "version": "2026.623.1",
   "description": "Burdenoff frontend primitives and domain libraries",
   "type": "module",
   "imports": {

package/src/shared/tokens/build/foundation.css

@@ -142,28 +142,47 @@
   --font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --font-family-mono: 'Fira Code', 'Roboto Mono', 'Courier New', monospace;
 
-  /* Border Radius */
-  --radius-sm: 4px;
-  --radius-md: 6px;
-  --radius-lg: 8px;
+  /* Border Radius
+   * Boff UI uses a softer, modern geometry. xs/2xl/3xl extend the original
+   * sm/md/lg/xl scale without breaking existing tokens. Semantic radius
+   * aliases (--radius-card/button/input) live in semantic.css. */
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
   --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 20px;
   --radius-pill: 9999px;
 
-  /* Shadows */
+  /* Shadows (light-mode defaults; dark-family themes deepen these in
+   * semantic.css / themes.css so elevation stays legible on dark surfaces).
+   * elevation-4/5 are Boff UI additions for popovers / modals / palettes. */
   --shadow-elevation-0: none;
-  --shadow-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-  --shadow-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --shadow-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --shadow-elevation-1: 0 1px 2px 0 rgba(15, 23, 42, 0.06), 0 1px 3px -1px rgba(15, 23, 42, 0.08);
+  --shadow-elevation-2: 0 2px 4px -1px rgba(15, 23, 42, 0.07), 0 8px 16px -6px rgba(15, 23, 42, 0.10);
+  --shadow-elevation-3: 0 8px 20px -6px rgba(15, 23, 42, 0.12), 0 16px 32px -12px rgba(15, 23, 42, 0.12);
+  --shadow-elevation-4: 0 16px 32px -10px rgba(15, 23, 42, 0.16), 0 24px 56px -20px rgba(15, 23, 42, 0.18);
+  --shadow-elevation-5: 0 24px 56px -16px rgba(15, 23, 42, 0.22), 0 40px 88px -32px rgba(15, 23, 42, 0.24);
   --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.2);
 
+  /* Glass blur primitives (consumed via backdrop-blur-[var(--blur-glass)]) */
+  --blur-glass-sm: 8px;
+  --blur-glass: 16px;
+  --blur-glass-lg: 24px;
+
   /* Motion Durations */
-  --motion-duration-fast: 150ms;
-  --motion-duration-normal: 250ms;
-  --motion-duration-slow: 350ms;
+  --motion-duration-instant: 60ms;
+  --motion-duration-fast: 140ms;
+  --motion-duration-normal: 220ms;
+  --motion-duration-slow: 320ms;
+  --motion-duration-slower: 480ms;
 
   /* Motion Easings */
-  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
   --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
+  --motion-easing-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-easing-spring: cubic-bezier(0.22, 1, 0.36, 1);
 
   /* Z-Index */
   --z-base: 0;

package/src/shared/tokens/build/semantic.css

@@ -113,14 +113,30 @@
   --size-icon-md: 20px;
   --size-icon-lg: 24px;
   --size-icon-xl: 32px;
-  --radius-card: 8px;
-  --radius-button: 6px;
-  --radius-input: 6px;
+  /* Boff UI: softer modern geometry */
+  --radius-card: 12px;
+  --radius-button: 8px;
+  --radius-input: 8px;
+  /* Light-mode elevation — layered, soft, neutral-slate tinted */
   --shadow-elevation-0: none;
-  --shadow-elevation-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-  --shadow-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --shadow-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
-  --shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.2);
+  --shadow-elevation-1: 0 1px 2px 0 rgba(15, 23, 42, 0.06), 0 1px 3px -1px rgba(15, 23, 42, 0.08);
+  --shadow-elevation-2: 0 2px 4px -1px rgba(15, 23, 42, 0.07), 0 8px 16px -6px rgba(15, 23, 42, 0.10);
+  --shadow-elevation-3: 0 8px 20px -6px rgba(15, 23, 42, 0.12), 0 16px 32px -12px rgba(15, 23, 42, 0.12);
+  --shadow-elevation-4: 0 16px 32px -10px rgba(15, 23, 42, 0.16), 0 24px 56px -20px rgba(15, 23, 42, 0.18);
+  --shadow-elevation-5: 0 24px 56px -16px rgba(15, 23, 42, 0.22), 0 40px 88px -32px rgba(15, 23, 42, 0.24);
+  --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--color-action-primary-bg) 28%, transparent);
+  /* Boff UI semantic elevation aliases (used by redesigned surfaces) */
+  --shadow-card: var(--shadow-elevation-1);
+  --shadow-float: var(--shadow-elevation-3);
+  --shadow-overlay: var(--shadow-elevation-5);
+  --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--color-action-primary-bg) 28%, transparent), 0 10px 28px -10px color-mix(in oklab, var(--color-action-primary-bg) 30%, transparent);
+  /* Boff UI glass + accent wash + focus ring (theme-aware) */
+  --color-surface-glass: rgba(255, 255, 255, 0.72);
+  --color-border-glass: rgba(15, 23, 42, 0.08);
+  --color-accent-soft: color-mix(in oklab, var(--color-action-primary-bg) 10%, transparent);
+  --color-accent-softHover: color-mix(in oklab, var(--color-action-primary-bg) 16%, transparent);
+  --color-focus-ring: var(--color-action-primary-bg);
+  --blur-glass: 16px;
   /* Accent color tokens */
   --color-accent-blue: #2563EB;
   --color-accent-blue-hover: #1D4ED8;
@@ -161,27 +177,28 @@
 [data-theme="dark"],
 .dark,
 :root.dark {
-  --color-bg-canvas: #030712;
-  --color-bg-surface: #111827;
-  --color-bg-elevated: #1F2937;
-  --color-bg-sunken: #030712;
+  /* Boff UI dark family — deep blue-charcoal with clear elevation steps */
+  --color-bg-canvas: #0A0E16;
+  --color-bg-surface: #121826;
+  --color-bg-elevated: #1B2333;
+  --color-bg-sunken: #070A11;
   --color-bg-inverse: #F9FAFB;
-  --color-bg-overlay: rgba(0, 0, 0, 0.7);
+  --color-bg-overlay: rgba(3, 6, 12, 0.72);
   --color-bg-accent: #172554;
   --color-bg-accentSubtle: #1E3A8A;
-  --color-bg-disabled: #1F2937;
-  --color-text-primary: #F9FAFB;
-  --color-text-secondary: #9CA3AF;
-  --color-text-tertiary: #9CA3AF;
-  --color-text-muted: #9CA3AF;
+  --color-bg-disabled: #1B2333;
+  --color-text-primary: #F4F6FB;
+  --color-text-secondary: #AEB6C5;
+  --color-text-tertiary: #8B94A6;
+  --color-text-muted: #8B94A6;
   --color-text-inverse: #111827;
-  --color-text-link: #60A5FA;
-  --color-text-linkHover: #93C5FD;
-  --color-text-placeholder: #6B7280;
-  --color-text-disabled: #6B7280;
-  --color-border-default: #374151;
-  --color-border-subtle: #1F2937;
-  --color-border-strong: #4B5563;
+  --color-text-link: #7AB6FF;
+  --color-text-linkHover: #A8CFFF;
+  --color-text-placeholder: #6B7587;
+  --color-text-disabled: #5A6377;
+  --color-border-default: #2A3343;
+  --color-border-subtle: #1C2433;
+  --color-border-strong: #3C4759;
   --color-action-primary-bg: #2563EB;
   --color-action-primary-bgHover: #1D4ED8;
   --color-action-primary-bgActive: #1E40AF;
@@ -252,6 +269,23 @@
   --color-accent-indigo: #818CF8;
   --color-accent-indigo-hover: #A5B4FC;
   --color-accent-indigo-subtle: #312E81;
+  /* Boff UI dark elevation — deeper ambient + faint top highlight so cards
+   * read as lifted on dark surfaces (light-mode shadows are invisible here) */
+  --shadow-elevation-1: 0 1px 0 0 rgba(255, 255, 255, 0.03), 0 2px 6px -2px rgba(0, 0, 0, 0.4);
+  --shadow-elevation-2: 0 1px 0 0 rgba(255, 255, 255, 0.03), 0 10px 24px -8px rgba(0, 0, 0, 0.5);
+  --shadow-elevation-3: 0 1px 0 0 rgba(255, 255, 255, 0.04), 0 18px 44px -12px rgba(0, 0, 0, 0.56);
+  --shadow-elevation-4: 0 1px 0 0 rgba(255, 255, 255, 0.04), 0 28px 64px -16px rgba(0, 0, 0, 0.62);
+  --shadow-elevation-5: 0 1px 0 0 rgba(255, 255, 255, 0.05), 0 40px 96px -24px rgba(0, 0, 0, 0.7);
+  --shadow-card: var(--shadow-elevation-1);
+  --shadow-float: var(--shadow-elevation-3);
+  --shadow-overlay: var(--shadow-elevation-5);
+  --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--color-action-primary-bg) 36%, transparent), 0 12px 32px -10px color-mix(in oklab, var(--color-action-primary-bg) 40%, transparent);
+  /* Boff UI glass + accent wash + focus ring - dark mode */
+  --color-surface-glass: rgba(20, 27, 41, 0.66);
+  --color-border-glass: rgba(255, 255, 255, 0.08);
+  --color-accent-soft: color-mix(in oklab, var(--color-action-primary-bg) 22%, transparent);
+  --color-accent-softHover: color-mix(in oklab, var(--color-action-primary-bg) 30%, transparent);
+  --color-focus-ring: var(--color-action-primary-bg);
   /* Semantic aliases - dark mode */
   --color-bg-muted: var(--color-bg-sunken);
   --color-border-hover: var(--color-border-strong);
@@ -289,6 +323,21 @@
   --size-controlHeight-lg: 40px;
 }
 
+/* Boff UI Spacious Density — touch-friendly / public-facing screens */
+[data-density="spacious"] {
+  --space-pagePadding: 32px;
+  --space-sectionGap: 40px;
+  --space-cardPadding: 20px;
+  --space-formGap: 20px;
+  --space-controlGap: 12px;
+  --space-listGap: 12px;
+  --space-inlineGap: 12px;
+  --space-iconGap: 10px;
+  --size-controlHeight-sm: 40px;
+  --size-controlHeight-md: 44px;
+  --size-controlHeight-lg: 52px;
+}
+
 /* Large Typography Scale - Auto-generated */
 [data-typography="large"] {
   --font-size-body-sm: 16px;
@@ -299,3 +348,14 @@
   --font-size-heading-h3: 28px;
   --font-size-heading-h4: 24px;
 }
+
+/* Boff UI Small Typography Scale — dense power-user screens */
+[data-typography="small"] {
+  --font-size-body-sm: 13px;
+  --font-size-body-md: 14px;
+  --font-size-body-lg: 16px;
+  --font-size-heading-h1: 30px;
+  --font-size-heading-h2: 24px;
+  --font-size-heading-h3: 20px;
+  --font-size-heading-h4: 18px;
+}

package/src/shared/tokens/build/tailwind.preset.js

@@ -104,6 +104,13 @@ export default {
         'accent-indigo-hover': 'var(--color-accent-indigo-hover)',
         'accent-indigo-subtle': 'var(--color-accent-indigo-subtle)',
 
+        // Boff UI glass + accent wash + focus ring (theme-aware)
+        'surface-glass': 'var(--color-surface-glass)',
+        'border-glass': 'var(--color-border-glass)',
+        'accent-soft': 'var(--color-accent-soft)',
+        'accent-soft-hover': 'var(--color-accent-softHover)',
+        'focus-ring': 'var(--color-focus-ring)',
+
         // Semantic aliases
         'bg-muted': 'var(--color-bg-muted)',
         'border-hover': 'var(--color-border-hover)',
@@ -176,6 +183,12 @@ export default {
         'elevation-1': 'var(--shadow-elevation-1)',
         'elevation-2': 'var(--shadow-elevation-2)',
         'elevation-3': 'var(--shadow-elevation-3)',
+        'elevation-4': 'var(--shadow-elevation-4)',
+        'elevation-5': 'var(--shadow-elevation-5)',
+        'card': 'var(--shadow-card)',
+        'float': 'var(--shadow-float)',
+        'overlay': 'var(--shadow-overlay)',
+        'glow': 'var(--shadow-glow)',
         'focus': 'var(--shadow-focus)',
       },
       height: {