nucleo000/analiticaNucleo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Reemplazar colores hardcodeados por variables del sistema de temas
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 48s
Details

Browse Source 
- Agregadas nuevas variables CSS --brand-cosecha-2, --brand-cosecha-3, --brand-cosecha-4 para gráficas
- Reemplazado --brand-bg-secondary (no existía) por --brand-surface en todos los componentes
- Actualizados arrays de colores en componentes de comparativa de cosechas
- Eliminados colores RGB/hex hardcodeados en tooltips y badges
- Todos los componentes ahora respetan el sistema de temas dinámico
This commit is contained in:
josedario87
2025-10-31 10:56:01 -06:00
parent 5e17839db7
commit fcb321887c
9 changed files with 33 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
nuxt4-app/app/assets/css/main.css
View File

@@ -29,6 +29,11 @@
--brand-text: #fef9f0; --brand-text: #fef9f0;
--brand-text-muted: #d8c7a6; --brand-text-muted: #d8c7a6;
/* Colores intermedios para gráficas de cosechas */
--brand-cosecha-2: #8b6f47; /* Tono café intermedio 1 */
--brand-cosecha-3: #a0826e; /* Tono café intermedio 2 */
--brand-cosecha-4: #b89968; /* Tono café intermedio 3 */
/* Colores para tipos de café */ /* Colores para tipos de café */
--coffee-uva: #a855f7; /* Purple - Café Uva */ --coffee-uva: #a855f7; /* Purple - Café Uva */
--coffee-oreado: #f97316; /* Orange - Café Oreado */ --coffee-oreado: #f97316; /* Orange - Café Oreado */

10
nuxt4-app/app/components/comparativa/CosechasEvolucion.vue
View File

@@ -14,7 +14,7 @@
class="px-3 py-1 rounded text-xs transition-all" class="px-3 py-1 rounded text-xs transition-all"
:class="metrica === 'acumulado' :class="metrica === 'acumulado'
? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]' ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
: 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'" : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
> >
Acumulado Acumulado
</button> </button>
@@ -23,7 +23,7 @@
class="px-3 py-1 rounded text-xs transition-all" class="px-3 py-1 rounded text-xs transition-all"
:class="metrica === 'diario' :class="metrica === 'diario'
? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]' ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
: 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'" : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
> >
Diario Diario
</button> </button>
@@ -36,7 +36,7 @@
class="px-3 py-1 rounded text-xs transition-all" class="px-3 py-1 rounded text-xs transition-all"
:class="tipoSeleccionado === 'todos' :class="tipoSeleccionado === 'todos'
? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]' ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
: 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'" : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
> >
Todos Todos
</button> </button>
@@ -47,7 +47,7 @@
class="px-3 py-1 rounded text-xs transition-all capitalize" class="px-3 py-1 rounded text-xs transition-all capitalize"
:class="tipoSeleccionado === tipo :class="tipoSeleccionado === tipo
? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]' ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
: 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'" : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
> >
{{ tipo }} {{ tipo }}
</button> </button>
@@ -182,7 +182,7 @@ const cosechasDisponibles = inject<any[]>('cosechasDisponibles', [])
// Obtener configuración de estilos // Obtener configuración de estilos
const estilosGraficas = inject<any>('estilosGraficas', ref({ const estilosGraficas = inject<any>('estilosGraficas', ref({
coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', '#8b6f47', '#a0826e', '#b89968', 'var(--brand-accent)'] coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', 'var(--brand-cosecha-2)', 'var(--brand-cosecha-3)', 'var(--brand-cosecha-4)', 'var(--brand-accent)']
})) }))
// Dimensiones del SVG // Dimensiones del SVG

35
nuxt4-app/app/components/comparativa/CosechasHeatmap.vue
View File

@@ -14,7 +14,7 @@
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<!-- Controles de Zoom --> <!-- Controles de Zoom -->
<div <div
class="flex items-center gap-1 px-2 py-1 rounded-lg border border-[var(--brand-border)] bg-[var(--brand-bg-secondary)]" class="flex items-center gap-1 px-2 py-1 rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)]"
title="También puedes usar Ctrl+Rueda del mouse para zoom" title="También puedes usar Ctrl+Rueda del mouse para zoom"
> >
<UButton <UButton
@@ -67,7 +67,7 @@
class="px-3 py-1 rounded text-xs transition-all" class="px-3 py-1 rounded text-xs transition-all"
:class="vistaMode === 'heatmap' :class="vistaMode === 'heatmap'
? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]' ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
: 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'" : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
> >
Heatmap Heatmap
</button> </button>
@@ -76,7 +76,7 @@
class="px-3 py-1 rounded text-xs transition-all" class="px-3 py-1 rounded text-xs transition-all"
:class="vistaMode === 'barras' :class="vistaMode === 'barras'
? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]' ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
: 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'" : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
> >
Barras Barras
</button> </button>
@@ -127,7 +127,7 @@
class="px-3 py-1 rounded text-xs transition-all" class="px-3 py-1 rounded text-xs transition-all"
:class="metrica === 'total_peso_seco' :class="metrica === 'total_peso_seco'
? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]' ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
: 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'" : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
> >
Peso Seco (qq) Peso Seco (qq)
</button> </button>
@@ -136,7 +136,7 @@
class="px-3 py-1 rounded text-xs transition-all" class="px-3 py-1 rounded text-xs transition-all"
:class="metrica === 'peso_neto_uva' :class="metrica === 'peso_neto_uva'
? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]' ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
: 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'" : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
> >
Peso Neto Uva (qq) Peso Neto Uva (qq)
</button> </button>
@@ -145,7 +145,7 @@
class="px-3 py-1 rounded text-xs transition-all" class="px-3 py-1 rounded text-xs transition-all"
:class="metrica === 'peso_neto_verde' :class="metrica === 'peso_neto_verde'
? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]' ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
: 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'" : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
> >
Peso Neto Verde (qq) Peso Neto Verde (qq)
</button> </button>
@@ -154,7 +154,7 @@
class="px-3 py-1 rounded text-xs transition-all" class="px-3 py-1 rounded text-xs transition-all"
:class="metrica === 'sacos_total_dia' :class="metrica === 'sacos_total_dia'
? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]' ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
: 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'" : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
> >
Sacos Total Sacos Total
</button> </button>
@@ -163,7 +163,7 @@
class="px-3 py-1 rounded text-xs transition-all" class="px-3 py-1 rounded text-xs transition-all"
:class="metrica === 'total_lempiras_uva' :class="metrica === 'total_lempiras_uva'
? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]' ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
: 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'" : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
> >
Lempiras Uva Lempiras Uva
</button> </button>
@@ -172,7 +172,7 @@
class="px-3 py-1 rounded text-xs transition-all" class="px-3 py-1 rounded text-xs transition-all"
:class="metrica === 'total_lempiras_verde' :class="metrica === 'total_lempiras_verde'
? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]' ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
: 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'" : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
> >
Lempiras Verde Lempiras Verde
</button> </button>
@@ -181,7 +181,7 @@
class="px-3 py-1 rounded text-xs transition-all" class="px-3 py-1 rounded text-xs transition-all"
:class="metrica === 'total_lempiras_mojado_oreado' :class="metrica === 'total_lempiras_mojado_oreado'
? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]' ? 'bg-[var(--brand-primary-strong)] text-[var(--brand-bg)]'
: 'bg-[var(--brand-bg-secondary)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'" : 'bg-[var(--brand-surface)] text-[var(--brand-text-muted)] hover:text-[var(--brand-text)]'"
> >
Lempiras Mojado+Oreado Lempiras Mojado+Oreado
</button> </button>
@@ -195,7 +195,7 @@
<!-- Vista Heatmap --> <!-- Vista Heatmap -->
<template v-if="vistaMode === 'heatmap'"> <template v-if="vistaMode === 'heatmap'">
<!-- Leyenda de totales --> <!-- Leyenda de totales -->
<div class="flex items-center gap-3 mb-3 px-2 py-2 rounded-lg bg-[var(--brand-bg-secondary)]/50 border border-[var(--brand-border)]/30"> <div class="flex items-center gap-3 mb-3 px-2 py-2 rounded-lg bg-[var(--brand-surface)]/50 border border-[var(--brand-border)]/30">
<span class="text-[10px] text-[var(--brand-text-muted)] uppercase font-semibold">Leyenda:</span> <span class="text-[10px] text-[var(--brand-text-muted)] uppercase font-semibold">Leyenda:</span>
<div class="flex items-center gap-1.5"> <div class="flex items-center gap-1.5">
<div class="w-2 h-2 rounded-full bg-[var(--brand-primary-strong)]"></div> <div class="w-2 h-2 rounded-full bg-[var(--brand-primary-strong)]"></div>
@@ -213,7 +213,7 @@
<div <div
v-for="(cosecha, index) in datosCosechas" v-for="(cosecha, index) in datosCosechas"
:key="cosecha.id" :key="cosecha.id"
class="flex flex-col items-center gap-1 p-2 rounded-lg bg-[var(--brand-bg-secondary)]" class="flex flex-col items-center gap-1 p-2 rounded-lg bg-[var(--brand-surface)]"
:style="{ width: `${cellWidth}px` }" :style="{ width: `${cellWidth}px` }"
> >
<div class="text-xs font-semibold text-[var(--brand-text)]"> <div class="text-xs font-semibold text-[var(--brand-text)]">
@@ -311,7 +311,7 @@
<!-- Vista Barras --> <!-- Vista Barras -->
<template v-else-if="vistaMode === 'barras'"> <template v-else-if="vistaMode === 'barras'">
<!-- Leyenda de totales --> <!-- Leyenda de totales -->
<div class="flex items-center gap-3 mb-3 px-2 py-2 rounded-lg bg-[var(--brand-bg-secondary)]/50 border border-[var(--brand-border)]/30"> <div class="flex items-center gap-3 mb-3 px-2 py-2 rounded-lg bg-[var(--brand-surface)]/50 border border-[var(--brand-border)]/30">
<span class="text-[10px] text-[var(--brand-text-muted)] uppercase font-semibold">Leyenda:</span> <span class="text-[10px] text-[var(--brand-text-muted)] uppercase font-semibold">Leyenda:</span>
<div class="flex items-center gap-1.5"> <div class="flex items-center gap-1.5">
<div class="w-2 h-2 rounded-full bg-[var(--brand-primary-strong)]"></div> <div class="w-2 h-2 rounded-full bg-[var(--brand-primary-strong)]"></div>
@@ -329,7 +329,7 @@
<div <div
v-for="(cosecha, index) in datosCosechas" v-for="(cosecha, index) in datosCosechas"
:key="cosecha.id" :key="cosecha.id"
class="flex flex-col items-center gap-1 p-2 rounded-lg bg-[var(--brand-bg-secondary)]" class="flex flex-col items-center gap-1 p-2 rounded-lg bg-[var(--brand-surface)]"
:style="{ width: `${barMaxWidth}px` }" :style="{ width: `${barMaxWidth}px` }"
> >
<div class="text-xs font-semibold" :style="{ color: getCosechaColor(cosecha.id) }"> <div class="text-xs font-semibold" :style="{ color: getCosechaColor(cosecha.id) }">
@@ -430,11 +430,10 @@
<div <div
v-if="tooltipVisible" v-if="tooltipVisible"
class="fixed z-50 px-3 py-2 text-xs rounded-lg border pointer-events-none shadow-lg opacity-100" class="fixed z-50 px-3 py-2 text-xs rounded-lg border pointer-events-none shadow-lg opacity-100"
:class="'bg-[var(--brand-bg-secondary)] border-[var(--brand-border)] text-[var(--brand-text)]'" :class="'bg-[var(--brand-surface)] border-[var(--brand-border)] text-[var(--brand-text)]'"
:style="{ :style="{
left: `${tooltipX}px`, left: `${tooltipX}px`,
top: `${tooltipY}px`, top: `${tooltipY}px`,
backgroundColor: 'rgb(29, 26, 19)',
opacity: 1 opacity: 1
}" }"
> >
@@ -499,7 +498,7 @@
<div <div
v-for="(cosecha, index) in datosCosechas" v-for="(cosecha, index) in datosCosechas"
:key="`comp-${cosecha.id}`" :key="`comp-${cosecha.id}`"
class="flex flex-col gap-2 p-4 rounded-lg border border-[var(--brand-border)] bg-[var(--brand-bg-secondary)]" class="flex flex-col gap-2 p-4 rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)]"
> >
<!-- Header de la cosecha --> <!-- Header de la cosecha -->
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
@@ -577,7 +576,7 @@ const cosechasDisponibles = inject<any[]>('cosechasDisponibles', [])
// Obtener configuración de estilos // Obtener configuración de estilos
const estilosGraficas = inject<any>('estilosGraficas', ref({ const estilosGraficas = inject<any>('estilosGraficas', ref({
coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', '#8b6f47', '#a0826e', '#b89968', 'var(--brand-accent)'], coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', 'var(--brand-cosecha-2)', 'var(--brand-cosecha-3)', 'var(--brand-cosecha-4)', 'var(--brand-accent)'],
anchoCelda: 80, anchoCelda: 80,
altoCelda: 6, altoCelda: 6,
anchoMaxBarra: 300, anchoMaxBarra: 300,

2
nuxt4-app/app/components/comparativa/CosechasPorTipo.vue
View File

@@ -190,7 +190,7 @@ const cosechasDisponibles = inject<any[]>('cosechasDisponibles', [])
// Obtener configuración de estilos // Obtener configuración de estilos
const estilosGraficas = inject<any>('estilosGraficas', ref({ const estilosGraficas = inject<any>('estilosGraficas', ref({
coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', '#8b6f47', '#a0826e', '#b89968', 'var(--brand-accent)'] coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', 'var(--brand-cosecha-2)', 'var(--brand-cosecha-3)', 'var(--brand-cosecha-4)', 'var(--brand-accent)']
})) }))
// Dimensiones del SVG // Dimensiones del SVG

2
nuxt4-app/app/components/comparativa/CosechasTotales.vue
View File

@@ -173,7 +173,7 @@ const cosechasDisponibles = inject<any[]>('cosechasDisponibles', [])
// Obtener configuración de estilos // Obtener configuración de estilos
const estilosGraficas = inject<any>('estilosGraficas', ref({ const estilosGraficas = inject<any>('estilosGraficas', ref({
coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', '#8b6f47', '#a0826e', '#b89968', 'var(--brand-accent)'] coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', 'var(--brand-cosecha-2)', 'var(--brand-cosecha-3)', 'var(--brand-cosecha-4)', 'var(--brand-accent)']
})) }))
// Dimensiones del SVG // Dimensiones del SVG

2
nuxt4-app/app/components/ingresos/TopClientes.vue
View File

@@ -109,7 +109,7 @@
<div <div
v-for="(item, index) in topClientes" v-for="(item, index) in topClientes"
:key="item.cliente.id" :key="item.cliente.id"
class="flex items-center gap-4 p-3 rounded-lg border border-[var(--brand-border)] bg-gradient-to-r from-[var(--brand-bg-secondary)] to-transparent hover:border-[var(--brand-primary)]/30 transition-all" class="flex items-center gap-4 p-3 rounded-lg border border-[var(--brand-border)] bg-gradient-to-r from-[var(--brand-surface)] to-transparent hover:border-[var(--brand-primary)]/30 transition-all"
> >
<!-- Ranking Badge --> <!-- Ranking Badge -->
<div <div

2
nuxt4-app/app/components/metabase/MetabaseCardDisplay.vue
View File

@@ -155,7 +155,7 @@
<!-- Empty State --> <!-- Empty State -->
<div v-if="!queryResult.data?.rows || queryResult.data.rows.length === 0" class="p-8 text-center rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)]"> <div v-if="!queryResult.data?.rows || queryResult.data.rows.length === 0" class="p-8 text-center rounded-lg border border-[var(--brand-border)] bg-[var(--brand-surface)]">
<div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-[#3a2a16] rounded-full"> <div class="mx-auto w-16 h-16 mb-4 flex items-center justify-center bg-[var(--brand-primary-strong)]/10 rounded-full">
<svg class="w-8 h-8 text-[var(--brand-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="w-8 h-8 text-[var(--brand-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
</svg> </svg>

2
nuxt4-app/app/pages/comparativa-cosechas.vue
View File

@@ -193,7 +193,7 @@ const cosechasDisponibles = ref([
// Configuración de estilos para las gráficas // Configuración de estilos para las gráficas
const estilosGraficas = ref({ const estilosGraficas = ref({
coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', '#8b6f47', '#a0826e', '#b89968', 'var(--brand-accent)'], coloresCosechas: ['var(--brand-primary-strong)', 'var(--brand-primary)', 'var(--brand-cosecha-2)', 'var(--brand-cosecha-3)', 'var(--brand-cosecha-4)', 'var(--brand-accent)'],
anchoCelda: 80, anchoCelda: 80,
altoCelda: 6, altoCelda: 6,
anchoMaxBarra: 300, anchoMaxBarra: 300,

2
nuxt4-app/app/pages/metabase-debug.vue
View File

@@ -82,7 +82,7 @@
root: 'space-y-4', root: 'space-y-4',
list: 'bg-[var(--brand-surface)]', list: 'bg-[var(--brand-surface)]',
indicator: 'bg-[var(--brand-primary-strong)] z-10', indicator: 'bg-[var(--brand-primary-strong)] z-10',
trigger: 'relative data-[state=active]:text-[var(--brand-bg)] data-[state=active]:hover:text-black data-[state=inactive]:text-[var(--brand-text-muted)] data-[state=inactive]:bg-transparent data-[state=inactive]:hover:text-[var(--brand-text)] data-[state=inactive]:hover:bg-[#2a1f14]/50 focus-visible:ring-2 focus-visible:ring-[var(--brand-primary-strong)] transition-colors duration-200', trigger: 'relative data-[state=active]:text-[var(--brand-bg)] data-[state=active]:hover:text-black data-[state=inactive]:text-[var(--brand-text-muted)] data-[state=inactive]:bg-transparent data-[state=inactive]:hover:text-[var(--brand-text)] data-[state=inactive]:hover:bg-[var(--brand-surface)]/50 focus-visible:ring-2 focus-visible:ring-[var(--brand-primary-strong)] transition-colors duration-200',
label: 'font-medium text-sm relative z-20', label: 'font-medium text-sm relative z-20',
leadingIcon: 'relative z-20 data-[state=active]:text-[var(--brand-bg)] data-[state=inactive]:text-[var(--brand-text-muted)] transition-colors duration-200', leadingIcon: 'relative z-20 data-[state=active]:text-[var(--brand-bg)] data-[state=inactive]:text-[var(--brand-text-muted)] transition-colors duration-200',
content: 'py-4' content: 'py-4'