src/ColorDemo.vue

@@ -16,10 +16,10 @@ import AppTopbar from './components/Holos/AppTopbar.vue';
                     <!-- Tarjeta de ejemplo 1 -->
                     <div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
                         <h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
-                            Colores Primarios
+                            Color Primario
                         </h2>
                         <p class="text-surface-600 dark:text-surface-400 mb-4">
-                            Los colores primarios se usan para botones, enlaces y elementos destacados.
+                            El color primario azul se usa para botones, enlaces y elementos destacados.
                         </p>
                         <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary-600 transition-colors">
                             Botón Primario
@@ -59,14 +59,14 @@ import AppTopbar from './components/Holos/AppTopbar.vue';
                     <!-- Tarjeta de ejemplo 4 -->
                     <div class="bg-surface-0 dark:bg-surface-900 rounded-lg p-6 border border-surface-200 dark:border-surface-700">
                         <h2 class="text-xl font-semibold text-surface-900 dark:text-surface-0 mb-3">
-                            Paleta de Colores
+                            Personalización
                         </h2>
                         <p class="text-surface-600 dark:text-surface-400 mb-4">
-                            Haz clic en el ícono de paleta en la barra superior para cambiar colores.
+                            Haz clic en el ícono de paleta en la barra superior para cambiar el color de superficie.
                         </p>
                         <div class="flex items-center gap-3">
                             <i class="pi pi-palette text-2xl text-primary"></i>
-                            <span class="text-surface-700 dark:text-surface-300">16+ colores disponibles</span>
+                            <span class="text-surface-700 dark:text-surface-300">5 colores de superficie</span>
                         </div>
                     </div>
                 </div>

src/assets/styles/main.css

@@ -4,20 +4,20 @@
 @custom-variant dark (&:where(.p-dark, .p-dark *));
 
 :root {
-    /* Primary Colors - Emerald por defecto */
-    --p-primary-50: #ecfdf5;
-    --p-primary-100: #d1fae5;
-    --p-primary-200: #a7f3d0;
-    --p-primary-300: #6ee7b7;
-    --p-primary-400: #34d399;
-    --p-primary-500: #10b981;
-    --p-primary-600: #059669;
-    --p-primary-700: #047857;
-    --p-primary-800: #065f46;
-    --p-primary-900: #064e3b;
-    --p-primary-950: #022c22;
+    /* Primary Colors - Blue */
+    --p-primary-50: #eff6ff;
+    --p-primary-100: #dbeafe;
+    --p-primary-200: #bfdbfe;
+    --p-primary-300: #93c5fd;
+    --p-primary-400: #60a5fa;
+    --p-primary-500: #3b82f6;
+    --p-primary-600: #2563eb;
+    --p-primary-700: #1d4ed8;
+    --p-primary-800: #1e40af;
+    --p-primary-900: #1e3a8a;
+    --p-primary-950: #172554;
 
-    /* Surface Colors - Slate por defecto */
+    /* Surface Colors - Slate */
     --p-surface-0: #ffffff;
     --p-surface-50: #f8fafc;
     --p-surface-100: #f1f5f9;
@@ -30,4 +30,4 @@
     --p-surface-800: #1e293b;
     --p-surface-900: #0f172a;
     --p-surface-950: #020617;
-}
+}

src/components/Holos/AppConfig.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useLayout } from "../../composables/useLayout";
 
-const { primaryColors, surfaces, primary, surface, updateColors } = useLayout();
+const { surfaces, surface, updateColors } = useLayout();
 </script>
 
 <template>
@@ -9,7 +9,8 @@ const { primaryColors, surfaces, primary, surface, updateColors } = useLayout();
         class="absolute top-16 right-0 w-64 p-4 bg-white dark:bg-surface-900 rounded-md shadow-lg border border-surface-200 dark:border-surface-700 origin-top z-50 hidden"
     >
         <div class="flex flex-col gap-4">
-            <div>
+            <!-- Selector de color primario oculto ya que solo hay uno -->
+            <!-- <div>
                 <span class="text-sm text-surface-600 dark:text-surface-400 font-semibold">Color Primario</span>
                 <div class="pt-2 flex gap-2 flex-wrap justify-between">
                     <button
@@ -27,7 +28,7 @@ const { primaryColors, surfaces, primary, surface, updateColors } = useLayout();
                         @click="updateColors('primary', pc.name)"
                     />
                 </div>
-            </div>
+            </div>  -->
             <div>
                 <span class="text-sm text-surface-600 dark:text-surface-400 font-semibold">Color de Superficie</span>
                 <div class="pt-2 flex gap-2 flex-wrap justify-between">

src/composables/useLayout.ts

@@ -2,156 +2,12 @@ import { updatePrimaryPalette, updateSurfacePalette } from "@primeuix/themes";
 import { computed, ref } from "vue";
 
 const appState = ref({
-    primary: "emerald",
+    primary: "blue",
     surface: "slate",
     darkMode: false
 });
 
 const primaryColors = ref([
-    {
-        name: "emerald",
-        palette: {
-            50: "#ecfdf5",
-            100: "#d1fae5",
-            200: "#a7f3d0",
-            300: "#6ee7b7",
-            400: "#34d399",
-            500: "#10b981",
-            600: "#059669",
-            700: "#047857",
-            800: "#065f46",
-            900: "#064e3b",
-            950: "#022c22"
-        }
-    },
-    {
-        name: "green",
-        palette: {
-            50: "#f0fdf4",
-            100: "#dcfce7",
-            200: "#bbf7d0",
-            300: "#86efac",
-            400: "#4ade80",
-            500: "#22c55e",
-            600: "#16a34a",
-            700: "#15803d",
-            800: "#166534",
-            900: "#14532d",
-            950: "#052e16"
-        }
-    },
-    {
-        name: "lime",
-        palette: {
-            50: "#f7fee7",
-            100: "#ecfccb",
-            200: "#d9f99d",
-            300: "#bef264",
-            400: "#a3e635",
-            500: "#84cc16",
-            600: "#65a30d",
-            700: "#4d7c0f",
-            800: "#3f6212",
-            900: "#365314",
-            950: "#1a2e05"
-        }
-    },
-    {
-        name: "orange",
-        palette: {
-            50: "#fff7ed",
-            100: "#ffedd5",
-            200: "#fed7aa",
-            300: "#fdba74",
-            400: "#fb923c",
-            500: "#f97316",
-            600: "#ea580c",
-            700: "#c2410c",
-            800: "#9a3412",
-            900: "#7c2d12",
-            950: "#431407"
-        }
-    },
-    {
-        name: "amber",
-        palette: {
-            50: "#fffbeb",
-            100: "#fef3c7",
-            200: "#fde68a",
-            300: "#fcd34d",
-            400: "#fbbf24",
-            500: "#f59e0b",
-            600: "#d97706",
-            700: "#b45309",
-            800: "#92400e",
-            900: "#78350f",
-            950: "#451a03"
-        }
-    },
-    {
-        name: "yellow",
-        palette: {
-            50: "#fefce8",
-            100: "#fef9c3",
-            200: "#fef08a",
-            300: "#fde047",
-            400: "#facc15",
-            500: "#eab308",
-            600: "#ca8a04",
-            700: "#a16207",
-            800: "#854d0e",
-            900: "#713f12",
-            950: "#422006"
-        }
-    },
-    {
-        name: "teal",
-        palette: {
-            50: "#f0fdfa",
-            100: "#ccfbf1",
-            200: "#99f6e4",
-            300: "#5eead4",
-            400: "#2dd4bf",
-            500: "#14b8a6",
-            600: "#0d9488",
-            700: "#0f766e",
-            800: "#115e59",
-            900: "#134e4a",
-            950: "#042f2e"
-        }
-    },
-    {
-        name: "cyan",
-        palette: {
-            50: "#ecfeff",
-            100: "#cffafe",
-            200: "#a5f3fc",
-            300: "#67e8f9",
-            400: "#22d3ee",
-            500: "#06b6d4",
-            600: "#0891b2",
-            700: "#0e7490",
-            800: "#155e75",
-            900: "#164e63",
-            950: "#083344"
-        }
-    },
-    {
-        name: "sky",
-        palette: {
-            50: "#f0f9ff",
-            100: "#e0f2fe",
-            200: "#bae6fd",
-            300: "#7dd3fc",
-            400: "#38bdf8",
-            500: "#0ea5e9",
-            600: "#0284c7",
-            700: "#0369a1",
-            800: "#075985",
-            900: "#0c4a6e",
-            950: "#082f49"
-        }
-    },
     {
         name: "blue",
         palette: {
@@ -168,102 +24,6 @@ const primaryColors = ref([
             950: "#172554"
         }
     },
-    {
-        name: "indigo",
-        palette: {
-            50: "#eef2ff",
-            100: "#e0e7ff",
-            200: "#c7d2fe",
-            300: "#a5b4fc",
-            400: "#818cf8",
-            500: "#6366f1",
-            600: "#4f46e5",
-            700: "#4338ca",
-            800: "#3730a3",
-            900: "#312e81",
-            950: "#1e1b4b"
-        }
-    },
-    {
-        name: "violet",
-        palette: {
-            50: "#f5f3ff",
-            100: "#ede9fe",
-            200: "#ddd6fe",
-            300: "#c4b5fd",
-            400: "#a78bfa",
-            500: "#8b5cf6",
-            600: "#7c3aed",
-            700: "#6d28d9",
-            800: "#5b21b6",
-            900: "#4c1d95",
-            950: "#2e1065"
-        }
-    },
-    {
-        name: "purple",
-        palette: {
-            50: "#faf5ff",
-            100: "#f3e8ff",
-            200: "#e9d5ff",
-            300: "#d8b4fe",
-            400: "#c084fc",
-            500: "#a855f7",
-            600: "#9333ea",
-            700: "#7e22ce",
-            800: "#6b21a8",
-            900: "#581c87",
-            950: "#3b0764"
-        }
-    },
-    {
-        name: "fuchsia",
-        palette: {
-            50: "#fdf4ff",
-            100: "#fae8ff",
-            200: "#f5d0fe",
-            300: "#f0abfc",
-            400: "#e879f9",
-            500: "#d946ef",
-            600: "#c026d3",
-            700: "#a21caf",
-            800: "#86198f",
-            900: "#701a75",
-            950: "#4a044e"
-        }
-    },
-    {
-        name: "pink",
-        palette: {
-            50: "#fdf2f8",
-            100: "#fce7f3",
-            200: "#fbcfe8",
-            300: "#f9a8d4",
-            400: "#f472b6",
-            500: "#ec4899",
-            600: "#db2777",
-            700: "#be185d",
-            800: "#9d174d",
-            900: "#831843",
-            950: "#500724"
-        }
-    },
-    {
-        name: "rose",
-        palette: {
-            50: "#fff1f2",
-            100: "#ffe4e6",
-            200: "#fecdd3",
-            300: "#fda4af",
-            400: "#fb7185",
-            500: "#f43f5e",
-            600: "#e11d48",
-            700: "#be123c",
-            800: "#9f1239",
-            900: "#881337",
-            950: "#4c0519"
-        }
-    }
 ]);
 
 const surfaces = ref([
@@ -354,6 +114,40 @@ const surfaces = ref([
     }
 ]);
 
+// Inicializar el color azul al cargar
+const bluePalette = {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554"
+};
+
+const slatePalette = {
+    0: "#ffffff",
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    200: "#e2e8f0",
+    300: "#cbd5e1",
+    400: "#94a3b8",
+    500: "#64748b",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b",
+    900: "#0f172a",
+    950: "#020617"
+};
+
+// Aplicar los colores por defecto inmediatamente
+updatePrimaryPalette(bluePalette);
+updateSurfacePalette(slatePalette);
+
 export function useLayout() {
     function setPrimary(value: string) {
         appState.value.primary = value;

src/main.ts

@@ -1,16 +1,36 @@
 import "./assets/styles/main.css";
 
 import Aura from "@primeuix/themes/aura";
+import { definePreset } from "@primeuix/themes";
 import PrimeVue from "primevue/config";
 import StyleClass from "primevue/styleclass";
 import { createApp } from "vue";
 import App from "./App.vue";
 
+// Crear un preset personalizado basado en Aura con color azul
+const MyPreset = definePreset(Aura, {
+    semantic: {
+        primary: {
+            50: "{blue.50}",
+            100: "{blue.100}",
+            200: "{blue.200}",
+            300: "{blue.300}",
+            400: "{blue.400}",
+            500: "{blue.500}",
+            600: "{blue.600}",
+            700: "{blue.700}",
+            800: "{blue.800}",
+            900: "{blue.900}",
+            950: "{blue.950}"
+        }
+    }
+});
+
 const app = createApp(App);
 
 app.use(PrimeVue, {
     theme: {
-        preset: Aura,
+        preset: MyPreset,
         options: {
             darkModeSelector: ".p-dark",
         },

src/style.css

@@ -1,79 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-.card {
-  padding: 2em;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}