luci-base: firewall.js: add getZoneColorStyle() helper

The getZoneColorStyle() function will produce CSS style properties that
describe the color value of the zone. The color declaration is divided
into a CSS variable called `--zone-color-rgb` which holds the RGB value
of the color and a `background-color` property assigning these values
as background property.

This allows themes to override the color with derived values, e.g. by
applying an alpha channel.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>

modules/luci-base/htdocs/luci-static/resources/firewall.js

@@ -224,7 +224,17 @@ Firewall = L.Class.extend({
 		}, this));
 	},
 
-	getColorForName: getColorForName
+	getColorForName: getColorForName,
+
+	getZoneColorStyle: function(zone) {
+		var hex = (zone instanceof Zone) ? zone.getColor() : getColorForName((zone != null && zone != '*') ? zone : null);
+
+		return '--zone-color-rgb:%d, %d, %d; background-color:rgb(var(--zone-color-rgb))'.format(
+			parseInt(hex.substring(1, 3), 16),
+			parseInt(hex.substring(3, 5), 16),
+			parseInt(hex.substring(5, 7), 16)
+		);
+	},
 });