diff --git a/src/_color-definitions.scss b/src/_color-definitions.scss
index 10b3646dab..63ac5ccae7 100644
--- a/src/_color-definitions.scss
+++ b/src/_color-definitions.scss
@@ -19,21 +19,21 @@
 // Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200,
 // A400, A700.
 
-$palette-red:
-"255,235,238"
-"255,205,210"
-"239,154,154"
-"229,115,115"
-"239,83,80"
-"244,67,54"
-"229,57,53"
-"211,47,47"
-"198,40,40"
-"183,28,28"
-"255,138,128"
-"255,82,82"
-"255,23,68"
-"213,0,0";
+$palette-red: (
+  rgb(255, 235, 238),
+  rgb(255, 205, 210),
+  rgb(239, 154, 154),
+  rgb(229, 115, 115),
+  rgb(239, 83, 80),
+  rgb(244, 67, 54),
+  rgb(229, 57, 53),
+  rgb(211, 47, 47),
+  rgb(198, 40, 40),
+  rgb(183, 28, 28),
+  rgb(255, 138, 128),
+  rgb(255, 82, 82),
+  rgb(255, 23, 68),
+  rgb(213, 0, 0));
 
 $palette-red-50: nth($palette-red, 1);
 $palette-red-100: nth($palette-red, 2);
@@ -50,21 +50,21 @@ $palette-red-A200: nth($palette-red, 12);
 $palette-red-A400: nth($palette-red, 13);
 $palette-red-A700: nth($palette-red, 14);
 
-$palette-pink:
-"252,228,236"
-"248,187,208"
-"244,143,177"
-"240,98,146"
-"236,64,122"
-"233,30,99"
-"216,27,96"
-"194,24,91"
-"173,20,87"
-"136,14,79"
-"255,128,171"
-"255,64,129"
-"245,0,87"
-"197,17,98";
+$palette-pink: (
+  rgb(252, 228, 236),
+  rgb(248, 187, 208),
+  rgb(244, 143, 177),
+  rgb(240, 98, 146),
+  rgb(236, 64, 122),
+  rgb(233, 30, 99),
+  rgb(216, 27, 96),
+  rgb(194, 24, 91),
+  rgb(173, 20, 87),
+  rgb(136, 14, 79),
+  rgb(255, 128, 171),
+  rgb(255, 64, 129),
+  rgb(245, 0, 87),
+  rgb(197, 17, 98));
 
 $palette-pink-50: nth($palette-pink, 1);
 $palette-pink-100: nth($palette-pink, 2);
@@ -81,21 +81,21 @@ $palette-pink-A200: nth($palette-pink, 12);
 $palette-pink-A400: nth($palette-pink, 13);
 $palette-pink-A700: nth($palette-pink, 14);
 
-$palette-purple:
-"243,229,245"
-"225,190,231"
-"206,147,216"
-"186,104,200"
-"171,71,188"
-"156,39,176"
-"142,36,170"
-"123,31,162"
-"106,27,154"
-"74,20,140"
-"234,128,252"
-"224,64,251"
-"213,0,249"
-"170,0,255";
+$palette-purple: (
+  rgb(243, 229, 245),
+  rgb(225, 190, 231),
+  rgb(206, 147, 216),
+  rgb(186, 104, 200),
+  rgb(171, 71, 188),
+  rgb(156, 39, 176),
+  rgb(142, 36, 170),
+  rgb(123, 31, 162),
+  rgb(106, 27, 154),
+  rgb(74, 20, 140),
+  rgb(234, 128, 252),
+  rgb(224, 64, 251),
+  rgb(213, 0, 249),
+  rgb(170, 0, 255));
 
 $palette-purple-50: nth($palette-purple, 1);
 $palette-purple-100: nth($palette-purple, 2);
@@ -112,21 +112,21 @@ $palette-purple-A200: nth($palette-purple, 12);
 $palette-purple-A400: nth($palette-purple, 13);
 $palette-purple-A700: nth($palette-purple, 14);
 
-$palette-deep-purple:
-"237,231,246"
-"209,196,233"
-"179,157,219"
-"149,117,205"
-"126,87,194"
-"103,58,183"
-"94,53,177"
-"81,45,168"
-"69,39,160"
-"49,27,146"
-"179,136,255"
-"124,77,255"
-"101,31,255"
-"98,0,234";
+$palette-deep-purple: (
+  rgb(237, 231, 246),
+  rgb(209, 196, 233),
+  rgb(179, 157, 219),
+  rgb(149, 117, 205),
+  rgb(126, 87, 194),
+  rgb(103, 58, 183),
+  rgb(94, 53, 177),
+  rgb(81, 45, 168),
+  rgb(69, 39, 160),
+  rgb(49, 27, 146),
+  rgb(179, 136, 255),
+  rgb(124, 77, 255),
+  rgb(101, 31, 255),
+  rgb(98, 0, 234));
 
 $palette-deep-purple-50: nth($palette-deep-purple, 1);
 $palette-deep-purple-100: nth($palette-deep-purple, 2);
@@ -143,21 +143,21 @@ $palette-deep-purple-A200: nth($palette-deep-purple, 12);
 $palette-deep-purple-A400: nth($palette-deep-purple, 13);
 $palette-deep-purple-A700: nth($palette-deep-purple, 14);
 
-$palette-indigo:
-"232,234,246"
-"197,202,233"
-"159,168,218"
-"121,134,203"
-"92,107,192"
-"63,81,181"
-"57,73,171"
-"48,63,159"
-"40,53,147"
-"26,35,126"
-"140,158,255"
-"83,109,254"
-"61,90,254"
-"48,79,254";
+$palette-indigo: (
+  rgb(232, 234, 246),
+  rgb(197, 202, 233),
+  rgb(159, 168, 218),
+  rgb(121, 134, 203),
+  rgb(92, 107, 192),
+  rgb(63, 81, 181),
+  rgb(57, 73, 171),
+  rgb(48, 63, 159),
+  rgb(40, 53, 147),
+  rgb(26, 35, 126),
+  rgb(140, 158, 255),
+  rgb(83, 109, 254),
+  rgb(61, 90, 254),
+  rgb(48, 79, 254));
 
 $palette-indigo-50: nth($palette-indigo, 1);
 $palette-indigo-100: nth($palette-indigo, 2);
@@ -174,21 +174,21 @@ $palette-indigo-A200: nth($palette-indigo, 12);
 $palette-indigo-A400: nth($palette-indigo, 13);
 $palette-indigo-A700: nth($palette-indigo, 14);
 
-$palette-blue:
-"227,242,253"
-"187,222,251"
-"144,202,249"
-"100,181,246"
-"66,165,245"
-"33,150,243"
-"30,136,229"
-"25,118,210"
-"21,101,192"
-"13,71,161"
-"130,177,255"
-"68,138,255"
-"41,121,255"
-"41,98,255";
+$palette-blue: (
+  rgb(227, 242, 253),
+  rgb(187, 222, 251),
+  rgb(144, 202, 249),
+  rgb(100, 181, 246),
+  rgb(66, 165, 245),
+  rgb(33, 150, 243),
+  rgb(30, 136, 229),
+  rgb(25, 118, 210),
+  rgb(21, 101, 192),
+  rgb(13, 71, 161),
+  rgb(130, 177, 255),
+  rgb(68, 138, 255),
+  rgb(41, 121, 255),
+  rgb(41, 98, 255));
 
 $palette-blue-50: nth($palette-blue, 1);
 $palette-blue-100: nth($palette-blue, 2);
@@ -205,21 +205,21 @@ $palette-blue-A200: nth($palette-blue, 12);
 $palette-blue-A400: nth($palette-blue, 13);
 $palette-blue-A700: nth($palette-blue, 14);
 
-$palette-light-blue:
-"225,245,254"
-"179,229,252"
-"129,212,250"
-"79,195,247"
-"41,182,246"
-"3,169,244"
-"3,155,229"
-"2,136,209"
-"2,119,189"
-"1,87,155"
-"128,216,255"
-"64,196,255"
-"0,176,255"
-"0,145,234";
+$palette-light-blue: (
+  rgb(225, 245, 254),
+  rgb(179, 229, 252),
+  rgb(129, 212, 250),
+  rgb(79, 195, 247),
+  rgb(41, 182, 246),
+  rgb(3, 169, 244),
+  rgb(3, 155, 229),
+  rgb(2, 136, 209),
+  rgb(2, 119, 189),
+  rgb(1, 87, 155),
+  rgb(128, 216, 255),
+  rgb(64, 196, 255),
+  rgb(0, 176, 255),
+  rgb(0, 145, 234));
 
 $palette-light-blue-50: nth($palette-light-blue, 1);
 $palette-light-blue-100: nth($palette-light-blue, 2);
@@ -236,21 +236,21 @@ $palette-light-blue-A200: nth($palette-light-blue, 12);
 $palette-light-blue-A400: nth($palette-light-blue, 13);
 $palette-light-blue-A700: nth($palette-light-blue, 14);
 
-$palette-cyan:
-"224,247,250"
-"178,235,242"
-"128,222,234"
-"77,208,225"
-"38,198,218"
-"0,188,212"
-"0,172,193"
-"0,151,167"
-"0,131,143"
-"0,96,100"
-"132,255,255"
-"24,255,255"
-"0,229,255"
-"0,184,212";
+$palette-cyan: (
+  rgb(224, 247, 250),
+  rgb(178, 235, 242),
+  rgb(128, 222, 234),
+  rgb(77, 208, 225),
+  rgb(38, 198, 218),
+  rgb(0, 188, 212),
+  rgb(0, 172, 193),
+  rgb(0, 151, 167),
+  rgb(0, 131, 143),
+  rgb(0, 96, 100),
+  rgb(132, 255, 255),
+  rgb(24, 255, 255),
+  rgb(0, 229, 255),
+  rgb(0, 184, 212));
 
 $palette-cyan-50: nth($palette-cyan, 1);
 $palette-cyan-100: nth($palette-cyan, 2);
@@ -267,21 +267,21 @@ $palette-cyan-A200: nth($palette-cyan, 12);
 $palette-cyan-A400: nth($palette-cyan, 13);
 $palette-cyan-A700: nth($palette-cyan, 14);
 
-$palette-teal:
-"224,242,241"
-"178,223,219"
-"128,203,196"
-"77,182,172"
-"38,166,154"
-"0,150,136"
-"0,137,123"
-"0,121,107"
-"0,105,92"
-"0,77,64"
-"167,255,235"
-"100,255,218"
-"29,233,182"
-"0,191,165";
+$palette-teal: (
+  rgb(224, 242, 241),
+  rgb(178, 223, 219),
+  rgb(128, 203, 196),
+  rgb(77, 182, 172),
+  rgb(38, 166, 154),
+  rgb(0, 150, 136),
+  rgb(0, 137, 123),
+  rgb(0, 121, 107),
+  rgb(0, 105, 92),
+  rgb(0, 77, 64),
+  rgb(167, 255, 235),
+  rgb(100, 255, 218),
+  rgb(29, 233, 182),
+  rgb(0, 191, 165));
 
 $palette-teal-50: nth($palette-teal, 1);
 $palette-teal-100: nth($palette-teal, 2);
@@ -298,21 +298,21 @@ $palette-teal-A200: nth($palette-teal, 12);
 $palette-teal-A400: nth($palette-teal, 13);
 $palette-teal-A700: nth($palette-teal, 14);
 
-$palette-green:
-"232,245,233"
-"200,230,201"
-"165,214,167"
-"129,199,132"
-"102,187,106"
-"76,175,80"
-"67,160,71"
-"56,142,60"
-"46,125,50"
-"27,94,32"
-"185,246,202"
-"105,240,174"
-"0,230,118"
-"0,200,83";
+$palette-green: (
+  rgb(232, 245, 233),
+  rgb(200, 230, 201),
+  rgb(165, 214, 167),
+  rgb(129, 199, 132),
+  rgb(102, 187, 106),
+  rgb(76, 175, 80),
+  rgb(67, 160, 71),
+  rgb(56, 142, 60),
+  rgb(46, 125, 50),
+  rgb(27, 94, 32),
+  rgb(185, 246, 202),
+  rgb(105, 240, 174),
+  rgb(0, 230, 118),
+  rgb(0, 200, 83));
 
 $palette-green-50: nth($palette-green, 1);
 $palette-green-100: nth($palette-green, 2);
@@ -329,21 +329,21 @@ $palette-green-A200: nth($palette-green, 12);
 $palette-green-A400: nth($palette-green, 13);
 $palette-green-A700: nth($palette-green, 14);
 
-$palette-light-green:
-"241,248,233"
-"220,237,200"
-"197,225,165"
-"174,213,129"
-"156,204,101"
-"139,195,74"
-"124,179,66"
-"104,159,56"
-"85,139,47"
-"51,105,30"
-"204,255,144"
-"178,255,89"
-"118,255,3"
-"100,221,23";
+$palette-light-green: (
+  rgb(241, 248, 233),
+  rgb(220, 237, 200),
+  rgb(197, 225, 165),
+  rgb(174, 213, 129),
+  rgb(156, 204, 101),
+  rgb(139, 195, 74),
+  rgb(124, 179, 66),
+  rgb(104, 159, 56),
+  rgb(85, 139, 47),
+  rgb(51, 105, 30),
+  rgb(204, 255, 144),
+  rgb(178, 255, 89),
+  rgb(118, 255, 3),
+  rgb(100, 221, 23));
 
 $palette-light-green-50: nth($palette-light-green, 1);
 $palette-light-green-100: nth($palette-light-green, 2);
@@ -360,21 +360,21 @@ $palette-light-green-A200: nth($palette-light-green, 12);
 $palette-light-green-A400: nth($palette-light-green, 13);
 $palette-light-green-A700: nth($palette-light-green, 14);
 
-$palette-lime:
-"249,251,231"
-"240,244,195"
-"230,238,156"
-"220,231,117"
-"212,225,87"
-"205,220,57"
-"192,202,51"
-"175,180,43"
-"158,157,36"
-"130,119,23"
-"244,255,129"
-"238,255,65"
-"198,255,0"
-"174,234,0";
+$palette-lime: (
+  rgb(249, 251, 231),
+  rgb(240, 244, 195),
+  rgb(230, 238, 156),
+  rgb(220, 231, 117),
+  rgb(212, 225, 87),
+  rgb(205, 220, 57),
+  rgb(192, 202, 51),
+  rgb(175, 180, 43),
+  rgb(158, 157, 36),
+  rgb(130, 119, 23),
+  rgb(244, 255, 129),
+  rgb(238, 255, 65),
+  rgb(198, 255, 0),
+  rgb(174, 234, 0));
 
 $palette-lime-50: nth($palette-lime, 1);
 $palette-lime-100: nth($palette-lime, 2);
@@ -391,21 +391,21 @@ $palette-lime-A200: nth($palette-lime, 12);
 $palette-lime-A400: nth($palette-lime, 13);
 $palette-lime-A700: nth($palette-lime, 14);
 
-$palette-yellow:
-"255,253,231"
-"255,249,196"
-"255,245,157"
-"255,241,118"
-"255,238,88"
-"255,235,59"
-"253,216,53"
-"251,192,45"
-"249,168,37"
-"245,127,23"
-"255,255,141"
-"255,255,0"
-"255,234,0"
-"255,214,0";
+$palette-yellow: (
+  rgb(255, 253, 231),
+  rgb(255, 249, 196),
+  rgb(255, 245, 157),
+  rgb(255, 241, 118),
+  rgb(255, 238, 88),
+  rgb(255, 235, 59),
+  rgb(253, 216, 53),
+  rgb(251, 192, 45),
+  rgb(249, 168, 37),
+  rgb(245, 127, 23),
+  rgb(255, 255, 141),
+  rgb(255, 255, 0),
+  rgb(255, 234, 0),
+  rgb(255, 214, 0));
 
 $palette-yellow-50: nth($palette-yellow, 1);
 $palette-yellow-100: nth($palette-yellow, 2);
@@ -422,21 +422,21 @@ $palette-yellow-A200: nth($palette-yellow, 12);
 $palette-yellow-A400: nth($palette-yellow, 13);
 $palette-yellow-A700: nth($palette-yellow, 14);
 
-$palette-amber:
-"255,248,225"
-"255,236,179"
-"255,224,130"
-"255,213,79"
-"255,202,40"
-"255,193,7"
-"255,179,0"
-"255,160,0"
-"255,143,0"
-"255,111,0"
-"255,229,127"
-"255,215,64"
-"255,196,0"
-"255,171,0";
+$palette-amber: (
+  rgb(255, 248, 225),
+  rgb(255, 236, 179),
+  rgb(255, 224, 130),
+  rgb(255, 213, 79),
+  rgb(255, 202, 40),
+  rgb(255, 193, 7),
+  rgb(255, 179, 0),
+  rgb(255, 160, 0),
+  rgb(255, 143, 0),
+  rgb(255, 111, 0),
+  rgb(255, 229, 127),
+  rgb(255, 215, 64),
+  rgb(255, 196, 0),
+  rgb(255, 171, 0));
 
 $palette-amber-50: nth($palette-amber, 1);
 $palette-amber-100: nth($palette-amber, 2);
@@ -453,21 +453,21 @@ $palette-amber-A200: nth($palette-amber, 12);
 $palette-amber-A400: nth($palette-amber, 13);
 $palette-amber-A700: nth($palette-amber, 14);
 
-$palette-orange:
-"255,243,224"
-"255,224,178"
-"255,204,128"
-"255,183,77"
-"255,167,38"
-"255,152,0"
-"251,140,0"
-"245,124,0"
-"239,108,0"
-"230,81,0"
-"255,209,128"
-"255,171,64"
-"255,145,0"
-"255,109,0";
+$palette-orange: (
+  rgb(255, 243, 224),
+  rgb(255, 224, 178),
+  rgb(255, 204, 128),
+  rgb(255, 183, 77),
+  rgb(255, 167, 38),
+  rgb(255, 152, 0),
+  rgb(251, 140, 0),
+  rgb(245, 124, 0),
+  rgb(239, 108, 0),
+  rgb(230, 81, 0),
+  rgb(255, 209, 128),
+  rgb(255, 171, 64),
+  rgb(255, 145, 0),
+  rgb(255, 109, 0));
 
 $palette-orange-50: nth($palette-orange, 1);
 $palette-orange-100: nth($palette-orange, 2);
@@ -484,21 +484,21 @@ $palette-orange-A200: nth($palette-orange, 12);
 $palette-orange-A400: nth($palette-orange, 13);
 $palette-orange-A700: nth($palette-orange, 14);
 
-$palette-deep-orange:
-"251,233,231"
-"255,204,188"
-"255,171,145"
-"255,138,101"
-"255,112,67"
-"255,87,34"
-"244,81,30"
-"230,74,25"
-"216,67,21"
-"191,54,12"
-"255,158,128"
-"255,110,64"
-"255,61,0"
-"221,44,0";
+$palette-deep-orange: (
+  rgb(251, 233, 231),
+  rgb(255, 204, 188),
+  rgb(255, 171, 145),
+  rgb(255, 138, 101),
+  rgb(255, 112, 67),
+  rgb(255, 87, 34),
+  rgb(244, 81, 30),
+  rgb(230, 74, 25),
+  rgb(216, 67, 21),
+  rgb(191, 54, 12),
+  rgb(255, 158, 128),
+  rgb(255, 110, 64),
+  rgb(255, 61, 0),
+  rgb(221, 44, 0));
 
 $palette-deep-orange-50: nth($palette-deep-orange, 1);
 $palette-deep-orange-100: nth($palette-deep-orange, 2);
@@ -515,20 +515,19 @@ $palette-deep-orange-A200: nth($palette-deep-orange, 12);
 $palette-deep-orange-A400: nth($palette-deep-orange, 13);
 $palette-deep-orange-A700: nth($palette-deep-orange, 14);
 
-
 // Color order: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
 
-$palette-brown:
-"239,235,233"
-"215,204,200"
-"188,170,164"
-"161,136,127"
-"141,110,99"
-"121,85,72"
-"109,76,65"
-"93,64,55"
-"78,52,46"
-"62,39,35";
+$palette-brown: (
+  rgb(239, 235, 233),
+  rgb(215, 204, 200),
+  rgb(188, 170, 164),
+  rgb(161, 136, 127),
+  rgb(141, 110, 99),
+  rgb(121, 85, 72),
+  rgb(109, 76, 65),
+  rgb(93, 64, 55),
+  rgb(78, 52, 46),
+  rgb(62, 39, 35));
 
 $palette-brown-50: nth($palette-brown, 1);
 $palette-brown-100: nth($palette-brown, 2);
@@ -541,17 +540,17 @@ $palette-brown-700: nth($palette-brown, 8);
 $palette-brown-800: nth($palette-brown, 9);
 $palette-brown-900: nth($palette-brown, 10);
 
-$palette-grey:
-"250,250,250"
-"245,245,245"
-"238,238,238"
-"224,224,224"
-"189,189,189"
-"158,158,158"
-"117,117,117"
-"97,97,97"
-"66,66,66"
-"33,33,33";
+$palette-grey: (
+  rgb(250, 250, 250),
+  rgb(245, 245, 245),
+  rgb(238, 238, 238),
+  rgb(224, 224, 224),
+  rgb(189, 189, 189),
+  rgb(158, 158, 158),
+  rgb(117, 117, 117),
+  rgb(97, 97, 97),
+  rgb(66, 66, 66),
+  rgb(33, 33, 33));
 
 $palette-grey-50: nth($palette-grey, 1);
 $palette-grey-100: nth($palette-grey, 2);
@@ -564,17 +563,17 @@ $palette-grey-700: nth($palette-grey, 8);
 $palette-grey-800: nth($palette-grey, 9);
 $palette-grey-900: nth($palette-grey, 10);
 
-$palette-blue-grey:
-"236,239,241"
-"207,216,220"
-"176,190,197"
-"144,164,174"
-"120,144,156"
-"96,125,139"
-"84,110,122"
-"69,90,100"
-"55,71,79"
-"38,50,56";
+$palette-blue-grey: (
+  rgb(236, 239, 241),
+  rgb(207, 216, 220),
+  rgb(176, 190, 197),
+  rgb(144, 164, 174),
+  rgb(120, 144, 156),
+  rgb(96, 125, 139),
+  rgb(84, 110, 122),
+  rgb(69, 90, 100),
+  rgb(55, 71, 79),
+  rgb(38, 50, 56));
 
 $palette-blue-grey-50: nth($palette-blue-grey, 1);
 $palette-blue-grey-100: nth($palette-blue-grey, 2);
@@ -587,8 +586,8 @@ $palette-blue-grey-700: nth($palette-blue-grey, 8);
 $palette-blue-grey-800: nth($palette-blue-grey, 9);
 $palette-blue-grey-900: nth($palette-blue-grey, 10);
 
-$color-black: "0,0,0";
-$color-white: "255,255,255";
+$color-black: #000;
+$color-white: #fff;
 
 
 /* colors.scss */
diff --git a/src/_functions.scss b/src/_functions.scss
index 80e7ca479b..6910211e08 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -14,6 +14,18 @@
  * limitations under the License.
  */
 
-@function strip-units($number) {
-  @return $number / ($number * 0 + 1);
+
+/**
+ * If passed a color, behaves just like the built-in `rgba`.
+ * Otherwise, generates an `rgba` literal.
+ *
+ * This is used for generating invalid CSS with placeholders for colors that can
+ * then be customized into valid CSS without using Sass.
+ */
+@function rgba-tpl($color, $alpha) {
+  @if type-of($color) == color {
+    @return rgba($color, $alpha);
+  } @else {
+    @return unquote("rgba(#{$color}, #{$alpha})");
+  }
 }
diff --git a/src/_variables.scss b/src/_variables.scss
index 6d62b2c78f..991e88a783 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -98,11 +98,11 @@ $color-accent-contrast: $color-dark-contrast !default;
 
 // Replace all colors with placeholders if we're generating a template.
 @if $styleguide-generate-template == true {
-  $color-primary: '$color-primary';
-  $color-primary-dark: '$color-primary-dark';
-  $color-accent: '$color-accent';
-  $color-primary-contrast: '$color-primary-contrast';
-  $color-accent-contrast: '$color-accent-contrast';
+  $color-primary: unquote('$color-primary');
+  $color-primary-dark: unquote('$color-primary-dark');
+  $color-accent: unquote('$color-accent');
+  $color-primary-contrast: unquote('$color-primary-contrast');
+  $color-accent-contrast: unquote('$color-accent-contrast');
 }
 
 /* ==========  Typography  ========== */
@@ -111,8 +111,8 @@ $color-accent-contrast: $color-dark-contrast !default;
 // text-color-secondary. For light themes, use text-color-primary-inverse
 // and text-color-secondary-inverse.
 
-$text-color-primary: unquote("rgba(#{$color-black}, 0.87)") !default;
-$text-link-color: unquote("rgb(#{$color-accent})") !default;
+$text-color-primary: rgba-tpl($color-black, 0.87) !default;
+$text-link-color: $color-accent !default;
 
 // Define whether to target elements directly for typographic enhancements.
 // Turning this off means you need to use mdl-* classes more often.
@@ -126,172 +126,172 @@ $target-elements-directly: true !default;
 /* ==========  Standard Buttons  ========== */
 
 // Default button colors.
-$button-primary-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
-$button-secondary-color: unquote("rgb(#{$color-black})") !default;
+$button-primary-color: rgba-tpl($palette-grey-500, 0.20) !default;
+$button-secondary-color: $color-black !default;
 $button-hover-color: $button-primary-color !default;
-$button-active-color: unquote("rgba(#{$palette-grey-500}, 0.40)") !default;
-$button-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
+$button-active-color: rgba-tpl($palette-grey-500, 0.40) !default;
+$button-focus-color: rgba-tpl($color-black, 0.12) !default;
 
 // Colored button colors.
-$button-primary-color-alt: unquote("rgb(#{$color-primary})") !default;
-$button-secondary-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
-$button-hover-color-alt: unquote("rgb(#{$color-primary})") !default;
-$button-active-color-alt: unquote("rgb(#{$color-primary})") !default;
+$button-primary-color-alt: $color-primary !default;
+$button-secondary-color-alt: $color-primary-contrast !default;
+$button-hover-color-alt: $color-primary !default;
+$button-active-color-alt: $color-primary !default;
 $button-focus-color-alt: $button-focus-color !default;
 
 // Ripple color for colored raised buttons.
-$button-ripple-color-alt: unquote("rgb(#{$color-primary-contrast})") !default;
+$button-ripple-color-alt: $color-primary-contrast !default;
 
 // Disabled button colors.
-$button-primary-color-disabled: unquote("rgba(#{$color-black}, 0.12)") !default;
-$button-secondary-color-disabled: unquote("rgba(#{$color-black}, 0.26)") !default;
+$button-primary-color-disabled: rgba-tpl($color-black, 0.12) !default;
+$button-secondary-color-disabled: rgba-tpl($color-black, 0.26) !default;
 
 // FAB colors and sizes.
-$button-fab-color-alt: unquote("rgb(#{$color-accent})") !default;
-$button-fab-hover-color-alt: unquote("rgb(#{$color-accent})") !default;
-$button-fab-active-color-alt: unquote("rgb(#{$color-accent})") !default;
-$button-fab-text-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
-$button-fab-ripple-color-alt: unquote("rgb(#{$color-accent-contrast})") !default;
+$button-fab-color-alt: $color-accent !default;
+$button-fab-hover-color-alt: $color-accent !default;
+$button-fab-active-color-alt: $color-accent !default;
+$button-fab-text-color-alt: $color-accent-contrast !default;
+$button-fab-ripple-color-alt: $color-accent-contrast !default;
 
 // Icon button colors and sizes.
-$button-icon-color: unquote("rgb(#{$palette-grey-700})") !default;
+$button-icon-color: $palette-grey-700 !default;
 $button-icon-focus-color: $button-focus-color !default;
 
 /* ==========  Icon Toggles  ========== */
 
-$icon-toggle-color: unquote("rgb(#{$palette-grey-700})") !default;
+$icon-toggle-color: $palette-grey-700 !default;
 $icon-toggle-focus-color: $button-focus-color !default;
-$icon-toggle-checked-color: unquote("rgb(#{$color-primary})") !default;
-$icon-toggle-checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
-$icon-toggle-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+$icon-toggle-checked-color: $color-primary !default;
+$icon-toggle-checked-focus-color: rgba-tpl($color-primary, 0.26) !default;
+$icon-toggle-disabled-color: rgba-tpl($color-black, 0.26) !default;
 
 /* ==========  Radio Buttons  ========== */
 
-$radio-color: unquote("rgb(#{$color-primary})") !default;
-$radio-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
-$radio-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
+$radio-color: $color-primary !default;
+$radio-off-color: rgba-tpl($color-black, 0.54) !default;
+$radio-disabled-color: rgba-tpl($color-black, 0.26) !default;
 
 /* ==========  Ripple effect  ========== */
 
-$ripple-bg-color: unquote("rgb(#{$color-light-contrast})") !default;
+$ripple-bg-color: $color-light-contrast !default;
 
 /* ==========  Layout  ========== */
 
-$layout-nav-color: unquote("rgb(#{$palette-grey-300})") !default;
+$layout-nav-color: $palette-grey-300 !default;
 
 // Drawer
-$layout-drawer-bg-color: unquote("rgb(#{$palette-grey-50})") !default;
-$layout-drawer-border-color: unquote("rgb(#{$palette-grey-300})") !default;
-$layout-text-color: unquote("rgb(#{$palette-grey-800})") !default;
+$layout-drawer-bg-color: $palette-grey-50 !default;
+$layout-drawer-border-color: $palette-grey-300 !default;
+$layout-text-color: $palette-grey-800 !default;
 $layout-drawer-navigation-color: #757575 !default;
-$layout-drawer-navigation-link-active-background: unquote("rgb(#{$color-light-contrast})") !default;
-$layout-drawer-navigation-link-active-color: unquote("rgb(#{$color-primary})") !default;
+$layout-drawer-navigation-link-active-background: $color-light-contrast !default;
+$layout-drawer-navigation-link-active-color: $color-primary !default;
 
 // Header
-$layout-header-bg-color: unquote("rgb(#{$color-primary})") !default;
-$layout-header-text-color: unquote("rgb(#{$color-primary-contrast})") !default;
-$layout-header-nav-hover-color: unquote("rgba(#{$palette-grey-700}, 0.6)") !default;
-$layout-header-tab-text-color: unquote("rgba(#{$color-primary-contrast}, 0.6)") !default;
+$layout-header-bg-color: $color-primary !default;
+$layout-header-text-color: $color-primary-contrast !default;
+$layout-header-nav-hover-color: rgba-tpl($palette-grey-700, 0.6) !default;
+$layout-header-tab-text-color: rgba-tpl($color-primary-contrast, 0.6) !default;
 
 // Tabs
-$layout-header-tab-highlight: unquote("rgb(#{$color-accent})") !default;
+$layout-header-tab-highlight: $color-accent !default;
 
 /* ==========  Content Tabs  ========== */
 
-$tab-highlight-color: unquote("rgb(#{$color-primary})") !default;
-$tab-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
-$tab-active-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
-$tab-border-color: unquote("rgb(#{$palette-grey-300})") !default;
+$tab-highlight-color: $color-primary !default;
+$tab-text-color: rgba-tpl($color-black, 0.54) !default;
+$tab-active-text-color: rgba-tpl($color-black, 0.87) !default;
+$tab-border-color: $palette-grey-300 !default;
 
 /* ==========  Checkboxes  ========== */
 
-$checkbox-color: unquote("rgb(#{$color-primary})") !default;
-$checkbox-off-color: unquote("rgba(#{$color-black}, 0.54)") !default;
-$checkbox-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
-$checkbox-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
+$checkbox-color: $color-primary !default;
+$checkbox-off-color: rgba-tpl($color-black, 0.54) !default;
+$checkbox-disabled-color: rgba-tpl($color-black, 0.26) !default;
+$checkbox-focus-color: rgba-tpl($color-primary, 0.26) !default;
 
 /* ==========  Switches  ========== */
 
-$switch-color: unquote("rgb(#{$color-primary})") !default;
-$switch-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
+$switch-color: $color-primary !default;
+$switch-faded-color: rgba-tpl($color-primary, 0.26) !default;
 $switch-thumb-color: $switch-color !default;
-$switch-track-color: unquote("rgba(#{$color-primary}, 0.5)") !default;
+$switch-track-color: rgba-tpl($color-primary, 0.5) !default;
 
-$switch-off-thumb-color: unquote("rgb(#{$palette-grey-50})") !default;
-$switch-off-track-color: unquote("rgba(#{$color-black}, 0.26)") !default;
-$switch-disabled-thumb-color: unquote("rgb(#{$palette-grey-400})") !default;
-$switch-disabled-track-color: unquote("rgba(#{$color-black}, 0.12)") !default;
+$switch-off-thumb-color: $palette-grey-50 !default;
+$switch-off-track-color: rgba-tpl($color-black, 0.26) !default;
+$switch-disabled-thumb-color: $palette-grey-400 !default;
+$switch-disabled-track-color: rgba-tpl($color-black, 0.12) !default;
 
 /* ==========  Spinner  ========== */
 
-$spinner-color-1: unquote("rgb(#{$palette-blue-400})") !default;
-$spinner-color-2: unquote("rgb(#{$palette-red-500})") !default;
-$spinner-color-3: unquote("rgb(#{$palette-yellow-600})") !default;
-$spinner-color-4: unquote("rgb(#{$palette-green-500})") !default;
+$spinner-color-1: $palette-blue-400 !default;
+$spinner-color-2: $palette-red-500 !default;
+$spinner-color-3: $palette-yellow-600 !default;
+$spinner-color-4: $palette-green-500 !default;
 
-$spinner-single-color: unquote("rgb(#{$color-primary})") !default;
+$spinner-single-color: $color-primary !default;
 
 /* ==========  Text fields  ========== */
 
 $input-text-background-color: transparent !default;
-$input-text-label-color: unquote("rgba(#{$color-black}, 0.26)") !default;
-$input-text-bottom-border-color: unquote("rgba(#{$color-black}, 0.12)") !default;
-$input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
+$input-text-label-color: rgba-tpl($color-black, 0.26) !default;
+$input-text-bottom-border-color: rgba-tpl($color-black, 0.12) !default;
+$input-text-highlight-color: $color-primary !default;
 $input-text-disabled-color: $input-text-bottom-border-color !default;
 $input-text-disabled-text-color: $input-text-label-color !default;
-$input-text-error-color: unquote("rgb(222, 50, 38)") !default;
+$input-text-error-color: rgb(222, 50, 38) !default;
 
 /* ==========  Card  ========== */
 
-$card-background-color: unquote("rgb(#{$color-white})") !default;
-$card-text-color: unquote("rgb(#{$color-black})") !default;
-$card-image-placeholder-color: unquote("rgb(#{$color-accent})") !default;
-$card-supporting-text-text-color: unquote("rgba(#{$color-black}, 0.54)") !default;
+$card-background-color: $color-white !default;
+$card-text-color: $color-black !default;
+$card-image-placeholder-color: $color-accent !default;
+$card-supporting-text-text-color: rgba-tpl($color-black, 0.54) !default;
 $card-border-color: rgba(0,0,0,0.1) !default;
 
 /* ==========  Sliders ========== */
 
-$range-bg-color: unquote("rgba(#{$color-black}, 0.26)") !default;
-$range-color: unquote("rgb(#{$color-primary})") !default;
-$range-faded-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
-$range-bg-focus-color: unquote("rgba(#{$color-black}, 0.12)") !default;
+$range-bg-color: rgba-tpl($color-black, 0.26) !default;
+$range-color: $color-primary !default;
+$range-faded-color: rgba-tpl($color-primary, 0.26) !default;
+$range-bg-focus-color: rgba-tpl($color-black, 0.12) !default;
 
 /* ========== Progress ========== */
-$progress-main-color: unquote("rgb(#{$color-primary})") !default;
-$progress-secondary-color: unquote("rgba(#{$color-primary-contrast}, 0.7)") !default;
-$progress-fallback-buffer-color: unquote("rgba(#{$color-primary-contrast}, 0.9)") !default;
+$progress-main-color: $color-primary !default;
+$progress-secondary-color: rgba-tpl($color-primary-contrast, 0.7) !default;
+$progress-fallback-buffer-color: rgba-tpl($color-primary-contrast, 0.9) !default;
 
 /* ==========  List ========== */
 
-$list-container-item-border-color: unquote("rgb(#{$palette-grey-300})") !default;
-$list-container-view-background: unquote("rgb(#{$color-white})") !default;
+$list-container-item-border-color: $palette-grey-300 !default;
+$list-container-view-background: $color-white !default;
 
 /* ==========  Item ========== */
 
 // Default Item Colors
-$default-item-text-color: unquote("rgba(#{$color-black}, 0.87)") !default;
-$default-item-outline-color: unquote("rgb(#{$palette-grey-400})") !default;
-$default-item-hover-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
-$default-item-focus-bg-color: unquote("rgb(#{$palette-grey-200})") !default;
-$default-item-active-bg-color: unquote("rgb(#{$palette-grey-300})") !default;
+$default-item-text-color: rgba-tpl($color-black, 0.87) !default;
+$default-item-outline-color: $palette-grey-400 !default;
+$default-item-hover-bg-color: $palette-grey-200 !default;
+$default-item-focus-bg-color: $palette-grey-200 !default;
+$default-item-active-bg-color: $palette-grey-300 !default;
 
 // Disabled Button Colors
-$disabled-item-text-color: unquote("rgb(#{$palette-grey-400})") !default;
+$disabled-item-text-color: $palette-grey-400 !default;
 
 /* ==========  Dropdown menu ========== */
 
-$default-dropdown-bg-color: unquote("rgb(#{$color-white})") !default;
+$default-dropdown-bg-color: $color-white !default;
 
 /* ==========  Tooltips  ========== */
 
-$tooltip-text-color: unquote("rgb(#{$color-white})") !default;
-$tooltip-background-color: unquote("rgba(#{$palette-grey-700}, 0.9)") !default;
+$tooltip-text-color: $color-white !default;
+$tooltip-background-color: rgba-tpl($palette-grey-700, 0.9) !default;
 
 /* ==========  Footer  ========== */
 
-$footer-bg-color: unquote("rgb(#{$palette-grey-800})") !default;
-$footer-color: unquote("rgb(#{$palette-grey-500})") !default;
-$footer-heading-color: unquote("rgb(#{$palette-grey-300})") !default;
+$footer-bg-color: $palette-grey-800 !default;
+$footer-color: $palette-grey-500 !default;
+$footer-heading-color: $palette-grey-300 !default;
 $footer-button-fill-color: $footer-color !default;
 $footer-underline-color: $footer-color !default;
 
@@ -333,7 +333,7 @@ $spinner-arc-time: 1333ms !default;
 $spinner-arc-start-rot: 216deg !default;
 
 $spinner-duration: 360 * $spinner-arc-time / (
-    strip-units($spinner-arc-start-rot + (360deg - $spinner-arc-size)));
+    unitless($spinner-arc-start-rot + (360deg - $spinner-arc-size)));
 
 
 /* RADIO */
@@ -487,10 +487,10 @@ $bar-height: 4px !default;
 
 /* BADGE */
 $badge-font-size: 12px !default;
-$badge-color: unquote("rgb(#{$color-white})") !default;
-$badge-color-inverse: unquote("rgb(#{$color-accent})") !default;
-$badge-background: unquote("rgb(#{$color-accent})") !default;
-$badge-background-inverse: unquote("rgba(#{$color-white},0.2)") !default;
+$badge-color: $color-white !default;
+$badge-color-inverse: $color-accent !default;
+$badge-background: $color-accent !default;
+$badge-background-inverse: rgba-tpl($color-white,0.2) !default;
 $badge-size : 22px !default;
 $badge-padding: 2px !default;
 
diff --git a/src/data-table/_data-table.scss b/src/data-table/_data-table.scss
index ca3d9fd13a..111e7f4c20 100644
--- a/src/data-table/_data-table.scss
+++ b/src/data-table/_data-table.scss
@@ -23,7 +23,7 @@
   border-collapse: collapse;
   white-space: nowrap;
   font-size: $data-table-font-size;
-  background-color: unquote("rgb(#{$color-white})");
+  background-color: $color-white;
 
   thead {
     padding-bottom: 3px;
diff --git a/src/palette/_palette.scss b/src/palette/_palette.scss
index ffbcdf9d4e..227e686de5 100644
--- a/src/palette/_palette.scss
+++ b/src/palette/_palette.scss
@@ -20,2284 +20,2284 @@
   // Red
 
   .mdl-color-text--red {
-    color: unquote("rgb(#{$palette-red-500})") !important;
+    color: $palette-red-500 !important;
   }
 
   .mdl-color--red {
-    background-color: unquote("rgb(#{$palette-red-500})") !important;
+    background-color: $palette-red-500 !important;
   }
 
   .mdl-color-text--red-50 {
-    color: unquote("rgb(#{$palette-red-50})") !important;
+    color: $palette-red-50 !important;
   }
 
   .mdl-color--red-50 {
-    background-color: unquote("rgb(#{$palette-red-50})") !important;
+    background-color: $palette-red-50 !important;
   }
 
   .mdl-color-text--red-100 {
-    color: unquote("rgb(#{$palette-red-100})") !important;
+    color: $palette-red-100 !important;
   }
 
   .mdl-color--red-100 {
-    background-color: unquote("rgb(#{$palette-red-100})") !important;
+    background-color: $palette-red-100 !important;
   }
 
   .mdl-color-text--red-200 {
-    color: unquote("rgb(#{$palette-red-200})") !important;
+    color: $palette-red-200 !important;
   }
 
   .mdl-color--red-200 {
-    background-color: unquote("rgb(#{$palette-red-200})") !important;
+    background-color: $palette-red-200 !important;
   }
 
   .mdl-color-text--red-300 {
-    color: unquote("rgb(#{$palette-red-300})") !important;
+    color: $palette-red-300 !important;
   }
 
   .mdl-color--red-300 {
-    background-color: unquote("rgb(#{$palette-red-300})") !important;
+    background-color: $palette-red-300 !important;
   }
 
   .mdl-color-text--red-400 {
-    color: unquote("rgb(#{$palette-red-400})") !important;
+    color: $palette-red-400 !important;
   }
 
   .mdl-color--red-400 {
-    background-color: unquote("rgb(#{$palette-red-400})") !important;
+    background-color: $palette-red-400 !important;
   }
 
   .mdl-color-text--red-500 {
-    color: unquote("rgb(#{$palette-red-500})") !important;
+    color: $palette-red-500 !important;
   }
 
   .mdl-color--red-500 {
-    background-color: unquote("rgb(#{$palette-red-500})") !important;
+    background-color: $palette-red-500 !important;
   }
 
   .mdl-color-text--red-600 {
-    color: unquote("rgb(#{$palette-red-600})") !important;
+    color: $palette-red-600 !important;
   }
 
   .mdl-color--red-600 {
-    background-color: unquote("rgb(#{$palette-red-600})") !important;
+    background-color: $palette-red-600 !important;
   }
 
   .mdl-color-text--red-700 {
-    color: unquote("rgb(#{$palette-red-700})") !important;
+    color: $palette-red-700 !important;
   }
 
   .mdl-color--red-700 {
-    background-color: unquote("rgb(#{$palette-red-700})") !important;
+    background-color: $palette-red-700 !important;
   }
 
   .mdl-color-text--red-800 {
-    color: unquote("rgb(#{$palette-red-800})") !important;
+    color: $palette-red-800 !important;
   }
 
   .mdl-color--red-800 {
-    background-color: unquote("rgb(#{$palette-red-800})") !important;
+    background-color: $palette-red-800 !important;
   }
 
   .mdl-color-text--red-900 {
-    color: unquote("rgb(#{$palette-red-900})") !important;
+    color: $palette-red-900 !important;
   }
 
   .mdl-color--red-900 {
-    background-color: unquote("rgb(#{$palette-red-900})") !important;
+    background-color: $palette-red-900 !important;
   }
 
   .mdl-color-text--red-A100 {
-    color: unquote("rgb(#{$palette-red-A100})") !important;
+    color: $palette-red-A100 !important;
   }
 
   .mdl-color--red-A100 {
-    background-color: unquote("rgb(#{$palette-red-A100})") !important;
+    background-color: $palette-red-A100 !important;
   }
 
   .mdl-color-text--red-A200 {
-    color: unquote("rgb(#{$palette-red-A200})") !important;
+    color: $palette-red-A200 !important;
   }
 
   .mdl-color--red-A200 {
-    background-color: unquote("rgb(#{$palette-red-A200})") !important;
+    background-color: $palette-red-A200 !important;
   }
 
   .mdl-color-text--red-A400 {
-    color: unquote("rgb(#{$palette-red-A400})") !important;
+    color: $palette-red-A400 !important;
   }
 
   .mdl-color--red-A400 {
-    background-color: unquote("rgb(#{$palette-red-A400})") !important;
+    background-color: $palette-red-A400 !important;
   }
 
   .mdl-color-text--red-A700 {
-    color: unquote("rgb(#{$palette-red-A700})") !important;
+    color: $palette-red-A700 !important;
   }
 
   .mdl-color--red-A700 {
-    background-color: unquote("rgb(#{$palette-red-A700})") !important;
+    background-color: $palette-red-A700 !important;
   }
 
   // Pink
 
   .mdl-color-text--pink {
-    color: unquote("rgb(#{$palette-pink-500})") !important;
+    color: $palette-pink-500 !important;
   }
 
   .mdl-color--pink {
-    background-color: unquote("rgb(#{$palette-pink-500})") !important;
+    background-color: $palette-pink-500 !important;
   }
 
   .mdl-color-text--pink-50 {
-    color: unquote("rgb(#{$palette-pink-50})") !important;
+    color: $palette-pink-50 !important;
   }
 
   .mdl-color--pink-50 {
-    background-color: unquote("rgb(#{$palette-pink-50})") !important;
+    background-color: $palette-pink-50 !important;
   }
 
   .mdl-color-text--pink-100 {
-    color: unquote("rgb(#{$palette-pink-100})") !important;
+    color: $palette-pink-100 !important;
   }
 
   .mdl-color--pink-100 {
-    background-color: unquote("rgb(#{$palette-pink-100})") !important;
+    background-color: $palette-pink-100 !important;
   }
 
   .mdl-color-text--pink-200 {
-    color: unquote("rgb(#{$palette-pink-200})") !important;
+    color: $palette-pink-200 !important;
   }
 
   .mdl-color--pink-200 {
-    background-color: unquote("rgb(#{$palette-pink-200})") !important;
+    background-color: $palette-pink-200 !important;
   }
 
   .mdl-color-text--pink-300 {
-    color: unquote("rgb(#{$palette-pink-300})") !important;
+    color: $palette-pink-300 !important;
   }
 
   .mdl-color--pink-300 {
-    background-color: unquote("rgb(#{$palette-pink-300})") !important;
+    background-color: $palette-pink-300 !important;
   }
 
   .mdl-color-text--pink-400 {
-    color: unquote("rgb(#{$palette-pink-400})") !important;
+    color: $palette-pink-400 !important;
   }
 
   .mdl-color--pink-400 {
-    background-color: unquote("rgb(#{$palette-pink-400})") !important;
+    background-color: $palette-pink-400 !important;
   }
 
   .mdl-color-text--pink-500 {
-    color: unquote("rgb(#{$palette-pink-500})") !important;
+    color: $palette-pink-500 !important;
   }
 
   .mdl-color--pink-500 {
-    background-color: unquote("rgb(#{$palette-pink-500})") !important;
+    background-color: $palette-pink-500 !important;
   }
 
   .mdl-color-text--pink-600 {
-    color: unquote("rgb(#{$palette-pink-600})") !important;
+    color: $palette-pink-600 !important;
   }
 
   .mdl-color--pink-600 {
-    background-color: unquote("rgb(#{$palette-pink-600})") !important;
+    background-color: $palette-pink-600 !important;
   }
 
   .mdl-color-text--pink-700 {
-    color: unquote("rgb(#{$palette-pink-700})") !important;
+    color: $palette-pink-700 !important;
   }
 
   .mdl-color--pink-700 {
-    background-color: unquote("rgb(#{$palette-pink-700})") !important;
+    background-color: $palette-pink-700 !important;
   }
 
   .mdl-color-text--pink-800 {
-    color: unquote("rgb(#{$palette-pink-800})") !important;
+    color: $palette-pink-800 !important;
   }
 
   .mdl-color--pink-800 {
-    background-color: unquote("rgb(#{$palette-pink-800})") !important;
+    background-color: $palette-pink-800 !important;
   }
 
   .mdl-color-text--pink-900 {
-    color: unquote("rgb(#{$palette-pink-900})") !important;
+    color: $palette-pink-900 !important;
   }
 
   .mdl-color--pink-900 {
-    background-color: unquote("rgb(#{$palette-pink-900})") !important;
+    background-color: $palette-pink-900 !important;
   }
 
   .mdl-color-text--pink-A100 {
-    color: unquote("rgb(#{$palette-pink-A100})") !important;
+    color: $palette-pink-A100 !important;
   }
 
   .mdl-color--pink-A100 {
-    background-color: unquote("rgb(#{$palette-pink-A100})") !important;
+    background-color: $palette-pink-A100 !important;
   }
 
   .mdl-color-text--pink-A200 {
-    color: unquote("rgb(#{$palette-pink-A200})") !important;
+    color: $palette-pink-A200 !important;
   }
 
   .mdl-color--pink-A200 {
-    background-color: unquote("rgb(#{$palette-pink-A200})") !important;
+    background-color: $palette-pink-A200 !important;
   }
 
   .mdl-color-text--pink-A400 {
-    color: unquote("rgb(#{$palette-pink-A400})") !important;
+    color: $palette-pink-A400 !important;
   }
 
   .mdl-color--pink-A400 {
-    background-color: unquote("rgb(#{$palette-pink-A400})") !important;
+    background-color: $palette-pink-A400 !important;
   }
 
   .mdl-color-text--pink-A700 {
-    color: unquote("rgb(#{$palette-pink-A700})") !important;
+    color: $palette-pink-A700 !important;
   }
 
   .mdl-color--pink-A700 {
-    background-color: unquote("rgb(#{$palette-pink-A700})") !important;
+    background-color: $palette-pink-A700 !important;
   }
 
   // Purple
 
   .mdl-color-text--purple {
-    color: unquote("rgb(#{$palette-purple-500})") !important;
+    color: $palette-purple-500 !important;
   }
 
   .mdl-color--purple {
-    background-color: unquote("rgb(#{$palette-purple-500})") !important;
+    background-color: $palette-purple-500 !important;
   }
 
   .mdl-color-text--purple-50 {
-    color: unquote("rgb(#{$palette-purple-50})") !important;
+    color: $palette-purple-50 !important;
   }
 
   .mdl-color--purple-50 {
-    background-color: unquote("rgb(#{$palette-purple-50})") !important;
+    background-color: $palette-purple-50 !important;
   }
 
   .mdl-color-text--purple-100 {
-    color: unquote("rgb(#{$palette-purple-100})") !important;
+    color: $palette-purple-100 !important;
   }
 
   .mdl-color--purple-100 {
-    background-color: unquote("rgb(#{$palette-purple-100})") !important;
+    background-color: $palette-purple-100 !important;
   }
 
   .mdl-color-text--purple-200 {
-    color: unquote("rgb(#{$palette-purple-200})") !important;
+    color: $palette-purple-200 !important;
   }
 
   .mdl-color--purple-200 {
-    background-color: unquote("rgb(#{$palette-purple-200})") !important;
+    background-color: $palette-purple-200 !important;
   }
 
   .mdl-color-text--purple-300 {
-    color: unquote("rgb(#{$palette-purple-300})") !important;
+    color: $palette-purple-300 !important;
   }
 
   .mdl-color--purple-300 {
-    background-color: unquote("rgb(#{$palette-purple-300})") !important;
+    background-color: $palette-purple-300 !important;
   }
 
   .mdl-color-text--purple-400 {
-    color: unquote("rgb(#{$palette-purple-400})") !important;
+    color: $palette-purple-400 !important;
   }
 
   .mdl-color--purple-400 {
-    background-color: unquote("rgb(#{$palette-purple-400})") !important;
+    background-color: $palette-purple-400 !important;
   }
 
   .mdl-color-text--purple-500 {
-    color: unquote("rgb(#{$palette-purple-500})") !important;
+    color: $palette-purple-500 !important;
   }
 
   .mdl-color--purple-500 {
-    background-color: unquote("rgb(#{$palette-purple-500})") !important;
+    background-color: $palette-purple-500 !important;
   }
 
   .mdl-color-text--purple-600 {
-    color: unquote("rgb(#{$palette-purple-600})") !important;
+    color: $palette-purple-600 !important;
   }
 
   .mdl-color--purple-600 {
-    background-color: unquote("rgb(#{$palette-purple-600})") !important;
+    background-color: $palette-purple-600 !important;
   }
 
   .mdl-color-text--purple-700 {
-    color: unquote("rgb(#{$palette-purple-700})") !important;
+    color: $palette-purple-700 !important;
   }
 
   .mdl-color--purple-700 {
-    background-color: unquote("rgb(#{$palette-purple-700})") !important;
+    background-color: $palette-purple-700 !important;
   }
 
   .mdl-color-text--purple-800 {
-    color: unquote("rgb(#{$palette-purple-800})") !important;
+    color: $palette-purple-800 !important;
   }
 
   .mdl-color--purple-800 {
-    background-color: unquote("rgb(#{$palette-purple-800})") !important;
+    background-color: $palette-purple-800 !important;
   }
 
   .mdl-color-text--purple-900 {
-    color: unquote("rgb(#{$palette-purple-900})") !important;
+    color: $palette-purple-900 !important;
   }
 
   .mdl-color--purple-900 {
-    background-color: unquote("rgb(#{$palette-purple-900})") !important;
+    background-color: $palette-purple-900 !important;
   }
 
   .mdl-color-text--purple-A100 {
-    color: unquote("rgb(#{$palette-purple-A100})") !important;
+    color: $palette-purple-A100 !important;
   }
 
   .mdl-color--purple-A100 {
-    background-color: unquote("rgb(#{$palette-purple-A100})") !important;
+    background-color: $palette-purple-A100 !important;
   }
 
   .mdl-color-text--purple-A200 {
-    color: unquote("rgb(#{$palette-purple-A200})") !important;
+    color: $palette-purple-A200 !important;
   }
 
   .mdl-color--purple-A200 {
-    background-color: unquote("rgb(#{$palette-purple-A200})") !important;
+    background-color: $palette-purple-A200 !important;
   }
 
   .mdl-color-text--purple-A400 {
-    color: unquote("rgb(#{$palette-purple-A400})") !important;
+    color: $palette-purple-A400 !important;
   }
 
   .mdl-color--purple-A400 {
-    background-color: unquote("rgb(#{$palette-purple-A400})") !important;
+    background-color: $palette-purple-A400 !important;
   }
 
   .mdl-color-text--purple-A700 {
-    color: unquote("rgb(#{$palette-purple-A700})") !important;
+    color: $palette-purple-A700 !important;
   }
 
   .mdl-color--purple-A700 {
-    background-color: unquote("rgb(#{$palette-purple-A700})") !important;
+    background-color: $palette-purple-A700 !important;
   }
 
   // Deep Purple.
 
   .mdl-color-text--deep-purple {
-    color: unquote("rgb(#{$palette-deep-purple-500})") !important;
+    color: $palette-deep-purple-500 !important;
   }
 
   .mdl-color--deep-purple {
-    background-color: unquote("rgb(#{$palette-deep-purple-500})") !important;
+    background-color: $palette-deep-purple-500 !important;
   }
 
   .mdl-color-text--deep-purple-50 {
-    color: unquote("rgb(#{$palette-deep-purple-50})") !important;
+    color: $palette-deep-purple-50 !important;
   }
 
   .mdl-color--deep-purple-50 {
-    background-color: unquote("rgb(#{$palette-deep-purple-50})") !important;
+    background-color: $palette-deep-purple-50 !important;
   }
 
   .mdl-color-text--deep-purple-100 {
-    color: unquote("rgb(#{$palette-deep-purple-100})") !important;
+    color: $palette-deep-purple-100 !important;
   }
 
   .mdl-color--deep-purple-100 {
-    background-color: unquote("rgb(#{$palette-deep-purple-100})") !important;
+    background-color: $palette-deep-purple-100 !important;
   }
 
   .mdl-color-text--deep-purple-200 {
-    color: unquote("rgb(#{$palette-deep-purple-200})") !important;
+    color: $palette-deep-purple-200 !important;
   }
 
   .mdl-color--deep-purple-200 {
-    background-color: unquote("rgb(#{$palette-deep-purple-200})") !important;
+    background-color: $palette-deep-purple-200 !important;
   }
 
   .mdl-color-text--deep-purple-300 {
-    color: unquote("rgb(#{$palette-deep-purple-300})") !important;
+    color: $palette-deep-purple-300 !important;
   }
 
   .mdl-color--deep-purple-300 {
-    background-color: unquote("rgb(#{$palette-deep-purple-300})") !important;
+    background-color: $palette-deep-purple-300 !important;
   }
 
   .mdl-color-text--deep-purple-400 {
-    color: unquote("rgb(#{$palette-deep-purple-400})") !important;
+    color: $palette-deep-purple-400 !important;
   }
 
   .mdl-color--deep-purple-400 {
-    background-color: unquote("rgb(#{$palette-deep-purple-400})") !important;
+    background-color: $palette-deep-purple-400 !important;
   }
 
   .mdl-color-text--deep-purple-500 {
-    color: unquote("rgb(#{$palette-deep-purple-500})") !important;
+    color: $palette-deep-purple-500 !important;
   }
 
   .mdl-color--deep-purple-500 {
-    background-color: unquote("rgb(#{$palette-deep-purple-500})") !important;
+    background-color: $palette-deep-purple-500 !important;
   }
 
   .mdl-color-text--deep-purple-600 {
-    color: unquote("rgb(#{$palette-deep-purple-600})") !important;
+    color: $palette-deep-purple-600 !important;
   }
 
   .mdl-color--deep-purple-600 {
-    background-color: unquote("rgb(#{$palette-deep-purple-600})") !important;
+    background-color: $palette-deep-purple-600 !important;
   }
 
   .mdl-color-text--deep-purple-700 {
-    color: unquote("rgb(#{$palette-deep-purple-700})") !important;
+    color: $palette-deep-purple-700 !important;
   }
 
   .mdl-color--deep-purple-700 {
-    background-color: unquote("rgb(#{$palette-deep-purple-700})") !important;
+    background-color: $palette-deep-purple-700 !important;
   }
 
   .mdl-color-text--deep-purple-800 {
-    color: unquote("rgb(#{$palette-deep-purple-800})") !important;
+    color: $palette-deep-purple-800 !important;
   }
 
   .mdl-color--deep-purple-800 {
-    background-color: unquote("rgb(#{$palette-deep-purple-800})") !important;
+    background-color: $palette-deep-purple-800 !important;
   }
 
   .mdl-color-text--deep-purple-900 {
-    color: unquote("rgb(#{$palette-deep-purple-900})") !important;
+    color: $palette-deep-purple-900 !important;
   }
 
   .mdl-color--deep-purple-900 {
-    background-color: unquote("rgb(#{$palette-deep-purple-900})") !important;
+    background-color: $palette-deep-purple-900 !important;
   }
 
   .mdl-color-text--deep-purple-A100 {
-    color: unquote("rgb(#{$palette-deep-purple-A100})") !important;
+    color: $palette-deep-purple-A100 !important;
   }
 
   .mdl-color--deep-purple-A100 {
-    background-color: unquote("rgb(#{$palette-deep-purple-A100})") !important;
+    background-color: $palette-deep-purple-A100 !important;
   }
 
   .mdl-color-text--deep-purple-A200 {
-    color: unquote("rgb(#{$palette-deep-purple-A200})") !important;
+    color: $palette-deep-purple-A200 !important;
   }
 
   .mdl-color--deep-purple-A200 {
-    background-color: unquote("rgb(#{$palette-deep-purple-A200})") !important;
+    background-color: $palette-deep-purple-A200 !important;
   }
 
   .mdl-color-text--deep-purple-A400 {
-    color: unquote("rgb(#{$palette-deep-purple-A400})") !important;
+    color: $palette-deep-purple-A400 !important;
   }
 
   .mdl-color--deep-purple-A400 {
-    background-color: unquote("rgb(#{$palette-deep-purple-A400})") !important;
+    background-color: $palette-deep-purple-A400 !important;
   }
 
   .mdl-color-text--deep-purple-A700 {
-    color: unquote("rgb(#{$palette-deep-purple-A700})") !important;
+    color: $palette-deep-purple-A700 !important;
   }
 
   .mdl-color--deep-purple-A700 {
-    background-color: unquote("rgb(#{$palette-deep-purple-A700})") !important;
+    background-color: $palette-deep-purple-A700 !important;
   }
 
   // Indigo
 
   .mdl-color-text--indigo {
-    color: unquote("rgb(#{$palette-indigo-500})") !important;
+    color: $palette-indigo-500 !important;
   }
 
   .mdl-color--indigo {
-    background-color: unquote("rgb(#{$palette-indigo-500})") !important;
+    background-color: $palette-indigo-500 !important;
   }
 
   .mdl-color-text--indigo-50 {
-    color: unquote("rgb(#{$palette-indigo-50})") !important;
+    color: $palette-indigo-50 !important;
   }
 
   .mdl-color--indigo-50 {
-    background-color: unquote("rgb(#{$palette-indigo-50})") !important;
+    background-color: $palette-indigo-50 !important;
   }
 
   .mdl-color-text--indigo-100 {
-    color: unquote("rgb(#{$palette-indigo-100})") !important;
+    color: $palette-indigo-100 !important;
   }
 
   .mdl-color--indigo-100 {
-    background-color: unquote("rgb(#{$palette-indigo-100})") !important;
+    background-color: $palette-indigo-100 !important;
   }
 
   .mdl-color-text--indigo-200 {
-    color: unquote("rgb(#{$palette-indigo-200})") !important;
+    color: $palette-indigo-200 !important;
   }
 
   .mdl-color--indigo-200 {
-    background-color: unquote("rgb(#{$palette-indigo-200})") !important;
+    background-color: $palette-indigo-200 !important;
   }
 
   .mdl-color-text--indigo-300 {
-    color: unquote("rgb(#{$palette-indigo-300})") !important;
+    color: $palette-indigo-300 !important;
   }
 
   .mdl-color--indigo-300 {
-    background-color: unquote("rgb(#{$palette-indigo-300})") !important;
+    background-color: $palette-indigo-300 !important;
   }
 
   .mdl-color-text--indigo-400 {
-    color: unquote("rgb(#{$palette-indigo-400})") !important;
+    color: $palette-indigo-400 !important;
   }
 
   .mdl-color--indigo-400 {
-    background-color: unquote("rgb(#{$palette-indigo-400})") !important;
+    background-color: $palette-indigo-400 !important;
   }
 
   .mdl-color-text--indigo-500 {
-    color: unquote("rgb(#{$palette-indigo-500})") !important;
+    color: $palette-indigo-500 !important;
   }
 
   .mdl-color--indigo-500 {
-    background-color: unquote("rgb(#{$palette-indigo-500})") !important;
+    background-color: $palette-indigo-500 !important;
   }
 
   .mdl-color-text--indigo-600 {
-    color: unquote("rgb(#{$palette-indigo-600})") !important;
+    color: $palette-indigo-600 !important;
   }
 
   .mdl-color--indigo-600 {
-    background-color: unquote("rgb(#{$palette-indigo-600})") !important;
+    background-color: $palette-indigo-600 !important;
   }
 
   .mdl-color-text--indigo-700 {
-    color: unquote("rgb(#{$palette-indigo-700})") !important;
+    color: $palette-indigo-700 !important;
   }
 
   .mdl-color--indigo-700 {
-    background-color: unquote("rgb(#{$palette-indigo-700})") !important;
+    background-color: $palette-indigo-700 !important;
   }
 
   .mdl-color-text--indigo-800 {
-    color: unquote("rgb(#{$palette-indigo-800})") !important;
+    color: $palette-indigo-800 !important;
   }
 
   .mdl-color--indigo-800 {
-    background-color: unquote("rgb(#{$palette-indigo-800})") !important;
+    background-color: $palette-indigo-800 !important;
   }
 
   .mdl-color-text--indigo-900 {
-    color: unquote("rgb(#{$palette-indigo-900})") !important;
+    color: $palette-indigo-900 !important;
   }
 
   .mdl-color--indigo-900 {
-    background-color: unquote("rgb(#{$palette-indigo-900})") !important;
+    background-color: $palette-indigo-900 !important;
   }
 
   .mdl-color-text--indigo-A100 {
-    color: unquote("rgb(#{$palette-indigo-A100})") !important;
+    color: $palette-indigo-A100 !important;
   }
 
   .mdl-color--indigo-A100 {
-    background-color: unquote("rgb(#{$palette-indigo-A100})") !important;
+    background-color: $palette-indigo-A100 !important;
   }
 
   .mdl-color-text--indigo-A200 {
-    color: unquote("rgb(#{$palette-indigo-A200})") !important;
+    color: $palette-indigo-A200 !important;
   }
 
   .mdl-color--indigo-A200 {
-    background-color: unquote("rgb(#{$palette-indigo-A200})") !important;
+    background-color: $palette-indigo-A200 !important;
   }
 
   .mdl-color-text--indigo-A400 {
-    color: unquote("rgb(#{$palette-indigo-A400})") !important;
+    color: $palette-indigo-A400 !important;
   }
 
   .mdl-color--indigo-A400 {
-    background-color: unquote("rgb(#{$palette-indigo-A400})") !important;
+    background-color: $palette-indigo-A400 !important;
   }
 
   .mdl-color-text--indigo-A700 {
-    color: unquote("rgb(#{$palette-indigo-A700})") !important;
+    color: $palette-indigo-A700 !important;
   }
 
   .mdl-color--indigo-A700 {
-    background-color: unquote("rgb(#{$palette-indigo-A700})") !important;
+    background-color: $palette-indigo-A700 !important;
   }
 
   // Blue
 
   .mdl-color-text--blue {
-    color: unquote("rgb(#{$palette-blue-500})") !important;
+    color: $palette-blue-500 !important;
   }
 
   .mdl-color--blue {
-    background-color: unquote("rgb(#{$palette-blue-500})") !important;
+    background-color: $palette-blue-500 !important;
   }
 
   .mdl-color-text--blue-50 {
-    color: unquote("rgb(#{$palette-blue-50})") !important;
+    color: $palette-blue-50 !important;
   }
 
   .mdl-color--blue-50 {
-    background-color: unquote("rgb(#{$palette-blue-50})") !important;
+    background-color: $palette-blue-50 !important;
   }
 
   .mdl-color-text--blue-100 {
-    color: unquote("rgb(#{$palette-blue-100})") !important;
+    color: $palette-blue-100 !important;
   }
 
   .mdl-color--blue-100 {
-    background-color: unquote("rgb(#{$palette-blue-100})") !important;
+    background-color: $palette-blue-100 !important;
   }
 
   .mdl-color-text--blue-200 {
-    color: unquote("rgb(#{$palette-blue-200})") !important;
+    color: $palette-blue-200 !important;
   }
 
   .mdl-color--blue-200 {
-    background-color: unquote("rgb(#{$palette-blue-200})") !important;
+    background-color: $palette-blue-200 !important;
   }
 
   .mdl-color-text--blue-300 {
-    color: unquote("rgb(#{$palette-blue-300})") !important;
+    color: $palette-blue-300 !important;
   }
 
   .mdl-color--blue-300 {
-    background-color: unquote("rgb(#{$palette-blue-300})") !important;
+    background-color: $palette-blue-300 !important;
   }
 
   .mdl-color-text--blue-400 {
-    color: unquote("rgb(#{$palette-blue-400})") !important;
+    color: $palette-blue-400 !important;
   }
 
   .mdl-color--blue-400 {
-    background-color: unquote("rgb(#{$palette-blue-400})") !important;
+    background-color: $palette-blue-400 !important;
   }
 
   .mdl-color-text--blue-500 {
-    color: unquote("rgb(#{$palette-blue-500})") !important;
+    color: $palette-blue-500 !important;
   }
 
   .mdl-color--blue-500 {
-    background-color: unquote("rgb(#{$palette-blue-500})") !important;
+    background-color: $palette-blue-500 !important;
   }
 
   .mdl-color-text--blue-600 {
-    color: unquote("rgb(#{$palette-blue-600})") !important;
+    color: $palette-blue-600 !important;
   }
 
   .mdl-color--blue-600 {
-    background-color: unquote("rgb(#{$palette-blue-600})") !important;
+    background-color: $palette-blue-600 !important;
   }
 
   .mdl-color-text--blue-700 {
-    color: unquote("rgb(#{$palette-blue-700})") !important;
+    color: $palette-blue-700 !important;
   }
 
   .mdl-color--blue-700 {
-    background-color: unquote("rgb(#{$palette-blue-700})") !important;
+    background-color: $palette-blue-700 !important;
   }
 
   .mdl-color-text--blue-800 {
-    color: unquote("rgb(#{$palette-blue-800})") !important;
+    color: $palette-blue-800 !important;
   }
 
   .mdl-color--blue-800 {
-    background-color: unquote("rgb(#{$palette-blue-800})") !important;
+    background-color: $palette-blue-800 !important;
   }
 
   .mdl-color-text--blue-900 {
-    color: unquote("rgb(#{$palette-blue-900})") !important;
+    color: $palette-blue-900 !important;
   }
 
   .mdl-color--blue-900 {
-    background-color: unquote("rgb(#{$palette-blue-900})") !important;
+    background-color: $palette-blue-900 !important;
   }
 
   .mdl-color-text--blue-A100 {
-    color: unquote("rgb(#{$palette-blue-A100})") !important;
+    color: $palette-blue-A100 !important;
   }
 
   .mdl-color--blue-A100 {
-    background-color: unquote("rgb(#{$palette-blue-A100})") !important;
+    background-color: $palette-blue-A100 !important;
   }
 
   .mdl-color-text--blue-A200 {
-    color: unquote("rgb(#{$palette-blue-A200})") !important;
+    color: $palette-blue-A200 !important;
   }
 
   .mdl-color--blue-A200 {
-    background-color: unquote("rgb(#{$palette-blue-A200})") !important;
+    background-color: $palette-blue-A200 !important;
   }
 
   .mdl-color-text--blue-A400 {
-    color: unquote("rgb(#{$palette-blue-A400})") !important;
+    color: $palette-blue-A400 !important;
   }
 
   .mdl-color--blue-A400 {
-    background-color: unquote("rgb(#{$palette-blue-A400})") !important;
+    background-color: $palette-blue-A400 !important;
   }
 
   .mdl-color-text--blue-A700 {
-    color: unquote("rgb(#{$palette-blue-A700})") !important;
+    color: $palette-blue-A700 !important;
   }
 
   .mdl-color--blue-A700 {
-    background-color: unquote("rgb(#{$palette-blue-A700})") !important;
+    background-color: $palette-blue-A700 !important;
   }
 
   // Light Blue
 
   .mdl-color-text--light-blue {
-    color: unquote("rgb(#{$palette-light-blue-500})") !important;
+    color: $palette-light-blue-500 !important;
   }
 
   .mdl-color--light-blue {
-    background-color: unquote("rgb(#{$palette-light-blue-500})") !important;
+    background-color: $palette-light-blue-500 !important;
   }
 
   .mdl-color-text--light-blue-50 {
-    color: unquote("rgb(#{$palette-light-blue-50})") !important;
+    color: $palette-light-blue-50 !important;
   }
 
   .mdl-color--light-blue-50 {
-    background-color: unquote("rgb(#{$palette-light-blue-50})") !important;
+    background-color: $palette-light-blue-50 !important;
   }
 
   .mdl-color-text--light-blue-100 {
-    color: unquote("rgb(#{$palette-light-blue-100})") !important;
+    color: $palette-light-blue-100 !important;
   }
 
   .mdl-color--light-blue-100 {
-    background-color: unquote("rgb(#{$palette-light-blue-100})") !important;
+    background-color: $palette-light-blue-100 !important;
   }
 
   .mdl-color-text--light-blue-200 {
-    color: unquote("rgb(#{$palette-light-blue-200})") !important;
+    color: $palette-light-blue-200 !important;
   }
 
   .mdl-color--light-blue-200 {
-    background-color: unquote("rgb(#{$palette-light-blue-200})") !important;
+    background-color: $palette-light-blue-200 !important;
   }
 
   .mdl-color-text--light-blue-300 {
-    color: unquote("rgb(#{$palette-light-blue-300})") !important;
+    color: $palette-light-blue-300 !important;
   }
 
   .mdl-color--light-blue-300 {
-    background-color: unquote("rgb(#{$palette-light-blue-300})") !important;
+    background-color: $palette-light-blue-300 !important;
   }
 
   .mdl-color-text--light-blue-400 {
-    color: unquote("rgb(#{$palette-light-blue-400})") !important;
+    color: $palette-light-blue-400 !important;
   }
 
   .mdl-color--light-blue-400 {
-    background-color: unquote("rgb(#{$palette-light-blue-400})") !important;
+    background-color: $palette-light-blue-400 !important;
   }
 
   .mdl-color-text--light-blue-500 {
-    color: unquote("rgb(#{$palette-light-blue-500})") !important;
+    color: $palette-light-blue-500 !important;
   }
 
   .mdl-color--light-blue-500 {
-    background-color: unquote("rgb(#{$palette-light-blue-500})") !important;
+    background-color: $palette-light-blue-500 !important;
   }
 
   .mdl-color-text--light-blue-600 {
-    color: unquote("rgb(#{$palette-light-blue-600})") !important;
+    color: $palette-light-blue-600 !important;
   }
 
   .mdl-color--light-blue-600 {
-    background-color: unquote("rgb(#{$palette-light-blue-600})") !important;
+    background-color: $palette-light-blue-600 !important;
   }
 
   .mdl-color-text--light-blue-700 {
-    color: unquote("rgb(#{$palette-light-blue-700})") !important;
+    color: $palette-light-blue-700 !important;
   }
 
   .mdl-color--light-blue-700 {
-    background-color: unquote("rgb(#{$palette-light-blue-700})") !important;
+    background-color: $palette-light-blue-700 !important;
   }
 
   .mdl-color-text--light-blue-800 {
-    color: unquote("rgb(#{$palette-light-blue-800})") !important;
+    color: $palette-light-blue-800 !important;
   }
 
   .mdl-color--light-blue-800 {
-    background-color: unquote("rgb(#{$palette-light-blue-800})") !important;
+    background-color: $palette-light-blue-800 !important;
   }
 
   .mdl-color-text--light-blue-900 {
-    color: unquote("rgb(#{$palette-light-blue-900})") !important;
+    color: $palette-light-blue-900 !important;
   }
 
   .mdl-color--light-blue-900 {
-    background-color: unquote("rgb(#{$palette-light-blue-900})") !important;
+    background-color: $palette-light-blue-900 !important;
   }
 
   .mdl-color-text--light-blue-A100 {
-    color: unquote("rgb(#{$palette-light-blue-A100})") !important;
+    color: $palette-light-blue-A100 !important;
   }
 
   .mdl-color--light-blue-A100 {
-    background-color: unquote("rgb(#{$palette-light-blue-A100})") !important;
+    background-color: $palette-light-blue-A100 !important;
   }
 
   .mdl-color-text--light-blue-A200 {
-    color: unquote("rgb(#{$palette-light-blue-A200})") !important;
+    color: $palette-light-blue-A200 !important;
   }
 
   .mdl-color--light-blue-A200 {
-    background-color: unquote("rgb(#{$palette-light-blue-A200})") !important;
+    background-color: $palette-light-blue-A200 !important;
   }
 
   .mdl-color-text--light-blue-A400 {
-    color: unquote("rgb(#{$palette-light-blue-A400})") !important;
+    color: $palette-light-blue-A400 !important;
   }
 
   .mdl-color--light-blue-A400 {
-    background-color: unquote("rgb(#{$palette-light-blue-A400})") !important;
+    background-color: $palette-light-blue-A400 !important;
   }
 
   .mdl-color-text--light-blue-A700 {
-    color: unquote("rgb(#{$palette-light-blue-A700})") !important;
+    color: $palette-light-blue-A700 !important;
   }
 
   .mdl-color--light-blue-A700 {
-    background-color: unquote("rgb(#{$palette-light-blue-A700})") !important;
+    background-color: $palette-light-blue-A700 !important;
   }
 
   // Cyan
 
   .mdl-color-text--cyan {
-    color: unquote("rgb(#{$palette-cyan-500})") !important;
+    color: $palette-cyan-500 !important;
   }
 
   .mdl-color--cyan {
-    background-color: unquote("rgb(#{$palette-cyan-500})") !important;
+    background-color: $palette-cyan-500 !important;
   }
 
   .mdl-color-text--cyan-50 {
-    color: unquote("rgb(#{$palette-cyan-50})") !important;
+    color: $palette-cyan-50 !important;
   }
 
   .mdl-color--cyan-50 {
-    background-color: unquote("rgb(#{$palette-cyan-50})") !important;
+    background-color: $palette-cyan-50 !important;
   }
 
   .mdl-color-text--cyan-100 {
-    color: unquote("rgb(#{$palette-cyan-100})") !important;
+    color: $palette-cyan-100 !important;
   }
 
   .mdl-color--cyan-100 {
-    background-color: unquote("rgb(#{$palette-cyan-100})") !important;
+    background-color: $palette-cyan-100 !important;
   }
 
   .mdl-color-text--cyan-200 {
-    color: unquote("rgb(#{$palette-cyan-200})") !important;
+    color: $palette-cyan-200 !important;
   }
 
   .mdl-color--cyan-200 {
-    background-color: unquote("rgb(#{$palette-cyan-200})") !important;
+    background-color: $palette-cyan-200 !important;
   }
 
   .mdl-color-text--cyan-300 {
-    color: unquote("rgb(#{$palette-cyan-300})") !important;
+    color: $palette-cyan-300 !important;
   }
 
   .mdl-color--cyan-300 {
-    background-color: unquote("rgb(#{$palette-cyan-300})") !important;
+    background-color: $palette-cyan-300 !important;
   }
 
   .mdl-color-text--cyan-400 {
-    color: unquote("rgb(#{$palette-cyan-400})") !important;
+    color: $palette-cyan-400 !important;
   }
 
   .mdl-color--cyan-400 {
-    background-color: unquote("rgb(#{$palette-cyan-400})") !important;
+    background-color: $palette-cyan-400 !important;
   }
 
   .mdl-color-text--cyan-500 {
-    color: unquote("rgb(#{$palette-cyan-500})") !important;
+    color: $palette-cyan-500 !important;
   }
 
   .mdl-color--cyan-500 {
-    background-color: unquote("rgb(#{$palette-cyan-500})") !important;
+    background-color: $palette-cyan-500 !important;
   }
 
   .mdl-color-text--cyan-600 {
-    color: unquote("rgb(#{$palette-cyan-600})") !important;
+    color: $palette-cyan-600 !important;
   }
 
   .mdl-color--cyan-600 {
-    background-color: unquote("rgb(#{$palette-cyan-600})") !important;
+    background-color: $palette-cyan-600 !important;
   }
 
   .mdl-color-text--cyan-700 {
-    color: unquote("rgb(#{$palette-cyan-700})") !important;
+    color: $palette-cyan-700 !important;
   }
 
   .mdl-color--cyan-700 {
-    background-color: unquote("rgb(#{$palette-cyan-700})") !important;
+    background-color: $palette-cyan-700 !important;
   }
 
   .mdl-color-text--cyan-800 {
-    color: unquote("rgb(#{$palette-cyan-800})") !important;
+    color: $palette-cyan-800 !important;
   }
 
   .mdl-color--cyan-800 {
-    background-color: unquote("rgb(#{$palette-cyan-800})") !important;
+    background-color: $palette-cyan-800 !important;
   }
 
   .mdl-color-text--cyan-900 {
-    color: unquote("rgb(#{$palette-cyan-900})") !important;
+    color: $palette-cyan-900 !important;
   }
 
   .mdl-color--cyan-900 {
-    background-color: unquote("rgb(#{$palette-cyan-900})") !important;
+    background-color: $palette-cyan-900 !important;
   }
 
   .mdl-color-text--cyan-A100 {
-    color: unquote("rgb(#{$palette-cyan-A100})") !important;
+    color: $palette-cyan-A100 !important;
   }
 
   .mdl-color--cyan-A100 {
-    background-color: unquote("rgb(#{$palette-cyan-A100})") !important;
+    background-color: $palette-cyan-A100 !important;
   }
 
   .mdl-color-text--cyan-A200 {
-    color: unquote("rgb(#{$palette-cyan-A200})") !important;
+    color: $palette-cyan-A200 !important;
   }
 
   .mdl-color--cyan-A200 {
-    background-color: unquote("rgb(#{$palette-cyan-A200})") !important;
+    background-color: $palette-cyan-A200 !important;
   }
 
   .mdl-color-text--cyan-A400 {
-    color: unquote("rgb(#{$palette-cyan-A400})") !important;
+    color: $palette-cyan-A400 !important;
   }
 
   .mdl-color--cyan-A400 {
-    background-color: unquote("rgb(#{$palette-cyan-A400})") !important;
+    background-color: $palette-cyan-A400 !important;
   }
 
   .mdl-color-text--cyan-A700 {
-    color: unquote("rgb(#{$palette-cyan-A700})") !important;
+    color: $palette-cyan-A700 !important;
   }
 
   .mdl-color--cyan-A700 {
-    background-color: unquote("rgb(#{$palette-cyan-A700})") !important;
+    background-color: $palette-cyan-A700 !important;
   }
 
   // Teal
 
   .mdl-color-text--teal {
-    color: unquote("rgb(#{$palette-teal-500})") !important;
+    color: $palette-teal-500 !important;
   }
 
   .mdl-color--teal {
-    background-color: unquote("rgb(#{$palette-teal-500})") !important;
+    background-color: $palette-teal-500 !important;
   }
 
   .mdl-color-text--teal-50 {
-    color: unquote("rgb(#{$palette-teal-50})") !important;
+    color: $palette-teal-50 !important;
   }
 
   .mdl-color--teal-50 {
-    background-color: unquote("rgb(#{$palette-teal-50})") !important;
+    background-color: $palette-teal-50 !important;
   }
 
   .mdl-color-text--teal-100 {
-    color: unquote("rgb(#{$palette-teal-100})") !important;
+    color: $palette-teal-100 !important;
   }
 
   .mdl-color--teal-100 {
-    background-color: unquote("rgb(#{$palette-teal-100})") !important;
+    background-color: $palette-teal-100 !important;
   }
 
   .mdl-color-text--teal-200 {
-    color: unquote("rgb(#{$palette-teal-200})") !important;
+    color: $palette-teal-200 !important;
   }
 
   .mdl-color--teal-200 {
-    background-color: unquote("rgb(#{$palette-teal-200})") !important;
+    background-color: $palette-teal-200 !important;
   }
 
   .mdl-color-text--teal-300 {
-    color: unquote("rgb(#{$palette-teal-300})") !important;
+    color: $palette-teal-300 !important;
   }
 
   .mdl-color--teal-300 {
-    background-color: unquote("rgb(#{$palette-teal-300})") !important;
+    background-color: $palette-teal-300 !important;
   }
 
   .mdl-color-text--teal-400 {
-    color: unquote("rgb(#{$palette-teal-400})") !important;
+    color: $palette-teal-400 !important;
   }
 
   .mdl-color--teal-400 {
-    background-color: unquote("rgb(#{$palette-teal-400})") !important;
+    background-color: $palette-teal-400 !important;
   }
 
   .mdl-color-text--teal-500 {
-    color: unquote("rgb(#{$palette-teal-500})") !important;
+    color: $palette-teal-500 !important;
   }
 
   .mdl-color--teal-500 {
-    background-color: unquote("rgb(#{$palette-teal-500})") !important;
+    background-color: $palette-teal-500 !important;
   }
 
   .mdl-color-text--teal-600 {
-    color: unquote("rgb(#{$palette-teal-600})") !important;
+    color: $palette-teal-600 !important;
   }
 
   .mdl-color--teal-600 {
-    background-color: unquote("rgb(#{$palette-teal-600})") !important;
+    background-color: $palette-teal-600 !important;
   }
 
   .mdl-color-text--teal-700 {
-    color: unquote("rgb(#{$palette-teal-700})") !important;
+    color: $palette-teal-700 !important;
   }
 
   .mdl-color--teal-700 {
-    background-color: unquote("rgb(#{$palette-teal-700})") !important;
+    background-color: $palette-teal-700 !important;
   }
 
   .mdl-color-text--teal-800 {
-    color: unquote("rgb(#{$palette-teal-800})") !important;
+    color: $palette-teal-800 !important;
   }
 
   .mdl-color--teal-800 {
-    background-color: unquote("rgb(#{$palette-teal-800})") !important;
+    background-color: $palette-teal-800 !important;
   }
 
   .mdl-color-text--teal-900 {
-    color: unquote("rgb(#{$palette-teal-900})") !important;
+    color: $palette-teal-900 !important;
   }
 
   .mdl-color--teal-900 {
-    background-color: unquote("rgb(#{$palette-teal-900})") !important;
+    background-color: $palette-teal-900 !important;
   }
 
   .mdl-color-text--teal-A100 {
-    color: unquote("rgb(#{$palette-teal-A100})") !important;
+    color: $palette-teal-A100 !important;
   }
 
   .mdl-color--teal-A100 {
-    background-color: unquote("rgb(#{$palette-teal-A100})") !important;
+    background-color: $palette-teal-A100 !important;
   }
 
   .mdl-color-text--teal-A200 {
-    color: unquote("rgb(#{$palette-teal-A200})") !important;
+    color: $palette-teal-A200 !important;
   }
 
   .mdl-color--teal-A200 {
-    background-color: unquote("rgb(#{$palette-teal-A200})") !important;
+    background-color: $palette-teal-A200 !important;
   }
 
   .mdl-color-text--teal-A400 {
-    color: unquote("rgb(#{$palette-teal-A400})") !important;
+    color: $palette-teal-A400 !important;
   }
 
   .mdl-color--teal-A400 {
-    background-color: unquote("rgb(#{$palette-teal-A400})") !important;
+    background-color: $palette-teal-A400 !important;
   }
 
   .mdl-color-text--teal-A700 {
-    color: unquote("rgb(#{$palette-teal-A700})") !important;
+    color: $palette-teal-A700 !important;
   }
 
   .mdl-color--teal-A700 {
-    background-color: unquote("rgb(#{$palette-teal-A700})") !important;
+    background-color: $palette-teal-A700 !important;
   }
 
   // Green
 
   .mdl-color-text--green {
-    color: unquote("rgb(#{$palette-green-500})") !important;
+    color: $palette-green-500 !important;
   }
 
   .mdl-color--green {
-    background-color: unquote("rgb(#{$palette-green-500})") !important;
+    background-color: $palette-green-500 !important;
   }
 
   .mdl-color-text--green-50 {
-    color: unquote("rgb(#{$palette-green-50})") !important;
+    color: $palette-green-50 !important;
   }
 
   .mdl-color--green-50 {
-    background-color: unquote("rgb(#{$palette-green-50})") !important;
+    background-color: $palette-green-50 !important;
   }
 
   .mdl-color-text--green-100 {
-    color: unquote("rgb(#{$palette-green-100})") !important;
+    color: $palette-green-100 !important;
   }
 
   .mdl-color--green-100 {
-    background-color: unquote("rgb(#{$palette-green-100})") !important;
+    background-color: $palette-green-100 !important;
   }
 
   .mdl-color-text--green-200 {
-    color: unquote("rgb(#{$palette-green-200})") !important;
+    color: $palette-green-200 !important;
   }
 
   .mdl-color--green-200 {
-    background-color: unquote("rgb(#{$palette-green-200})") !important;
+    background-color: $palette-green-200 !important;
   }
 
   .mdl-color-text--green-300 {
-    color: unquote("rgb(#{$palette-green-300})") !important;
+    color: $palette-green-300 !important;
   }
 
   .mdl-color--green-300 {
-    background-color: unquote("rgb(#{$palette-green-300})") !important;
+    background-color: $palette-green-300 !important;
   }
 
   .mdl-color-text--green-400 {
-    color: unquote("rgb(#{$palette-green-400})") !important;
+    color: $palette-green-400 !important;
   }
 
   .mdl-color--green-400 {
-    background-color: unquote("rgb(#{$palette-green-400})") !important;
+    background-color: $palette-green-400 !important;
   }
 
   .mdl-color-text--green-500 {
-    color: unquote("rgb(#{$palette-green-500})") !important;
+    color: $palette-green-500 !important;
   }
 
   .mdl-color--green-500 {
-    background-color: unquote("rgb(#{$palette-green-500})") !important;
+    background-color: $palette-green-500 !important;
   }
 
   .mdl-color-text--green-600 {
-    color: unquote("rgb(#{$palette-green-600})") !important;
+    color: $palette-green-600 !important;
   }
 
   .mdl-color--green-600 {
-    background-color: unquote("rgb(#{$palette-green-600})") !important;
+    background-color: $palette-green-600 !important;
   }
 
   .mdl-color-text--green-700 {
-    color: unquote("rgb(#{$palette-green-700})") !important;
+    color: $palette-green-700 !important;
   }
 
   .mdl-color--green-700 {
-    background-color: unquote("rgb(#{$palette-green-700})") !important;
+    background-color: $palette-green-700 !important;
   }
 
   .mdl-color-text--green-800 {
-    color: unquote("rgb(#{$palette-green-800})") !important;
+    color: $palette-green-800 !important;
   }
 
   .mdl-color--green-800 {
-    background-color: unquote("rgb(#{$palette-green-800})") !important;
+    background-color: $palette-green-800 !important;
   }
 
   .mdl-color-text--green-900 {
-    color: unquote("rgb(#{$palette-green-900})") !important;
+    color: $palette-green-900 !important;
   }
 
   .mdl-color--green-900 {
-    background-color: unquote("rgb(#{$palette-green-900})") !important;
+    background-color: $palette-green-900 !important;
   }
 
   .mdl-color-text--green-A100 {
-    color: unquote("rgb(#{$palette-green-A100})") !important;
+    color: $palette-green-A100 !important;
   }
 
   .mdl-color--green-A100 {
-    background-color: unquote("rgb(#{$palette-green-A100})") !important;
+    background-color: $palette-green-A100 !important;
   }
 
   .mdl-color-text--green-A200 {
-    color: unquote("rgb(#{$palette-green-A200})") !important;
+    color: $palette-green-A200 !important;
   }
 
   .mdl-color--green-A200 {
-    background-color: unquote("rgb(#{$palette-green-A200})") !important;
+    background-color: $palette-green-A200 !important;
   }
 
   .mdl-color-text--green-A400 {
-    color: unquote("rgb(#{$palette-green-A400})") !important;
+    color: $palette-green-A400 !important;
   }
 
   .mdl-color--green-A400 {
-    background-color: unquote("rgb(#{$palette-green-A400})") !important;
+    background-color: $palette-green-A400 !important;
   }
 
   .mdl-color-text--green-A700 {
-    color: unquote("rgb(#{$palette-green-A700})") !important;
+    color: $palette-green-A700 !important;
   }
 
   .mdl-color--green-A700 {
-    background-color: unquote("rgb(#{$palette-green-A700})") !important;
+    background-color: $palette-green-A700 !important;
   }
 
   // Light Green
 
   .mdl-color-text--light-green {
-    color: unquote("rgb(#{$palette-light-green-500})") !important;
+    color: $palette-light-green-500 !important;
   }
 
   .mdl-color--light-green {
-    background-color: unquote("rgb(#{$palette-light-green-500})") !important;
+    background-color: $palette-light-green-500 !important;
   }
 
   .mdl-color-text--light-green-50 {
-    color: unquote("rgb(#{$palette-light-green-50})") !important;
+    color: $palette-light-green-50 !important;
   }
 
   .mdl-color--light-green-50 {
-    background-color: unquote("rgb(#{$palette-light-green-50})") !important;
+    background-color: $palette-light-green-50 !important;
   }
 
   .mdl-color-text--light-green-100 {
-    color: unquote("rgb(#{$palette-light-green-100})") !important;
+    color: $palette-light-green-100 !important;
   }
 
   .mdl-color--light-green-100 {
-    background-color: unquote("rgb(#{$palette-light-green-100})") !important;
+    background-color: $palette-light-green-100 !important;
   }
 
   .mdl-color-text--light-green-200 {
-    color: unquote("rgb(#{$palette-light-green-200})") !important;
+    color: $palette-light-green-200 !important;
   }
 
   .mdl-color--light-green-200 {
-    background-color: unquote("rgb(#{$palette-light-green-200})") !important;
+    background-color: $palette-light-green-200 !important;
   }
 
   .mdl-color-text--light-green-300 {
-    color: unquote("rgb(#{$palette-light-green-300})") !important;
+    color: $palette-light-green-300 !important;
   }
 
   .mdl-color--light-green-300 {
-    background-color: unquote("rgb(#{$palette-light-green-300})") !important;
+    background-color: $palette-light-green-300 !important;
   }
 
   .mdl-color-text--light-green-400 {
-    color: unquote("rgb(#{$palette-light-green-400})") !important;
+    color: $palette-light-green-400 !important;
   }
 
   .mdl-color--light-green-400 {
-    background-color: unquote("rgb(#{$palette-light-green-400})") !important;
+    background-color: $palette-light-green-400 !important;
   }
 
   .mdl-color-text--light-green-500 {
-    color: unquote("rgb(#{$palette-light-green-500})") !important;
+    color: $palette-light-green-500 !important;
   }
 
   .mdl-color--light-green-500 {
-    background-color: unquote("rgb(#{$palette-light-green-500})") !important;
+    background-color: $palette-light-green-500 !important;
   }
 
   .mdl-color-text--light-green-600 {
-    color: unquote("rgb(#{$palette-light-green-600})") !important;
+    color: $palette-light-green-600 !important;
   }
 
   .mdl-color--light-green-600 {
-    background-color: unquote("rgb(#{$palette-light-green-600})") !important;
+    background-color: $palette-light-green-600 !important;
   }
 
   .mdl-color-text--light-green-700 {
-    color: unquote("rgb(#{$palette-light-green-700})") !important;
+    color: $palette-light-green-700 !important;
   }
 
   .mdl-color--light-green-700 {
-    background-color: unquote("rgb(#{$palette-light-green-700})") !important;
+    background-color: $palette-light-green-700 !important;
   }
 
   .mdl-color-text--light-green-800 {
-    color: unquote("rgb(#{$palette-light-green-800})") !important;
+    color: $palette-light-green-800 !important;
   }
 
   .mdl-color--light-green-800 {
-    background-color: unquote("rgb(#{$palette-light-green-800})") !important;
+    background-color: $palette-light-green-800 !important;
   }
 
   .mdl-color-text--light-green-900 {
-    color: unquote("rgb(#{$palette-light-green-900})") !important;
+    color: $palette-light-green-900 !important;
   }
 
   .mdl-color--light-green-900 {
-    background-color: unquote("rgb(#{$palette-light-green-900})") !important;
+    background-color: $palette-light-green-900 !important;
   }
 
   .mdl-color-text--light-green-A100 {
-    color: unquote("rgb(#{$palette-light-green-A100})") !important;
+    color: $palette-light-green-A100 !important;
   }
 
   .mdl-color--light-green-A100 {
-    background-color: unquote("rgb(#{$palette-light-green-A100})") !important;
+    background-color: $palette-light-green-A100 !important;
   }
 
   .mdl-color-text--light-green-A200 {
-    color: unquote("rgb(#{$palette-light-green-A200})") !important;
+    color: $palette-light-green-A200 !important;
   }
 
   .mdl-color--light-green-A200 {
-    background-color: unquote("rgb(#{$palette-light-green-A200})") !important;
+    background-color: $palette-light-green-A200 !important;
   }
 
   .mdl-color-text--light-green-A400 {
-    color: unquote("rgb(#{$palette-light-green-A400})") !important;
+    color: $palette-light-green-A400 !important;
   }
 
   .mdl-color--light-green-A400 {
-    background-color: unquote("rgb(#{$palette-light-green-A400})") !important;
+    background-color: $palette-light-green-A400 !important;
   }
 
   .mdl-color-text--light-green-A700 {
-    color: unquote("rgb(#{$palette-light-green-A700})") !important;
+    color: $palette-light-green-A700 !important;
   }
 
   .mdl-color--light-green-A700 {
-    background-color: unquote("rgb(#{$palette-light-green-A700})") !important;
+    background-color: $palette-light-green-A700 !important;
   }
 
   // Lime
 
   .mdl-color-text--lime {
-    color: unquote("rgb(#{$palette-lime-500})") !important;
+    color: $palette-lime-500 !important;
   }
 
   .mdl-color--lime {
-    background-color: unquote("rgb(#{$palette-lime-500})") !important;
+    background-color: $palette-lime-500 !important;
   }
 
   .mdl-color-text--lime-50 {
-    color: unquote("rgb(#{$palette-lime-50})") !important;
+    color: $palette-lime-50 !important;
   }
 
   .mdl-color--lime-50 {
-    background-color: unquote("rgb(#{$palette-lime-50})") !important;
+    background-color: $palette-lime-50 !important;
   }
 
   .mdl-color-text--lime-100 {
-    color: unquote("rgb(#{$palette-lime-100})") !important;
+    color: $palette-lime-100 !important;
   }
 
   .mdl-color--lime-100 {
-    background-color: unquote("rgb(#{$palette-lime-100})") !important;
+    background-color: $palette-lime-100 !important;
   }
 
   .mdl-color-text--lime-200 {
-    color: unquote("rgb(#{$palette-lime-200})") !important;
+    color: $palette-lime-200 !important;
   }
 
   .mdl-color--lime-200 {
-    background-color: unquote("rgb(#{$palette-lime-200})") !important;
+    background-color: $palette-lime-200 !important;
   }
 
   .mdl-color-text--lime-300 {
-    color: unquote("rgb(#{$palette-lime-300})") !important;
+    color: $palette-lime-300 !important;
   }
 
   .mdl-color--lime-300 {
-    background-color: unquote("rgb(#{$palette-lime-300})") !important;
+    background-color: $palette-lime-300 !important;
   }
 
   .mdl-color-text--lime-400 {
-    color: unquote("rgb(#{$palette-lime-400})") !important;
+    color: $palette-lime-400 !important;
   }
 
   .mdl-color--lime-400 {
-    background-color: unquote("rgb(#{$palette-lime-400})") !important;
+    background-color: $palette-lime-400 !important;
   }
 
   .mdl-color-text--lime-500 {
-    color: unquote("rgb(#{$palette-lime-500})") !important;
+    color: $palette-lime-500 !important;
   }
 
   .mdl-color--lime-500 {
-    background-color: unquote("rgb(#{$palette-lime-500})") !important;
+    background-color: $palette-lime-500 !important;
   }
 
   .mdl-color-text--lime-600 {
-    color: unquote("rgb(#{$palette-lime-600})") !important;
+    color: $palette-lime-600 !important;
   }
 
   .mdl-color--lime-600 {
-    background-color: unquote("rgb(#{$palette-lime-600})") !important;
+    background-color: $palette-lime-600 !important;
   }
 
   .mdl-color-text--lime-700 {
-    color: unquote("rgb(#{$palette-lime-700})") !important;
+    color: $palette-lime-700 !important;
   }
 
   .mdl-color--lime-700 {
-    background-color: unquote("rgb(#{$palette-lime-700})") !important;
+    background-color: $palette-lime-700 !important;
   }
 
   .mdl-color-text--lime-800 {
-    color: unquote("rgb(#{$palette-lime-800})") !important;
+    color: $palette-lime-800 !important;
   }
 
   .mdl-color--lime-800 {
-    background-color: unquote("rgb(#{$palette-lime-800})") !important;
+    background-color: $palette-lime-800 !important;
   }
 
   .mdl-color-text--lime-900 {
-    color: unquote("rgb(#{$palette-lime-900})") !important;
+    color: $palette-lime-900 !important;
   }
 
   .mdl-color--lime-900 {
-    background-color: unquote("rgb(#{$palette-lime-900})") !important;
+    background-color: $palette-lime-900 !important;
   }
 
   .mdl-color-text--lime-A100 {
-    color: unquote("rgb(#{$palette-lime-A100})") !important;
+    color: $palette-lime-A100 !important;
   }
 
   .mdl-color--lime-A100 {
-    background-color: unquote("rgb(#{$palette-lime-A100})") !important;
+    background-color: $palette-lime-A100 !important;
   }
 
   .mdl-color-text--lime-A200 {
-    color: unquote("rgb(#{$palette-lime-A200})") !important;
+    color: $palette-lime-A200 !important;
   }
 
   .mdl-color--lime-A200 {
-    background-color: unquote("rgb(#{$palette-lime-A200})") !important;
+    background-color: $palette-lime-A200 !important;
   }
 
   .mdl-color-text--lime-A400 {
-    color: unquote("rgb(#{$palette-lime-A400})") !important;
+    color: $palette-lime-A400 !important;
   }
 
   .mdl-color--lime-A400 {
-    background-color: unquote("rgb(#{$palette-lime-A400})") !important;
+    background-color: $palette-lime-A400 !important;
   }
 
   .mdl-color-text--lime-A700 {
-    color: unquote("rgb(#{$palette-lime-A700})") !important;
+    color: $palette-lime-A700 !important;
   }
 
   .mdl-color--lime-A700 {
-    background-color: unquote("rgb(#{$palette-lime-A700})") !important;
+    background-color: $palette-lime-A700 !important;
   }
 
   // Yellow
 
   .mdl-color-text--yellow {
-    color: unquote("rgb(#{$palette-yellow-500})") !important;
+    color: $palette-yellow-500 !important;
   }
 
   .mdl-color--yellow {
-    background-color: unquote("rgb(#{$palette-yellow-500})") !important;
+    background-color: $palette-yellow-500 !important;
   }
 
   .mdl-color-text--yellow-50 {
-    color: unquote("rgb(#{$palette-yellow-50})") !important;
+    color: $palette-yellow-50 !important;
   }
 
   .mdl-color--yellow-50 {
-    background-color: unquote("rgb(#{$palette-yellow-50})") !important;
+    background-color: $palette-yellow-50 !important;
   }
 
   .mdl-color-text--yellow-100 {
-    color: unquote("rgb(#{$palette-yellow-100})") !important;
+    color: $palette-yellow-100 !important;
   }
 
   .mdl-color--yellow-100 {
-    background-color: unquote("rgb(#{$palette-yellow-100})") !important;
+    background-color: $palette-yellow-100 !important;
   }
 
   .mdl-color-text--yellow-200 {
-    color: unquote("rgb(#{$palette-yellow-200})") !important;
+    color: $palette-yellow-200 !important;
   }
 
   .mdl-color--yellow-200 {
-    background-color: unquote("rgb(#{$palette-yellow-200})") !important;
+    background-color: $palette-yellow-200 !important;
   }
 
   .mdl-color-text--yellow-300 {
-    color: unquote("rgb(#{$palette-yellow-300})") !important;
+    color: $palette-yellow-300 !important;
   }
 
   .mdl-color--yellow-300 {
-    background-color: unquote("rgb(#{$palette-yellow-300})") !important;
+    background-color: $palette-yellow-300 !important;
   }
 
   .mdl-color-text--yellow-400 {
-    color: unquote("rgb(#{$palette-yellow-400})") !important;
+    color: $palette-yellow-400 !important;
   }
 
   .mdl-color--yellow-400 {
-    background-color: unquote("rgb(#{$palette-yellow-400})") !important;
+    background-color: $palette-yellow-400 !important;
   }
 
   .mdl-color-text--yellow-500 {
-    color: unquote("rgb(#{$palette-yellow-500})") !important;
+    color: $palette-yellow-500 !important;
   }
 
   .mdl-color--yellow-500 {
-    background-color: unquote("rgb(#{$palette-yellow-500})") !important;
+    background-color: $palette-yellow-500 !important;
   }
 
   .mdl-color-text--yellow-600 {
-    color: unquote("rgb(#{$palette-yellow-600})") !important;
+    color: $palette-yellow-600 !important;
   }
 
   .mdl-color--yellow-600 {
-    background-color: unquote("rgb(#{$palette-yellow-600})") !important;
+    background-color: $palette-yellow-600 !important;
   }
 
   .mdl-color-text--yellow-700 {
-    color: unquote("rgb(#{$palette-yellow-700})") !important;
+    color: $palette-yellow-700 !important;
   }
 
   .mdl-color--yellow-700 {
-    background-color: unquote("rgb(#{$palette-yellow-700})") !important;
+    background-color: $palette-yellow-700 !important;
   }
 
   .mdl-color-text--yellow-800 {
-    color: unquote("rgb(#{$palette-yellow-800})") !important;
+    color: $palette-yellow-800 !important;
   }
 
   .mdl-color--yellow-800 {
-    background-color: unquote("rgb(#{$palette-yellow-800})") !important;
+    background-color: $palette-yellow-800 !important;
   }
 
   .mdl-color-text--yellow-900 {
-    color: unquote("rgb(#{$palette-yellow-900})") !important;
+    color: $palette-yellow-900 !important;
   }
 
   .mdl-color--yellow-900 {
-    background-color: unquote("rgb(#{$palette-yellow-900})") !important;
+    background-color: $palette-yellow-900 !important;
   }
 
   .mdl-color-text--yellow-A100 {
-    color: unquote("rgb(#{$palette-yellow-A100})") !important;
+    color: $palette-yellow-A100 !important;
   }
 
   .mdl-color--yellow-A100 {
-    background-color: unquote("rgb(#{$palette-yellow-A100})") !important;
+    background-color: $palette-yellow-A100 !important;
   }
 
   .mdl-color-text--yellow-A200 {
-    color: unquote("rgb(#{$palette-yellow-A200})") !important;
+    color: $palette-yellow-A200 !important;
   }
 
   .mdl-color--yellow-A200 {
-    background-color: unquote("rgb(#{$palette-yellow-A200})") !important;
+    background-color: $palette-yellow-A200 !important;
   }
 
   .mdl-color-text--yellow-A400 {
-    color: unquote("rgb(#{$palette-yellow-A400})") !important;
+    color: $palette-yellow-A400 !important;
   }
 
   .mdl-color--yellow-A400 {
-    background-color: unquote("rgb(#{$palette-yellow-A400})") !important;
+    background-color: $palette-yellow-A400 !important;
   }
 
   .mdl-color-text--yellow-A700 {
-    color: unquote("rgb(#{$palette-yellow-A700})") !important;
+    color: $palette-yellow-A700 !important;
   }
 
   .mdl-color--yellow-A700 {
-    background-color: unquote("rgb(#{$palette-yellow-A700})") !important;
+    background-color: $palette-yellow-A700 !important;
   }
 
   // Amber
 
   .mdl-color-text--amber {
-    color: unquote("rgb(#{$palette-amber-500})") !important;
+    color: $palette-amber-500 !important;
   }
 
   .mdl-color--amber {
-    background-color: unquote("rgb(#{$palette-amber-500})") !important;
+    background-color: $palette-amber-500 !important;
   }
 
   .mdl-color-text--amber-50 {
-    color: unquote("rgb(#{$palette-amber-50})") !important;
+    color: $palette-amber-50 !important;
   }
 
   .mdl-color--amber-50 {
-    background-color: unquote("rgb(#{$palette-amber-50})") !important;
+    background-color: $palette-amber-50 !important;
   }
 
   .mdl-color-text--amber-100 {
-    color: unquote("rgb(#{$palette-amber-100})") !important;
+    color: $palette-amber-100 !important;
   }
 
   .mdl-color--amber-100 {
-    background-color: unquote("rgb(#{$palette-amber-100})") !important;
+    background-color: $palette-amber-100 !important;
   }
 
   .mdl-color-text--amber-200 {
-    color: unquote("rgb(#{$palette-amber-200})") !important;
+    color: $palette-amber-200 !important;
   }
 
   .mdl-color--amber-200 {
-    background-color: unquote("rgb(#{$palette-amber-200})") !important;
+    background-color: $palette-amber-200 !important;
   }
 
   .mdl-color-text--amber-300 {
-    color: unquote("rgb(#{$palette-amber-300})") !important;
+    color: $palette-amber-300 !important;
   }
 
   .mdl-color--amber-300 {
-    background-color: unquote("rgb(#{$palette-amber-300})") !important;
+    background-color: $palette-amber-300 !important;
   }
 
   .mdl-color-text--amber-400 {
-    color: unquote("rgb(#{$palette-amber-400})") !important;
+    color: $palette-amber-400 !important;
   }
 
   .mdl-color--amber-400 {
-    background-color: unquote("rgb(#{$palette-amber-400})") !important;
+    background-color: $palette-amber-400 !important;
   }
 
   .mdl-color-text--amber-500 {
-    color: unquote("rgb(#{$palette-amber-500})") !important;
+    color: $palette-amber-500 !important;
   }
 
   .mdl-color--amber-500 {
-    background-color: unquote("rgb(#{$palette-amber-500})") !important;
+    background-color: $palette-amber-500 !important;
   }
 
   .mdl-color-text--amber-600 {
-    color: unquote("rgb(#{$palette-amber-600})") !important;
+    color: $palette-amber-600 !important;
   }
 
   .mdl-color--amber-600 {
-    background-color: unquote("rgb(#{$palette-amber-600})") !important;
+    background-color: $palette-amber-600 !important;
   }
 
   .mdl-color-text--amber-700 {
-    color: unquote("rgb(#{$palette-amber-700})") !important;
+    color: $palette-amber-700 !important;
   }
 
   .mdl-color--amber-700 {
-    background-color: unquote("rgb(#{$palette-amber-700})") !important;
+    background-color: $palette-amber-700 !important;
   }
 
   .mdl-color-text--amber-800 {
-    color: unquote("rgb(#{$palette-amber-800})") !important;
+    color: $palette-amber-800 !important;
   }
 
   .mdl-color--amber-800 {
-    background-color: unquote("rgb(#{$palette-amber-800})") !important;
+    background-color: $palette-amber-800 !important;
   }
 
   .mdl-color-text--amber-900 {
-    color: unquote("rgb(#{$palette-amber-900})") !important;
+    color: $palette-amber-900 !important;
   }
 
   .mdl-color--amber-900 {
-    background-color: unquote("rgb(#{$palette-amber-900})") !important;
+    background-color: $palette-amber-900 !important;
   }
 
   .mdl-color-text--amber-A100 {
-    color: unquote("rgb(#{$palette-amber-A100})") !important;
+    color: $palette-amber-A100 !important;
   }
 
   .mdl-color--amber-A100 {
-    background-color: unquote("rgb(#{$palette-amber-A100})") !important;
+    background-color: $palette-amber-A100 !important;
   }
 
   .mdl-color-text--amber-A200 {
-    color: unquote("rgb(#{$palette-amber-A200})") !important;
+    color: $palette-amber-A200 !important;
   }
 
   .mdl-color--amber-A200 {
-    background-color: unquote("rgb(#{$palette-amber-A200})") !important;
+    background-color: $palette-amber-A200 !important;
   }
 
   .mdl-color-text--amber-A400 {
-    color: unquote("rgb(#{$palette-amber-A400})") !important;
+    color: $palette-amber-A400 !important;
   }
 
   .mdl-color--amber-A400 {
-    background-color: unquote("rgb(#{$palette-amber-A400})") !important;
+    background-color: $palette-amber-A400 !important;
   }
 
   .mdl-color-text--amber-A700 {
-    color: unquote("rgb(#{$palette-amber-A700})") !important;
+    color: $palette-amber-A700 !important;
   }
 
   .mdl-color--amber-A700 {
-    background-color: unquote("rgb(#{$palette-amber-A700})") !important;
+    background-color: $palette-amber-A700 !important;
   }
 
   // Orange
 
   .mdl-color-text--orange {
-    color: unquote("rgb(#{$palette-orange-500})") !important;
+    color: $palette-orange-500 !important;
   }
 
   .mdl-color--orange {
-    background-color: unquote("rgb(#{$palette-orange-500})") !important;
+    background-color: $palette-orange-500 !important;
   }
 
   .mdl-color-text--orange-50 {
-    color: unquote("rgb(#{$palette-orange-50})") !important;
+    color: $palette-orange-50 !important;
   }
 
   .mdl-color--orange-50 {
-    background-color: unquote("rgb(#{$palette-orange-50})") !important;
+    background-color: $palette-orange-50 !important;
   }
 
   .mdl-color-text--orange-100 {
-    color: unquote("rgb(#{$palette-orange-100})") !important;
+    color: $palette-orange-100 !important;
   }
 
   .mdl-color--orange-100 {
-    background-color: unquote("rgb(#{$palette-orange-100})") !important;
+    background-color: $palette-orange-100 !important;
   }
 
   .mdl-color-text--orange-200 {
-    color: unquote("rgb(#{$palette-orange-200})") !important;
+    color: $palette-orange-200 !important;
   }
 
   .mdl-color--orange-200 {
-    background-color: unquote("rgb(#{$palette-orange-200})") !important;
+    background-color: $palette-orange-200 !important;
   }
 
   .mdl-color-text--orange-300 {
-    color: unquote("rgb(#{$palette-orange-300})") !important;
+    color: $palette-orange-300 !important;
   }
 
   .mdl-color--orange-300 {
-    background-color: unquote("rgb(#{$palette-orange-300})") !important;
+    background-color: $palette-orange-300 !important;
   }
 
   .mdl-color-text--orange-400 {
-    color: unquote("rgb(#{$palette-orange-400})") !important;
+    color: $palette-orange-400 !important;
   }
 
   .mdl-color--orange-400 {
-    background-color: unquote("rgb(#{$palette-orange-400})") !important;
+    background-color: $palette-orange-400 !important;
   }
 
   .mdl-color-text--orange-500 {
-    color: unquote("rgb(#{$palette-orange-500})") !important;
+    color: $palette-orange-500 !important;
   }
 
   .mdl-color--orange-500 {
-    background-color: unquote("rgb(#{$palette-orange-500})") !important;
+    background-color: $palette-orange-500 !important;
   }
 
   .mdl-color-text--orange-600 {
-    color: unquote("rgb(#{$palette-orange-600})") !important;
+    color: $palette-orange-600 !important;
   }
 
   .mdl-color--orange-600 {
-    background-color: unquote("rgb(#{$palette-orange-600})") !important;
+    background-color: $palette-orange-600 !important;
   }
 
   .mdl-color-text--orange-700 {
-    color: unquote("rgb(#{$palette-orange-700})") !important;
+    color: $palette-orange-700 !important;
   }
 
   .mdl-color--orange-700 {
-    background-color: unquote("rgb(#{$palette-orange-700})") !important;
+    background-color: $palette-orange-700 !important;
   }
 
   .mdl-color-text--orange-800 {
-    color: unquote("rgb(#{$palette-orange-800})") !important;
+    color: $palette-orange-800 !important;
   }
 
   .mdl-color--orange-800 {
-    background-color: unquote("rgb(#{$palette-orange-800})") !important;
+    background-color: $palette-orange-800 !important;
   }
 
   .mdl-color-text--orange-900 {
-    color: unquote("rgb(#{$palette-orange-900})") !important;
+    color: $palette-orange-900 !important;
   }
 
   .mdl-color--orange-900 {
-    background-color: unquote("rgb(#{$palette-orange-900})") !important;
+    background-color: $palette-orange-900 !important;
   }
 
   .mdl-color-text--orange-A100 {
-    color: unquote("rgb(#{$palette-orange-A100})") !important;
+    color: $palette-orange-A100 !important;
   }
 
   .mdl-color--orange-A100 {
-    background-color: unquote("rgb(#{$palette-orange-A100})") !important;
+    background-color: $palette-orange-A100 !important;
   }
 
   .mdl-color-text--orange-A200 {
-    color: unquote("rgb(#{$palette-orange-A200})") !important;
+    color: $palette-orange-A200 !important;
   }
 
   .mdl-color--orange-A200 {
-    background-color: unquote("rgb(#{$palette-orange-A200})") !important;
+    background-color: $palette-orange-A200 !important;
   }
 
   .mdl-color-text--orange-A400 {
-    color: unquote("rgb(#{$palette-orange-A400})") !important;
+    color: $palette-orange-A400 !important;
   }
 
   .mdl-color--orange-A400 {
-    background-color: unquote("rgb(#{$palette-orange-A400})") !important;
+    background-color: $palette-orange-A400 !important;
   }
 
   .mdl-color-text--orange-A700 {
-    color: unquote("rgb(#{$palette-orange-A700})") !important;
+    color: $palette-orange-A700 !important;
   }
 
   .mdl-color--orange-A700 {
-    background-color: unquote("rgb(#{$palette-orange-A700})") !important;
+    background-color: $palette-orange-A700 !important;
   }
 
   // Deep Orange
 
   .mdl-color-text--deep-orange {
-    color: unquote("rgb(#{$palette-deep-orange-500})") !important;
+    color: $palette-deep-orange-500 !important;
   }
 
   .mdl-color--deep-orange {
-    background-color: unquote("rgb(#{$palette-deep-orange-500})") !important;
+    background-color: $palette-deep-orange-500 !important;
   }
 
   .mdl-color-text--deep-orange-50 {
-    color: unquote("rgb(#{$palette-deep-orange-50})") !important;
+    color: $palette-deep-orange-50 !important;
   }
 
   .mdl-color--deep-orange-50 {
-    background-color: unquote("rgb(#{$palette-deep-orange-50})") !important;
+    background-color: $palette-deep-orange-50 !important;
   }
 
   .mdl-color-text--deep-orange-100 {
-    color: unquote("rgb(#{$palette-deep-orange-100})") !important;
+    color: $palette-deep-orange-100 !important;
   }
 
   .mdl-color--deep-orange-100 {
-    background-color: unquote("rgb(#{$palette-deep-orange-100})") !important;
+    background-color: $palette-deep-orange-100 !important;
   }
 
   .mdl-color-text--deep-orange-200 {
-    color: unquote("rgb(#{$palette-deep-orange-200})") !important;
+    color: $palette-deep-orange-200 !important;
   }
 
   .mdl-color--deep-orange-200 {
-    background-color: unquote("rgb(#{$palette-deep-orange-200})") !important;
+    background-color: $palette-deep-orange-200 !important;
   }
 
   .mdl-color-text--deep-orange-300 {
-    color: unquote("rgb(#{$palette-deep-orange-300})") !important;
+    color: $palette-deep-orange-300 !important;
   }
 
   .mdl-color--deep-orange-300 {
-    background-color: unquote("rgb(#{$palette-deep-orange-300})") !important;
+    background-color: $palette-deep-orange-300 !important;
   }
 
   .mdl-color-text--deep-orange-400 {
-    color: unquote("rgb(#{$palette-deep-orange-400})") !important;
+    color: $palette-deep-orange-400 !important;
   }
 
   .mdl-color--deep-orange-400 {
-    background-color: unquote("rgb(#{$palette-deep-orange-400})") !important;
+    background-color: $palette-deep-orange-400 !important;
   }
 
   .mdl-color-text--deep-orange-500 {
-    color: unquote("rgb(#{$palette-deep-orange-500})") !important;
+    color: $palette-deep-orange-500 !important;
   }
 
   .mdl-color--deep-orange-500 {
-    background-color: unquote("rgb(#{$palette-deep-orange-500})") !important;
+    background-color: $palette-deep-orange-500 !important;
   }
 
   .mdl-color-text--deep-orange-600 {
-    color: unquote("rgb(#{$palette-deep-orange-600})") !important;
+    color: $palette-deep-orange-600 !important;
   }
 
   .mdl-color--deep-orange-600 {
-    background-color: unquote("rgb(#{$palette-deep-orange-600})") !important;
+    background-color: $palette-deep-orange-600 !important;
   }
 
   .mdl-color-text--deep-orange-700 {
-    color: unquote("rgb(#{$palette-deep-orange-700})") !important;
+    color: $palette-deep-orange-700 !important;
   }
 
   .mdl-color--deep-orange-700 {
-    background-color: unquote("rgb(#{$palette-deep-orange-700})") !important;
+    background-color: $palette-deep-orange-700 !important;
   }
 
   .mdl-color-text--deep-orange-800 {
-    color: unquote("rgb(#{$palette-deep-orange-800})") !important;
+    color: $palette-deep-orange-800 !important;
   }
 
   .mdl-color--deep-orange-800 {
-    background-color: unquote("rgb(#{$palette-deep-orange-800})") !important;
+    background-color: $palette-deep-orange-800 !important;
   }
 
   .mdl-color-text--deep-orange-900 {
-    color: unquote("rgb(#{$palette-deep-orange-900})") !important;
+    color: $palette-deep-orange-900 !important;
   }
 
   .mdl-color--deep-orange-900 {
-    background-color: unquote("rgb(#{$palette-deep-orange-900})") !important;
+    background-color: $palette-deep-orange-900 !important;
   }
 
   .mdl-color-text--deep-orange-A100 {
-    color: unquote("rgb(#{$palette-deep-orange-A100})") !important;
+    color: $palette-deep-orange-A100 !important;
   }
 
   .mdl-color--deep-orange-A100 {
-    background-color: unquote("rgb(#{$palette-deep-orange-A100})") !important;
+    background-color: $palette-deep-orange-A100 !important;
   }
 
   .mdl-color-text--deep-orange-A200 {
-    color: unquote("rgb(#{$palette-deep-orange-A200})") !important;
+    color: $palette-deep-orange-A200 !important;
   }
 
   .mdl-color--deep-orange-A200 {
-    background-color: unquote("rgb(#{$palette-deep-orange-A200})") !important;
+    background-color: $palette-deep-orange-A200 !important;
   }
 
   .mdl-color-text--deep-orange-A400 {
-    color: unquote("rgb(#{$palette-deep-orange-A400})") !important;
+    color: $palette-deep-orange-A400 !important;
   }
 
   .mdl-color--deep-orange-A400 {
-    background-color: unquote("rgb(#{$palette-deep-orange-A400})") !important;
+    background-color: $palette-deep-orange-A400 !important;
   }
 
   .mdl-color-text--deep-orange-A700 {
-    color: unquote("rgb(#{$palette-deep-orange-A700})") !important;
+    color: $palette-deep-orange-A700 !important;
   }
 
   .mdl-color--deep-orange-A700 {
-    background-color: unquote("rgb(#{$palette-deep-orange-A700})") !important;
+    background-color: $palette-deep-orange-A700 !important;
   }
 
   // Brown
 
   .mdl-color-text--brown {
-    color: unquote("rgb(#{$palette-brown-500})") !important;
+    color: $palette-brown-500 !important;
   }
 
   .mdl-color--brown {
-    background-color: unquote("rgb(#{$palette-brown-500})") !important;
+    background-color: $palette-brown-500 !important;
   }
 
   .mdl-color-text--brown-50 {
-    color: unquote("rgb(#{$palette-brown-50})") !important;
+    color: $palette-brown-50 !important;
   }
 
   .mdl-color--brown-50 {
-    background-color: unquote("rgb(#{$palette-brown-50})") !important;
+    background-color: $palette-brown-50 !important;
   }
 
   .mdl-color-text--brown-100 {
-    color: unquote("rgb(#{$palette-brown-100})") !important;
+    color: $palette-brown-100 !important;
   }
 
   .mdl-color--brown-100 {
-    background-color: unquote("rgb(#{$palette-brown-100})") !important;
+    background-color: $palette-brown-100 !important;
   }
 
   .mdl-color-text--brown-200 {
-    color: unquote("rgb(#{$palette-brown-200})") !important;
+    color: $palette-brown-200 !important;
   }
 
   .mdl-color--brown-200 {
-    background-color: unquote("rgb(#{$palette-brown-200})") !important;
+    background-color: $palette-brown-200 !important;
   }
 
   .mdl-color-text--brown-300 {
-    color: unquote("rgb(#{$palette-brown-300})") !important;
+    color: $palette-brown-300 !important;
   }
 
   .mdl-color--brown-300 {
-    background-color: unquote("rgb(#{$palette-brown-300})") !important;
+    background-color: $palette-brown-300 !important;
   }
 
   .mdl-color-text--brown-400 {
-    color: unquote("rgb(#{$palette-brown-400})") !important;
+    color: $palette-brown-400 !important;
   }
 
   .mdl-color--brown-400 {
-    background-color: unquote("rgb(#{$palette-brown-400})") !important;
+    background-color: $palette-brown-400 !important;
   }
 
   .mdl-color-text--brown-500 {
-    color: unquote("rgb(#{$palette-brown-500})") !important;
+    color: $palette-brown-500 !important;
   }
 
   .mdl-color--brown-500 {
-    background-color: unquote("rgb(#{$palette-brown-500})") !important;
+    background-color: $palette-brown-500 !important;
   }
 
   .mdl-color-text--brown-600 {
-    color: unquote("rgb(#{$palette-brown-600})") !important;
+    color: $palette-brown-600 !important;
   }
 
   .mdl-color--brown-600 {
-    background-color: unquote("rgb(#{$palette-brown-600})") !important;
+    background-color: $palette-brown-600 !important;
   }
 
   .mdl-color-text--brown-700 {
-    color: unquote("rgb(#{$palette-brown-700})") !important;
+    color: $palette-brown-700 !important;
   }
 
   .mdl-color--brown-700 {
-    background-color: unquote("rgb(#{$palette-brown-700})") !important;
+    background-color: $palette-brown-700 !important;
   }
 
   .mdl-color-text--brown-800 {
-    color: unquote("rgb(#{$palette-brown-800})") !important;
+    color: $palette-brown-800 !important;
   }
 
   .mdl-color--brown-800 {
-    background-color: unquote("rgb(#{$palette-brown-800})") !important;
+    background-color: $palette-brown-800 !important;
   }
 
   .mdl-color-text--brown-900 {
-    color: unquote("rgb(#{$palette-brown-900})") !important;
+    color: $palette-brown-900 !important;
   }
 
   .mdl-color--brown-900 {
-    background-color: unquote("rgb(#{$palette-brown-900})") !important;
+    background-color: $palette-brown-900 !important;
   }
 
   // Grey
 
   .mdl-color-text--grey {
-    color: unquote("rgb(#{$palette-grey-500})") !important;
+    color: $palette-grey-500 !important;
   }
 
   .mdl-color--grey {
-    background-color: unquote("rgb(#{$palette-grey-500})") !important;
+    background-color: $palette-grey-500 !important;
   }
 
   .mdl-color-text--grey-50 {
-    color: unquote("rgb(#{$palette-grey-50})") !important;
+    color: $palette-grey-50 !important;
   }
 
   .mdl-color--grey-50 {
-    background-color: unquote("rgb(#{$palette-grey-50})") !important;
+    background-color: $palette-grey-50 !important;
   }
 
   .mdl-color-text--grey-100 {
-    color: unquote("rgb(#{$palette-grey-100})") !important;
+    color: $palette-grey-100 !important;
   }
 
   .mdl-color--grey-100 {
-    background-color: unquote("rgb(#{$palette-grey-100})") !important;
+    background-color: $palette-grey-100 !important;
   }
 
   .mdl-color-text--grey-200 {
-    color: unquote("rgb(#{$palette-grey-200})") !important;
+    color: $palette-grey-200 !important;
   }
 
   .mdl-color--grey-200 {
-    background-color: unquote("rgb(#{$palette-grey-200})") !important;
+    background-color: $palette-grey-200 !important;
   }
 
   .mdl-color-text--grey-300 {
-    color: unquote("rgb(#{$palette-grey-300})") !important;
+    color: $palette-grey-300 !important;
   }
 
   .mdl-color--grey-300 {
-    background-color: unquote("rgb(#{$palette-grey-300})") !important;
+    background-color: $palette-grey-300 !important;
   }
 
   .mdl-color-text--grey-400 {
-    color: unquote("rgb(#{$palette-grey-400})") !important;
+    color: $palette-grey-400 !important;
   }
 
   .mdl-color--grey-400 {
-    background-color: unquote("rgb(#{$palette-grey-400})") !important;
+    background-color: $palette-grey-400 !important;
   }
 
   .mdl-color-text--grey-500 {
-    color: unquote("rgb(#{$palette-grey-500})") !important;
+    color: $palette-grey-500 !important;
   }
 
   .mdl-color--grey-500 {
-    background-color: unquote("rgb(#{$palette-grey-500})") !important;
+    background-color: $palette-grey-500 !important;
   }
 
   .mdl-color-text--grey-600 {
-    color: unquote("rgb(#{$palette-grey-600})") !important;
+    color: $palette-grey-600 !important;
   }
 
   .mdl-color--grey-600 {
-    background-color: unquote("rgb(#{$palette-grey-600})") !important;
+    background-color: $palette-grey-600 !important;
   }
 
   .mdl-color-text--grey-700 {
-    color: unquote("rgb(#{$palette-grey-700})") !important;
+    color: $palette-grey-700 !important;
   }
 
   .mdl-color--grey-700 {
-    background-color: unquote("rgb(#{$palette-grey-700})") !important;
+    background-color: $palette-grey-700 !important;
   }
 
   .mdl-color-text--grey-800 {
-    color: unquote("rgb(#{$palette-grey-800})") !important;
+    color: $palette-grey-800 !important;
   }
 
   .mdl-color--grey-800 {
-    background-color: unquote("rgb(#{$palette-grey-800})") !important;
+    background-color: $palette-grey-800 !important;
   }
 
   .mdl-color-text--grey-900 {
-    color: unquote("rgb(#{$palette-grey-900})") !important;
+    color: $palette-grey-900 !important;
   }
 
   .mdl-color--grey-900 {
-    background-color: unquote("rgb(#{$palette-grey-900})") !important;
+    background-color: $palette-grey-900 !important;
   }
 
   // Blue Grey
 
   .mdl-color-text--blue-grey {
-    color: unquote("rgb(#{$palette-blue-grey-500})") !important;
+    color: $palette-blue-grey-500 !important;
   }
 
   .mdl-color--blue-grey {
-    background-color: unquote("rgb(#{$palette-blue-grey-500})") !important;
+    background-color: $palette-blue-grey-500 !important;
   }
 
   .mdl-color-text--blue-grey-50 {
-    color: unquote("rgb(#{$palette-blue-grey-50})") !important;
+    color: $palette-blue-grey-50 !important;
   }
 
   .mdl-color--blue-grey-50 {
-    background-color: unquote("rgb(#{$palette-blue-grey-50})") !important;
+    background-color: $palette-blue-grey-50 !important;
   }
 
   .mdl-color-text--blue-grey-100 {
-    color: unquote("rgb(#{$palette-blue-grey-100})") !important;
+    color: $palette-blue-grey-100 !important;
   }
 
   .mdl-color--blue-grey-100 {
-    background-color: unquote("rgb(#{$palette-blue-grey-100})") !important;
+    background-color: $palette-blue-grey-100 !important;
   }
 
   .mdl-color-text--blue-grey-200 {
-    color: unquote("rgb(#{$palette-blue-grey-200})") !important;
+    color: $palette-blue-grey-200 !important;
   }
 
   .mdl-color--blue-grey-200 {
-    background-color: unquote("rgb(#{$palette-blue-grey-200})") !important;
+    background-color: $palette-blue-grey-200 !important;
   }
 
   .mdl-color-text--blue-grey-300 {
-    color: unquote("rgb(#{$palette-blue-grey-300})") !important;
+    color: $palette-blue-grey-300 !important;
   }
 
   .mdl-color--blue-grey-300 {
-    background-color: unquote("rgb(#{$palette-blue-grey-300})") !important;
+    background-color: $palette-blue-grey-300 !important;
   }
 
   .mdl-color-text--blue-grey-400 {
-    color: unquote("rgb(#{$palette-blue-grey-400})") !important;
+    color: $palette-blue-grey-400 !important;
   }
 
   .mdl-color--blue-grey-400 {
-    background-color: unquote("rgb(#{$palette-blue-grey-400})") !important;
+    background-color: $palette-blue-grey-400 !important;
   }
 
   .mdl-color-text--blue-grey-500 {
-    color: unquote("rgb(#{$palette-blue-grey-500})") !important;
+    color: $palette-blue-grey-500 !important;
   }
 
   .mdl-color--blue-grey-500 {
-    background-color: unquote("rgb(#{$palette-blue-grey-500})") !important;
+    background-color: $palette-blue-grey-500 !important;
   }
 
   .mdl-color-text--blue-grey-600 {
-    color: unquote("rgb(#{$palette-blue-grey-600})") !important;
+    color: $palette-blue-grey-600 !important;
   }
 
   .mdl-color--blue-grey-600 {
-    background-color: unquote("rgb(#{$palette-blue-grey-600})") !important;
+    background-color: $palette-blue-grey-600 !important;
   }
 
   .mdl-color-text--blue-grey-700 {
-    color: unquote("rgb(#{$palette-blue-grey-700})") !important;
+    color: $palette-blue-grey-700 !important;
   }
 
   .mdl-color--blue-grey-700 {
-    background-color: unquote("rgb(#{$palette-blue-grey-700})") !important;
+    background-color: $palette-blue-grey-700 !important;
   }
 
   .mdl-color-text--blue-grey-800 {
-    color: unquote("rgb(#{$palette-blue-grey-800})") !important;
+    color: $palette-blue-grey-800 !important;
   }
 
   .mdl-color--blue-grey-800 {
-    background-color: unquote("rgb(#{$palette-blue-grey-800})") !important;
+    background-color: $palette-blue-grey-800 !important;
   }
 
   .mdl-color-text--blue-grey-900 {
-    color: unquote("rgb(#{$palette-blue-grey-900})") !important;
+    color: $palette-blue-grey-900 !important;
   }
 
   .mdl-color--blue-grey-900 {
-    background-color: unquote("rgb(#{$palette-blue-grey-900})") !important;
+    background-color: $palette-blue-grey-900 !important;
   }
 
   // Black
 
   .mdl-color--black {
-    background-color: unquote("rgb(#{$color-black})") !important;
+    background-color: $color-black !important;
   }
 
   .mdl-color-text--black {
-    color: unquote("rgb(#{$color-black})") !important;
+    color: $color-black !important;
   }
 
   // White
 
   .mdl-color--white {
-    background-color: unquote("rgb(#{$color-white})") !important;
+    background-color: $color-white !important;
   }
 
   .mdl-color-text--white {
-    color: unquote("rgb(#{$color-white})") !important;
+    color: $color-white !important;
   }
 }
 
 // Primary and accent
 
 .mdl-color--primary {
-  background-color: unquote("rgb(#{$color-primary})") !important;
+  background-color: $color-primary !important;
 }
 
 .mdl-color--primary-contrast {
-  background-color: unquote("rgb(#{$color-primary-contrast})") !important;
+  background-color: $color-primary-contrast !important;
 }
 
 .mdl-color--primary-dark {
-  background-color: unquote("rgb(#{$color-primary-dark})") !important;
+  background-color: $color-primary-dark !important;
 }
 
 .mdl-color--accent {
-  background-color: unquote("rgb(#{$color-accent})") !important;
+  background-color: $color-accent !important;
 }
 
 .mdl-color--accent-contrast {
-  background-color: unquote("rgb(#{$color-accent-contrast})") !important;
+  background-color: $color-accent-contrast !important;
 }
 
 .mdl-color-text--primary {
-  color: unquote("rgb(#{$color-primary})") !important;
+  color: $color-primary !important;
 }
 
 .mdl-color-text--primary-contrast {
-  color: unquote("rgb(#{$color-primary-contrast})") !important;
+  color: $color-primary-contrast !important;
 }
 
 .mdl-color-text--primary-dark {
-  color: unquote("rgb(#{$color-primary-dark})") !important;
+  color: $color-primary-dark !important;
 }
 
 .mdl-color-text--accent {
-  color: unquote("rgb(#{$color-accent})") !important;
+  color: $color-accent !important;
 }
 
 .mdl-color-text--accent-contrast {
-  color: unquote("rgb(#{$color-accent-contrast})") !important;
+  color: $color-accent-contrast !important;
 }
diff --git a/src/styleguide.scss b/src/styleguide.scss
index ee418fb0ef..84b90da2ec 100644
--- a/src/styleguide.scss
+++ b/src/styleguide.scss
@@ -44,7 +44,7 @@ body {
 
 .styleguide-masthead {
   height: 256px;
-  background: unquote("rgb(#{nth($palette-grey, 10)})");
+  background: nth($palette-grey, 10);
   padding: 115px 16px 0;
 }