soneta-ui-style

# Soneta / enova365 — Design System Ten skill opisuje reguły projektowania interfejsów użytkownika wizualnie spójnych z aplikacją enova365 ERP firmy Soneta. Stosuj te reguły budując strony internetowe, dashboardy, formularze i aplikacje webowe w estetyce Soneta. ## Zasady przewodnie 1. **Szmaragdowa zieleń jako kolor wiodący** — `#016E46` dominuje w headerze, sidebarze (motyw jasny), przyciskach akcji, stanach focus i linkach 2. **Enterprise minimalizm** — czysty, profesjonalny interfejs bez ozdobników, nacisk na czytelność danych 3. **Wysoka gęstość informacji** — kompaktowe wiersze (`30-36px`), pola blisko siebie, minimalne marginesy 4. **Płaski design z subtelnymi cieniami** — brak skeuomorfizmu, delikatne bordery i cienie 5. **Hierarchia przez wagę czcionki, nie rozmiar** — różnice wynikają z `font-weight` (400 vs 600), a nie drastycznych zmian rozmiaru 6. **Dwa motywy: jasny i ciemny** — oba używają tego samego systemu zmiennych CSS 7. **Spójność stanów** — każdy komponent definiuje 6 stanów: default, hover, focus, pressed, selected, disabled --- ## 1. Kolory ### 1.1 Brand (wspólne) | Token | Wartość | Użycie | |-------|---------|--------| | `--brand_500` | `#016E46` | Kolor główny — header, focus, linki | | `--brand_600` | `#015436` | Brand ciemny | | `--brand_700` | `#01422A` | Brand najciemniejszy | | `--brand_300` | `#3A8E6F` | Brand jasny | | `--brand_200` | `#02E391` | Brand najjaśniejszy | | Akcent cyjan | `#31e2b8` | Logo — turkusowy | | Akcent błękitny | `#6acbf3` | Logo — jasny niebieski | ### 1.2 Motyw jasny (White) | Przeznaczenie | Kolor | |---------------|-------| | Tło główne (content area) | `rgb(230, 231, 231)` — jasnoszare, wydziela białe karty | | Tło headera | `#016E46` — szmaragdowy | | Tło sidebara | `#003320` — bardzo ciemna zieleń, **ciemniejszy niż header** | | Sidebar hover | `rgba(0, 70, 38)` | | Sidebar selected | `rgba(0, 88, 48)` | | Tekst sidebara | `#FFFFFF` | | Tło surface/karty | `#FFFFFF` | | Tło sekcji | `#F5F5F5` – `#FAFAFA` | | Tekst podstawowy | `#212121` – `#333333` | | Tekst drugorzędny | `#757575` – `#A3A3A3` | | Tekst etykiet | `#616161` | | Obramowanie inputów | `#BDBDBD` – `#E0E0E0` | | Obramowanie focus | `#016E46` | | Wiersz zaznaczony | `rgba(46, 125, 50, 0.08)` | | Wiersz hover | `rgba(0, 0, 0, 0.04)` | | Separator | `#E0E0E0` | ### 1.3 Motyw ciemny (Black) | Przeznaczenie | Kolor | |---------------|-------| | Tło główne | `#1E1E1E` – `#212121` | | Tło headera | `#1B5E20` – `#0D3B14` — ciemnozielony | | Tło sidebara | `#262626` — **grafitowy, nie zielony** | | Tło surface/karty | `#2A2A2A` – `#303030` | | Tekst podstawowy | `#E0E0E0` – `#F0F0F0` | | Tekst drugorzędny | `#A3A3A3` | | Tekst etykiet | `#BDBDBD` | | Obramowanie inputów | `#424242` – `#555555` | | Obramowanie focus | `#016E46` — identyczny jak w jasnym | | Wiersz zaznaczony | `rgba(46, 125, 50, 0.15)` | | Wiersz hover | `rgba(255, 255, 255, 0.05)` | | Separator | `#424242` | | Overlay modal | `rgba(0, 0, 0, 0.7)` | ### 1.4 Kolory semantyczne | Przeznaczenie | Kolor | |---------------|-------| | Success / Primary action | `#2E7D32` — przyciski "Zapisz" | | Danger | `#C62828` – `#D32F2F` — przyciski "Zamknij" | | Warning | `#F57C00` | | Info | `#1976D2` | | Link | `#016E46` | | Disabled | `#A3A3A3` z opacity | ### 1.5 Paleta neutralna (z PaletteBase.css) Wartości w formacie RGB (bez `rgb()`): | Token | Wartość | HEX | |-------|---------|-----| | `--neutral_0` | `255, 255, 255` | `#FFFFFF` | | `--neutral_100` | `245, 245, 245` | `#F5F5F5` | | `--neutral_200` | `229, 229, 229` | `#E5E5E5` | | `--neutral_300` | `212, 212, 212` | `#D4D4D4` | | `--neutral_500` | `109, 115, 113` | `#6D7371` | | `--neutral_700` | `77, 81, 80` | `#4D5150` | | `--neutral_800` | `38, 38, 38` | `#262626` | | `--neutral_850` | `33, 33, 33` | `#212121` | | `--neutral_900` | `23, 23, 23` | `#171717` | Semantyczne: `--red_600: #DC2626`, `--green_400: #10C200`, `--blue_500: #3B82F6`, `--orange_500: #F97316`, `--yellow_400: #F3D930`, `--emerald_400: #139041`. --- ## 2. Typografia ### Czcionki | Przeznaczenie | Czcionka | Fallback | |---------------|----------|----------| | Główna (`--primaryFont`) | `"FiraSans"` | `Arial, sans-serif` | | Alternatywna (`--tertiaryFont`) | `"ROBOTO"` | `sans-serif` | | Nagłówki | `"SourceSansSemiBold"` | `Arial, sans-serif` | | Branding/logo | `"Lato"` | `sans-serif` | | Monospace | `Consolas` | `"Courier New", monospace` | Gdy nie możesz załadować czcionek Soneta, użyj `"Roboto", "Segoe UI", Arial, sans-serif` jako bezpiecznego zamiennika. ### Rozmiary | Przeznaczenie | Rozmiar | |---------------|---------| | Captions | `10px` – `11px` | | Etykiety pól | `12px` (`--font_size_label: 9pt`) | | Tekst w inputach | `13px` – `14px` | | Body (podstawowy) | `14px` | | Nagłówki sekcji | `14px` – `16px` + `font-weight: 600` | | Tytuł formularza | `16px` – `18px` | | Duże nagłówki | `20px` – `24px` | | Logo / ekran logowania | `24px` – `32px` | ### Grubości | Styl | Wartość | Użycie | |------|---------|--------| | Light | `300` | Delikatne teksty | | Regular | `400` | Domyślna | | Medium | `500` | Przyciski | | Semi-bold | `600` | Nagłówki sekcji, aktywne menu | | Bold | `700` | Tytuły | ### Wysokość linii Body: `18-20px`, wiersze tabeli: `20-24px`, inputy: `24-26px`, nagłówki: `28-32px`. ### Letter-spacing Normalny tekst: `0–0.1px`, etykiety: `0.15–0.25px`, przyciski uppercase: `0.6–2px`. --- ## 3. Layout ### Struktura główna ``` ┌──────────────────────────────────────────────────────┐ │ HEADER BAR (~48-56px) │ │ [Logo] [Search] [Ikony] [Avatar] │ ├──────────┬───────────────────────────────────────────┤ │ │ BREADCRUMB (~32px) │ │ ├───────────────────────────────────────────┤ │ SIDEBAR │ TOOLBAR + TABS (~44-48px) │ │ (250px) ├───────────────────────────────────────────┤ │ │ │ │ Drzewo │ CONTENT AREA │ │ nawigacji│ (Formularz / Lista / Dashboard) │ │ │ │ ├──────────┴───────────────────────────────────────────┤ │ STATUS BAR (opcjonalnie) │ └──────────────────────────────────────────────────────┘ ``` ### Wymiary | Element | Wymiar | |---------|--------| | Header bar | `48px` – `56px` | | Sidebar rozwinięty | `240px` – `260px` | | Sidebar zwinięty | `48px` – `56px` | | Breadcrumb | `28px` – `32px` | | Toolbar | `40px` – `48px` | | Status bar | `24px` – `28px` | | Min width | `1024px` | ### System layoutu - **Flexbox** dominuje — `flex-direction: row` dla sidebar+content, `column` dla sekcji - **Grid** sporadycznie — dashboard kafelków - `justify-content: space-between` w toolbarze - `align-items: center` praktycznie wszędzie --- ## 4. Komponenty UI ### 4.1 Przyciski | Wariant | Tło | Tekst | Border | Użycie | |---------|-----|-------|--------|--------| | **Primary** | `#2E7D32` | `#FFF` | brak | "Zapisz", "Zaloguj" | | **Secondary** | przezroczyste | inherit | `1px solid` szary | "Czynności" | | **Tertiary** | przezroczyste | inherit | brak | Ikony toolbar | | **Danger** | `#C62828` | `#FFF` | brak | "Zamknij" | Wymiary: height `32-38px` (standard) / `40-44px` (duży), padding `6px 12px` / `8px 16px` / `10px 20px`, border-radius `4-6px`, font `13-14px` weight `500-600`, gap ikona+tekst `6-8px`. Stany: hover — lekkie rozjaśnienie; focus — `box-shadow: inset 0 0 3px 1px #016E46`; pressed — przyciemnienie; disabled — opacity `0.5-0.6`. ```css /* Przykład: przycisk Primary */ .btn-primary { background-color: #2E7D32; color: #FFFFFF; border: none; border-radius: 4px; padding: 6px 16px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; } .btn-primary:hover { filter: brightness(1.1); } .btn-primary:focus { box-shadow: inset 0 0 3px 1px #016E46; } .btn-primary:disabled { opacity: 0.5; cursor: default; } ``` ### 4.2 Pola formularza | Właściwość | Jasny | Ciemny | |------------|-------|--------| | Tło | `#FFFFFF` | `#2A2A2A` | | Tekst | `#212121` | `#E0E0E0` | | Border | `1px solid #BDBDBD` | `1px solid #555555` | | Border-radius | `4px` | `4px` | | Wysokość | `30-32px` | `30-32px` | | Padding | `4px 8px` | `4px 8px` | | Font-size | `13-14px` | `13-14px` | Focus: border `#016E46` + opcjonalnie `box-shadow: inset 0 0 3px 1px #016E46`. Error: czerwony shadow. Warning: pomarańczowy shadow. Disabled: tło `#F5F5F5` / `#1A1A1A`. **Etykiety**: font `12px`, kolor `#757575` (jasny) / `#BDBDBD` (ciemny), weight `400`. **Układ formularza**: siatka 2-4 kolumn, etykieta po lewej (~100-140px stała szerokość), input `flex: 1`, gap między wierszami `8-12px`, sekcje oddzielone nagłówkami z marginesem `16-24px`. ### 4.3 Checkbox