Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Konfiguracja

Ostatnia aktualizacja:

Skonfiguruj wtyczkę Tailwind CSS obsługującą wyłącznie Frutjam CSS. Ustaw domyślne motywy, zdefiniuj niestandardowe tokeny kolorów, przełącz system przedrostków - nie jest wymagana żadna obsługa JavaScript. Domyślne ustawienia dostępne w WCAG, działają z Django, HTMX, Laravel i dowolnym frameworkiem.

Skonfiguruj wtyczkę Tailwind CSS obsługującą wyłącznie Frutjam CSS, aby pasowała do Twojego projektu. Ustawiaj motywy, definiuj niestandardowe tokeny kolorów, przełączaj system przedrostków i wybieraj komponenty — nie jest wymagana żadna obsługa JavaScript. Dostępne ustawienia domyślne WCAG AA. Współpracuje z Django, HTMX, Laravel, React i dowolnym projektem Tailwind CSS v4.

Konfiguracja podstawowa

Dodaj Frutjam do swojego pliku CSS za pomocą dyrektywy @plugin. Nie są wymagane żadne opcje — wszystko działa od razu po wyjęciu z pudełka.

css 
1
2
@import "tailwindcss";
@plugin "frutjam";

Opcje wtyczki

Dostosuj Frutjam, przekazując opcje w bloku @plugin:

css 
1
2
3
4
5
6
7
8
9
@import "tailwindcss";
@plugin "frutjam" {
  prefix: fj;
  reset: true;
  root: :host;
  include: button, card, alert;
  /* or: */
  exclude: table, timeline;
}

prefiks

Dodaje przedrostek do wszystkich nazw klas Frutjam, aby uniknąć konfliktów z własnym CSS.

css 
1
2
3
@plugin "frutjam" {
  prefix: fj;
}
html 
<button class="fj-btn fj-btn-primary">Send mail</button>

Zachowanie prefiksu zależy od tego, czy używasz także opcji prefix() Tailwinda:

Tylko przedrostek Frutjam

Nazwy klas Frutjam są poprzedzone prefiksem. Używaj ich bezpośrednio w kodzie HTML.

css 
1
2
3
4
@import "tailwindcss";
@plugin "frutjam" {
  prefix: fj;
}
html 
<button class="fj-btn">Button</button>

Tylko przedrostek wiatru tylnego

prefix() Tailwinda działa jako wariant — wszystkie narzędzia (w tym Frutjam) wymagają prefiksu jako selektora wariantu w HTML.

css 
1
2
@import "tailwindcss" prefix(tw);
@plugin "frutjam";
html 
<button class="tw:btn">Button</button>

Oba przedrostki

Frutjam zmienia nazwy swoich klas (np. fj-btn), a na górze wymagany jest przedrostek wariantu Tailwinda.

css 
1
2
3
4
@import "tailwindcss" prefix(tw);
@plugin "frutjam" {
  prefix: fj;
}
html 
<button class="tw:fj-btn">Button</button>

nastawić

Kontroluje, czy Frutjam wprowadza resetowanie elementów podstawowych (styl ponownego uruchomienia). Domyślnie true.

Kiedy true, Frutjam resetuje model pudełka, typografię, listy, multimedia i elementy formularzy — podobnie jak w przypadku wstępnej inspekcji Tailwind. Gdy false, wstrzykiwane są tylko tokeny zmiennych CSS; style elementów surowych są całkowicie pomijane.

Ustaw na false, jeśli używasz już innego frameworka CSS (Bootstrap, Bulma itp.) lub własnego resetu, aby uniknąć konfliktów na elementach takich jak *, html, body, h1-h6 i button.

css 
1
2
3
@plugin "frutjam" {
  reset: false;
}

źródło

Selektor CSS, w którym Frutjam rejestruje zmienne tokenu projektu (--color-primary, --color-base itp.). Domyślnie jest to :root.

Istnieją trzy przydatne wartości:

WartośćKiedy używać
:rootDomyślny. Tokeny są dostępne globalnie na całej stronie.
:hostShadow DOM / komponenty sieciowe. Tokeny zakresów wewnątrz komponentu, aby nie wyciekały.
Dowolny selektor (np. #app)Zakres tokenów do określonego elementu otoki. Przydatne, gdy Frutjam współistnieje z innym frameworkiem na tej samej stronie.

Domyślnie — tokeny globalne

css 
1
2
3
@plugin "frutjam" {
  root: :root;
}

Shadow DOM / komponenty sieciowe

css 
1
2
3
@plugin "frutjam" {
  root: :host;
}

Zasięg do elementu opakowania

Jeśli inny framework kontroluje już :root (np. Bootstrap ustawia własne zmienne --bs-* i kolory treści), zamiast tego wskaż Frutjamowi element kontenera. Spowoduje to przeniesienie color, background-color i wszystkich zmiennych CSS z :root, tak aby miały one zastosowanie tylko wewnątrz tego opakowania.

css 
1
2
3
4
5
@plugin "frutjam" {
  prefix: fj;
  reset: false;
  root: #my-app;
}
html 
1
2
3
4
<div id="my-app" data-theme="blueberry">
  <!-- Frutjam components here, Bootstrap outside -->
  <button class="fj-btn fj-btn-primary">Send</button>
</div>

włączać

Załaduj tylko określone komponenty zamiast pełnej biblioteki. Przydatne do zmniejszania wielkości wyjściowej w produkcji.

css 
1
2
3
@plugin "frutjam" {
  include: button, card, alert, badge;
}

wykluczać

Załaduj wszystkie komponenty oprócz wymienionych. Użyj, gdy chcesz usunąć tylko kilka komponentów z pełnej kompilacji.

css 
1
2
3
@plugin "frutjam" {
  exclude: table, timeline, chat;
}

Utwórz niestandardowy motyw

Aby stworzyć własny motyw, po prostu przypisz wartości kolorów do podanych zmiennych CSS w selektorze [data-theme="nazwa-motywu"]

1. The "Automatic" Approach (Minimal)

W tej wersji pomijamy zmienne --color-on-*. Frutjam wykrywa brakujące zmienne i oblicza optymalny kolor tekstu — zwykle przełączając pomiędzy bardzo jasną lub bardzo ciemną wartością OKLCH — aby mieć pewność, że komponent pozostanie dostępny i czytelny.

css 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@layer theme {
    :is([data-theme="your-theme-name"]) {
        --scheme-color: light;
        --border-radius: 0.25rem;
        --color-base: oklch(1 0 0);
        --color-neutral: oklch(0.15 0 0);
        --color-primary: oklch(51.1% 0.262 276.966);
        --color-secondary: oklch(0.591 0.293 322.896);
        --color-accent: oklch(0.541 0.281 293.009);
        --color-info: oklch(0.685 0.169 237.323);
        --color-success: oklch(0.792 0.209 151.711);
        --color-warning: oklch(0.852 0.199 91.936);
        --color-error: oklch(0.577 0.245 27.325);
    }
}

2. The "Manual" Approach (Full Control)

W tej wersji wyraźnie definiujemy zmienne --color-on-*. Jest to idealne rozwiązanie, jeśli masz określone wytyczne dotyczące marki (np. użycie przyciemnionego odcienia złamanej bieli zamiast czystej bieli) lub gdy chcesz uzyskać określony „klimat”, np. wyrafinowany wygląd o niskim kontraście, który mimo to przechodzi kontrolę dostępności.

css 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@layer theme {
    :is([data-theme="your-theme-name"]) {
        --scheme-color: light;
        --border-radius: 0.25rem;
        --color-base: oklch(1 0 0);
        --color-on-base:oklch(0.22 0 0);
        --color-neutral: oklch(0.15 0 0);
        --color-on-neutral: oklch(1 0 0);
        --color-primary: oklch(51.1% 0.262 276.966);
        --color-on-primary: oklch(96.2% 0.018 272.314);
        --color-secondary: oklch(0.591 0.293 322.896);
        --color-on-secondary: oklch(1 0 0);
        --color-accent: oklch(0.541 0.281 293.009);
        --color-on-accent: oklch(1 0 0);
        --color-info: oklch(0.685 0.169 237.323);
        --color-on-info: oklch(0.15 0 0);
        --color-success: oklch(0.792 0.209 151.711);
        --color-on-success: oklch(0.15 0 0);
        --color-warning: oklch(0.852 0.199 91.936);
        --color-on-warning: oklch(0.15 0 0);
        --color-error: oklch(0.577 0.245 27.325);
        --color-on-error: oklch(1 0 0);
    }
}

Aby zastosować niestandardowy motyw do projektu w kodzie HTML, użyj data-theme="nazwa-twojego-motywu" do elementu HTML.

html 
1
2
3
<html data-theme="your-theme-name">
 ...
</html>

Motywy można zagnieżdżać — możesz zastosować konkretny motyw do dowolnej sekcji kodu HTML, zastępując motyw globalny dla tego obszaru.

html 
1
2
3
4
5
6
7
8
<html data-theme="light">
  <div data-theme="dark">
    This div uses the dark theme.
    <span data-theme="your-custom-theme">
      This span uses the your-custom-theme
    </span>
  </div>
</html>

Dalsze czytanie