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ários CSS do Tailwind – sem necessidade de configuração extra. Somente CSS, sem necessidade de JavaScript. Contraste WCAG AA garantido em todos os pares 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 possui um token on-{color} correspondente para texto acessível em primeiro plano.

Classes de utilitários de cores

Todas as cores Frutjam funcionam com qualquer utilitário de cores Tailwind CSS. Substitua {color} por qualquer nome de cor da tabela acima.

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 modificador /{value}, 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>

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.

Tokens de cores computados

O Frutjam calcula automaticamente esses tokens a partir das variáveis ​​do tema raiz — você não os define manualmente. Eles estão disponíveis para uso em CSS personalizado.

Escala (50–950)

Cada cor gera uma escala completa de matiz/sombra de 11 etapas. Substitua {color} por qualquer nome de cor.

Suave e macio. Ativo

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

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);
}