Przejdź do treści
Skribly UI

Produkty Skribly

Motyw

System projektowy · wersja 0.1.0

Tokeny, CSS i komponenty React pod każdym ekranem Skribly

22 grup komponentów i 250 komponentów na React Aria, w motywie dziennym, nocnym i wysokiego kontrastu z jednego zestawu tokenów. Żaden komponent nie ma wbudowanych słów: każda etykieta to prop, więc każda aplikacja pisze własne.

Pierwsze krokiPrzeglądaj komponenty
Aa
  • accent
  • product
  • fg
  • muted
  • ok
  • danger

OpublikujZapisz szkic

Nowe

Zapisano minutę temu

Prawdziwe komponenty zestawu złożone jak wzornik pisma: krój nagłówków, tokeny kolorów, dwa przyciski, pole, przełącznik, plakietka, status i pasek postępu.
Motyw
Gęstość

Zobacz w działaniuLink do sekcji Zobacz w działaniu

Krótkie nagrania tej strony, z napisami. Odtwarzają się, gdy są na ekranie, i zatrzymują się, gdy animacje są wyłączone.

  • Motyw dzienny, nocny i wysokiego kontrastu

    Przełącznik motywu w nagłówku. Wybór obowiązuje też na skribly.pl i docs.skribly.pl.

  • Okno dialogowe

    Fokus przechodzi do komponentu Modal, zostaje w nim i po naciśnięciu Escape wraca na przycisk.

  • Sukces, ostrzeżenie i błąd

    Komunikaty Toast w trzech tonach, każdy z ikoną i słowem, a nie tylko z kolorem.

  • Paleta poleceń

    Wpisz, aby filtrować, strzałkami się poruszaj, Enterem uruchamiaj.

  • Formularz z błędami walidacji

    Wysłanie pustego formularza pokazuje wszystkie problemy naraz, a poprawienie pól je usuwa.

Trzy warstwy, jedno źródłoLink do sekcji Trzy warstwy, jedno źródło

Tokeny są źródłem: kolory, typografia, odstępy, zaokrąglenia i ruch, zapisane raz jako pliki tokenów W3C i zbudowane w zmienne CSS. Zmień token, a każda warstwa pójdzie za nim.

Klasy czystego CSS dają każdej stronie te same przyciski, pola, karty i komunikaty, bez kroku budowania i bez frameworka.

Komponenty React dodają zachowanie. React Aria zapewnia obsługę klawiatury, zarządzanie fokusem i semantykę dla czytników ekranu, a tokeny zapewniają wygląd.

  1. Warstwa 3: Komponenty React

    Komponenty na React Aria: obsługa klawiatury, fokus i zachowanie dla czytników ekranu pochodzą z React Aria, a wygląd z tokenów.

    @skribly/ui, @skribly/ui/<group>

    • Aplikacje React 19
    • Renderowanie po stronie serwera

  2. Warstwa 2: Czysty CSS

    Klasy .sk-* dla stron bez Reacta i bez Tailwinda, w warstwie kaskady, dzięki czemu własny CSS strony ma pierwszeństwo.

    components.css, plain.css

    • Astro
    • Zwykły HTML
    • Dowolny stos

  3. Warstwa 1: Tokeny projektowe

    Kolor, typografia, odstępy, zaokrąglenia, ruch i warstwy jako pliki tokenów W3C, zbudowane w zmienne CSS i typowany obiekt.

    tokens/*.tokens.json → tokens.css, values.ts

    • Wszystko
    • Tailwind 4
Każda warstwa korzysta tylko z warstwy pod sobą. Zmiana frameworka w przyszłości wymieni górną warstwę, a tokeny i czysty CSS zostaną bez zmian.

Zacznij tutajLink do sekcji Zacznij tutaj

Grupy komponentówLink do sekcji Grupy komponentów

Szukaj na stronie

Strzałki przenoszą między wynikami, Enter otwiera, Esc zamyka. Ctrl K /