Referencja zmiennych CSS

Zmienne CSS (custom properties) to podstawowy mechanizm restylingu scen z motywu bez forkowania SCSS pluginu. Kontekst prozy i klasy BEM w Storefront → Customizacja CSS.

Pliki źródłowe: src/Resources/app/storefront/src/scss/base.scss (shell, close button, countdown, coupon) i src/Resources/app/storefront/src/scss/stage-grid.scss (layout grid).

Shell

Ustawione na .p2lab-stage__shell i .p2lab-stage__shell-wrap.

Zmienna	Przeznaczenie
--p2lab-stage-z	Z-index sceny. Domyślnie 9999.
--p2lab-stage-shell-width	Projektowa szerokość shella (px).
--p2lab-stage-shell-height	Projektowa wysokość shella (px).
--p2lab-stage-shell-padding-top / -right / -bottom / -left	Wewnętrzny padding wokół warstw.
--p2lab-stage-shell-bg-color	Kolor tła.
--p2lab-stage-shell-bg-image	Obraz tła (url(...)).
--p2lab-stage-shell-bg-size	cover / contain / stretch / auto.
--p2lab-stage-shell-bg-pos	center, top, bottom, left, right, rogi.
--p2lab-stage-shell-bg-repeat	no-repeat / repeat / repeat-x / repeat-y.
--p2lab-stage-shell-backdrop-filter	Wartość CSS backdrop-filter (np. blur(8px)).
--p2lab-stage-shell-border-width	Szerokość zewnętrznej ramki.
--p2lab-stage-shell-border-style	none / solid / dashed / dotted / double.
--p2lab-stage-shell-border-color	Kolor ramki.
--p2lab-stage-shell-border-radius	CSS border-radius.
--p2lab-stage-shell-box-shadow	Wartość CSS box-shadow.

Większość jest sterowana przez modal Stage Settings (sekcje Canvas / Background / Frame / Border).

Close button

Ustawione na .p2lab-stage__close. Sterowane przez Style Inspector w Stage Settings → Close button.

Zmienna	Przeznaczenie
--p2lab-stage-close-size / -width / -height	Rozmiar buttona.
--p2lab-stage-close-offset	Offset pozycji od rogu.
--p2lab-stage-close-color	Kolor ikony.
--p2lab-stage-close-bg / --p2lab-stage-close-background-color	Kolor tła.
--p2lab-stage-close-background-image	Obraz tła.
--p2lab-stage-close-hover-bg	Kolor tła przy hover.
--p2lab-stage-close-padding-top / -right / -bottom / -left	Wewnętrzny padding.
--p2lab-stage-close-border-top-width / -right-width / -bottom-width / -left-width	Szerokość ramki per strona.
--p2lab-stage-close-border-top-style / -right-style / -bottom-style / -left-style	Style ramki per strona.
--p2lab-stage-close-border-top-color / -right-color / -bottom-color / -left-color	Kolory ramki per strona.
--p2lab-stage-close-border-top-left-radius / -top-right-radius / -bottom-left-radius / -bottom-right-radius	Promienie per róg.
--p2lab-stage-close-radius	Skrót dla jednolitego radius.
--p2lab-stage-close-font-family / -font-size / -font-weight	Typografia znaku ikony.
--p2lab-stage-close-box-shadow	Drop shadow.
--p2lab-stage-close-opacity	Opacity.

Slider

Zmienna	Przeznaczenie
--p2lab-stage-slider-transition-ms	Czas trwania przejścia slajdów. Domyślnie 600ms.

Widget coupon

Ustawione na .p2lab-stage__layer warstw typu coupon.

Zmienna	Przeznaczenie
--p2lab-coupon-code-color	Kolor tekstu kodu.
--p2lab-coupon-code-font-family / -font-size / -font-weight	Typografia kodu.
--p2lab-coupon-code-letter-spacing / -line-height	Odstępy typograficzne.
--p2lab-coupon-code-text-decoration / -text-transform	Dekoracja / casing.
--p2lab-coupon-copy-icon-color	Kolor ikony.
--p2lab-coupon-copy-icon-opacity	Opacity ikony.
--p2lab-coupon-copy-icon-width	Rozmiar ikony.
--p2lab-stage-coupon-copied-msg	Treść toastu (content).

Widget countdown

Ustawione na .p2lab-stage__layer warstw typu countdown. Countdown ma dwie rodziny tekstu (cyfry value + label jednostek) plus per-jednostka styling boxa.

Value (cyfry)

Zmienna	Przeznaczenie
--p2lab-countdown-value-color	Kolor cyfry.
--p2lab-countdown-value-font-family / -font-size / -font-weight	Typografia cyfry.
--p2lab-countdown-value-letter-spacing / -line-height	Odstępy typograficzne.
--p2lab-countdown-value-text-decoration / -text-transform	Dekoracja / casing.

Label

Zmienna	Przeznaczenie
--p2lab-countdown-label-color	Kolor labela.
--p2lab-countdown-label-font-family / -font-size / -font-weight	Typografia labela.
--p2lab-countdown-label-letter-spacing / -line-height / -opacity	Odstępy + alpha.
--p2lab-countdown-label-text-decoration / -text-transform	Dekoracja / casing.

Box jednostki

Per-strona borders + radii + paddings:

Zmienna	Przeznaczenie
--p2lab-countdown-unit-background-color	Tło boxa.
--p2lab-countdown-unit-border-top-color / -right-color / -bottom-color / -left-color	Kolory ramki per strona.
--p2lab-countdown-unit-border-top-style / -right-style / -bottom-style / -left-style	Style ramki per strona.
--p2lab-countdown-unit-border-top-width / -right-width / -bottom-width / -left-width	Szerokość ramki per strona.
--p2lab-countdown-unit-border-top-left-radius / -top-right-radius / -bottom-left-radius / -bottom-right-radius	Promienie per róg.
--p2lab-countdown-unit-padding-top / -right / -bottom / -left	Wewnętrzny padding per strona.

Layout grid (section / row / column)

Z stage-grid.scss. Aplikuje gdy Content mode = Grid (responsive columns).

Section

Zmienna	Przeznaczenie
--p2lab-section-gap	Gap między rowami.
--p2lab-section-padding	Wewnętrzny padding.
--p2lab-section-max-width	Max szerokość przed wycentrowaniem.
--p2lab-section-bg	Tło.
--p2lab-section-align	align-items.

Row

Zmienna	Przeznaczenie
--p2lab-row-gap	Gap między kolumnami.
--p2lab-row-mobile-gap	Gap przy <640px.
--p2lab-row-align	align-items.
--p2lab-row-justify	justify-content.

Column

Zmienna	Przeznaczenie
--p2lab-col-xs / -sm / -md / -lg / -xl / -xxl	Flex-basis per breakpoint.
--p2lab-col-padding	Wewnętrzny padding.
--p2lab-col-gap	Gap między warstwami treści.
--p2lab-col-align	align-items.
--p2lab-col-justify	justify-content.
--p2lab-col-bg	Tło.

Gdzie dalej

• Storefront → Customizacja CSS — przykłady i referencja klas BEM.
• Edytor → Stage Settings — UI sterujący większością zmiennych shella.
• Edytor → Warstwy — warstwy kompozytowe (countdown / coupon).