@burdenoff/fe-libs 2026.619.2 → 2026.623.2

package/dist/chrome/globalSearch/AdvancedFiltersPanel.js

@@ -2,17 +2,17 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 //#region src/chrome/globalSearch/AdvancedFiltersPanel.tsx
 function n({ filters: n }) {
 	return /* @__PURE__ */ t("div", {
-		className: "px-3 py-2 border-b space-y-2 bg-muted/30 max-h-64 overflow-y-auto",
+		className: "px-3 py-2 border-b border-border-subtle space-y-2 bg-bg-sunken/40 max-h-64 overflow-y-auto",
 		children: [
 			/* @__PURE__ */ t("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ e("label", {
-					className: "text-[10px] font-medium text-muted-foreground w-16 flex-shrink-0",
+					className: "text-[10px] font-medium text-text-muted w-16 flex-shrink-0",
 					children: "Sort by"
 				}), /* @__PURE__ */ t("select", {
 					value: n.sortBy,
 					onChange: (e) => n.setSortBy(e.target.value),
-					className: "flex-1 h-7 text-xs rounded border border-border bg-background px-2 outline-none",
+					className: "flex-1 h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong transition-colors",
 					children: [
 						/* @__PURE__ */ e("option", {
 							value: "SCORE_DESC",
@@ -48,7 +48,7 @@ function n({ filters: n }) {
 			/* @__PURE__ */ t("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ e("label", {
-					className: "text-[10px] font-medium text-muted-foreground w-16 flex-shrink-0",
+					className: "text-[10px] font-medium text-text-muted w-16 flex-shrink-0",
 					children: "Products"
 				}), /* @__PURE__ */ e("input", {
 					"aria-label": "Product sources filter",
@@ -56,13 +56,13 @@ function n({ filters: n }) {
 					placeholder: "vibecontrols, wspace-tags",
 					value: n.productSourcesInput,
 					onChange: (e) => n.setProductSourcesInput(e.target.value),
-					className: "flex-1 h-7 text-xs rounded border border-border bg-background px-2 outline-none placeholder:text-muted-foreground"
+					className: "flex-1 h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong placeholder:text-text-placeholder transition-colors"
 				})]
 			}),
 			/* @__PURE__ */ t("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ e("label", {
-					className: "text-[10px] font-medium text-muted-foreground w-16 flex-shrink-0",
+					className: "text-[10px] font-medium text-text-muted w-16 flex-shrink-0",
 					children: "Project"
 				}), /* @__PURE__ */ e("input", {
 					"aria-label": "Project ID filter",
@@ -70,26 +70,26 @@ function n({ filters: n }) {
 					placeholder: "Project ID",
 					value: n.projectId,
 					onChange: (e) => n.setProjectId(e.target.value),
-					className: "flex-1 h-7 text-xs rounded border border-border bg-background px-2 outline-none placeholder:text-muted-foreground"
+					className: "flex-1 h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong placeholder:text-text-placeholder transition-colors"
 				})]
 			}),
 			/* @__PURE__ */ t("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ e("label", {
-					className: "text-[10px] font-medium text-muted-foreground w-16 flex-shrink-0",
+					className: "text-[10px] font-medium text-text-muted w-16 flex-shrink-0",
 					children: "Created by"
 				}), /* @__PURE__ */ e("input", {
 					type: "text",
 					placeholder: "Actor ID",
 					value: n.createdBy,
 					onChange: (e) => n.setCreatedBy(e.target.value),
-					className: "flex-1 h-7 text-xs rounded border border-border bg-background px-2 outline-none placeholder:text-muted-foreground"
+					className: "flex-1 h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong placeholder:text-text-placeholder transition-colors"
 				})]
 			}),
 			/* @__PURE__ */ t("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ e("label", {
-					className: "text-[10px] font-medium text-muted-foreground w-16 flex-shrink-0",
+					className: "text-[10px] font-medium text-text-muted w-16 flex-shrink-0",
 					children: "Updated by"
 				}), /* @__PURE__ */ e("input", {
 					"aria-label": "Updated by filter",
@@ -97,63 +97,63 @@ function n({ filters: n }) {
 					placeholder: "Actor ID",
 					value: n.updatedBy,
 					onChange: (e) => n.setUpdatedBy(e.target.value),
-					className: "flex-1 h-7 text-xs rounded border border-border bg-background px-2 outline-none placeholder:text-muted-foreground"
+					className: "flex-1 h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong placeholder:text-text-placeholder transition-colors"
 				})]
 			}),
 			/* @__PURE__ */ t("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ e("label", {
-					className: "text-[10px] font-medium text-muted-foreground w-16 flex-shrink-0",
+					className: "text-[10px] font-medium text-text-muted w-16 flex-shrink-0",
 					children: "Date from"
 				}), /* @__PURE__ */ e("input", {
 					type: "date",
 					value: n.dateFrom,
 					onChange: (e) => n.setDateFrom(e.target.value),
-					className: "flex-1 h-7 text-xs rounded border border-border bg-background px-2 outline-none"
+					className: "flex-1 h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong transition-colors"
 				})]
 			}),
 			/* @__PURE__ */ t("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ e("label", {
-					className: "text-[10px] font-medium text-muted-foreground w-16 flex-shrink-0",
+					className: "text-[10px] font-medium text-text-muted w-16 flex-shrink-0",
 					children: "Date to"
 				}), /* @__PURE__ */ e("input", {
 					type: "date",
 					value: n.dateTo,
 					onChange: (e) => n.setDateTo(e.target.value),
-					className: "flex-1 h-7 text-xs rounded border border-border bg-background px-2 outline-none"
+					className: "flex-1 h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong transition-colors"
 				})]
 			}),
 			/* @__PURE__ */ t("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ e("label", {
-					className: "text-[10px] font-medium text-muted-foreground w-16 flex-shrink-0",
+					className: "text-[10px] font-medium text-text-muted w-16 flex-shrink-0",
 					children: "Updated from"
 				}), /* @__PURE__ */ e("input", {
 					"aria-label": "Updated from date",
 					type: "date",
 					value: n.updatedDateFrom,
 					onChange: (e) => n.setUpdatedDateFrom(e.target.value),
-					className: "flex-1 h-7 text-xs rounded border border-border bg-background px-2 outline-none"
+					className: "flex-1 h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong transition-colors"
 				})]
 			}),
 			/* @__PURE__ */ t("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ e("label", {
-					className: "text-[10px] font-medium text-muted-foreground w-16 flex-shrink-0",
+					className: "text-[10px] font-medium text-text-muted w-16 flex-shrink-0",
 					children: "Updated to"
 				}), /* @__PURE__ */ e("input", {
 					"aria-label": "Updated to date",
 					type: "date",
 					value: n.updatedDateTo,
 					onChange: (e) => n.setUpdatedDateTo(e.target.value),
-					className: "flex-1 h-7 text-xs rounded border border-border bg-background px-2 outline-none"
+					className: "flex-1 h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong transition-colors"
 				})]
 			}),
 			/* @__PURE__ */ t("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ e("label", {
-					className: "text-[10px] font-medium text-muted-foreground w-16 flex-shrink-0",
+					className: "text-[10px] font-medium text-text-muted w-16 flex-shrink-0",
 					children: "Tag keys"
 				}), /* @__PURE__ */ e("input", {
 					"aria-label": "Tag keys filter",
@@ -161,13 +161,13 @@ function n({ filters: n }) {
 					placeholder: "search, team/platform",
 					value: n.tagKeysInput,
 					onChange: (e) => n.setTagKeysInput(e.target.value),
-					className: "flex-1 h-7 text-xs rounded border border-border bg-background px-2 outline-none placeholder:text-muted-foreground"
+					className: "flex-1 h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong placeholder:text-text-placeholder transition-colors"
 				})]
 			}),
 			/* @__PURE__ */ t("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ e("label", {
-					className: "text-[10px] font-medium text-muted-foreground w-16 flex-shrink-0",
+					className: "text-[10px] font-medium text-text-muted w-16 flex-shrink-0",
 					children: "Tag IDs"
 				}), /* @__PURE__ */ e("input", {
 					"aria-label": "Tag IDs filter",
@@ -175,13 +175,13 @@ function n({ filters: n }) {
 					placeholder: "Comma-separated IDs",
 					value: n.tagIdsInput,
 					onChange: (e) => n.setTagIdsInput(e.target.value),
-					className: "flex-1 h-7 text-xs rounded border border-border bg-background px-2 outline-none placeholder:text-muted-foreground"
+					className: "flex-1 h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong placeholder:text-text-placeholder transition-colors"
 				})]
 			}),
 			/* @__PURE__ */ t("div", {
 				className: "flex items-center gap-2",
 				children: [/* @__PURE__ */ e("label", {
-					className: "text-[10px] font-medium text-muted-foreground w-16 flex-shrink-0",
+					className: "text-[10px] font-medium text-text-muted w-16 flex-shrink-0",
 					children: "Tag paths"
 				}), /* @__PURE__ */ e("input", {
 					"aria-label": "Tag hierarchy filter",
@@ -189,7 +189,7 @@ function n({ filters: n }) {
 					placeholder: "team/engineering",
 					value: n.tagPathsInput,
 					onChange: (e) => n.setTagPathsInput(e.target.value),
-					className: "flex-1 h-7 text-xs rounded border border-border bg-background px-2 outline-none placeholder:text-muted-foreground"
+					className: "flex-1 h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong placeholder:text-text-placeholder transition-colors"
 				})]
 			}),
 			/* @__PURE__ */ t("div", {
@@ -201,13 +201,13 @@ function n({ filters: n }) {
 						placeholder: "metadata.path",
 						value: n.metadataKey,
 						onChange: (e) => n.setMetadataKey(e.target.value),
-						className: "h-7 text-xs rounded border border-border bg-background px-2 outline-none placeholder:text-muted-foreground"
+						className: "h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong placeholder:text-text-placeholder transition-colors"
 					}),
 					/* @__PURE__ */ t("select", {
 						"aria-label": "Metadata operator filter",
 						value: n.metadataOperator,
 						onChange: (e) => n.setMetadataOperator(e.target.value),
-						className: "h-7 text-xs rounded border border-border bg-background px-2 outline-none",
+						className: "h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong transition-colors",
 						children: [
 							/* @__PURE__ */ e("option", {
 								value: "EQUALS",
@@ -233,7 +233,7 @@ function n({ filters: n }) {
 						placeholder: "Value",
 						value: n.metadataValue,
 						onChange: (e) => n.setMetadataValue(e.target.value),
-						className: "h-7 text-xs rounded border border-border bg-background px-2 outline-none placeholder:text-muted-foreground"
+						className: "h-7 text-xs rounded-input border border-border-subtle bg-bg-surface text-text-primary px-2 outline-none focus:border-border-strong placeholder:text-text-placeholder transition-colors"
 					})
 				]
 			}),
@@ -242,7 +242,7 @@ function n({ filters: n }) {
 				children: /* @__PURE__ */ e("button", {
 					type: "button",
 					onClick: n.reset,
-					className: "text-[10px] text-muted-foreground hover:text-foreground transition-colors",
+					className: "text-[10px] text-text-muted hover:text-text-primary transition-colors",
 					children: "Clear filters"
 				})
 			})

package/dist/chrome/globalSearch/CategoryTabs.js

@@ -4,18 +4,18 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/chrome/globalSearch/CategoryTabs.tsx
 function r({ categories: r, selectedCategory: i, onSelect: a }) {
 	return r.length === 0 ? null : /* @__PURE__ */ n("div", {
-		className: "flex items-center gap-1 p-2 border-b overflow-x-auto scrollbar-hide scroll-smooth snap-x snap-mandatory",
+		className: "flex items-center gap-1 p-2 border-b border-border-subtle overflow-x-auto scrollbar-hide scroll-smooth snap-x snap-mandatory",
 		children: [/* @__PURE__ */ t("button", {
 			type: "button",
 			onClick: () => a(void 0),
-			className: e("px-3 py-1.5 text-xs rounded-md transition-colors whitespace-nowrap flex-shrink-0 snap-start", i === void 0 ? "bg-primary text-primary-foreground" : "bg-muted hover:bg-muted/80"),
+			className: e("px-3 py-1.5 text-xs font-medium rounded-button transition-colors whitespace-nowrap flex-shrink-0 snap-start", i === void 0 ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
 			children: "All"
 		}), r.map((r) => {
 			let o = r.icon;
 			return /* @__PURE__ */ n("button", {
 				type: "button",
 				onClick: () => a(r.name),
-				className: e("px-3 py-1.5 text-xs rounded-md transition-colors whitespace-nowrap flex-shrink-0 flex items-center gap-1.5 snap-start", i === r.name ? "bg-primary text-primary-foreground" : "bg-muted hover:bg-muted/80"),
+				className: e("px-3 py-1.5 text-xs font-medium rounded-button transition-colors whitespace-nowrap flex-shrink-0 flex items-center gap-1.5 snap-start", i === r.name ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
 				children: [/* @__PURE__ */ t(o, { className: "size-3.5" }), /* @__PURE__ */ t("span", {
 					className: "hidden xs:inline",
 					children: r.label

package/dist/chrome/globalSearch/ResultsList.js

@@ -10,20 +10,20 @@ function i({ loading: i, error: a, query: o, results: s, groupedResults: c, rece
 				children: /* @__PURE__ */ n(t, { className: "size-4 animate-spin" })
 			}),
 			a && /* @__PURE__ */ n("div", {
-				className: "py-6 text-center text-sm text-destructive",
+				className: "py-6 text-center text-sm text-status-error-text",
 				children: a
 			}),
 			!i && !a && !o && l.length > 0 && /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("div", {
-				className: "px-2 py-1.5 text-xs font-medium text-muted-foreground",
+				className: "px-2 py-1.5 text-[11px] font-medium uppercase tracking-wider text-text-muted",
 				children: "Recent Searches"
 			}), l.map((t, i) => /* @__PURE__ */ r("button", {
 				type: "button",
 				onClick: () => u(t),
-				className: "w-full flex items-center gap-2 px-2 py-2 text-sm rounded-md hover:bg-accent transition-colors text-left",
+				className: "w-full flex items-center gap-2 px-2 py-2 text-sm rounded-button text-text-secondary hover:bg-bg-sunken hover:text-text-primary transition-colors text-left",
 				children: [/* @__PURE__ */ n(e, { className: "size-4 opacity-50" }), t]
 			}, i))] }),
 			!i && !a && o && s.length === 0 && /* @__PURE__ */ r("div", {
-				className: "py-6 text-center text-sm text-muted-foreground",
+				className: "py-6 text-center text-sm text-text-muted",
 				children: [
 					"No results found for \"",
 					o,
@@ -31,21 +31,21 @@ function i({ loading: i, error: a, query: o, results: s, groupedResults: c, rece
 				]
 			}),
 			!i && !a && Object.entries(c).map(([e, t]) => /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("div", {
-				className: "px-2 py-1.5 text-xs font-medium text-muted-foreground",
+				className: "px-2 py-1.5 text-[11px] font-medium uppercase tracking-wider text-text-muted",
 				children: e
 			}), t.map((e) => {
 				let t = e.icon;
 				return /* @__PURE__ */ r("button", {
 					type: "button",
 					onClick: () => d(e),
-					className: "w-full flex items-start gap-2 px-2 py-2 text-sm rounded-md hover:bg-accent transition-colors text-left",
+					className: "w-full flex items-start gap-2 px-2 py-2 text-sm rounded-button text-text-secondary hover:bg-bg-sunken hover:text-text-primary transition-colors text-left",
 					children: [t && /* @__PURE__ */ n(t, { className: "size-4 mt-0.5 flex-shrink-0" }), /* @__PURE__ */ r("div", {
 						className: "flex-1 min-w-0",
 						children: [/* @__PURE__ */ n("div", {
-							className: "font-medium truncate",
+							className: "font-medium truncate text-text-primary",
 							children: e.title
 						}), e.description && /* @__PURE__ */ n("div", {
-							className: "text-xs text-muted-foreground truncate",
+							className: "text-xs text-text-muted truncate",
 							children: e.description
 						})]
 					})]

package/dist/chrome/globalSearch/SearchInput.js

@@ -3,21 +3,21 @@ import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/chrome/globalSearch/SearchInput.tsx
 function i({ value: i, placeholder: a, onChange: o, onClear: s }) {
 	return /* @__PURE__ */ r("div", {
-		className: "flex items-center border-b px-3",
+		className: "flex items-center border-b border-border-subtle px-4",
 		children: [
-			/* @__PURE__ */ n(e, { className: "size-4 mr-2 flex-shrink-0 opacity-50" }),
+			/* @__PURE__ */ n(e, { className: "size-4 mr-2 flex-shrink-0 text-text-muted" }),
 			/* @__PURE__ */ n("input", {
 				type: "text",
 				placeholder: a,
 				value: i,
 				onChange: (e) => o(e.target.value),
-				className: "flex-1 bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground",
+				className: "flex-1 bg-transparent py-3.5 text-sm text-text-primary outline-none placeholder:text-text-placeholder",
 				autoFocus: !0
 			}),
 			i && /* @__PURE__ */ n("button", {
 				type: "button",
 				onClick: s,
-				className: "ml-2 rounded-sm opacity-70 hover:opacity-100",
+				className: "ml-2 rounded-button p-1 text-text-muted hover:bg-bg-sunken hover:text-text-primary transition-colors",
 				"aria-label": "Clear search",
 				children: /* @__PURE__ */ n(t, { className: "size-4" })
 			})

package/dist/chrome/globalSearch/SearchModeBar.js

@@ -5,7 +5,7 @@ import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/chrome/globalSearch/SearchModeBar.tsx
 function o({ searchMode: o, onSearchModeChange: s, showAdvanced: c, onToggleAdvanced: l }) {
 	return /* @__PURE__ */ a("div", {
-		className: "flex items-center justify-between px-3 py-1.5 border-b",
+		className: "flex items-center justify-between px-3 py-1.5 border-b border-border-subtle",
 		children: [/* @__PURE__ */ i("div", {
 			className: "flex items-center gap-1",
 			children: [
@@ -15,14 +15,14 @@ function o({ searchMode: o, onSearchModeChange: s, showAdvanced: c, onToggleAdva
 			].map((t) => /* @__PURE__ */ i("button", {
 				type: "button",
 				onClick: () => s(t),
-				className: e("px-2 py-1 text-[10px] font-medium rounded transition-colors", o === t ? "bg-primary text-primary-foreground" : "bg-muted/60 text-muted-foreground hover:bg-muted"),
+				className: e("px-2 py-1 text-[10px] font-medium rounded-button transition-colors", o === t ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:text-text-primary"),
 				title: t === "PARTIAL" ? "Autocomplete — matches prefixes and substrings" : t === "FULLTEXT" ? "Full-text — BM25 word matching with stemming" : "Exact — all search terms must appear",
 				children: t === "PARTIAL" ? "Partial" : t === "FULLTEXT" ? "Fulltext" : "Exact"
 			}, t))
 		}), /* @__PURE__ */ a("button", {
 			type: "button",
 			onClick: l,
-			className: "flex items-center gap-1 px-2 py-1 text-[10px] font-medium text-muted-foreground rounded hover:bg-muted transition-colors",
+			className: "flex items-center gap-1 px-2 py-1 text-[10px] font-medium text-text-secondary rounded-button hover:bg-bg-sunken hover:text-text-primary transition-colors",
 			"aria-expanded": c,
 			children: [
 				/* @__PURE__ */ i(r, { className: "size-3" }),

package/dist/chrome/notificationCenter/BellButton.js

@@ -3,7 +3,7 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 var n = ({ unreadCount: n, isOpen: r, onToggle: i }) => /* @__PURE__ */ t("button", {
 	type: "button",
 	onClick: i,
-	className: "relative p-2 hover:bg-action-ghost-bg-hover rounded-button text-text-primary",
+	className: "relative p-2 hover:bg-bg-sunken rounded-button text-text-primary transition-colors",
 	"aria-label": `Notifications${n > 0 ? ` (${n} unread)` : ""}`,
 	"aria-expanded": r,
 	"aria-haspopup": "true",

package/dist/chrome/notificationCenter/NotificationCardItem.js

@@ -7,7 +7,7 @@ var a = ({ notification: a, onMarkAsRead: o, onDelete: s, onRedirect: c }) => {
 		label: f
 	};
 	return /* @__PURE__ */ i("div", {
-		className: `group relative flex gap-3 p-3 rounded-card border transition-all duration-150 cursor-pointer ${g ? "bg-bg-canvas border-border-subtle" : "bg-bg-elevated border-border-default shadow-sm"} hover:bg-action-ghost-bg-hover`,
+		className: `group relative flex gap-3 p-3 rounded-card border transition-all duration-200 ease-[var(--motion-easing-out)] cursor-pointer hover:border-border-strong ${g ? "bg-bg-surface border-border-subtle hover:bg-bg-sunken" : "bg-[var(--color-accent-soft)] border-border-subtle shadow-elevation-1"}`,
 		onClick: () => {
 			g || o(l), h && c(h);
 		},
@@ -41,7 +41,7 @@ var a = ({ notification: a, onMarkAsRead: o, onDelete: s, onRedirect: c }) => {
 								onClick: (e) => {
 									e.stopPropagation(), o(l);
 								},
-								className: "p-1 rounded hover:bg-bg-muted text-text-tertiary hover:text-text-primary",
+								className: "p-1 rounded hover:bg-bg-sunken text-text-muted hover:text-text-primary",
 								title: "Mark as read",
 								"aria-label": "Mark as read",
 								children: /* @__PURE__ */ r("svg", {
@@ -61,7 +61,7 @@ var a = ({ notification: a, onMarkAsRead: o, onDelete: s, onRedirect: c }) => {
 								onClick: (e) => {
 									e.stopPropagation(), s(l);
 								},
-								className: "p-1 rounded hover:bg-bg-muted text-text-tertiary hover:text-status-error-text",
+								className: "p-1 rounded hover:bg-bg-sunken text-text-muted hover:text-status-error-text",
 								title: "Dismiss",
 								"aria-label": "Dismiss notification",
 								children: /* @__PURE__ */ r("svg", {
@@ -91,11 +91,11 @@ var a = ({ notification: a, onMarkAsRead: o, onDelete: s, onRedirect: c }) => {
 								children: v.label
 							}),
 							m && /* @__PURE__ */ r("span", {
-								className: "inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium rounded bg-bg-muted text-text-tertiary",
+								className: "inline-flex items-center px-1.5 py-0.5 text-[10px] font-medium rounded bg-bg-sunken text-text-muted",
 								children: m
 							}),
 							/* @__PURE__ */ r("span", {
-								className: "text-[10px] text-text-tertiary",
+								className: "text-[10px] text-text-muted",
 								children: n(_)
 							}),
 							h && /* @__PURE__ */ i("button", {

package/dist/chrome/notificationCenter/NotificationFilters.js

@@ -8,7 +8,7 @@ var a = ({ filterTab: a, typeFilter: o, appFilter: s, sortBy: c, appNames: l, on
 			className: "flex gap-1",
 			children: e.map((e) => /* @__PURE__ */ r("button", {
 				onClick: () => u(e.value),
-				className: `px-3 py-1 text-xs font-medium rounded-full transition-colors ${a === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-muted text-text-secondary hover:bg-action-ghost-bg-hover"}`,
+				className: `px-3 py-1 text-xs font-medium rounded-full transition-colors ${a === e.value ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-sunken text-text-secondary hover:bg-bg-sunken"}`,
 				children: e.label
 			}, e.value))
 		}),
@@ -16,7 +16,7 @@ var a = ({ filterTab: a, typeFilter: o, appFilter: s, sortBy: c, appNames: l, on
 			className: "flex flex-wrap items-center gap-1",
 			children: [n.map((e) => /* @__PURE__ */ i("button", {
 				onClick: () => d(e.value),
-				className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${o === e.value ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-muted"}`,
+				className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${o === e.value ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-muted hover:text-text-secondary hover:bg-bg-sunken"}`,
 				children: [e.value !== "ALL" && t[e.value] && /* @__PURE__ */ r("span", {
 					className: "mr-0.5",
 					children: t[e.value].icon
@@ -46,13 +46,13 @@ var a = ({ filterTab: a, typeFilter: o, appFilter: s, sortBy: c, appNames: l, on
 			className: "flex flex-wrap gap-1",
 			children: [/* @__PURE__ */ r("button", {
 				onClick: () => f("ALL"),
-				className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${s === "ALL" ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-muted"}`,
+				className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${s === "ALL" ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-muted hover:text-text-secondary hover:bg-bg-sunken"}`,
 				children: "All Apps"
 			}), l.map(([e, t]) => /* @__PURE__ */ i("button", {
 				onClick: () => f(e),
-				className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${s === e ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-tertiary hover:text-text-secondary hover:bg-bg-muted"}`,
+				className: `px-2 py-0.5 text-[11px] font-medium rounded-full whitespace-nowrap transition-colors ${s === e ? "bg-bg-elevated text-text-primary border border-border-default" : "text-text-muted hover:text-text-secondary hover:bg-bg-sunken"}`,
 				children: [e, /* @__PURE__ */ i("span", {
-					className: "ml-1 text-text-tertiary",
+					className: "ml-1 text-text-muted",
 					children: [
 						"(",
 						t,

package/dist/chrome/notificationCenter/NotificationFooter.js

@@ -5,7 +5,7 @@ var n = ({ totalCount: n, onViewAll: r }) => /* @__PURE__ */ e("div", {
 	children: /* @__PURE__ */ t("div", {
 		className: "flex items-center justify-between",
 		children: [/* @__PURE__ */ t("span", {
-			className: "text-[11px] text-text-tertiary",
+			className: "text-[11px] text-text-muted",
 			children: [
 				n,
 				" notification",

package/dist/chrome/notificationCenter/NotificationHeader.js

@@ -8,7 +8,7 @@ var n = ({ isMobile: n, unreadCount: r, onClose: i, onMarkAllAsRead: a }) => /*
 			n && /* @__PURE__ */ e("button", {
 				type: "button",
 				onClick: i,
-				className: "p-1 rounded-button hover:bg-action-ghost-bg-hover text-text-primary",
+				className: "p-1 rounded-button hover:bg-bg-sunken text-text-primary",
 				"aria-label": "Close",
 				children: /* @__PURE__ */ e("svg", {
 					className: "size-5",
@@ -54,7 +54,7 @@ var n = ({ isMobile: n, unreadCount: r, onClose: i, onMarkAllAsRead: a }) => /*
 		}), !n && /* @__PURE__ */ e("button", {
 			type: "button",
 			onClick: i,
-			className: "p-1 rounded-button hover:bg-action-ghost-bg-hover text-text-tertiary",
+			className: "p-1 rounded-button hover:bg-bg-sunken text-text-muted",
 			"aria-label": "Close panel",
 			children: /* @__PURE__ */ e("svg", {
 				className: "size-4",

package/dist/chrome/notificationCenter/NotificationList.js

@@ -41,7 +41,7 @@ var i = ({ loading: i, error: a, notifications: o, filterTab: s, typeFilter: c,
 		className: "flex flex-col items-center justify-center p-8 text-center",
 		children: [
 			/* @__PURE__ */ n("svg", {
-				className: "size-12 text-text-tertiary mb-3",
+				className: "size-12 text-text-muted mb-3",
 				fill: "none",
 				stroke: "currentColor",
 				viewBox: "0 0 24 24",
@@ -57,7 +57,7 @@ var i = ({ loading: i, error: a, notifications: o, filterTab: s, typeFilter: c,
 				children: "You're all caught up!"
 			}),
 			/* @__PURE__ */ n("p", {
-				className: "text-xs text-text-tertiary mt-1",
+				className: "text-xs text-text-muted mt-1",
 				children: s !== "all" || c !== "ALL" || l !== "ALL" ? "No notifications match your filters" : "No notifications yet"
 			})
 		]

package/dist/chrome/notificationCenter/NotificationPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationPanel.d.ts","sourceRoot":"","sources":["../../../src/chrome/notificationCenter/NotificationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAwBxD,CAAC"}
+{"version":3,"file":"NotificationPanel.d.ts","sourceRoot":"","sources":["../../../src/chrome/notificationCenter/NotificationPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,UAAU,sBAAsB;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA4BxD,CAAC"}

package/dist/chrome/notificationCenter/NotificationPanel.js

@@ -1,7 +1,7 @@
 import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/chrome/notificationCenter/NotificationPanel.tsx
 var r = ({ isMobile: r, onClose: i, children: a }) => r ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("div", {
-	className: "fixed inset-0 bg-black/50 z-[60]",
+	className: "fixed inset-0 bg-bg-overlay backdrop-blur-sm z-[60]",
 	onClick: i,
 	"aria-hidden": "true"
 }), /* @__PURE__ */ t("div", {
@@ -10,7 +10,7 @@ var r = ({ isMobile: r, onClose: i, children: a }) => r ? /* @__PURE__ */ n(e, {
 	"aria-label": "Notifications panel",
 	children: a
 })] }) : /* @__PURE__ */ t("div", {
-	className: "absolute right-0 top-full mt-2 w-[calc(100vw-1.5rem)] sm:w-[420px] max-h-[600px] bg-bg-elevated border border-border-subtle rounded-card shadow-popover z-50 overflow-hidden flex flex-col",
+	className: "absolute right-0 top-full mt-2 w-[calc(100vw-1.5rem)] sm:w-[420px] max-h-[600px] bg-bg-elevated border border-border-subtle rounded-card shadow-[var(--shadow-elevation-4)] z-50 overflow-hidden flex flex-col",
 	role: "dialog",
 	"aria-label": "Notifications panel",
 	children: a

package/dist/chrome/notificationCenter/SkeletonCard.js

@@ -2,14 +2,14 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 //#region src/chrome/notificationCenter/SkeletonCard.tsx
 var n = () => /* @__PURE__ */ t("div", {
 	className: "flex gap-3 p-3 rounded-card border border-border-subtle animate-pulse",
-	children: [/* @__PURE__ */ e("div", { className: "size-6 rounded bg-bg-muted flex-shrink-0" }), /* @__PURE__ */ t("div", {
+	children: [/* @__PURE__ */ e("div", { className: "size-6 rounded bg-bg-sunken flex-shrink-0" }), /* @__PURE__ */ t("div", {
 		className: "flex-1 space-y-2",
 		children: [
-			/* @__PURE__ */ e("div", { className: "h-4 bg-bg-muted rounded w-3/4" }),
-			/* @__PURE__ */ e("div", { className: "h-3 bg-bg-muted rounded w-full" }),
+			/* @__PURE__ */ e("div", { className: "h-4 bg-bg-sunken rounded w-3/4" }),
+			/* @__PURE__ */ e("div", { className: "h-3 bg-bg-sunken rounded w-full" }),
 			/* @__PURE__ */ t("div", {
 				className: "flex gap-2",
-				children: [/* @__PURE__ */ e("div", { className: "h-3 bg-bg-muted rounded w-12" }), /* @__PURE__ */ e("div", { className: "h-3 bg-bg-muted rounded w-16" })]
+				children: [/* @__PURE__ */ e("div", { className: "h-3 bg-bg-sunken rounded w-12" }), /* @__PURE__ */ e("div", { className: "h-3 bg-bg-sunken rounded w-16" })]
 			})
 		]
 	})]

package/dist/chrome/notificationCenter/constants.js

@@ -2,25 +2,25 @@
 var e = {
 	URGENT: {
 		color: "text-status-error-text",
-		bgColor: "bg-status-error-bg",
+		bgColor: "bg-status-error-bg-subtle",
 		label: "Urgent",
 		order: 0
 	},
 	HIGH: {
 		color: "text-status-warning-text",
-		bgColor: "bg-status-warning-bg",
+		bgColor: "bg-status-warning-bg-subtle",
 		label: "High",
 		order: 1
 	},
 	MEDIUM: {
 		color: "text-status-info-text",
-		bgColor: "bg-status-info-bg",
+		bgColor: "bg-status-info-bg-subtle",
 		label: "Medium",
 		order: 2
 	},
 	LOW: {
-		color: "text-text-tertiary",
-		bgColor: "bg-bg-muted",
+		color: "text-text-secondary",
+		bgColor: "bg-bg-sunken",
 		label: "Low",
 		order: 3
 	}

package/dist/chrome/sideNavigation/CollapseToggle.js

@@ -5,7 +5,7 @@ var n = ({ collapsed: n, collapseLabel: r, onToggleCollapse: i }) => /* @__PURE_
 	children: /* @__PURE__ */ t("button", {
 		type: "button",
 		onClick: i,
-		className: `w-full flex items-center gap-icon-gap py-2 rounded-button text-text-secondary hover:bg-action-ghost-bg-hover hover:text-text-primary transition-colors ${n ? "justify-center px-2" : "px-card-padding"}`,
+		className: `w-full flex items-center gap-3 py-2 rounded-button text-sm text-text-secondary hover:bg-bg-sunken hover:text-text-primary transition-colors ${n ? "justify-center px-2" : "px-3"}`,
 		"aria-label": n ? "Expand sidebar" : "Collapse sidebar",
 		title: n ? "Expand sidebar" : "Collapse sidebar",
 		children: [/* @__PURE__ */ e("svg", {

package/dist/chrome/sideNavigation/MobileActionsBar.js

@@ -4,9 +4,9 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 var r = ({ actions: r, collapsed: i, onToggleCollapse: a }) => {
 	let { t: o } = e();
 	return /* @__PURE__ */ n("div", {
-		className: "md:hidden py-4 px-4 border-t border-border-subtle bg-bg-canvas/50",
+		className: "md:hidden py-4 px-4 border-t border-border-subtle bg-bg-sunken/50",
 		children: [/* @__PURE__ */ t("p", {
-			className: "text-caption text-text-tertiary mb-3 font-medium uppercase tracking-wider",
+			className: "text-[11px] text-text-muted mb-3 font-medium uppercase tracking-wider",
 			children: ((e, t) => {
 				let n = o(e);
 				return n === e ? t : n;

package/dist/chrome/sideNavigation/NavItemRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavItemRenderer.d.ts","sourceRoot":"","sources":["../../../src/chrome/sideNavigation/NavItemRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAiC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAIvC,UAAU,oBAAoB;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,eAAe,CAAC;CACvC;AAWD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA8MpD,CAAC"}
+{"version":3,"file":"NavItemRenderer.d.ts","sourceRoot":"","sources":["../../../src/chrome/sideNavigation/NavItemRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAiC,MAAM,OAAO,CAAC;AAC/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAIvC,UAAU,oBAAoB;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC3B,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,eAAe,CAAC;CACvC;AAWD,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CA0NpD,CAAC"}