---
title: "Colors"
type: guide
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Frutjam color system built on semantic tokens. WCAG AA/AAA compliant, dark mode aware, CSS custom properties, Tailwind CSS v4 compatible."
url: https://frutjam.com/pl/docs/colors
---

# Color System

 Frutjam wykorzystuje niestandardowe właściwości CSS jako tokeny projektu dla wszystkich kolorów. Każdy kolor jest zdefiniowany dla motywu i automatycznie współpracuje z klasami narzędzi CSS Tailwind — nie jest wymagana dodatkowa konfiguracja. Tylko CSS, nie wymaga JavaScript. Kontrast WCAG AA gwarantowany dla każdej pary kolorów, współpracuje z Django, HTMX, Laravel, React i dowolnym projektem Tailwind CSS v4.

## Nazwy kolorów

Frutjam definiuje następujące semantyczne role kolorów. Każdy kolor ma pasujący token `on-{color}` dla dostępnego tekstu na pierwszym planie.

**Kontrast WCAG AA gwarantowany.** Każda para `on-{color}` jest ręcznie dostrajana w OKLCH, aby spełnić wymagania kontrastu WCAG AA. W przeciwieństwie do bibliotek, które automatycznie obliczają kolory pierwszego planu, Frutjam udostępnia jawne, zweryfikowane pary, dzięki czemu dostęp do komponentów jest zgodny z projektem, a nie przypadkowy.

| Kolor     | Znak                | Zamiar                               |
| --------- | ------------------- | ------------------------------------ |
| base      | `--color-base`      | Tło strony                           |
| neutral   | `--color-neutral`   | Powierzchnie, paski boczne, nakładki |
| primary   | `--color-primary`   | Podstawowy kolor marki               |
| secondary | `--color-secondary` | Kolor drugorzędny marki              |
| accent    | `--color-accent`    | Kolor akcentu/podkreślenia           |
| info      | `--color-info`      | Komunikaty informacyjne              |
| success   | `--color-success`   | Stany sukcesu                        |
| warning   | `--color-warning`   | Stany ostrzegawcze                   |
| error     | `--color-error`     | Stany błędne i destrukcyjne          |

## Zajęcia z użyteczności kolorów

Wszystkie kolory Frutjam współpracują z dowolnym narzędziem do tworzenia kolorów CSS Tailwind. Zastąp `{color}` dowolną nazwą koloru z powyższej tabeli.

| Klasa                 | Opis                           |
| --------------------- | ------------------------------ |
| `bg-{color}`          | Kolor tła                      |
| `text-{color}`        | Kolor tekstu                   |
| `border-{color}`      | Kolor obramowania              |
| `ring-{color}`        | Kolor pierścionka              |
| `outline-{color}`     | Kolor konturu                  |
| `shadow-{color}`      | Kolor cienia                   |
| `fill-{color}`        | Kolor wypełnienia SVG          |
| `stroke-{color}`      | Kolor obrysu SVG               |
| `decoration-{color}`  | Kolor dekoracji tekstu         |
| `caret-{color}`       | Wprowadź kolor karetki         |
| `placeholder-{color}` | Kolor tekstu zastępczego       |
| `divide-{color}`      | Kolor obramowania rozdzielacza |

```html
<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>
```

#### Modyfikator krycia

Kontroluj krycie kolorów za pomocą modyfikatora `/{value}`, tak jak w przypadku każdego koloru Tailwind.

```html
<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>
```

## Zmienne CSS motywu

Są to tokeny główne, które definiujesz podczas tworzenia niestandardowego motywu. Wszystkie inne żetony kolorów są obliczane automatycznie na ich podstawie.

| Zmienna CSS            | Opis                                       |
| ---------------------- | ------------------------------------------ |
| `--scheme-color`       | Schemat kolorów: `jasny` lub `ciemny`      |
| `--border-radius`      | Podstawowy promień obramowania komponentów |
| `--color-base`         | Kolor tła strony                           |
| `--color-on-base`      | Domyślny kolor tekstu na tle bazowym       |
| `--color-neutral`      | Neutralny kolor powierzchni                |
| `--color-on-neutral`   | Kolor tekstu na neutralnych powierzchniach |
| `--color-primary`      | Podstawowy kolor marki                     |
| `--color-on-primary`   | Kolor tekstu na tle podstawowym            |
| `--color-secondary`    | Kolor drugorzędny marki                    |
| `--color-on-secondary` | Kolor tekstu na tle wtórnym                |
| `--color-accent`       | Kolor akcentujący                          |
| `--color-on-accent`    | Kolor tekstu na akcentowanym tle           |
| `--color-info`         | Kolor informacji                           |
| `--color-on-info`      | Kolor tekstu na tłach informacyjnych       |
| `--color-success`      | Kolor sukcesu                              |
| `--color-on-success`   | Kolor tekstu na tle sukcesu                |
| `--color-warning`      | Kolor ostrzegawczy                         |
| `--color-on-warning`   | Kolor tekstu na tle ostrzeżeń              |
| `--color-error`        | Kolor błędu                                |
| `--color-on-error`     | Kolor tekstu na tle błędów                 |

## Obliczone tokeny kolorów

Frutjam automatycznie oblicza te tokeny na podstawie zmiennych motywu głównego — nie ustawia się ich ręcznie. Są one dostępne do użycia w niestandardowym CSS.

### Skala (50–950)

Każdy kolor generuje pełną 11-stopniową skalę odcienia. Zamień `{color}` na dowolną nazwę koloru.

| Zmienna CSS           | Opis                                          |
| --------------------- | --------------------------------------------- |
| `--color-{color}-50`  | Najjaśniejszy odcień (mieszanka kolorów 4%)   |
| `--color-{color}-100` | Bardzo jasny odcień                           |
| `--color-{color}-200` | Lekki odcień                                  |
| `--color-{color}-300` | Odcień średnio jasny                          |
| `--color-{color}-400` | Lekki odcień                                  |
| `--color-{color}-500` | Kolor bazowy (taki sam jak `--color-{color}`) |
| `--color-{color}-600` | Lekki cień                                    |
| `--color-{color}-700` | Średni odcień                                 |
| `--color-{color}-800` | Ciemny odcień                                 |
| `--color-{color}-900` | Bardzo ciemny odcień                          |
| `--color-{color}-950` | Najciemniejszy odcień                         |

### Miękkie & Aktywny

Warianty świadome stanu elementów interaktywnych, automatycznie dostosowujące się do jasnych i ciemnych motywów.

| Zmienna CSS               | Opis                                                                                 |
| ------------------------- | ------------------------------------------------------------------------------------ |
| `--color-{color}-soft`    | Subtelnie przyciemnione tło dla miękkich wariantów                                   |
| `--color-on-{color}-soft` | Kolor tekstu do stosowania na miękkim tle                                            |
| `--color-{color}-active`  | Przyciemniony/rozjaśniony odcień dla stanów najechania i aktywności                  |
| `--color-body`            | Obliczony kolor tekstu podstawowego (nieznacznie złagodzony w stosunku do `w bazie`) |

## Przykład niestandardowego motywu

Zastąp tokeny root, aby utworzyć niestandardowy motyw. Frutjam automatycznie oblicza wszystkie skale i stany.

```css
@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);
}
```