Update globals.css

This commit is contained in:
MacRimi
2025-10-23 19:34:30 +02:00
parent 4274c817d3
commit a1e3e12c6b

View File

@@ -150,56 +150,42 @@
--color-sidebar-ring: var(--sidebar-ring); --color-sidebar-ring: var(--sidebar-ring);
} }
@layer base { /* Removed @layer directives for Tailwind v4 compatibility */
* { /* Base styles without @layer wrapper */
@apply border-border outline-ring/50; * {
} border-color: var(--border);
body { outline-color: color-mix(in oklch, var(--ring) 50%, transparent);
@apply bg-background text-foreground;
}
} }
/* ===================== */ body {
/* Base layer */ background-color: var(--background);
/* ===================== */ color: var(--foreground);
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
/* Foco accesible */
:is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
@apply outline-none;
}
:is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
@apply ring-2;
--tw-ring-color: var(--ring);
--tw-ring-opacity: 0.5; /* equivalente al /50 */
}
} }
/* ===================== */ /* Accessible focus styles */
/* Ajustes para Charts */ :is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus {
/* ===================== */ outline: none;
@layer components { }
/* Recharts axis */
.recharts-cartesian-axis-tick tspan { :is(button, [role="button"], a, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
fill: var(--muted-foreground); outline: 2px solid color-mix(in oklch, var(--ring) 50%, transparent);
} outline-offset: 2px;
.recharts-cartesian-axis-line, }
.recharts-cartesian-grid line {
stroke: var(--border); /* Chart component styles */
} .recharts-cartesian-axis-tick tspan {
fill: var(--muted-foreground);
/* Chart.js axis */ }
.chartjs-render-monitor text {
fill: var(--muted-foreground); .recharts-cartesian-axis-line,
} .recharts-cartesian-grid line {
.chartjs-render-monitor line { stroke: var(--border);
stroke: var(--border); }
}
.chartjs-render-monitor text {
fill: var(--muted-foreground);
}
.chartjs-render-monitor line {
stroke: var(--border);
} }