/* ============================================================ RS Shell — design tokens Jasny tryb (default) + ciemny tryb via [data-rs-theme="dark"] ============================================================ */ /* KONTROLKI NATYWNE ZNAJĄ MOTYW (0.24.0). `color-scheme` to jedyny sposób, żeby strzałka narysowały się w kolorach motywu — tokeny CSS ich nie dosięgają, bo rysuje je przeglądarka, nie arkusz. Bez tego karta produktu musiała podmieniać strzałkę selecta własnym SVG z zaszytym `#6c7a89` (card-v3.css:127) — jedyny hex w tym arkuszu i przy okazji strzałka, która w ciemnym motywie zostawała szara. Deklaracja tutaj kasuje potrzebę takiej łatki na wszystkich ekranach naraz. */ :root, [data-rs-theme="light"] { color-scheme: light; --rs-bg: #f5f8fb; --rs-surface: #ffffff; --rs-surface-2: #f0f4f8; --rs-border: #e6ebef; --rs-border-strong: #d0dae4; --rs-text: #1f2d3d; --rs-text-muted: #6c7a89; --rs-text-faint: #9ab0c8; --rs-blue: #295bb3; --rs-blue-light: #eef4ff; --rs-blue-mid: #c5d8ff; --rs-green: #1f7a3d; --rs-green-light: #e7f7ed; --rs-red: #b33838; --rs-red-light: #fff1f1; --rs-orange: #b36a00; --rs-orange-light: #fff7e8; --rs-accent: #295bb3; --rs-accent-subtle: #eef4ff; --rs-accent-border: #c5d8ff; /* KOLOR MARKI RapidStore (brief ikon §3.2, decyzja Rafała 2026-07-09): gradient brandowy całego projektu (ikony modułów, przyszłe logo RS). Identyczny w OBU motywach (nieredefiniowany w dark — dziedziczy stąd); biały glif ma kontrast na obu. Wyłącznie do tożsamości RS zatwierdzonej przez Rafała — NIE jako ogólna paleta UI. */ --rs-brand-grad-start: #E6391F; --rs-brand-grad-end: #F58A1E; /* RS UI Kit v2 (decyzja 01, 2026-07-26): AKCJA GŁÓWNA przechodzi na rodzinę MARKI (dotąd primary = akcent niebieski). Niebieski zostaje kolorem INFORMACJI, mastera, nawigacji, zaznaczenia i focusu (--rs-accent). Gradient (--rs-brand-gradient) tylko do tożsamości: pierścienie postępu, paski wypełnienia, plakietka „Definicja RS", logo — NIE jako tło przycisku. Jedno źródło gradientu = grad-start/end powyżej. */ --rs-brand: #C8431A; --rs-brand-hover: #A9360F; --rs-brand-subtle: #FFF1EA; --rs-brand-border: #F6C9B2; --rs-brand-gradient: linear-gradient(120deg, var(--rs-brand-grad-start), var(--rs-brand-grad-end)); /* Font UI: Inter (RS UI Kit partia 1, decyzja Rafała 2026-07-09) — self-hosted w fonts.css, Gotham X Narrow wycofywany po migracji fali 1. */ --rs-font: 'Inter', -apple-system, 'Segoe UI', sans-serif; --rs-sidebar-w: 70px; --rs-panel-w: 260px; --rs-topbar-h: 70px; /* --rs-radius-xs (NOWY, partia 1): chipy, pigułki, pola w tabelach — koniec wymyślania 4/7/8/9 px w modułach. */ --rs-radius-xs: 6px; --rs-radius-sm: 10px; --rs-radius-md: 12px; --rs-radius-lg: 14px; --rs-radius-xl: 18px; --rs-radius-pill: 999px; --rs-shadow-sm: 0 1px 4px rgba(0,0,0,.06); --rs-shadow-md: 0 2px 8px rgba(0,0,0,.08); --rs-shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.25); /* ── Czasy przejść (D21) ── fast = najczęstszy czas w arkuszach (58 użyć przez --rs-transition), base = wejścia powiadomień i okien, slow = paski postępu. */ --rs-duration-fast: 140ms; --rs-duration-base: .18s; --rs-duration-slow: .35s; --rs-ease: cubic-bezier(.4,0,.2,1); --rs-transition: var(--rs-duration-fast) var(--rs-ease); /* ── Semantyczne kolory granic alertów / statusów ── */ --rs-green-mid: #bfe7cb; --rs-red-mid: #f5c2c7; --rs-orange-mid: #ffe5a6; /* ── Role kolorów (D21) ── nazwa mówi, CO kolor znaczy, a nie jaką ma barwę. Aliasy istniejących barw: wartości te same. Nowy kod sięga po rolę; nazwy barw (--rs-green…) zostają dla arkuszy przeniesionych. Powtórzone w motywie ciemnym celowo — alias zdefiniowany tylko tutaj rozwinąłby się do jasnych barw, gdyby motyw ustawiono na elemencie niżej niż . */ --rs-success: var(--rs-green); --rs-success-subtle: var(--rs-green-light); --rs-success-border: var(--rs-green-mid); --rs-danger: var(--rs-red); --rs-danger-subtle: var(--rs-red-light); --rs-danger-border: var(--rs-red-mid); --rs-warning: var(--rs-orange); --rs-warning-subtle: var(--rs-orange-light); --rs-warning-border: var(--rs-orange-mid); --rs-info: var(--rs-blue); --rs-info-subtle: var(--rs-blue-light); --rs-info-border: var(--rs-blue-mid); /* Tekst i ikona na wypełnieniu kolorem (przycisk główny, plakietka, aktywny czip) — biały w obu motywach. */ --rs-on-fill: #fff; /* ── Kod / terminal ── */ --rs-code-bg: #1e2430; /* ── Cienie ── */ --rs-shadow-card: 0 2px 8px rgba(0,0,0,.06); /* ── Odstępy ── */ --rs-spacing-xs: 6px; --rs-spacing-sm: 12px; --rs-spacing-md: 20px; --rs-spacing-lg: 32px; /* ════════════════════════════════════════════════════════════ SKALE (decyzja D21) — stopnie dobrane z pomiaru arkuszy: weszły wartości najczęstsze. Arkusze używają tokenu tylko tam, gdzie literał był DOKŁADNIE równy stopniowi; wartości spoza skali (np. 12.5px) zostały literałami do decyzji właściciela. ════════════════════════════════════════════════════════════ */ /* ── Pismo: rozmiar ── */ --rs-text-2xs: 10px; --rs-text-xs: 11px; --rs-text-sm: 12px; --rs-text-base: 13px; --rs-text-md: 14px; --rs-text-lg: 16px; --rs-text-xl: 18px; --rs-text-2xl: 20px; --rs-text-3xl: 22px; --rs-text-4xl: 24px; /* ── Ikona: rozmiar glifu (osobna skala — ikona nie jest pismem) ── */ --rs-icon-xs: 16px; --rs-icon-sm: 18px; --rs-icon-md: 20px; --rs-icon-lg: 22px; --rs-icon-xl: 24px; /* ── Pismo: grubość ── */ --rs-weight-regular: 400; --rs-weight-medium: 500; --rs-weight-semibold: 600; --rs-weight-bold: 700; --rs-weight-heavy: 800; /* ── Pismo: interlinia ── */ --rs-leading-none: 1; --rs-leading-tight: 1.2; --rs-leading-normal: 1.5; --rs-leading-relaxed: 1.6; /* ── Odstępy ── liczba w nazwie to piksele. Siatka co 2 px do 20, dalej 24 / 32 / 48. (--rs-spacing-xs…lg powyżej to starsza, czterostopniowa skala — nieużywana w żadnym arkuszu.) */ --rs-space-2: 2px; --rs-space-4: 4px; --rs-space-6: 6px; --rs-space-8: 8px; --rs-space-10: 10px; --rs-space-12: 12px; --rs-space-14: 14px; --rs-space-16: 16px; --rs-space-18: 18px; --rs-space-20: 20px; --rs-space-24: 24px; --rs-space-32: 32px; --rs-space-48: 48px; /* ── Warstwy (z-index) ── od najniższej. Między stopniami zostają w arkuszach pojedyncze wartości pośrednie (60, 70, 150, 300, 501, 599, 620, 1990, 1995) — wypisane w raporcie przeglądu arkuszy. */ --rs-z-raised: 1; /* element nad sąsiadem w tym samym bloku */ --rs-z-sticky: 30; /* pasek przyklejony do krawędzi treści */ --rs-z-dropdown: 40; /* menu rozwijane */ --rs-z-tooltip: 45; /* dymek podpowiedzi */ --rs-z-nav: 200; /* pasek ikon nawigacji */ --rs-z-overlay: 500; /* zasłona i menu nad całą powłoką */ --rs-z-panel: 600; /* panel wysuwany z boku */ --rs-z-modal: 1050; /* okno modalne z tłem */ --rs-z-lightbox: 1900; /* podgląd pełnoekranowy */ --rs-z-toast: 2000; /* powiadomienia — zawsze na wierzchu */ /* ── Progi ekranu ── własności CSS nie działają w warunku @media, więc progi są stałymi NAZWANYMI tutaj i wpisywanymi liczbą: telefon max-width: 480px (ui-kit: 4) tablet max-width: 768px (shell: 4; para: min-width: 769px) wąski max-width: 900px (ui-kit: 5; para: min-width: 900px) średni max-width: 1199px (ui-kit: 2) Poza nazwanymi w arkuszach są jeszcze: 600, 640, 720, 860 (login), 899, 1600 — nowy kod ich nie powiela, wybiera jeden z czterech powyżej. */ } [data-rs-theme="dark"] { color-scheme: dark; --rs-bg: #111620; --rs-surface: #1a2030; --rs-surface-2: #212840; --rs-border: rgba(255,255,255,.08); --rs-border-strong: rgba(255,255,255,.14); --rs-text: #e2e8f0; --rs-text-muted: #7a90a8; --rs-text-faint: #4a6080; --rs-blue: #6699ff; --rs-blue-light: rgba(102,153,255,.12); --rs-blue-mid: rgba(102,153,255,.3); --rs-green: #4ade80; --rs-green-light: rgba(74,222,128,.12); --rs-red: #ff6b6b; --rs-red-light: rgba(255,107,107,.12); --rs-orange: #ffb347; --rs-orange-light: rgba(255,179,71,.12); --rs-accent: #6699ff; --rs-accent-subtle: rgba(102,153,255,.12); --rs-accent-border: rgba(102,153,255,.3); /* ── Marka (dark) — Kit v2. --rs-brand/-hover dziedziczą z :root (#C8431A daje biały tekst 4.6:1 na wypełnieniu, poprawne w obu motywach); tu tylko subtle/border, bo jasny #FFF1EA byłby białą plamą na ciemnym tle. ── */ --rs-brand-subtle: rgba(200,67,26,.18); --rs-brand-border: rgba(200,67,26,.38); /* ── Semantyczne kolory granic alertów / statusów (dark mode) ── */ --rs-green-mid: rgba(74,222,128,.3); --rs-red-mid: rgba(255,107,107,.3); --rs-orange-mid: rgba(255,179,71,.3); /* ── Kod / terminal (dark mode) ── */ --rs-code-bg: #111620; /* ── Cienie (dark mode) ── */ --rs-shadow-card: 0 2px 8px rgba(0,0,0,.30); /* ── Role kolorów (dark mode) — zob. komentarz w trybie jasnym ── */ --rs-success: var(--rs-green); --rs-success-subtle: var(--rs-green-light); --rs-success-border: var(--rs-green-mid); --rs-danger: var(--rs-red); --rs-danger-subtle: var(--rs-red-light); --rs-danger-border: var(--rs-red-mid); --rs-warning: var(--rs-orange); --rs-warning-subtle: var(--rs-orange-light); --rs-warning-border: var(--rs-orange-mid); --rs-info: var(--rs-blue); --rs-info-subtle: var(--rs-blue-light); --rs-info-border: var(--rs-blue-mid); }