@axzydev/axzy_ui_system 1.2.11 → 1.2.12

package/package.json

@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.34.0",
   "private": false,
   "license": "MIT",
-  "version": "1.2.11",
+  "version": "1.2.12",
   "type": "module",
   "sideEffects": [
     "*.css"

package/src/components/avatar/avatar.tsx

@@ -12,7 +12,7 @@ const sizeMap: Record<AvatarSize, { container: string; text: string }> = {
 
 const DEFAULT_COLOR = "bg-primary-600";
 const DEFAULT_BG = "var(--color-primary-600)";
-const DEFAULT_SHADOW = "0 4px 14px 0 rgba(37, 99, 235, 0.35)";
+const DEFAULT_SHADOW = "0 6px 16px -2px rgba(37, 99, 235, 0.25)";
 
 // Un valor tipo "#8b5cf6", "rgb(...)", "hsl(...)" o "var(--...)" se aplica
 // como color inline; cualquier otra cosa se trata como clase de Tailwind

package/src/components/calendar/calendar.tsx

@@ -371,7 +371,7 @@ export const ITCalendar: React.FC<ITCalendarProps> = ({
              {/* Weekday Headers */}
              <div className="grid grid-cols-7 mb-2">
                 {['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'].map(day => (
-                  <ITText key={day} as="div" className="text-center text-xs font-semibold text-gray-400 uppercase py-1">
+                  <ITText key={day} as="div" className="text-center text-xs font-semibold text-secondary-400 uppercase py-1">
                     {day}
                   </ITText>
                 ))}

package/src/components/card/card.tsx

@@ -33,15 +33,18 @@ export default function ITCard({
 
   const containerStyle: React.CSSProperties = {
     backgroundColor: "var(--card-bg, #ffffff)",
-    borderColor: "var(--card-border, #e2e8f0)",
+    borderColor: "var(--card-border, rgba(15, 23, 42, 0.06))",
     borderWidth: "1px",
-    borderRadius: "var(--card-radius, 0.75rem)",
+    borderRadius: "var(--card-radius, var(--radius-2xl))",
+    // Soft depth: every card floats a little at rest; interactive cards
+    // gain visual weight on hover instead of appearing flat until clicked.
     boxShadow: onClick
       ? isHovered
-        ? "0 8px 25px -5px rgba(0, 0, 0, 0.1)"
-        : "0 1px 3px 0 rgba(0, 0, 0, 0.05)"
-      : "none",
-    transition: onClick ? "all 0.2s ease-in-out" : "none",
+        ? "var(--shadow-lg)"
+        : "var(--shadow-sm)"
+      : "var(--shadow-sm)",
+    transition: onClick ? "box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out" : "none",
+    transform: onClick && isHovered ? "translateY(-2px)" : "translateY(0)",
     cursor: onClick ? "pointer" : "default",
   };
 
@@ -74,12 +77,12 @@ export default function ITCard({
             {title}
           </ITText>
         )}
-        <ITText as="div" className="text-gray-600">{children}</ITText>
+        <ITText as="div" className="text-secondary-600">{children}</ITText>
       </div>
       {actions && (
         <div
           className={clsx(
-            "p-4 border-t border-gray-100 mt-auto",
+            "p-4 border-t border-secondary-100 mt-auto",
             actionClassName,
           )}
         >

package/src/components/data-table/dataTable.tsx

@@ -147,14 +147,14 @@ export default function ITDataTable<T extends Record<string, unknown>>({
           title={`${getToggleLabel()} para ${col.label}`}
           disabled={isLoading}
         >
-          <div className="relative w-10 h-5 bg-gray-300 rounded-full">
+          <div className="relative w-10 h-5 bg-secondary-300 rounded-full">
             <div
               className={clsx(
                 "absolute top-0.5 w-4 h-4 rounded-full transition-all duration-300 shadow-sm",
                 {
-                  "left-0.5 bg-gray-400": currentValue === undefined,
+                  "left-0.5 bg-secondary-400": currentValue === undefined,
                   "left-5 bg-slate-500": currentValue === true,
-                  "left-0.5 bg-gray-500": currentValue === false,
+                  "left-0.5 bg-secondary-500": currentValue === false,
                 }
               )}
             />

package/src/components/dialog/dialog.tsx

@@ -70,7 +70,7 @@ export default function ITDialog({
       data-it-dialog="true"
       className={`fixed inset-0 flex ${
         fullScreen ? "items-stretch" : "items-center justify-center"
-      } bg-black/50 z-[60]`}
+      } bg-slate-900/50 z-[60]`}
     >
       <div
         ref={modalRef}
@@ -98,7 +98,7 @@ export default function ITDialog({
         ) : (
           <>
             <button
-              className="absolute top-2 right-2 text-gray-600 hover:text-gray-900"
+              className="absolute top-2 right-2 text-secondary-600 hover:text-secondary-900"
               onClick={onClose}
             >
               <FaRegTimesCircle />

package/src/components/divider/divider.tsx

@@ -14,7 +14,7 @@ import { ITDividerProps } from "./divider.props";
  *
  * @example
  * ```tsx
- * <ITDivider orientation="vertical" color="bg-red-500" thickness="w-1" />
+ * <ITDivider orientation="vertical" color="bg-danger-500" thickness="w-1" />
  * ```
  */
 export default function ITDivider({

package/src/components/dropfile/dropfile.tsx

@@ -283,8 +283,8 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
   return (
     <div className={clsx("w-full transition-all duration-300", containerClassName)}>
       <div className="flex items-center justify-between mb-2">
-        <label className="block text-sm font-semibold text-gray-700">
-          <ITText as="span">Subir archivo </ITText><ITText as="span" className="text-gray-400 font-normal text-xs">({getFileExtensions()})</ITText>
+        <label className="block text-sm font-semibold text-secondary-700">
+          <ITText as="span">Subir archivo </ITText><ITText as="span" className="text-secondary-400 font-normal text-xs">({getFileExtensions()})</ITText>
         </label>
         
         {showStatusBadge && selectedFile && (
@@ -301,15 +301,15 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
             ${
               isDragActive
                 ? "border-primary-500 bg-primary-50 scale-[1.01]"
-                : "border-gray-300 bg-white hover:border-primary-400 hover:bg-gray-50"
+                : "border-secondary-300 bg-white hover:border-primary-400 hover:bg-secondary-50"
             }
           `}
         >
           <input {...getInputProps()} />
           
-          <div className={`mb-3 p-3 rounded-full transition-colors duration-300 ${isDragActive ? 'bg-primary-100' : 'bg-gray-100 group-hover:bg-primary-50'}`}>
+          <div className={`mb-3 p-3 rounded-full transition-colors duration-300 ${isDragActive ? 'bg-primary-100' : 'bg-secondary-100 group-hover:bg-primary-50'}`}>
             <svg 
-              className={`w-6 h-6 transition-colors duration-300 ${isDragActive ? 'text-primary-600' : 'text-gray-400 group-hover:text-primary-500'}`} 
+              className={`w-6 h-6 transition-colors duration-300 ${isDragActive ? 'text-primary-600' : 'text-secondary-400 group-hover:text-primary-500'}`} 
               fill="none" viewBox="0 0 24 24" stroke="currentColor"
             >
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
@@ -317,14 +317,14 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
           </div>
 
           <div className="text-center space-y-1">
-            <ITText as="p" className={`text-sm font-medium transition-colors duration-300 ${isDragActive ? 'text-primary-700' : 'text-gray-700'}`}>
+            <ITText as="p" className={`text-sm font-medium transition-colors duration-300 ${isDragActive ? 'text-primary-700' : 'text-secondary-700'}`}>
               {isDragActive ? "¡Suelta aquí!" : "Haz clic o arrastra"}
             </ITText>
           </div>
         </div>
       ) : (
-        <div className="w-full bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden animate-fade-in">
-          <div className="flex items-center justify-between p-3 bg-gray-50 border-b border-gray-100">
+        <div className="w-full bg-white border border-secondary-200 rounded-xl shadow-sm overflow-hidden animate-fade-in">
+          <div className="flex items-center justify-between p-3 bg-secondary-50 border-b border-secondary-100">
              <div className="flex items-center gap-3 overflow-hidden">
                 <div className="flex-shrink-0 w-8 h-8 rounded-lg bg-primary-100 flex items-center justify-center text-primary-600">
                   {(selectedFile && fileType?.startsWith('image/')) || (!selectedFile && imagePreview) ? (
@@ -338,17 +338,17 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                   )}
                 </div>
                 <div className="min-w-0">
-                  <ITText as="p" className="text-xs font-medium text-gray-900 truncate" title={selectedFile?.name || "Imagen cargada"}>
+                  <ITText as="p" className="text-xs font-medium text-secondary-900 truncate" title={selectedFile?.name || "Imagen cargada"}>
                     {selectedFile?.name || "Imagen cargada"}
                   </ITText>
-                  <ITText as="p" className="text-[10px] text-gray-500">
+                  <ITText as="p" className="text-[10px] text-secondary-500">
                     {selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : ""}
                   </ITText>
                 </div>
              </div>
           </div>
 
-          <div className={clsx("relative bg-gray-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName)}>
+          <div className={clsx("relative bg-secondary-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName)}>
             {((selectedFile && fileType?.startsWith('image/')) || (!selectedFile && imagePreview)) ? (
               <img 
                 src={imagePreview} 
@@ -356,7 +356,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                 className="w-full h-full object-contain max-h-[200px]"
               />
             ) : (
-              <div className="py-8 flex flex-col items-center text-gray-400">
+              <div className="py-8 flex flex-col items-center text-secondary-400">
                 <svg className="w-10 h-10 mb-2 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                 </svg>
@@ -365,7 +365,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
             )}
           </div>
 
-          <div className="px-3 py-2 bg-white border-t border-gray-100 flex justify-end gap-2">
+          <div className="px-3 py-2 bg-white border-t border-secondary-100 flex justify-end gap-2">
             {!isConfirmed ? (
               <>
                 <ITButton
@@ -410,7 +410,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
 
           {uploadStatus === UploadStatus.UPLOADING && (
             <div className="px-4 pb-2">
-              <div className="w-full bg-gray-200 rounded-full h-1.5">
+              <div className="w-full bg-secondary-200 rounded-full h-1.5">
                 <div 
                   className="bg-primary-600 h-1.5 rounded-full transition-all duration-1000 ease-out"
                   style={{ 

package/src/components/form-builder/fieldRenderer.tsx

@@ -228,7 +228,7 @@ const ITFieldRenderer = ({
         return (
           <div className={clsx("w-full col-span-full", activeConfig.className)}>
             {label && (
-              <ITText as="h4" className="text-lg font-semibold text-gray-800 mb-4">
+              <ITText as="h4" className="text-lg font-semibold text-secondary-800 mb-4">
                 {label}
               </ITText>
             )}
@@ -246,8 +246,8 @@ const ITFieldRenderer = ({
 
       case "array":
         return (
-          <div className="p-4 border-2 border-dashed border-gray-200 rounded-xl">
-            <ITText as="p" className="text-sm text-gray-500 text-center">
+          <div className="p-4 border-2 border-dashed border-secondary-200 rounded-xl">
+            <ITText as="p" className="text-sm text-secondary-500 text-center">
               Array Field: {label}
             </ITText>
           </div>

package/src/components/input/input.tsx

@@ -472,12 +472,12 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
                    type === "checkbox" && "form-checkbox rounded",
                    className,
                    { [disabledOverlay]: disabled },
-                   { "border-red-500": hasError }
+                   { "border-danger-500": hasError }
                 )}
               />
               {label && (
-                <label htmlFor={name} className="text-sm text-gray-700 dark:text-slate-300 select-none">
-                  {label} {required && <ITText as="span" className="text-red-500">*</ITText>}
+                <label htmlFor={name} className="text-sm text-secondary-700 dark:text-slate-300 select-none">
+                  {label} {required && <ITText as="span" className="text-danger-500">*</ITText>}
                 </label>
               )}
            </div>
@@ -493,7 +493,7 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
                   )}
                 >
                   {label}
-                  {required && <ITText as="span" className="text-red-500 ml-1">*</ITText>}
+                  {required && <ITText as="span" className="text-danger-500 ml-1">*</ITText>}
                 </label>
              )}
              
@@ -594,7 +594,7 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
                     {type === "password" && (
                       <button
                         type="button"
-                        className="absolute inset-y-0 right-0 flex items-center pr-3 z-10 text-gray-400 hover:text-gray-600 focus:outline-none"
+                        className="absolute inset-y-0 right-0 flex items-center pr-3 z-10 text-secondary-400 hover:text-secondary-600 focus:outline-none"
                         onClick={() => setShowPassword(!showPassword)}
                         tabIndex={-1} // Don't allow tabbing into the eye icon
                       >
@@ -627,7 +627,7 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
        {/* Length hint below if needed */}
        {showHintLength && (minLength || maxLength) && !isCheckboxOrRadio && (
          <div className="mt-1 text-xs">
-<ITText as="p" className="text-gray-500">
+<ITText as="p" className="text-secondary-500">
               {currentLength}{maxLength && `/${maxLength}`}
             </ITText>
          </div>
@@ -636,7 +636,7 @@ const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
        {/* Validation for checkbox/radio - keep below */}
        {isCheckboxOrRadio && hasError && (
          <div className="mt-1 text-xs">
-           <ITText as="p" className="text-red-500">{errorMessage}</ITText>
+           <ITText as="p" className="text-danger-500">{errorMessage}</ITText>
          </div>
        )}
     </div>

package/src/components/loader/loader.tsx

@@ -94,7 +94,7 @@ export default function ITLoader({
             : size === "lg"
             ? "h-2"
             : "h-2.5"
-        } bg-gray-200 rounded-full overflow-hidden ${className}`}
+        } bg-secondary-200 rounded-full overflow-hidden ${className}`}
       >
         <div
           className={`h-full animate-progress ${colorClass}`}

package/src/components/navbar/navbar.tsx

@@ -80,12 +80,12 @@ export default function ITNavbar({
     // Legacy behavior - original navbar implementation
     return (
       <div className="flex flex-col h-screen">
-        <nav className="bg-white border-b border-gray-200">
+        <nav className="bg-white border-b border-secondary-200">
           <div className="flex items-center justify-between mx-auto p-4">
             <div className="flex items-center space-x-3 rtl:space-x-reverse">
               {logo && <div className="h-8">{logo}</div>}
               {logoText && (
-                <ITText as="span" className="self-center text-2xl font-semibold whitespace-nowrap text-gray-900">
+                <ITText as="span" className="self-center text-2xl font-semibold whitespace-nowrap text-secondary-900">
                   {logoText}
                 </ITText>
               )}
@@ -99,7 +99,7 @@ export default function ITNavbar({
                   <div className="relative">
                     <button
                       type="button"
-                      className="flex text-sm bg-gray-200 rounded-full md:me-0 focus:ring-4 focus:ring-gray-300"
+                      className="flex text-sm bg-secondary-200 rounded-full md:me-0 focus:ring-4 focus:ring-secondary-300"
                       onClick={toggleUserMenu}
                     >
                       {userMenu.userImage ? (
@@ -109,20 +109,20 @@ export default function ITNavbar({
                           alt="user photo"
                         />
                       ) : (
-                        <FaUserCircle className="w-8 h-8 text-gray-500" />
+                        <FaUserCircle className="w-8 h-8 text-secondary-500" />
                       )}
                     </button>
 
                     {isUserMenuOpen && (
                       <div
                         ref={userMenuRef}
-                        className="z-[70] absolute right-0 mt-2 text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow-sm"
+                        className="z-[70] absolute right-0 mt-2 text-base list-none bg-white divide-y divide-secondary-100 rounded-lg shadow-sm"
                       >
                         <div className="px-4 py-3">
-                          <ITText as="span" className="block text-sm text-gray-900">
+                          <ITText as="span" className="block text-sm text-secondary-900">
                             {userMenu.userName}
                           </ITText>
-                          <ITText as="span" className="block text-sm text-gray-500 truncate">
+                          <ITText as="span" className="block text-sm text-secondary-500 truncate">
                             {userMenu.userEmail}
                           </ITText>
                         </div>
@@ -134,7 +134,7 @@ export default function ITNavbar({
                                   item.onClick();
                                   setIsUserMenuOpen(false);
                                 }}
-                                className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 w-full text-left"
+                                className="block px-4 py-2 text-sm text-secondary-700 hover:bg-secondary-100 w-full text-left"
                               >
                                  <ITText as="span">{item.label}</ITText>
                                 </button>
@@ -152,13 +152,13 @@ export default function ITNavbar({
 
         <div className="flex-1 flex overflow-hidden relative">
           {(showSidebar || showSidebarOnMobile) && (
-            <aside className="fixed inset-y-0 left-0 w-64 bg-gray-50 transform transition-transform duration-300 ease-in-out z-[40] shadow-lg md:static md:transform-none md:shadow-none md:border-r md:border-gray-200">
+            <aside className="fixed inset-y-0 left-0 w-64 bg-secondary-50 transform transition-transform duration-300 ease-in-out z-[40] shadow-lg md:static md:transform-none md:shadow-none md:border-r md:border-secondary-200">
               <div className="h-full overflow-y-auto py-4 px-3">
                 <ul className="space-y-2 font-medium">{sidebarItems}</ul>
               </div>
             </aside>
           )}
-          <main className="flex-1 bg-gray-100 overflow-y-auto">
+          <main className="flex-1 bg-secondary-100 overflow-y-auto">
             {children}
           </main>
         </div>

package/src/components/pagination/pagination.tsx

@@ -146,8 +146,8 @@ export default function ITPagination({
         className={clsx(
           baseItemClass,
           currentPage === 1
-            ? "text-gray-300 cursor-not-allowed"
-            : "text-gray-500 hover:bg-gray-100"
+            ? "text-secondary-300 cursor-not-allowed"
+            : "text-secondary-500 hover:bg-secondary-100"
         )}
         onClick={handlePrevious}
         aria-disabled={currentPage === 1}
@@ -162,7 +162,7 @@ export default function ITPagination({
             <ITText
               as="div"
               key={`dots-${idx}`}
-              className="flex items-center justify-center w-8 h-8 select-none text-gray-400"
+              className="flex items-center justify-center w-8 h-8 select-none text-secondary-400"
             >
               &#8230;
             </ITText>
@@ -177,7 +177,7 @@ export default function ITPagination({
             key={pageNumber}
             className={clsx(
               baseItemClass,
-              isActive ? "text-white" : "text-gray-600 hover:bg-gray-100"
+              isActive ? "text-white" : "text-secondary-600 hover:bg-secondary-100"
             )}
             style={{
               backgroundColor: isActive ? resolvedBgColor : undefined,
@@ -196,8 +196,8 @@ export default function ITPagination({
         className={clsx(
           baseItemClass,
           currentPage === totalPages
-            ? "text-gray-300 cursor-not-allowed"
-            : "text-gray-500 hover:bg-gray-100"
+            ? "text-secondary-300 cursor-not-allowed"
+            : "text-secondary-500 hover:bg-secondary-100"
         )}
         onClick={handleNext}
         aria-disabled={currentPage === totalPages}
@@ -214,8 +214,8 @@ export default function ITPagination({
 
     return (
       <div className={clsx("flex flex-col sm:flex-row justify-between items-center gap-4 w-full", className)}>
-        <div className="flex items-center gap-4 text-sm text-gray-500">
-          <div className="flex items-center gap-2 bg-gray-50 px-3 py-1 rounded-lg border border-gray-200">
+        <div className="flex items-center gap-4 text-sm text-secondary-500">
+          <div className="flex items-center gap-2 bg-secondary-50 px-3 py-1 rounded-lg border border-secondary-200">
             <ITText as="span" className="text-xs font-medium">Mostrar</ITText>
             <ITSelect
               name="itemsPerPage"
@@ -227,16 +227,16 @@ export default function ITPagination({
               onChange={(e) => onItemsPerPageChange(Number(e.target.value))}
               onBlur={() => {}}
               size="small"
-              className="!w-14 !h-6 !text-xs !py-0 !px-1! !border-none !bg-transparent !ring-0 focus:!ring-0 cursor-pointer font-bold text-gray-700"
+              className="!w-14 !h-6 !text-xs !py-0 !px-1! !border-none !bg-transparent !ring-0 focus:!ring-0 cursor-pointer font-bold text-secondary-700"
               placeholder=""
             />
           </div>
           
           {totalItems !== undefined && (
             <>
-              <ITText as="span" className="text-gray-300">|</ITText>
+              <ITText as="span" className="text-secondary-300">|</ITText>
               <ITText as="span" className="text-xs">
-                <ITText as="span" className="font-semibold text-gray-700">{startItem}</ITText><ITText as="span"> - </ITText><ITText as="span" className="font-semibold text-gray-700">{endItem}</ITText><ITText as="span"> de </ITText><ITText as="span" className="font-semibold text-gray-900">{totalItems}</ITText>
+                <ITText as="span" className="font-semibold text-secondary-700">{startItem}</ITText><ITText as="span"> - </ITText><ITText as="span" className="font-semibold text-secondary-700">{endItem}</ITText><ITText as="span"> de </ITText><ITText as="span" className="font-semibold text-secondary-900">{totalItems}</ITText>
               </ITText>
             </>
           )}

package/src/components/search-select/search-select.tsx

@@ -184,12 +184,12 @@ export default function ITSearchSelect({
       {label && (
         <ITText
           as="label"
-          className={clsx("text-sm font-medium text-gray-700 dark:text-slate-300", {
-            "text-red-500": hasError,
+          className={clsx("text-sm font-medium text-secondary-700 dark:text-slate-300", {
+            "text-danger-500": hasError,
           })}
         >
           <ITText as="span">{label}</ITText>
-          {required && <ITText as="span" className="text-red-500 ml-1">*</ITText>}
+          {required && <ITText as="span" className="text-danger-500 ml-1">*</ITText>}
         </ITText>
       )}
 
@@ -209,7 +209,7 @@ export default function ITSearchSelect({
             style={getInputStyle()}
             autoComplete="off"
           />
-          <div className="absolute right-3 flex items-center gap-2 text-gray-400 pointer-events-none">
+          <div className="absolute right-3 flex items-center gap-2 text-secondary-400 pointer-events-none">
              {isLoading && <div className="animate-spin h-4 w-4 border-2 border-primary-500 border-t-transparent rounded-full" />}
              {!isLoading && <FaSearch size={14} className={clsx({ "text-primary-500": isFocused })} />}
           </div>
@@ -217,7 +217,7 @@ export default function ITSearchSelect({
 
         {/* Dropdown Panel */}
         {isOpen && (
-          <div className="absolute z-[70] w-full mt-1 bg-white dark:bg-slate-900 border border-gray-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top">
+          <div className="absolute z-[70] w-full mt-1 bg-white dark:bg-slate-900 border border-secondary-200 dark:border-slate-800 rounded-lg shadow-xl overflow-hidden animate-in fade-in zoom-in duration-200 origin-top">
             <div className="max-h-60 overflow-y-auto">
               {filteredOptions.length > 0 ? (
                 filteredOptions.map((option) => (
@@ -229,14 +229,14 @@ export default function ITSearchSelect({
                       "px-4 py-2 text-sm cursor-pointer transition-colors",
                       value === option[valueField]
                         ? "bg-primary-50 dark:bg-primary-950/40 text-primary-700 dark:text-primary-300 font-medium"
-                        : "hover:bg-gray-50 dark:hover:bg-slate-800 text-gray-700 dark:text-slate-300"
+                        : "hover:bg-secondary-50 dark:hover:bg-slate-800 text-secondary-700 dark:text-slate-300"
                     )}
                   >
                     <ITText as="span">{option[labelField]}</ITText>
                   </ITText>
                 ))
               ) : (
-                <ITText as="div" className="px-4 py-6 text-sm text-center text-gray-500 italic">
+                <ITText as="div" className="px-4 py-6 text-sm text-center text-secondary-500 italic">
                   {isLoading ? "Cargando..." : noResultsMessage}
                 </ITText>
               )}
@@ -247,7 +247,7 @@ export default function ITSearchSelect({
 
       {/* Error Message */}
       {hasError && (
-        <ITText as="p" className="text-red-500 text-xs mt-1">{errorMessage}</ITText>
+        <ITText as="p" className="text-danger-500 text-xs mt-1">{errorMessage}</ITText>
       )}
     </div>
   );

package/src/components/searchTable/components/EditableCell.tsx

@@ -143,7 +143,7 @@ export default function EditableCell<T>({
   return (
     <div className="w-full">
       {renderInput()}
-      {error && <div className="text-red-500 text-xs mt-1"><ITText as="span">{error}</ITText></div>}
+      {error && <div className="text-danger-500 text-xs mt-1"><ITText as="span">{error}</ITText></div>}
     </div>
   );
 }

package/src/components/searchTable/components/PaginationControls.tsx

@@ -36,7 +36,7 @@ export default function PaginationControls({
         <PaginationInfo currentCount={currentCount} totalCount={totalCount} />
 
         <div className="flex items-center space-x-2">
-          <ITText as="span" className="text-sm text-gray-700">Mostrar:</ITText>
+          <ITText as="span" className="text-sm text-secondary-700">Mostrar:</ITText>
           <ITSelect
             name="itemsPerPage"
             options={itemsPerPageOptions.map((option) => ({
@@ -65,7 +65,7 @@ export default function PaginationControls({
           <FaArrowLeft aria-hidden="true" />
         </ITButton>
 
-        <ITText as="span" className="px-4 py-2 text-sm text-gray-700" aria-live="polite">
+        <ITText as="span" className="px-4 py-2 text-sm text-secondary-700" aria-live="polite">
           Página {pageIndex} de {totalPages}
         </ITText>
 

package/src/components/searchTable/components/PaginationInfo.tsx

@@ -13,7 +13,7 @@ export default function PaginationInfo({
   className = "",
 }: PaginationInfoProps) {
   return (
-    <ITText as="span" className={`text-sm text-gray-700 ${className}`}>
+    <ITText as="span" className={`text-sm text-secondary-700 ${className}`}>
       Mostrando {currentCount} de {totalCount} resultados
     </ITText>
   );

package/src/components/searchTable/components/SearchAndSortBar.tsx

@@ -25,7 +25,7 @@ export default function SearchAndSortBar({
   searchInputPlaceholder = "Buscar en todos los campos...",
 }: SearchAndSortBarProps) {
   return (
-    <div className="bg-gray-50 px-6 py-4 border-b border-gray-200">
+    <div className="bg-secondary-50 px-6 py-4 border-b border-secondary-200">
       <div className="flex items-center gap-4">
         <SearchInput
           placeholder={searchInputPlaceholder}

package/src/components/searchTable/components/SearchInput.tsx

@@ -18,7 +18,7 @@ export default function SearchInput({
   return (
     <div className={`relative flex-1 ${className}`}>
       <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-        <FaSearch className="h-5 w-5 text-gray-400" />
+        <FaSearch className="h-5 w-5 text-secondary-400" />
       </div>
       <ITInput
         name="global-search"

package/src/components/searchTable/components/SortButton.tsx

@@ -19,7 +19,7 @@ export default function SortButton({
   return (
     <button
       onClick={onClick}
-      className={`p-3 rounded-lg bg-white border border-gray-300 hover:bg-gray-50 transition-colors duration-200 flex items-center gap-2 min-w-[120px] ${className}`}
+      className={`p-3 rounded-lg bg-white border border-secondary-300 hover:bg-secondary-50 transition-colors duration-200 flex items-center gap-2 min-w-[120px] ${className}`}
       aria-label={`Ordenar tabla ${
         sortConfig
           ? sortConfig.direction === "asc"
@@ -36,9 +36,9 @@ export default function SortButton({
           <FaSortDown className="w-4 h-4 text-slate-500" />
         )
       ) : (
-        <FaSort className="w-4 h-4 text-gray-500" />
+        <FaSort className="w-4 h-4 text-secondary-500" />
       )}
-      <ITText as="span" className="text-sm font-medium text-gray-700">
+      <ITText as="span" className="text-sm font-medium text-secondary-700">
         {sortConfig
           ? sortConfig.direction === "asc"
             ? "Asc ↑"

package/src/components/searchTable/components/TableHeader.tsx

@@ -18,7 +18,7 @@ export default function TableHeader<T>({
 }: TableHeaderProps<T>) {
   return (
     <thead>
-      <tr className="bg-white border-b border-gray-200">
+      <tr className="bg-white border-b border-secondary-200">
         {columns.map((col) => (
           <TableHeaderCell
             key={col.key}

package/src/components/searchTable/components/TableRow.tsx

@@ -66,7 +66,7 @@ export default function TableRow<T>({
             title="Verdadero"
           />
         ) : (
-          <FaTimes className="text-red-500" aria-label="Falso" title="Falso" />
+          <FaTimes className="text-danger-500" aria-label="Falso" title="Falso" />
         );
 
       case "actions":
@@ -99,13 +99,13 @@ export default function TableRow<T>({
     <tr
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-      className={`border-b border-gray-200 transition-colors duration-150 ${
+      className={`border-b border-secondary-200 transition-colors duration-150 ${
         isEditing
           ? "bg-slate-50"
           : rowIndex % 2 === 0
           ? "bg-white"
-          : "bg-gray-50"
-      } ${isHovered && !isEditing ? "bg-gray-100" : ""}`}
+          : "bg-secondary-50"
+      } ${isHovered && !isEditing ? "bg-secondary-100" : ""}`}
     >
       {columns.map((col) => (
         <td