Desenvolvedores
src_
app_
(payload)
custom.scss

Estrutura do Arquivo 🏗️

Variáveis Globais 🌍

As variáveis CSS são definidas no escopo :root, o que permite que sejam acessíveis globalmente em toda a aplicação.

:root {
  /* Variáveis Temáticas */
  --theme-bg: var(--theme-elevation-0);
  --theme-input-bg: var(--theme-elevation-0);
  --theme-text: var(--theme-elevation-800);
  --theme-overlay: rgba(5, 5, 5, 0.5);
 
  /* Fontes */
  --font-body: 'Montserrat', sans-serif;
  --font-mono: monospace;
  --font-serif: Georgia, serif;
 
  /* Raio de Bordas */
  --style-radius-s: 4px;
  --style-radius-m: 8px;
  --style-radius-l: 16px;
 
  /* Largura da Barra de Navegação */
  --nav-width: 275px;
 
  /* Tons de Cor Base */
  --color-base-0: #ffffff;
  --color-base-50: #f0f1f3;
  --color-base-100: #e0e3e8;
  ...
  --color-base-950: #0b131e;
 
  /* Cores de Sucesso */
  --color-success-0: #ffffff;
  --color-success-50: #f0fbf6;
  ...
  --color-success-950: #0f4329;
 
  /* Cores de Aviso */
  --color-warning-0: #ffffff;
  --color-warning-50: #fff9ed;
  ...
  --color-warning-950: #583b00;
 
  /* Cores de Erro */
  --color-error-0: #ffffff;
  --color-error-50: #fdf1ee;
  ...
  --color-error-950: #4d1002;
 
  /* Cores de Acento */
  --color-accent-0: #ffffff;
  --color-accent-50: #fbedef;
  ...
  --color-accent-950: #460007;
 
  /* Cores Acentuadas do Tema */
  --theme-accent-0: var(--color-accent-0);
  ...
  --theme-accent-1000: var(--color-accent-1000);
}

Explicação 🌈

  • Cores Temáticas 🌿: Variáveis como --theme-bg, --theme-input-bg, e --theme-text controlam o plano de fundo, campos de entrada e cores de texto, permitindo a personalização eficiente do tema.
  • Cores Base 🌍: Variáveis como --color-base-0 até --color-base-950 definem diferentes tons de cores base, permitindo criar contrastes suaves.
  • Cores de Feedback ⚡: Variáveis para estados de sucesso (--color-success), aviso (--color-warning), erro (--color-error), e acentos (--color-accent), criando feedback visual imediato.

Variáveis de Estilo 💅

  • Fontes ✍️: Variáveis como --font-body, --font-mono, e --font-serif definem as fontes usadas globalmente para uma aparência mais consistente.
  • Raio de Bordas 🎯: Variáveis como --style-radius-s, --style-radius-m, e --style-radius-l controlam o arredondamento das bordas, criando elementos com uma aparência mais suave.
  • Largura da Navegação ⬅️: A variável --nav-width define a largura da barra de navegação lateral, ajustando o layout da página.

Tema Escuro 🌙

Quando a página usa o tema escuro, as variáveis de cor são alteradas, com as cores de fundo e texto sendo invertidas, mantendo um contraste adequado para uma melhor leitura.

html[data-theme='dark'] {
  --theme-bg: var(--color-base-950);
  --theme-text: var(--color-base-0);
  --theme-accent-0: var(--color-accent-950);
}

Notas ⚠️

  • Flexibilidade do Tema: O uso de variáveis CSS permite um ajuste rápido do tema visual, permitindo alternar entre temas claros e escuros facilmente.
  • Consistência no Design: O uso de variáveis garante um design coeso e de fácil manutenção em toda a aplicação.
  • Feedback Visual: O conjunto de cores de sucesso, aviso, erro e acentos facilita a comunicação visual com o usuário, melhorando a experiência do mesmo.

Aviso ⚠️:
Este arquivo contém configurações essenciais para o tema visual da aplicação. Alterações devem ser feitas com cautela para garantir que o design continue consistente.

page.jslayout.tsx