Lucas Rayan
8a52e79d21
- Introduced DESIGN.md to outline rules for maintaining consistent light and dark themes, including color scales, symmetry rules, and contrast requirements. - Added PinRestrictions component to display pin usage restrictions based on series data, ensuring accurate representation of pin functionalities. - Implemented auditing script (auditar-temas.mjs) to check for theme consistency issues, including nonexistent tones, inverted pairs, low contrast, and inline fixed colors.
76 lines
2.4 KiB
CSS
76 lines
2.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
--font-sans: var(--font-inter), ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
--font-display: var(--font-outfit), ui-sans-serif, system-ui, -apple-system, sans-serif;
|
|
|
|
/* Premium dark mode palette accents */
|
|
--color-brand-purple: #8b5cf6;
|
|
--color-brand-blue: #3b82f6;
|
|
--color-brand-pink: #ec4899;
|
|
|
|
/* ---------------------------------------------------------------------
|
|
Meios-tons de slate.
|
|
|
|
A escala do Tailwind anda de 100 em 100 (50, 100, 200 ... 950), então
|
|
classes como text-slate-350 ou border-slate-850 — usadas em ~190 pontos
|
|
do projeto — não geravam CSS nenhum: o elemento herdava a cor do pai e
|
|
ficava diferente em cada tema, sem padrão.
|
|
|
|
Cada valor abaixo é o ponto médio exato entre os dois degraus oficiais
|
|
vizinhos, então a intenção original de cada classe é preservada.
|
|
--------------------------------------------------------------------- */
|
|
--color-slate-150: #eaeef4; /* entre 100 e 200 */
|
|
--color-slate-250: #d6dee8; /* entre 200 e 300 */
|
|
--color-slate-350: #b0bccc; /* entre 300 e 400 */
|
|
--color-slate-450: #7c8ca2; /* entre 400 e 500 */
|
|
--color-slate-550: #56647a; /* entre 500 e 600 */
|
|
--color-slate-650: #3d4b5f; /* entre 600 e 700 */
|
|
--color-slate-750: #283548; /* entre 700 e 800 */
|
|
--color-slate-850: #162032; /* entre 800 e 900 */
|
|
}
|
|
|
|
/* Enable class-based dark mode selector in Tailwind v4 */
|
|
@variant dark (&:where(.dark, .dark *));
|
|
|
|
@layer base {
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
@apply bg-slate-50 text-slate-900 transition-colors duration-300;
|
|
}
|
|
|
|
/* next-themes aplica a classe .dark no <html>, não no <body>.
|
|
O seletor body.dark nunca casava, então o fundo escuro do body vinha
|
|
só das classes utilitárias do layout. */
|
|
.dark body {
|
|
@apply bg-slate-950 text-slate-50;
|
|
}
|
|
|
|
/* Seleção de texto: o texto precisa de contraste contra o realce em cada
|
|
tema. Roxo claro sobre fundo claro era ilegível no tema claro. */
|
|
::selection {
|
|
@apply bg-purple-500/30 text-purple-950;
|
|
}
|
|
|
|
.dark ::selection {
|
|
@apply bg-purple-500/40 text-purple-50;
|
|
}
|
|
|
|
/* Scrollbar customization for a premium, non-default OS look */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
@apply bg-transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
@apply bg-slate-300 dark:bg-slate-800 rounded-full hover:bg-slate-400 dark:hover:bg-slate-700 transition-colors;
|
|
}
|
|
}
|