Interní QA a autorská reference
ORIGONA - Design System
Privátní Bricks-only stránka pro kontrolu Theme Styles, OG/Core variables, global classes, layout rails a praktických authoring pravidel bez ACF, shortcode nebo PHP rendereru.
Rozsah
Stránka je určena jen pro interní authoring kontrolu a nevstupuje do navigace ani do obsahové struktury webu.
Pravidla
Základ tvoří běžné Bricks sekce, containery a bloky se stávajícími stabilními classes a OG/Core variables.
Kontrola Theme Styles
Tahle sekce ukazuje, jak se prvky chovají při co nejmenším počtu lokálních override a jestli je Origona Base dostatečná jako výchozí vrstva.
Ukázka výchozího H2
Ukázka výchozího H3
Text odstavce bez utility class ukazuje, jestli základní písmo, velikost, řádkování a kontrast sedí v globálním systému.
Ukázkový textový odkaz přímo v odstavci pro rychlou kontrolu Theme Style.
Výchozí tlačítko má ukázat, co obstará Theme Style bez explicitní class vrstvy.
Výchozí tlačítkoPokud se tady něco tluče, je to signál k revizi Theme Styles nebo token mapování.
Layoutové šířky
Kontrola šířky site, content a prose railu bez ad-hoc max-width hodnot. Všechno má jít přes OG layout variables.
site rail - var(--og-lay-site)
content rail - var(--og-lay-content)
prose rail - var(--og-lay-prose)
Gutter je řídicí vrstva pro horizontální odsazení shellu a nemá se obcházet vlastními px hodnotami.
Barvy povrchů a textu
Vzorky kombinací surface a text tokenů. Lokálně nastavené jen tam, kde je to potřeba pro demonstrační swatch.
Povrch page
Primární text na page povrchu
Povrch page soft
Sekundární text na soft povrchu
Brandový povrch sekce
Brandový text a jemné zvýraznění
Invertovaný povrch
Invertovaný text pro tmavé nebo překryvné situace
Typografická škála
Ukázka hlavních typografických rolí. Kombinace Theme Styles, utility classes a lokálních token referencí pro role, které zatím nemají samostatnou class vrstvu.
Role hero nadpisu
Role sekčního nadpisu
Role podnadpisu
Role pro vysvětlující copy a úvodní odstavce.
Role pro běžný obsah a vysvětlující texty.
Role pro pomocný text a jemné meta informace.
Role UI popisku
Role UI metainformace
Tlačítka a interakce
Kontrola stable button classes, state matrix pro default, hover, active, focus-visible a disabled stav a ověření, že focus má 2px outline, 2px offset a zelený focus ring token v demonstrační vrstvě.
Primary
default
Primární tlačítkohover
Primární tlačítkoactive
Primární tlačítkofocus-visible
Primární tlačítkodisabled
Primární tlačítkoSecondary
default
Sekundární tlačítkohover
Sekundární tlačítkoactive
Sekundární tlačítkofocus-visible
Sekundární tlačítkodisabled
Sekundární tlačítkoGhost button
default
Upravit pozdějihover
Upravit pozdějiactive
Upravit pozdějifocus-visible
Upravit pozdějidisabled
Upravit pozdějiPro reálnou kontrolu hover a focus stavu je potřeba otevřít frontend preview a projít sekci myší i klávesnicí. Tady je zelený focus ring zatím jen demonstrační override, Theme Styles se v tomto kroku nemění.
Karty a obsahové vzory
Jednoduché karty pro kontrolu povrchu, borderu, radiusu, vnitřního rytmu a vazby na button classes.
Redakční vzor
Ukázkový název karty
Kratší obsahová karta s CTA a čitelným vertikálním rytmem.
Zobrazit víceKontrola utility
Ztišený povrch karty
Vhodné pro tiché informační bloky nebo doprovodné patterny bez silné akce.
Brandový povrch
Zvýrazněná obsahová karta
Lehce zvýrazněný pattern pro jemnou prioritu bez agresivní vizuální dominance.
Primární akceFormuláře a focus stavy
Záměrně jen demonstrační field surfaces a stavy bez reálného odeslání formuláře nebo workflow vazeb.
Skutečný formulář
Ukazuje label, helper text, input, textarea a submit button přes reálný Bricks form element.
Stavy formuláře
Zvýrazněné pole
Chybový stav
Neplatná hodnota
Vypnuté pole
Mezery a rytmus
Kontrola stack, inline a inset spacing tokenů v typických authoring situacích.
Vertikální mezery
space-stack-xs
space-stack-s
space-stack-m
Vodorovné mezery
Vnitřní odsazení a rytmus panelu
Panelové odsazení má zůstat konzistentní s dalšími authoring patterny a neuhýbat do náhodných hodnot.
Poznámky k authoringu
Praktická pravidla pro další práci v Bricks na téhle stránce i na dalších Bricks-native šablonách.
1. Finální layout má zůstat čitelný ve Structure Panelu po sekcích, ne jako jeden blob.
2. Theme Styles jsou výchozí vrstva, lokální override patří jen do demonstračních vzorků nebo skutečných výjimek.
3. Nové authoring práce nemají stavět na legacy ds-* classes ani legacy space-* nebo text-* variables.
4. Tohle je referenční QA stránka, ne veřejná landing page ani zdroj obsahu pro ACF.
5. Další krok je ruční vizuální kontrola v Bricks a na frontendu pro desktop, tablet a mobile.