UI Storybook

Przegląd komponentów i stylów systemu projektowego

Paleta kolorów

Primary

50primary-50
100primary-100
200primary-200
300primary-300
400primary-400
500primary-500
600primary-600
700primary-700
800primary-800
900primary-900

Secondary

50secondary-50
100secondary-100
200secondary-200
300secondary-300
400secondary-400
500secondary-500
600secondary-600
700secondary-700
800secondary-800
900secondary-900

Base Colors

base-0#657b83
base-1#586e75
base-2#073642
base-3#002b36
base#839496
base-light#93a1a1
base-lighter#eee8d5
base-lightest#fdf6e3

Solarized Colors

yellow#b58900
orange#cb4b16
red#dc322f
magenta#d33682
violet#6c71c4
blue#268bd2
cyan#2aa198
green#859900

Kolory semantyczne

success

Light#a8c000
Default#859900
Dark#6b7a00

warning

Light#d4a500
Default#b58900
Dark#976d00

danger

Light#e85c59
Default#dc322f
Dark#b82826

info

Light#35c9bf
Default#2aa198
Dark#22817a

accent

Light#8b90d3
Default#6c71c4
Dark#595ca3

Typography

Warianty

Nagłówek H1 - Największy tekst

variant="h1"

Nagłówek H2 - Bardzo duży tekst

variant="h2"

Nagłówek H3 - Duży tekst

variant="h3"

Nagłówek H4 - Średnio-duży tekst

variant="h4"
Nagłówek H5 - Średni tekst
variant="h5"
Nagłówek H6 - Mały nagłówek
variant="h6"

Tekst podstawowy (body) - To jest standardowy tekst używany do większości treści. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

variant="body"

Mały tekst (bodySmall) - Używany do dodatkowych informacji i komentarzy. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

variant="bodySmall"
Podpis (caption) - Najmniejszy tekst, używany do podpisów, dat i drobnych informacji.variant="caption"

Kolory tekstu

Kolor domyślny (default)

Tekst w kolorze domyślnym - używany do większości treści na stronie.

Kolor podstawowy (primary)

Tekst w kolorze podstawowym - używany do akcentów i ważnych elementów.

Kolor drugorzędny (secondary)

Tekst w kolorze drugorzędnym - używany do elementów wspierających.

Kolor przygaszony (muted)

Tekst w kolorze przygaszonym - używany do mniej ważnych informacji i podpisów.

Kolor błędu (error)

Tekst w kolorze błędu - używany do komunikatów o błędach i ostrzeżeń.

Kolor sukcesu (success)

Tekst w kolorze sukcesu - używany do pozytywnych komunikatów i potwierdzeń.

Button

Warianty

Filled

Outlined

Text

Rozmiary

Stany

Input

Podstawowe

To jest tekst pomocniczy

Stany

To jest komunikat błędu

Typy