Bootstrap colors

These are the primary colors used throughout various Bootstrap controls. They've been altered to use MDL colors instead of Bootstrap colors.

.brand-primary: $color-accent;

.brand-success: $color-vivid-low;

.brand-info: $color-vivid-low;

.brand-warning: $color-alert;

.brand-danger: $color-alert;

MDL colors

.color-white: #FFFFFF;

.color-black: #000000;

.color-accent: #0078D7;

.color-alert: #D02E00;

.color-bg-light-vivid-high: $color-white;

.color-bg-light-vivid-mid: #F2F2F2;

.color-bg-light-vivid-low: #E5E5E5;

.color-bg-light-neutral-high: #D9D9D9;

.color-bg-light-neutral-mid: #CCCCCC;

.color-bg-dark-vivid-high: $color-black;

.color-bg-dark-vivid-mid: #191919;

.color-bg-dark-vivid-low: #262626;

.color-bg-dark-neutral-high: #333333;

.color-bg-dark-neutral-mid: #404040;

.color-fill-accent-vivid-high: $color-accent;

.color-fill-accent-vivid-mid: rgba($color-accent, 0.8);

.color-fill-accent-vivid-low: rgba($color-accent, 0.6);

.color-fill-accent-neutral-high: rgba($color-accent, 0.4);

.color-fill-accent-neutral-mid: rgba($color-accent, 0.3);

.color-fill-accent-neutral-low: rgba($color-accent, 0.2);

.color-fill-accent-dim-high: rgba($color-accent, 0.15);

.color-fill-accent-dim-mid: rgba($color-accent, 0.1);

.color-fill-accent-dim-low: rgba($color-accent, 0.05);

.color-fill-alert: $color-alert;

.color-fill-dim-low: rgba($color-black, 0.05);

.color-fill-dim-mid: rgba($color-black, 0.1);

.color-fill-neutral-low: rgba($color-black, 0.2);

.color-fill-neutral-mid: rgba($color-black, 0.3);

.color-fill-neutral-high: rgba($color-black, 0.4);

.color-fill-vivid-low: rgba($color-black, 0.6);

.color-fill-vivid-mid: rgba($color-black, 0.8);

.color-fill-vivid-high: $color-black;

.color-line-accent-vivid-high: $color-accent;

.color-line-accent-vivid-mid: rgba($color-accent, 0.8);

.color-line-accent-vivid-low: rgba($color-accent, 0.6);

.color-line-accent-neutral-high: rgba($color-accent, 0.4);

.color-line-accent-neutral-mid: rgba($color-accent, 0.3);

.color-line-accent-neutral-low: rgba($color-accent, 0.2);

.color-line-accent-dim-high: rgba($color-accent, 0.15);

.color-line-accent-dim-mid: rgba($color-accent, 0.1);

.color-line-accent-dim-low: rgba($color-accent, 0.05);

.color-line-alert: $color-alert;

.color-line-dim-low: rgba($color-black, 0.05);

.color-line-dim-mid: rgba($color-black, 0.1);

.color-line-neutral-low: rgba($color-black, 0.2);

.color-line-neutral-mid: rgba($color-black, 0.3);

.color-line-neutral-high: rgba($color-black, 0.4);

.color-line-vivid-low: rgba($color-black, 0.6);

.color-line-vivid-mid: rgba($color-black, 0.8);

.color-line-vivid-high: $color-black;

Primary

.color-type-primary: $color-black;

Secondary

.color-type-secondary: rgba($color-black, 0.6);

Disabled

.color-type-disabled: rgba($color-black, 0.2);

Accent

.color-type-accent: $color-accent;

Alert

.color-type-alert: $color-alert;

.color-fill-dim-mid-alt: rgba($color-white, 0.1);

.color-fill-dim-high-alt: rgba($color-white, 0.15);

.color-fill-neutral-low-alt: rgba($color-white, 0.2);

.color-fill-neutral-mid-alt: rgba($color-white, 0.3);

.color-fill-neutral-high-alt: rgba($color-white, 0.4);

.color-fill-vivid-low-alt: rgba($color-white, 0.6);

.color-fill-vivid-mid-alt: rgba($color-white, 0.8);

.color-fill-vivid-high-alt: $color-white;

.color-line-dim-mid-alt: rgba($color-white, 0.1);

.color-line-dim-high-alt: rgba($color-white, 0.15);

.color-line-neutral-low-alt: rgba($color-white, 0.2);

.color-line-neutral-mid-alt: rgba($color-white, 0.3);

.color-line-neutral-high-alt: rgba($color-white, 0.4);

.color-line-vivid-low-alt: rgba($color-white, 0.6);

.color-line-vivid-mid-alt: rgba($color-white, 0.8);

.color-line-vivid-high-alt: $color-white;

Primary

.color-type-primary-alt: $color-white;

Secondary

.color-type-secondary-alt: rgba($color-white, 0.6);

Disabled

.color-type-disabled-alt: rgba($color-white, 0.2);

Accent

.color-type-accent-alt: $color-accent;

Alert

.color-type-alert-alt: $color-alert;