Sass variables

Variable name	Value
$gray-100
$gray-200
$gray-300
$gray-400
$gray-500
$gray-600
$gray-700
$gray-800
$gray-900
$black
$body-bg	#ffffff
$body-color	darken(desaturate($purple, 60), 30); // ~ #4e4a74
$heading-color	$black
$text-muted-color	$gray-600

Theme color

Variable name	Value
$primary
$primary-active	darken($primary, 10)
$primary-dark	darken($primary, 15)
$secondary
$success
$info
$warning
$danger
$light
$dark
$background	$white
$body-color	$black
$facebook	rgb(55, 101, 201)
$google	rgb(236, 65, 44)
$twitter	rgb(3, 159, 245)

Border color

Variable name	Value
$border-color
$border-color-light
$border-color-dark
$border-color-black

Font

Variable name	Value
$font-family-base	'Roboto', sans-serif;
$font-weight-base	400
$line-height-base	1.5
$letter-spacing-base	.3px
$font-weight-light	300
$font-weight-normal	400
$font-weight-semi	500
$font-weight-bold	700

Font size

Variable name	Value
$font-size-base	.9375rem (15px)
$font-size-xs	0.7142em
$font-size-sm	0.8571em
$font-size-lg	1em
$font-size-paragraph	1em
$font-size-h1	2.125em
$font-size-h2	1.8125em
$font-size-h3	1.5em
$font-size-h4	1.25em
$font-size-h5	1.0625em
$font-size-h6	.8125em
$font-size-display-1	4.6875em
$font-size-display-2	3.75em
$font-size-display-3	2.8125em
$font-size-display-4	2.1875em

Border

Variable name	Value
$border-width	1px
$border-width-md	2px
$border-width-lg	3px
$border-width-xl	4px
$border-radius	.25rem
$border-radius-sm	.2rem
$border-radius-lg	.3rem

Spacing

Variable name	Value
$spacing-xxxs	.0625rem
$spacing-xxs	.125rem
$spacing-xs	.25rem
$spacing-sm	.5rem
$spacing-md	1rem
$spacing-lg	1.5rem
$spacing-xl	2rem
$spacing-xxl	2.5rem
$spacing-xxxl	3rem

Shadow

Shadows are defined as @mixin. Few @mixins require $color parameter to be passed in.

How to use shadow mixins

Variable name	Value
shadow-1dp()
shadow-2dp()
shadow-3dp()
shadow-4dp()
shadow-6dp()
shadow-8dp()
shadow-16dp()
shadow-24dp()
shadow-button()
shadow-button-hover()

Using colored shadow mixins

Variable name	Value
shadow-1dp-color($primary)
shadow-2dp-color($success)
shadow-3dp-color($warning)
shadow-4dp-color($danger)
shadow-6dp-color($info)
shadow-8dp-color($primary)
shadow-16dp-color($success)
shadow-24dp-color($info)

Z index

Variable name	Value
$z-index-deepdive	-99999
$z-index-dive	-1
$z-index-default	1
$z-index-docked	4
$z-index-sticky	100
$z-index-popup	5000
$z-index-dialog	6000
$z-index-dropdown	7000
$z-index-overlay	8000
$z-index-reminder	8500
$z-index-modal	9000
$z-index-spinner	9050
$z-index-toast	10000