Theme Variables

This reference is the compact lookup table for SCSS variables, their theme.json sources, and defaults. For an annotated architecture overview see Variables & Tokens.

Sources

File	Purpose
`abstract/variables/bootstrap.scss`	Bootstrap overrides, binds `$sw-*` tokens to Bootstrap defaults
`abstract/variables/custom.scss`	Guppy-specific tokens (delivery status, product images, 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 configuration, populates `$sw-*` tokens

Brand colors

SCSS	theme.json	Default	Use
`$sw-color-brand-primary`	`sw-color-brand-primary`	`#215AFF`	Primary
`$sw-color-brand-secondary`	`sw-color-brand-secondary`	`#0B1845`	Secondary
`$sw-background-color`	`sw-background-color`	`#FFFFFF`	Background
`$sw-border-color`	`sw-border-color`	`#CFD1D7`	Borders
`$sw-text-color`	`sw-text-color`	`#1B1F29`	Text color
`$sw-headline-color`	`sw-headline-color`	`#1B1F29`	Headlines

Greyscales

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`

Typography

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 and 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 and 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	Use
`$icon-base-size`	`22px`	Base size
`$icon-base-color`	`currentColor`	Inherits text color
`$icon-accessibility-touch-size`	`44px`	Min. touch target (WCAG 2.5.5)

Product images

SCSS	Default	Use
`$product-image-height`	`240px`	Default height
`$product-image-height-lg`	`fit-content`	Height on large screens
`$product-image-aspect-ratio`	`10/9`	Aspect ratio
`$product-image-background`	`$sw-color-product-image`	Background

Accessibility

SCSS	Default	Use
`$focus-outline-width`	`2px`	Focus outline width
`$focus-outline-color`	`$sw-color-brand-primary`	Focus outline color
`$focus-outline-offset`	`2px`	Distance from element
`$focus-outline-box-shadow`	`0 0 0 2px #fff`	Additional shadow

Delivery status

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 (selection)

Mixin	Purpose
`focus-style`	Consistent focus outline
`line-height($value)`	Responsive line height
`rlh($value, $property)`	RLH variant with property choice
`button-adaptive-hover($base-color)`	Hover only for `(hover: hover)`
`text-ellipsis`	Single-line ellipsis
`text-clamp($lines)`	Multi-line ellipsis
`visually-hidden`	Screen-reader-only

Functions

Function	Purpose
`px-to-rem($px)`	Pixels to rem
`strip-unit($value)`	Strip a unit
`shade-color($color, $weight)`	Darken color (Bootstrap)
`tint-color($color, $weight)`	Lighten color (Bootstrap)
`shift-color($color, $weight)`	Lighten / darken based on lightness (Bootstrap)

Variables & Tokens: annotated architecture overview.
Config Schema: full theme.json field reference.
Twig Blocks: templates that consume these variables.