@axzydev/axzy_ui_system 1.2.11 → 1.2.13

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

package/src/components/searchTable/searchTable.tsx

@@ -139,7 +139,7 @@ return (
       {/* Contenido con scroll */}
       <div className="bg-white">
         {/* Barra de búsqueda y ordenamiento */}
-        <div className="p-4 border-b border-gray-200">
+        <div className="p-4 border-b border-secondary-200">
           <SearchAndSortBar
             searchTerm={searchTerm}
             onSearchChange={handleSearchChange}
@@ -154,7 +154,7 @@ return (
         <div className="overflow-x-auto">
           <table
             className={clsx(
-              "min-w-full text-sm text-left bg-white text-gray-900 table-auto",
+              "min-w-full text-sm text-left bg-white text-secondary-900 table-auto",
               variantStyles[variant],
               sizeStyles[size]
             )}

package/src/components/select/select.tsx

@@ -84,7 +84,7 @@ export default function ITSelect({
             className={inputLabel(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>
         )}
         <div className="flex flex-col w-full">
@@ -127,7 +127,7 @@ export default function ITSelect({
                 )
               }
             </select>
-            <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-500">
+            <div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-secondary-500">
               <FaAngleDown />
             </div>
           </div>

package/src/components/sidebar/sidebar.tsx

@@ -121,7 +121,7 @@ export default function ITSidebar({
         ${sidebarWidth}
         ${className}
         ${!visibleOnMobile ? "hidden lg:flex" : "flex"}
-        shadow-[4px_0_24px_rgba(0,0,0,0.02)]
+        shadow-[4px_0_32px_rgba(15,23,42,0.04)]
       `}
       style={{
         zIndex: 50,
@@ -144,7 +144,7 @@ export default function ITSidebar({
                 `}
                 style={{
                   backgroundColor: item.isActive ? "var(--sidebar-active-bg, var(--color-secondary-50))" : 'transparent',
-                  boxShadow: item.isActive ? '0 1px 2px 0 rgba(0, 0, 0, 0.05)' : 'none',
+                  boxShadow: item.isActive ? 'var(--shadow-xs)' : 'none',
                   border: item.isActive ? "1px solid var(--sidebar-border, var(--color-secondary-200))" : '1px solid transparent'
                 }}
                 onMouseEnter={(e) => {
@@ -158,7 +158,7 @@ export default function ITSidebar({
                 {item.isActive && !isSidebarCollapsed && (
                   <div
                     className="absolute left-0 top-1/4 bottom-1/4 w-[3px] rounded-r-full transition-all"
-                    style={{ backgroundColor: "var(--sidebar-active-icon, #10b981)", boxShadow: "0 0 10px var(--sidebar-active-icon, #10b981)" }}
+                    style={{ backgroundColor: "var(--sidebar-active-icon, var(--color-primary-500))", boxShadow: "0 0 10px var(--sidebar-active-icon, var(--color-primary-500))" }}
                   />
                 )}
 
@@ -167,7 +167,7 @@ export default function ITSidebar({
                     <div
                       className={`transition-all duration-300 flex-shrink-0 flex items-center justify-center`}
                       style={{
-                        color: item.isActive ? "var(--sidebar-active-icon, #10b981)" : "var(--sidebar-icon-color, #9ca3af)",
+                        color: item.isActive ? "var(--sidebar-active-icon, var(--color-primary-500))" : "var(--sidebar-icon-color, #9ca3af)",
                         opacity: item.isActive ? 1 : 0.8,
                         fontSize: item.isActive ? '1.35rem' : '1.25rem',
                         filter: item.isActive ? 'drop-shadow(0 0 8px rgba(255,255,255,0.2))' : 'none'
@@ -181,7 +181,7 @@ export default function ITSidebar({
                     <ITText as="span"
                       className={`transition-all duration-300 truncate tracking-wide`}
                       style={{
-                        color: item.isActive ? "var(--sidebar-active-color, #ffffff)" : "var(--sidebar-label-color, #d1d5db)",
+                        color: item.isActive ? "var(--sidebar-active-color, #ffffff)" : "var(--sidebar-label-color, var(--color-secondary-300))",
                         fontSize: '0.9rem',
                         fontWeight: item.isActive ? '600' : '500'
                       }}
@@ -207,9 +207,9 @@ export default function ITSidebar({
                         : "right-3 top-1/2 transform -translate-y-1/2 px-2 py-0.5 text-[10px] rounded-full backdrop-blur-sm"}
                     `}
                     style={{
-                      backgroundColor: "var(--sidebar-badge-bg, #10b981)",
+                      backgroundColor: "var(--sidebar-badge-bg, var(--color-primary-500))",
                       color: "var(--sidebar-badge-color, #ffffff)",
-                      boxShadow: isSidebarCollapsed ? "0 0 0 2px var(--sidebar-bg, #111827)" : 'none'
+                      boxShadow: isSidebarCollapsed ? "0 0 0 2px var(--sidebar-bg, var(--color-secondary-900))" : 'none'
                     }}
                   >
                     {isSidebarCollapsed ? "" : item.badge}
@@ -229,7 +229,7 @@ export default function ITSidebar({
                   }}
                 >
                   <div className="px-5 py-4 flex items-center gap-3 font-semibold border-b" style={{ borderColor: "var(--sidebar-border, var(--color-secondary-200))", color: "var(--sidebar-active-color, var(--color-secondary-900))" }}>
-                    {item.icon && <span style={{ color: "var(--sidebar-active-icon, #10b981)" }} className="text-xl drop-shadow-sm">{item.icon}</span>}
+                    {item.icon && <span style={{ color: "var(--sidebar-active-icon, var(--color-primary-500))" }} className="text-xl drop-shadow-sm">{item.icon}</span>}
                     <ITText as="span" className="tracking-wide text-[15px]">{item.label}</ITText>
                   </div>
 
@@ -244,18 +244,18 @@ export default function ITSidebar({
                             <div
                               className="absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full"
                               style={{
-                                backgroundColor: "var(--sidebar-active-icon, #10b981)",
-                                boxShadow: "0 0 6px color-mix(in srgb, var(--sidebar-active-icon, #10b981) 25%, transparent)",
+                                backgroundColor: "var(--sidebar-active-icon, var(--color-primary-500))",
+                                boxShadow: "0 0 6px color-mix(in srgb, var(--sidebar-active-icon, var(--color-primary-500)) 25%, transparent)",
                               }}
                             />
                           )}
-                          <span className={`w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`} style={{ backgroundColor: subitem.isActive ? "var(--sidebar-active-icon, #10b981)" : "var(--sidebar-icon-color, var(--color-secondary-400))" }} />
+                          <span className={`w-1.5 h-1.5 rounded-full transition-all ${subitem.isActive ? "scale-125" : ""}`} style={{ backgroundColor: subitem.isActive ? "var(--sidebar-active-icon, var(--color-primary-500))" : "var(--sidebar-icon-color, var(--color-secondary-400))" }} />
                           <ITText as="span" style={{ color: subitem.isActive ? "var(--sidebar-active-color, var(--color-secondary-900))" : "var(--sidebar-label-color, var(--color-secondary-600))", fontWeight: subitem.isActive ? 600 : 500 }}>{subitem.label}</ITText>
                         </div>
                       ))}
                     </div>
                   ) : (
-                    <ITText as="div" className="px-5 py-3 text-sm italic" style={{ color: "var(--sidebar-label-color, #71717a)" }}>No hay submenú</ITText>
+                    <ITText as="div" className="px-5 py-3 text-sm italic" style={{ color: "var(--sidebar-label-color, var(--color-secondary-400))" }}>No hay submenú</ITText>
                   )}
                 </div>
               )}
@@ -304,8 +304,8 @@ export default function ITSidebar({
                             <div
                               className="absolute left-0 top-1/3 bottom-1/3 w-[2.5px] rounded-r-full transition-all"
                               style={{
-                                backgroundColor: "var(--sidebar-active-icon, #10b981)",
-                                boxShadow: "0 0 6px color-mix(in srgb, var(--sidebar-active-icon, #10b981) 25%, transparent)",
+                                backgroundColor: "var(--sidebar-active-icon, var(--color-primary-500))",
+                                boxShadow: "0 0 6px color-mix(in srgb, var(--sidebar-active-icon, var(--color-primary-500)) 25%, transparent)",
                               }}
                             />
                           )}
@@ -314,7 +314,7 @@ export default function ITSidebar({
                               className={`w-1.5 h-1.5 rounded-full flex-shrink-0 transition-all duration-300 ${subitem.isActive ? 'scale-125' : ''}`}
                               style={{
                                 backgroundColor: subitem.isActive
-                                  ? "var(--sidebar-active-icon, #10b981)"
+                                  ? "var(--sidebar-active-icon, var(--color-primary-500))"
                                   : "var(--sidebar-icon-color, var(--color-secondary-400))"
                               }}
                             />

package/src/components/slider/slider.tsx

@@ -30,7 +30,7 @@ export default function ITSlider({
   return (
     <div className={clsx("flex flex-col gap-1.5", className)}>
       {label && (
-        <ITText as="label" className="text-xs font-semibold text-gray-600 dark:text-gray-400">
+        <ITText as="label" className="text-xs font-semibold text-secondary-600 dark:text-secondary-400">
           {label}: {value}
         </ITText>
       )}
@@ -45,7 +45,7 @@ export default function ITSlider({
           disabled={disabled}
           className={clsx(
             "w-full h-1.5 appearance-none rounded-full outline-none cursor-pointer",
-            "bg-gray-200 dark:bg-gray-700",
+            "bg-secondary-200 dark:bg-secondary-700",
             "accent-primary-500",
             "disabled:opacity-50 disabled:cursor-not-allowed",
             "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4",
@@ -54,7 +54,7 @@ export default function ITSlider({
             "[&::-webkit-slider-thumb]:hover:bg-primary-600 [&::-webkit-slider-thumb]:transition-colors",
             "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:rounded-full",
             "[&::-moz-range-thumb]:bg-primary-500 [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white",
-            "[&::-moz-range-track]:bg-gray-200 dark:[&::-moz-range-track]:bg-gray-700",
+            "[&::-moz-range-track]:bg-secondary-200 dark:[&::-moz-range-track]:bg-secondary-700",
             "[&::-moz-range-track]:rounded-full [&::-moz-range-track]:h-1.5"
           )}
         />

package/src/components/stepper/stepper.tsx

@@ -128,7 +128,7 @@ export default function ITStepper({
     <div className={clsx("w-full max-w-5xl mx-auto px-4", containerClassName)}>
       <div className="relative mb-8">
         <div
-          className="absolute left-6 right-6 top-5 h-1 bg-gray-200 rounded-full z-0"
+          className="absolute left-6 right-6 top-5 h-1 bg-secondary-200 rounded-full z-0"
           aria-hidden
         />
         <div
@@ -161,7 +161,7 @@ export default function ITStepper({
                       hasIcon && "p-2",
                       isCompleted && "bg-slate-400 border-slate-400 text-white scale-100 shadow",
                       isActive && "text-white scale-110 shadow-lg",
-                      !isActive && !isCompleted && "bg-white border-gray-300 text-gray-400"
+                      !isActive && !isCompleted && "bg-white border-secondary-300 text-secondary-400"
                     )}
                     style={isActive ? { backgroundColor: resolvedColor, borderColor: resolvedColor } : undefined}
                   >
@@ -172,7 +172,7 @@ export default function ITStepper({
                     as="span"
                     className={clsx(
                       "mt-2 text-xs sm:text-sm font-medium transition-colors text-center",
-                      isCompleted ? "text-slate-400" : !isActive && "text-gray-400"
+                      isCompleted ? "text-slate-400" : !isActive && "text-secondary-400"
                     )}
                     style={isActive ? { color: resolvedColor } : undefined}
                   >
@@ -193,7 +193,7 @@ export default function ITStepper({
         aria-labelledby={`step-${currentStep}`}
         className={clsx(
           stepClassName,
-          "bg-white border border-gray-100 rounded-2xl shadow-lg min-h-[280px] transition-transform duration-400 no-scrollbar p-6",
+          "bg-white border border-secondary-100 rounded-2xl shadow-lg min-h-[280px] transition-transform duration-400 no-scrollbar p-6",
           scrollableContent && "overflow-y-auto hide-scrollbar"
         )}
         style={
@@ -220,7 +220,7 @@ export default function ITStepper({
         </ITButton>
 
         <div className="flex items-center gap-3">
-          <ITText as="div" className="text-sm text-gray-500 mr-2 hidden sm:block">
+          <ITText as="div" className="text-sm text-secondary-500 mr-2 hidden sm:block">
             Paso {currentStep + 1} de {steps.length}
           </ITText>
           

package/src/components/table/table.tsx

@@ -194,14 +194,14 @@ export default function ITTable<T extends Record<string, unknown>>({
           aria-label={`${getToggleLabel()} para ${col.label}`}
           title={`${getToggleLabel()} para ${col.label}`}
         >
-          <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/tabs/tabs.tsx

@@ -39,8 +39,8 @@ const ITTabs: React.FC<ITTabsProps> = ({
     <div className={clsx("w-full", containerClassName)}>
       {/* HEADER */}
       <div className={clsx(
-        "flex border-gray-200 mb-4",
-        variant === 'line' ? "border-b" : "gap-2 p-1 bg-gray-100 rounded-lg w-fit",
+        "flex border-secondary-200 mb-4",
+        variant === 'line' ? "border-b" : "gap-2 p-1 bg-secondary-100 rounded-lg w-fit",
         className
       )}>
         {items.map((item) => {
@@ -58,14 +58,14 @@ const ITTabs: React.FC<ITTabsProps> = ({
                   "border-b-2 -mb-[2px]",
                   isActive 
                     ? "border-primary-500 text-primary-600" 
-                    : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",
+                    : "border-transparent text-secondary-500 hover:text-secondary-700 hover:border-secondary-300",
                 ],
                 // PILL VARIANT
                 variant === 'pill' && [
                   "rounded-md",
                   isActive 
                     ? "bg-white text-primary-600 shadow-sm" 
-                    : "text-gray-500 hover:text-gray-700",
+                    : "text-secondary-500 hover:text-secondary-700",
                 ],
                 item.disabled && "opacity-50 cursor-not-allowed"
               )}

package/src/components/textarea/textarea.tsx

@@ -60,9 +60,9 @@ export default function ITTextarea({
           "focus:ring-2",
           resizeMap[resize],
           error
-            ? "border-red-500 ring-red-100 focus:border-red-500 focus:ring-red-100"
-            : "border-gray-300 focus:border-primary-500 focus:ring-primary-100",
-          disabled && "opacity-50 cursor-not-allowed bg-gray-100 dark:bg-slate-800"
+            ? "border-danger-500 ring-danger-100 focus:border-danger-500 focus:ring-danger-100"
+            : "border-secondary-300 focus:border-primary-500 focus:ring-primary-100",
+          disabled && "opacity-50 cursor-not-allowed bg-secondary-100 dark:bg-slate-800"
         )}
       />
       {error && <ITText as="span" className={inputError}>{error}</ITText>}