CSS variables (custom properties) are the primary mechanism for restyling stages from a theme without forking the plugin SCSS. For prose context and BEM classes see Storefront → CSS customization.
Source files: src/Resources/app/storefront/src/scss/base.scss (shell, close button, countdown, coupon) and src/Resources/app/storefront/src/scss/stage-grid.scss (grid layout).
Set on .p2lab-stage__shell and .p2lab-stage__shell-wrap.
| Variable | Purpose |
|---|
--p2lab-stage-z | Z-index of the stage. Default 9999. |
--p2lab-stage-shell-width | Designed shell width (px). |
--p2lab-stage-shell-height | Designed shell height (px). |
--p2lab-stage-shell-padding-top / -right / -bottom / -left | Inner padding around layers. |
--p2lab-stage-shell-bg-color | Background color. |
--p2lab-stage-shell-bg-image | Background image (url(...)). |
--p2lab-stage-shell-bg-size | cover / contain / stretch / auto. |
--p2lab-stage-shell-bg-pos | center, top, bottom, left, right, corners. |
--p2lab-stage-shell-bg-repeat | no-repeat / repeat / repeat-x / repeat-y. |
--p2lab-stage-shell-backdrop-filter | CSS backdrop-filter value (e.g. blur(8px)). |
--p2lab-stage-shell-border-width | Outer border width. |
--p2lab-stage-shell-border-style | none / solid / dashed / dotted / double. |
--p2lab-stage-shell-border-color | Border color. |
--p2lab-stage-shell-border-radius | CSS border-radius. |
--p2lab-stage-shell-box-shadow | CSS box-shadow value. |
Most are driven by Stage Settings modal (Canvas / Background / Frame / Border sections).
Set on .p2lab-stage__close. Driven by Stage Settings → Close button style inspector.
| Variable | Purpose |
|---|
--p2lab-stage-close-size / -width / -height | Button size. |
--p2lab-stage-close-offset | Position offset from the corner. |
--p2lab-stage-close-color | Icon color. |
--p2lab-stage-close-bg / --p2lab-stage-close-background-color | Background color. |
--p2lab-stage-close-background-image | Background image. |
--p2lab-stage-close-hover-bg | Background color on hover. |
--p2lab-stage-close-padding-top / -right / -bottom / -left | Inner padding. |
--p2lab-stage-close-border-top-width / -right-width / -bottom-width / -left-width | Border widths per side. |
--p2lab-stage-close-border-top-style / -right-style / -bottom-style / -left-style | Border styles per side. |
--p2lab-stage-close-border-top-color / -right-color / -bottom-color / -left-color | Border colors per side. |
--p2lab-stage-close-border-top-left-radius / -top-right-radius / -bottom-left-radius / -bottom-right-radius | Per-corner radii. |
--p2lab-stage-close-radius | Shortcut for uniform radius. |
--p2lab-stage-close-font-family / -font-size / -font-weight | Icon character typography. |
--p2lab-stage-close-box-shadow | Drop shadow. |
--p2lab-stage-close-opacity | Opacity. |
| Variable | Purpose |
|---|
--p2lab-stage-slider-transition-ms | Slide-transition duration. Default 600ms. |
Set on .p2lab-stage__layer of coupon-type layers.
| Variable | Purpose |
|---|
--p2lab-coupon-code-color | Code text color. |
--p2lab-coupon-code-font-family / -font-size / -font-weight | Code typography. |
--p2lab-coupon-code-letter-spacing / -line-height | Typography spacing. |
--p2lab-coupon-code-text-decoration / -text-transform | Decoration / casing. |
--p2lab-coupon-copy-icon-color | Icon color. |
--p2lab-coupon-copy-icon-opacity | Icon opacity. |
--p2lab-coupon-copy-icon-width | Icon size. |
--p2lab-stage-coupon-copied-msg | Toast text content (content). |
Set on .p2lab-stage__layer of countdown-type layers. The countdown has two text families (value digits + unit labels) plus per-unit box styling.
| Variable | Purpose |
|---|
--p2lab-countdown-value-color | Digit color. |
--p2lab-countdown-value-font-family / -font-size / -font-weight | Digit typography. |
--p2lab-countdown-value-letter-spacing / -line-height | Typography spacing. |
--p2lab-countdown-value-text-decoration / -text-transform | Decoration / casing. |
| Variable | Purpose |
|---|
--p2lab-countdown-label-color | Label color. |
--p2lab-countdown-label-font-family / -font-size / -font-weight | Label typography. |
--p2lab-countdown-label-letter-spacing / -line-height / -opacity | Typography spacing + alpha. |
--p2lab-countdown-label-text-decoration / -text-transform | Decoration / casing. |
Per-side borders + radii + paddings:
| Variable | Purpose |
|---|
--p2lab-countdown-unit-background-color | Box background. |
--p2lab-countdown-unit-border-top-color / -right-color / -bottom-color / -left-color | Border colors per side. |
--p2lab-countdown-unit-border-top-style / -right-style / -bottom-style / -left-style | Border styles per side. |
--p2lab-countdown-unit-border-top-width / -right-width / -bottom-width / -left-width | Border widths per side. |
--p2lab-countdown-unit-border-top-left-radius / -top-right-radius / -bottom-left-radius / -bottom-right-radius | Per-corner radii. |
--p2lab-countdown-unit-padding-top / -right / -bottom / -left | Inner padding per side. |
From stage-grid.scss. Apply when Content mode = Grid (responsive columns).
| Variable | Purpose |
|---|
--p2lab-section-gap | Gap between rows. |
--p2lab-section-padding | Inner padding. |
--p2lab-section-max-width | Max width before centering. |
--p2lab-section-bg | Background. |
--p2lab-section-align | align-items. |
| Variable | Purpose |
|---|
--p2lab-row-gap | Gap between columns. |
--p2lab-row-mobile-gap | Gap on <640px. |
--p2lab-row-align | align-items. |
--p2lab-row-justify | justify-content. |
| Variable | Purpose |
|---|
--p2lab-col-xs / -sm / -md / -lg / -xl / -xxl | Flex-basis per breakpoint. |
--p2lab-col-padding | Inner padding. |
--p2lab-col-gap | Gap between content layers. |
--p2lab-col-align | align-items. |
--p2lab-col-justify | justify-content. |
--p2lab-col-bg | Background. |