@burdenoff/fe-libs 2026.619.2 → 2026.623.2

package/dist/chrome/PluginSettingsPage.js

@@ -28,13 +28,13 @@ var o = () => {
 		children: [/* @__PURE__ */ a("div", {
 			className: "w-52 border-r border-border-default p-4 flex-shrink-0",
 			children: [/* @__PURE__ */ i("h2", {
-				className: "text-heading-h5 font-semibold text-text-primary mb-4",
+				className: "text-base font-semibold text-text-primary mb-4",
 				children: "Settings"
 			}), /* @__PURE__ */ i("nav", {
 				className: "space-y-1",
 				children: l.map((e) => /* @__PURE__ */ i("button", {
 					onClick: () => d(e),
-					className: `w-full text-left px-3 py-2 rounded text-sm transition-colors ${e === u ? "bg-bg-surface-active text-text-primary font-medium" : "text-text-secondary hover:text-text-primary hover:bg-bg-surface-hover"}`,
+					className: `w-full text-left px-3 py-2 rounded-button text-sm transition-colors ${e === u ? "bg-[var(--color-accent-soft)] text-text-primary font-medium" : "text-text-secondary hover:text-text-primary hover:bg-bg-sunken"}`,
 					children: e
 				}, e))
 			})]
@@ -45,7 +45,7 @@ var o = () => {
 				return /* @__PURE__ */ a("div", {
 					className: "mb-8",
 					children: [/* @__PURE__ */ i("h3", {
-						className: "text-heading-h5 font-semibold text-text-primary mb-4",
+						className: "text-base font-semibold text-text-primary mb-4",
 						children: e.label
 					}), /* @__PURE__ */ i(t, {})]
 				}, e.id);

package/dist/chrome/PluginWidgetGrid.js

@@ -13,7 +13,7 @@ var i = ({ category: i, emptyState: a = "No plugin widgets registered." }) => {
 		children: s.map((e) => {
 			let t = e.component, i = e.defaultSize.cols >= 4 ? "md:col-span-2 xl:col-span-4" : e.defaultSize.cols === 3 ? "md:col-span-2 xl:col-span-3" : e.defaultSize.cols === 2 ? "md:col-span-2 xl:col-span-2" : "md:col-span-1 xl:col-span-1", a = { minHeight: `${Math.max(1, e.defaultSize.rows) * 10}rem` };
 			return /* @__PURE__ */ r("section", {
-				className: `rounded-card border border-border-subtle bg-bg-surface shadow-sm ${i}`,
+				className: `rounded-card border border-border-subtle bg-bg-surface shadow-elevation-1 transition-all duration-200 ${i}`,
 				style: a,
 				"data-ui-plugin-widget": e.id,
 				children: [/* @__PURE__ */ n("div", {

package/dist/chrome/ProductPickerSheet.js

@@ -21,10 +21,10 @@ var o = ({ open: o, onOpenChange: s, products: c, currentProductId: l, onProduct
 				className: "flex-1 overflow-y-auto py-2",
 				children: c.map((e) => /* @__PURE__ */ a("button", {
 					onClick: () => d(e),
-					className: `w-full flex items-center gap-4 px-4 py-3.5 text-body-sm transition-colors ${e.id === l ? "bg-action-ghost-bg-hover" : "hover:bg-action-ghost-bg-hover"}`,
+					className: `w-full flex items-center gap-4 px-4 py-3.5 text-body-sm transition-colors ${e.id === l ? "bg-[var(--color-accent-soft)]" : "hover:bg-bg-sunken"}`,
 					children: [
 						e.icon ? /* @__PURE__ */ i("div", {
-							className: "size-10 rounded-lg bg-action-primary-bg/10 flex items-center justify-center flex-shrink-0",
+							className: "size-10 rounded-lg bg-[var(--color-accent-soft)] flex items-center justify-center flex-shrink-0",
 							children: e.icon
 						}) : /* @__PURE__ */ i("div", {
 							className: "size-10 rounded-lg bg-action-primary-bg flex items-center justify-center flex-shrink-0",
@@ -54,7 +54,7 @@ var o = ({ open: o, onOpenChange: s, products: c, currentProductId: l, onProduct
 							})
 						}),
 						e.url && e.id !== l && /* @__PURE__ */ i("svg", {
-							className: "size-4 text-text-tertiary flex-shrink-0",
+							className: "size-4 text-text-muted flex-shrink-0",
 							fill: "none",
 							stroke: "currentColor",
 							viewBox: "0 0 24 24",

package/dist/chrome/ProductSwitcher.js

@@ -17,13 +17,13 @@ var a = ({ products: a, currentProductId: o, onProductChange: s, compact: c = !1
 		ref: d,
 		children: [/* @__PURE__ */ i("button", {
 			onClick: () => u(!l),
-			className: `flex items-center gap-2 px-3 py-2 rounded-button hover:bg-action-ghost-bg-hover transition-colors ${l ? "bg-action-ghost-bg-hover" : ""}`,
+			className: `flex items-center gap-2 px-3 py-2 rounded-button hover:bg-bg-sunken transition-colors ${l ? "bg-bg-sunken" : ""}`,
 			"aria-label": "Switch product",
 			"aria-expanded": l,
 			children: [
 				/* @__PURE__ */ r("div", {
-					className: "size-6 rounded flex items-center justify-center flex-shrink-0 text-white font-semibold text-xs",
-					style: { backgroundColor: f?.color || "#3b82f6" },
+					className: "size-6 rounded-md flex items-center justify-center flex-shrink-0 text-text-inverse font-semibold text-xs",
+					style: { backgroundColor: f?.color || "var(--color-action-primary-bg)" },
 					children: f?.icon || f?.name.charAt(0)
 				}),
 				!c && /* @__PURE__ */ r("span", {
@@ -44,11 +44,11 @@ var a = ({ products: a, currentProductId: o, onProductChange: s, compact: c = !1
 				})
 			]
 		}), l && /* @__PURE__ */ i("div", {
-			className: "absolute right-0 mt-2 w-[calc(100vw-1.5rem)] sm:w-64 max-w-64 bg-bg-elevated border border-border-default rounded-lg shadow-lg z-50 py-2",
+			className: "absolute right-0 mt-2 w-[calc(100vw-1.5rem)] sm:w-64 max-w-64 bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] z-50 py-2 overflow-hidden animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200",
 			children: [/* @__PURE__ */ r("div", {
 				className: "px-4 py-2 border-b border-border-subtle",
 				children: /* @__PURE__ */ r("p", {
-					className: "text-body-xs font-semibold text-text-secondary uppercase",
+					className: "text-[11px] font-medium text-text-muted uppercase tracking-wider",
 					children: "Switch Product"
 				})
 			}), /* @__PURE__ */ r("div", {
@@ -58,11 +58,11 @@ var a = ({ products: a, currentProductId: o, onProductChange: s, compact: c = !1
 					disabled: e.comingSoon,
 					"aria-disabled": e.comingSoon,
 					title: e.comingSoon ? "Coming soon" : void 0,
-					className: `w-full flex items-center gap-3 px-4 py-2.5 text-body-sm transition-colors ${e.comingSoon ? "text-text-tertiary cursor-not-allowed opacity-60" : e.id === o ? "bg-action-ghost-bg-hover text-text-primary font-medium" : "text-text-primary hover:bg-action-ghost-bg-hover"}`,
+					className: `w-full flex items-center gap-3 px-4 py-2.5 text-body-sm transition-colors ${e.comingSoon ? "text-text-muted cursor-not-allowed opacity-60" : e.id === o ? "bg-[var(--color-accent-soft)] text-text-primary font-medium" : "text-text-primary hover:bg-bg-sunken"}`,
 					children: [
 						/* @__PURE__ */ r("div", {
-							className: "size-8 rounded flex items-center justify-center flex-shrink-0 text-white font-semibold text-sm",
-							style: { backgroundColor: e.color || "#3b82f6" },
+							className: "size-8 rounded-md flex items-center justify-center flex-shrink-0 text-text-inverse font-semibold text-sm",
+							style: { backgroundColor: e.color || "var(--color-action-primary-bg)" },
 							children: e.icon || e.name.charAt(0)
 						}),
 						/* @__PURE__ */ r("span", {
@@ -73,7 +73,7 @@ var a = ({ products: a, currentProductId: o, onProductChange: s, compact: c = !1
 							className: "shrink-0 whitespace-nowrap rounded-full border border-border-subtle bg-bg-sunken px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-text-secondary",
 							children: "Coming soon"
 						}) : e.id === o && /* @__PURE__ */ r("svg", {
-							className: "size-5 text-action-primary-text",
+							className: "size-5 text-action-primary-bg",
 							fill: "currentColor",
 							viewBox: "0 0 20 20",
 							children: /* @__PURE__ */ r("path", {

package/dist/chrome/ProfileSwitcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileSwitcher.d.ts","sourceRoot":"","sources":["../../src/chrome/ProfileSwitcher.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE;QACL,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oCAAoC;IACpC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,wBAAwB;IACxB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA2RpD,CAAC"}
+{"version":3,"file":"ProfileSwitcher.d.ts","sourceRoot":"","sources":["../../src/chrome/ProfileSwitcher.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE;QACL,SAAS,EAAE,MAAM,CAAC;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,qCAAqC;IACrC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oCAAoC;IACpC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,wBAAwB;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,wBAAwB;IACxB,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAuRpD,CAAC"}

package/dist/chrome/ProfileSwitcher.js

@@ -15,7 +15,7 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 		ref: _,
 		children: [/* @__PURE__ */ a("button", {
 			onClick: () => g(!h),
-			className: `flex items-center gap-2 p-2 rounded-button hover:bg-action-ghost-bg-hover transition-colors ${h ? "bg-action-ghost-bg-hover" : ""}`,
+			className: `flex items-center gap-2 p-2 rounded-button hover:bg-bg-sunken transition-colors ${h ? "bg-bg-sunken" : ""}`,
 			"aria-label": "User menu",
 			"aria-expanded": h,
 			children: [
@@ -56,7 +56,7 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 				})
 			]
 		}), h && /* @__PURE__ */ a("div", {
-			className: "absolute right-0 mt-2 w-[calc(100vw-1.5rem)] sm:w-72 max-w-72 bg-bg-elevated border border-border-default rounded-lg shadow-lg z-50",
+			className: "absolute right-0 mt-2 w-[calc(100vw-1.5rem)] sm:w-72 max-w-72 bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] overflow-hidden z-50 animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-200",
 			children: [
 				!y && /* @__PURE__ */ a("div", {
 					className: "px-6 py-4 text-center border-b border-border-subtle",
@@ -73,7 +73,7 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 							})
 						}),
 						/* @__PURE__ */ a("h3", {
-							className: "text-h5 font-semibold text-text-primary mb-1",
+							className: "text-base font-semibold text-text-primary mb-1",
 							children: [
 								"Hi, ",
 								o.firstName,
@@ -96,7 +96,7 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 							b.lastName
 						]
 					}), /* @__PURE__ */ i("p", {
-						className: "text-caption text-text-tertiary mt-0.5 truncate",
+						className: "text-xs text-text-muted mt-0.5 truncate",
 						children: b.email
 					})]
 				}),
@@ -107,14 +107,14 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 						onClick: () => {
 							l(), g(!1);
 						},
-						className: "w-full px-4 py-2.5 text-body-sm font-medium text-text-primary bg-action-ghost-bg hover:bg-action-ghost-bg-hover rounded-button border border-border-default transition-colors",
+						className: "w-full px-4 py-2.5 text-body-sm font-medium text-text-primary bg-bg-surface hover:bg-bg-sunken rounded-button border border-border-subtle transition-colors",
 						children: "View Profile"
 					})
 				}),
 				y && x.length > 0 && /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("div", {
 					className: "px-4 pt-2 pb-1",
 					children: /* @__PURE__ */ i("p", {
-						className: "text-caption font-semibold text-text-tertiary uppercase tracking-wide",
+						className: "text-[11px] font-medium text-text-muted uppercase tracking-wider",
 						children: "Switch Account"
 					})
 				}), /* @__PURE__ */ i("div", {
@@ -122,7 +122,7 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 					children: x.map((e) => {
 						let t = `${e.firstName?.charAt(0) || ""}${e.lastName?.charAt(0) || ""}`.toUpperCase();
 						return /* @__PURE__ */ i("div", {
-							className: "px-4 py-2 hover:bg-action-ghost-bg-hover transition-colors group",
+							className: "px-4 py-2 hover:bg-bg-sunken transition-colors group",
 							children: /* @__PURE__ */ a("div", {
 								className: "flex items-center gap-3",
 								children: [
@@ -151,7 +151,7 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 												e.lastName
 											]
 										}), /* @__PURE__ */ i("p", {
-											className: "text-caption text-text-tertiary truncate",
+											className: "text-xs text-text-muted truncate",
 											children: e.email
 										})]
 									}),
@@ -160,7 +160,7 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 										onClick: (t) => {
 											t.stopPropagation(), p(e.id);
 										},
-										className: "size-6 flex items-center justify-center rounded-full hover:bg-status-error-bg/20 text-text-tertiary hover:text-status-error-text transition-colors opacity-0 group-hover:opacity-100",
+										className: "size-6 flex items-center justify-center rounded-full hover:bg-status-error-bg-subtle text-text-muted hover:text-status-error-text transition-colors opacity-0 group-hover:opacity-100",
 										"aria-label": "Remove account",
 										children: /* @__PURE__ */ i("svg", {
 											className: "size-4",
@@ -189,7 +189,7 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 							onClick: () => {
 								f(), g(!1);
 							},
-							className: "flex items-center justify-center gap-2 px-3 py-2.5 text-body-sm font-medium text-text-primary bg-action-ghost-bg hover:bg-action-ghost-bg-hover rounded-button border border-border-default transition-colors",
+							className: "flex items-center justify-center gap-2 px-3 py-2.5 text-body-sm font-medium text-text-primary bg-bg-surface hover:bg-bg-sunken rounded-button border border-border-subtle transition-colors",
 							children: [/* @__PURE__ */ i("svg", {
 								className: "size-4",
 								fill: "none",
@@ -207,7 +207,7 @@ var o = ({ user: o, accounts: s = [], activeAccountId: c, onViewProfile: l, onLo
 							onClick: () => {
 								u(), g(!1);
 							},
-							className: "flex items-center justify-center gap-2 px-3 py-2.5 text-body-sm font-medium text-text-primary bg-action-ghost-bg hover:bg-action-ghost-bg-hover rounded-button border border-border-default transition-colors",
+							className: "flex items-center justify-center gap-2 px-3 py-2.5 text-body-sm font-medium text-text-primary bg-bg-surface hover:bg-bg-sunken rounded-button border border-border-subtle transition-colors",
 							children: [/* @__PURE__ */ i("svg", {
 								className: "size-4",
 								fill: "none",

package/dist/chrome/ShortcutHelpDialog.js

@@ -37,11 +37,11 @@ var s = ({ isOpen: s, onClose: c, shortcuts: l }) => {
 	return /* @__PURE__ */ o("div", {
 		className: "fixed inset-0 z-[9999] flex items-center justify-center animate-in fade-in duration-200",
 		children: [/* @__PURE__ */ a("div", {
-			className: "absolute inset-0 bg-black/50 backdrop-blur-sm",
+			className: "absolute inset-0 bg-bg-overlay backdrop-blur-sm",
 			onClick: c,
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ o("div", {
-			className: "relative bg-bg-surface border border-border-default rounded-lg shadow-2xl max-w-2xl w-full mx-4 max-h-[85dvh] flex flex-col animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-4 duration-300",
+			className: "relative bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] max-w-2xl w-full mx-4 max-h-[85dvh] flex flex-col animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-4 duration-300",
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-labelledby": "shortcut-dialog-title",
@@ -58,7 +58,7 @@ var s = ({ isOpen: s, onClose: c, shortcuts: l }) => {
 					})] }), /* @__PURE__ */ a("button", {
 						type: "button",
 						onClick: c,
-						className: "p-2 hover:bg-action-ghost-bg-hover rounded-button text-text-secondary transition-colors",
+						className: "p-2 hover:bg-bg-sunken rounded-button text-text-secondary transition-colors",
 						"aria-label": "Close",
 						children: /* @__PURE__ */ a(i, { className: "size-5" })
 					})]
@@ -73,13 +73,13 @@ var s = ({ isOpen: s, onClose: c, shortcuts: l }) => {
 						}), /* @__PURE__ */ a("div", {
 							className: "space-y-1",
 							children: f[e].map((e, n) => /* @__PURE__ */ o("div", {
-								className: "flex items-center justify-between py-2 px-3 rounded-md hover:bg-action-ghost-bg-hover transition-all duration-200 hover:translate-x-0.5",
+								className: "flex items-center justify-between py-2 px-3 rounded-button hover:bg-bg-sunken transition-all duration-200 hover:translate-x-0.5",
 								style: { animationDelay: `${n * 30}ms` },
 								children: [/* @__PURE__ */ a("span", {
 									className: "text-text-primary text-sm",
 									children: e.description
 								}), /* @__PURE__ */ a("kbd", {
-									className: "ml-4 px-2.5 py-1 bg-bg-elevated border border-border-default rounded text-text-secondary text-xs font-mono whitespace-nowrap transition-all duration-200 hover:scale-105",
+									className: "ml-4 px-2.5 py-1 bg-bg-sunken border border-border-subtle rounded text-text-secondary text-xs font-mono whitespace-nowrap transition-all duration-200 hover:scale-105",
 									children: t(e.keys)
 								})]
 							}, e.id))
@@ -87,11 +87,11 @@ var s = ({ isOpen: s, onClose: c, shortcuts: l }) => {
 					})
 				}),
 				/* @__PURE__ */ a("div", {
-					className: "p-4 border-t border-border-subtle bg-bg-sunken/50 rounded-b-lg",
+					className: "p-4 border-t border-border-subtle bg-bg-sunken/50 rounded-b-card",
 					children: /* @__PURE__ */ o("div", {
 						className: "flex items-center justify-between text-xs",
 						children: [/* @__PURE__ */ o("p", {
-							className: "text-text-tertiary",
+							className: "text-text-muted",
 							children: [h, " shortcuts"]
 						}), /* @__PURE__ */ o("p", {
 							className: "text-text-secondary",
@@ -99,14 +99,14 @@ var s = ({ isOpen: s, onClose: c, shortcuts: l }) => {
 								"Press",
 								" ",
 								/* @__PURE__ */ a("kbd", {
-									className: "px-1.5 py-0.5 bg-bg-surface border border-border-default rounded font-mono",
+									className: "px-1.5 py-0.5 bg-bg-surface border border-border-subtle rounded font-mono",
 									children: "?"
 								}),
 								" ",
 								"or",
 								" ",
 								/* @__PURE__ */ a("kbd", {
-									className: "px-1.5 py-0.5 bg-bg-surface border border-border-default rounded font-mono",
+									className: "px-1.5 py-0.5 bg-bg-surface border border-border-subtle rounded font-mono",
 									children: "Esc"
 								}),
 								" ",

package/dist/chrome/SideNavigation.js

@@ -61,7 +61,7 @@ var f = ({ items: f, currentPath: p, collapsed: m = !1, onItemClick: h, onToggle
 				children: /* @__PURE__ */ u("button", {
 					type: "button",
 					onClick: g,
-					className: "p-2 rounded-button hover:bg-action-ghost-bg-hover text-text-secondary hover:text-text-primary transition-colors",
+					className: "p-2 rounded-button hover:bg-bg-sunken text-text-secondary hover:text-text-primary transition-colors",
 					"aria-label": "Close sidebar",
 					children: /* @__PURE__ */ u("svg", {
 						className: "size-5",
@@ -94,7 +94,7 @@ var f = ({ items: f, currentPath: p, collapsed: m = !1, onItemClick: h, onToggle
 							children: [
 								a > 0 && !m && /* @__PURE__ */ u("div", { className: "my-2 border-t border-border-subtle" }),
 								n.label && !m && /* @__PURE__ */ u("p", {
-									className: "px-card-padding pb-1 text-xs font-semibold uppercase tracking-wider text-text-tertiary",
+									className: "px-3 pb-1.5 pt-0.5 text-[11px] font-medium uppercase tracking-wider text-text-muted",
 									children: n.label
 								}),
 								/* @__PURE__ */ u("ul", {
@@ -116,7 +116,7 @@ var f = ({ items: f, currentPath: p, collapsed: m = !1, onItemClick: h, onToggle
 									}), /* @__PURE__ */ d(t, {
 										side: "right",
 										children: [/* @__PURE__ */ u("p", { children: n.label }), n.badge !== void 0 && n.badge > 0 && /* @__PURE__ */ u("span", {
-											className: "ml-2 text-xs bg-status-error-bg text-status-error-text px-2 py-0.5 rounded-pill",
+											className: "ml-2 text-xs bg-status-error-bg-subtle text-status-error-text px-2 py-0.5 rounded-full",
 											children: n.badge
 										})]
 									})] }, n.id) : /* @__PURE__ */ u(i, {

package/dist/chrome/Sidebar.js

@@ -10,7 +10,7 @@ var a = ({ sections: a, isCollapsed: o = !1, onToggleCollapse: s, header: c, foo
 		});
 	};
 	return /* @__PURE__ */ i("aside", {
-		className: e("flex flex-col bg-bg-elevated border-r border-border-subtle transition-all duration-300", u),
+		className: e("flex flex-col bg-bg-surface border-r border-border-subtle transition-all duration-300", u),
 		style: { width: o ? f : d },
 		children: [
 			c && /* @__PURE__ */ r("div", {
@@ -28,7 +28,7 @@ var a = ({ sections: a, isCollapsed: o = !1, onToggleCollapse: s, header: c, foo
 							children: t.collapsible ? /* @__PURE__ */ i("button", {
 								type: "button",
 								onClick: () => h(t.title),
-								className: "flex items-center justify-between w-full text-text-tertiary text-xs font-semibold uppercase tracking-wider hover:text-text-secondary transition-colors",
+								className: "flex items-center justify-between w-full text-text-muted text-[11px] font-medium uppercase tracking-wider hover:text-text-secondary transition-colors",
 								"aria-expanded": !a,
 								children: [/* @__PURE__ */ r("span", { children: t.title }), /* @__PURE__ */ r("svg", {
 									className: e("w-4 h-4 transition-transform", a && "rotate-180"),
@@ -43,7 +43,7 @@ var a = ({ sections: a, isCollapsed: o = !1, onToggleCollapse: s, header: c, foo
 									})
 								})]
 							}) : /* @__PURE__ */ r("div", {
-								className: "text-text-tertiary text-xs font-semibold uppercase tracking-wider",
+								className: "text-text-muted text-[11px] font-medium uppercase tracking-wider",
 								children: t.title
 							})
 						}), (!t.collapsible || !a) && /* @__PURE__ */ r("ul", {
@@ -51,9 +51,9 @@ var a = ({ sections: a, isCollapsed: o = !1, onToggleCollapse: s, header: c, foo
 							children: t.items.map((t) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ i("button", {
 								onClick: t.onClick,
 								disabled: t.disabled,
-								className: e("w-full flex items-center gap-icon-gap rounded-button transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border", o ? "justify-center p-3" : "px-3 py-2", {
-									"bg-action-primary-bg text-action-primary-text font-medium": t.isActive && !t.disabled,
-									"text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover": !t.isActive && !t.disabled,
+								className: e("w-full flex items-center gap-3 rounded-button text-sm transition-all duration-200 ease-[var(--motion-easing-out)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border", o ? "justify-center p-3" : "px-3 py-2", {
+									"bg-[var(--color-accent-soft)] text-text-primary font-medium": t.isActive && !t.disabled,
+									"text-text-secondary hover:text-text-primary hover:bg-bg-sunken": !t.isActive && !t.disabled,
 									"text-text-disabled cursor-not-allowed opacity-50": t.disabled
 								}),
 								"aria-label": o ? t.label : void 0,
@@ -67,7 +67,7 @@ var a = ({ sections: a, isCollapsed: o = !1, onToggleCollapse: s, header: c, foo
 									className: "flex-1 text-left truncate",
 									children: t.label
 								}), t.badge !== void 0 && /* @__PURE__ */ r("span", {
-									className: e("flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-xs font-medium", t.isActive ? "bg-action-primary-text text-action-primary-bg" : "bg-status-info-bg text-status-info-text"),
+									className: e("flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-xs font-medium tabular-nums", t.isActive ? "bg-action-primary-bg text-action-primary-text" : "bg-status-info-bg-subtle text-status-info-text"),
 									children: typeof t.badge == "number" && t.badge > 99 ? "99+" : t.badge
 								})] })]
 							}) }, t.id))
@@ -81,7 +81,7 @@ var a = ({ sections: a, isCollapsed: o = !1, onToggleCollapse: s, header: c, foo
 			}),
 			s && /* @__PURE__ */ r("button", {
 				onClick: s,
-				className: e("border-t border-border-subtle p-4 text-text-secondary hover:text-text-primary hover:bg-action-ghost-bg-hover transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border", o && "flex justify-center"),
+				className: e("border-t border-border-subtle p-4 text-text-secondary hover:text-text-primary hover:bg-bg-sunken transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-action-primary-border", o && "flex justify-center"),
 				"aria-label": o ? "Expand sidebar" : "Collapse sidebar",
 				title: o ? "Expand sidebar" : "Collapse sidebar",
 				type: "button",

package/dist/chrome/StatusBar.js

@@ -9,7 +9,7 @@ var i = () => {
 		right: i.filter((e) => e.section === "right" && e.visible !== !1).sort((e, t) => e.priority - t.priority)
 	}), [i]);
 	return i.length === 0 ? null : /* @__PURE__ */ r("div", {
-		className: "flex items-center justify-between h-6 px-2 bg-bg-surface-secondary border-t border-border-default text-xs text-text-secondary flex-shrink-0",
+		className: "flex items-center justify-between h-6 px-3 bg-[var(--color-surface-glass)] backdrop-blur-[var(--blur-glass)] border-t border-[var(--color-border-glass)] text-xs text-text-secondary flex-shrink-0",
 		"data-ui-plugin-status-bar": "true",
 		children: [
 			/* @__PURE__ */ n("div", {

package/dist/chrome/Tabs.js

@@ -43,7 +43,7 @@ var r = ({ items: r, activeTabId: i, onTabChange: a, variant: o = "default", siz
 						children: r.label
 					}),
 					r.badge !== void 0 && /* @__PURE__ */ t("span", {
-						className: e("flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-xs font-medium", c && o === "pills" ? "bg-action-primary-text text-action-primary-bg" : "bg-status-info-bg text-status-info-text"),
+						className: e("flex items-center justify-center min-w-[20px] h-5 px-1.5 rounded-full text-xs font-medium tabular-nums", c && o === "pills" ? "bg-action-primary-text text-action-primary-bg" : "bg-status-info-bg-subtle text-status-info-text"),
 						children: typeof r.badge == "number" && r.badge > 99 ? "99+" : r.badge
 					})
 				]

package/dist/chrome/contextSwitcher/OrganizationList.js

@@ -14,7 +14,7 @@ var o = ({ searchedOrganizations: o, currentOrganizationId: s, searchQuery: c, o
 		className: "flex-1 overflow-y-auto py-1",
 		children: o.length > 0 ? o.map((e, t) => /* @__PURE__ */ a("button", {
 			onClick: () => u(e),
-			className: `w-full flex items-center gap-3 px-4 py-3 text-sm transition-all duration-200 ease-out animate-in fade-in-0 slide-in-from-left-2 ${e.id === s ? "bg-[var(--color-bg-accent)] text-[var(--color-text-primary)] font-medium" : "text-[var(--color-text-primary)] hover:bg-[var(--color-action-ghost-bgHover)] hover:translate-x-0.5"}`,
+			className: `w-full flex items-center gap-3 px-4 py-3 text-sm transition-all duration-200 ease-[var(--motion-easing-out)] animate-in fade-in-0 slide-in-from-left-2 ${e.id === s ? "bg-[var(--color-accent-soft)] text-text-primary font-medium" : "text-text-primary hover:bg-bg-sunken hover:translate-x-0.5"}`,
 			style: { animationDelay: `${t * 30}ms` },
 			children: [
 				/* @__PURE__ */ i(n, { className: "size-5 text-[var(--color-text-secondary)] flex-shrink-0" }),

package/dist/chrome/contextSwitcher/ProjectList.js

@@ -14,7 +14,7 @@ var o = ({ filteredProjects: o, searchedProjects: s, currentProjectId: c, search
 		className: "flex-1 overflow-y-auto py-1",
 		children: o.length === 0 ? /* @__PURE__ */ i(t, { message: "No projects in this workspace" }) : s.length > 0 ? s.map((e, t) => /* @__PURE__ */ a("button", {
 			onClick: () => d(e),
-			className: `w-full flex items-center gap-3 px-4 py-3 text-sm transition-all duration-200 ease-out animate-in fade-in-0 slide-in-from-left-2 ${e.id === c ? "bg-[var(--color-bg-accent)] text-[var(--color-text-primary)] font-medium" : "text-[var(--color-text-primary)] hover:bg-[var(--color-action-ghost-bgHover)] hover:translate-x-0.5"}`,
+			className: `w-full flex items-center gap-3 px-4 py-3 text-sm transition-all duration-200 ease-[var(--motion-easing-out)] animate-in fade-in-0 slide-in-from-left-2 ${e.id === c ? "bg-[var(--color-accent-soft)] text-text-primary font-medium" : "text-text-primary hover:bg-bg-sunken hover:translate-x-0.5"}`,
 			style: { animationDelay: `${t * 30}ms` },
 			children: [
 				/* @__PURE__ */ i(r, { className: "size-5 text-[var(--color-text-secondary)] flex-shrink-0" }),

package/dist/chrome/contextSwitcher/SearchInput.js

@@ -28,7 +28,7 @@ var n = ({ value: n, onChange: r, placeholder: i, inputRef: a }) => /* @__PURE__
 			n && /* @__PURE__ */ e("button", {
 				type: "button",
 				onClick: () => r(""),
-				className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-md hover:bg-[var(--color-action-ghost-bgHover)] text-[var(--color-text-tertiary)] hover:text-[var(--color-text-primary)] transition-all duration-150 ease-out",
+				className: "absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded-button hover:bg-bg-sunken text-text-muted hover:text-text-primary transition-all duration-150 ease-[var(--motion-easing-out)]",
 				"aria-label": "Clear search",
 				children: /* @__PURE__ */ e("svg", {
 					className: "size-4",

package/dist/chrome/contextSwitcher/TabButton.js

@@ -2,7 +2,7 @@ import { jsx as e } from "react/jsx-runtime";
 //#region src/chrome/contextSwitcher/TabButton.tsx
 var t = ({ label: t, isActive: n, onClick: r }) => /* @__PURE__ */ e("button", {
 	onClick: r,
-	className: `flex-1 px-3 py-2.5 text-[13px] font-medium whitespace-nowrap text-center transition-all duration-200 ease-out ${n ? "text-[var(--color-text-link)] border-b-2 border-[var(--color-action-primary-bg)] bg-[var(--color-bg-accent)]" : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-action-ghost-bgHover)] border-b-2 border-transparent"}`,
+	className: `flex-1 px-3 py-2.5 text-[13px] font-medium whitespace-nowrap text-center transition-all duration-200 ease-[var(--motion-easing-out)] ${n ? "text-text-primary border-b-2 border-[var(--color-action-primary-bg)] bg-[var(--color-accent-soft)]" : "text-text-secondary hover:text-text-primary hover:bg-bg-sunken border-b-2 border-transparent"}`,
 	children: t
 });
 //#endregion

package/dist/chrome/contextSwitcher/TriggerButton.js

@@ -3,7 +3,7 @@ import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/chrome/contextSwitcher/TriggerButton.tsx
 var a = ({ isOpen: a, compact: o, currentOrg: s, currentWorkspace: c, currentProject: l, onToggle: u }) => /* @__PURE__ */ r("button", {
 	onClick: u,
-	className: `flex items-center gap-2 px-3 py-2 rounded-md hover:bg-[var(--color-action-ghost-bgHover)] transition-all duration-200 ease-out ${a ? "bg-[var(--color-action-ghost-bgHover)]" : ""}`,
+	className: `flex items-center gap-2 px-3 py-2 rounded-button hover:bg-bg-sunken transition-all duration-200 ease-[var(--motion-easing-out)] ${a ? "bg-bg-sunken" : ""}`,
 	"aria-label": "Switch context",
 	"aria-expanded": a,
 	children: o ? /* @__PURE__ */ r(e, { className: "size-5 text-[var(--color-text-primary)]" }) : /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ i("div", {

package/dist/chrome/contextSwitcher/WorkspaceList.js

@@ -14,7 +14,7 @@ var o = ({ filteredWorkspaces: o, searchedWorkspaces: s, currentWorkspaceId: c,
 		className: "flex-1 overflow-y-auto py-1",
 		children: o.length === 0 ? /* @__PURE__ */ i(t, { message: "No workspaces in this organization" }) : s.length > 0 ? s.map((e, t) => /* @__PURE__ */ a("button", {
 			onClick: () => d(e),
-			className: `w-full flex items-center gap-3 px-4 py-3 text-sm transition-all duration-200 ease-out animate-in fade-in-0 slide-in-from-left-2 ${e.id === c ? "bg-[var(--color-bg-accent)] text-[var(--color-text-primary)] font-medium" : "text-[var(--color-text-primary)] hover:bg-[var(--color-action-ghost-bgHover)] hover:translate-x-0.5"}`,
+			className: `w-full flex items-center gap-3 px-4 py-3 text-sm transition-all duration-200 ease-[var(--motion-easing-out)] animate-in fade-in-0 slide-in-from-left-2 ${e.id === c ? "bg-[var(--color-accent-soft)] text-text-primary font-medium" : "text-text-primary hover:bg-bg-sunken hover:translate-x-0.5"}`,
 			style: { animationDelay: `${t * 30}ms` },
 			children: [
 				/* @__PURE__ */ i(n, { className: "size-5 text-[var(--color-text-secondary)] flex-shrink-0" }),