Merge branch 'korgan00#material-colors-implementation'

Conflicts:
	dist/css/ripples.css
	dist/css/ripples.css.map
	dist/css/ripples.min.css
	dist/css/ripples.min.css.map
	less/_colors.less

dist/css/ripples.css

@@ -20,11 +20,7 @@
   margin-top: -10px;
   border-radius: 100%;
   background-color: rgba(0, 0, 0, 0.05);
-  -webkit-transform: scale(1);
-      -ms-transform: scale(1);
   transform: scale(1);
-  -webkit-transform-origin: 50%;
-      -ms-transform-origin: 50%;
   transform-origin: 50%;
   opacity: 0;
   pointer-events: none;

dist/css/ripples.min.css.map

@@ -1 +1,5 @@
+<<<<<<< HEAD
 {"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA,YACI,kBAAA,CAAA,eAGA,kBACA,CAAA,KACA,CAAA,MACA,CAAA,SACA,CAAA,UACA,CAAA,WACA,CAAA,eACA,CAAA,qBACA,CAAA,mBAEJ,CAAA,OACI,kBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,gBACA,CAAA,kBACA,CAAA,gCACA,CAAA,0BAAA,CACA,sBADA,CACA,kBAAA,CAAA,4BAAA,CACA,wBADA,CACA,oBAAA,CAAA,SACA,CAAA,mBAAA,CAAA,iBAGA,qFAAA,CACA,4EAAA,CAAA,UAAA,CAAA,kBAGA,2CACA,CAAA,SAAA,CAAA","file":"ripples.min.css","sourcesContent":[".withripple {\n    position: relative;\n}\n.ripple-wrapper {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n    pointer-events: none;\n}\n.ripple {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    margin-left: -10px;\n    margin-top: -10px;\n    border-radius: 100%;\n    background-color: rgba(0,0,0,0.05);\n    transform: scale(1);\n    transform-origin: 50%;\n    opacity: 0;\n    pointer-events: none;\n}\n.ripple.ripple-on {\n    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n    opacity: 0.1;\n}\n.ripple.ripple-out {\n    transition: opacity 0.1s linear 0s !important;\n    opacity: 0;\n}\n"]}
+=======
+{"version":3,"sources":["/less/ripples.less"],"names":[],"mappings":"AAAA,YACI,kBAAA,CAAA,eAGA,kBACA,CAAA,KACA,CAAA,MACA,CAAA,SACA,CAAA,UACA,CAAA,WACA,CAAA,eACA,CAAA,qBACA,CAAA,mBAEJ,CAAA,OACI,kBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,gBACA,CAAA,kBACA,CAAA,gCACA,CAAA,0BAAA,CACA,sBADA,CACA,kBAAA,CAAA,4BAAA,CACA,wBADA,CACA,oBAAA,CAAA,SACA,CAAA,mBAAA,CAAA,iBAGA,qFAAA,CACA,4EAAA,CAAA,WAAA,CAAA,kBAGA,2CACA,CAAA,SAAA,CAAA","file":"ripples.min.css","sourcesContent":[".withripple {\n    position: relative;\n}\n.ripple-wrapper {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    border-radius: inherit;\n    pointer-events: none;\n}\n.ripple {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    margin-left: -10px;\n    margin-top: -10px;\n    border-radius: 100%;\n    background-color: rgba(0,0,0,0.05);\n    transform: scale(1);\n    transform-origin: 50%;\n    opacity: 0;\n    pointer-events: none;\n}\n.ripple.ripple-on {\n    transition: opacity 0.15s ease-in 0s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;\n    opacity: 0.15;\n}\n.ripple.ripple-out {\n    transition: opacity 0.1s linear 0s !important;\n    opacity: 0;\n}\n"]}
+>>>>>>> korgan00#material-colors-implementation

index.html

@@ -156,6 +156,7 @@
           <ul>
             <li class="active withripple" data-target="#about">Material Design for Bootstrap</li>
             <li><a href="http://fezvrasta.github.com/bootstrap-material-design/bootstrap-elements.html" target="_blank">Bootstrap elements <i class="mdi-action-open-in-new"></i></a></li>
+            <li class="withripple" data-target="#material-colors">Material Colors</li>
             <li class="withripple" data-target="#checkbox">Checkbox</li>
             <li class="withripple" data-target="#radio-button">Radio Button</li>
             <li class="withripple" data-target="#toggle-button">Toggle Button</li>
@@ -525,14 +526,59 @@
 
               <div class="navbar navbar-inverse">
                 <div class="navbar-header">
-                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-warning-collapse">
+                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                     <span class="icon-bar"></span>
                   </button>
                   <a class="navbar-brand" href="javascript:void(0)">Brand</a>
                 </div>
-                <div class="navbar-collapse collapse navbar-warning-collapse">
+                <div class="navbar-collapse collapse navbar-inverse-collapse">
+                  <ul class="nav navbar-nav">
+                    <li class="active"><a href="javascript:void(0)">Active</a></li>
+                    <li><a href="javascript:void(0)">Link</a></li>
+                    <li class="dropdown">
+                      <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                      <ul class="dropdown-menu">
+                        <li><a href="javascript:void(0)">Action</a></li>
+                        <li><a href="javascript:void(0)">Another action</a></li>
+                        <li><a href="javascript:void(0)">Something else here</a></li>
+                        <li class="divider"></li>
+                        <li class="dropdown-header">Dropdown header</li>
+                        <li><a href="javascript:void(0)">Separated link</a></li>
+                        <li><a href="javascript:void(0)">One more separated link</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                  <form class="navbar-form navbar-left">
+                    <input type="text" class="form-control col-lg-8" placeholder="Search">
+                  </form>
+                  <ul class="nav navbar-nav navbar-right">
+                    <li><a href="javascript:void(0)">Link</a></li>
+                    <li class="dropdown">
+                      <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+                      <ul class="dropdown-menu">
+                        <li><a href="javascript:void(0)">Action</a></li>
+                        <li><a href="javascript:void(0)">Another action</a></li>
+                        <li><a href="javascript:void(0)">Something else here</a></li>
+                        <li class="divider"></li>
+                        <li><a href="javascript:void(0)">Separated link</a></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+              <div class="navbar navbar-material-light-blue-300">
+                <div class="navbar-header">
+                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-material-light-blue-collapse">
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                  </button>
+                  <a class="navbar-brand" href="javascript:void(0)">Brand</a>
+                </div>
+                <div class="navbar-collapse collapse navbar-material-light-blue-collapse">
                   <ul class="nav navbar-nav">
                     <li class="active"><a href="javascript:void(0)">Active</a></li>
                     <li><a href="javascript:void(0)">Link</a></li>
@@ -669,6 +715,320 @@
                 }
               </style>
 
+            </div>
+            <div class="well page" id="material-colors">
+              <h1 class="header">Material Color Samples</h1>
+        <div class="sampleRed">
+        <h2><button class="btn btn-material-red btn-lg">Red</button></h2>
+                <button class="btn btn-material-red-50">050</button>
+                <button class="btn btn-material-red-100">100</button>
+                <button class="btn btn-material-red-200">200</button>
+                <button class="btn btn-material-red-300">300</button>
+                <button class="btn btn-material-red-400">400</button>
+                <button class="btn btn-material-red-500">500</button>
+                <button class="btn btn-material-red-600">600</button>
+                <button class="btn btn-material-red-700">700</button>
+                <button class="btn btn-material-red-800">800</button>
+                <button class="btn btn-material-red-900">900</button><br>
+                <button class="btn btn-material-red-A100">A100</button>
+                <button class="btn btn-material-red-A200">A200</button>
+                <button class="btn btn-material-red-A400">A400</button>
+                <button class="btn btn-material-red-A700">A700</button>
+        </div>
+        <div class="samplePink">
+        <h2><button class="btn btn-material-pink btn-lg">Pink</button></h2>
+                <button class="btn btn-material-pink-50">050</button>
+                <button class="btn btn-material-pink-100">100</button>
+                <button class="btn btn-material-pink-200">200</button>
+                <button class="btn btn-material-pink-300">300</button>
+                <button class="btn btn-material-pink-400">400</button>
+                <button class="btn btn-material-pink-500">500</button>
+                <button class="btn btn-material-pink-600">600</button>
+                <button class="btn btn-material-pink-700">700</button>
+                <button class="btn btn-material-pink-800">800</button>
+                <button class="btn btn-material-pink-900">900</button><br>
+                <button class="btn btn-material-pink-A100">A100</button>
+                <button class="btn btn-material-pink-A200">A200</button>
+                <button class="btn btn-material-pink-A400">A400</button>
+                <button class="btn btn-material-pink-A700">A700</button>
+        </div>
+        <div class="samplePurple">
+        <h2><button class="btn btn-material-purple btn-lg">Purple</button></h2>
+                <button class="btn btn-material-purple-50">050</button>
+                <button class="btn btn-material-purple-100">100</button>
+                <button class="btn btn-material-purple-200">200</button>
+                <button class="btn btn-material-purple-300">300</button>
+                <button class="btn btn-material-purple-400">400</button>
+                <button class="btn btn-material-purple-500">500</button>
+                <button class="btn btn-material-purple-600">600</button>
+                <button class="btn btn-material-purple-700">700</button>
+                <button class="btn btn-material-purple-800">800</button>
+                <button class="btn btn-material-purple-900">900</button><br>
+                <button class="btn btn-material-purple-A100">A100</button>
+                <button class="btn btn-material-purple-A200">A200</button>
+                <button class="btn btn-material-purple-A400">A400</button>
+                <button class="btn btn-material-purple-A700">A700</button>
+        </div>
+        <div class="sampleDeepPurple">
+        <h2><button class="btn btn-material-deep-purple btn-lg">Deep Purple</button></h2>
+                <button class="btn btn-material-deep-purple-50">050</button>
+                <button class="btn btn-material-deep-purple-100">100</button>
+                <button class="btn btn-material-deep-purple-200">200</button>
+                <button class="btn btn-material-deep-purple-300">300</button>
+                <button class="btn btn-material-deep-purple-400">400</button>
+                <button class="btn btn-material-deep-purple-500">500</button>
+                <button class="btn btn-material-deep-purple-600">600</button>
+                <button class="btn btn-material-deep-purple-700">700</button>
+                <button class="btn btn-material-deep-purple-800">800</button>
+                <button class="btn btn-material-deep-purple-900">900</button><br>
+                <button class="btn btn-material-deep-purple-A100">A100</button>
+                <button class="btn btn-material-deep-purple-A200">A200</button>
+                <button class="btn btn-material-deep-purple-A400">A400</button>
+                <button class="btn btn-material-deep-purple-A700">A700</button>
+        </div>
+        <div class="sampleIndigo">
+        <h2><button class="btn btn-material-indigo btn-lg">Indigo</button></h2>
+                <button class="btn btn-material-indigo-50">050</button>
+                <button class="btn btn-material-indigo-100">100</button>
+                <button class="btn btn-material-indigo-200">200</button>
+                <button class="btn btn-material-indigo-300">300</button>
+                <button class="btn btn-material-indigo-400">400</button>
+                <button class="btn btn-material-indigo-500">500</button>
+                <button class="btn btn-material-indigo-600">600</button>
+                <button class="btn btn-material-indigo-700">700</button>
+                <button class="btn btn-material-indigo-800">800</button>
+                <button class="btn btn-material-indigo-900">900</button><br>
+                <button class="btn btn-material-indigo-A100">A100</button>
+                <button class="btn btn-material-indigo-A200">A200</button>
+                <button class="btn btn-material-indigo-A400">A400</button>
+                <button class="btn btn-material-indigo-A700">A700</button>
+        </div>
+        <div class="sampleBlue">
+        <h2><button class="btn btn-material-blue btn-lg">Blue</button></h2>
+                <button class="btn btn-material-blue-50">050</button>
+                <button class="btn btn-material-blue-100">100</button>
+                <button class="btn btn-material-blue-200">200</button>
+                <button class="btn btn-material-blue-300">300</button>
+                <button class="btn btn-material-blue-400">400</button>
+                <button class="btn btn-material-blue-500">500</button>
+                <button class="btn btn-material-blue-600">600</button>
+                <button class="btn btn-material-blue-700">700</button>
+                <button class="btn btn-material-blue-800">800</button>
+                <button class="btn btn-material-blue-900">900</button><br>
+                <button class="btn btn-material-blue-A100">A100</button>
+                <button class="btn btn-material-blue-A200">A200</button>
+                <button class="btn btn-material-blue-A400">A400</button>
+                <button class="btn btn-material-blue-A700">A700</button>
+        </div>
+        <div class="sampleLightBlue">
+        <h2><button class="btn btn-material-light-blue btn-lg">Light Blue</button></h2>
+                <button class="btn btn-material-light-blue-50">050</button>
+                <button class="btn btn-material-light-blue-100">100</button>
+                <button class="btn btn-material-light-blue-200">200</button>
+                <button class="btn btn-material-light-blue-300">300</button>
+                <button class="btn btn-material-light-blue-400">400</button>
+                <button class="btn btn-material-light-blue-500">500</button>
+                <button class="btn btn-material-light-blue-600">600</button>
+                <button class="btn btn-material-light-blue-700">700</button>
+                <button class="btn btn-material-light-blue-800">800</button>
+                <button class="btn btn-material-light-blue-900">900</button><br>
+                <button class="btn btn-material-light-blue-A100">A100</button>
+                <button class="btn btn-material-light-blue-A200">A200</button>
+                <button class="btn btn-material-light-blue-A400">A400</button>
+                <button class="btn btn-material-light-blue-A700">A700</button>
+        </div>
+        <div class="sampleCyan">
+        <h2><button class="btn btn-material-cyan btn-lg">Cyan</button></h2>
+                <button class="btn btn-material-cyan-50">050</button>
+                <button class="btn btn-material-cyan-100">100</button>
+                <button class="btn btn-material-cyan-200">200</button>
+                <button class="btn btn-material-cyan-300">300</button>
+                <button class="btn btn-material-cyan-400">400</button>
+                <button class="btn btn-material-cyan-500">500</button>
+                <button class="btn btn-material-cyan-600">600</button>
+                <button class="btn btn-material-cyan-700">700</button>
+                <button class="btn btn-material-cyan-800">800</button>
+                <button class="btn btn-material-cyan-900">900</button><br>
+                <button class="btn btn-material-cyan-A100">A100</button>
+                <button class="btn btn-material-cyan-A200">A200</button>
+                <button class="btn btn-material-cyan-A400">A400</button>
+                <button class="btn btn-material-cyan-A700">A700</button>
+        </div>
+        <div class="sampleTeal">
+        <h2><button class="btn btn-material-teal btn-lg">Teal</button></h2>
+                <button class="btn btn-material-teal-50">050</button>
+                <button class="btn btn-material-teal-100">100</button>
+                <button class="btn btn-material-teal-200">200</button>
+                <button class="btn btn-material-teal-300">300</button>
+                <button class="btn btn-material-teal-400">400</button>
+                <button class="btn btn-material-teal-500">500</button>
+                <button class="btn btn-material-teal-600">600</button>
+                <button class="btn btn-material-teal-700">700</button>
+                <button class="btn btn-material-teal-800">800</button>
+                <button class="btn btn-material-teal-900">900</button><br>
+                <button class="btn btn-material-teal-A100">A100</button>
+                <button class="btn btn-material-teal-A200">A200</button>
+                <button class="btn btn-material-teal-A400">A400</button>
+                <button class="btn btn-material-teal-A700">A700</button>
+        </div>
+        <div class="sampleGreen">
+        <h2><button class="btn btn-material-green btn-lg">Green</button></h2>
+                <button class="btn btn-material-green-50">050</button>
+                <button class="btn btn-material-green-100">100</button>
+                <button class="btn btn-material-green-200">200</button>
+                <button class="btn btn-material-green-300">300</button>
+                <button class="btn btn-material-green-400">400</button>
+                <button class="btn btn-material-green-500">500</button>
+                <button class="btn btn-material-green-600">600</button>
+                <button class="btn btn-material-green-700">700</button>
+                <button class="btn btn-material-green-800">800</button>
+                <button class="btn btn-material-green-900">900</button><br>
+                <button class="btn btn-material-green-A100">A100</button>
+                <button class="btn btn-material-green-A200">A200</button>
+                <button class="btn btn-material-green-A400">A400</button>
+                <button class="btn btn-material-green-A700">A700</button>
+        </div>
+        <div class="sampleLightGreen">
+        <h2><button class="btn btn-material-light-green btn-lg">LightGreen</button></h2>
+                <button class="btn btn-material-light-green-50">050</button>
+                <button class="btn btn-material-light-green-100">100</button>
+                <button class="btn btn-material-light-green-200">200</button>
+                <button class="btn btn-material-light-green-300">300</button>
+                <button class="btn btn-material-light-green-400">400</button>
+                <button class="btn btn-material-light-green-500">500</button>
+                <button class="btn btn-material-light-green-600">600</button>
+                <button class="btn btn-material-light-green-700">700</button>
+                <button class="btn btn-material-light-green-800">800</button>
+                <button class="btn btn-material-light-green-900">900</button><br>
+                <button class="btn btn-material-light-green-A100">A100</button>
+                <button class="btn btn-material-light-green-A200">A200</button>
+                <button class="btn btn-material-light-green-A400">A400</button>
+                <button class="btn btn-material-light-green-A700">A700</button>
+        </div>
+        <div class="sampleLime">
+        <h2><button class="btn btn-material-lime btn-lg">Lime</button></h2>
+                <button class="btn btn-material-lime-50">050</button>
+                <button class="btn btn-material-lime-100">100</button>
+                <button class="btn btn-material-lime-200">200</button>
+                <button class="btn btn-material-lime-300">300</button>
+                <button class="btn btn-material-lime-400">400</button>
+                <button class="btn btn-material-lime-500">500</button>
+                <button class="btn btn-material-lime-600">600</button>
+                <button class="btn btn-material-lime-700">700</button>
+                <button class="btn btn-material-lime-800">800</button>
+                <button class="btn btn-material-lime-900">900</button><br>
+                <button class="btn btn-material-lime-A100">A100</button>
+                <button class="btn btn-material-lime-A200">A200</button>
+                <button class="btn btn-material-lime-A400">A400</button>
+                <button class="btn btn-material-lime-A700">A700</button>
+        </div>
+        <div class="sampleYellow">
+        <h2><button class="btn btn-material-yellow btn-lg">Yellow</button></h2>
+                <button class="btn btn-material-yellow-50">050</button>
+                <button class="btn btn-material-yellow-100">100</button>
+                <button class="btn btn-material-yellow-200">200</button>
+                <button class="btn btn-material-yellow-300">300</button>
+                <button class="btn btn-material-yellow-400">400</button>
+                <button class="btn btn-material-yellow-500">500</button>
+                <button class="btn btn-material-yellow-600">600</button>
+                <button class="btn btn-material-yellow-700">700</button>
+                <button class="btn btn-material-yellow-800">800</button>
+                <button class="btn btn-material-yellow-900">900</button><br>
+                <button class="btn btn-material-yellow-A100">A100</button>
+                <button class="btn btn-material-yellow-A200">A200</button>
+                <button class="btn btn-material-yellow-A400">A400</button>
+                <button class="btn btn-material-yellow-A700">A700</button>
+        </div>
+        <div class="sampleAmber">
+        <h2><button class="btn btn-material-amber btn-lg">Amber</button></h2>
+                <button class="btn btn-material-amber-50">050</button>
+                <button class="btn btn-material-amber-100">100</button>
+                <button class="btn btn-material-amber-200">200</button>
+                <button class="btn btn-material-amber-300">300</button>
+                <button class="btn btn-material-amber-400">400</button>
+                <button class="btn btn-material-amber-500">500</button>
+                <button class="btn btn-material-amber-600">600</button>
+                <button class="btn btn-material-amber-700">700</button>
+                <button class="btn btn-material-amber-800">800</button>
+                <button class="btn btn-material-amber-900">900</button><br>
+                <button class="btn btn-material-amber-A100">A100</button>
+                <button class="btn btn-material-amber-A200">A200</button>
+                <button class="btn btn-material-amber-A400">A400</button>
+                <button class="btn btn-material-amber-A700">A700</button>
+        </div>
+        <div class="sampleOrange">
+        <h2><button class="btn btn-material-orange btn-lg">Orange</button></h2>
+                <button class="btn btn-material-orange-50">050</button>
+                <button class="btn btn-material-orange-100">100</button>
+                <button class="btn btn-material-orange-200">200</button>
+                <button class="btn btn-material-orange-300">300</button>
+                <button class="btn btn-material-orange-400">400</button>
+                <button class="btn btn-material-orange-500">500</button>
+                <button class="btn btn-material-orange-600">600</button>
+                <button class="btn btn-material-orange-700">700</button>
+                <button class="btn btn-material-orange-800">800</button>
+                <button class="btn btn-material-orange-900">900</button><br>
+                <button class="btn btn-material-orange-A100">A100</button>
+                <button class="btn btn-material-orange-A200">A200</button>
+                <button class="btn btn-material-orange-A400">A400</button>
+                <button class="btn btn-material-orange-A700">A700</button>
+        </div>
+        <div class="sampleDeepOrange">
+        <h2><button class="btn btn-material-deep-orange btn-lg">Deep Orange</button></h2>
+                <button class="btn btn-material-deep-orange-50">050</button>
+                <button class="btn btn-material-deep-orange-100">100</button>
+                <button class="btn btn-material-deep-orange-200">200</button>
+                <button class="btn btn-material-deep-orange-300">300</button>
+                <button class="btn btn-material-deep-orange-400">400</button>
+                <button class="btn btn-material-deep-orange-500">500</button>
+                <button class="btn btn-material-deep-orange-600">600</button>
+                <button class="btn btn-material-deep-orange-700">700</button>
+                <button class="btn btn-material-deep-orange-800">800</button>
+                <button class="btn btn-material-deep-orange-900">900</button><br>
+                <button class="btn btn-material-deep-orange-A100">A100</button>
+                <button class="btn btn-material-deep-orange-A200">A200</button>
+                <button class="btn btn-material-deep-orange-A400">A400</button>
+                <button class="btn btn-material-deep-orange-A700">A700</button><br><br>
+              </div>
+        <div class="sampleBrown">
+        <h2><button class="btn btn-material-brown btn-lg">Brown</button></h2>
+                <button class="btn btn-material-brown-50">050</button>
+                <button class="btn btn-material-brown-100">100</button>
+                <button class="btn btn-material-brown-200">200</button>
+                <button class="btn btn-material-brown-300">300</button>
+                <button class="btn btn-material-brown-400">400</button>
+                <button class="btn btn-material-brown-500">500</button>
+                <button class="btn btn-material-brown-600">600</button>
+                <button class="btn btn-material-brown-700">700</button>
+                <button class="btn btn-material-brown-800">800</button>
+                <button class="btn btn-material-brown-900">900</button>
+        </div>
+        <div class="sampleGrey">
+        <h2><button class="btn btn-material-grey btn-lg">Grey</button></h2>
+                <button class="btn btn-material-grey-50">050</button>
+                <button class="btn btn-material-grey-100">100</button>
+                <button class="btn btn-material-grey-200">200</button>
+                <button class="btn btn-material-grey-300">300</button>
+                <button class="btn btn-material-grey-400">400</button>
+                <button class="btn btn-material-grey-500">500</button>
+                <button class="btn btn-material-grey-600">600</button>
+                <button class="btn btn-material-grey-700">700</button>
+                <button class="btn btn-material-grey-800">800</button>
+                <button class="btn btn-material-grey-900">900</button>
+        </div>
+        <div class="sampleBlueGrey">
+        <h2><button class="btn btn-material-blue-grey btn-lg">Blue Grey</button></h2>
+                <button class="btn btn-material-blue-grey-50">050</button>
+                <button class="btn btn-material-blue-grey-100">100</button>
+                <button class="btn btn-material-blue-grey-200">200</button>
+                <button class="btn btn-material-blue-grey-300">300</button>
+                <button class="btn btn-material-blue-grey-400">400</button>
+                <button class="btn btn-material-blue-grey-500">500</button>
+                <button class="btn btn-material-blue-grey-600">600</button>
+                <button class="btn btn-material-blue-grey-700">700</button>
+                <button class="btn btn-material-blue-grey-800">800</button>
+                <button class="btn btn-material-blue-grey-900">900</button>
+        </div>
         </div>
             <div class="well page" id="button">
               <h1 class="header">Button</h1>
@@ -699,6 +1059,7 @@
                 <button class="btn btn-default btn-flat"><i class="mdi-navigation-close"></i> Cancel</button>
               </div>
 
+
               <style>
                 #button h2 {
                   padding: 14px;
@@ -912,7 +1273,7 @@
             </div>
           </div>
           <div class="col-xs-2">
-            <button class="btn btn-fab btn-material-lightgrey" id="opensource"><i class="mdi-action-open-in-new"></i></button></div>
+            <button class="btn btn-fab btn-material-grey-200" id="opensource"><i class="mdi-action-open-in-new"></i></button></div>
         </div>
       </div>
     </div>

less/_buttons.less

@@ -18,10 +18,10 @@
     transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     outline: none !important;
 
-    .variations(~":not(.btn-link):not(.btn-flat)", background-color, @btn-default);
-
     .variations(~".btn-flat:not(.btn-link)", color, @lightbg-text);
 
+	.background-variations(~":not(.btn-link):not(.btn-flat)", @btn-default);
+
     &.btn-flat {
         background: none;
         box-shadow: none;

less/_colors.less

@@ -317,6 +317,10 @@ Then, run this script to get the list.
 @brown-700: #5d4037;
 @brown-800: #4e342e;
 @brown-900: #3e2723;
+@brown-A100: #d7ccc8;
+@brown-A200: #bcaaa4;
+@brown-A400: #8d6e63;
+@brown-A700: #5d4037;
 @brown: @brown-500;
 
 
@@ -330,6 +334,10 @@ Then, run this script to get the list.
 @grey-700: #616161;
 @grey-800: #424242;
 @grey-900: #212121;
+@grey-A100: #f5f5f5;
+@grey-A200: #eeeeee;
+@grey-A400: #bdbdbd;
+@grey-A700: #616161;
 @grey: @grey-500;
 
 
@@ -343,6 +351,10 @@ Then, run this script to get the list.
 @blue-grey-700: #455a64;
 @blue-grey-800: #37474f;
 @blue-grey-900: #263238;
+@blue-grey-A100: #cfd8dc;
+@blue-grey-A200: #b0bec5;
+@blue-grey-A400: #78909c;
+@blue-grey-A700: #455a64;
 @blue-grey: @blue-grey-500;
 
 

less/_mixins.less

@@ -1,5 +1,6 @@
 // usage: .variations(~" .check", color, transparent);
 .variations(@extra, @property, @default) {
+
     // Bootstrap shades
     &@{extra}, &-default@{extra} {
         @{property}: @default;
@@ -19,6 +20,54 @@
     &-danger@{extra} {
         @{property}: @danger;
     }
+
+
+  .variations-factory(@material-color) {
+    .variations-factory-deep(@material-color-number) {
+
+      &-material-@{material-color}@{material-color-number}@{extra} {
+        @final-color: "@{material-color}@{material-color-number}";
+        		@{property}: @@final-color;
+      }
+
+    }
+    .variations-factory-deep(~"");
+    .variations-factory-deep(~"-50");
+    .variations-factory-deep(~"-100");
+    .variations-factory-deep(~"-200");
+    .variations-factory-deep(~"-300");
+    .variations-factory-deep(~"-400");
+    .variations-factory-deep(~"-500");
+    .variations-factory-deep(~"-600");
+    .variations-factory-deep(~"-700");
+    .variations-factory-deep(~"-800");
+    .variations-factory-deep(~"-900");
+    .variations-factory-deep(~"-A100");
+    .variations-factory-deep(~"-A200");
+    .variations-factory-deep(~"-A400");
+    .variations-factory-deep(~"-A700");
+  }
+  .variations-factory(~"red");
+  .variations-factory(~"pink");
+  .variations-factory(~"purple");
+  .variations-factory(~"deep-purple");
+  .variations-factory(~"indigo");
+  .variations-factory(~"blue");
+  .variations-factory(~"light-blue");
+  .variations-factory(~"cyan");
+  .variations-factory(~"teal");
+  .variations-factory(~"green");
+  .variations-factory(~"light-green");
+  .variations-factory(~"lime");
+  .variations-factory(~"yellow");
+  .variations-factory(~"amber");
+  .variations-factory(~"orange");
+  .variations-factory(~"deep-orange");
+  .variations-factory(~"brown");
+  .variations-factory(~"grey");
+  .variations-factory(~"blue-grey");
+
+  /*
     // Material shades
     &-material-red@{extra} {
         @{property}: @red;
@@ -74,6 +123,170 @@
     &-material-lightgrey@{extra} {
         @{property}: @lightgrey;
     }
+  */
+}
+
+.background-variations(@extra, @default) {
+
+  @contrast-factor: 40%;
+
+  .set-background-and-font-color(@bg-color) {
+    background-color: @bg-color;
+    color: contrast(@bg-color, @lightbg-text, @darkbg-text, @contrast-factor);
+  }
+
+  // bootstrap styles
+    &@{extra}, &-default@{extra} {
+    .set-background-and-font-color(@default);
+    }
+    &-primary@{extra} {
+    .set-background-and-font-color(@primary);
+    }
+    &-success@{extra} {
+    .set-background-and-font-color(@success);
+    }
+    &-info@{extra} {
+    .set-background-and-font-color(@info);
+    }
+    &-warning@{extra} {
+    .set-background-and-font-color(@warning);
+    }
+    &-danger@{extra} {
+    .set-background-and-font-color(@danger);
+    }
+
+  // given a color build multiples dephs
+  .background-variations-factory(@material-color) {
+
+    // given a color and its deph build css
+    .background-variations-factory-deep(@material-color-number) {
+
+      &-material-@{material-color}@{material-color-number}@{extra} {
+        @final-background-color: "@{material-color}@{material-color-number}";
+        .set-background-and-font-color(@@final-background-color);
+      }
+
+    }
+
+    .background-variations-factory-deep(~"");
+    .background-variations-factory-deep(~"-50");
+    .background-variations-factory-deep(~"-100");
+    .background-variations-factory-deep(~"-200");
+    .background-variations-factory-deep(~"-300");
+    .background-variations-factory-deep(~"-400");
+    .background-variations-factory-deep(~"-500");
+    .background-variations-factory-deep(~"-600");
+    .background-variations-factory-deep(~"-700");
+    .background-variations-factory-deep(~"-800");
+    .background-variations-factory-deep(~"-900");
+    .background-variations-factory-deep(~"-A100");
+    .background-variations-factory-deep(~"-A200");
+    .background-variations-factory-deep(~"-A400");
+    .background-variations-factory-deep(~"-A700");
+  }
+
+  .background-variations-factory(~"red");
+  .background-variations-factory(~"pink");
+  .background-variations-factory(~"purple");
+  .background-variations-factory(~"deep-purple");
+  .background-variations-factory(~"indigo");
+  .background-variations-factory(~"blue");
+  .background-variations-factory(~"light-blue");
+  .background-variations-factory(~"cyan");
+  .background-variations-factory(~"teal");
+  .background-variations-factory(~"green");
+  .background-variations-factory(~"light-green");
+  .background-variations-factory(~"lime");
+  .background-variations-factory(~"yellow");
+  .background-variations-factory(~"amber");
+  .background-variations-factory(~"orange");
+  .background-variations-factory(~"deep-orange");
+  .background-variations-factory(~"brown");
+  .background-variations-factory(~"grey");
+  .background-variations-factory(~"blue-grey");
+
+
+}
+
+.text-variations(@extra, @default) {
+
+  @contrast-factor: 40%;
+
+  .set-font-color(@bg-color) {
+    color: contrast(@bg-color, @lightbg-text, @darkbg-text, @contrast-factor);
+  }
+
+  // bootstrap styles
+    &@{extra}, &-default@{extra} {
+    .set-font-color(@default);
+    }
+    &-primary@{extra} {
+    .set-font-color(@primary);
+    }
+    &-success@{extra} {
+    .set-font-color(@success);
+    }
+    &-info@{extra} {
+    .set-font-color(@info);
+    }
+    &-warning@{extra} {
+    .set-font-color(@warning);
+    }
+    &-danger@{extra} {
+    .set-font-color(@danger);
+    }
+
+  // given a color build multiples dephs
+  .background-variations-factory(@material-color) {
+
+    // given a color and its deph build css
+    .background-variations-factory-deep(@material-color-number) {
+
+      &-material-@{material-color}@{material-color-number}@{extra} {
+        @final-background-color: "@{material-color}@{material-color-number}";
+        .set-font-color(@@final-background-color);
+      }
+
+    }
+
+    .background-variations-factory-deep(~"");
+    .background-variations-factory-deep(~"-50");
+    .background-variations-factory-deep(~"-100");
+    .background-variations-factory-deep(~"-200");
+    .background-variations-factory-deep(~"-300");
+    .background-variations-factory-deep(~"-400");
+    .background-variations-factory-deep(~"-500");
+    .background-variations-factory-deep(~"-600");
+    .background-variations-factory-deep(~"-700");
+    .background-variations-factory-deep(~"-800");
+    .background-variations-factory-deep(~"-900");
+    .background-variations-factory-deep(~"-A100");
+    .background-variations-factory-deep(~"-A200");
+    .background-variations-factory-deep(~"-A400");
+    .background-variations-factory-deep(~"-A700");
+  }
+
+  .background-variations-factory(~"red");
+  .background-variations-factory(~"pink");
+  .background-variations-factory(~"purple");
+  .background-variations-factory(~"deep-purple");
+  .background-variations-factory(~"indigo");
+  .background-variations-factory(~"blue");
+  .background-variations-factory(~"light-blue");
+  .background-variations-factory(~"cyan");
+  .background-variations-factory(~"teal");
+  .background-variations-factory(~"green");
+  .background-variations-factory(~"light-green");
+  .background-variations-factory(~"lime");
+  .background-variations-factory(~"yellow");
+  .background-variations-factory(~"amber");
+  .background-variations-factory(~"orange");
+  .background-variations-factory(~"deep-orange");
+  .background-variations-factory(~"brown");
+  .background-variations-factory(~"grey");
+  .background-variations-factory(~"blue-grey");
+
+
 }
 
 @all-variations: ~"-default, -primary, -info, -success, -warning, -danger";

less/_navbar.less

@@ -1,5 +1,5 @@
 .navbar {
-    background-color: @navbar-default-bg;
+  background-color: @primary;
   border: 0;
   border-radius: 0;
 
@@ -7,59 +7,61 @@
     position: relative;
     height: 60px;
     line-height: 30px;
-        color: @navbar-brand-color;
+    color: inherit;
     &:hover,
     &:focus {
-            color: @navbar-brand-color;
+      color: inherit;
       background-color: transparent;
     }
   }
 
   .navbar-text {
-        color: @navbar-color;
+    color: inherit;
     margin-top: 20px;
     margin-bottom: 20px;
   }
 
   .navbar-nav {
     > li > a {
-            color: @navbar-link-color;
+      color: inherit;
       padding-top: 20px;
       padding-bottom: 20px;
 
       &:hover,
       &:focus {
-                color: @navbar-link-hover-color;
+        color: inherit;
-                background-color: @navbar-link-hover-bg;
+        background-color: transparent;
       }
     }
     > .active > a {
       &,
       &:hover,
       &:focus {
-                color: @navbar-link-active-color;
+        color: inherit;
-                background-color: @navbar-link-active-bg;
+        background-color: rgba(255, 255, 255, 0.1);
       }
     }
     > .disabled > a {
       &,
       &:hover,
       &:focus {
-                color: @navbar-link-disabled-color;
+        color: inherit;
-                background-color: @navbar-link-disabled-bg;
+        background-color: transparent;
+        opacity: 0.9;
       }
     }
   }
 
   // Darken the responsive nav toggle
   .navbar-toggle {
-        border-color: transparent;
+    border: 0;
     &:hover,
     &:focus {
-            background-color: @navbar-toggle-hover-bg;
+      background-color: transparent;
     }
     .icon-bar {
-            background-color: @navbar-toggle-icon-bar-bg;
+      background-color: inherit;
+      border: 1px solid;
     }
   }
 
@@ -79,8 +81,8 @@
       &,
       &:hover,
       &:focus {
-                background-color: @navbar-link-active-bg;
+        background-color: transparent;
-                color: @navbar-link-active-color;
+        color: inherit;
       }
     }
 
@@ -89,33 +91,34 @@
       .open .dropdown-menu {
         > .dropdown-header {
           border: 0;
-                    color: darken(@navbar-link-color, 17%)
+          color: inherit;
         }
         .divider {
-                    background-color: @navbar-border;
+          border-bottom: 1px solid;
+          opacity: 0.08;
         }
         > li > a {
-                    color: @navbar-link-color;
+          color: inherit;
           &:hover,
           &:focus {
-                        color: @navbar-link-hover-color;
+            color: inherit;
-                        background-color: @navbar-link-hover-bg;
+            background-color: transparent;
           }
         }
         > .active > a {
           &,
           &:hover,
           &:focus {
-                        color: @navbar-link-active-color;
+            color: inherit;
-                        background-color: @navbar-link-active-bg;
+            background-color: transparent;
           }
         }
         > .disabled > a {
           &,
           &:hover,
           &:focus {
-                        color: @navbar-link-disabled-color;
+            color: inherit;
-                        background-color: @navbar-link-disabled-bg;
+            background-color: transparent;
           }
         }
       }
@@ -123,23 +126,23 @@
   }
 
   .navbar-link {
-        color: @navbar-link-color;
+    color: inherit;
     &:hover {
-            color: @navbar-link-hover-color;
+      color: inherit;
     }
   }
 
   .btn-link {
-        color: @navbar-link-color;
+    color: inherit;
     &:hover,
     &:focus {
-            color: @navbar-link-hover-color;
+      color: inherit;
     }
     &[disabled],
     fieldset[disabled] & {
       &:hover,
       &:focus {
-                color: @navbar-link-disabled-color;
+        color: inherit;
       }
     }
   }
@@ -147,53 +150,50 @@
   .navbar-form {
     margin-top: 16px;
     .form-control-wrapper .form-control, .form-control {
-            border-color: @navbar-border;
+      border-color: inherit;
-            color: @navbar-border;
+      color: inherit;
     }
     .form-control-wrapper {
       .material-input:before, input:focus ~ .material-input:after {
-                background-color: @navbar-border;
+        background-color: inherit;
       }
     }
-        ::-webkit-input-placeholder { color: @navbar-border; }
-        :-moz-placeholder { color: @navbar-border; };
-        ::-moz-placeholder { color: @navbar-border; };
-        :-ms-input-placeholder { color: @navbar-border; };
   }
+  .background-variations(~"", @primary);
+  .text-variations(~" .form-control::placeholder", @primary);
 
-    .variations(~"", background-color, @primary);
   &-inverse {
-        background-color: @navbar-inverse-bg;
+    background-color: @indigo;
   }
   &-material-white {
     background-color: #FFF;
     .navbar-brand, .navbar-brand:hover, .navbar-brand:focus {
-            color: @lightbg-text;
+      color: inherit;
     }
     .navbar-nav {
       & > li > a {
-                color: @lightbg-text;
+        color: inherit;
 
         &:hover,
         &:focus {
-                    color: @lightbg-text;
+          color: inherit;
-                    background-color: @navbar-link-hover-bg;
+          background-color: transparent;
         }
       }
       & > .active > a {
         &,
         &:hover,
         &:focus {
-                    color: @lightbg-text;
+          color: inherit;
-                    background-color: @navbar-link-active-bg;
+          background-color: transparent;
         }
       }
       & > .disabled > a {
         &,
         &:hover,
         &:focus {
-                    color: @lightbg-text;
+          color: inherit;
-                    background-color: @navbar-link-disabled-bg;
+          background-color: transparent;
         }
       }
 
@@ -201,8 +201,8 @@
         &,
         &:hover,
         &:focus {
-                    background-color: @navbar-link-active-bg;
+          background-color: transparent;
-                    color: @lightbg-text;
+          color: inherit;
         }
       }
 

less/_tabs.less

@@ -1,5 +1,5 @@
 .nav-tabs {
-    background: @navbar-default-bg;
+    background: @primary;
     > li {
         > a {
             color: #FFFFFF;

less/_variables.less

@@ -69,26 +69,6 @@
 @input-success: @success;
 @input-info:    @info;
 
-@navbar-danger-bg: @danger;
-@navbar-inverse-bg: #5264AE;
-@navbar-warning-bg: @warning;
-@navbar-success-bg: @success;
-@navbar-info-bg:    @info;
-@navbar-default-bg: @primary;
-@navbar-color: @darkbg-text;
-@navbar-link-color: @darkbg-text;
-@navbar-link-hover-color: @darkbg-text;
-@navbar-link-hover-bg: transparent;
-@navbar-link-active-color: @darkbg-text;
-@navbar-link-active-bg: rgba(0,0,0,0.05);
-@navbar-link-disabled-color: #E5E5E5;
-@navbar-link-disabled-bg: transparent;
-@navbar-brand-color: @darkbg-text;
-@navbar-toggle-border-color: @darkbg-text;
-@navbar-toggle-hover-bg: transparent;
-@navbar-toggle-icon-bar-bg: @darkbg-text;
-@navbar-border: @darkbg-text;
-
 @alert-success: @success;
 @alert-info: @info;
 @alert-warning: @warning;

less/material.less

@@ -1,4 +1,5 @@
 @import "_variables.less";
+@import "_colors.less";
 @import "_mixins.less";
 @import "_icons-material-design.less";
 @import "_shadows.less";