erp-pro-ui 0.1.4 → 0.1.6

package/dist/chunks/{color-palette-euKQMWlV.mjs → color-palette-BU1cI6XP.mjs}

@@ -1,3 +1,4 @@
+import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-display/color-palette/ColorPalette.tsx
 var lightThemeGroups = [
@@ -6,52 +7,52 @@ var lightThemeGroups = [
 		colors: [
 			{
 				name: "primary-50",
-				value: "#f6efff",
+				value: "var(--ds-accent-50)",
 				textColor: "dark"
 			},
 			{
 				name: "primary-100",
-				value: "#ead9fd",
+				value: "var(--ds-accent-100)",
 				textColor: "dark"
 			},
 			{
 				name: "primary-200",
-				value: "#d8b3fb",
+				value: "var(--ds-accent-200)",
 				textColor: "dark"
 			},
 			{
 				name: "primary-300",
-				value: "#c084fc",
+				value: "var(--ds-accent-300)",
 				textColor: "dark"
 			},
 			{
 				name: "primary-400",
-				value: "#a855f7",
+				value: "var(--ds-accent-400)",
 				textColor: "light"
 			},
 			{
 				name: "primary-500",
-				value: "#9333ea",
+				value: "var(--ds-accent-500)",
 				textColor: "light"
 			},
 			{
 				name: "primary-600",
-				value: "#7e22ce",
+				value: "var(--ds-accent-600)",
 				textColor: "light"
 			},
 			{
 				name: "primary-700",
-				value: "#6b21a8",
+				value: "var(--ds-accent-700)",
 				textColor: "light"
 			},
 			{
 				name: "primary-800",
-				value: "#581c87",
+				value: "var(--ds-accent-800)",
 				textColor: "light"
 			},
 			{
 				name: "primary-900",
-				value: "#3b0764",
+				value: "var(--ds-accent-900)",
 				textColor: "light"
 			}
 		]
@@ -60,28 +61,28 @@ var lightThemeGroups = [
 		name: "Semantic Surfaces",
 		colors: [
 			{
-				name: "bg-canvas",
-				value: "#f4f7fe",
+				name: "bg-ds-canvas",
+				value: "var(--ds-color-bg-canvas)",
 				textColor: "dark"
 			},
 			{
-				name: "bg-surface",
-				value: "#ffffff",
+				name: "bg-ds-surface-1",
+				value: "var(--ds-color-bg-surface)",
 				textColor: "dark"
 			},
 			{
-				name: "bg-elevated",
-				value: "#ffffff",
+				name: "bg-ds-surface-2",
+				value: "var(--ds-color-bg-elevated)",
 				textColor: "dark"
 			},
 			{
-				name: "bg-muted",
-				value: "#f4f3f8",
+				name: "bg-ds-surface-3",
+				value: "var(--ds-color-bg-ds-surface-3)",
 				textColor: "dark"
 			},
 			{
 				name: "accent-subtle",
-				value: "#f3e8fd",
+				value: "var(--ds-color-accent-subtle)",
 				textColor: "dark"
 			}
 		]
@@ -91,22 +92,22 @@ var lightThemeGroups = [
 		colors: [
 			{
 				name: "fg",
-				value: "#1e293b",
+				value: "var(--ds-color-fg)",
 				textColor: "light"
 			},
 			{
 				name: "fg-muted",
-				value: "#475467",
+				value: "var(--ds-color-fg-muted)",
 				textColor: "light"
 			},
 			{
 				name: "fg-subtle",
-				value: "#64748b",
+				value: "var(--ds-color-fg-subtle)",
 				textColor: "light"
 			},
 			{
 				name: "on-accent",
-				value: "#ffffff",
+				value: "var(--ds-color-on-accent)",
 				textColor: "dark"
 			}
 		]
@@ -116,27 +117,27 @@ var lightThemeGroups = [
 		colors: [
 			{
 				name: "border",
-				value: "#e5e7eb",
+				value: "var(--ds-color-border)",
 				textColor: "dark"
 			},
 			{
 				name: "border-strong",
-				value: "#d1d5db",
+				value: "var(--ds-color-border-strong)",
 				textColor: "dark"
 			},
 			{
 				name: "border-muted",
-				value: "#f3f4f6",
+				value: "var(--ds-color-border-muted)",
 				textColor: "dark"
 			},
 			{
 				name: "border-field",
-				value: "#e9e8e8",
+				value: "var(--ds-color-border-field)",
 				textColor: "dark"
 			},
 			{
 				name: "focus-ring",
-				value: "#c595f2",
+				value: "var(--ds-color-focus-ring)",
 				textColor: "dark"
 			}
 		]
@@ -172,31 +173,31 @@ var lightThemeGroups = [
 		]
 	},
 	{
-		name: "Compatibility Aliases",
+		name: "Foundation Tokens",
 		colors: [
 			{
-				name: "--color-primary",
-				value: "#4318ff",
+				name: "--ds-primary",
+				value: "var(--ds-primary)",
 				textColor: "light"
 			},
 			{
-				name: "--color-background-primary",
-				value: "#f4f7fe",
+				name: "--ds-surface-canvas",
+				value: "var(--ds-surface-canvas)",
 				textColor: "dark"
 			},
 			{
-				name: "--color-background-secondary",
-				value: "#ffffff",
+				name: "--ds-surface-1",
+				value: "var(--ds-surface-1)",
 				textColor: "dark"
 			},
 			{
-				name: "--color-text-primary",
-				value: "#1e293b",
+				name: "--ds-text-1",
+				value: "var(--ds-text-1)",
 				textColor: "light"
 			},
 			{
-				name: "--color-border-primary",
-				value: "#d1d5db",
+				name: "--ds-border-1",
+				value: "var(--ds-border-1)",
 				textColor: "dark"
 			}
 		]
@@ -208,52 +209,52 @@ var darkThemeGroups = [
 		colors: [
 			{
 				name: "primary-50",
-				value: "#f6efff",
+				value: "var(--ds-accent-50)",
 				textColor: "dark"
 			},
 			{
 				name: "primary-100",
-				value: "#ead9fd",
+				value: "var(--ds-accent-100)",
 				textColor: "dark"
 			},
 			{
 				name: "primary-200",
-				value: "#d8b3fb",
+				value: "var(--ds-accent-200)",
 				textColor: "dark"
 			},
 			{
 				name: "primary-300",
-				value: "#c084fc",
+				value: "var(--ds-accent-300)",
 				textColor: "dark"
 			},
 			{
 				name: "primary-400",
-				value: "#a855f7",
+				value: "var(--ds-accent-400)",
 				textColor: "light"
 			},
 			{
 				name: "primary-500",
-				value: "#9333ea",
+				value: "var(--ds-accent-500)",
 				textColor: "light"
 			},
 			{
 				name: "primary-600",
-				value: "#7e22ce",
+				value: "var(--ds-accent-600)",
 				textColor: "light"
 			},
 			{
 				name: "primary-700",
-				value: "#6b21a8",
+				value: "var(--ds-accent-700)",
 				textColor: "light"
 			},
 			{
 				name: "primary-800",
-				value: "#581c87",
+				value: "var(--ds-accent-800)",
 				textColor: "light"
 			},
 			{
 				name: "primary-900",
-				value: "#3b0764",
+				value: "var(--ds-accent-900)",
 				textColor: "light"
 			}
 		]
@@ -262,28 +263,28 @@ var darkThemeGroups = [
 		name: "Semantic Surfaces (Dark)",
 		colors: [
 			{
-				name: "bg-canvas",
-				value: "#070f2e",
+				name: "bg-ds-canvas",
+				value: "var(--ds-color-bg-canvas)",
 				textColor: "light"
 			},
 			{
-				name: "bg-surface",
-				value: "#111c44",
+				name: "bg-ds-surface-1",
+				value: "var(--ds-color-bg-surface)",
 				textColor: "light"
 			},
 			{
-				name: "bg-elevated",
-				value: "#111c44",
+				name: "bg-ds-surface-2",
+				value: "var(--ds-color-bg-elevated)",
 				textColor: "light"
 			},
 			{
-				name: "bg-muted",
-				value: "#18254f",
+				name: "bg-ds-surface-3",
+				value: "var(--ds-color-bg-ds-surface-3)",
 				textColor: "light"
 			},
 			{
 				name: "accent-subtle",
-				value: "#24194b",
+				value: "var(--ds-color-accent-subtle)",
 				textColor: "light"
 			}
 		]
@@ -293,22 +294,22 @@ var darkThemeGroups = [
 		colors: [
 			{
 				name: "fg",
-				value: "#f1f5f9",
+				value: "var(--ds-color-fg)",
 				textColor: "dark"
 			},
 			{
 				name: "fg-muted",
-				value: "#cbd5e1",
+				value: "var(--ds-color-fg-muted)",
 				textColor: "dark"
 			},
 			{
 				name: "fg-subtle",
-				value: "#94a3b8",
+				value: "var(--ds-color-fg-subtle)",
 				textColor: "dark"
 			},
 			{
 				name: "on-accent",
-				value: "#ffffff",
+				value: "var(--ds-color-on-accent)",
 				textColor: "dark"
 			}
 		]
@@ -318,27 +319,27 @@ var darkThemeGroups = [
 		colors: [
 			{
 				name: "border",
-				value: "#4b5563",
+				value: "var(--ds-color-border)",
 				textColor: "light"
 			},
 			{
 				name: "border-strong",
-				value: "#374151",
+				value: "var(--ds-color-border-strong)",
 				textColor: "light"
 			},
 			{
 				name: "border-muted",
-				value: "#6b7280",
+				value: "var(--ds-color-border-muted)",
 				textColor: "light"
 			},
 			{
 				name: "border-field",
-				value: "#545b58",
+				value: "var(--ds-color-border-field)",
 				textColor: "light"
 			},
 			{
 				name: "focus-ring",
-				value: "#b57fe7",
+				value: "var(--ds-color-focus-ring)",
 				textColor: "dark"
 			}
 		]
@@ -374,31 +375,31 @@ var darkThemeGroups = [
 		]
 	},
 	{
-		name: "Compatibility Aliases (Dark)",
+		name: "Foundation Tokens (Dark)",
 		colors: [
 			{
-				name: "--color-primary",
-				value: "#4318ff",
+				name: "--ds-primary",
+				value: "var(--ds-primary)",
 				textColor: "light"
 			},
 			{
-				name: "--color-background-primary",
-				value: "#070f2e",
+				name: "--ds-surface-canvas",
+				value: "var(--ds-surface-canvas)",
 				textColor: "light"
 			},
 			{
-				name: "--color-background-secondary",
-				value: "#111c44",
+				name: "--ds-surface-1",
+				value: "var(--ds-surface-1)",
 				textColor: "light"
 			},
 			{
-				name: "--color-text-primary",
-				value: "#f1f5f9",
+				name: "--ds-text-1",
+				value: "var(--ds-text-1)",
 				textColor: "dark"
 			},
 			{
-				name: "--color-border-primary",
-				value: "#374151",
+				name: "--ds-border-1",
+				value: "var(--ds-border-1)",
 				textColor: "light"
 			}
 		]
@@ -517,31 +518,51 @@ var gradientGroups = [
 	}
 ];
 function ColorSwatchItem({ color }) {
+	const swatchRef = React.useRef(null);
+	const [resolvedValue, setResolvedValue] = React.useState(color.value);
+	React.useEffect(() => {
+		if (!swatchRef.current) return;
+		if (color.value.startsWith("var(")) {
+			const computedBackground = getComputedStyle(swatchRef.current).backgroundColor;
+			setResolvedValue(computedBackground || color.value);
+			return;
+		}
+		setResolvedValue(color.value);
+	}, [color.value]);
 	const copyToClipboard = () => {
-		navigator.clipboard.writeText(color.value);
+		navigator.clipboard.writeText(resolvedValue);
 	};
+	const swatchLabel = color.value.startsWith("var(") ? "LIVE" : color.value.length <= 9 ? color.value.toUpperCase() : "RGBA";
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col items-center gap-2 cursor-pointer transition-transform hover:scale-105",
 		onClick: copyToClipboard,
 		title: "Click to copy",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "w-20 h-20 rounded-lg shadow-md border border-neutral-200 dark:border-neutral-700 flex items-center justify-center text-xs font-mono",
-			style: { backgroundColor: color.value },
-			children: /* @__PURE__ */ jsx("span", {
-				className: color.textColor === "light" ? "text-white" : "text-neutral-900",
-				children: color.value.length <= 9 ? color.value.toUpperCase() : "RGBA"
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: swatchRef,
+				className: "w-20 h-20 rounded-lg shadow-md border border-ds-border-2 flex items-center justify-center text-xs font-mono",
+				style: { backgroundColor: color.value },
+				children: /* @__PURE__ */ jsx("span", {
+					className: "font-semibold text-ds-1 mix-blend-difference",
+					children: swatchLabel
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-xs font-medium text-ds-2 text-center max-w-20",
+				children: color.name
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-[10px] font-mono text-ds-3 text-center max-w-20 break-all",
+				children: resolvedValue
 			})
-		}), /* @__PURE__ */ jsx("span", {
-			className: "text-xs font-medium text-neutral-700 dark:text-neutral-300 text-center max-w-20",
-			children: color.name
-		})]
+		]
 	});
 }
 function GradientPreview() {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mt-8",
 		children: [/* @__PURE__ */ jsx("h3", {
-			className: "text-lg font-semibold text-neutral-900 dark:text-white mb-4",
+			className: "text-lg font-semibold text-ds-1 mb-4",
 			children: "Semantic Gradient Examples"
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
@@ -549,66 +570,66 @@ function GradientPreview() {
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-2",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "h-24 rounded-lg flex items-center justify-center text-white font-medium",
+						className: "h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium",
 						style: { background: "linear-gradient(135deg, #9333ea, #7e22ce)" },
 						children: "Accent Gradient"
 					}), /* @__PURE__ */ jsx("code", {
-						className: "text-xs text-neutral-500",
+						className: "text-xs text-ds-3",
 						children: "linear-gradient(135deg, #9333ea, #7e22ce)"
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-2",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "h-24 rounded-lg flex items-center justify-center text-white font-medium",
+						className: "h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium",
 						style: { background: "linear-gradient(135deg, #9333ea, #4318ff)" },
 						children: "Accent to Brand Primary"
 					}), /* @__PURE__ */ jsx("code", {
-						className: "text-xs text-neutral-500",
+						className: "text-xs text-ds-3",
 						children: "linear-gradient(135deg, #9333ea, #4318ff)"
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-2",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "h-24 rounded-lg flex items-center justify-center text-white font-medium",
+						className: "h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium",
 						style: { background: "linear-gradient(135deg, #22c55e, #16a34a)" },
 						children: "Success Gradient"
 					}), /* @__PURE__ */ jsx("code", {
-						className: "text-xs text-neutral-500",
+						className: "text-xs text-ds-3",
 						children: "linear-gradient(135deg, #22c55e, #16a34a)"
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-2",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "h-24 rounded-lg flex items-center justify-center text-neutral-900 font-medium",
+						className: "h-24 rounded-lg flex items-center justify-center text-ds-1 font-medium",
 						style: { background: "linear-gradient(135deg, #fbbf24, #f59e0b)" },
 						children: "Warning Gradient"
 					}), /* @__PURE__ */ jsx("code", {
-						className: "text-xs text-neutral-500",
+						className: "text-xs text-ds-3",
 						children: "linear-gradient(135deg, #fbbf24, #f59e0b)"
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-2",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "h-24 rounded-lg flex items-center justify-center text-white font-medium",
+						className: "h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium",
 						style: { background: "linear-gradient(135deg, #ef4444, #dc2626)" },
 						children: "Error Gradient"
 					}), /* @__PURE__ */ jsx("code", {
-						className: "text-xs text-neutral-500",
+						className: "text-xs text-ds-3",
 						children: "linear-gradient(135deg, #ef4444, #dc2626)"
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: "flex flex-col gap-2",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "h-24 rounded-lg flex items-center justify-center text-white font-medium backdrop-blur-xl border border-white/20",
+						className: "h-24 rounded-lg flex items-center justify-center text-ds-on-accent font-medium backdrop-blur-xl border border-ds-border-2/40",
 						style: { background: "rgba(147, 51, 234, 0.7)" },
 						children: "Glass Effect"
 					}), /* @__PURE__ */ jsx("code", {
-						className: "text-xs text-neutral-500",
+						className: "text-xs text-ds-3",
 						children: "rgba(147, 51, 234, 0.7) + backdrop-blur"
 					})]
 				})
@@ -618,36 +639,36 @@ function GradientPreview() {
 }
 function UsageExamples() {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "mt-8 p-6 bg-neutral-50 dark:bg-neutral-800/50 rounded-xl",
+		className: "mt-8 p-6 bg-ds-surface-2 rounded-xl",
 		children: [/* @__PURE__ */ jsx("h3", {
-			className: "text-lg font-semibold text-neutral-900 dark:text-white mb-4",
+			className: "text-lg font-semibold text-ds-1 mb-4",
 			children: "Recommended Usage"
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "space-y-4",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					className: "p-4 bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700",
+					className: "p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2",
 					children: [/* @__PURE__ */ jsx("h4", {
-						className: "font-medium text-neutral-900 dark:text-white mb-2",
+						className: "font-medium text-ds-1 mb-2",
 						children: "Semantic utilities first"
 					}), /* @__PURE__ */ jsx("pre", {
-						className: "text-xs font-mono text-neutral-600 dark:text-neutral-400 overflow-x-auto",
+						className: "text-xs font-mono text-ds-2 overflow-x-auto",
 						children: `import { Button } from "erp-pro-ui";
 
-<section className="bg-surface text-fg border border-border rounded-2xl p-6">
-  <h2 className="text-accent text-xl font-semibold">Semantic theme</h2>
-  <p className="text-fg-muted">Use utilities generated by colors.css.</p>
+<section className="bg-ds-surface-1 text-ds-1 border border-ds-border-2 rounded-2xl p-6">
+  <h2 className="text-ds-1 text-xl font-semibold">Semantic theme</h2>
+  <p className="text-ds-2">Use utilities generated by colors.css.</p>
   <Button label="Save changes" primary />
 </section>`
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "p-4 bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700",
+					className: "p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2",
 					children: [/* @__PURE__ */ jsx("h4", {
-						className: "font-medium text-neutral-900 dark:text-white mb-2",
+						className: "font-medium text-ds-1 mb-2",
 						children: "Raw design-system variables"
 					}), /* @__PURE__ */ jsx("pre", {
-						className: "text-xs font-mono text-neutral-600 dark:text-neutral-400 overflow-x-auto",
+						className: "text-xs font-mono text-ds-2 overflow-x-auto",
 						children: `.dashboard-shell {
   background: var(--ds-color-bg-surface);
   color: var(--ds-color-fg);
@@ -664,12 +685,12 @@ html[data-brand="teal"][data-mode="dark"] {
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "p-4 bg-white dark:bg-neutral-900 rounded-lg border border-neutral-200 dark:border-neutral-700",
+					className: "p-4 bg-ds-surface-1 rounded-lg border border-ds-border-2",
 					children: [/* @__PURE__ */ jsx("h4", {
-						className: "font-medium text-neutral-900 dark:text-white mb-2",
+						className: "font-medium text-ds-1 mb-2",
 						children: "Compatibility aliases for migration"
 					}), /* @__PURE__ */ jsx("pre", {
-						className: "text-xs font-mono text-neutral-600 dark:text-neutral-400 overflow-x-auto",
+						className: "text-xs font-mono text-ds-2 overflow-x-auto",
 						children: `:root {
   --color-primary: #4318ff;
   --color-background-primary: #f4f7fe;
@@ -685,52 +706,65 @@ html[data-brand="teal"][data-mode="dark"] {
 }
 function ColorPalette({ groups, theme = "all", showGradients = true, showUsageExamples = true, className }) {
 	let displayGroups;
-	if (groups) displayGroups = groups;
-	else if (theme === "light") displayGroups = lightThemeGroups;
-	else if (theme === "dark") displayGroups = darkThemeGroups;
-	else displayGroups = [...lightThemeGroups, ...darkThemeGroups];
-	if (showGradients && !groups) displayGroups = [...displayGroups, ...gradientGroups];
+	if (groups) displayGroups = groups.map((group) => ({ group }));
+	else if (theme === "light") displayGroups = lightThemeGroups.map((group) => ({
+		group,
+		mode: "light"
+	}));
+	else if (theme === "dark") displayGroups = darkThemeGroups.map((group) => ({
+		group,
+		mode: "dark"
+	}));
+	else displayGroups = [...lightThemeGroups.map((group) => ({
+		group,
+		mode: "light"
+	})), ...darkThemeGroups.map((group) => ({
+		group,
+		mode: "dark"
+	}))];
+	if (showGradients && !groups) displayGroups = [...displayGroups, ...gradientGroups.map((group) => ({ group }))];
 	return /* @__PURE__ */ jsxs("div", {
-		className: `p-6 bg-white dark:bg-neutral-900 rounded-xl ${className || ""}`,
+		className: `p-6 bg-ds-surface-1 rounded-xl ${className || ""}`,
 		children: [
 			/* @__PURE__ */ jsx("h2", {
-				className: "text-2xl font-bold text-neutral-900 dark:text-white mb-2",
+				className: "text-2xl font-bold text-ds-1 mb-2",
 				children: "Color Palette"
 			}),
 			/* @__PURE__ */ jsxs("p", {
-				className: "text-sm text-neutral-600 dark:text-neutral-400 mb-6",
+				className: "text-sm text-ds-2 mb-6",
 				children: [
 					"Preferred contract:",
 					" ",
 					/* @__PURE__ */ jsx("code", {
-						className: "font-mono bg-neutral-100 dark:bg-neutral-800 px-2 py-1 rounded",
+						className: "font-mono bg-ds-surface-2 px-2 py-1 rounded text-ds-1",
 						children: "semantic utilities and --ds-* tokens"
 					}),
 					" ",
-					"• Compatibility aliases remain available for migration. Click any swatch to copy the color value."
+					"• Compatibility aliases remain available for migration. Light and dark sections are resolved in their own mode contexts. Click any swatch to copy the resolved color value."
 				]
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "mb-6 flex flex-wrap gap-2",
 				children: [
 					/* @__PURE__ */ jsx("span", {
-						className: `px-3 py-1 rounded-full text-xs font-medium ${theme === "light" || theme === "all" ? "bg-accent-subtle text-accent" : "bg-neutral-100 text-neutral-500"}`,
+						className: `px-3 py-1 rounded-full text-xs font-medium ${theme === "light" || theme === "all" ? "bg-ds-accent-subtle text-ds-1" : "bg-ds-surface-2 text-ds-3"}`,
 						children: "Light Theme"
 					}),
 					/* @__PURE__ */ jsx("span", {
-						className: `px-3 py-1 rounded-full text-xs font-medium ${theme === "dark" || theme === "all" ? "bg-accent-subtle text-accent" : "bg-neutral-100 text-neutral-500"}`,
+						className: `px-3 py-1 rounded-full text-xs font-medium ${theme === "dark" || theme === "all" ? "bg-ds-accent-subtle text-ds-1" : "bg-ds-surface-2 text-ds-3"}`,
 						children: "Dark Theme"
 					}),
 					showGradients && /* @__PURE__ */ jsx("span", {
-						className: "px-3 py-1 rounded-full text-xs font-medium bg-accent-subtle text-accent",
+						className: "px-3 py-1 rounded-full text-xs font-medium bg-ds-accent-subtle text-ds-1",
 						children: "Gradients"
 					})
 				]
 			}),
-			displayGroups.map((group) => /* @__PURE__ */ jsxs("div", {
+			displayGroups.map(({ group, mode }) => /* @__PURE__ */ jsxs("div", {
+				"data-mode": mode,
 				className: "mb-8",
 				children: [/* @__PURE__ */ jsx("h3", {
-					className: "text-lg font-semibold text-neutral-900 dark:text-white mb-4",
+					className: "text-lg font-semibold text-ds-1 mb-4",
 					children: group.name
 				}), /* @__PURE__ */ jsx("div", {
 					className: "flex flex-wrap gap-4",
@@ -745,4 +779,4 @@ function ColorPalette({ groups, theme = "all", showGradients = true, showUsageEx
 //#endregion
 export { ColorPalette as t };
 
-//# sourceMappingURL=color-palette-euKQMWlV.mjs.map
+//# sourceMappingURL=color-palette-BU1cI6XP.mjs.map