@woobee/ui 0.2.4 → 0.3.1

package/dist/index.mjs

@@ -49,15 +49,15 @@ function Button({
         "border bg-brown-500 border-transparent text-white": variant === "primary" && !darkMode,
         "dark:bg-primary-500 dark:hover:bg-primary-600 dark:text-black": variant === "primary" && !darkMode,
         "border bg-primary-500 hover:bg-primary-600 border-transparent text-black": variant === "primary" && !!darkMode,
-        "text-gray-700 bg-white border border-gray-300 hover:text-gray-500": variant === "secondary" && !darkMode,
+        "text-content-primary bg-white border border-gray-300 hover:text-content-secondary": variant === "secondary" && !darkMode,
         "text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-charcoal-700": variant === "secondary" && !!darkMode,
-        "!rounded-md text-left w-full text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 hover:text-gray-500": variant === "form-input" && !darkMode,
+        "!rounded-md text-left w-full text-content-primary bg-white border border-gray-200 hover:bg-gray-50 hover:text-content-secondary": variant === "form-input" && !darkMode,
         "!rounded-md text-left w-full text-charcoal-100 bg-charcoal-800 hover:bg-charcoal-700 border border-charcoal-700": variant === "form-input" && !!darkMode,
-        "dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-charcoal-100 dark:border-charcoal-700": (variant === "secondary" || variant === "form-input") && !darkMode,
+        "dark:bg-charcoal-800 dark:hover:bg-charcoal-700 dark:text-content-primary dark:border-charcoal-700": (variant === "secondary" || variant === "form-input") && !darkMode,
         "hover:text-brown-500 !shadow-none": variant === "flat" && !darkMode,
-        "dark:text-charcoal-100 dark:hover:text-primary-500": variant === "flat" && !darkMode,
+        "dark:text-content-primary dark:hover:text-primary-500": variant === "flat" && !darkMode,
         "text-charcoal-100 hover:text-primary-500 !shadow-none": variant === "flat" && !!darkMode,
-        "!text-gray-300 hover:!text-gray-400": !children && !darkMode,
+        "!text-content-disabled hover:!text-content-placeholder": !children && !darkMode,
         "dark:!text-charcoal-400": !children && !darkMode,
         "!text-charcoal-400": !children && !!darkMode,
         ...classNameObject(className)
@@ -89,7 +89,7 @@ function Tag({
     {
       className: classNames({
         "inline-flex items-center rounded font-medium whitespace-nowrap": true,
-        "bg-cream-200 dark:bg-charcoal-700 text-gray-800 dark:text-gray-200": !color,
+        "bg-cream-200 dark:bg-charcoal-700 text-content-title": !color,
         "text-white": !!color,
         // medium size
         "text-sm": size === "medium",
@@ -140,7 +140,7 @@ function TagGroup({
           children: tag.name
         },
         tag.id || tag.name
-      )) : placeholder && /* @__PURE__ */ jsx("span", { className: "text-gray-300 dark:text-charcoal-400 text-sm flex items-center", children: placeholder })
+      )) : placeholder && /* @__PURE__ */ jsx("span", { className: "text-content-placeholder text-sm flex items-center", children: placeholder })
     }
   );
 }
@@ -165,8 +165,8 @@ function Tabs({
         {
           className: classNames({
             "px-3 py-2 transition-colors rounded-lg": true,
-            "bg-white text-brown-500 dark:text-primary-500 dark:bg-charcoal-600": value === option.id,
-            "hover:text-brown-500 dark:text-charcoal-300 dark:hover:text-primary-500": value !== option.id
+            "bg-white text-content-link dark:bg-charcoal-600": value === option.id,
+            "text-content-secondary": value !== option.id
           }),
           onClick: () => onChange(option.id),
           children: option.label
@@ -275,7 +275,7 @@ function CheckboxList({
   };
   const renderPlaceholder = () => {
     if (typeof placeholder === "string") {
-      return /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-gray-500 dark:text-charcoal-400", children: placeholder });
+      return /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-content-placeholder", children: placeholder });
     }
     return placeholder;
   };
@@ -301,7 +301,7 @@ function CheckboxList({
               className: classNames({
                 "w-5 h-5 rounded border flex items-center justify-center transition-colors cursor-pointer": true,
                 "border-gray-300 bg-white dark:border-charcoal-700 dark:bg-charcoal-700": !checked,
-                "border-brown-500 bg-brown-500 dark:bg-primary-500 dark:border-primary-500 dark:text-black text-white": checked
+                "border-brown-500 bg-brown-500 dark:bg-primary-500 dark:border-primary-500 text-content-primary-button": checked
               }),
               children: checked && /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z" }) })
             }
@@ -311,8 +311,8 @@ function CheckboxList({
             {
               className: classNames({
                 "text-sm": true,
-                "text-gray-900 dark:text-gray-100": !checked,
-                "dark:text-primary-400": checked
+                "text-content-secondary": !checked,
+                "text-content-title": checked
               }),
               children: label
             }
@@ -693,7 +693,7 @@ function Modal({
                         }),
                         children: [
                           /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                            /* @__PURE__ */ jsx("h3", { className: "my-0 text-base font-semibold leading-tight text-gray-900 dark:text-white", children: title }),
+                            /* @__PURE__ */ jsx("h3", { className: "my-0 text-base font-semibold leading-tight text-content-title ", children: title }),
                             !!description && description.length > 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-primary-700", children: description })
                           ] }),
                           /* @__PURE__ */ jsx(Button, { variant: "flat", compact: true, onClick: handleClose, children: /* @__PURE__ */ jsx("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) }) })
@@ -810,7 +810,7 @@ function ConfirmationBox({
       disabled,
       children: /* @__PURE__ */ jsxs("div", { className: "flex items-start space-x-4", children: [
         iconSvg && /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full ${iconContainerClass}`, children: iconSvg }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1 pt-1.5", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400 font-medium", children: description }) })
+        /* @__PURE__ */ jsx("div", { className: "flex-1 pt-1.5", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-content-secondary  font-medium", children: description }) })
       ] })
     }
   );
@@ -910,7 +910,7 @@ function Drawer({
                               "div",
                               {
                                 "aria-label": "Close",
-                                className: "-mr-3 text-primary-700 dark:text-white hover:text-primary-500 p-1.5 rounded-lg hover:bg-primary-100 transition ease-in-out duration-150",
+                                className: "-mr-3 text-content-title hover:text-primary-500 p-1.5 rounded-lg hover:bg-primary-100 transition ease-in-out duration-150",
                                 onClick: handleClose,
                                 children: /* @__PURE__ */ jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) })
                               }
@@ -991,7 +991,7 @@ function InlinePrompt({
         className: classNames({
           "inline-flex justify-center w-full rounded-md bg-transparent font-medium focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-50 transition ease-in-out duration-150 cursor-pointer": true,
           "leading-5 px-4 py-2": !condensed,
-          "text-gray-700 hover:text-gray-500 active:text-gray-800 text-md": !className.includes("text-"),
+          "text-content-primary hover:text-content-secondary active:text-content-title text-md": !className.includes("text-"),
           ...classNameObject(className)
         }),
         "aria-haspopup": "true",
@@ -1070,9 +1070,9 @@ function Breadcrumb({
       "a",
       {
         onClick: clickBack,
-        className: "flex items-center text-sm leading-5 font-medium text-gray-500 hover:text-gray-700 transition duration-150 ease-in-out cursor-pointer",
+        className: "flex items-center text-sm leading-5 font-medium text-content-secondary hover:text-content-primary transition duration-150 ease-in-out cursor-pointer",
         children: [
-          /* @__PURE__ */ jsx("svg", { className: "flex-shrink-0 -ml-1 mr-1 h-5 w-5 text-gray-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("svg", { className: "flex-shrink-0 -ml-1 mr-1 h-5 w-5 text-content-placeholder", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
             "path",
             {
               fillRule: "evenodd",
@@ -1085,8 +1085,8 @@ function Breadcrumb({
       }
     ) }),
     /* @__PURE__ */ jsx("nav", { className: "hidden sm:flex items-center text-sm leading-5 font-medium", children: links && links.length > 0 && links.map((link, index) => /* @__PURE__ */ jsxs("span", { className: "inline-flex", children: [
-      /* @__PURE__ */ jsx(LinkComponent, { href: link.href, className: "text-gray-500 hover:text-gray-700 transition duration-150 ease-in-out", children: link.name }),
-      index !== links.length - 1 && /* @__PURE__ */ jsx("svg", { className: "flex-shrink-0 mx-2 h-5 w-5 text-gray-400", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(LinkComponent, { href: link.href, className: "text-content-secondary hover:text-content-primary transition duration-150 ease-in-out", children: link.name }),
+      index !== links.length - 1 && /* @__PURE__ */ jsx("svg", { className: "flex-shrink-0 mx-2 h-5 w-5 text-content-placeholder", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
         "path",
         {
           fillRule: "evenodd",
@@ -1192,10 +1192,10 @@ function ButtonItem({
     "div",
     {
       className: classNames({
-        "p-3 rounded-xl mx-auto text-charcoal-700/70 dark:text-charcoal-50/50 flex justify-center cursor-pointer": true,
+        "p-3 rounded-xl mx-auto flex justify-center cursor-pointer": true,
         "w-full": direction === "vertical",
         "w-full overflow-hidden": direction === "horizontal",
-        "!text-charcoal-700 dark:!text-primary-500 bg-white/50 dark:bg-charcoal-800/90 dark:backdrop-filter dark:backdrop-blur-sm border border-white lg:border-transparent dark:border-charcoal-700 shadow-xs dark:shadow-none": active,
+        "text-content-link bg-white/50 dark:bg-charcoal-800/90 dark:backdrop-filter dark:backdrop-blur-sm border border-white lg:border-transparent dark:border-charcoal-700 shadow-xs dark:shadow-none": active,
         ...classNameObject(className)
       }),
       children: /* @__PURE__ */ jsxs(
@@ -1318,7 +1318,7 @@ function H1({ className, children }) {
     "h1",
     {
       className: classNames({
-        "text-lg sm:text-xl font-title text-primary-500 font-semibold": true,
+        "text-lg sm:text-3xl font-title font-semibold": true,
         ...classNameObject(className)
       }),
       children
@@ -1420,7 +1420,7 @@ function Th({ condensed, className, children, sticky, ...opts }) {
       className: classNames({
         ...classNameObject(className),
         "sticky z-10 top-0": !!sticky,
-        "border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider": true,
+        "border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-content-secondary uppercase tracking-wider": true,
         "px-6": !condensed,
         "py-4": !condensed && (!className || !className.includes("py-")),
         "px-2.5": !!condensed,
@@ -1549,7 +1549,7 @@ var Input = forwardRef((props, ref) => {
           id,
           className: classNames({
             ...classNameObject(className),
-            "px-3 group form-input placeholder-gray-300 dark:placeholder-charcoal-400 focus:outline-none block transition ease-in-out duration-150 text-black dark:text-charcoal-100 dark:bg-charcoal-800 shadow-sm focus:dark:text-primary-500 focus:dark:border-primary-500 focus:dark:ring-primary-500": true,
+            "text-content-primary px-3 group form-input placeholder-gray-300 dark:placeholder-charcoal-400 focus:outline-none block transition ease-in-out duration-150 dark:bg-charcoal-800 shadow-sm focus:dark:text-content-link focus:dark:border-primary-500 focus:dark:ring-primary-500": true,
             "!text-white !border-charcoal-400 !placeholder-charcoal-400 focus:!text-primary-500 focus:!border-primary-500 focus:!ring-primary-500": !!darkMode,
             "h-11": !className || !className.includes("h-"),
             "text-sm": type !== "tel",
@@ -1565,7 +1565,7 @@ var Input = forwardRef((props, ref) => {
             "w-full": type !== "radio" && (!className || className.includes("w-full") || !className.includes("w-")),
             "sm:leading-normal": !className || !className.includes("leading-"),
             "cursor-pointer": type === "checkbox" || type === "button",
-            "text-black h-4 w-4": type === "radio",
+            "h-4 w-4": type === "radio",
             "pr-10": type === "search"
           }),
           ...type === "button" ? { value: label } : {},
@@ -1614,7 +1614,7 @@ var Input = forwardRef((props, ref) => {
           className: classNames({
             "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none focus:outline-none active:outline-none": true,
             "!text-white": !!darkMode,
-            "text-gray-600": !focused,
+            "text-content-secondary": !focused,
             "!text-primary-500": focused
           }),
           children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
@@ -1629,13 +1629,14 @@ var Input = forwardRef((props, ref) => {
       )
     ] }),
     error && errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-red-600", children: errorMessage }),
-    info != null && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500", children: info })
+    info != null && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-content-secondary", children: info })
   ] });
 });
 Input.displayName = "Input";
 var Input_default = Input;
 function Label({
   className,
+  active = false,
   error = false,
   htmlFor,
   info,
@@ -1649,8 +1650,8 @@ function Label({
       {
         htmlFor,
         className: classNames({
-          "block text-sm font-medium mb-1.5 text-black dark:text-white": true,
-          "text-black dark:text-white/80": !error,
+          "block text-sm font-medium mb-1.5": true,
+          "text-content-link": active,
           "text-red-600": error,
           ...classNameObject(className)
         }),
@@ -1664,7 +1665,7 @@ function Label({
       "span",
       {
         className: classNames({
-          "text-sm leading-5 text-black mb-1.5": true,
+          "text-sm leading-5 mb-1.5": true,
           "text-red-600": error
         }),
         children: info
@@ -1707,7 +1708,7 @@ var Select = forwardRef((props, ref) => {
     ) }),
     loading && /* @__PURE__ */ jsx("span", { className: "inline-flex relative w-6 loading" }),
     error && errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-red-600", children: errorMessage }),
-    info != null && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500", children: info })
+    info != null && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-content-secondary", children: info })
   ] });
 });
 Select.displayName = "Select";
@@ -1779,7 +1780,7 @@ var Textarea = forwardRef((props, ref) => {
           placeholder,
           className: classNames({
             ...classNameObject(className),
-            "form-input border block w-full placeholder-gray-300 dark:placeholder-white/50 dark:focus:placeholder-charcoal-400 text-sm transition ease-in-out duration-150 px-3 py-2 border-gray-200 dark:border-charcoal-700 text-black dark:text-charcoal-100 dark:bg-charcoal-800 rounded-lg": true,
+            "form-input border block w-full placeholder-gray-300 dark:placeholder-white/50 dark:focus:placeholder-charcoal-400 text-sm transition ease-in-out duration-150 px-3 py-2 border-gray-200 dark:border-charcoal-700 dark:bg-charcoal-800 rounded-lg": true,
             "focus:ring-white dark:focus:ring-1 dark:focus:border-primary-600 dark:focus:ring-primary-500": !error,
             "focus:outline-none focus:ring-0 focus:ring-offset-0 dark:focus:border-primary-500": true,
             "border-red-300 text-red-900 placeholder-red-300 dark:placeholder-red-600 focus:border-red-300 focus:shadow-outline-red": error
@@ -1803,7 +1804,7 @@ var Textarea = forwardRef((props, ref) => {
       ) }) })
     ] }),
     error && errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-red-600", children: errorMessage }),
-    info != null && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500", children: info })
+    info != null && !error && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-content-secondary", children: info })
   ] });
 });
 Textarea.displayName = "Textarea";
@@ -1915,8 +1916,8 @@ function NoData({ className }) {
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "max-w-[90%] flex flex-col text-center", children: [
-      /* @__PURE__ */ jsx("h4", { className: "text-6 font-medium text-gray-900 mt-3 dark:text-white/50", children: "It's empty." }),
-      /* @__PURE__ */ jsx("p", { className: "text-4 text-gray-700 dark:text-white/60", children: "Nothing to do for now." })
+      /* @__PURE__ */ jsx("h4", { className: "text-6 font-medium text-content-title mt-3 /50", children: "It's empty." }),
+      /* @__PURE__ */ jsx("p", { className: "text-4", children: "Nothing to do for now." })
     ] })
   ] });
 }
@@ -2059,7 +2060,7 @@ function useThemeContext() {
 }
 function ThemeToggle() {
   const { theme, handleToggleTheme } = useThemeContext();
-  return /* @__PURE__ */ jsxs("div", { className: "text-charcoal-700 dark:text-white z-30 flex space-x-1.5 items-center", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "text-content-primary z-30 flex space-x-1.5 items-center", children: [
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -2174,7 +2175,7 @@ function PopoverCard({
             !!description && /* @__PURE__ */ jsx("p", { className: "px-3 pb-1 opacity-70", children: description }),
             actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-1.5 w-full", children: actions.filter((action) => (action.items || []).length > 0).map((action, actionIndex) => /* @__PURE__ */ jsxs("div", { children: [
               actionIndex > 0 && /* @__PURE__ */ jsx("div", { className: "w-full h-px bg-gray-100 dark:bg-charcoal-800 mb-3" }),
-              action.section && /* @__PURE__ */ jsx("p", { className: "px-3 text-xxs sm:text-xs uppercase text-gray-500 dark:text-white dark:hover", children: action.section }),
+              action.section && /* @__PURE__ */ jsx("p", { className: "px-3 text-xxs sm:text-xs uppercase text-content-secondary dark:hover", children: action.section }),
               /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -2184,7 +2185,7 @@ function PopoverCard({
                   children: (action.items || []).map((item) => /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: "text-sm sm:text-base px-3 py-1.5 text-charcoal-700 dark:text-charcoal-300 hover:text-gray-900 hover:bg-gray-200 hover:dark:text-charcoal-200 hover:dark:bg-charcoal-700 cursor-pointer whitespace-normal",
+                      className: "text-sm sm:text-base px-3 py-1.5 text-content-primary hover:text-content-title hover:bg-gray-200 hover:dark:bg-charcoal-700 cursor-pointer whitespace-normal",
                       onClick: () => handleMenuClick(item.action || item.onClick),
                       children: item.label
                     },
@@ -2233,24 +2234,24 @@ function PopoverCard({
             }),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3", children: [
-                /* @__PURE__ */ jsx("h3", { className: "font-semibold text-gray-900 dark:text-white", children: "Menu" }),
+                /* @__PURE__ */ jsx("h3", { className: "font-semibold text-content-title ", children: "Menu" }),
                 /* @__PURE__ */ jsx(
                   "div",
                   {
                     onClick: handleCloseMenu,
-                    className: "p-1 -mr-1 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-charcoal-700 rounded-full",
+                    className: "p-1 -mr-1 text-content-secondary  hover:bg-gray-100 dark:hover:bg-charcoal-700 rounded-full",
                     children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                   }
                 )
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "px-4 pb-6 max-h-[70vh] overflow-y-auto", children: [
-                !!description && /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-gray-500 dark:text-gray-400", children: description }),
+                !!description && /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-content-secondary ", children: description }),
                 /* @__PURE__ */ jsx("div", { className: "space-y-4", children: actions && actions.filter((action) => (action.items || []).length > 0).map((action, actionIndex) => /* @__PURE__ */ jsxs("div", { children: [
-                  action.section && /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase text-gray-500 dark:text-gray-400 mb-2", children: action.section }),
+                  action.section && /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase text-content-secondary  mb-2", children: action.section }),
                   /* @__PURE__ */ jsx("div", { className: "space-y-1", children: (action.items || []).map((item) => /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: "py-1.5 px-2 -mx-2 flex items-center text-base text-gray-900 dark:text-gray-200 active:bg-gray-50 dark:active:bg-charcoal-700 rounded-lg cursor-pointer",
+                      className: "py-1.5 px-2 -mx-2 flex items-center text-base text-content-title active:bg-gray-50 dark:active:bg-charcoal-700 rounded-lg cursor-pointer",
                       onClick: () => handleMenuClick(item.action || item.onClick),
                       children: item.label
                     },
@@ -2980,7 +2981,7 @@ function ExcelTable({
         "th",
         {
           className: classNames({
-            "border-b border-r border-gray-200 dark:border-charcoal-600 bg-gray-50 dark:bg-charcoal-800 px-3 py-2 text-xs font-semibold text-gray-500": true,
+            "border-b border-r border-gray-200 dark:border-charcoal-600 bg-gray-50 dark:bg-charcoal-800 px-3 py-2 text-xs font-semibold text-content-secondary": true,
             "w-auto": !col.width,
             [col.width || ""]: !!col.width,
             "text-left": !col.align,
@@ -3015,7 +3016,7 @@ function ExcelTable({
                 "data-row": rowIdx,
                 "data-col": colIdx,
                 placeholder: typeof placeholder === "function" ? placeholder(rowIdx) : placeholder,
-                className: "excel-table-textarea w-full min-h-[38px] px-3 py-2 border-none focus:ring-2 focus:ring-primary-500 focus:ring-inset bg-transparent outline-none text-sm text-gray-900 dark:text-white placeholder-gray-400 resize-none overflow-hidden leading-normal block",
+                className: "excel-table-textarea w-full min-h-[38px] px-3 py-2 border-none focus:ring-2 focus:ring-primary-500 focus:ring-inset bg-transparent outline-none text-sm text-content-title  placeholder-gray-400 resize-none overflow-hidden leading-normal block",
                 style: { height: "auto" }
               }
             ) : col.type === "checkbox" ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[38px]", children: /* @__PURE__ */ jsx(
@@ -3041,7 +3042,7 @@ function ExcelTable({
                 "data-row": rowIdx,
                 "data-col": colIdx,
                 className: classNames({
-                  "w-full h-full min-h-[38px] px-3 py-1 border-none focus:ring-2 focus:ring-primary-500 focus:ring-inset bg-transparent outline-none text-sm text-gray-900 dark:text-white": true,
+                  "w-full h-full min-h-[38px] px-3 py-1 border-none focus:ring-2 focus:ring-primary-500 focus:ring-inset bg-transparent outline-none text-sm text-content-title ": true,
                   "text-left": col.align !== "center" && col.align !== "right",
                   "text-center": col.align === "center",
                   "text-right": col.align === "right"
@@ -3061,7 +3062,7 @@ function ExcelTable({
             "data-row": rowIdx,
             "data-col": columns.length,
             tabIndex: 0,
-            className: "cursor-pointer text-gray-300 hover:text-red-500 w-full h-[38px] flex items-center justify-center transition-colors focus:ring-2 focus:ring-inset focus:ring-primary-500 outline-none",
+            className: "cursor-pointer text-content-disabled hover:text-red-500 w-full h-[38px] flex items-center justify-center transition-colors focus:ring-2 focus:ring-inset focus:ring-primary-500 outline-none",
             children: "\xD7"
           }
         ) })
@@ -3073,7 +3074,7 @@ function ExcelTable({
           onClick: onRowAdd,
           onKeyDown: (e) => handleCellNavigation(e, data.length, 0),
           tabIndex: 0,
-          className: "w-full cursor-pointer text-left px-3 py-2 text-gray-400 text-xs font-medium hover:text-primary-500 hover:bg-gray-50 dark:hover:bg-charcoal-800 transition-colors focus:ring-2 focus:ring-inset focus:ring-primary-500 outline-none",
+          className: "w-full cursor-pointer text-left px-3 py-2 text-content-placeholder text-xs font-medium hover:text-primary-500 hover:bg-gray-50 dark:hover:bg-charcoal-800 transition-colors focus:ring-2 focus:ring-inset focus:ring-primary-500 outline-none",
           children: addRowLabel
         }
       ) }) })
@@ -3270,7 +3271,7 @@ function Coverflow({ images = [], onClose }) {
                   ),
                   (img.imageTitle || img.imageDescription) && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 p-3 bg-gradient-to-t from-black/90 via-black/50 to-transparent text-white text-center pointer-events-none", children: [
                     img.imageTitle && /* @__PURE__ */ jsx(H3, { className: "!text-base mb-1", children: img.imageTitle }),
-                    img.imageDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-charcoal-200 max-w-2xl mx-auto", children: img.imageDescription })
+                    img.imageDescription && /* @__PURE__ */ jsx("p", { className: "text-xs text-content-disabled max-w-2xl mx-auto", children: img.imageDescription })
                   ] })
                 ] })
               },
@@ -3426,9 +3427,9 @@ function DataTable({
     "table",
     {
       className: classNames({
-        "w-full text-sm dark:text-charcoal-100 rounded-xl border-separate border-spacing-0": true,
+        "w-full text-sm rounded-xl border-separate border-spacing-0": true,
         "text-charcoal-100": !!darkMode,
-        "text-charcoal-500": !darkMode
+        "text-content-secondary": !darkMode
       }),
       children: [
         /* @__PURE__ */ jsxs("thead", { children: [
@@ -3685,7 +3686,7 @@ function DataGridHeader({ sort, onClick, opts, children }) {
           "!text-right": align === "right",
           "whitespace-nowrap": !!noWrap,
           "sticky top-0 z-10 dark:bg-charcoal-800": !!stickyHeader,
-          "bg-cream-50": !darkMode,
+          "bg-white dark:bg-charcoal-800": !darkMode,
           "bg-charcoal-800": !!darkMode
         }),
         onClick,
@@ -3708,7 +3709,7 @@ function DataGridHeader({ sort, onClick, opts, children }) {
         "!text-left": align === "left",
         "whitespace-nowrap": !!noWrap,
         "sticky top-0 z-10 dark:bg-charcoal-800": !!stickyHeader,
-        "bg-cream-50": !darkMode,
+        "bg-white dark:bg-charcoal-800": !darkMode,
         "bg-charcoal-800": !!darkMode
       }),
       children