Colors

Variables

md-colors-include-class-names
$md-colors-include-class-names: false !default;
Sass (Scss)

Description

Boolean if a class name for each color should be created.

Type

Boolean
md-red-50
$md-red-50: #ffebee;
Sass (Scss)

Type

Color
md-red-100
$md-red-100: #ffcdd2;
Sass (Scss)

Type

Color
md-red-200
$md-red-200: #ef9a9a;
Sass (Scss)

Type

Color
md-red-300
$md-red-300: #e57373;
Sass (Scss)

Type

Color
md-red-400
$md-red-400: #ef5350;
Sass (Scss)

Type

Color
md-red-500
$md-red-500: #f44336;
Sass (Scss)

Type

Color
md-red-600
$md-red-600: #e53935;
Sass (Scss)

Type

Color
md-red-700
$md-red-700: #d32f2f;
Sass (Scss)

Type

Color
md-red-800
$md-red-800: #c62828;
Sass (Scss)

Type

Color
md-red-900
$md-red-900: #b71c1c;
Sass (Scss)

Type

Color
md-red-a-100
$md-red-a-100: #ff8a80;
Sass (Scss)

Type

Color
md-red-a-200
$md-red-a-200: #ff5252;
Sass (Scss)

Type

Color
md-red-a-400
$md-red-a-400: #ff1744;
Sass (Scss)

Type

Color
md-red-a-700
$md-red-a-700: #d50000;
Sass (Scss)

Type

Color
md-pink-50
$md-pink-50: #fce4ec;
Sass (Scss)

Type

Color
md-pink-100
$md-pink-100: #f8bbd0;
Sass (Scss)

Type

Color
md-pink-200
$md-pink-200: #f48fb1;
Sass (Scss)

Type

Color
md-pink-300
$md-pink-300: #f06292;
Sass (Scss)

Type

Color
md-pink-400
$md-pink-400: #ec407a;
Sass (Scss)

Type

Color
md-pink-500
$md-pink-500: #e91e63;
Sass (Scss)

Type

Color
md-pink-600
$md-pink-600: #d81b60;
Sass (Scss)

Type

Color
md-pink-700
$md-pink-700: #c2185b;
Sass (Scss)

Type

Color
md-pink-800
$md-pink-800: #ad1457;
Sass (Scss)

Type

Color
md-pink-900
$md-pink-900: #880e4f;
Sass (Scss)

Type

Color
md-pink-a-100
$md-pink-a-100: #ff80ab;
Sass (Scss)

Type

Color
md-pink-a-200
$md-pink-a-200: #ff4081;
Sass (Scss)

Type

Color
md-pink-a-400
$md-pink-a-400: #f50057;
Sass (Scss)

Type

Color
md-pink-a-700
$md-pink-a-700: #c51162;
Sass (Scss)

Type

Color
md-purple-50
$md-purple-50: #f3e5f5;
Sass (Scss)

Type

Color
md-purple-100
$md-purple-100: #e1bee7;
Sass (Scss)

Type

Color
md-purple-200
$md-purple-200: #ce93d8;
Sass (Scss)

Type

Color
md-purple-300
$md-purple-300: #ba68c8;
Sass (Scss)

Type

Color
md-purple-400
$md-purple-400: #ab47bc;
Sass (Scss)

Type

Color
md-purple-500
$md-purple-500: #9c27b0;
Sass (Scss)

Type

Color
md-purple-600
$md-purple-600: #8e24aa;
Sass (Scss)

Type

Color
md-purple-700
$md-purple-700: #7b1fa2;
Sass (Scss)

Type

Color
md-purple-800
$md-purple-800: #6a1b9a;
Sass (Scss)

Type

Color
md-purple-900
$md-purple-900: #4a148c;
Sass (Scss)

Type

Color
md-purple-a-100
$md-purple-a-100: #ea80fc;
Sass (Scss)

Type

Color
md-purple-a-200
$md-purple-a-200: #e040fb;
Sass (Scss)

Type

Color
md-purple-a-400
$md-purple-a-400: #d500f9;
Sass (Scss)

Type

Color
md-purple-a-700
$md-purple-a-700: #a0f;
Sass (Scss)

Type

Color
md-deep-purple-50
$md-deep-purple-50: #ede7f6;
Sass (Scss)

Type

Color
md-deep-purple-100
$md-deep-purple-100: #d1c4e9;
Sass (Scss)

Type

Color
md-deep-purple-200
$md-deep-purple-200: #b39ddb;
Sass (Scss)

Type

Color
md-deep-purple-300
$md-deep-purple-300: #9575cd;
Sass (Scss)

Type

Color
md-deep-purple-400
$md-deep-purple-400: #7e57c2;
Sass (Scss)

Type

Color
md-deep-purple-500
$md-deep-purple-500: #673ab7;
Sass (Scss)

Type

Color
md-deep-purple-600
$md-deep-purple-600: #5e35b1;
Sass (Scss)

Type

Color
md-deep-purple-700
$md-deep-purple-700: #512da8;
Sass (Scss)

Type

Color
md-deep-purple-800
$md-deep-purple-800: #4527a0;
Sass (Scss)

Type

Color
md-deep-purple-900
$md-deep-purple-900: #311b92;
Sass (Scss)

Type

Color
md-deep-purple-a-100
$md-deep-purple-a-100: #b388ff;
Sass (Scss)

Type

Color
md-deep-purple-a-200
$md-deep-purple-a-200: #7c4dff;
Sass (Scss)

Type

Color
md-deep-purple-a-400
$md-deep-purple-a-400: #651fff;
Sass (Scss)

Type

Color
md-deep-purple-a-700
$md-deep-purple-a-700: #6200ea;
Sass (Scss)

Type

Color
md-indigo-50
$md-indigo-50: #e8eaf6;
Sass (Scss)

Type

Color
md-indigo-100
$md-indigo-100: #c5cae9;
Sass (Scss)

Type

Color
md-indigo-200
$md-indigo-200: #9fa8da;
Sass (Scss)

Type

Color
md-indigo-300
$md-indigo-300: #7986cb;
Sass (Scss)

Type

Color
md-indigo-400
$md-indigo-400: #5c6bc0;
Sass (Scss)

Type

Color
md-indigo-500
$md-indigo-500: #3f51b5;
Sass (Scss)

Type

Color
md-indigo-600
$md-indigo-600: #3949ab;
Sass (Scss)

Type

Color
md-indigo-700
$md-indigo-700: #303f9f;
Sass (Scss)

Type

Color
md-indigo-800
$md-indigo-800: #283593;
Sass (Scss)

Type

Color
md-indigo-900
$md-indigo-900: #1a237e;
Sass (Scss)

Type

Color
md-indigo-a-100
$md-indigo-a-100: #8c9eff;
Sass (Scss)

Type

Color
md-indigo-a-200
$md-indigo-a-200: #536dfe;
Sass (Scss)

Type

Color
md-indigo-a-400
$md-indigo-a-400: #3d5afe;
Sass (Scss)

Type

Color
md-indigo-a-700
$md-indigo-a-700: #304ffe;
Sass (Scss)

Type

Color
md-blue-50
$md-blue-50: #e3f2fd;
Sass (Scss)

Type

Color
md-blue-100
$md-blue-100: #bbdefb;
Sass (Scss)

Type

Color
md-blue-200
$md-blue-200: #90caf9;
Sass (Scss)

Type

Color
md-blue-300
$md-blue-300: #64b5f6;
Sass (Scss)

Type

Color
md-blue-400
$md-blue-400: #42a5f5;
Sass (Scss)

Type

Color
md-blue-500
$md-blue-500: #2196f3;
Sass (Scss)

Type

Color
md-blue-600
$md-blue-600: #1e88e5;
Sass (Scss)

Type

Color
md-blue-700
$md-blue-700: #1976d2;
Sass (Scss)

Type

Color
md-blue-800
$md-blue-800: #1565c0;
Sass (Scss)

Type

Color
md-blue-900
$md-blue-900: #0d47a1;
Sass (Scss)

Type

Color
md-blue-a-100
$md-blue-a-100: #82b1ff;
Sass (Scss)

Type

Color
md-blue-a-200
$md-blue-a-200: #448aff;
Sass (Scss)

Type

Color
md-blue-a-400
$md-blue-a-400: #2979ff;
Sass (Scss)

Type

Color
md-blue-a-700
$md-blue-a-700: #2962ff;
Sass (Scss)

Type

Color
md-light-blue-50
$md-light-blue-50: #e1f5fe;
Sass (Scss)

Type

Color
md-light-blue-100
$md-light-blue-100: #b3e5fc;
Sass (Scss)

Type

Color
md-light-blue-200
$md-light-blue-200: #81d4fa;
Sass (Scss)

Type

Color
md-light-blue-300
$md-light-blue-300: #4fc3f7;
Sass (Scss)

Type

Color
md-light-blue-400
$md-light-blue-400: #29b6f6;
Sass (Scss)

Type

Color
md-light-blue-500
$md-light-blue-500: #03a9f4;
Sass (Scss)

Type

Color
md-light-blue-600
$md-light-blue-600: #039be5;
Sass (Scss)

Type

Color
md-light-blue-700
$md-light-blue-700: #0288d1;
Sass (Scss)

Type

Color
md-light-blue-800
$md-light-blue-800: #0277bd;
Sass (Scss)

Type

Color
md-light-blue-900
$md-light-blue-900: #01579b;
Sass (Scss)

Type

Color
md-light-blue-a-100
$md-light-blue-a-100: #80d8ff;
Sass (Scss)

Type

Color
md-light-blue-a-200
$md-light-blue-a-200: #40c4ff;
Sass (Scss)

Type

Color
md-light-blue-a-400
$md-light-blue-a-400: #00b0ff;
Sass (Scss)

Type

Color
md-light-blue-a-700
$md-light-blue-a-700: #0091ea;
Sass (Scss)

Type

Color
md-cyan-50
$md-cyan-50: #e0f7fa;
Sass (Scss)

Type

Color
md-cyan-100
$md-cyan-100: #b2ebf2;
Sass (Scss)

Type

Color
md-cyan-200
$md-cyan-200: #80deea;
Sass (Scss)

Type

Color
md-cyan-300
$md-cyan-300: #4dd0e1;
Sass (Scss)

Type

Color
md-cyan-400
$md-cyan-400: #26c6da;
Sass (Scss)

Type

Color
md-cyan-500
$md-cyan-500: #00bcd4;
Sass (Scss)

Type

Color
md-cyan-600
$md-cyan-600: #00acc1;
Sass (Scss)

Type

Color
md-cyan-700
$md-cyan-700: #0097a7;
Sass (Scss)

Type

Color
md-cyan-800
$md-cyan-800: #00838f;
Sass (Scss)

Type

Color
md-cyan-900
$md-cyan-900: #006064;
Sass (Scss)

Type

Color
md-cyan-a-100
$md-cyan-a-100: #84ffff;
Sass (Scss)

Type

Color
md-cyan-a-200
$md-cyan-a-200: #18ffff;
Sass (Scss)

Type

Color
md-cyan-a-400
$md-cyan-a-400: #00e5ff;
Sass (Scss)

Type

Color
md-cyan-a-700
$md-cyan-a-700: #00b8d4;
Sass (Scss)

Type

Color
md-teal-50
$md-teal-50: #e0f2f1;
Sass (Scss)

Type

Color
md-teal-100
$md-teal-100: #b2dfdb;
Sass (Scss)

Type

Color
md-teal-200
$md-teal-200: #80cbc4;
Sass (Scss)

Type

Color
md-teal-300
$md-teal-300: #4db6ac;
Sass (Scss)

Type

Color
md-teal-400
$md-teal-400: #26a69a;
Sass (Scss)

Type

Color
md-teal-500
$md-teal-500: #009688;
Sass (Scss)

Type

Color
md-teal-600
$md-teal-600: #00897b;
Sass (Scss)

Type

Color
md-teal-700
$md-teal-700: #00796b;
Sass (Scss)

Type

Color
md-teal-800
$md-teal-800: #00695c;
Sass (Scss)

Type

Color
md-teal-900
$md-teal-900: #004d40;
Sass (Scss)

Type

Color
md-teal-a-100
$md-teal-a-100: #a7ffeb;
Sass (Scss)

Type

Color
md-teal-a-200
$md-teal-a-200: #64ffda;
Sass (Scss)

Type

Color
md-teal-a-400
$md-teal-a-400: #1de9b6;
Sass (Scss)

Type

Color
md-teal-a-700
$md-teal-a-700: #00bfa5;
Sass (Scss)

Type

Color
md-green-50
$md-green-50: #e8f5e9;
Sass (Scss)

Type

Color
md-green-100
$md-green-100: #c8e6c9;
Sass (Scss)

Type

Color
md-green-200
$md-green-200: #a5d6a7;
Sass (Scss)

Type

Color
md-green-300
$md-green-300: #81c784;
Sass (Scss)

Type

Color
md-green-400
$md-green-400: #66bb6a;
Sass (Scss)

Type

Color
md-green-500
$md-green-500: #4caf50;
Sass (Scss)

Type

Color
md-green-600
$md-green-600: #43a047;
Sass (Scss)

Type

Color
md-green-700
$md-green-700: #388e3c;
Sass (Scss)

Type

Color
md-green-800
$md-green-800: #2e7d32;
Sass (Scss)

Type

Color
md-green-900
$md-green-900: #1b5e20;
Sass (Scss)

Type

Color
md-green-a-100
$md-green-a-100: #b9f6ca;
Sass (Scss)

Type

Color
md-green-a-200
$md-green-a-200: #69f0ae;
Sass (Scss)

Type

Color
md-green-a-400
$md-green-a-400: #00e676;
Sass (Scss)

Type

Color
md-green-a-700
$md-green-a-700: #00c853;
Sass (Scss)

Type

Color
md-light-green-50
$md-light-green-50: #f1f8e9;
Sass (Scss)

Type

Color
md-light-green-100
$md-light-green-100: #dcedc8;
Sass (Scss)

Type

Color
md-light-green-200
$md-light-green-200: #c5e1a5;
Sass (Scss)

Type

Color
md-light-green-300
$md-light-green-300: #aed581;
Sass (Scss)

Type

Color
md-light-green-400
$md-light-green-400: #9ccc65;
Sass (Scss)

Type

Color
md-light-green-500
$md-light-green-500: #8bc34a;
Sass (Scss)

Type

Color
md-light-green-600
$md-light-green-600: #7cb342;
Sass (Scss)

Type

Color
md-light-green-700
$md-light-green-700: #689f38;
Sass (Scss)

Type

Color
md-light-green-800
$md-light-green-800: #558b2f;
Sass (Scss)

Type

Color
md-light-green-900
$md-light-green-900: #33691e;
Sass (Scss)

Type

Color
md-light-green-a-100
$md-light-green-a-100: #ccff90;
Sass (Scss)

Type

Color
md-light-green-a-200
$md-light-green-a-200: #b2ff59;
Sass (Scss)

Type

Color
md-light-green-a-400
$md-light-green-a-400: #76ff03;
Sass (Scss)

Type

Color
md-light-green-a-700
$md-light-green-a-700: #64dd17;
Sass (Scss)

Type

Color
md-lime-50
$md-lime-50: #f9fbe7;
Sass (Scss)

Type

Color
md-lime-100
$md-lime-100: #f0f4c3;
Sass (Scss)

Type

Color
md-lime-200
$md-lime-200: #e6ee9c;
Sass (Scss)

Type

Color
md-lime-300
$md-lime-300: #dce775;
Sass (Scss)

Type

Color
md-lime-400
$md-lime-400: #d4e157;
Sass (Scss)

Type

Color
md-lime-500
$md-lime-500: #cddc39;
Sass (Scss)

Type

Color
md-lime-600
$md-lime-600: #c0ca33;
Sass (Scss)

Type

Color
md-lime-700
$md-lime-700: #afb42b;
Sass (Scss)

Type

Color
md-lime-800
$md-lime-800: #9e9d24;
Sass (Scss)

Type

Color
md-lime-900
$md-lime-900: #827717;
Sass (Scss)

Type

Color
md-lime-a-100
$md-lime-a-100: #f4ff81;
Sass (Scss)

Type

Color
md-lime-a-200
$md-lime-a-200: #eeff41;
Sass (Scss)

Type

Color
md-lime-a-400
$md-lime-a-400: #c6ff00;
Sass (Scss)

Type

Color
md-lime-a-700
$md-lime-a-700: #aeea00;
Sass (Scss)

Type

Color
md-yellow-50
$md-yellow-50: #fffde7;
Sass (Scss)

Type

Color
md-yellow-100
$md-yellow-100: #fff9c4;
Sass (Scss)

Type

Color
md-yellow-200
$md-yellow-200: #fff59d;
Sass (Scss)

Type

Color
md-yellow-300
$md-yellow-300: #fff176;
Sass (Scss)

Type

Color
md-yellow-400
$md-yellow-400: #ffee58;
Sass (Scss)

Type

Color
md-yellow-500
$md-yellow-500: #ffeb3b;
Sass (Scss)

Type

Color
md-yellow-600
$md-yellow-600: #fdd835;
Sass (Scss)

Type

Color
md-yellow-700
$md-yellow-700: #fbc02d;
Sass (Scss)

Type

Color
md-yellow-800
$md-yellow-800: #f9a825;
Sass (Scss)

Type

Color
md-yellow-900
$md-yellow-900: #f57f17;
Sass (Scss)

Type

Color
md-yellow-a-100
$md-yellow-a-100: #ffff8d;
Sass (Scss)

Type

Color
md-yellow-a-200
$md-yellow-a-200: #ff0;
Sass (Scss)

Type

Color
md-yellow-a-400
$md-yellow-a-400: #ffea00;
Sass (Scss)

Type

Color
md-yellow-a-700
$md-yellow-a-700: #ffd600;
Sass (Scss)

Type

Color
md-amber-50
$md-amber-50: #fff8e1;
Sass (Scss)

Type

Color
md-amber-100
$md-amber-100: #ffecb3;
Sass (Scss)

Type

Color
md-amber-200
$md-amber-200: #ffe082;
Sass (Scss)

Type

Color
md-amber-300
$md-amber-300: #ffd54f;
Sass (Scss)

Type

Color
md-amber-400
$md-amber-400: #ffca28;
Sass (Scss)

Type

Color
md-amber-500
$md-amber-500: #ffc107;
Sass (Scss)

Type

Color
md-amber-600
$md-amber-600: #ffb300;
Sass (Scss)

Type

Color
md-amber-700
$md-amber-700: #ffa000;
Sass (Scss)

Type

Color
md-amber-800
$md-amber-800: #ff8f00;
Sass (Scss)

Type

Color
md-amber-900
$md-amber-900: #ff6f00;
Sass (Scss)

Type

Color
md-amber-a-100
$md-amber-a-100: #ffe57f;
Sass (Scss)

Type

Color
md-amber-a-200
$md-amber-a-200: #ffd740;
Sass (Scss)

Type

Color
md-amber-a-400
$md-amber-a-400: #ffc400;
Sass (Scss)

Type

Color
md-amber-a-700
$md-amber-a-700: #ffab00;
Sass (Scss)

Type

Color
md-orange-50
$md-orange-50: #fff3e0;
Sass (Scss)

Type

Color
md-orange-100
$md-orange-100: #fff0b2;
Sass (Scss)

Type

Color
md-orange-200
$md-orange-200: #ffcc80;
Sass (Scss)

Type

Color
md-orange-300
$md-orange-300: #ffb74d;
Sass (Scss)

Type

Color
md-orange-400
$md-orange-400: #ffa726;
Sass (Scss)

Type

Color
md-orange-500
$md-orange-500: #ff9800;
Sass (Scss)

Type

Color
md-orange-600
$md-orange-600: #fb8c00;
Sass (Scss)

Type

Color
md-orange-700
$md-orange-700: #f57c00;
Sass (Scss)

Type

Color
md-orange-800
$md-orange-800: #ef6c00;
Sass (Scss)

Type

Color
md-orange-900
$md-orange-900: #e65100;
Sass (Scss)

Type

Color
md-orange-a-100
$md-orange-a-100: #ffd180;
Sass (Scss)

Type

Color
md-orange-a-200
$md-orange-a-200: #ffab40;
Sass (Scss)

Type

Color
md-orange-a-400
$md-orange-a-400: #ff9100;
Sass (Scss)

Type

Color
md-orange-a-700
$md-orange-a-700: #ff6d00;
Sass (Scss)

Type

Color
md-deep-orange-50
$md-deep-orange-50: #fbe9e7;
Sass (Scss)

Type

Color
md-deep-orange-100
$md-deep-orange-100: #ffccbc;
Sass (Scss)

Type

Color
md-deep-orange-200
$md-deep-orange-200: #ffab91;
Sass (Scss)

Type

Color
md-deep-orange-300
$md-deep-orange-300: #ff8a65;
Sass (Scss)

Type

Color
md-deep-orange-400
$md-deep-orange-400: #ff7043;
Sass (Scss)

Type

Color
md-deep-orange-500
$md-deep-orange-500: #ff5722;
Sass (Scss)

Type

Color
md-deep-orange-600
$md-deep-orange-600: #f4511e;
Sass (Scss)

Type

Color
md-deep-orange-700
$md-deep-orange-700: #e64a19;
Sass (Scss)

Type

Color
md-deep-orange-800
$md-deep-orange-800: #d84315;
Sass (Scss)

Type

Color
md-deep-orange-900
$md-deep-orange-900: #bf360c;
Sass (Scss)

Type

Color
md-deep-orange-a-100
$md-deep-orange-a-100: #ff9e80;
Sass (Scss)

Type

Color
md-deep-orange-a-200
$md-deep-orange-a-200: #ff6e40;
Sass (Scss)

Type

Color
md-deep-orange-a-400
$md-deep-orange-a-400: #ff3d00;
Sass (Scss)

Type

Color
md-deep-orange-a-700
$md-deep-orange-a-700: #dd2c00;
Sass (Scss)

Type

Color
md-brown-50
$md-brown-50: #efebe9;
Sass (Scss)

Type

Color
md-brown-100
$md-brown-100: #d7ccc8;
Sass (Scss)

Type

Color
md-brown-200
$md-brown-200: #bcaaa4;
Sass (Scss)

Type

Color
md-brown-300
$md-brown-300: #a1887f;
Sass (Scss)

Type

Color
md-brown-400
$md-brown-400: #8d6e63;
Sass (Scss)

Type

Color
md-brown-500
$md-brown-500: #795548;
Sass (Scss)

Type

Color
md-brown-600
$md-brown-600: #6d4c41;
Sass (Scss)

Type

Color
md-brown-700
$md-brown-700: #5d4037;
Sass (Scss)

Type

Color
md-brown-800
$md-brown-800: #4e342e;
Sass (Scss)

Type

Color
md-brown-900
$md-brown-900: #3e2723;
Sass (Scss)

Type

Color
md-grey-50
$md-grey-50: #fafafa;
Sass (Scss)

Type

Color
md-grey-100
$md-grey-100: #f5f5f5;
Sass (Scss)

Type

Color

Used by

md-grey-200
$md-grey-200: #eee;
Sass (Scss)

Type

Color

Used by

md-grey-300
$md-grey-300: #e0e0e0;
Sass (Scss)

Type

Color
md-grey-400
$md-grey-400: #bdbdbd;
Sass (Scss)

Type

Color

Used by

md-grey-500
$md-grey-500: #9e9e9e;
Sass (Scss)

Type

Color
md-grey-600
$md-grey-600: #757575;
Sass (Scss)

Type

Color
md-grey-700
$md-grey-700: #616161;
Sass (Scss)

Type

Color

Used by

md-grey-800
$md-grey-800: #424242;
Sass (Scss)

Type

Color
md-grey-900
$md-grey-900: #212121;
Sass (Scss)

Type

Color
md-blue-grey-50
$md-blue-grey-50: #eceff1;
Sass (Scss)

Type

Color
md-blue-grey-100
$md-blue-grey-100: #cfd8dc;
Sass (Scss)

Type

Color
md-blue-grey-200
$md-blue-grey-200: #b0bec5;
Sass (Scss)

Type

Color
md-blue-grey-300
$md-blue-grey-300: #90a4ae;
Sass (Scss)

Type

Color
md-blue-grey-400
$md-blue-grey-400: #78909c;
Sass (Scss)

Type

Color
md-blue-grey-500
$md-blue-grey-500: #607d8b;
Sass (Scss)

Type

Color
md-blue-grey-600
$md-blue-grey-600: #546e7a;
Sass (Scss)

Type

Color
md-blue-grey-700
$md-blue-grey-700: #455a64;
Sass (Scss)

Type

Color
md-blue-grey-800
$md-blue-grey-800: #37474f;
Sass (Scss)

Type

Color
md-blue-grey-900
$md-blue-grey-900: #263238;
Sass (Scss)

Type

Color
md-black-base
$md-black-base: #000;
Sass (Scss)

Type

Color

Used by

md-color-map
$md-color-map: ()
Sass (Scss)
Click to expand

Description

This is a map of all the material design base colors so that you can programmatically get variables with the neat sass-map functions.

Type

Map

Examples

Example Usage SCSS

.error-field {
  background: map-get(md-red-300, $md-color-map);
}
Sass (Scss)

Used by

md-light-theme-text-color
$md-light-theme-text-color: rgba($md-black-base, .87) !default;
Sass (Scss)

Type

Color
md-light-theme-secondary-text-color
$md-light-theme-secondary-text-color: rgba($md-black-base, .54) !default;
Sass (Scss)

Type

Color

Used by

md-light-theme-icon-text-color
$md-light-theme-icon-text-color: $md-light-theme-secondary-text-color !default;
Sass (Scss)

Type

Color
md-light-theme-disabled-text-color
$md-light-theme-disabled-text-color: rgba($md-black-base, .38) !default;
Sass (Scss)

Type

Color
md-light-theme-hint-text-color
$md-light-theme-hint-text-color: $md-light-theme-disabled-text-color !default;
Sass (Scss)

Type

Color
md-light-theme-divider-color
$md-light-theme-divider-color: rgba($md-black-base, .12) !default;
Sass (Scss)

Type

Color

Used by

md-light-theme-status-bar-color
$md-light-theme-status-bar-color: $md-grey-300 !default;
Sass (Scss)

Type

Color
md-light-theme-app-bar-color
$md-light-theme-app-bar-color: $md-grey-100 !default;
Sass (Scss)

Type

Color
md-light-theme-background-color
$md-light-theme-background-color: $md-grey-50 !default;
Sass (Scss)

Type

Color

Used by

md-light-theme-card-color
$md-light-theme-card-color: $md-white-base !default;
Sass (Scss)

Type

Color
md-dark-theme-text-color
$md-dark-theme-text-color: $md-white-base !default;
Sass (Scss)

Type

Color
md-dark-theme-secondary-text-color
$md-dark-theme-secondary-text-color: rgba($md-white-base, .7) !default;
Sass (Scss)

Type

Color

Used by

md-dark-theme-icon-text-color
$md-dark-theme-icon-text-color: $md-dark-theme-secondary-text-color !default;
Sass (Scss)

Type

Color
md-dark-theme-disabled-text-color
$md-dark-theme-disabled-text-color: rgba($md-white-base, .3) !default;
Sass (Scss)

Type

Color
md-dark-theme-hint-text-color
$md-dark-theme-hint-text-color: $md-dark-theme-disabled-text-color !default;
Sass (Scss)

Type

Color
md-dark-theme-divider-color
$md-dark-theme-divider-color: rgba($md-white-base, .12) !default;
Sass (Scss)

Type

Color

Used by

md-dark-theme-status-bar-color
$md-dark-theme-status-bar-color: $md-black-base !default;
Sass (Scss)

Type

Color
md-dark-theme-app-bar-color
$md-dark-theme-app-bar-color: $md-grey-900 !default;
Sass (Scss)

Type

Color
md-dark-theme-background-color
$md-dark-theme-background-color: #303030 !default;
Sass (Scss)

Type

Color

Used by

md-dark-theme-card-color
$md-dark-theme-card-color: $md-grey-800 !default;
Sass (Scss)

Type

Color
md-light-theme-colors
$md-light-theme-colors: ()
Sass (Scss)
Click to expand

Description

A mapping of all the light-theme colors.

Type

Map

Used by

md-dark-theme-colors
$md-dark-theme-colors: ()
Sass (Scss)
Click to expand

Description

A mapping of all the dark-theme colors.

Type

Map

Used by

md-colors-warn-md
$md-colors-warn-md: true !default;
Sass (Scss)

Description

Boolean if the there should be warnings about colors not being from material design. This is enabled by default to alert users of the lib to set the correct fallback colors.

Type

Boolean

Used by

See

Functions

get-color
@function get-color($name, $light-theme) {}
Sass (Scss)
Click to expand

Description

A utility function for getting a color from either the light or dark theme.

Parameters

NameDescriptionTypeDefault value
$name

The color name to look up.

String
$light-theme

Boolean if it is for the light theme.

Boolean

Returns

Color

the color for the theme or null if it is not a color that changes based on the theme.

Requires

Used by

get-swatch
@function get-swatch($color, $swatch, $accent: false, $fallback-color: null, $fallback-name: null) {}
Sass (Scss)
Click to expand

Description

A utility function to take a color and get a different swatch/accent color in the same family.

Parameters

NameDescriptionTypeDefault value
$color

The material design color to get a swatch for.

Color
$swatch

The swatch to get.

Number
$accent

Boolean if the swatch is the accent color.

Boolean
false
$fallback-color

An optional color to fallback if the given color is not a valid material design color.

Color
null
$fallback-name

An optional name for the fallback color's variable to help set a correct fallback value.

String
null

Returns

Color

the color with the correct swatch.

Requires

Used by

Mixins

react-md-colors-hover
@mixin react-md-colors-hover($primary-color: $md-primary-color, $primary-opacity: $md-primary-hover-opacity, $secondary-color: $md-secondary-color, $secondary-opacity: $md-secondary-hover-opacity) {}
Sass (Scss)
Click to expand

Description

Creates the two class names for getting a primary or secondary background hover effect, Since the :hover selector still gets applied on mobile devices, these styles are wrapped in the desktop media query.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to use as the base for the hover effect.

Color
$md-primary-color
$primary-opacity

The opacity to apply to the primary color.

Number
$md-primary-hover-opacity
$secondary-color

The secondary color to use as the base for the hover effect.

Color
$md-secondary-color
$secondary-opacity

The opacity to apply to the secondary color.

Number
$md-secondary-hover-opacity

Examples

Created Class Names

  • .md-background--primary-hover
  • .md-background--secondary-hover

Requires

Used by

react-md-color-class-names
@mixin react-md-color-class-names($include-text: true, $include-background: true) {}
Sass (Scss)
Click to expand

Description

This will create two class names for every material design color. The first class name can be used to style any text with that color, while the other will be used to style the background color.

Parameters

NameDescriptionTypeDefault value
$include-text

Boolean if the text class name should be created.

Boolean
true
$include-background

Boolean if the background class name should be created.

Boolean
true

Examples

Example Usage SCSS

@include react-md-color-class-names;
Sass (Scss)

Example Usage CSS Output

.md-red-50--text {
  color: #ffebee;
}

.md-red-50--background {
  background: #ffebee;
}
Sass (Scss)

Requires

Used by

react-md-color-class-name
@mixin react-md-color-class-name($name, $color, $include-text: true, $include-background: true) {}
Sass (Scss)
Click to expand

Description

Creates 0 - 2 class names for a given color. No classes will be created if both $include-text and $include-background are false.

Parameters

NameDescriptionTypeDefault value
$name

The class name prefix to use.

String
$color

The color to apply to text, background, or both.

Color
$include-text

Boolean if the text class name should be created.

Boolean
true
$include-background

Boolean if the background class name should be created.

Boolean
true

Examples

Example Usage SCSS

@include react-md-color-class-name(md-red-500, $md-red-500);
@include react-md-color-class-name(md-blue-200, $md-blue-200, false, true);
Sass (Scss)

Example Usage CSS Output

.md-red-500--text {
  color: #f44336;
}

.md-red-500--background {
  background: #f44336;
}

.md-blue-200--background {
  background: #90caf9;
}
Sass (Scss)

Used by

react-md-colors
@mixin react-md-colors($primary-color: $md-primary-color, $secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $include-media: $md-media-included, $include-color-class-names: $md-colors-include-class-names, $primary-opacity: $md-primary-hover-opacity, $primary-background-text-color: $md-primary-background-text-color, $secondary-opacity: $md-secondary-hover-opacity, $secondary-background-text-color: $md-secondary-background-text-color, $error-color: $md-error-color) {}
Sass (Scss)
Click to expand

Description

A mixin for generating the base color class names to be used on multiple components. This will generate the following class names:

  • md-text - Styles the color to be the text color.
  • md-text--secondary - Styles the color to be the secondary text color.
  • md-text--disabled - Styles the color to be the disabled text color.
  • md-text--error - Styles the color to be the error text color.
  • md-text--theme-primary - Styles the color to be the primary color.
  • md-text--theme-secondary - Styles the color to be the secondary color.
  • md-background - Styles the background to be the base background color.
  • md-background--primary - Styles the background to be the primary color.
  • md-background--primary-hover - Styles the background to be the primary color with some opacity.
  • md-background--secondary - Styles the background to be the secondary color.
  • md-background--secondary-hover - Styles the background to be the secondary color with some opacity.
  • md-text--theme-primary-ink - Styles any ink inside this class to use the primary color.
  • md-text--theme-secondary-ink - Styles any ink inside this class to use the secondary color.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to use.

Color
$md-primary-color
$secondary-color

The secondary color to use.

Color
$md-secondary-color
$light-theme

Boolean if styling with the light theme.

Boolean
$md-light-theme
$include-media

Boolean if the media queries should also be included.

Boolean
$md-media-included
$include-color-class-names

Boolean if a class name should be created for every color as well.

Boolean
$md-colors-include-class-names
$primary-opacity

The opacity to apply to the primary color with the md-background--primary class name.

Number
$md-primary-hover-opacity
$primary-background-text-color

The text color for any text that appears inside the md-background--primary class name.

Color
$md-primary-background-text-color
$secondary-opacity

The opacity to apply to the secondary color with the md-background--secondary class name.

Number
$md-secondary-hover-opacity
$secondary-background-text-color

The text color for any text that appears inside the md-background--secondary class name.

Color
$md-secondary-background-text-color
$error-color

The text color for any text that appears in the md-text--error class name.

Color
$md-error-color

Examples

Example Usage SCSS

@include react-md-colors;
Sass (Scss)

Requires

Used by

react-md-theme-colors
@mixin react-md-theme-colors($primary-color: $md-primary-color, $secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $include-media: $md-media-included, $primary-opacity: $md-primary-hover-opacity, $primary-background-text-color: $md-primary-background-text-color, $secondary-opacity: $md-secondary-hover-opacity, $secondary-background-text-color: $md-secondary-background-text-color, $error-color: $md-error-color) {}
Sass (Scss)
Click to expand

Description

This will conditionally update theme colors. The theme colors will only be updated if their value does not equal the global value.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to use.

Color
$md-primary-color
$secondary-color

The secondary color to use.

Color
$md-secondary-color
$light-theme

Boolean if styling with the light theme.

Boolean
$md-light-theme
$include-media

Boolean if the media queries for the hover effects should also be included

Boolean
$md-media-included
$primary-opacity

The opacity to apply to the primary color.

Number
$md-primary-hover-opacity
$primary-background-text-color

The text color for any text that appears inside the md-background--primary class name.

Color
$md-primary-background-text-color
$secondary-opacity

The opacity to apply to the secondary color.

Number
$md-secondary-hover-opacity
$secondary-background-text-color

The text color for any text that appears inside the md-background--secondary class name.

Color
$md-secondary-background-text-color
$error-color

The text color for any text that appears in the md-text--error class name.

Color
$md-error-color

Examples

Example Usage SCSS

@include react-md-theme-colors($md-blue-500, $md-red-a-200, false);
Sass (Scss)

Requires

Used by