Colors

Background Colors

.mud-theme-primary

.mud-theme-secondary

.mud-theme-warning

.mud-theme-info

.mud-theme-success

.mud-theme-error

.mud-theme-light

.mud-theme-dark

Background gradients

.bg-primary-gradient

.bg-secondary-gradient

.bg-warning-gradient

.bg-info-gradient

.bg-success-gradient

.bg-danger-gradient

.bg-light-gradient

.bg-dark-gradient

Background transparent colors

.bg-primary-transparent

.bg-secondary-transparent

.bg-warning-transparent

.bg-info-transparent

.bg-success-transparent

.bg-danger-transparent

.bg-light-transparent

.bg-dark-transparent

Background outline colors

.bg-outline-primary

.bg-outline-secondary

.bg-outline-warning

.bg-outline-info

.bg-outline-success

.bg-outline-danger

.bg-outline-light

.bg-outline-dark

Border Colors

.mud-border-primary

.mud-border-secondary

.mud-border-warning

.mud-border-info

.mud-border-success

.mud-border-danger

.mud-border-light

.mud-border-dark

Background Opacity
100%

.bg-opacity-75

75%

.bg-opacity-75

50%

.bg-opacity-50

25%

.bg-opacity-25

10%

.bg-opacity-10

Text Colors

primary

.mud-primary-text

secondary

.mud-secondary-text

warning

.mud-warning-text

info

.mud-info-text

success

.mud-success-text

danger

.mud-danger-text

light

.mud-light-text

dark

.mud-dark-text

muted

.text-muted

Text Opacity

Opacity-100

100% opacity

Opacity-100

.text-opacity-75

Opacity-100

.text-opacity-50

Opacity-100

.text-opacity-25

Callout
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Other Colors:
$blue-100
$blue-200
$blue-300
$blue-400
$blue-500
$blue-600
$blue-700
$blue-800
$blue-900
$blue
$indigo-100
$indigo-200
$indigo-300
$indigo-400
$indigo-500
$indigo-600
$indigo-700
$indigo-800
$indigo-900
$indigo
$purple-100
$purple-200
$purple-300
$purple-400
$purple-500
$purple-600
$purple-700
$purple-800
$purple-900
$purple
$pink-100
$pink-200
$pink-300
$pink-400
$pink-500
$pink-600
$pink-700
$pink-800
$pink-900
$pink
$red-100
$red-200
$red-300
$red-400
$red-500
$red-600
$red-700
$red-800
$red-900
$red
$orange-100
$orange-200
$orange-300
$orange-400
$orange-500
$orange-600
$orange-700
$orange-800
$orange-900
$orange
$yellow-100
$yellow-200
$yellow-300
$yellow-400
$yellow-500
$yellow-600
$yellow-700
$yellow-800
$yellow-900
$yellow
$green-100
$green-200
$green-300
$green-400
$green-500
$green-600
$green-700
$green-800
$green-900
$green
$teal-100
$teal-200
$teal-300
$teal-400
$teal-500
$teal-600
$teal-700
$teal-800
$teal-900
$teal
$cyan-100
$cyan-200
$cyan-300
$cyan-400
$cyan-500
$cyan-600
$cyan-700
$cyan-800
$cyan-900
$cyan
$gray-100
$gray-200
$gray-300
$gray-400
$gray-500
$gray-600
$gray-700
$gray-800
$gray-900
$gray