SCSS Variablen & Mixins

Alle Variablen aus den Design-Tokens und Mixins – zum einfachen Kopieren.

Variablen-Dateien

CSS Custom Properties (tokens/_css-vars.scss)

Radius (4)

—

#{r.$radiusS}

—

#{r.$radiusL}

—

#{r.$radiusML}

—

#{r.$radiusXL}

Typografie (5)

—

#{t.$font-size-s}

—

#{t.$font-size-m}

—

#{t.$font-size-l}

—

#{t.$font-size-xl}

—

#{t.$font-size-xxl}

Spacing (17)

—

#{s.$space-xs}

—

#{s.$space-s}

—

#{s.$space-sm}

—

#{s.$space-m}

—

#{s.$space-ml}

—

#{s.$space-l}

—

#{s.$space-xl}

—

#{s.$space-xxl}

—

var(--space-1)

—

var(--space-2)

—

var(--space-3)

—

var(--space-4)

—

var(--space-5)

—

var(--space-6)

—

calc(var(--space-5) + var(--space-4))

—

var(--space-7)

—

calc(var(--space-8) + var(--space-4))

Semantische Farben (24)

—

var(--col-gray050)

—

var(--col-gray950)

—

var(--col-charcoallight600)

—

var(--col-charcoallight900)

—

var(--col-crimsonlight800)

—

var(--col-emerald100)

—

var(--col-velvet050)

—

var(--col-velvet200)

—

var(--color-white)

—

var(--col-charcoal900)

—

var(--col-charcoal300)

—

var(--col-charcoallight700)

—

var(--col-skylight900)

—

var(--col-skylight950)

—

var(--col-skylight800)

—

#5ca9d9

—

#4f5254

—

#6e7275

—

var(--col-sky600)

—

var(--col-gray050)

—

var(--col-charcoallight700)

—

var(--col-skylight700)

—

var(--col-charcoallight800)

—

var(--col-gray950)

Schatten & Glow (12)

—

0 10px 30px color-mix(in srgb, var(--col-charcoal900) 12%, transparent)

—

0 2px 1px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.08), 0 24px 64px rgba(0, 0, 0, 0.06)

—

0 4px 2px rgba(0, 0, 0, 0.07), 0 16px 48px rgba(0, 0, 0, 0.10), 0 40px 100px rgba(0, 0, 0, 0.08)

—

0 25px 80px rgba(0, 0, 0, 0.14)

—

0 0 40px rgba(80, 173, 187, 0.18), 0 0 80px rgba(80, 173, 187, 0.06)

—

0 0 40px rgba(61, 127, 255, 0.18), 0 0 80px rgba(61, 127, 255, 0.06)

—

0 10px 30px color-mix(in srgb, var(--col-gray950) 35%, transparent)

—

0 2px 1px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4), 0 24px 64px rgba(0, 0, 0, 0.3)

—

0 4px 2px rgba(0, 0, 0, 0.3), 0 16px 48px rgba(0, 0, 0, 0.5), 0 40px 100px rgba(0, 0, 0, 0.35)

—

0 25px 80px rgba(0, 0, 0, 0.35)

—

0 0 40px rgba(80, 173, 187, 0.18), 0 0 80px rgba(80, 173, 187, 0.06)

—

0 0 40px rgba(61, 127, 255, 0.20), 0 0 80px rgba(61, 127, 255, 0.07)

Abstände - Primitive (tokens/primitives/_spaces.scss)

Space-Skala (14)

—

0.25rem

4px

—

0.5rem

8px

—

0.75rem

12px

—

1rem

16px

—

1.5rem

24px

—

2rem

32px

—

2.5rem

40px

—

3rem

48px

—

3.5rem

56px

—

4rem

64px

—

4.5rem

72px

—

5rem

80px

—

5.5rem

88px

—

6rem

96px

Abstände - Semantisch (tokens/semantics/_spaces.scss)

Space-Ebenen (9)

—

p.$space02

—

p.$space05

—

p.$space07

—

p.$space10

—

p.$space15

—

p.$space20

—

p.$space30

—

p.$space40

—

p.$space60

Border Radius (tokens/primitives/_radius.scss)

Radius-Skala (7)

—

0.0625rem

1px

—

0.125rem

2px

—

0.25rem

4px

—

0.375rem

6px

—

0.75rem

12px

—

1.125rem

18px

—

1.5rem

24px

Typografie (tokens/primitives/_typographie.scss)

Text-Größen (5)

—

12px

—

16px

—

18px

—

22px

—

28px

Mixins

@mixin generate-col-classes (layout/_grid.scss)

Erzeugt responsive Grid-Spalten-Klassen basierend auf $col-layouts Map. Parameter: $prefix für Breakpoint-Präfix (leer = default, "md" = .md-col-*, etc.)

Verwendung: