Files

T

Marcin Wojas 81b895cf2f soneta-ui-style

2026-03-22 20:56:25 +01:00

33 KiB

Raw Blame History

enova365 - Szczegółowy Przewodnik Projektowy UI

Dokument opisuje zasady budowania interfejsów użytkownika wizualnie spójnych z aplikacją enova365 ERP firmy Soneta. Opracowany na podstawie analizy screenshotów i plików HTML aplikacji.

1. MOTYWY KOLORYSTYCZNE

Aplikacja posiada dwa pełne motywy: jasny (white) i ciemny (black). Oba używają tego samego systemu zmiennych CSS (~830 tokenów).

1.1 Kolor wiodący (Brand)

Kolory brand pochodzą z pliku palety PaletteBase.css (katalog wzorce/css/standard/).

Element	Wartość	Zmienna CSS
Główny zielony (primary/header)	`#016E46` (szmaragdowy)	`--brand_500`
Brand ciemny	`#015436`	`--brand_600`
Brand najciemniejszy	`#01422A`	`--brand_700`
Brand jasny	`#02BB77`	`--brand_300`
Brand najjaśniejszy	`#02E391`	`--brand_200`
Akcent cyjan	`#31e2b8` (turkusowy - logo)	—
Akcent błękitny	`#6acbf3` (jasny niebieski - logo)	—

1.2 Motyw jasny (White)

Przeznaczenie	Kolor	Opis
Tło główne (content area)	`rgb(230, 231, 231)`	Jasnoszare — `--theme_bg`, wydziela białe elementy UI
Tło nagłówka (header bar)	`#016E46`	Szmaragdowy — `--brand_500`
Tło sidebara	`#003320`	Bardzo ciemna zieleń — `RGBA(0, 51, 32)`, ciemniejszy niż header
Sidebar hover	`#004626`	`RGBA(0, 70, 38)` — `--nav_tree_item_hover`
Sidebar selected	`#005830`	`RGBA(0, 88, 48)` — `--nav_tree_item_selected`
Tekst sidebara	`#FFFFFF`	Biały tekst na ciemnozielonym tle sidebara
Tło surface/karty	`#FFFFFF`	Białe karty na jasnym tle
Tło sekcji	`#F5F5F5` ~ `#FAFAFA`	Bardzo jasnoszare
Tekst podstawowy	`#212121` ~ `#333333`	Ciemnoszary/prawie czarny
Tekst drugorzędny	`#757575` ~ `#A3A3A3`	Średni szary
Tekst etykiet	`#616161`	Szary na etykietach pól
Tekst na ciemnym tle	`#FFFFFF`	Biały na zielonym headerze
Obramowanie inputów	`#BDBDBD` ~ `#E0E0E0`	Jasnoszare
Obramowanie focus	`#016E46`	Zielony border na focus
Tło wiersza zaznaczonego	`rgba(46, 125, 50, 0.08)`	Bardzo lekki zielony tint
Tło wiersza hover	`rgba(0, 0, 0, 0.04)`	Prawie przezroczysty szary
Separator/divider	`#E0E0E0`	Jasnoszara linia
Tło inputu disabled	`#F5F5F5`	Jasnoszary

1.3 Motyw ciemny (Black)

Przeznaczenie	Kolor	Opis
Tło główne	`#1E1E1E` ~ `#212121`	Ciemny grafitowy
Tło nagłówka (header bar)	`#1B5E20` ~ `#0D3B14`	Ciemnozielony (ciemniejszy niż w jasnym)
Tło sidebara	`#1A1A1A` ~ `#1E1E1E`	Ciemny — w motywie ciemnym sidebar nie jest zielony, lecz ciemny grafitowy
Tło surface/karty	`#2A2A2A` ~ `#303030`	Ciemny grafitowy
Tło sekcji	`#252525` ~ `#2C2C2C`	Nieco jaśniejszy ciemny
Tekst podstawowy	`#E0E0E0` ~ `#F0F0F0`	Jasnoszary
Tekst drugorzędny	`#A3A3A3` ~ `#9E9E9E`	Średni szary
Tekst etykiet	`#BDBDBD`	Jasnoszary
Obramowanie inputów	`#424242` ~ `#555555`	Ciemnoszare
Obramowanie focus	`#016E46`	Zielony (taki sam jak w jasnym)
Tło wiersza zaznaczonego	`rgba(46, 125, 50, 0.15)`	Lekki zielony tint na ciemnym
Tło wiersza hover	`rgba(255, 255, 255, 0.05)`	Prawie przezroczysty biały
Separator/divider	`#424242`	Ciemnoszara linia
Tło inputu	`#2A2A2A` ~ `#333333`	Ciemny
Tło overlay/modal	`rgba(0, 0, 0, 0.5)` ~ `rgba(0, 0, 0, 0.7)`	Półprzezroczysty czarny

1.4 Kolory semantyczne (wspólne dla obu motywów)

Przeznaczenie	Kolor	Opis
Success / Primary action	`#2E7D32`	Zielony - przyciski "Zapisz"
Danger / Zamknij	`#C62828` ~ `#D32F2F`	Czerwony - przyciski "Zamknij", "X"
Warning	`#F57C00` ~ `rgb(192, 64, 0)`	Pomarańczowy
Info	`#1976D2`	Niebieski
Link	`#016E46`	Ciemnozielony - linki "Nie pamiętasz hasła?"
Disabled text	`#A3A3A3`	Szary z opacity
Error border/shadow	Czerwony z shadow	Walidacja
Warning border/shadow	Pomarańczowy z shadow	Ostrzeżenia

Na ekranie menu głównego widoczne są kolorowe ikony modułów w kołach:

Moduł	Kolor ikony
Terminarz	Zielony
Ewidencja dokumentów	Niebieski
Ewidencja Środków Pieniężnych	Cyjan
Kadry i płace	Pomarańczowy
Księgowość	Fioletowy
Księga inwentarzowa	Oliwkowy
Ewidencja pojazdów	Czerwony
Handel	Żółty
Produkcja zaawansowana	Magenta
ServiceDesk	Różowy
Business Intelligence	Złoty
CRM	Zielonkawy

2. TYPOGRAFIA

2.1 Rodziny czcionek

Przeznaczenie	Czcionka	Fallback
Główna (primaryFont)	`"SourceSans"`	`Arial, sans-serif`
Nagłówki/pogrubienia	`"SourceSansSemiBold"`	`Arial, sans-serif`
Alternatywna	`"Roboto"`	`sans-serif`
Branding/logo	`"Lato"`	`sans-serif`
Monospace (kod)	`Consolas`	`"Courier New", monospace`

2.2 Rozmiary czcionek

Przeznaczenie	Rozmiar
Drobny tekst (captions)	`10px` – `11px`
Etykiety pól formularza	`12px`
Tekst w inputach	`13px` – `14px`
Tekst podstawowy (body)	`14px`
Nazwy zakładek/tabs	`13px` – `14px`
Tytuł formularza	`16px` – `18px`
Nagłówki sekcji	`14px` – `16px` (z font-weight: 600)
Nazwa modułu (menu)	`16px` – `18px`
Opis modułu (menu)	`12px` – `13px`
Duże nagłówki	`20px` – `24px`
Logo "enova365"	`24px` – `32px`
Strona logowania – hasło	`24px` – `32px`
Ekran logowania – "System ERP"	`22px` – `26px`

2.3 Grubości czcionek

Styl	Wartość
Light	`300`
Regular	`400` (domyślna)
Medium	`500`
Semi-bold	`600` (nagłówki sekcji, aktywne elementy menu)
Bold	`bold` / `700` (tytuły, pogrubienia)

2.4 Odstępy między literami

Kontekst	Wartość
Normalny tekst	`0` ~ `0.1px`
Etykiety	`0.15px` ~ `0.25px`
Przyciski uppercase	`0.6px` ~ `2px`

2.5 Wysokość linii

Kontekst	Wartość
Drobny tekst	`14px` – `16px`
Tekst podstawowy	`18px` – `20px`
Wiersze tabeli	`20px` – `24px`
Inputy	`24px` – `26px`
Nagłówki	`28px` – `32px`
Duże elementy	`48px`

3. UKŁAD (LAYOUT)

3.1 Struktura główna

┌──────────────────────────────────────────────────────┐
│                   HEADER BAR (~48-56px)               │
│  [Logo] [Nawigacja]  [Play][Czas]  [Ikony] [Avatar]  │
├──────────┬───────────────────────────────────────────┤
│          │  BREADCRUMB / PATH BAR (~32px)             │
│          ├───────────────────────────────────────────┤
│ SIDEBAR  │  TITLE BAR + TABS / TOOLBAR (~44-48px)    │
│ (250px)  ├───────────────────────────────────────────┤
│          │                                           │
│ Drzewo   │            CONTENT AREA                   │
│ nawigacji│  (Formularz / Lista / Dashboard)           │
│          │                                           │
│          │                                           │
├──────────┴───────────────────────────────────────────┤
│                   STATUS BAR (opcjonalnie)            │
└──────────────────────────────────────────────────────┘

3.2 Wymiary główne

Element	Wymiar
Header bar height	`48px` – `56px`
Sidebar width (rozwinięty)	`240px` – `260px`
Sidebar width (zwinięty)	`48px` – `56px`
Breadcrumb bar height	`28px` – `32px`
Toolbar / tab bar height	`40px` – `48px`
Status bar height	`24px` – `28px`
Minimalna szerokość okna	`1024px`

3.3 System layoutu

Flexbox jest dominującym modelem layoutu
display: flex z flex-direction: row dla głównego podziału (sidebar + content)
display: flex z flex-direction: column dla wertykalnego stackowania sekcji
Grid używany sporadycznie, głównie w dashboardzie modułów (siatka kafelków)
justify-content: space-between dla rozmieszczania elementów w toolbarze
align-items: center praktycznie wszędzie do verticalnego centrowania

4. KOMPONENTY UI

4.1 Przyciski (Buttons)

Warianty

Wariant	Tło	Tekst	Obramowanie	Użycie
Primary	`#2E7D32` (zielony)	`#FFFFFF`	brak	"Zapisz", "Zaloguj"
Secondary	przezroczyste	ciemny/jasny tekst	`1px solid` szary	"Wersja mobilna", "Czynności"
Tertiary	przezroczyste	ciemny/jasny tekst	brak	Ikony w toolbarze
Danger	`#C62828` (czerwony)	`#FFFFFF`	brak	"Zamknij"
Important	zielony z wyróżnieniem	`#FFFFFF`	brak	Kluczowe akcje

Rozmiary i kształt

Właściwość	Wartość
Wysokość przycisku	`32px` – `38px` (standard), `40px` – `44px` (duży)
Padding	`6px 12px` (mały), `8px 16px` (standard), `10px 20px` (duży)
Border-radius	`4px` – `6px` (prostokątne z lekkim zaokrągleniem)
Font-size	`13px` – `14px`
Font-weight	`500` – `600`
Min-width	brak (dopasowanie do treści)
Gap (ikona + tekst)	`6px` – `8px`

Stany

Stan	Zmiana wizualna
Hover	Lekkie rozjaśnienie tła, zmiana kursora na pointer
Focus	`box-shadow: inset 0 0 3px 1px #016E46` lub `outline: 2px solid #016E46`
Pressed/Active	Lekkie przyciemnienie tła
Disabled	Opacity `0.5` – `0.6`, brak interakcji, `cursor: default`
Selected	Wyraźniejsze tło, pogrubiony tekst

Przycisk "Zapisz" (przykład Primary)

.btn-primary {
  background-color: #2E7D32;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

Przycisk "Zamknij" (przykład Danger)

.btn-danger {
  background-color: #C62828;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

4.2 Pola formularza (Inputs)

Tekst / Text Input

Właściwość	Motyw jasny	Motyw ciemny
Tło	`#FFFFFF`	`#2A2A2A`
Tekst	`#212121`	`#E0E0E0`
Obramowanie	`1px solid #BDBDBD`	`1px solid #555555`
Border-radius	`4px`	`4px`
Wysokość	`30px` – `32px`	`30px` – `32px`
Padding	`4px 8px`	`4px 8px`
Font-size	`13px` – `14px`	`13px` – `14px`

Stany inputów

Stan	Opis
Focus	Border zmienia się na `#016E46` (zielony), opcjonalnie `box-shadow: inset 0 0 3px 1px #016E46`
Disabled	Tło `#F5F5F5` (jasny) / `#1A1A1A` (ciemny), tekst przyszarzony
Error	Czerwony shadow/border
Warning	Pomarańczowy shadow/border
Read-only	Bez border-bottom, wygląda jak tekst

Etykiety (Labels)

Właściwość	Wartość
Pozycja	Nad inputem lub po lewej stronie (inline)
Font-size	`12px`
Color	Szary (`#757575` jasny / `#BDBDBD` ciemny)
Font-weight	`400` (regular)
Margin-bottom	`2px` – `4px` (gdy nad inputem)

Układ pól w formularzu

Pola ułożone w siatce 2-4 kolumn
Etykieta po lewej, input po prawej (inline layout) - dominujący wzorzec
Etykieta ma stałą szerokość (~100-140px)
Input rozciąga się na dostępną przestrzeń (flex: 1)
Odstęp między wierszami: 8px – 12px
Sekcje oddzielone nagłówkami z większym marginesem górnym (16px – 24px)

4.3 Checkbox

Właściwość	Wartość
Rozmiar	`16px` × `16px` ~ `18px` × `18px`
Border-radius	`2px` – `3px`
Border	`1px` – `2px solid` szary
Checked background	Zielony (`#2E7D32`)
Checked checkmark	Biały
Disabled	Przyszarzony z zmniejszoną opacity

4.4 Tabele / Listy

Nagłówek tabeli

Właściwość	Motyw jasny	Motyw ciemny
Tło	`#F5F5F5` ~ `#EEEEEE`	`#2A2A2A` ~ `#333333`
Tekst	`#616161`	`#BDBDBD`
Font-size	`12px` – `13px`
Font-weight	`600`
Padding	`8px 12px`
Border-bottom	`1px solid #E0E0E0` / `#424242`

Wiersze tabeli

Właściwość	Motyw jasny	Motyw ciemny
Tło parzyste	`#FFFFFF`	`#1E1E1E`
Tło nieparzyste	`#FAFAFA` ~ `#F5F5F5`	`#252525` ~ `#2A2A2A`
Wysokość wiersza	`30px` – `36px`
Padding komórki	`4px 12px` ~ `6px 12px`
Font-size	`13px` – `14px`
Border-bottom	`1px solid #F0F0F0` / `#333333`

Stany wierszy

Stan	Motyw jasny	Motyw ciemny
Hover	`rgba(0,0,0,0.04)`	`rgba(255,255,255,0.05)`
Selected	Lekki zielony tint `rgba(46,125,50,0.08)`	`rgba(46,125,50,0.15)`
Active/focused	Wyraźniejszy zielony tint	Wyraźniejszy zielony tint

4.5 Zakładki (Tabs)

Na podstawie screenshotów widoczne są dwa style zakładek:

Tabs w toolbarze (styl "pill/outline")

Właściwość	Wartość
Styl	Obramowane prostokąty (outline)
Padding	`6px 12px`
Border-radius	`4px`
Border	`1px solid` szary
Font-size	`13px`
Aktywna zakładka	Zielone tło lub wyraźny zielony border
Gap między tabami	`4px` – `6px`

Tabs w dokumencie (styl "page tabs")

Właściwość	Wartość
Styl	Zakładki z górnym paskiem jako sekcje
Gap	`0px` (przylegające)
Aktywna	Wyróżnione tło, pogrubiony tekst

4.6 Nagłówek aplikacji (Header Bar)

Właściwość	Wartość
Tło	Szmaragdowy (`#016E46` — `--brand_500`)
Wysokość	`48px` – `56px`
Logo	Po lewej stronie headera. Używać pliku `logo_standard.svg` (patrz sekcja 8.5) osadzonego inline jako `<svg>` z `fill="#FFFFFF"` na obu elementach `<path>`, `viewBox="0 0 200 33.5"`, wysokość `22px`, szerokość `auto`. Logo zawiera pełny napis „enova365" z ikoną play (kółko z trójkątem) zastępującą literę „o". Nie odtwarzać logo z osobnych elementów (tekst + ikona) — zawsze używać oficjalnego pliku SVG
Pole wyszukiwania	Umieszczone w headerze po prawej od logo, ale z jasnym/białym tłem i ciemnym tekstem (nie przezroczyste/ciemne). Ikona lupy po lewej stronie inputa. Zaokrąglone rogi (`border-radius: 4px`)
Ikony	Białe, liniowe SVG, `20px` – `24px`
Avatar	Kółko `32px` – `36px`, zielone tło z białym inicjałem
Padding	`0 16px`
Shadow	Subtelny shadow na dole
Elementy środkowe	Play/timer, zegar (format `00:00`)
Elementy prawe	Ikona lupy (szukaj), ikona ustawień (trybik), ikona dzwonka (powiadomienia), avatar z nazwą użytkownika i rolą

4.7 Sidebar / Panel nawigacji

WAŻNE: W motywie jasnym sidebar ma bardzo ciemne zielone tło (#003320) z białym tekstem — jest ciemniejszy niż header (#016E46). Sidebar jest wizualnie "pływającym panelem" — posiada zaokrąglone rogi i marginesy oddzielające go od headera i content area.

Kształt i pozycjonowanie sidebara

Właściwość	Wartość
Border-radius	`8px` ~ `12px` (zaokrąglone narożniki panelu)
Margin	`4px` ~ `6px` od góry, lewej i dołu — tworzy widoczną szczelinę wokół panelu
Tło za sidebarem	Takie samo jak content area (białe / ciemne) — widoczne w szczelinach marginesów

Struktura sidebara

Sidebar składa się z trzech sekcji (od góry):

Pasek sterowania — przyciski "Zwiń" (strzałka w lewo) i "Odepnij" na tle identycznym z headerem
Pole wyszukiwania — input "Wyszukaj w menu" z ikoną lupy, białe tło, pełna szerokość
Drzewo nawigacji — lista pozycji z chevronami do rozwijania podpoziomów

Właściwość	Motyw jasny	Motyw ciemny
Tło całego sidebara	`#003320` (bardzo ciemna zieleń, ciemniejszy niż header)	`#262626` (ciemny grafitowy)
Szerokość	`240px` – `260px`	`240px` – `260px`
Tekst menu	`#FFFFFF` (biały), `13px` – `14px`	`#E0E0E0` (jasnoszary), `13px` – `14px`
Pole wyszukiwania	Białe tło (`#FFFFFF`), ciemny tekst, placeholder szary	Ciemne tło (`#2A2A2A`), jasny tekst
Aktywny element	Pogrubiony biały tekst, subtelne jaśniejsze tło (`rgba(255,255,255,0.12)`)	Pogrubiony, zielony tekst
Hover	`rgba(255,255,255,0.08)` — lekkie rozjaśnienie	`rgba(255,255,255,0.05)`
Ikona rozwinięcia	Chevron `>` / `v`, biały, `12px`	Chevron `>` / `v`, szary, `12px`
Ikony pozycji menu	Białe liniowe SVG, `16px` – `18px`	Szare liniowe SVG, `16px` – `18px`
Padding elementu	`8px 16px`	`8px 16px`
Wcięcie podpoziomów	+`16px` – `20px` na poziom	+`16px` – `20px` na poziom
Border-right	Brak (sidebar jest wizualnie oddzielony marginesem i zaokrągleniem)	Brak
Border-radius panelu	`8px` ~ `12px`	`8px` ~ `12px`
Margin panelu	`4px` ~ `6px` (góra, lewo, dół)	`4px` ~ `6px` (góra, lewo, dół)
Przyciski "Zwiń"/"Odepnij"	Białe ikony/tekst na zielonym tle, małe `12px` – `13px`	Szare ikony/tekst

Breadcrumb wyświetla się w górnej części content area, bezpośrednio pod paskiem zakładek dokumentów. Zawiera ikonę domu (SVG dom.svg) jako link do strony głównej, po której następują segmenty ścieżki oddzielone separatorem >.

Właściwość	Wartość
Tło	Jak content area (`#FFFFFF` / `#1E1E1E`)
Wysokość	`28px` – `32px`
Font-size	`12px`
Kolor tekstu segmentów	Szary (`#757575`), każdy segment jest linkiem
Kolor aktywnego (ostatni)	Ciemniejszy tekst (`#212121`) — nie jest linkiem
Separator	`>` (znak większości), kolor szary `#BDBDBD`, z `margin: 0 4px`
Ikona Home	Liniowa ikona SVG domku (`dom.svg`), `14px` – `16px`, kolor szary
Padding	`4px 16px`
Przykład	`🏠 > Kadry i płace > Kadry > Pracownicy`

Właściwość	Motyw jasny	Motyw ciemny
Overlay	`rgba(0,0,0,0.5)`	`rgba(0,0,0,0.7)`
Tło modala	`#FFFFFF`	`#2A2A2A`
Border-radius	`8px` – `12px`
Shadow	`0 4px 20px rgba(0,0,0,0.25)`	`0 4px 20px rgba(0,0,0,0.5)`
Padding	`20px` – `25px`
Nagłówek	Osobne tło, border-bottom
Szerokość	`400px` – `600px` (zależnie od treści)

Na screenshotach widoczne jest menu czynności z dwoma kolumnami:

Właściwość	Motyw jasny	Motyw ciemny
Tło	`#FFFFFF`	`#2A2A2A` ~ `#1E1E1E`
Border	`1px solid #E0E0E0`	`1px solid #424242`
Border-radius	`8px`
Shadow	`0 4px 12px rgba(0,0,0,0.15)`	`0 4px 12px rgba(0,0,0,0.4)`
Padding wewnętrzny	`8px 0`
Padding elementu	`8px 16px`
Font-size elementu	`13px` – `14px`
Hover elementu	Lekkie tło
Układ	Dwie kolumny w dużym menu
Pole wyszukiwania	Na górze menu, z ikoną lupy
Ikony elementów	Kolorowe ikony `16px` – `20px` po lewej

Element	Opis
Układ	Dwuczęściowy: lewo - zdjęcie/branding, prawo - formularz
Podział	~50/50 lub 55/45
Lewa strona	Zdjęcie stockowe z logo enova365 nałożonym
Prawa strona	Formularz logowania, wycentrowany w pionie
Logo	"en>va 365" z kolorowymi akcentami
Hasło brandingowe	"System ERP dla ambitnego biznesu", `22px`, kursywa
Input Login	Z etykietą, border `1px`, focus zielony
Input Hasło	Z etykietą, border `1px`
Checkbox "Zapamiętaj"	Standardowy checkbox
Link "Nie pamiętasz hasła?"	Zielony tekst, `#016E46`
Przycisk "Zaloguj"	Zielony, pełna szerokość, `height: 40px`, `border-radius: 4px`
Przycisk "Wersja mobilna"	Outline, pełna szerokość
"Baza danych"	Mała etykieta + wartość
Footer	"by Soneta ®" w prawym dolnym rogu

Parametry kafelków pochodzą z TileItem.module.scss, TileGroup.module.scss i PaletteBase.css.

Tło content area (za kafelkami): rgb(230, 231, 231) — jasnoszare (--theme_bg), wydziela białe kafelki z interfejsu.

Kafelek (Tile Item)

Właściwość	Wartość	Źródło
Szerokość	`352px`	`TileItem`
Min-height	`80px`	`TileItem`
Border-radius	`12px`	`TileItem`
Tło (jasny)	`#FFFFFF`	`--tile_item_bg: --neutral_0`
Tło (ciemny)	`#2A2A2A` – `#333333`	`--neutral_850`
Border-left	`4px solid [kolor_modułu]`	Kolorowy akcent po lewej stronie — kolor odpowiada ikonowi modułu
Box-shadow	`0px 0px 10px 1px rgba(229,229,229)`	`--tile_shadow`
Padding	`10px 16px`	`TileItem .t-content`
Gap (ikona↔tekst)	`10px`	`TileItem .t-content`

Ikona w kafelku

Właściwość	Wartość
Rozmiar	`20px` × `20px` — SVG liniowe
Kolor	Taki sam jak `border-left` — kolor modułu (np. zielony, niebieski, pomarańczowy)
Pozycja	Po lewej stronie, vertically centered

Typografia kafelka

Element	Font	Rozmiar	Waga	Kolor
Tytuł modułu	`Roboto` (`--tertiaryFont`)	`16px`	`600` (`--tile_fw`)	`#000000` (czarny, `--pureBlack`)
Opis modułu	`Roboto` (`--tertiaryFont`)	`14px`	`400`	`rgb(68, 70, 69)` (`--tile_desc_fg`)
Line-height tytułu	—	`28px`	—	—
Line-height opisu	—	`16px`	—	—

Layout kafelków

Właściwość	Wartość	Źródło
Układ	Flex-wrap, wyrównanie do lewej	`TileGroup .tile-content`
Gap między kafelkami	`8px`	`TileMenu .main-menu`, `TileGroup .tile-content`
Padding grupy	`30px 10px 0 4px` (pierwszy: `10px 10px 0 4px`)	`TileGroup`
Tytuł grupy	`16px`, `font-weight: 500`, uppercase	`TileGroup .title-group`

Stany kafelka

Stan	Efekt
Hover	Tło zmienia się na `#F5F5F5` (`--tile_group_hover_bg`)
Active	Brak shadow, tło `--tile_active_bg`
Focus	Outline `2px` z offset `2px`

Właściwość	Wartość
Wysokość	`40px` – `48px`
Tło	Takie samo jak content area
Border-bottom	`1px solid` separator
Układ	Flex row, `align-items: center`
Gap	`4px` – `8px`
Padding	`4px 16px`
Przyciski w toolbarze	Styl outline/tertiary, `height: 30px` – `32px`
Filtry	Zielone tło ("Rozwiń filtry"), `border-radius: 16px` – `20px` (pill)

4.14 Scrollbar (niestandardowy)

Właściwość	Motyw jasny	Motyw ciemny
Track	Przezroczyste lub jasnoszare	Przezroczyste lub ciemnoszare
Thumb	`#BDBDBD`	`#555555`
Thumb hover	`#999999`	`#777777`
Szerokość	`8px` – `10px`
Border-radius thumb	`4px` – `5px`

5. SPACING SYSTEM (SYSTEM ODSTĘPÓW)

Aplikacja używa skali 4px:

Token	Wartość	Użycie
xs	`2px`	Mikro-odstępy, gap między ikoną a tekstem
sm	`4px`	Padding wewnętrzny małych elementów
md	`8px`	Standardowy padding, gap w flexie
lg	`12px`	Padding komórek tabeli, gap przycisków
xl	`16px`	Padding sekcji, margin między grupami
2xl	`20px`	Padding kart/modali
3xl	`24px`	Margin między sekcjami formularza
4xl	`32px`	Duże odstępy strukturalne
5xl	`40px`	Bardzo duże odstępy

6. BORDER-RADIUS (ZAOKRĄGLENIA)

Element	Wartość
Inputy	`4px`
Przyciski	`4px` – `6px`
Karty/kafelki	`8px` – `12px`
Modals	`8px` – `12px`
Pill/badge	`16px` – `20px`
Avatary	`50%` (koła)
Tooltipy	`4px` – `6px`
Tabs	`4px` (góra) lub `0`

7. CIENIE (SHADOWS)

Kontekst	Wartość
Subtelny (karty)	`0 1px 3px rgba(0,0,0,0.08)`
Standardowy (dropdown)	`0 2px 8px rgba(0,0,0,0.15)`
Wyraźny (modal)	`0 4px 20px rgba(0,0,0,0.25)`
Focus inset	`inset 0 0 3px 1px #016E46`
Header shadow	`0 2px 4px rgba(0,0,0,0.1)`
Ciemny motyw	Intensywniejsze wartości alpha (×1.5 – ×2)

8. IKONY

8.1 System ikon — liniowe SVG

Aplikacja enova365 używa własnego zestawu ikon SVG w stylu liniowym (outline/stroke). Ikony NIE są wypełnione (filled) — składają się z konturów i linii. Każda ikona jest zdefiniowana jako plik .svg z elementem <path> i viewBox="0 0 160 160".

Kluczowe cechy stylu ikon:

Liniowe / outline — ikony rysowane konturem, nie wypełnieniem
Jednolity kolor — fill na elemencie <path>, kolor zmieniany przez CSS (fill: currentColor lub bezpośrednie nadpisanie fill)
ViewBox 160×160 — standardowy viewBox, ikony skalowane do wymaganego rozmiaru
Brak stroke — mimo liniowego wyglądu, ikony używają fill na ścieżkach o cienkich kształtach (nie stroke)

8.2 Rozmiary i kolory

Właściwość	Wartość
Rozmiar mały	`14px` – `16px` (inline z tekstem, sidebar)
Rozmiar standardowy	`18px` – `20px` (toolbary, menu, breadcrumb)
Rozmiar duży	`24px` – `32px` (nagłówki, dashboard kafelki)
Kolor (jasny motyw, content)	`#616161` (szary), kontekstowy kolor semantyczny
Kolor (ciemny motyw)	`#BDBDBD` (jasnoszary)
Kolor na zielonym tle (header, sidebar jasny)	`#FFFFFF` (biały)
Kolor aktywny	`#2E7D32` (zielony)

8.3 Najważniejsze ikony i ich pliki SVG

Nazwa pliku	Zastosowanie
`logo.svg`	Ikona play w kole (sam symbol, biały fill) — używany w headerze jako element dekoracyjny

8.5 Pliki logo w katalogu `SvgResources/Standard/`

Gotowe, kompletne wersje logotypu enova365 do osadzenia w interfejsie:

Nazwa pliku	Opis	ViewBox
`logo_standard.svg`	Pełne logo tekstowe "enova365" — tekst + ikona play (zastępuje "o"). Dwie ścieżki: jedna dla symbolu play z cyframi "365", druga dla liter "en_va". Kolor domyślny czarny, na ciemnym tle nadać `fill: #FFFFFF`	`0 0 200 33.5`
`logo_full_standard.svg`	Logo z dopiskiem "business" poniżej — pełna wersja brandingowa z podtytułem	`0 0 200 44`
`logo_icon_standard.svg`	Sam symbol — kółko z trójkątem play (ikona aplikacji)	`0 0 160 160`
`ustawienia_logo.svg`	Logo w kontekście ustawień	—

8.4 Ikony modułów na dashboardzie

Na ekranie menu głównego ikony modułów wyświetlane są w kolorowych kółkach. Ikona SVG jest biała, tło kółka ma kolor przypisany do modułu (patrz sekcja 1.5). Kółka mają border-radius: 50%, rozmiar 32px – 40px.

9. ANIMACJE I PRZEJŚCIA

Właściwość	Wartość
Transition domyślny	`all 0.2s ease` lub `0.15s`
Hover transition	`background-color 0.2s, color 0.2s`
Opacity transition	`opacity 0.3s ease`
Sidebar collapse	`width 0.3s ease`
Skeleton loader	Gradient shimmer `#f0f0f0` → `#e0e0e0` → `#f0f0f0`
Spinner	SVG z gradient stops, rotacja

10. RESPONSYWNOŚĆ

Breakpoint	Zachowanie
Desktop (>1200px)	Pełny layout: sidebar + content
Tablet (~768-1200px)	Sidebar zwinięty domyślnie, rozwijany overlay
Mobile (<768px)	"Wersja mobilna" - osobna aplikacja

11. WZORCE NAZEWNICTWA CSS VARIABLES

System ~830 zmiennych CSS stosuje konwencję:

--{komponent}_{wariant}_{stan}_{właściwość}

Przykłady:

--command_primary_hover_bg → przycisk primary, stan hover, tło
--nav_tree_item_selected → drzewo nawigacji, element zaznaczony
--input_focused_border → input, stan focus, border
--modal_bar_title_fg → modal, pasek tytułowy, kolor tekstu

Główne prefiksy komponentów:

Prefiks	Komponent
`command_`	Przyciski (primary, secondary, tertiary)
`input_`	Pola formularza
`nav_tree_`	Sidebar / drzewo nawigacji
`headerbar_`	Górny pasek
`modal_`	Okna dialogowe
`tooltip_`	Podpowiedzi
`popup_`	Menu kontekstowe / rozwijane
`checkbox_`	Checkboxy
`radio_`	Radio buttons
`dp_`	Date picker
`scroll_`	Paski przewijania
`spinner_`	Loadery / spinnery
`dashboard_`	Dashboard / kafelki modułów
`bookmark_`	Zakładki
`path_`	Breadcrumb
`label_`	Etykiety statusowe
`verifier_`	Komunikaty walidacji
`recorder_`	Nagrywanie makr

12. PODSUMOWANIE KLUCZOWYCH ZASAD PROJEKTOWYCH

Zielony jako kolor wiodący — ciemna zieleń (#1B5E20 – #2E7D32) dominuje w nagłówku, sidebarze, przyciskach akcji, stanach focus i linkach.
Minimalizm i profesjonalizm — interfejs jest utrzymany w stylu enterprise, bez ozdobników, z naciskiem na czytelność danych.
Gęstość informacji — formularze i listy są kompaktowe (wiersze 30-36px), pola blisko siebie, minimalne marginesy.
Dwukolorowy kontrast — w obu motywach kontrast opiera się na jasne tło + ciemny tekst (lub odwrotnie), z zielenią jako jedynym akcentem kolorystycznym.
Spójność stanów — każdy komponent ma zdefiniowane 6 stanów: default, hover, focus, pressed, selected, disabled.
Płaski design z subtelnymi cieniami — brak skeuomorfizmu, minimalne cienie, płaskie tła z delikatnymi borderami.
Hierarchia typograficzna przez wagę, nie rozmiar — różnice między elementami wynikają bardziej z font-weight (400 vs 600) niż z drastycznych zmian rozmiaru.
Sidebar jako główna nawigacja — drzewo nawigacji po lewej stronie z możliwością zwijania, z wbudowanym wyszukiwaniem.
Kontekstowe toolbary — pasek narzędzi zmienia się w zależności od widoku (lista vs formularz), z przyciskami outline.
System zmiennych CSS — pełna temowalność przez ~830 CSS custom properties, umożliwiająca łatwe przełączanie motywów.

33 KiB Raw Blame History Unescape Escape