@psnext/design-system 1.5.1 → 2.0.0

package/README.md

@@ -28,6 +28,43 @@ pnpm add react react-dom        # peer deps (^18.3 or ^19)
 Requires **Tailwind CSS v4** in the consuming app. Everything else (Radix,
 `@tanstack/react-query`, etc.) is bundled.
 
+## AI agents (Slingshot, Cursor, Copilot, …)
+
+The package ships two agent-facing docs — point your AI tooling at them and it
+will write DS-native code instead of guessing:
+
+- **[`DESIGN.md`](./DESIGN.md)** — the exhaustive machine-readable reference:
+  setup, theming model, the token language (context-suffixed colors, stock
+  spacing, px-named radii), hard rules, an 88-entry component catalog with every
+  variant enumerated, and the full token/CSS-var inventory.
+- **[`SKILL.md`](./SKILL.md)** — the operational playbook (decision order,
+  do/don't class table, Figma→code conversion, recipes, known pitfalls,
+  verification steps). Formatted as an Agent Skill.
+
+### Install them as an Agent Skill (recommended)
+
+Run this in your app to copy both docs into `.agents/skills/design-system/`,
+where coding agents pick them up automatically:
+
+```bash
+npx @psnext/design-system
+```
+
+Or pass an explicit destination folder:
+
+```bash
+npx @psnext/design-system <dir>      # install to an explicit folder
+```
+
+Re-run it after upgrading the package to refresh the docs. (Prefer to keep the
+skill folder in version control so your whole team's agents share it.)
+
+### Or point your agent at node_modules
+
+Both files also live at `node_modules/@psnext/design-system/DESIGN.md` /
+`SKILL.md` — e.g. tell your agent: *"Read
+node_modules/@psnext/design-system/SKILL.md before writing UI."*
+
 ## Quick start
 
 **1. Wire the CSS** (order matters):
@@ -89,8 +126,8 @@ shown on its **Storybook Docs** page (generated from the source types + JSDoc).
 
 | Entry | Contents |
 |---|---|
-| `@psnext/design-system/primitives/*` · `…/primitives` | Button, Dialog, Input, Select, Table, Tabs, Card, Chart, Badge, Text, Heading, Icon, `Logo`, Credits, NavRail, `ThemeProvider`/`useTheme`, … (65) |
-| `@psnext/design-system/patterns/*` · `…/patterns` | `Header`, `Footer`, `DataTable`, `MediaObject`, `SectionCard`, `SectionHeading` |
+| `@psnext/design-system/primitives/*` · `…/primitives` | Button, Dialog, Input, Select, Table, Tabs, Card, Chart, Badge, Text, Heading, Icon, `Logo`, Credits, `ThemeProvider`/`useTheme`, … (65) |
+| `@psnext/design-system/patterns/*` · `…/patterns` | `Header`, `Footer`, `DataTable`, `MediaObject`, `NavRail`, `SectionCard`, `SectionHeading` |
 | `@psnext/design-system/layouts/*` · `…/layouts` | `Container`, `Stack`, `TwoColumn`, `PageBackground` |
 | `@psnext/design-system/styles` | the single raw-CSS entry (tokens + themes + bridge) |
 

package/SKILL.md

@@ -0,0 +1,101 @@
+---
+name: psnext-design-system
+description: Build product UI with @psnext/design-system (Tailwind v4 token bridge, context-suffixed color utilities, px-named radii, class-driven theming). Use whenever writing or reviewing frontend code in an app that consumes this design system, or when translating Figma designs into code for the PS AI product suite.
+---
+
+# Using @psnext/design-system
+
+You are building UI with `@psnext/design-system`. The exhaustive reference —
+component catalog, full token inventory, theming model — is in
+[`DESIGN.md`](./DESIGN.md) next to this file (in consumers:
+`node_modules/@psnext/design-system/DESIGN.md`). This skill is the workflow.
+
+## Decision order
+
+1. **Pattern first**: does a pattern (`patterns/Header`, `DataTable`, `Footer`,
+   `SectionCard`, `SectionHeading`, `MediaObject`) or layout (`Container`, `Stack`,
+   `TwoColumn`, `PageBackground`) already solve it? Use it.
+2. **Primitive second**: compose from `primitives/*` (64 of them — check the catalog
+   in DESIGN.md §6 before writing anything custom).
+3. **Custom last**: build with token utilities only; never raw colors, never a
+   parallel component that shadows an existing one.
+
+Import per subpath: `@psnext/design-system/primitives/Button`. The DS bundles Radix,
+cva, lucide-react, recharts, sonner, react-hook-form, zod — import primitives from the
+DS, not from those libraries directly (exception: `toast()` from `"sonner"`, and
+`lucide-react` icons which are the standard icon set).
+
+## Class-writing rules (do / don't)
+
+| Do | Don't | Why |
+|---|---|---|
+| `bg-primary-bg`, `text-muted-txt`, `border-primary-border` | `bg-background`, `text-muted-foreground`, `border-border` | shadcn-era names were deleted — they compile to **nothing**, silently |
+| let tokens flip under `.dark` | `dark:bg-…` | `dark:` is banned; a CI guard rejects it in DS code |
+| `p-4` for 16px, `gap-2` for 8px | `p-16` for 16px | spacing numbers are 4px steps, not pixels |
+| `rounded-8` for 8px radius | `rounded-lg` | radius is px-named; t-shirt radii don't exist |
+| `shadow-sm/md/lg/xl` | other shadow steps | only these four are tokenized |
+| `ring-focus`, `ring-focus-error` | `ring-ring`, custom focus colors | focus is tokenized |
+| `text-danger-txt` for errors | `text-destructive`, `text-red-500` | severity family is info/success/warning/danger |
+| `cn(...)` from the DS for merged classes | template-string concat | cn's tailwind-merge knows the numeric radius scale |
+| suffix matches property: `bg-*-bg`, `text-*-txt` | `text-primary-bg` | token suffix encodes the valid context |
+
+Figma → code: px ÷ 4 = spacing step (16px → `p-4`); radius px maps 1:1 (`rounded-12`);
+heading levels map to `<Heading size={n}>`.
+
+## Recipes
+
+**Page scaffold**
+```tsx
+<div className="relative min-h-screen overflow-hidden">
+  <PageBackground fixed={false} />
+  <Header ...auth/product wiring... />
+  <Container className="relative py-8">…page content…</Container>
+</div>
+```
+
+**Section on the page** — `SectionCard` (glass surface) + `SectionHeading`; glass
+surfaces need `PageBackground` behind them to read.
+
+**Form** — `Form` (react-hook-form + zod resolver) + `Field`/`Label`/`Input`/…;
+validation errors style themselves via `data-[error=true]` and `text-danger-txt`.
+
+**Toasts** — render `<Toaster theme={resolvedTheme}/>` once near the root; fire with
+`toast.success/error/warning/info(...)` from `"sonner"`. Severity colors are tokenized
+(error → danger).
+
+**Brand section** — wrap any subtree in `theme-bodhi` / `theme-sustain` /
+`theme-slingshot` to re-scope the brand ramp (works nested, light and dark).
+
+**Charts** — `ChartContainer` + a `ChartConfig`; series colors from `var(--chart-*)`
+or the brand ramp (`var(--brand-500-primary)`, `color-mix` tints for lighter steps).
+
+**Dark-only surface** (e.g. marketing hero): put `.dark` on the subtree root — all
+tokens inside flip; do not hand-pick dark colors.
+
+## Pitfalls (each of these has actually happened)
+
+- **Silent dead classes**: a token name that doesn't exist produces *no CSS and no
+  error* — the element just loses that style. If something renders unstyled/black/
+  transparent, first suspect a wrong token name; grep DESIGN.md §6–7 for the right one.
+- **JS-driven theming**: never branch on `useTheme().theme` to pick colors — use
+  tokens/CSS. JS-driven color breaks class-driven captures (VR) and flashes on load.
+- **Card vertical distribution**: `Card` defaults to `justify-between`; in stretched
+  grids, center a lone `CardContent` with `my-auto` or override `justify-*`.
+- **Overriding component classes**: pass overrides via `className` (components merge
+  with `cn`); don't wrap in extra divs to fight specificity.
+- **`!important` on library-styled elements** (e.g. toast classNames) will override
+  richColors/severity styling — scope with `data-[type=…]` variants instead.
+- **Logo**: never recolor; wordmark ink follows mode automatically; no ThemeProvider
+  needed.
+
+## Verify your work
+
+1. `pnpm typecheck` (and `pnpm lint:dark-variant` inside the DS repo).
+2. Render it: check both modes by toggling `.dark` on `<html>` (not by mocking JS
+   state), and each brand class if brand-relevant.
+3. In the DS repo: every component change needs its stories updated, including the
+   `Screenshot` VR story (all *static* states belong in that one frame; interactive/
+   portalled states get their own stories) — then `pnpm vr` (`pnpm vr:update` to
+   re-baseline intentional changes).
+4. Storybook stories are the canonical usage — if your usage diverges from the story,
+   the story is right.

package/bin/install-agent-skill.mjs

@@ -0,0 +1,54 @@
+#!/usr/bin/env node
+// Install the design-system agent docs (SKILL.md + DESIGN.md) into a consumer
+// project as an Agent Skill, so coding agents load them for UI work.
+//
+//   npx @psnext/design-system              → .agents/skills/design-system/
+//   npx @psnext/design-system <dir>        → <dir>/  (explicit destination)
+//
+// The two docs are copied verbatim from the installed package; SKILL.md links to
+// DESIGN.md as a sibling, so they must land in the same folder (this does that).
+
+import { copyFileSync, existsSync, mkdirSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const PKG_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const DOCS = ["SKILL.md", "DESIGN.md"];
+
+const args = process.argv.slice(2);
+if (args.includes("--help") || args.includes("-h")) {
+  console.log(`Install @psnext/design-system agent docs as an Agent Skill.
+
+Usage:
+  npx @psnext/design-system              Copy SKILL.md + DESIGN.md into .agents/skills/design-system/
+  npx @psnext/design-system <dir>        Copy into an explicit destination folder
+  npx @psnext/design-system --help       Show this help
+
+The agent then loads the skill when writing or reviewing UI in this project.`);
+  process.exit(0);
+}
+
+// Destination: explicit positional wins; else the default skills folder.
+const positional = args.find((a) => !a.startsWith("-"));
+const dest = positional
+  ? resolve(process.cwd(), positional)
+  : resolve(process.cwd(), ".agents/skills/design-system");
+
+for (const doc of DOCS) {
+  const src = join(PKG_ROOT, doc);
+  if (!existsSync(src)) {
+    console.error(`✗ Could not find ${doc} in the installed package (${PKG_ROOT}).`);
+    process.exit(1);
+  }
+}
+
+mkdirSync(dest, { recursive: true });
+for (const doc of DOCS) {
+  copyFileSync(join(PKG_ROOT, doc), join(dest, doc));
+}
+
+const rel = dest.startsWith(process.cwd()) ? `.${dest.slice(process.cwd().length)}` : dest;
+console.log(`✓ Installed @psnext/design-system agent skill → ${rel}/`);
+console.log("  • SKILL.md   — workflow playbook (the Agent Skill entry point)");
+console.log("  • DESIGN.md  — full token + component reference");
+console.log("\nRe-run this after upgrading the package to refresh the docs.");

package/dist/Header.cjs

@@ -6,9 +6,9 @@ const require_primitives_Credits_index = require("./primitives/Credits/index.cjs
 const require_primitives_DropdownMenu_index = require("./primitives/DropdownMenu/index.cjs");
 const require_primitives_Input_index = require("./primitives/Input/index.cjs");
 const require_Logo = require("./Logo.cjs");
-const require_primitives_ThemeProvider_index = require("./primitives/ThemeProvider/index.cjs");
 const require_primitives_Popover_index = require("./primitives/Popover/index.cjs");
 const require_primitives_Skeleton_index = require("./primitives/Skeleton/index.cjs");
+const require_primitives_ThemeProvider_index = require("./primitives/ThemeProvider/index.cjs");
 let react = require("react");
 let react$1 = require_chunk.__toESM(react, 1);
 react = require_chunk.__toESM(react);
@@ -43,7 +43,7 @@ function filterTree(nodes, term) {
 }
 //#endregion
 //#region src/patterns/Header/ProjectPicker.tsx
-const PILL$1 = "flex h-9 items-center gap-1.5 rounded-full border bg-card px-4 text-sm";
+const PILL$1 = "flex min-h-8 items-center gap-1 rounded-12 border border-primary-border bg-input-bg px-3 py-1 text-xs leading-4";
 function ProjectPicker({ projectsTree, selectedProjectId, selectedProjectName, onSelect, projectLabel, projectPlaceholder, searchPlaceholder, emptyStateText, isLoading = false }) {
 	const [open, setOpen] = react.useState(false);
 	const [searchTerm, setSearchTerm] = react.useState("");
@@ -65,11 +65,11 @@ function ProjectPicker({ projectsTree, selectedProjectId, selectedProjectName, o
 		className: require_cn.cn(PILL$1, "min-w-44"),
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: "shrink-0 text-muted-foreground",
+				className: "shrink-0 text-muted-txt",
 				children: [projectLabel, ":"]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Skeleton_index.Skeleton, { className: "h-3 flex-1" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "size-4 shrink-0 text-muted-foreground opacity-40" })
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "size-4 shrink-0 text-muted-txt opacity-40" })
 		]
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives_Popover_index.Popover, {
@@ -80,17 +80,17 @@ function ProjectPicker({ projectsTree, selectedProjectId, selectedProjectName, o
 		},
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives_Popover_index.PopoverTrigger, {
 			"data-slot": "header-project-picker",
-			className: require_cn.cn(PILL$1, "text-left transition-colors hover:border-ring/60"),
+			className: require_cn.cn(PILL$1, "text-left transition-colors hover:border-focus/60"),
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "shrink-0 text-muted-foreground",
+					className: "shrink-0 text-muted-txt",
 					children: [projectLabel, ":"]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: require_cn.cn("max-w-36 truncate", selectedName ? "font-medium" : "text-muted-foreground"),
+					className: require_cn.cn("max-w-36 truncate", selectedName ? "font-medium" : "text-muted-txt"),
 					children: selectedName ?? projectPlaceholder
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "ml-1 size-4 shrink-0 text-muted-foreground" })
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "ml-1 size-4 shrink-0 text-muted-txt" })
 			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives_Popover_index.PopoverContent, {
 			align: "start",
@@ -101,7 +101,7 @@ function ProjectPicker({ projectsTree, selectedProjectId, selectedProjectName, o
 				className: "border-b p-2",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "relative",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, { className: "absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted-foreground" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Input_index.Input, {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, { className: "absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted-txt" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Input_index.Input, {
 						size: "sm",
 						className: "pl-8",
 						placeholder: searchPlaceholder,
@@ -112,7 +112,7 @@ function ProjectPicker({ projectsTree, selectedProjectId, selectedProjectName, o
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: "max-h-64 overflow-y-auto py-1",
 				children: filteredTree.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: "px-4 py-2 text-sm text-muted-foreground",
+					className: "px-1 py-0.5 text-sm text-muted-txt",
 					children: emptyStateText
 				}) : filteredTree.map((node) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeNode, {
 					node,
@@ -136,13 +136,13 @@ function TreeNode({ node, depth, selectedId, onSelect, collapsedIds, onToggleCol
 		"aria-expanded": hasChildren ? !isCollapsed : void 0,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			style: { paddingLeft: `${.75 + depth}rem` },
-			className: require_cn.cn("flex items-center gap-1 py-2 pr-3 text-sm transition-colors", node.isContextOnly ? "cursor-default text-muted-foreground" : "cursor-pointer hover:bg-accent", isSelected && "bg-accent font-medium"),
+			className: require_cn.cn("flex items-center gap-1 py-2 pr-3 text-sm transition-colors", node.isContextOnly ? "cursor-default text-muted-txt" : "cursor-pointer hover:bg-ghost-hover-bg", isSelected && "bg-secondary-bg font-medium"),
 			children: [
 				hasChildren ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					type: "button",
 					"aria-label": isCollapsed ? `Expand ${node.name}` : `Collapse ${node.name}`,
 					onClick: () => onToggleCollapse(node.id),
-					className: "shrink-0 text-muted-foreground hover:text-foreground",
+					className: "shrink-0 text-muted-txt hover:text-primary-txt",
 					children: isCollapsed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "size-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "size-3.5" })
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "inline-block w-3.5 shrink-0" }),
 				node.isContextOnly ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -554,12 +554,12 @@ const LOGO_HREF = {
 	sustain: "https://www.publicissapient.com/",
 	bodhi: "https://sapientaiproducts.com/bodhi"
 };
-const PILL = "flex h-9 items-center gap-1.5 rounded-full border bg-card px-4 text-sm";
+const PILL = "flex min-h-8 items-center gap-1 rounded-12 border border-primary-border bg-input-bg px-3 py-1 text-xs leading-4";
 /** The header bar shell — a sticky glass strip. */
 function HeaderBar({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
 		"data-slot": "header",
-		className: require_cn.cn("sticky top-4 z-10 mt-4 flex h-16 items-center gap-1 rounded-2xl border border-border/50 px-6 shadow-sm", "bg-[var(--glass-light)] backdrop-blur-glass", className),
+		className: require_cn.cn("sticky top-1 z-10 mt-1 flex h-15 items-center gap-5 rounded-16 px-3 py-2", "bg-glass-60-bg backdrop-blur-glass", className),
 		...props
 	});
 }
@@ -581,7 +581,7 @@ function OrgPill({ name, loading }) {
 		className: require_cn.cn(PILL, "ml-3"),
 		"data-slot": "header-org",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "shrink-0 text-muted-foreground",
+			className: "shrink-0 text-muted-txt",
 			children: [DEFAULT_LABELS.orgLabel, ":"]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Skeleton_index.Skeleton, { className: "h-4 w-24" })]
 	});
@@ -591,10 +591,10 @@ function OrgPill({ name, loading }) {
 		title: name,
 		"data-slot": "header-org",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-			className: "shrink-0 text-muted-foreground",
+			className: "shrink-0 text-muted-txt",
 			children: [DEFAULT_LABELS.orgLabel, ":"]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: "max-w-36 truncate font-medium",
+			className: "max-w-36 truncate text-primary-txt",
 			children: name
 		})]
 	});
@@ -629,7 +629,7 @@ function ProfileMenu({ email, onLogout }) {
 		sideOffset: 8,
 		className: "min-w-44",
 		children: [email && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_DropdownMenu_index.DropdownMenuLabel, {
-			className: "truncate font-normal text-muted-foreground",
+			className: "truncate font-normal text-muted-txt",
 			children: email
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_DropdownMenu_index.DropdownMenuSeparator, {})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_primitives_DropdownMenu_index.DropdownMenuItem, {
 			onSelect: onLogout,
@@ -674,7 +674,7 @@ function HeaderInner({ logoType, showOrg = false, showProjectDropdown = false, s
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HeaderLogo, { brand }),
 			pageTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				"data-slot": "header-title",
-				className: "ml-5 font-semibold text-foreground text-sm",
+				className: "ml-5 font-semibold text-primary-txt text-sm",
 				children: pageTitle
 			}),
 			logoAddon,
@@ -715,7 +715,7 @@ function HeaderInner({ logoType, showOrg = false, showProjectDropdown = false, s
 					showCreditsUi && state.credits !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
 						href: state.creditsHref,
 						"aria-label": "View credit activity",
-						className: "rounded-full outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+						className: "rounded-full outline-none focus-visible:ring-3 focus-visible:ring-focus",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Credits_index.Credits, { value: state.credits })
 					}),
 					showProfileUi && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ProfileMenu, {
@@ -739,9 +739,9 @@ function ProjectOverlay({ organizationName, projectsTree, selectedProjectId, onS
 		role: "dialog",
 		"aria-modal": "true",
 		"aria-label": DEFAULT_LABELS.overlayTitle,
-		className: "fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm",
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-primary-bg/80 backdrop-blur-sm",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "relative mx-4 flex w-full max-w-md flex-col items-center gap-6 rounded-2xl border bg-card p-8 text-card-foreground shadow-2xl",
+			className: "relative mx-1 flex w-full max-w-md flex-col items-center gap-6 rounded-16 border bg-glass-none-bg p-2 text-primary-txt shadow-xl",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Button_index.Button, {
 					variant: "ghost",
@@ -759,11 +759,11 @@ function ProjectOverlay({ organizationName, projectsTree, selectedProjectId, onS
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FolderOpen, { className: "size-8 text-primary" })
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-							className: "font-semibold text-foreground text-xl",
+							className: "font-semibold text-primary-txt text-xl",
 							children: DEFAULT_LABELS.overlayTitle
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "text-muted-foreground text-sm",
+							className: "text-muted-txt text-sm",
 							children: DEFAULT_LABELS.overlayDescription
 						})
 					]
@@ -774,7 +774,7 @@ function ProjectOverlay({ organizationName, projectsTree, selectedProjectId, onS
 						className: require_cn.cn(PILL, "select-none"),
 						title: organizationName,
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-							className: "shrink-0 text-muted-foreground",
+							className: "shrink-0 text-muted-txt",
 							children: [DEFAULT_LABELS.orgLabel, ":"]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 							className: "max-w-52 truncate font-medium",