@axzydev/axzy_ui_system 1.2.11 → 1.2.13

package/package.json

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

package/src/components/avatar/avatar.tsx

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

package/src/components/calendar/calendar.tsx

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

package/src/components/card/card.tsx

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

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

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

package/src/components/dialog/dialog.tsx

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

package/src/components/divider/divider.tsx

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

package/src/components/dropfile/dropfile.doc.mdx

@@ -21,6 +21,9 @@ A drag-and-drop file upload zone with preview support for images. Tracks upload
 | `uploadStatus` | `UploadStatus` | — | Externally controlled upload status. |
 | `onStatusChange` | `(status: UploadStatus) => void` | — | Callback when upload status changes. |
 | `initialPreviewUrl` | `string \| null` | — | Initial preview URL shown before any file is selected (e.g., editing an existing entry). |
+| `view` | `"drop" \| "button"` | `"drop"` | `"drop"` renders the dropzone/preview inline. `"button"` renders a compact trigger button that opens the same UI inside an `ITDialog` modal. |
+| `buttonLabel` | `string` | `"Subir archivo"` | Label for the trigger button when `view="button"` and no file is selected yet. |
+| `modalTitle` | `string` | `buttonLabel` | Title of the modal opened when `view="button"`. |
 
 ### Enums
 
@@ -44,6 +47,18 @@ import { ITDropfile, UploadStatus, FileTypeEnum } from '@axzydev/axzy_ui_system'
 />
 ```
 
+### `view="button"`
+
+```tsx
+<ITDropfile
+  view="button"
+  buttonLabel="Subir archivos"
+  onFileSelect={(file) => setSelectedFile(file)}
+/>
+```
+
+Use this when you'd otherwise write your own button + modal wrapper around `ITDropfile` — it's built in. The button shows the picked file's name (and status badge, if `showStatusBadge`) once one is selected, and reopens the same dropzone/preview to change it. The modal auto-closes ~900ms after a successful confirm.
+
 ## Notes
 
 - Displays image preview for image file types; shows a file icon for non-image types.

package/src/components/dropfile/dropfile.props.ts

@@ -44,4 +44,17 @@ export interface ITDropfileProps {
   onStatusChange?: (status: UploadStatus) => void;
   /** An initial preview URL to display before any file is selected. */
   initialPreviewUrl?: string | null;
+  /**
+   * Presentation mode. `"drop"` renders the dropzone/preview inline (default,
+   * current behavior). `"button"` renders a compact trigger button instead —
+   * clicking it opens the same dropzone/preview UI inside an `ITDialog`, so
+   * callers don't need to build their own "open a modal" button around
+   * `ITDropfile`.
+   * @default "drop"
+   */
+  view?: "drop" | "button";
+  /** Label for the trigger button when `view="button"` and no file is selected yet. @default "Subir archivo" */
+  buttonLabel?: string;
+  /** Title of the modal opened when `view="button"`. Defaults to `buttonLabel`. */
+  modalTitle?: string;
 }

package/src/components/dropfile/dropfile.stories.tsx

@@ -18,6 +18,10 @@ const meta = {
       control: 'select',
       options: Object.values(UploadStatus),
     },
+    view: {
+      control: 'radio',
+      options: ['drop', 'button'],
+    },
   },
 } satisfies Meta<typeof ITDropfile>;
 
@@ -64,6 +68,23 @@ export const Uploading: any = {
   },
 };
 
+export const ButtonView: any = {
+  render: (args) => <DropfileWrapper {...args} />,
+  args: {
+    view: 'button',
+    buttonLabel: 'Subir archivos',
+    showStatusBadge: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Compact trigger button that opens the dropzone/preview inside a modal (`ITDialog`) — use this instead of wrapping `ITDropfile` in your own "open a modal" button.',
+      },
+    },
+  },
+};
+
 export const ErrorState: any = {
   render: (args) => <DropfileWrapper {...args} />,
   args: {

package/src/components/dropfile/dropfile.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect } from "react";
 import { useDropzone } from "react-dropzone";
 // import pdfjsLib from "@/hooks/pdf"; // Disabled as hook is missing
 import clsx from "clsx";
 import ITText from "@/components/text/text";
 import ITButton from "@/components/button/button";
+import ITDialog from "@/components/dialog/dialog";
 import { ITDropfileProps, FileTypeEnum, UploadStatus } from "./dropfile.props";
 export { FileTypeEnum, UploadStatus } from "./dropfile.props";
 
@@ -25,6 +26,17 @@ export { FileTypeEnum, UploadStatus } from "./dropfile.props";
  *   showStatusBadge
  * />
  * ```
+ *
+ * @example
+ * Compact trigger button that opens the dropzone in a modal — no need to
+ * build your own "open a modal" button around `ITDropfile`:
+ * ```tsx
+ * <ITDropfile
+ *   view="button"
+ *   buttonLabel="Subir archivos"
+ *   onFileSelect={(file) => setSelectedFile(file)}
+ * />
+ * ```
  */
 const ITDropfile: React.FC<ITDropfileProps> = ({
   onFileSelect,
@@ -37,7 +49,11 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
   uploadStatus: externalStatus,
   onStatusChange,
   initialPreviewUrl,
+  view = "drop",
+  buttonLabel = "Subir archivo",
+  modalTitle,
 }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [fileType, setFileType] = useState<string | null>(null);
   // Initialize preview with prop if available
@@ -47,8 +63,6 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
   const [internalUploadStatus, setInternalUploadStatus] = useState<UploadStatus>(
     initialPreviewUrl ? UploadStatus.UPLOADED : UploadStatus.PENDING
   );
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-
   // Sync initialPreviewUrl if it changes
   useEffect(() => {
     if (initialPreviewUrl && !selectedFile) {
@@ -278,20 +292,30 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
     handleCancel();
   };
 
-  const isImage = fileType && fileType.startsWith('image/');
+  // In "button" view, close the modal a moment after a successful upload so
+  // the trigger collapses back to its compact state instead of leaving the
+  // modal open on a finished confirmation.
+  useEffect(() => {
+    if (view === "button" && isConfirmed && uploadStatus === UploadStatus.UPLOADED) {
+      const timeout = setTimeout(() => setIsModalOpen(false), 900);
+      return () => clearTimeout(timeout);
+    }
+  }, [view, isConfirmed, uploadStatus]);
 
-  return (
-    <div className={clsx("w-full transition-all duration-300", containerClassName)}>
-      <div className="flex items-center justify-between mb-2">
-        <label className="block text-sm font-semibold text-gray-700">
-          <ITText as="span">Subir archivo </ITText><ITText as="span" className="text-gray-400 font-normal text-xs">({getFileExtensions()})</ITText>
-        </label>
-        
-        {showStatusBadge && selectedFile && (
-          <StatusBadge status={uploadStatus} />
-        )}
-      </div>
+  const headerRow = (
+    <div className="flex items-center justify-between mb-2">
+      <label className="block text-sm font-semibold text-secondary-700">
+        <ITText as="span">Subir archivo </ITText><ITText as="span" className="text-secondary-400 font-normal text-xs">({getFileExtensions()})</ITText>
+      </label>
 
+      {showStatusBadge && selectedFile && (
+        <StatusBadge status={uploadStatus} />
+      )}
+    </div>
+  );
+
+  const dropZoneOrPreview = (
+    <>
       {!selectedFile && !imagePreview ? (
         <div
           {...getRootProps()}
@@ -301,15 +325,15 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
             ${
               isDragActive
                 ? "border-primary-500 bg-primary-50 scale-[1.01]"
-                : "border-gray-300 bg-white hover:border-primary-400 hover:bg-gray-50"
+                : "border-secondary-300 bg-white hover:border-primary-400 hover:bg-secondary-50"
             }
           `}
         >
           <input {...getInputProps()} />
           
-          <div className={`mb-3 p-3 rounded-full transition-colors duration-300 ${isDragActive ? 'bg-primary-100' : 'bg-gray-100 group-hover:bg-primary-50'}`}>
+          <div className={`mb-3 p-3 rounded-full transition-colors duration-300 ${isDragActive ? 'bg-primary-100' : 'bg-secondary-100 group-hover:bg-primary-50'}`}>
             <svg 
-              className={`w-6 h-6 transition-colors duration-300 ${isDragActive ? 'text-primary-600' : 'text-gray-400 group-hover:text-primary-500'}`} 
+              className={`w-6 h-6 transition-colors duration-300 ${isDragActive ? 'text-primary-600' : 'text-secondary-400 group-hover:text-primary-500'}`} 
               fill="none" viewBox="0 0 24 24" stroke="currentColor"
             >
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
@@ -317,14 +341,14 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
           </div>
 
           <div className="text-center space-y-1">
-            <ITText as="p" className={`text-sm font-medium transition-colors duration-300 ${isDragActive ? 'text-primary-700' : 'text-gray-700'}`}>
+            <ITText as="p" className={`text-sm font-medium transition-colors duration-300 ${isDragActive ? 'text-primary-700' : 'text-secondary-700'}`}>
               {isDragActive ? "¡Suelta aquí!" : "Haz clic o arrastra"}
             </ITText>
           </div>
         </div>
       ) : (
-        <div className="w-full bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden animate-fade-in">
-          <div className="flex items-center justify-between p-3 bg-gray-50 border-b border-gray-100">
+        <div className="w-full bg-white border border-secondary-200 rounded-xl shadow-sm overflow-hidden animate-fade-in">
+          <div className="flex items-center justify-between p-3 bg-secondary-50 border-b border-secondary-100">
              <div className="flex items-center gap-3 overflow-hidden">
                 <div className="flex-shrink-0 w-8 h-8 rounded-lg bg-primary-100 flex items-center justify-center text-primary-600">
                   {(selectedFile && fileType?.startsWith('image/')) || (!selectedFile && imagePreview) ? (
@@ -338,17 +362,17 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                   )}
                 </div>
                 <div className="min-w-0">
-                  <ITText as="p" className="text-xs font-medium text-gray-900 truncate" title={selectedFile?.name || "Imagen cargada"}>
+                  <ITText as="p" className="text-xs font-medium text-secondary-900 truncate" title={selectedFile?.name || "Imagen cargada"}>
                     {selectedFile?.name || "Imagen cargada"}
                   </ITText>
-                  <ITText as="p" className="text-[10px] text-gray-500">
+                  <ITText as="p" className="text-[10px] text-secondary-500">
                     {selectedFile ? (selectedFile.size / 1024 / 1024).toFixed(2) + " MB" : ""}
                   </ITText>
                 </div>
              </div>
           </div>
 
-          <div className={clsx("relative bg-gray-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName)}>
+          <div className={clsx("relative bg-secondary-100 flex items-center justify-center", !contentClassName ? "max-h-[200px] min-h-[100px] overflow-auto" : contentClassName)}>
             {((selectedFile && fileType?.startsWith('image/')) || (!selectedFile && imagePreview)) ? (
               <img 
                 src={imagePreview} 
@@ -356,7 +380,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
                 className="w-full h-full object-contain max-h-[200px]"
               />
             ) : (
-              <div className="py-8 flex flex-col items-center text-gray-400">
+              <div className="py-8 flex flex-col items-center text-secondary-400">
                 <svg className="w-10 h-10 mb-2 opacity-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
                 </svg>
@@ -365,7 +389,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
             )}
           </div>
 
-          <div className="px-3 py-2 bg-white border-t border-gray-100 flex justify-end gap-2">
+          <div className="px-3 py-2 bg-white border-t border-secondary-100 flex justify-end gap-2">
             {!isConfirmed ? (
               <>
                 <ITButton
@@ -410,7 +434,7 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
 
           {uploadStatus === UploadStatus.UPLOADING && (
             <div className="px-4 pb-2">
-              <div className="w-full bg-gray-200 rounded-full h-1.5">
+              <div className="w-full bg-secondary-200 rounded-full h-1.5">
                 <div 
                   className="bg-primary-600 h-1.5 rounded-full transition-all duration-1000 ease-out"
                   style={{ 
@@ -423,6 +447,45 @@ const ITDropfile: React.FC<ITDropfileProps> = ({
           )}
         </div>
       )}
+    </>
+  );
+
+  if (view === "button") {
+    const hasFile = Boolean(selectedFile || imagePreview);
+    return (
+      <div className={clsx("inline-block", containerClassName)}>
+        <ITButton
+          type="button"
+          variant="outlined"
+          color={hasFile ? "primary" : "secondary"}
+          size="small"
+          onClick={() => setIsModalOpen(true)}
+        >
+          <div className="flex items-center gap-2 max-w-[220px]">
+            <svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+            </svg>
+            <ITText className="truncate">
+              {selectedFile?.name || (hasFile ? "Archivo cargado" : buttonLabel)}
+            </ITText>
+            {showStatusBadge && hasFile && <StatusBadge status={uploadStatus} />}
+          </div>
+        </ITButton>
+
+        <ITDialog isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} title={modalTitle ?? buttonLabel}>
+          <div className="w-full transition-all duration-300">
+            {headerRow}
+            {dropZoneOrPreview}
+          </div>
+        </ITDialog>
+      </div>
+    );
+  }
+
+  return (
+    <div className={clsx("w-full transition-all duration-300", containerClassName)}>
+      {headerRow}
+      {dropZoneOrPreview}
     </div>
   );
 };

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

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

package/src/components/input/input.tsx

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

package/src/components/loader/loader.tsx

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

package/src/components/navbar/navbar.tsx

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