Merging

README.md

@@ -1,9 +1,9 @@
 # Material-Color
 
-Additional color classes for Bootstrap 3.  Based on the [Material Design palette](https://material.io/guidelines/style/color.html#color-color-palette).
+Additional color classes for Bootstrap 4.  Based on the [Material Design palette](https://material.io/guidelines/style/color.html#color-color-palette).
 
 ## Notes:
 * Link this CSS after you link to Bootstrap.css.
 * Use the included color classes instead of .btn-primary, .alert-danger, etc.
-* Navbars need both the .navbar-inverse (or .navbar-default for lighter colors, try both and see which works for you) and .navbar-[color] classes to appear properly.
-* We recommend using [Bootswatch Paper](http://bootswatch.com/paper/) (a material design Bootstrap theme) with this stylesheet.  We don't test or support it on other themes, actually.
+* Navbars need .navbar-dark or .navbar-light to appear properly, choose according to your colors.
+* We recommend using [Bootswatch Materia](https://bootswatch.com/materia/) (a material design Bootstrap theme) with this stylesheet.

generate.php

@@ -0,0 +1,136 @@
+<?php
+$use_variables = false;
+
+$classes = [
+	"alert" => ["background-color" => "m", "color" => "t!"],
+	"alert .alert-link" => ["color" => "t!"],
+	"alert .alert-heading" => ["color" => "t!"],
+	"badge" => ["background-color" => "m", "color" => "t"], 
+	"btn" => ["background-color" => "m", "color" => "t"],
+	"bg" => ["background-color" => "m"],
+	"list-group-item" => ["background-color" => "m", "color" => "t"],
+	"border" => ["border-color" => "m", "border-width" => "1px"],
+	"text" => ["color" => "m"]
+];
+
+$colors = [
+	"red" => "#f44336",
+	"pink" => "#e91e63",
+	"purple" => "#9c27b0",
+	"deep-purple" => "#673ab7",
+	"indigo" => "#3f51b5",
+	"blue" => "#2196f3",
+	"light-blue" => "#03a9f4",
+	"cyan" => "#00bcd4",
+	"teal" => "#009688",
+	"green" => "#4caf50",
+	"light-green" => "#8bc34a",
+	"lime" => "#cddc39",
+	"yellow" => "#ffeb3b",
+	"amber" => "#ffc107",
+	"orange" => "#ff9800",
+	"deep-orange" => "#ff5722",
+	"brown" => "#795548",
+	"grey" => "#9e9e9e",
+	"blue-grey" => "#607d8b"
+];
+
+$texts = [
+	"red" => "white",
+	"pink" => "white",
+	"purple" => "white",
+	"deep-purple" => "white",
+	"indigo" => "white",
+	"blue" => "white",
+	"light-blue" => "black",
+	"cyan" => "black",
+	"teal" => "white",
+	"green" => "white",
+	"light-green" => "black",
+	"lime" => "black",
+	"yellow" => "black",
+	"amber" => "black",
+	"orange" => "black",
+	"deep-orange" => "white",
+	"brown" => "white",
+	"grey" => "black",
+	"blue-grey" => "white"
+];
+
+
+/* License header */
+$year = date('Y');
+echo <<<END
+/* Material-Color.css
+ * Copyright (c) $year Netsyms Technologies
+ * MIT License
+ * https://source.netsyms.com/Netsyms/Material-Color
+ */
+
+END;
+
+/* Make CSS variables */
+if ($use_variables) {
+	echo ":root {\n";
+	foreach ($colors as $k => $v) {
+		if (strpos($k, "text-") !== FALSE) {
+			continue;
+		}
+		echo "\t--material-color-$k: $v;\n";
+	}
+	echo "}\n\n";
+}
+
+/* The fun bit */
+foreach ($classes as $c => $props) {
+	foreach ($colors as $k => $v) {
+		$t = $texts[$k];
+		// Save a few bytes
+		if ($t == "white") {
+			$t = "#fff";
+		} else if ($t == "black") {
+			$t = "#000";
+		}
+		
+		// Color setup
+		if ($use_variables) {
+			$m = "var(--material-color-$k)";
+		} else {
+			$m = $v;
+		}
+
+		// Class
+		if (strpos($c, " ") !== FALSE) {
+			$classes = explode(" ", $c);
+			foreach ($classes as $cl) {
+				if (strpos($cl, ".") === 0) {
+					echo "$cl ";
+				} else {
+					echo ".$cl-$k ";
+				}
+			}
+			echo "{\n";
+		} else {
+			echo ".$c-$k {\n";
+		}
+		
+		foreach ($props as $prop => $val) {
+			echo "\t$prop: ";
+			if (strpos($val, "m") === 0) {
+				echo $m;
+			} else if (strpos($val, "t") === 0) {
+				echo $t;
+			} else {
+				echo $val;
+			}
+			if (strpos($val, "!") === 1) {
+				echo " !important";
+			}
+			echo ";\n";
+		}
+		
+		// Finish it off		
+		echo "}\n";
+	}
+}
+?>