Theme-Variablen

Diese Referenz ist die kompakte Lookup-Tabelle für SCSS-Variablen, ihre Quellen in theme.json und ihre Defaults. Für eine erläuterte Architektur-Übersicht siehe Variablen & Tokens.

Quellen

Datei	Zweck
`abstract/variables/bootstrap.scss`	Bootstrap-Overrides, bindet `$sw-*`-Tokens an Bootstrap-Defaults
`abstract/variables/custom.scss`	Guppy-eigene Tokens (Lieferstatus, Produktbilder, Focus, Icons …)
`skin/shopware/abstract/variables/bootstrap.scss`	Shopware-Integration-Overrides (Bootstrap)
`skin/shopware/abstract/variables/theme.scss`	Shopware-Integration-Overrides (Theme)
`theme.json`	Admin-Konfiguration, befüllt `$sw-*`-Tokens

Brand-Farben

SCSS	theme.json	Default	Verwendung
`$sw-color-brand-primary`	`sw-color-brand-primary`	`#215AFF`	Primärfarbe
`$sw-color-brand-secondary`	`sw-color-brand-secondary`	`#0B1845`	Sekundärfarbe
`$sw-background-color`	`sw-background-color`	`#FFFFFF`	Hintergrund
`$sw-border-color`	`sw-border-color`	`#CFD1D7`	Rahmen
`$sw-text-color`	`sw-text-color`	`#1B1F29`	Textfarbe
`$sw-headline-color`	`sw-headline-color`	`#1B1F29`	Überschriften

Graustufen

SCSS	Default
`$sw-color-gray-100`	`#F9F9F9`
`$sw-color-gray-200`	`#EEEEEE`
`$sw-color-gray-300`	`#BCC1C7`
`$sw-color-gray-400`	`#CED4DA`
`$sw-color-gray-500`	`#ADB5BD`
`$sw-color-gray-600`	`#798490`
`$sw-color-gray-700`	`#495057`
`$sw-color-gray-800`	`#4A545B`
`$sw-color-gray-900`	`#212529`

Typografie

SCSS	theme.json	Default
`$sw-font-size-base`	`sw-font-size-base`	`1rem`
`$sw-h1-font-size`	`sw-h1-font-size`	`32px`
`$sw-h2-font-size`	`sw-h2-font-size`	`24px`
`$sw-h3-font-size`	`sw-h3-font-size`	`20px`
`$sw-h4-font-size`	`sw-h4-font-size`	`18px`
`$sw-h5-font-size`	`sw-h5-font-size`	`16px`
`$sw-h6-font-size`	`sw-h6-font-size`	`15px`
`$sw-h1-line-height`	`sw-h1-line-height`	`44px`
`$sw-h2-line-height`	`sw-h2-line-height`	`36px`
`$sw-h3-line-height`	`sw-h3-line-height`	`32px`

Container und Padding

SCSS	Default
`$guppy-container-width-default`	`1400px`
`$guppy-container-width-fluid`	`100%`
`$guppy-container-width-sm`	`1230px`
`$guppy-container-default-padding-x-mobile`	`10px`
`$guppy-container-default-padding-x-sm`	`24px`
`$guppy-container-default-padding-x-md`	`48px`
`$guppy-container-default-padding-x-lg`	`48px`
`$guppy-container-default-padding-x-xl`	`48px`
`$guppy-container-default-padding-x-xxl`	`48px`

CMS-Section-Padding

SCSS	theme.json	Default
`$guppy-cms-section-padding-x`	`guppy-cms-section-padding-x`	`48px`
`$guppy-cms-section-padding-y`	`guppy-cms-section-padding-y`	`48px`
`$guppy-cms-section-padding-y-2x`	`guppy-cms-section-padding-y-2x`	`96px`

Buttons und Inputs

SCSS	theme.json	Default
`$sw-input-btn-font-size`	`sw-input-btn-font-size`	`16px`
`$sw-input-btn-border-radius`	`sw-input-btn-border-radius`	`4px`
`$sw-input-btn-font-weight`	`sw-input-btn-font-weight`	`normal`

Icons

SCSS	Default	Verwendung
`$icon-base-size`	`22px`	Basisgröße
`$icon-base-color`	`currentColor`	Vererbt Textfarbe
`$icon-accessibility-touch-size`	`44px`	Min. Touch-Target (WCAG 2.5.5)

Produktbilder

SCSS	Default	Verwendung
`$product-image-height`	`240px`	Standardhöhe
`$product-image-height-lg`	`fit-content`	Höhe auf großen Bildschirmen
`$product-image-aspect-ratio`	`10/9`	Aspect-Ratio
`$product-image-background`	`$sw-color-product-image`	Hintergrund

Accessibility

SCSS	Default	Verwendung
`$focus-outline-width`	`2px`	Focus-Rahmenbreite
`$focus-outline-color`	`$sw-color-brand-primary`	Focus-Rahmenfarbe
`$focus-outline-offset`	`2px`	Abstand zum Element
`$focus-outline-box-shadow`	`0 0 0 2px #fff`	zusätzlicher Schatten

Lieferstatus

SCSS	Default
`$guppy-delivery-shipping-free-color`	`#023B5A`
`$guppy-delivery-shipping-free-background`	`#CEEDFE`
`$guppy-delivery-available-color`	`#154634`
`$guppy-delivery-available-background`	`#D3F2E7`
`$guppy-delivery-restock-color`	`#5D3B00`
`$guppy-delivery-restock-background`	`#FFEFD4`
`$guppy-delivery-soldout-color`	`#303030`
`$guppy-delivery-soldout-background`	`#EEEEEE`

Badges

theme.json	Default
`guppy-badges-new-background-color`	`#22C087`
`guppy-badges-new-color`	`#FFFFFF`
`guppy-badges-top-seller-background-color`	`#F89C00`
`guppy-badges-top-seller-color`	`#FFFFFF`
`guppy-badges-discount-background-color`	`#E10036`
`guppy-badges-discount-color`	`#FFFFFF`

Alerts

theme.json	Default
`guppy-alert-color-success`	`#D3F2E7`
`guppy-alert-color-info`	`#CEEDFE`
`guppy-alert-color-warning`	`#FFEFD4`
`guppy-alert-color-danger`	`#FDE2E7`

Mixins (Auswahl)

Mixin	Zweck
`focus-style`	einheitliche Focus-Rahmen
`line-height($value)`	responsive Line-Heights
`rlh($value, $property)`	RLH-Variante mit Property-Wahl
`button-adaptive-hover($base-color)`	Hover nur bei `(hover: hover)`
`text-ellipsis`	einzeiliges Ellipsis
`text-clamp($lines)`	mehrzeiliges Ellipsis
`visually-hidden`	Screen-Reader-only

Functions

Function	Zweck
`px-to-rem($px)`	Pixel zu rem
`strip-unit($value)`	Einheit entfernen
`shade-color($color, $weight)`	Farbe abdunkeln (Bootstrap)
`tint-color($color, $weight)`	Farbe aufhellen (Bootstrap)
`shift-color($color, $weight)`	je nach Helligkeit (Bootstrap)

Verwandt

Variablen & Tokens: erläuterte Architektur-Übersicht.
Konfigurationsschema: vollständige theme.json-Feldreferenz.
Twig-Blöcke: Templates, die diese Variablen konsumieren.