@flourish/ui-styles 3.1.0 → 5.0.0

package/RELEASE_NOTES.md

@@ -1,3 +1,10 @@
+# 5.0.0
+* Change default background button color to black [BREAKING]
+* Ignore layout background color if not enabled
+
+# 4.0.0
+* Move slider width setting from @flourish/ui-styles to @flourish/controls [BREAKING] For use with version 8.0.0+ of @flourish/controls
+
 # 3.1.0
 * Add support for right-to-left read direction to button border radius styles
 * Update @flourish/pocket-knife to v1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flourish/ui-styles",
-  "version": "3.1.0",
+  "version": "5.0.0",
   "description": "Flourish module for styling UI elements",
   "main": "ui-styles.js",
   "module": "src/index.js",
@@ -19,12 +19,12 @@
   },
   "devDependencies": {
     "@flourish/eslint-plugin-flourish": "^0.7.2",
-    "eslint": "^5.16.0",
-    "husky": "^1.3.1",
-    "lint-staged": "^8.1.3",
-    "rollup": "^1.1.2",
-    "rollup-plugin-node-resolve": "^4.0.0",
-    "uglify-js": "^3.4.9"
+    "eslint": "^8.34.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.1.2",
+    "rollup": "^2.79.1",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "uglify-js": "^3.17.4"
   },
   "repository": {
     "type": "git",

package/slider-style/settings.yml

@@ -19,12 +19,6 @@
   width: quarter
   optional: true
   show_if: play_button
-- property: width
-  name: Slider width
-  type: number
-  min: 0
-  max: 100
-  width: quarter
 - property: track_height
   name: Track height
   type: number

package/src/button-style/index.js

@@ -5,7 +5,7 @@ var DEFAULTS = Object.freeze({
 	background: null,
 	font_color: null,
 
-	background_selected: "#2886b2",
+	background_selected: "#333333",
 	font_color_selected: "#ffffff",
 
 	background_hover: null,
@@ -39,7 +39,7 @@ ButtonStyle.prototype._createStylesheet = function() {
 ButtonStyle.prototype.update = function() {
 	this._styles.clear();
 
-	var background_color = this._state.background || this._layout.background_color || "#ffffff";
+	var background_color = this._state.background || (this._layout.background_color_enabled ? this._layout.background_color || "#ffffff" : "#ffffff");
 	var text_color = this._state.font_color || this._layout.font_color || "#333333";
 	var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
 	var read_direction = getTextDirection();

package/src/dropdown-style/index.js

@@ -34,7 +34,7 @@ DropdownStyle.prototype._createStylesheet = function() {
 DropdownStyle.prototype.update = function() {
 	this._styles.clear();
 
-	var background_color = this._state.background || this._layout.background_color || "#ffffff";
+	var background_color = this._state.background || (this._layout.background_color_enabled ? this._layout.background_color || "#ffffff" : "#ffffff");
 	var text_color = this._state.font_color || this._layout.font_color || "#333333";
 	var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
 

package/src/slider-style/index.js

@@ -2,7 +2,6 @@ import { remToPx } from "../lib/remToPx";
 import Stylesheet from "../lib/js2css";
 
 var DEFAULTS = Object.freeze({
-	width: 15,
 	play_color: null,
 	handle_color: null,
 	font_color: null,
@@ -43,7 +42,6 @@ SliderStyle.prototype.update = function() {
 	var handle_color = this._state.handle_color || this._layout.font_color || "currentColor";
 	var play_color = this._state.play_color || this._layout.font_color || "currentColor";
 
-	var slider_width = Math.round(remToPx(this._state.width));
 	var handle_radius = Math.round(remToPx(this._state.handle_height));
 	var track_height = remToPx(this._state.track_height);
 
@@ -62,7 +60,6 @@ SliderStyle.prototype.update = function() {
 
 	this._styles.select(this._selector + " input[type=range]")
 		.style("-webkit-appearance", "none")
-		.style("width", slider_width + "px")
 		.style("color", slider_color)
 		.style("background-color", "transparent");
 

package/ui-styles.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
 	typeof define === 'function' && define.amd ? define(['exports'], factory) :
-	(global = global || self, factory(global['ui-styles'] = {}));
-}(this, (function (exports) { 'use strict';
+	(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["ui-styles"] = {}));
+})(this, (function (exports) { 'use strict';
 
 	function Stylesheet() {
 		this.declarations = [];
@@ -11,7 +11,7 @@
 
 	Stylesheet.prototype.select = function(selector) {
 		if (!selector) return this;
-		var declaration = new Declaration(selector, this);
+		var declaration = new Declaration(selector);
 		declaration.parent = this;
 		this.addDeclaration(declaration);
 
@@ -56,7 +56,7 @@
 		return this.parent.select(this.selector + " " + selector);
 	};
 
-	var DEFAULTS = Object.freeze({
+	var DEFAULTS$3 = Object.freeze({
 		font_size: 1,
 		font_weight: "bold",
 		height: 2
@@ -64,7 +64,7 @@
 
 	function GeneralControlsStyle(state_, selector_, layout_) {
 		this._state = state_;
-		for (var key in DEFAULTS) {	if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
+		for (var key in DEFAULTS$3) {	if (this._state[key] === undefined) this._state[key] = DEFAULTS$3[key]; }
 
 		this._layout = layout_ || {};
 
@@ -502,179 +502,6 @@
 	      : m1) * 255;
 	}
 
-	var deg2rad = Math.PI / 180;
-	var rad2deg = 180 / Math.PI;
-
-	// https://observablehq.com/@mbostock/lab-and-rgb
-	var K = 18,
-	    Xn = 0.96422,
-	    Yn = 1,
-	    Zn = 0.82521,
-	    t0 = 4 / 29,
-	    t1 = 6 / 29,
-	    t2 = 3 * t1 * t1,
-	    t3 = t1 * t1 * t1;
-
-	function labConvert(o) {
-	  if (o instanceof Lab) return new Lab(o.l, o.a, o.b, o.opacity);
-	  if (o instanceof Hcl) return hcl2lab(o);
-	  if (!(o instanceof Rgb)) o = rgbConvert(o);
-	  var r = rgb2lrgb(o.r),
-	      g = rgb2lrgb(o.g),
-	      b = rgb2lrgb(o.b),
-	      y = xyz2lab((0.2225045 * r + 0.7168786 * g + 0.0606169 * b) / Yn), x, z;
-	  if (r === g && g === b) x = z = y; else {
-	    x = xyz2lab((0.4360747 * r + 0.3850649 * g + 0.1430804 * b) / Xn);
-	    z = xyz2lab((0.0139322 * r + 0.0971045 * g + 0.7141733 * b) / Zn);
-	  }
-	  return new Lab(116 * y - 16, 500 * (x - y), 200 * (y - z), o.opacity);
-	}
-
-	function lab(l, a, b, opacity) {
-	  return arguments.length === 1 ? labConvert(l) : new Lab(l, a, b, opacity == null ? 1 : opacity);
-	}
-
-	function Lab(l, a, b, opacity) {
-	  this.l = +l;
-	  this.a = +a;
-	  this.b = +b;
-	  this.opacity = +opacity;
-	}
-
-	define(Lab, lab, extend(Color, {
-	  brighter: function(k) {
-	    return new Lab(this.l + K * (k == null ? 1 : k), this.a, this.b, this.opacity);
-	  },
-	  darker: function(k) {
-	    return new Lab(this.l - K * (k == null ? 1 : k), this.a, this.b, this.opacity);
-	  },
-	  rgb: function() {
-	    var y = (this.l + 16) / 116,
-	        x = isNaN(this.a) ? y : y + this.a / 500,
-	        z = isNaN(this.b) ? y : y - this.b / 200;
-	    x = Xn * lab2xyz(x);
-	    y = Yn * lab2xyz(y);
-	    z = Zn * lab2xyz(z);
-	    return new Rgb(
-	      lrgb2rgb( 3.1338561 * x - 1.6168667 * y - 0.4906146 * z),
-	      lrgb2rgb(-0.9787684 * x + 1.9161415 * y + 0.0334540 * z),
-	      lrgb2rgb( 0.0719453 * x - 0.2289914 * y + 1.4052427 * z),
-	      this.opacity
-	    );
-	  }
-	}));
-
-	function xyz2lab(t) {
-	  return t > t3 ? Math.pow(t, 1 / 3) : t / t2 + t0;
-	}
-
-	function lab2xyz(t) {
-	  return t > t1 ? t * t * t : t2 * (t - t0);
-	}
-
-	function lrgb2rgb(x) {
-	  return 255 * (x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055);
-	}
-
-	function rgb2lrgb(x) {
-	  return (x /= 255) <= 0.04045 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4);
-	}
-
-	function hclConvert(o) {
-	  if (o instanceof Hcl) return new Hcl(o.h, o.c, o.l, o.opacity);
-	  if (!(o instanceof Lab)) o = labConvert(o);
-	  if (o.a === 0 && o.b === 0) return new Hcl(NaN, 0 < o.l && o.l < 100 ? 0 : NaN, o.l, o.opacity);
-	  var h = Math.atan2(o.b, o.a) * rad2deg;
-	  return new Hcl(h < 0 ? h + 360 : h, Math.sqrt(o.a * o.a + o.b * o.b), o.l, o.opacity);
-	}
-
-	function hcl(h, c, l, opacity) {
-	  return arguments.length === 1 ? hclConvert(h) : new Hcl(h, c, l, opacity == null ? 1 : opacity);
-	}
-
-	function Hcl(h, c, l, opacity) {
-	  this.h = +h;
-	  this.c = +c;
-	  this.l = +l;
-	  this.opacity = +opacity;
-	}
-
-	function hcl2lab(o) {
-	  if (isNaN(o.h)) return new Lab(o.l, 0, 0, o.opacity);
-	  var h = o.h * deg2rad;
-	  return new Lab(o.l, Math.cos(h) * o.c, Math.sin(h) * o.c, o.opacity);
-	}
-
-	define(Hcl, hcl, extend(Color, {
-	  brighter: function(k) {
-	    return new Hcl(this.h, this.c, this.l + K * (k == null ? 1 : k), this.opacity);
-	  },
-	  darker: function(k) {
-	    return new Hcl(this.h, this.c, this.l - K * (k == null ? 1 : k), this.opacity);
-	  },
-	  rgb: function() {
-	    return hcl2lab(this).rgb();
-	  }
-	}));
-
-	var A = -0.14861,
-	    B = +1.78277,
-	    C = -0.29227,
-	    D = -0.90649,
-	    E = +1.97294,
-	    ED = E * D,
-	    EB = E * B,
-	    BC_DA = B * C - D * A;
-
-	function cubehelixConvert(o) {
-	  if (o instanceof Cubehelix) return new Cubehelix(o.h, o.s, o.l, o.opacity);
-	  if (!(o instanceof Rgb)) o = rgbConvert(o);
-	  var r = o.r / 255,
-	      g = o.g / 255,
-	      b = o.b / 255,
-	      l = (BC_DA * b + ED * r - EB * g) / (BC_DA + ED - EB),
-	      bl = b - l,
-	      k = (E * (g - l) - C * bl) / D,
-	      s = Math.sqrt(k * k + bl * bl) / (E * l * (1 - l)), // NaN if l=0 or l=1
-	      h = s ? Math.atan2(k, bl) * rad2deg - 120 : NaN;
-	  return new Cubehelix(h < 0 ? h + 360 : h, s, l, o.opacity);
-	}
-
-	function cubehelix(h, s, l, opacity) {
-	  return arguments.length === 1 ? cubehelixConvert(h) : new Cubehelix(h, s, l, opacity == null ? 1 : opacity);
-	}
-
-	function Cubehelix(h, s, l, opacity) {
-	  this.h = +h;
-	  this.s = +s;
-	  this.l = +l;
-	  this.opacity = +opacity;
-	}
-
-	define(Cubehelix, cubehelix, extend(Color, {
-	  brighter: function(k) {
-	    k = k == null ? brighter : Math.pow(brighter, k);
-	    return new Cubehelix(this.h, this.s, this.l * k, this.opacity);
-	  },
-	  darker: function(k) {
-	    k = k == null ? darker : Math.pow(darker, k);
-	    return new Cubehelix(this.h, this.s, this.l * k, this.opacity);
-	  },
-	  rgb: function() {
-	    var h = isNaN(this.h) ? 0 : (this.h + 120) * deg2rad,
-	        l = +this.l,
-	        a = isNaN(this.s) ? 0 : this.s * l * (1 - l),
-	        cosh = Math.cos(h),
-	        sinh = Math.sin(h);
-	    return new Rgb(
-	      255 * (l + a * (A * cosh + B * sinh)),
-	      255 * (l + a * (C * cosh + D * sinh)),
-	      255 * (l + a * (E * cosh)),
-	      this.opacity
-	    );
-	  }
-	}));
-
 	var prefix = "$";
 
 	function Map() {}
@@ -753,7 +580,7 @@
 
 	var proto = map.prototype;
 
-	Set.prototype = set.prototype = {
+	Set.prototype = {
 	  constructor: Set,
 	  has: proto.has,
 	  add: function(value) {
@@ -769,33 +596,8 @@
 	  each: proto.each
 	};
 
-	function set(object, f) {
-	  var set = new Set;
-
-	  // Copy constructor.
-	  if (object instanceof Set) object.each(function(value) { set.add(value); });
-
-	  // Otherwise, assume it’s an array.
-	  else if (object) {
-	    var i = -1, n = object.length;
-	    if (f == null) while (++i < n) set.add(object[i]);
-	    else while (++i < n) set.add(f(object[i], i, object));
-	  }
-
-	  return set;
-	}
-
-	var getTextDimensions = (function() {
-		var context = document.createElement("canvas").getContext("2d");
-		return function(text, font) {
-			context.font = font || "10px sans-serif";
-			var metrics = context.measureText(text);
-			return {
-				width: metrics.width,
-				height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent
-			};
-		};
-	})();
+	var canvas = document.createElement("canvas");
+	canvas.getContext("2d");
 
 	function getTextDirection() {
 		return window.getComputedStyle(document.body).direction || "ltr";
@@ -814,11 +616,11 @@
 		return c ? c.toString() : false;
 	}
 
-	var DEFAULTS$1 = Object.freeze({
+	var DEFAULTS$2 = Object.freeze({
 		background: null,
 		font_color: null,
 
-		background_selected: "#2886b2",
+		background_selected: "#333333",
 		font_color_selected: "#ffffff",
 
 		background_hover: null,
@@ -832,7 +634,7 @@
 
 	function ButtonStyle(state_, selector_, layout_) {
 		this._state = state_;
-		for (var key in DEFAULTS$1) {	if (this._state[key] === undefined) this._state[key] = DEFAULTS$1[key]; }
+		for (var key in DEFAULTS$2) {	if (this._state[key] === undefined) this._state[key] = DEFAULTS$2[key]; }
 
 		this._layout = layout_ || {};
 
@@ -852,7 +654,7 @@
 	ButtonStyle.prototype.update = function() {
 		this._styles.clear();
 
-		var background_color = this._state.background || this._layout.background_color || "#ffffff";
+		var background_color = this._state.background || (this._layout.background_color_enabled ? this._layout.background_color || "#ffffff" : "#ffffff");
 		var text_color = this._state.font_color || this._layout.font_color || "#333333";
 		var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
 		var read_direction = getTextDirection();
@@ -899,7 +701,7 @@
 		this._stylesheet.innerHTML = this._styles.print();
 	};
 
-	var DEFAULTS$2 = Object.freeze({
+	var DEFAULTS$1 = Object.freeze({
 		background: null,
 		font_color: null,
 
@@ -912,7 +714,7 @@
 
 	function DropdownStyle(state_, selector_, layout_) {
 		this._state = state_;
-		for (var key in DEFAULTS$2) {	if (this._state[key] === undefined) this._state[key] = DEFAULTS$2[key]; }
+		for (var key in DEFAULTS$1) {	if (this._state[key] === undefined) this._state[key] = DEFAULTS$1[key]; }
 
 		this._layout = layout_ || {};
 
@@ -932,7 +734,7 @@
 	DropdownStyle.prototype.update = function() {
 		this._styles.clear();
 
-		var background_color = this._state.background || this._layout.background_color || "#ffffff";
+		var background_color = this._state.background || (this._layout.background_color_enabled ? this._layout.background_color || "#ffffff" : "#ffffff");
 		var text_color = this._state.font_color || this._layout.font_color || "#333333";
 		var border_color = hexToRgba(this._state.border_color || text_color, this._state.border_transparency);
 
@@ -1009,8 +811,7 @@
 		return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 	}
 
-	var DEFAULTS$3 = Object.freeze({
-		width: 15,
+	var DEFAULTS = Object.freeze({
 		play_color: null,
 		handle_color: null,
 		font_color: null,
@@ -1025,7 +826,7 @@
 
 	function SliderStyle(state_, selector_, layout_) {
 		this._state = state_;
-		for (var key in DEFAULTS$3) {	if (this._state[key] === undefined) this._state[key] = DEFAULTS$3[key]; }
+		for (var key in DEFAULTS) {	if (this._state[key] === undefined) this._state[key] = DEFAULTS[key]; }
 
 		this._layout = layout_ || {};
 
@@ -1051,7 +852,6 @@
 		var handle_color = this._state.handle_color || this._layout.font_color || "currentColor";
 		var play_color = this._state.play_color || this._layout.font_color || "currentColor";
 
-		var slider_width = Math.round(remToPx(this._state.width));
 		var handle_radius = Math.round(remToPx(this._state.handle_height));
 		var track_height = remToPx(this._state.track_height);
 
@@ -1070,7 +870,6 @@
 
 		this._styles.select(this._selector + " input[type=range]")
 			.style("-webkit-appearance", "none")
-			.style("width", slider_width + "px")
 			.style("color", slider_color)
 			.style("background-color", "transparent");
 
@@ -1130,4 +929,4 @@
 
 	Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));