Zur Startseite gehen
0,00 €

Dev-only reference

Colors

Theme-, Bootstrap- und Graustufen-Tokens des aktiven Storefront-Themes inklusive CSS-Variablen, SCSS-Namen und kopierbaren Werten.

Theme Tokens (Runtime)

Werte aus dem aktiven Sales-Channel-Theme via CSS Custom Properties.

Brand Primary

Buttons, Links, Fokus

CSS Var
— var(--sw-color-brand-primary)
SCSS
$sw-color-brand-primary
Utility
bg-primary

Brand Secondary

Sekundäre Aktionen

CSS Var
— var(--sw-color-brand-secondary)
SCSS
$sw-color-brand-secondary
Utility
bg-secondary

Text

Fließtext

CSS Var
— var(--sw-text-color)
SCSS
$sw-text-color
Utility
bg-sw-text-color

Headline

Überschriften

CSS Var
— var(--sw-headline-color)
SCSS
$sw-headline-color
Utility
bg-sw-headline-color

Background

Seitenhintergrund

CSS Var
— var(--sw-background-color)
SCSS
$sw-background-color
Utility
—

Border

Rahmen, Trennlinien

CSS Var
— var(--sw-border-color)
SCSS
$sw-border-color
Utility
—

Price

Produktpreise

CSS Var
— var(--sw-color-price)
SCSS
$sw-color-price
Utility
bg-sw-color-price

Buy Button

Kaufen-CTA

CSS Var
— var(--sw-color-buy-button)
SCSS
$sw-color-buy-button
Utility
bg-sw-color-buy-button

Buy Button Text

Text auf Buy-Button

CSS Var
— var(--sw-color-buy-button-text)
SCSS
$sw-color-buy-button-text
Utility
bg-sw-color-buy-button-text

Bootstrap Semantic

Bootstrap-Utilities, gemappt auf das aktive Theme.

Primary

Primäre UI-Aktion

CSS Var
— var(--bs-primary)
SCSS
$primary
Utility
bg-primary

Secondary

Sekundäre UI-Aktion

CSS Var
— var(--bs-secondary)
SCSS
$secondary
Utility
bg-secondary

Success

Erfolg

CSS Var
— var(--bs-success)
SCSS
$success
Utility
bg-success

Danger

Fehler

CSS Var
— var(--bs-danger)
SCSS
$danger
Utility
bg-danger

Warning

Warnung

CSS Var
— var(--bs-warning)
SCSS
$warning
Utility
bg-warning

Info

Information

CSS Var
— var(--bs-info)
SCSS
$info
Utility
bg-info

Light

Helle Flächen

CSS Var
— var(--bs-light)
SCSS
$light
Utility
bg-light

Dark

Dunkle Flächen

CSS Var
— var(--bs-dark)
SCSS
$dark
Utility
bg-dark

Semantic CSS

Kompilierte Semantic Tokens aus dem Storefront-Skin.

Buy Button Background

Buy-Button Hintergrund

CSS Var
— var(--buy-btn-bg)
SCSS
$buy-btn-bg
Utility
—

Buy Button Text

Buy-Button Textfarbe

CSS Var
— var(--buy-btn-color)
SCSS
$buy-btn-color
Utility
—

Price Color

Preisdarstellung

CSS Var
— var(--price-color)
SCSS
$price-color
Utility
—

Gray Scale

Bootstrap-Graustufen und DevHelper-Swatch-Hilfsklassen.

Gray 100

Sehr helle Flächen

CSS Var
— var(--bs-gray-100)
SCSS
$gray-100
Utility
bg-gray-100

Gray 200

Hintergründe

CSS Var
— var(--bs-gray-200)
SCSS
$gray-200
Utility
bg-gray-200

Gray 300

Rahmen, deaktiviert

CSS Var
— var(--bs-gray-300)
SCSS
$gray-300
Utility
bg-gray-300

Gray 500

Muted Text

CSS Var
— var(--bs-gray-500)
SCSS
$gray-500
Utility
bg-gray-500

Gray 600

Sekundärtext

CSS Var
— var(--bs-gray-600)
SCSS
$gray-600
Utility
bg-gray-600

Gray 800

Dunkle UI-Flächen

CSS Var
— var(--bs-gray-800)
SCSS
$gray-800
Utility
bg-gray-800
Diese Website verwendet Cookies, um eine bestmögliche Erfahrung bieten zu können. Mehr Informationen ...