@axzydev/axzy_ui_system 1.2.11 → 1.2.13

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 {

package/src/theme/theme.ts

@@ -160,7 +160,7 @@ export const components = {
       hover: semanticColors.primary[600],
       active: semanticColors.primary[700],
       focus: `0 0 0 2px ${semanticColors.primary[200]}`,
-      borderRadius: '0.375rem', 
+      borderRadius: 'var(--radius-md)', 
       padding: '0.5rem 1rem',
       fontSize: '0.875rem',
       fontWeight: '600',
@@ -172,7 +172,7 @@ export const components = {
       color: '#ffffff',
       hover: semanticColors.secondary[600],
       focus: `0 0 0 2px ${semanticColors.secondary[200]}`,
-      borderRadius: '0.375rem',
+      borderRadius: 'var(--radius-md)',
       padding: '0.5rem 1rem',
       fontSize: '0.875rem',
       fontWeight: '600',
@@ -183,7 +183,7 @@ export const components = {
       color: '#ffffff',
       hover: semanticColors.success[600],
       focus: `0 0 0 2px ${semanticColors.success[200]}`,
-      borderRadius: '0.375rem',
+      borderRadius: 'var(--radius-md)',
     },
 
     danger: {
@@ -191,14 +191,14 @@ export const components = {
       color: '#ffffff',
       hover: semanticColors.danger[600],
       focus: `0 0 0 2px ${semanticColors.danger[200]}`,
-      borderRadius: '0.375rem',
+      borderRadius: 'var(--radius-md)',
     },
 
     error: {
       backgroundColor: semanticColors.danger[500],
       color: '#ffffff',
       hover: semanticColors.danger[600],
-      borderRadius: '0.375rem',
+      borderRadius: 'var(--radius-md)',
     },
 
     warning: {
@@ -206,7 +206,7 @@ export const components = {
       color: '#ffffff',
       hover: semanticColors.warning[600],
       focus: `0 0 0 2px ${semanticColors.warning[200]}`,
-      borderRadius: '0.375rem',
+      borderRadius: 'var(--radius-md)',
     },
 
     info: {
@@ -214,7 +214,7 @@ export const components = {
       color: '#ffffff',
       hover: semanticColors.info[600],
       focus: `0 0 0 2px ${semanticColors.info[200]}`,
-      borderRadius: '0.375rem',
+      borderRadius: 'var(--radius-md)',
     },
 
     purple: {
@@ -222,7 +222,7 @@ export const components = {
       color: '#ffffff',
       hover: semanticColors.purple[600],
       focus: `0 0 0 2px ${semanticColors.purple[200]}`,
-      borderRadius: '0.375rem',
+      borderRadius: 'var(--radius-md)',
     },
     
     outline: {
@@ -231,7 +231,7 @@ export const components = {
       borderColor: semanticColors.primary[600],
       borderWidth: '2px', 
       hover: semanticColors.primary[50],
-      borderRadius: '0.375rem',
+      borderRadius: 'var(--radius-md)',
     },
   },
   
@@ -291,19 +291,19 @@ export const components = {
 
   card: {
     backgroundColor: 'var(--card-bg, #ffffff)',
-    borderRadius: '1rem',
+    borderRadius: 'var(--radius-2xl)',
     borderColor: `var(--card-border, ${semanticColors.gray[200]})`,
     borderWidth: '1px',
-    shadow: 'var(--card-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))',
+    shadow: 'var(--card-shadow, var(--shadow-md))',
     hover: {
-      shadow: 'var(--card-shadow-hover, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1))',
+      shadow: 'var(--card-shadow-hover, var(--shadow-lg))',
     },
     header: {
       backgroundColor: `var(--card-header-bg, ${semanticColors.gray[50]})`,
       borderBottom: `1px solid var(--card-header-border, var(--color-secondary-200))`,
       padding: '1rem 1.5rem',
-      borderTopLeftRadius: '1rem',
-      borderTopRightRadius: '1rem',
+      borderTopLeftRadius: 'var(--radius-2xl)',
+      borderTopRightRadius: 'var(--radius-2xl)',
     },
     body: {
       padding: '1.5rem',
@@ -313,7 +313,7 @@ export const components = {
   input: {
     backgroundColor: 'var(--input-bg, #ffffff)',
     borderColor: `var(--input-border, ${semanticColors.gray[300]})`,
-    borderRadius: '0.5rem',
+    borderRadius: 'var(--radius-md)',
     padding: '0.5rem 0.75rem',
     fontSize: '0.875rem',
     focus: {
@@ -382,8 +382,8 @@ export const components = {
     },
     content: {
       backgroundColor: 'var(--modal-bg, #ffffff)',
-      borderRadius: '1rem',
-      shadow: 'var(--modal-shadow, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1))',
+      borderRadius: 'var(--radius-2xl)',
+      shadow: 'var(--modal-shadow, var(--shadow-xl))',
     },
     header: {
       padding: '1.5rem 1.5rem 0.5rem 1.5rem',

package/src/utils/styles.ts

@@ -9,20 +9,20 @@ export function inputContainer(hasError?: boolean, disabled?: boolean) {
     "w-full border border-solid transition-all duration-200 rounded-lg px-3 py-2 text-sm",
     "focus:outline-none focus:ring-2",
     hasError
-      ? "border-red-500 ring-red-100"
-      : "border-gray-300 focus:border-primary-500 focus:ring-primary-100",
-    disabled && "opacity-50 cursor-not-allowed bg-gray-100"
+      ? "border-danger-500 ring-danger-100"
+      : "border-secondary-300 focus:border-primary-500 focus:ring-primary-100",
+    disabled && "opacity-50 cursor-not-allowed bg-secondary-100"
   );
 }
 
 export function inputLabel(error?: boolean) {
   return clsx(
     "text-sm font-medium",
-    error ? "text-red-500" : "text-gray-700 dark:text-slate-300"
+    error ? "text-danger-500" : "text-secondary-700 dark:text-secondary-300"
   );
 }
 
-export const inputError = "text-red-500 text-xs mt-1";
+export const inputError = "text-danger-500 text-xs mt-1";
 
 export function inputWrapper(className?: string) {
   return clsx("flex flex-col gap-1.5", className);