material colors aproximation

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>
@@ -670,6 +671,81 @@
               </style>
 
             </div>
+            <div class="well page" id="material-colors">
+              <h1 class="header">Material Color Samples</h1>
+			  <div class="sample1">
+                <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><br><br>
+                <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><br><br>
+                <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><br><br>
+                <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><br><br>
+                <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>
             <div class="well page" id="button">
               <h1 class="header">Button</h1>
               <div class="sample1">
@@ -698,6 +774,7 @@
                 <button class="btn btn-primary btn-flat"><i class="mdi-navigation-check"></i> Ok</button>
                 <button class="btn btn-default btn-flat"><i class="mdi-navigation-close"></i> Cancel</button>
               </div>
+              
 
               <style>
                 #button h2 {

less/_buttons.less

@@ -21,7 +21,16 @@
     .variations(~":not(.btn-link):not(.btn-flat)", background-color, @btn-default);
 
     .variations(~".btn-flat:not(.btn-link)", color, @lightbg-text);
-
+	/*
+	.background-variations(@extra) {
+		&-material-test {
+			background-color: blue !important;
+			color:  red !important;
+		}
+	}*/
+	.background-variations(~":not(.btn-link):not(.btn-flat)");
+	.background-variations(~".btn-flat:not(.btn-link)");
+	
     &.btn-flat {
         background: none;
         box-shadow: none;

less/_mixins.less

@@ -76,4 +76,37 @@
     }
 }
 
+.background-variations(@extra) {
+	.background-variations-factory(@material-color) {
+		.background-variations-factory-deep(@material-color-number) {
+			&-material-@{material-color}@{material-color-number}@{extra} {
+				@final-background-color: "@{material-color}@{material-color-number}";
+				background-color: @@final-background-color;
+				color: contrast(@@final-background-color, @lightbg-text, @darkbg-text, 25%);
+			}
+		}
+		.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(~"lime");
+	.background-variations-factory(~"red");
+	.background-variations-factory(~"pink");
+	.background-variations-factory(~"deep-purple");
+	.background-variations-factory(~"deep-orange");
+	.background-variations-factory(~"orange");
+}
+
 @all-variations: ~"-default, -primary, -info, -success, -warning, -danger";

less/material.less

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