/* ============================================================ palette.css - JEDYNE zrodlo prawdy o kolorach strony. Zmiana wariantu = zmiana atrybutu data-paleta w , nic wiecej. Nie wpisywac kolorow nigdzie indziej: ani w style.css, ani w HTML. Barwy nie sa dobrane na oko - sa odczytane z pliku logo (Logo-fb-Waldorfski-PP-300x300.png) skryptem logo_paleta.py. W logo NIE MA czerwieni: sa zolc, brzoskwinia, koral, roz, fiolet, blekit, zielen, a napis jest zielony (#1F5D29). Dwa kontrasty trzeba pilnowac naraz: pas <-> tekst - zeby dalo sie czytac (min 4,5:1, WCAG AA) pas <-> pas - zeby fala miala czym narysowac ksztalt Pilnowanie tylko pierwszego splaszcza palete: tak powstal wariant f3, w ktorym widac bylo wylacznie ciemny rant, jak narysowana kreske. Sufit: zielen napisu ma luminancje 0,083, wiec maksymalny osiagalny kontrast z nia to 7,9:1 - nawet przy czystej bieli. Cele powyzej wypychaja barwy do #FFFFFF i gubia kolor. Plik GENEROWANY przez koncepcje/_generator/build_site.py. ============================================================ */ :root, :root[data-paleta="f3c"]{ /* f3c - najslabszy kontrast z tekstem 4.62, sredni kontrast sasiednich pasow 1.06 */ --c1:#FEE27A; --c2:#FDCD96; --c3:#FDB4A8; --c4:#EFB9CE; --c5:#D3C1E4; --c6:#87D2E6; --c7:#A4D1AC; --p1:#FED888; --p2:#FDC09F; --p3:#F6B6BB; --p4:#E1BDD9; --p5:#ADCAE5; --p6:#96D2C9; --q1:#FDCD95; --q2:#FDB4A8; --q3:#EFB9CD; --q4:#D4C1E4; --q5:#89D2E6; --q6:#A3D1AD; --c1-light:#FEE68D; --akcent:#C1205F; --gold:#C1205F; --rant-krycie:0; --rant-1:#B19068; --rant-2:#B17E76; --rant-3:#A78290; --rant-4:#9487A0; --rant-5:#6093A1; --rant-6:#729279; } :root[data-paleta="f3b"]{ /* f3b - najslabszy kontrast z tekstem 4.66, sredni kontrast sasiednich pasow 1.29 */ --c1:#FEEA9F; --c2:#FCBA6E; --c3:#FED4CD; --c4:#EFB8CE; --c5:#E6DBF0; --c6:#89D3E7; --c7:#CFE7D4; --p1:#FDD286; --p2:#FDC79E; --p3:#F6C6CE; --p4:#EACADF; --p5:#B8D7EC; --p6:#ACDDDE; --q1:#FCBB6F; --q2:#FED3CB; --q3:#EFB9CE; --q4:#E6DAEF; --q5:#8BD3E7; --q6:#CEE7D4; --c1-light:#FEEDAC; --akcent:#C62161; --gold:#C62161; --rant-krycie:.22; --rant-1:#D49D5D; --rant-2:#D5B1AB; --rant-3:#C99BAD; --rant-4:#C1B7C9; --rant-5:#75B1C2; --rant-6:#ADC2B2; } :root[data-paleta="f3"]{ /* f3 - najslabszy kontrast z tekstem 4.62, sredni kontrast sasiednich pasow 1.06 */ --c1:#FEE27A; --c2:#FDCD96; --c3:#FDB4A8; --c4:#EFB9CE; --c5:#D3C1E4; --c6:#87D2E6; --c7:#A4D1AC; --p1:#FED888; --p2:#FDC09F; --p3:#F6B6BB; --p4:#E1BDD9; --p5:#ADCAE5; --p6:#96D2C9; --q1:#FDCD95; --q2:#FDB4A8; --q3:#EFB9CD; --q4:#D4C1E4; --q5:#89D2E6; --q6:#A3D1AD; --c1-light:#FEE68D; --akcent:#C1205F; --gold:#C1205F; --rant-krycie:.40; --rant-1:#B19068; --rant-2:#B17E76; --rant-3:#A78290; --rant-4:#9487A0; --rant-5:#6093A1; --rant-6:#729279; } /* tekst i akcenty - wspolne dla wszystkich wariantow */ :root{ --ink:#1F5D29; --ink-soft:#3B6E45; --on-dark:#1F5D29; --dim-on-dark:#3B6E45; --on-warm:#1F5D29; --on-yellow:#1F5D29; }