@flourish/ui-styles 4.0.0 → 5.0.1

package/.eslintrc.json

@@ -1,7 +1,3 @@
 {
-    "plugins": [
-        "@flourish/flourish"
-    ],
-    "extends": "plugin:@flourish/flourish/flourish",
-    "env": { "browser": true }
-}
+    "extends": "../../.eslintrc.cjs"
+}

package/LICENSE

@@ -0,0 +1,26 @@
+# Flourish Component License v1.1
+
+Use of code and documentation (“Software”) released under the Flourish Component License v1.1 (“Licence”) is subject to the following terms. If you intend to use the Software on behalf of a company or other entity, you represent that you have the appropriate authority to bind such company or other entity to this Licence. By accessing or otherwise using the Software, you are agreeing to be bound by the terms of this Licence. If you do not agree to these terms, please do not use the Software and remove it from your computer. This Licence is governed by English law and was last updated on 29 August 2022.
+
+## Licence and restrictions
+The Software was created by and is owned by Canva UK Operations Ltd (we, us or our). Subject to the terms and conditions in this License, we grant you a revocable, non-exclusive, non-transferable, royalty-free licence to install the Software for the sole purpose of creating digital visualisation templates (“Templates”) to upload to our online platform, Flourish.
+
+Without written permission from us, Templates or other works created with or incorporating the Software (or any part of it) may not be incorporated into any other online tool or platform, or sold or sub-licensed, or used for any other purpose.
+
+You may distribute the Software, provided that you only distribute complete un-modified copies and include a copy of this license and any copyright, patent, trade mark and attribution notices incorporated into the Software in all distributions.
+
+You agree that you are solely responsible for (and that we have no responsibility to you or to any third party for) any data, content, or resources that you create, transmit or display through Software, and for the consequences of your actions (including any loss or damage which we may suffer) by doing so.
+
+## Intellectual property
+Nothing in this Licence shall cause the ownership of any intellectual property rights of either party to be transferred to the other. As between the parties, all intellectual property rights in the Software belong to us. Except as expressly provided by this Agreement, you shall not acquire any right, title or interest in the intellectual property rights in the Software (or any part of it). All our intellectual property rights and other rights which are not expressly granted to you by this Agreement are reserved by us.
+
+## Our liability
+The Software is provided on an “as is” basis. Except as expressly set out in this Licence and subject only to the below, no implied conditions, warranties or other terms, including any implied terms relating to satisfactory quality or fitness for any purpose, will apply to the Software (or any part of it) or to anything supplied or provided by us under this Licence.
+
+We do not warrant or represent that the Software (or any part of it) will operate continuously without error or be entirely free of bugs, viruses or other contaminants or will be suitable for your purposes.
+
+Nothing in these terms and conditions shall limit or exclude our liability to you: (a) for death or personal injury caused by our negligence; (b) for fraudulent misrepresentation; (c) for breach of any term implied by the Consumer Rights Act 2015 and which, by law, may not be limited or excluded; or (d) for any other liability that, by law, may not be limited or excluded.
+
+In no event shall we be liable to you for any indirect or consequential losses, or for any loss of profit, revenue, contracts, data, goodwill or other similar losses, and any liability we do have for losses you suffer arising from any use of the Software shall not exceed £500.
+
+We will not be liable or responsible for any failure to perform, or delay in performance of, any of our obligations under this Licence that is caused by events outside our reasonable control.

package/RELEASE_NOTES.md

@@ -1,3 +1,10 @@
+# 5.0.1
+* Fix license annotation
+
+# 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
 

package/package.json

@@ -1,41 +1,30 @@
 {
   "name": "@flourish/ui-styles",
-  "version": "4.0.0",
+  "version": "5.0.1",
+  "private": false,
   "description": "Flourish module for styling UI elements",
   "main": "ui-styles.js",
   "module": "src/index.js",
-  "scripts": {
-    "lint": "eslint src",
-    "build": "rollup -c",
-    "prepare": "npm run build && npm run minify",
-    "minify": "uglifyjs -m -o ui-styles.min.js ui-styles.js",
-    "precommit": "lint-staged"
-  },
   "author": "Kiln Enterprises Ltd",
-  "license": "https://flourish.studio/terms/fcl/",
+  "license": "LicenseRef-LICENSE",
   "dependencies": {
     "@flourish/pocket-knife": "^1.0.0",
     "d3-selection": "^1.4.0"
   },
   "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.35.0",
+    "rollup": "3",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "uglify-js": "^3.17.4"
   },
   "repository": {
     "type": "git",
     "url": "git://github.com/kiln/flourish-ui-styles.git"
   },
-  "lint-staged": {
-    "*.js": "npm run lint --"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+  "scripts": {
+    "lint": "eslint src",
+    "build": "rollup -c",
+    "minify": "uglifyjs -m -o ui-styles.min.js ui-styles.js"
   }
-}
+}

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/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,7 +811,7 @@
 		return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
 	}
 
-	var DEFAULTS$3 = Object.freeze({
+	var DEFAULTS = Object.freeze({
 		play_color: null,
 		handle_color: null,
 		font_color: null,
@@ -1024,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_ || {};
 
@@ -1125,6 +927,4 @@
 	exports.createGeneralControlsStyle = createGeneralControlsStyle;
 	exports.createSliderStyle = createSliderStyle;
 
-	Object.defineProperty(exports, '__esModule', { value: true });
-
-})));
+}));