Sistema de cores

O sistema de cores da Frutjam usa tokens CSS semânticos projetados para atender às taxas de contraste WCAG AA prontas para uso. Sem JavaScript, compatível com modo escuro, compatível com Tailwind CSS v4. Funciona com Django, HTMX, Laravel e qualquer pilha somente CSS.

Frutjam usa propriedades personalizadas CSS como tokens de design para todas as cores. Cada cor é definida por tema e funciona automaticamente com classes de utilitário CSS do Tailwind, sem necessidade de configuração extra. Somente CSS, sem necessidade de JavaScript. Contraste WCAG AA garantido em cada par de cores, funciona com Django, HTMX, Laravel, React e qualquer projeto Tailwind CSS v4.

Nomes de cores

Frutjam define os seguintes papéis semânticos de cores. Cada cor tem uma correspondência on-{color} token para texto acessível em primeiro plano.

Escala de cores (50–950)

Cada cor gera uma escala de 11 passos, calculada a partir das variáveis ​​do tema raiz com color-mix() no OKLCH e não no momento da construção. Defina uma cor de marca e todas as onze etapas decorrem dela, para que você nunca as defina manualmente.

Cada etapa é uma variável CSS e um utilitário Tailwind ao mesmo tempo: use var(--color-primary-700) em seu próprio CSS ou bg-primary-700 na marcação. Passe o mouse sobre uma amostra para ver os dois nomes.

Como as etapas são calculadas a partir do seu tema, e não codificadas, esta grade não é uma imagem das cores de Frutjam. São as suas cores. Mude o tema e cada amostra acima se moverá com ele, e é também por isso que não há valores hexadecimais impressos ao lado deles.

1
2
3

<div class="bg-primary-100 text-primary-900 p-4 rounded">Light tint, dark text</div>
<div class="bg-success-700 text-success-50 p-4 rounded">Dark shade, light text</div>
<div class="border-2 border-error-400 text-error-600 p-4 rounded">Border and text</div>

Classes de utilitários de cores

Todas as cores Frutjam funcionam com qualquer utilitário de cores Tailwind CSS. Substituir {color} com qualquer nome de cor da tabela acima, opcionalmente seguido por um passo da escala 50-950: bg-primary, bg-primary-100, text-error-900, border-success-300.

1
2
3

<div class="bg-primary text-on-primary p-4 rounded">Primary background</div>
<div class="bg-secondary text-on-secondary p-4 rounded">Secondary background</div>
<div class="border border-primary text-primary p-4 rounded">Primary border and text</div>

Modificador de opacidade

Controle a opacidade da cor com o /{value} modificador, assim como qualquer cor do Tailwind.

1
2
3

<div class="bg-primary/10 text-primary p-4 rounded">10% primary background</div>
<div class="bg-primary/20 text-primary p-4 rounded">20% primary background</div>
<div class="text-on-base/60 p-4">60% opacity text</div>

Suave e ativo

Variantes com reconhecimento de estado para elementos interativos, adaptando-se automaticamente a temas claros e escuros.

Variáveis ​​CSS do tema

Estes são os tokens raiz que você define ao criar um tema personalizado. Todos os outros tokens de cores são calculados automaticamente a partir deles.

Exemplo de tema personalizado

Substitua os tokens raiz para criar um tema personalizado. Frutjam calcula todas as escalas e estados automaticamente.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

@import "tailwindcss";
@plugin "frutjam";

[data-theme="mytheme"] {
  --scheme-color: light;
  --border-radius: 0.5rem;

  --color-base: oklch(98% 0 0);
  --color-on-base: oklch(15% 0 0);

  --color-neutral: oklch(20% 0 0);
  --color-on-neutral: oklch(98% 0 0);

  --color-primary: oklch(55% 0.25 260);
  --color-on-primary: oklch(98% 0 0);

  --color-secondary: oklch(60% 0.20 320);
  --color-on-secondary: oklch(98% 0 0);

  --color-accent: oklch(65% 0.22 180);
  --color-on-accent: oklch(15% 0 0);

  --color-info: oklch(68% 0.17 237);
  --color-on-info: oklch(15% 0 0);

  --color-success: oklch(75% 0.20 150);
  --color-on-success: oklch(15% 0 0);

  --color-warning: oklch(82% 0.19 90);
  --color-on-warning: oklch(15% 0 0);

  --color-error: oklch(58% 0.24 27);
  --color-on-error: oklch(98% 0 0);
}