Feat: Implementar paleta de colores por categoría en sliders

- Agregar composable useCategoryColors con 8 colores coordinados (light/dark)
- Colores por categoría: Fragancia (lavanda), Aroma (verde menta), Sabor (rojo),
  Sabor Residual (naranja), Acidez (amarillo), Dulzor (rosa), Sensación en Boca (azul),
  Impresión Global (turquesa)
- Eliminar hints de texto de SliderIntensidad (showDescription = false por defecto)
- Aplicar colores dinámicos a headers y sliders de cada categoría
- Aumentar font-weight de headers a 700 (bold)
- Los colores se adaptan automáticamente al tema light/dark

nuxt4/app/composables/useColorCustomization.ts

@@ -112,39 +112,65 @@ function hslToHex(h: number, s: number, l: number): string {
 }
 
 /**
- * Aplica el color personalizado a las variables CSS
+ * Aplica los colores personalizados a las variables CSS
  */
-function applyCustomColor(color: string, isDark: boolean) {
+function applyCustomColors(primary?: string, foreground?: string, background?: string) {
   if (import.meta.server) return
 
-  const hsl = hexToHSL(color)
+  // Aplicar color principal si se proporciona
+  if (primary) {
+    const hsl = hexToHSL(primary)
 
-  // Aplicar color principal en formato HEX
-  document.documentElement.style.setProperty('--cata-primary', color)
+    document.documentElement.style.setProperty('--cata-primary', primary)
 
-  // Generar variantes light y dark
-  const lightHsl = { ...hsl, l: Math.min(hsl.l + 15, 95) }
-  const darkHsl = { ...hsl, l: Math.max(hsl.l - 15, 10) }
+    // Generar variantes light y dark
+    const lightHsl = { ...hsl, l: Math.min(hsl.l + 15, 95) }
+    const darkHsl = { ...hsl, l: Math.max(hsl.l - 15, 10) }
 
-  const lightColor = hslToHex(lightHsl.h, lightHsl.s, lightHsl.l)
-  const darkColor = hslToHex(darkHsl.h, darkHsl.s, darkHsl.l)
+    const lightColor = hslToHex(lightHsl.h, lightHsl.s, lightHsl.l)
+    const darkColor = hslToHex(darkHsl.h, darkHsl.s, darkHsl.l)
 
-  document.documentElement.style.setProperty('--cata-primary-light', lightColor)
-  document.documentElement.style.setProperty('--cata-primary-dark', darkColor)
+    document.documentElement.style.setProperty('--cata-primary-light', lightColor)
+    document.documentElement.style.setProperty('--cata-primary-dark', darkColor)
 
-  // Aplicar paleta completa para Nuxt UI (en formato HSL)
-  const palette = generateColorPalette(color)
-  Object.entries(palette).forEach(([key, value]) => {
-    document.documentElement.style.setProperty(`--color-primary-${key}`, value)
-  })
+    // Aplicar paleta completa para Nuxt UI (en formato HSL)
+    const palette = generateColorPalette(primary)
+    Object.entries(palette).forEach(([key, value]) => {
+      document.documentElement.style.setProperty(`--color-primary-${key}`, value)
+    })
+  }
+
+  // Aplicar color de fuente si se proporciona
+  if (foreground) {
+    document.documentElement.style.setProperty('--cata-fg', foreground)
+  }
+
+  // Aplicar color de background si se proporciona
+  if (background) {
+    document.documentElement.style.setProperty('--cata-bg', background)
+  }
+}
+
+interface ThemeColors {
+  primary: string | null
+  foreground: string | null
+  background: string | null
 }
 
 /**
  * Colores por defecto según el tema
  */
 const DEFAULT_COLORS = {
-  light: '#4682B4', // SteelBlue
-  dark: '#00FF00',  // Verde terminal
+  light: {
+    primary: '#4682B4',
+    foreground: '#000000',
+    background: '#ffffff',
+  },
+  dark: {
+    primary: '#00FF00',
+    foreground: '#00FF00',
+    background: '#000000',
+  },
 }
 
 const STORAGE_KEY = 'riocata-custom-colors'
@@ -153,10 +179,13 @@ export const useColorCustomization = () => {
   const colorMode = useColorMode()
   const isDark = computed(() => colorMode.value === 'dark')
 
-  // Estado reactivo del color personalizado
-  const customColors = useState<{ light: string | null; dark: string | null }>(
+  // Estado reactivo de los colores personalizados
+  const customColors = useState<{ light: ThemeColors; dark: ThemeColors }>(
     'custom-colors',
-    () => ({ light: null, dark: null })
+    () => ({
+      light: { primary: null, foreground: null, background: null },
+      dark: { primary: null, foreground: null, background: null },
+    })
   )
 
   /**
@@ -190,31 +219,37 @@ export const useColorCustomization = () => {
   }
 
   /**
-   * Establece un color personalizado para el tema actual
+   * Establece colores personalizados para el tema actual
    */
-  const setCustomColor = (color: string) => {
+  const setCustomColors = (primary?: string, foreground?: string, background?: string) => {
     if (import.meta.server) return
 
     const theme = isDark.value ? 'dark' : 'light'
-    customColors.value[theme] = color
+
+    if (primary !== undefined) customColors.value[theme].primary = primary
+    if (foreground !== undefined) customColors.value[theme].foreground = foreground
+    if (background !== undefined) customColors.value[theme].background = background
+
     saveCustomColors()
-    applyCustomColor(color, isDark.value)
+    applyCustomColors(primary, foreground, background)
   }
 
   /**
-   * Resetea el color al valor por defecto del tema actual
+   * Resetea los colores al valor por defecto del tema actual
    */
-  const resetColor = () => {
+  const resetColors = () => {
     if (import.meta.server) return
 
     const theme = isDark.value ? 'dark' : 'light'
-    customColors.value[theme] = null
+    customColors.value[theme] = { primary: null, foreground: null, background: null }
     saveCustomColors()
 
     // Limpiar las variables CSS personalizadas para que vuelvan a los valores del CSS
     document.documentElement.style.removeProperty('--cata-primary')
     document.documentElement.style.removeProperty('--cata-primary-light')
     document.documentElement.style.removeProperty('--cata-primary-dark')
+    document.documentElement.style.removeProperty('--cata-fg')
+    document.documentElement.style.removeProperty('--cata-bg')
 
     // Limpiar paleta de Nuxt UI
     for (let i = 50; i <= 950; i += (i < 100 ? 50 : 100)) {
@@ -223,19 +258,24 @@ export const useColorCustomization = () => {
   }
 
   /**
-   * Obtiene el color actual (personalizado o por defecto)
+   * Obtiene los colores actuales (personalizados o por defecto)
    */
-  const getCurrentColor = computed(() => {
+  const getCurrentColors = computed(() => {
     const theme = isDark.value ? 'dark' : 'light'
-    return customColors.value[theme] || DEFAULT_COLORS[theme]
+    return {
+      primary: customColors.value[theme].primary || DEFAULT_COLORS[theme].primary,
+      foreground: customColors.value[theme].foreground || DEFAULT_COLORS[theme].foreground,
+      background: customColors.value[theme].background || DEFAULT_COLORS[theme].background,
+    }
   })
 
   /**
-   * Verifica si hay un color personalizado para el tema actual
+   * Verifica si hay colores personalizados para el tema actual
    */
-  const hasCustomColor = computed(() => {
+  const hasCustomColors = computed(() => {
     const theme = isDark.value ? 'dark' : 'light'
-    return customColors.value[theme] !== null
+    const colors = customColors.value[theme]
+    return colors.primary !== null || colors.foreground !== null || colors.background !== null
   })
 
   /**
@@ -248,26 +288,36 @@ export const useColorCustomization = () => {
 
     // Solo aplicar colores si hay colores personalizados guardados
     const theme = isDark.value ? 'dark' : 'light'
-    if (customColors.value[theme]) {
-      applyCustomColor(customColors.value[theme], isDark.value)
+    const colors = customColors.value[theme]
+    if (colors.primary || colors.foreground || colors.background) {
+      applyCustomColors(
+        colors.primary || undefined,
+        colors.foreground || undefined,
+        colors.background || undefined
+      )
     }
 
     // Observar cambios en el modo de color
     watch(isDark, (newIsDark) => {
       const theme = newIsDark ? 'dark' : 'light'
-      // Solo aplicar si hay color personalizado para este tema
-      if (customColors.value[theme]) {
-        applyCustomColor(customColors.value[theme], newIsDark)
+      const colors = customColors.value[theme]
+      // Solo aplicar si hay colores personalizados para este tema
+      if (colors.primary || colors.foreground || colors.background) {
+        applyCustomColors(
+          colors.primary || undefined,
+          colors.foreground || undefined,
+          colors.background || undefined
+        )
       }
     })
   }
 
   return {
     customColors: readonly(customColors),
-    getCurrentColor,
-    hasCustomColor,
-    setCustomColor,
-    resetColor,
+    getCurrentColors,
+    hasCustomColors,
+    setCustomColors,
+    resetColors,
     inicializar,
   }
 }