@axzydev/axzy_ui_system 1.2.9 → 1.2.12

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

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { FaAngleDown } from "react-icons/fa";
 import { ITSelectProps } from "./select.props";
 import ITText from "@/components/text/text";
+import { inputError, inputLabel } from "@/utils/styles";
 
 export default function ITSelect({
   name,
@@ -80,13 +81,10 @@ export default function ITSelect({
           <ITText
             as="label"
             htmlFor={name}
-            className={clsx(
-              "text-sm font-medium text-gray-700 dark:text-slate-300 pt-0",
-              { "text-red-500": hasError }
-            )}
+            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">
@@ -110,11 +108,11 @@ export default function ITSelect({
               )}
               style={getStyle()}
             >
-              <option value=""><ITText as="span">{placeholder || "Selecciona una opción"}</ITText></option>
+              <option value="">{placeholder || "Selecciona una opción"}</option>
               {
                 readOnly ? (
                   <option value={value} disabled>
-                    <ITText as="span">{options.find((option) => option[valueField] === value)?.[labelField]}</ITText>
+                    {options.find((option) => option[valueField] === value)?.[labelField]}
                   </option>
                 ) : (
                   options.map((option) => (
@@ -123,20 +121,20 @@ export default function ITSelect({
                       value={option[valueField]}
                       title={option[labelField]}
                     >
-                      <ITText as="span">{option[labelField]}</ITText>
+                      {option[labelField]}
                     </option>
                   ))
                 )
               }
             </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>
           {/* Validation message aligned with select */}
           {hasError && (
             <div className="flex-shrink-0 min-w-[140px] flex items-center pt-3">
-              <ITText as="p" className="text-red-500 text-xs">{errorMessage}</ITText>
+              <ITText as="p" className={inputError}>{errorMessage}</ITText>
             </div>
           )}
         </div>

package/src/components/sidebar/sidebar.tsx

@@ -121,12 +121,12 @@ 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,
         backgroundColor: "var(--sidebar-bg, rgba(255, 255, 255, 0.90))",
-        borderRight: "1px solid var(--sidebar-border, #e2e8f0)",
+        borderRight: "1px solid var(--sidebar-border, var(--color-secondary-200))",
         WebkitBackdropFilter: 'blur(12px)',
         backdropFilter: 'blur(12px)',
       }}
@@ -143,12 +143,12 @@ export default function ITSidebar({
                   ${isSidebarCollapsed ? "justify-center p-2.5 mb-2" : "justify-between px-3.5 py-3 mb-1"}
                 `}
                 style={{
-                  backgroundColor: item.isActive ? "var(--sidebar-active-bg, #f8fafc)" : 'transparent',
-                  boxShadow: item.isActive ? '0 1px 2px 0 rgba(0, 0, 0, 0.05)' : 'none',
-                  border: item.isActive ? "1px solid var(--sidebar-border, #e2e8f0)" : '1px solid transparent'
+                  backgroundColor: item.isActive ? "var(--sidebar-active-bg, var(--color-secondary-50))" : 'transparent',
+                  boxShadow: item.isActive ? 'var(--shadow-xs)' : 'none',
+                  border: item.isActive ? "1px solid var(--sidebar-border, var(--color-secondary-200))" : '1px solid transparent'
                 }}
                 onMouseEnter={(e) => {
-                  if (!item.isActive) e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, #f1f5f9)";
+                  if (!item.isActive) e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, var(--color-secondary-100))";
                 }}
                 onMouseLeave={(e) => {
                   if (!item.isActive) e.currentTarget.style.backgroundColor = 'transparent';
@@ -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'
                       }}
@@ -193,7 +193,7 @@ export default function ITSidebar({
 
                 {!isSidebarCollapsed && item.subitems && item.subitems.length > 0 && (
                   <div className={`flex-shrink-0 transition-transform duration-300 ease-[cubic-bezier(0.2,0,0,1)] ${expandedItems.has(item.id) ? "rotate-180" : ""}`}
-                    style={{ color: item.isActive ? "var(--sidebar-active-color, #0f172a)" : "var(--sidebar-icon-color, #64748b)", opacity: 0.7 }}>
+                    style={{ color: item.isActive ? "var(--sidebar-active-color, var(--color-secondary-900))" : "var(--sidebar-icon-color, var(--color-secondary-500))", opacity: 0.7 }}>
                     <FaChevronDown className="w-3 h-3" />
                   </div>
                 )}
@@ -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}
@@ -220,16 +220,16 @@ export default function ITSidebar({
               {/* Glassmorphism Collapsed Tooltip / Submenu */}
               {isSidebarCollapsed && (
                 <div
-                  className="absolute left-full top-0 ml-4 rounded-2xl opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-all duration-300 pointer-events-none z-50 min-w-[220px] overflow-hidden -translate-x-2 group-hover/navitem:translate-x-0 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)]"
+                  className="absolute left-full top-0 ml-4 rounded-2xl opacity-0 invisible group-hover/navitem:opacity-100 group-hover/navitem:visible transition-all duration-300 pointer-events-none z-[70] min-w-[220px] overflow-hidden -translate-x-2 group-hover/navitem:translate-x-0 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.15)]"
                   style={{
                     backgroundColor: "var(--sidebar-bg, #ffffff)",
-                    border: "1px solid var(--sidebar-border, #e2e8f0)",
+                    border: "1px solid var(--sidebar-border, var(--color-secondary-200))",
                     WebkitBackdropFilter: 'blur(16px)',
                     backdropFilter: 'blur(16px)',
                   }}
                 >
-                  <div className="px-5 py-4 flex items-center gap-3 font-semibold border-b" style={{ borderColor: "var(--sidebar-border, #e2e8f0)", color: "var(--sidebar-active-color, #0f172a)" }}>
-                    {item.icon && <span style={{ color: "var(--sidebar-active-icon, #10b981)" }} className="text-xl drop-shadow-sm">{item.icon}</span>}
+                  <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, 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, #94a3b8)" }} />
-                          <ITText as="span" style={{ color: subitem.isActive ? "var(--sidebar-active-color, #0f172a)" : "var(--sidebar-label-color, #475569)", fontWeight: subitem.isActive ? 600 : 500 }}>{subitem.label}</ITText>
+                          <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>
               )}
@@ -267,7 +267,7 @@ export default function ITSidebar({
                     className="ml-5 flex flex-col gap-0.5 py-1"
                     style={{
                       borderLeft: subitemConnector === '|'
-                        ? "1px solid var(--sidebar-border, #e2e8f0)"
+                        ? "1px solid var(--sidebar-border, var(--color-secondary-200))"
                         : 'none'
                     }}
                   >
@@ -280,8 +280,8 @@ export default function ITSidebar({
                           }}
                           className={`flex items-center gap-2.5 w-full text-left px-3 py-2 rounded-xl transition-all duration-300`}
                           style={{
-                            color: subitem.isActive ? "var(--sidebar-active-color, #0f172a)" : "var(--sidebar-label-color, #475569)",
-                            backgroundColor: subitem.isActive ? "var(--sidebar-active-bg, #f8fafc)" : 'transparent',
+                            color: subitem.isActive ? "var(--sidebar-active-color, var(--color-secondary-900))" : "var(--sidebar-label-color, var(--color-secondary-600))",
+                            backgroundColor: subitem.isActive ? "var(--sidebar-active-bg, var(--color-secondary-50))" : 'transparent',
                             fontSize: '0.85rem',
                             fontWeight: subitem.isActive ? 600 : 500,
                             letterSpacing: '0.01em',
@@ -289,7 +289,7 @@ export default function ITSidebar({
                           }}
                           onMouseEnter={(e) => {
                             if (!subitem.isActive) {
-                              e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, #f1f5f9)";
+                              e.currentTarget.style.backgroundColor = "var(--sidebar-hover-bg, var(--color-secondary-100))";
                               e.currentTarget.style.transform = 'translateX(3px)';
                             }
                           }}
@@ -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,8 +314,8 @@ 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-icon-color, #94a3b8)"
+                                  ? "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.props.ts

@@ -2,9 +2,13 @@ import React from "react";
 
 export type IconType = React.ReactNode;
 
+/** A single step in an `ITStepper` flow. */
 export interface Step {
+  /** Label shown next to the step indicator. */
   label: string;
+  /** Content rendered in the panel while this step is active. */
   content: React.ReactNode;
+  /** Custom icon shown in the step indicator when the stepper's `useIcons` is true. */
   icon?: IconType;
 }
 

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.props.ts

@@ -1,31 +1,49 @@
 import { TableSize, TableVariants } from "@/types/table.types";
 
+/** Data type of a table column, controls default rendering, filter UI, and sort comparison. */
 export type ColumnType = "string" | "date" | "number" | "boolean" | "actions" | "catalog";
 
+/** A single selectable entry for a `"catalog"`-type column's filter/value lookup. */
 export interface CatalogOption {
+  /** Unique identifier matched against the row's field value. */
   id: string | number;
+  /** Human-readable label shown in the filter dropdown and resolved cell display. */
   name: string;
 }
 
+/** Definition of a single column for ITTable. */
 export interface Column<T = any> {
+  /** Field key on the row object this column reads from (supports dot-notation for nested values, e.g. `"address.city"`). */
   key: string;
+  /** Column header text. */
   label: string;
+  /** Additional CSS classes applied to both the header (`<th>`) and body (`<td>`) cells of this column. */
   className?: string;
-  currencyMX?: boolean; 
+  /** Formats numeric values as Mexican pesos (MXN) via `Intl`-based currency formatting. Only applies when `type` is `"number"`. @default false */
+  currencyMX?: boolean;
+  /** Custom action buttons/content rendered for a `"actions"`-type column. Receives the full row object. */
   actions?: (row: T) => React.ReactNode;
+  /** Enables per-column filtering. Pass `true` for a text/number/boolean filter matching `type`, or `"catalog"` to filter against `catalogOptions`. @default false */
   filter?: boolean | "catalog";
+  /** Column data type. Drives default cell rendering, filter UI, and sort comparison. */
   type: ColumnType;
+  /** Whether clicking the header sorts by this column. Ignored for `type: "actions"`. @default false */
   sortable?: boolean;
+  /** Custom cell renderer, takes precedence over the default type-based rendering. Receives the full row object. */
   render?: (row: T) => React.ReactNode;
+  /** Custom inline-edit input renderer (used by table variants that support inline editing). */
   editComponent?: (props: {
     value: any;
     onChange: (value: any) => void;
     rowData: T;
   }) => React.ReactNode;
-  // Nuevas propiedades para catálogo
+  /** Configuration for `type: "catalog"` columns: the lookup options plus loading/error state for async catalogs. */
   catalogOptions?: {
+    /** Available catalog entries used to resolve/filter the raw id stored on the row. */
     data: CatalogOption[];
+    /** Shows a loading spinner in the filter UI while the catalog is being fetched. @default false */
     loading?: boolean;
+    /** Shows an error state in the filter UI when the catalog failed to load. @default false */
     error?: boolean;
   };
 }
@@ -57,4 +75,4 @@ export interface ITTableProps<T> {
   showVerticalBorder?: boolean;
   /** Custom class for vertical borders (overrides the default subtle gray). */
   verticalBorderClassname?: string;
-}
+}

package/src/components/table/table.tsx

@@ -15,6 +15,17 @@ import ITPagination from "../pagination/pagination";
 import ITSelect from "../select/select";
 import { Column, ITTableProps } from "./table.props";
 import ITText from "@/components/text/text";
+import {
+  tableActionsCell,
+  tableBody,
+  tableCell,
+  tableCellText,
+  tableContainer,
+  tableEmptyContent,
+  tableHeaderCell,
+  tableHeaderRow,
+  tableRow,
+} from "@/utils/styles";
 
 const getNestedValue = (obj: unknown, path: string) => {
   return path.split(".").reduce((acc, part) => acc && acc[part], obj);
@@ -183,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,
                 }
               )}
             />
@@ -211,7 +222,7 @@ export default function ITTable<T extends Record<string, unknown>>({
       }
 
       if (col.catalogOptions.error) {
-        return <ITText as="span" className="text-red-500 text-xs">Error cargando</ITText>;
+        return <ITText as="span" className="text-danger-500 text-xs">Error cargando</ITText>;
       }
 
       return (
@@ -260,13 +271,13 @@ export default function ITTable<T extends Record<string, unknown>>({
       case "boolean":
         return value ? (
           <FaCheck
-            className="text-green-500"
+            className="text-success-500"
             aria-label="Verdadero"
             title="Verdadero"
           />
         ) : (
           <FaTimes
-            className="text-red-500"
+            className="text-danger-500"
             aria-label="Falso"
             title="Falso"
           />
@@ -312,7 +323,7 @@ export default function ITTable<T extends Record<string, unknown>>({
 
   return (
     <div className={clsx("space-y-4 w-full", containerClassName)}>
-      <div className="rounded-xl shadow-sm overflow-hidden" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
+      <div className={tableContainer} style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
         {/* Header outside overflow */}
         {title && (
           <div className="px-6 py-5 flex items-center justify-between" style={{ backgroundColor: 'var(--color-table-rowBg, #ffffff)' }}>
@@ -382,7 +393,7 @@ export default function ITTable<T extends Record<string, unknown>>({
                 </div>
               ))
             ) : (
-              <div className="flex flex-col items-center justify-center py-12 text-secondary-400">
+              <div className={clsx(tableEmptyContent, "py-12")}>
                 <ITText as="span" className="text-lg">No se encontraron resultados</ITText>
                 <ITText as="span" className="text-sm mt-1">Intenta ajustar los filtros</ITText>
               </div>
@@ -400,12 +411,12 @@ export default function ITTable<T extends Record<string, unknown>>({
               )}
             >
               <thead>
-                <tr className="bg-secondary-50 text-xs uppercase tracking-wider font-semibold text-slate-700 dark:text-slate-200">
+                <tr className={clsx(tableHeaderRow, "dark:text-slate-200")}>
                   {columns.map((col) => (
                     <th
                       key={col.key}
                       scope="col"
-                      className={clsx("px-4 py-4 align-top", col.className)}
+                      className={tableHeaderCell(col.className)}
                     >
                       <div className="flex flex-col gap-3 min-w-[150px]">
                         <div className="flex items-center justify-between gap-2">
@@ -431,24 +442,24 @@ export default function ITTable<T extends Record<string, unknown>>({
                   ))}
                 </tr>
               </thead>
-              <tbody className="divide-y divide-slate-100 dark:divide-slate-700/30">
+              <tbody className={clsx(tableBody, "dark:divide-slate-700/30")}>
                 {currentData.length > 0 ? (
                   currentData.map((row, rowIndex) => (
                     <tr
                       key={rowIndex}
-                      className={clsx("hover:bg-secondary-50/50 transition-colors duration-150 group", variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20")}
+                      className={clsx(tableRow, variant === "striped" && "odd:bg-secondary-50/40 dark:odd:bg-slate-800/20")}
                     >
                       {columns.map((col) => (
                         <td
                           key={`${rowIndex}-${col.key}`}
-                          className={clsx("px-4 py-3 align-middle", col.className)}
+                          className={tableCell(col.className)}
                         >
                           {col.type === "actions" ? (
-                            <div className="flex items-center justify-center gap-2">
+                            <div className={tableActionsCell}>
                               {renderCellContent(col, row) as React.ReactNode}
                             </div>
                           ) : (
-                            <div className="text-secondary-700 font-medium">
+                            <div className={tableCellText}>
                               {renderCellContent(col, row) as React.ReactNode}
                             </div>
                           )}
@@ -459,7 +470,7 @@ export default function ITTable<T extends Record<string, unknown>>({
                 ) : (
                   <tr>
                     <td colSpan={columns.length} className="px-6 py-12 text-center">
-                      <div className="flex flex-col items-center justify-center text-secondary-400">
+                      <div className={tableEmptyContent}>
                         <ITText as="span" className="text-lg">No se encontraron resultados</ITText>
                         <ITText as="span" className="text-sm mt-1">Intenta ajustar los filtros</ITText>
                       </div>

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>}