/* ============================================================================ PIM V4 — SKÓRKA v2 — warstwa design-tokenów + spójność jasny/ciemny ============================================================================ CEO 2026-06-13: panel ma DWIE pełne wersje (jasną i ciemną) przełączane JEDNYM globalnym przełącznikiem w profilu. Motyw ustawia na każdej stronie (mechanizm w dashboard_app.py). Ten plik: 1) DOSTARCZA nowe tokeny marki/odstępów/cieni/rogów, których stary styles.css nie ma (brand #005FAD, rogi 2px, --surface-*, --shadow-*) — CZYSTO DODAJE, nie nadpisuje istniejących tokenów motywu → tryb ciemny zostaje nietknięty. 2) W TRYBIE JASNYM dodaje DEFINICJĘ (kontrast pasków, cienie/ramki paneli), żeby gęste ekrany nie były wyblakłe. Zakres: html[data-theme="light"] — czyli tryb ciemny w 100% bez zmian. Kanon: jasny = wzorzec /orders, rogi 2px, kolory marki. Kill-switch: ?skin=off. Pełny przewodnik: docs/skills/design_system_canon.md ============================================================================ */ /* ============================================================================ 1. NOWE TOKENY (których styles.css nie definiuje) — DODAJEMY, nie nadpisujemy ============================================================================ */ :root { --brand-primary-600: #005FAD; --brand-primary-700: #004B8A; --brand-primary-100: #F3F9FF; --brand-primary-200: #C9E5FC; --brand-primary-opacity-04: rgba(0, 95, 173, 0.04); --brand-primary-opacity-06: rgba(0, 95, 173, 0.06); --brand-success-700: #147042; --brand-success-100: #EDF8F2; --brand-success-200: #BFE6CE; --brand-warning-600: #EB840F; --brand-warning-100: #FEF5EB; --brand-warning-200: #FAD9A8; --brand-danger-800: #B9453A; --brand-danger-100: #FEF2F0; --brand-danger-200: #F4C7C0; /* ── FIOLET + TURKUS (2026-06-22): brakujące rodziny dla badge'y konfiguracji marketplace (Allegro/eMAG). Wcześniej te kolory były hardkodowane (#7c3aed, #0f766e itd.) i NIE zmieniały się z motywem → w trybie ciemnym tekst znikał. Soft(100)=tło, 200=ramka, 700=tekst/solid. Dark = jasne wersje, czytelne. ── */ --brand-purple-100: #f3e8ff; --brand-purple-200: #d8b4fe; --brand-purple-700: #6d28d9; --brand-teal-100: #ccfbf1; --brand-teal-200: #99f6e4; --brand-teal-700: #0f766e; --gray-100: #f3f4f6; --gray-300: #d1d5db; --gray-700: #5f6f86; --surface-page: #eef3f9; --surface-card: #ffffff; --surface-elevated: #f4f8fc; --surface-input: #ffffff; --surface-divider: #d7e0ec; --text-primary: #172435; --text-secondary: #4E565F; --text-muted: #5f6f86; --text-on-brand: #ffffff; --spacing-1: 4px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-8: 32px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 10px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12); /* ROGI 2px WSZĘDZIE — kanon CEO (kanciaste, jak /orders), także pigułki/badge. */ --radius-sm: 2px; --radius-md: 2px; --radius-lg: 2px; --radius-full: 2px; --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-lg: 16px; --font-size-xl: 20px; --line-height-tight: 1.25; --line-height-normal: 1.5; --table-head-bg: rgba(0, 0, 0, 0.05); --table-row-hover: rgba(0, 95, 173, 0.05); --table-row-selected: rgba(0, 95, 173, 0.09); --pim-nav-top-offset: 44px; /* ── LEGACY ALIASY (systemowy fix 2026-06-14): te nazwy były NIEZDEFINIOWANE, więc var(--card-bg, #1e1e2e) wpadał w CIEMNY fallback na jasnej stronie (~150 użyć = główne źródło ciemnych kafli). Mapujemy na tokeny → themed. ── */ --card-bg: var(--surface-card); --bg-card: var(--surface-card); --panel-bg: var(--surface-card); --modal-bg: var(--surface-card); --row-bg: var(--surface-card); --card-bg-2: var(--surface-card); --input-bg: var(--surface-input); --header-bg: var(--surface-elevated); --surface-secondary: var(--surface-elevated); --bg-secondary: var(--surface-elevated); --bg-elevated: var(--surface-elevated); --bg-primary: var(--surface-page); --bg-tertiary: var(--surface-divider); --text-light: var(--text-secondary); --fg: var(--text-primary); /* ── 2. RUNDA aliasów (2026-06-14): te NIE są zdefiniowane NIGDZIE, więc var(--table-header-bg, #333) itp. zawsze wpadały w CIEMNY fallback (także w jasnym). Mapujemy na themed tokeny → poprawne w obu motywach. ── */ --table-header-bg: var(--table-head-bg); /* 153× — ciemne nagłówki tabel */ --border: var(--border-color); /* 21× */ --input-border: var(--surface-divider); --nav-input-border: var(--surface-divider); --pk-border: var(--surface-divider); /* price tiers */ --zwg-text: var(--text-primary); /* ZakupyWGodzine */ --text: var(--text-primary); --hover-bg: var(--table-row-hover); --secondary-bg: var(--surface-elevated); --admin-ai-bg: var(--surface-card); --admin-ai-border: var(--surface-divider); /* ── 3. RUNDA (2026-06-14, z walidatora audit_skin_dark_fallbacks): aliasy używane WYŁĄCZNIE jako tło, niezdefiniowane → ciemny fallback. ── */ --bg-active: var(--table-row-selected); --secondary-color: var(--surface-elevated); --admin-ai-input-bg: var(--surface-input); --widget-bg: var(--surface-card); --bg-body: var(--surface-page); /* ── 4. RUNDA (CEO 2026-06-21): te 4 były NADAL niezdefiniowane mimo masowego użycia (--text-color 2567×, --border-color 16226×, --bg-color 696×, --accent-color 371×). var(--text-color, #eee) dawał JASNY tekst na JASNYM tle = nieczytelne na wielu zakładkach (Ustawienia itd.). Mapujemy na themed tokeny → poprawne w jasnym i ciemnym. ── */ --text-color: var(--text-primary); --bg-color: var(--surface-page); --border-color: var(--surface-divider); --accent-color: var(--brand-primary-600); /* ── PALETA KPI (2026-06-14): jasne neony flat-UI (zielony/pomarańcz/niebieski...) miały kontrast <3 na BIAŁYM. Tu = ciemniejsze, czytelne na jasnym. W ciemnym motywie (blok html[data-theme="dark"]) wracają jasne neony. Używać dla TEKSTU liczb/statusów na kartach — NIE dla teł wykresów (canvas nie czyta var()). ── */ --kpi-green: #15803d; --kpi-orange: #c2410c; --kpi-blue: #1d6fa5; --kpi-purple: #7e3a9e; --kpi-red: #c0392b; --kpi-gray: var(--text-secondary); --kpi-teal: #0f766e; } html[data-theme="dark"] { --brand-primary-600: #3b82f6; --brand-primary-700: #60a5fa; --brand-primary-100: #1e2d44; --brand-primary-200: #1e3a5f; --brand-primary-opacity-04: rgba(59, 130, 246, 0.08); --brand-primary-opacity-06: rgba(59, 130, 246, 0.12); --brand-success-700: #22c55e; --brand-success-100: #052e1b; --brand-success-200: #0f4a2e; --brand-warning-600: #f59e0b; --brand-warning-100: #422006; --brand-warning-200: #6b3a0c; --brand-danger-800: #ef4444; --brand-danger-100: #450a0a; --brand-danger-200: #6e1f1f; --brand-purple-100: #2e1065; --brand-purple-200: #5b21b6; --brand-purple-700: #8b5cf6; /* średnio-nasycony: biały tekst na solidnym tle czytelny + jako tekst na ciemnym OK */ --brand-teal-100: #042f2e; --brand-teal-200: #0f5a55; --brand-teal-700: #14b8a6; --gray-100: #334155; --gray-300: #475569; --gray-700: #94a3b8; --surface-page: #0f172a; --surface-card: #1e293b; --surface-elevated: #334155; --surface-input: #1e293b; --surface-divider: #334155; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --text-on-brand: #ffffff; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.40); --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.40); --table-head-bg: rgba(255, 255, 255, 0.06); --table-row-hover: rgba(59, 130, 246, 0.10); --table-row-selected: rgba(59, 130, 246, 0.16); /* Paleta KPI — w ciemnym motywie jasne neony (czytelne na ciemnym tle). */ --kpi-green: #2ecc71; --kpi-orange: #e67e22; --kpi-blue: #3498db; --kpi-purple: #9b59b6; --kpi-red: #e74c3c; --kpi-gray: #95a5a6; --kpi-teal: #5eead4; } /* ============================================================================ 2. TRYB JASNY — DEFINICJA (żeby gęste ekrany nie były wyblakłe). Zakres tylko html[data-theme="light"] → TRYB CIEMNY NIETKNIĘTY. ============================================================================ */ /* Paski monitoringu (CPU/RAM/dysk) — mocniejszy kontrast na białym */ html[data-theme="light"] { --bar-bg-color: #dde7f2; --bar-color-normal: #2f80ed; --bar-color-high: #1f6feb; --bar-color-crit: #005FAD; } /* Karty/panele — dodaj cień i wyraźniejszą ramkę, żeby "odbijały" się od tła */ html[data-theme="light"] .widget-section, html[data-theme="light"] .summary-card, html[data-theme="light"] .report-chart, html[data-theme="light"] .report-table, html[data-theme="light"] .proc-card, html[data-theme="light"] .product-lookup-card, html[data-theme="light"] .modal-content { box-shadow: var(--shadow-sm); border-color: var(--surface-divider) !important; background-color: var(--surface-card) !important; } /* Nagłówki widżetów / sekcji — subtelne tło, żeby były czytelne */ html[data-theme="light"] .widget-header, html[data-theme="light"] .widget-footer { background-color: #f5f8fc; color: var(--text-primary); } /* Nagłówki tabel monitoringu — widoczne na białym (były rgba białe = nikłe) */ html[data-theme="light"] .proc-table thead th, html[data-theme="light"] thead th { background-color: rgba(0, 95, 173, 0.06); color: var(--text-secondary); } /* Subtelne paski naprzemienne rzędów (były białe-przezroczyste = niewidoczne) */ html[data-theme="light"] tbody tr:nth-child(even) { background-color: rgba(0, 0, 0, 0.025); } html[data-theme="light"] .proc-table tbody tr:hover { background-color: var(--table-row-hover); } /* ============================================================================ 3. KOMPONENTY — bezpieczny polish (rogi 2px + fokus + scrollbar). BEZ nadpisywania kolorów motywu (tła/tekstu) → nie psuje żadnego motywu. ============================================================================ */ html.skin-v2 :focus-visible { outline: 2px solid var(--brand-primary-600); outline-offset: 1px; } html.skin-v2 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.skin-v2 select, html.skin-v2 textarea, html.skin-v2 button, html.skin-v2 .btn, html.skin-v2 .card, html.skin-v2 .panel, html.skin-v2 .widget-section, html.skin-v2 .modal-content { border-radius: var(--radius-sm); } /* Paski przewijania — spójne i subtelne */ html.skin-v2 ::-webkit-scrollbar { width: 10px; height: 10px; } html.skin-v2 ::-webkit-scrollbar-thumb { background: rgba(127, 140, 160, 0.5); border-radius: var(--radius-sm); border: 2px solid transparent; background-clip: content-box; } html.skin-v2 ::-webkit-scrollbar-thumb:hover { background: rgba(127, 140, 160, 0.75); } html.skin-v2 ::-webkit-scrollbar-track { background: transparent; } html.skin-v2 ::selection { background: var(--brand-primary-200); color: #172435; } /* ============================================================================ 4. KAFLE NAWIGACJI — ZAWSZE WIDOCZNE (CEO 2026-06-14) Strony quasi-standalone (np. /zurnal) NIE ładują styles.css, więc zmienne --nav-* są niezdefiniowane → kafle były przezroczyste bez ramki ("same napisy"). Skórka jest wstrzykiwana WSZĘDZIE — tu fallback gwarantuje widoczny kafel (biały + ramka w jasnym, ciemny + ramka w ciemnym) niezależnie od --nav-*. ============================================================================ */ html.skin-v2 .global-navigation-header .action-button.nav-fixed-btn, html.skin-v2 .global-navigation-header .nav-grid-item { background: var(--nav-tile-bg, var(--surface-card)); color: var(--nav-text, var(--text-primary)); border: 1px solid var(--nav-border, var(--surface-divider)); font-weight: 600; } /* Menu MA wyglądać identycznie wszędzie (CEO): strony-samodzielne (calendar/zurnal/czat) miały podkreślony tekst z domyślnego `a` — zdejmujemy je tu (skórka = wszędzie). */ html.skin-v2 .global-navigation-header a, html.skin-v2 .global-navigation-header .nav-item-label, html.skin-v2 .global-navigation-header .action-button { text-decoration: none !important; } html.skin-v2 .global-navigation-header .action-button.nav-fixed-btn:hover { background: var(--nav-hover-bg, var(--brand-primary-100)); color: var(--nav-text, var(--text-primary)); } html.skin-v2 .global-navigation-header .action-button.nav-fixed-btn.active { background: var(--nav-accent, var(--brand-primary-600)); color: #fff; border-color: transparent; } /* CEO 2026-06-21: pasek wykorzystania limitu kupieckiego w raporcie dostawcy. Tylko tokeny skorki v2 (ZASADA #-58): jasny default + ciemny przez data-theme. */ .si-credit-bar { margin: 12px 0 0; padding: 10px 12px; background: var(--surface-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); } .si-credit-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; } .si-credit-bar-head span:last-child { font-weight: 700; color: var(--text-primary); } .si-credit-bar-track { height: 10px; background: var(--surface-page); border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; } .si-credit-bar-fill { height: 100%; width: 0; background: var(--brand-primary-600); border-radius: var(--radius-sm); transition: width .3s ease; } .si-credit-bar.warn .si-credit-bar-fill { background: var(--brand-warning-600); } .si-credit-bar.over .si-credit-bar-fill { background: var(--brand-danger-800); }