Variables and Utility Classes - Christmas in Joelton

CSS Color Variables

var(--primary-10)

var(--primary-20)

var(--primary-30)

var(--primary-40)

var(--primary-50)

var(--primary-60)

var(--primary-70)

var(--primary-80)

var(--primary-90)

var(--secondary-10)

var(--secondary-20)

var(--secondary-30)

var(--secondary-40)

var(--secondary-50)

var(--secondary-60)

var(--secondary-70)

var(--secondary-80)

var(--secondary-90)

var(--accent-10)

var(--accent-20)

var(--accent-30)

var(--accent-40)

var(--accent-50)

var(--accent-60)

var(--accent-70)

var(--accent-80)

var(--accent-90)

var(--text-10)

var(--text-20)

var(--text-30)

var(--text-40)

var(--text-50)

var(--text-60)

var(--text-70)

var(--text-80)

var(--text-90)

CSS Transparent Color Variables

var(--primary-10-alpha)

var(--primary-20-alpha)

var(--primary-30-alpha)

var(--primary-40-alpha)

var(--primary-50-alpha)

var(--primary-60-alpha)

var(--primary-70-alpha)

var(--primary-80-alpha)

var(--primary-90-alpha)

var(--secondary-10-alpha)

var(--secondary-20-alpha)

var(--secondary-30-alpha)

var(--secondary-40-alpha)

var(--secondary-50-alpha)

var(--secondary-60-alpha)

var(--secondary-70-alpha)

var(--secondary-80-alpha)

var(--secondary-90-alpha)

var(--accent-10-alpha)

var(--accent-20-alpha)

var(--accent-30-alpha)

var(--accent-40-alpha)

var(--accent-50-alpha)

var(--accent-60-alpha)

var(--accent-70-alpha)

var(--accent-80-alpha)

var(--accent-90-alpha)

var(--text-10-alpha)

var(--text-20-alpha)

var(--text-30-alpha)

var(--text-40-alpha)

var(--text-50-alpha)

var(--text-60-alpha)

var(--text-70-alpha)

var(--text-80-alpha)

var(--text-90-alpha)

BG Color Utility Classes

bg-primary-10

bg-primary-20

bg-primary-30

bg-primary-40

bg-primary-50

bg-primary-60

bg-primary-70

bg-primary-80

bg-primary-90

bg-secondary-10

bg-secondary-20

bg-secondary-30

bg-secondary-40

bg-secondary-50

bg-secondary-60

bg-secondary-70

bg-secondary-80

bg-secondary-90

bg-accent-10

bg-accent-20

bg-accent-30

bg-accent-40

bg-accent-50

bg-accent-60

bg-accent-70

bg-accent-80

bg-accent-90

bg-text-10

bg-text-20

bg-text-30

bg-text-40

bg-text-50

bg-text-60

bg-text-70

bg-text-80

bg-text-90

Transparent BG Color Variables

bg-primary-10-alpha

bg-primary-20-alpha

bg-primary-30-alpha

bg-primary-40-alpha

bg-primary-50-alpha

bg-primary-60-alpha

bg-primary-70-alpha

bg-primary-80-alpha

bg-primary-90-alpha

bg-secondary-10-alpha

bg-secondary-20-alpha

bg-secondary-30-alpha

bg-secondary-40-alpha

bg-secondary-50-alpha

bg-secondary-60-alpha

bg-secondary-70-alpha

bg-secondary-80-alpha

bg-secondary-90-alpha

bg-accent-10-alpha

bg-accent-20-alpha

bg-accent-30-alpha

bg-accent-40-alpha

bg-accent-50-alpha

bg-accent-60-alpha

bg-accent-70-alpha

bg-accent-80-alpha

bg-accent-90-alpha

bg-text-10-alpha

bg-text-30-alpha

bg-text-40-alpha

bg-text-50-alpha

bg-text-60-alpha

bg-text-70-alpha

bg-text-80-alpha

bg-text-90-alpha

Text Color Utility Classes

color-primary-10

color-primary-20

color-primary-30

color-primary-40

color-primary-50

color-primary-60

color-primary-70

color-primary-80

color-primary-90

color-secondary-10

color-secondary-20

color-secondary-30

color-secondary-40

color-secondary-50

color-secondary-60

color-secondary-70

color-secondary-80

color-secondary-90

color-accent-10

color-accent-20

color-accent-30

color-accent-40

color-accent-50

color-accent-60

color-accent-70

color-accent-80

color-accent-90

color-text-10

color-text-20

color-text-30

color-text-40

color-text-50

color-text-60

color-text-70

color-text-80

color-text-90

Transparent Text Utility Classes

color-primary-10-alpha

color-primary-20-alpha

color-primary-30-alpha

color-primary-40-alpha

color-primary-50-alpha

color-primary-60-alpha

color-primary-70-alpha

color-primary-80-alpha

color-primary-90-alpha

color-secondary-10-alpha

color-secondary-20-alpha

color-secondary-30-alpha

color-secondary-40-alpha

color-secondary-50-alpha

color-secondary-60-alpha

color-secondary-70-alpha

color-secondary-80-alpha

color-secondary-90-alpha

color-accent-10-alpha

color-accent-20-alpha

color-accent-30-alpha

color-accent-40-alpha

color-accent-50-alpha

color-accent-60-alpha

color-accent-70-alpha

color-accent-80-alpha

color-accent-90-alpha

color-text-10-alpha

color-text-30-alpha

color-text-40-alpha

color-text-50-alpha

color-text-60-alpha

color-text-70-alpha

color-text-80-alpha

color-text-90-alpha

CSS Font Variables

Line Heights

var(--line-height-xs)

var(--line-height-s)

var(--line-height-m)

var(--line-height-l)

var(--line-height-xl)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Font Weights

var(--font-100)

var(--font-200)

var(--font-300)

var(--font-400)

var(--font-500)

var(--font-600)

var(--font-700)

var(--font-800)

var(--font-900)

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Font Styles

var(--fs-normal)

var(--fs-italic)

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Text Decorations

var(--td-none)

var(--td-underline)

var(--td-line-through)

var(--td-overline)

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Letter Spacings

var(--letter-spacing-tighter)

var(--letter-spacing-tight)

var(--letter-spacing-normal)

var(--letter-spacing-wide)

var(--letter-spacing-wider)

var(--letter-spacing-widest)

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

CSS Font Utility Classes

Line Heights

line-height-xs

line-height-s

line-height-m

line-height-l

line-height-xl

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Font Weights

font-100

font-200

font-300

font-400

font-500

font-600

font-700

font-800

font-900

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Font Styles

fs-normal

fs-italic

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Text Decorations

td-none

td-underline

td-line-through

td-overline

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Letter Spacings

letter-spacing-tighter

letter-spacing-tight

letter-spacing-normal

letter-spacing-wide

letter-spacing-wider

letter-spacing-widest

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Text Transforms

lowercase

capitalize

uppercase

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

CSS Spacing Variables

var(--space-xs)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

var(--space-s)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

var(--space-m)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

var(--space-l)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

var(--space-xl)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Section Padding Variables

var(--padding-horizontal-sec)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

var(--padding-vertical-sec)

CSS Gaps Variables

var(--gap-xs)

var(--gap-s)

var(--gap-m)

var(--gap-l)

var(--gap-xl)

CSS Spacing Utility Classes

Padding Classes

padding-xs

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

padding-s

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

padding-m

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

padding-l

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

padding-xl

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Margin Classes

margin-xs

margin-s

margin-m

margin-l

margin-xl

Section Padding Utility Classes

padding-horizontal-sec

padding-vertical-sec

CSS Gaps Classes

gap-xs

gap-s

gap-m

gap-l

gap-xl

Border Radius Variables

var(--border-radius-sm)

var(--border-radius-md)

var(--border-radius-lg)

var(--border-radius-xl)

var(--border-radius-full)

Border Radius Classes

border-radius-sm

border-radius-md

border-radius-lg

border-radius-xl

border-radius-full

Opacity Variables

var(--opacity-0)

var(--opacity-10)

var(--opacity-20)

var(--opacity-30)

var(--opacity-40)

var(--opacity-50)

var(--opacity-60)

var(--opacity-70)

var(--opacity-80)

var(--opacity-90)

Opacity Classes

opacity-0

opacity-10

opacity-20

opacity-30

opacity-40

opacity-50

opacity-60

opacity-70

opacity-80

opacity-90