@axzydev/axzy_ui_system 1.2.11 → 1.2.12

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

package/src/components/theme-provider/themeProvider.tsx

@@ -799,23 +799,23 @@ export default function ITThemeProvider({
         color: #cbd5e1;
       }
       .dark .text-slate-800, [data-theme="dark"] .text-slate-800,
-      .dark .text-gray-800, [data-theme="dark"] .text-gray-800 {
+      .dark .text-secondary-800, [data-theme="dark"] .text-secondary-800 {
         color: #f8fafc !important;
       }
       .dark .text-slate-700, [data-theme="dark"] .text-slate-700,
-      .dark .text-gray-700, [data-theme="dark"] .text-gray-700 {
+      .dark .text-secondary-700, [data-theme="dark"] .text-secondary-700 {
         color: #cbd5e1 !important;
       }
       .dark .text-slate-600, [data-theme="dark"] .text-slate-600,
-      .dark .text-gray-600, [data-theme="dark"] .text-gray-600 {
+      .dark .text-secondary-600, [data-theme="dark"] .text-secondary-600 {
         color: #cbd5e1 !important;
       }
       .dark .text-slate-500, [data-theme="dark"] .text-slate-500,
-      .dark .text-gray-500, [data-theme="dark"] .text-gray-500 {
+      .dark .text-secondary-500, [data-theme="dark"] .text-secondary-500 {
         color: #94a3b8 !important;
       }
       .dark .text-slate-400, [data-theme="dark"] .text-slate-400,
-      .dark .text-gray-400, [data-theme="dark"] .text-gray-400 {
+      .dark .text-secondary-400, [data-theme="dark"] .text-secondary-400 {
         color: #64748b !important;
       }
 
@@ -823,25 +823,25 @@ export default function ITThemeProvider({
         background-color: var(--card-bg, #111827) !important;
       }
       .dark .bg-slate-50, [data-theme="dark"] .bg-slate-50,
-      .dark .bg-gray-50, [data-theme="dark"] .bg-gray-50 {
+      .dark .bg-secondary-50, [data-theme="dark"] .bg-secondary-50 {
         background-color: #1f2937 !important;
       }
       .dark .border-slate-100, [data-theme="dark"] .border-slate-100,
-      .dark .border-gray-100, [data-theme="dark"] .border-gray-100,
+      .dark .border-secondary-100, [data-theme="dark"] .border-secondary-100,
       .dark .border-slate-200, [data-theme="dark"] .border-slate-200,
-      .dark .border-gray-200, [data-theme="dark"] .border-gray-200 {
+      .dark .border-secondary-200, [data-theme="dark"] .border-secondary-200 {
         border-color: #374151 !important;
       }
 
-      .dark .bg-gray-100, [data-theme="dark"] .bg-gray-100,
+      .dark .bg-secondary-100, [data-theme="dark"] .bg-secondary-100,
       .dark .bg-slate-100, [data-theme="dark"] .bg-slate-100 {
         background-color: #1f2937 !important;
       }
-      .dark .border-gray-300, [data-theme="dark"] .border-gray-300,
+      .dark .border-secondary-300, [data-theme="dark"] .border-secondary-300,
       .dark .border-slate-300, [data-theme="dark"] .border-slate-300 {
         border-color: #4b5563 !important;
       }
-      .dark .bg-gray-200, [data-theme="dark"] .bg-gray-200,
+      .dark .bg-secondary-200, [data-theme="dark"] .bg-secondary-200,
       .dark .bg-slate-200, [data-theme="dark"] .bg-slate-200 {
         background-color: #374151 !important;
       }
@@ -909,23 +909,23 @@ export default function ITThemeProvider({
       }
 
       [data-theme="light"] .text-slate-800,
-      [data-theme="light"] .text-gray-800 {
+      [data-theme="light"] .text-secondary-800 {
         color: #1e293b !important;
       }
       [data-theme="light"] .text-slate-700,
-      [data-theme="light"] .text-gray-700 {
+      [data-theme="light"] .text-secondary-700 {
         color: #334155 !important;
       }
       [data-theme="light"] .text-slate-600,
-      [data-theme="light"] .text-gray-600 {
+      [data-theme="light"] .text-secondary-600 {
         color: #475569 !important;
       }
       [data-theme="light"] .text-slate-500,
-      [data-theme="light"] .text-gray-500 {
+      [data-theme="light"] .text-secondary-500 {
         color: #64748b !important;
       }
       [data-theme="light"] .text-slate-400,
-      [data-theme="light"] .text-gray-400 {
+      [data-theme="light"] .text-secondary-400 {
         color: #94a3b8 !important;
       }
 
@@ -933,24 +933,24 @@ export default function ITThemeProvider({
         background-color: #ffffff !important;
       }
       [data-theme="light"] .bg-slate-50,
-      [data-theme="light"] .bg-gray-50 {
+      [data-theme="light"] .bg-secondary-50 {
         background-color: #f8fafc !important;
       }
       [data-theme="light"] .border-slate-100,
-      [data-theme="light"] .border-gray-100,
+      [data-theme="light"] .border-secondary-100,
       [data-theme="light"] .border-slate-200,
-      [data-theme="light"] .border-gray-200 {
+      [data-theme="light"] .border-secondary-200 {
         border-color: #e2e8f0 !important;
       }
-      [data-theme="light"] .bg-gray-100,
+      [data-theme="light"] .bg-secondary-100,
       [data-theme="light"] .bg-slate-100 {
         background-color: #f1f5f9 !important;
       }
-      [data-theme="light"] .border-gray-300,
+      [data-theme="light"] .border-secondary-300,
       [data-theme="light"] .border-slate-300 {
         border-color: #cbd5e1 !important;
       }
-      [data-theme="light"] .bg-gray-200,
+      [data-theme="light"] .bg-secondary-200,
       [data-theme="light"] .bg-slate-200 {
         background-color: #e2e8f0 !important;
       }
@@ -978,13 +978,13 @@ export default function ITThemeProvider({
       .hover\\:bg-green-600:hover { background-color: var(--color-success-hover) !important; }
 
       /* Danger overrides (red mappings in UI library) */
-      .bg-red-700 { background-color: var(--color-danger) !important; }
-      .hover\\:bg-red-800:hover { background-color: var(--color-danger-hover) !important; }
-      .focus\\:ring-red-300:focus { --tw-ring-color: var(--color-danger-ring) !important; }
-      .text-red-700 { color: var(--color-danger) !important; }
-      .border-red-700 { border-color: var(--color-danger) !important; }
-      .bg-red-500 { background-color: var(--color-danger) !important; }
-      .hover\\:bg-red-600:hover { background-color: var(--color-danger-hover) !important; }
+      .bg-danger-700 { background-color: var(--color-danger) !important; }
+      .hover\\:bg-danger-800:hover { background-color: var(--color-danger-hover) !important; }
+      .focus\\:ring-danger-300:focus { --tw-ring-color: var(--color-danger-ring) !important; }
+      .text-danger-700 { color: var(--color-danger) !important; }
+      .border-danger-700 { border-color: var(--color-danger) !important; }
+      .bg-danger-500 { background-color: var(--color-danger) !important; }
+      .hover\\:bg-danger-600:hover { background-color: var(--color-danger-hover) !important; }
 
       /* Warning overrides (yellow mappings in UI library) */
       .bg-yellow-400 { background-color: var(--color-warning) !important; }
@@ -1014,12 +1014,12 @@ export default function ITThemeProvider({
       .border-blue-500 { border-color: var(--color-info) !important; }
 
       /* Secondary elements overrides */
-      button[class*="bg-white"][class*="hover:bg-gray-100"] {
+      button[class*="bg-white"][class*="hover:bg-secondary-100"] {
         background-color: var(--color-secondary) !important;
         border-color: var(--color-secondary-soft-border) !important;
         color: #111827 !important;
       }
-      button[class*="bg-white"][class*="hover:bg-gray-100"]:hover {
+      button[class*="bg-white"][class*="hover:bg-secondary-100"]:hover {
         background-color: var(--color-secondary-hover) !important;
       }
 
@@ -1625,7 +1625,7 @@ export default function ITThemeProvider({
               e.stopPropagation();
               handleDeletePreset(preset.name, e);
             }}
-            className="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 p-0.5 rounded-md hover:bg-red-500/10 hover:text-red-500 text-slate-400 dark:text-slate-500 cursor-pointer transition-all z-10"
+            className="absolute top-1.5 right-1.5 opacity-0 group-hover:opacity-100 p-0.5 rounded-md hover:bg-danger-500/10 hover:text-danger-500 text-slate-400 dark:text-slate-500 cursor-pointer transition-all z-10"
             title="Eliminar"
           >
             <MdClose size={12} />

package/src/components/time-picker/timePicker.tsx

@@ -227,14 +227,14 @@ export default function ITTimePicker({
       {isOpen && !disabled && (
         <div 
           ref={dropdownRef}
-          className="fixed z-[70] bg-white border border-gray-100 shadow-xl rounded-xl w-64 overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200 origin-top it-timepicker-dropdown"
+          className="fixed z-[70] bg-white border border-secondary-100 shadow-xl rounded-xl w-64 overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-200 origin-top it-timepicker-dropdown"
           style={{
             top: `${dropdownPosition.top}px`,
             left: `${dropdownPosition.left}px`,
           }}
         >
-          <div className="flex bg-gray-50 border-b border-gray-100 text-xs font-semibold text-gray-500 uppercase tracking-wider">
-            <ITText as="div" className="flex-1 text-center py-2 border-r border-gray-100">
+          <div className="flex bg-secondary-50 border-b border-secondary-100 text-xs font-semibold text-secondary-500 uppercase tracking-wider">
+            <ITText as="div" className="flex-1 text-center py-2 border-r border-secondary-100">
               Horas
             </ITText>
             <ITText as="div" className="flex-1 text-center py-2">Minutos</ITText>
@@ -244,7 +244,7 @@ export default function ITTimePicker({
             {/* Hours Column */}
             <div
               ref={hoursRef}
-              className="flex-1 overflow-y-auto no-scrollbar border-r border-gray-50 scroll-smooth relative"
+              className="flex-1 overflow-y-auto no-scrollbar border-r border-secondary-50 scroll-smooth relative"
             >
               <div className="py-2">
                 {hoursList.map((h) => {
@@ -321,7 +321,7 @@ export default function ITTimePicker({
             <div className="absolute top-1/2 left-0 right-0 h-10 -mt-5 bg-black/5 pointer-events-none border-y border-black/10 z-10" />
           </div>
 
-          <div className="p-3 bg-gray-50 border-t border-gray-100 flex justify-end">
+          <div className="p-3 bg-secondary-50 border-t border-secondary-100 flex justify-end">
             <ITButton
               variant="solid"
               color={color as any}

package/src/components/topbar/topbar.tsx

@@ -61,8 +61,8 @@ export default function ITTopBar({
       className="sticky top-0 z-40 backdrop-blur-md transition-all duration-300"
       style={{
         backgroundColor: "var(--topbar-bg, rgba(255, 255, 255, 0.9))",
-        borderBottom: "1px solid var(--topbar-border, #e2e8f0)",
-        boxShadow: "none",
+        borderBottom: "1px solid var(--topbar-border, rgba(15, 23, 42, 0.06))",
+        boxShadow: "var(--shadow-xs)",
       }}
     >
       <div className="flex items-center justify-between h-[72px] px-6 lg:px-8">
@@ -105,7 +105,7 @@ export default function ITTopBar({
 
           {/* Top Navigation Items (Desktop) */}
           {navItems && navItems.length > 0 && (
-            <nav className="hidden md:flex ml-8 space-x-1 border-l pl-8" style={{ borderColor: "var(--topbar-border, #e2e8f0)" }}>
+            <nav className="hidden md:flex ml-8 space-x-1 border-l pl-8" style={{ borderColor: "var(--topbar-border, rgba(15, 23, 42, 0.06))" }}>
               {navItems.map((item) => (
                 <button
                   key={item.id}
@@ -136,7 +136,7 @@ export default function ITTopBar({
           <div className="relative">
             <button
               type="button"
-              className="flex items-center gap-3 rounded-full pl-2 pr-4 py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-gray-200"
+              className="flex items-center gap-3 rounded-full pl-2 pr-4 py-1.5 transition-all duration-200 ease-[cubic-bezier(0.2,0,0,1)] border border-transparent hover:border-secondary-200"
               style={{
                 backgroundColor: isUserMenuOpen ? "var(--topbar-user-hover, #f1f5f9)" : "transparent",
               }}
@@ -220,9 +220,9 @@ export default function ITTopBar({
                            setIsUserMenuOpen(false);
                         }}
                         className="block w-full text-left px-3 py-2.5 rounded-xl text-[0.875rem] font-medium transition-colors duration-150"
-                        style={{ color: isDestructive ? '#ef4444' : "var(--topbar-user-text, #334155)" }}
+                        style={{ color: isDestructive ? 'var(--color-danger-500)' : "var(--topbar-user-text, #334155)" }}
                         onMouseEnter={(e) => {
-                          e.currentTarget.style.backgroundColor = isDestructive ? '#fef2f2' : "var(--topbar-user-item-hover, #f8fafc)";
+                          e.currentTarget.style.backgroundColor = isDestructive ? 'var(--color-danger-50)' : "var(--topbar-user-item-hover, #f8fafc)";
                         }}
                         onMouseLeave={(e) => {
                           e.currentTarget.style.backgroundColor = "transparent";

package/src/index.css

@@ -94,6 +94,29 @@
   --color-info-800: #075985;
   --color-info-900: #0c4a6e;
   --color-info-950: #082f49;
+
+  /* Soft-depth radius scale: larger, more consistent rounding across the system */
+  --radius-xs: 0.25rem;
+  --radius-sm: 0.375rem;
+  --radius-md: 0.625rem;
+  --radius-lg: 0.875rem;
+  --radius-xl: 1.125rem;
+  --radius-2xl: 1.5rem;
+  --radius-3xl: 2rem;
+
+  /* Soft-depth shadow scale: cool slate-tinted, low-opacity, multi-layer.
+     Overrides Tailwind's default shadow-* tokens system-wide so every
+     existing shadow-* usage picks up the new "floating" look with no
+     per-component changes. */
+  --shadow-2xs: 0 1px 2px 0 rgb(15 23 42 / 0.04);
+  --shadow-xs: 0 1px 3px 0 rgb(15 23 42 / 0.05), 0 1px 2px -1px rgb(15 23 42 / 0.04);
+  --shadow-sm: 0 2px 6px -1px rgb(15 23 42 / 0.06), 0 1px 3px -1px rgb(15 23 42 / 0.05);
+  --shadow-md: 0 6px 16px -4px rgb(15 23 42 / 0.08), 0 3px 6px -3px rgb(15 23 42 / 0.05);
+  --shadow-lg: 0 12px 28px -6px rgb(15 23 42 / 0.1), 0 6px 12px -6px rgb(15 23 42 / 0.06);
+  --shadow-xl: 0 20px 40px -8px rgb(15 23 42 / 0.12), 0 10px 20px -8px rgb(15 23 42 / 0.06);
+  --shadow-2xl: 0 32px 64px -16px rgb(15 23 42 / 0.18);
+  --shadow: 0 2px 6px -1px rgb(15 23 42 / 0.06), 0 1px 3px -1px rgb(15 23 42 / 0.05);
+  --shadow-inner: inset 0 2px 4px 0 rgb(15 23 42 / 0.04);
 }
 
 @keyframes fadeIn {