@flourish/ui-styles 0.0.1 → 0.0.2

package/button-style/settings.yml

@@ -25,6 +25,11 @@
   type: color
   width: quarter
   show_if: button_styles_advanced
+- property: border_transparency
+  name: Transparency
+  type: number
+  width: quarter
+  show_if: button_styles_advanced
 - property: border_width
   name: Width
   type: number

package/dropdown-style/settings.yml

@@ -27,6 +27,12 @@
   show_if: border_styles_advanced
 - property: border_color
   name: Color
+  type: color
+  width: quarter
+  min: 0
+  show_if: border_styles_advanced
+- property: border_transparency
+  name: Transparency
   type: number
   width: quarter
   min: 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flourish/ui-styles",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Flourish module for styling UI elements",
   "main": "ui-styles.js",
   "module": "src/index.js",
@@ -14,6 +14,7 @@
   "author": "Kiln Enterprises Ltd",
   "license": "UNLICENSED",
   "dependencies": {
+    "@flourish/pocket-knife": "^0.5.0",
     "d3-selection": "^1.4.0"
   },
   "devDependencies": {

package/src/button-style/index.js

@@ -1,3 +1,4 @@
+import { hexToRgba } from "@flourish/pocket-knife";
 import Stylesheet from "../lib/js2css";
 
 var DEFAULTS = Object.freeze({
@@ -8,7 +9,8 @@ var DEFAULTS = Object.freeze({
 	font_color_selected: "#ffffff",
 
 	border_width: 1,
-	border_color: "0.25",
+	border_transparency: 0.25,
+	border_color: "#000000",
 	border_radius: 3
 });
 
@@ -31,6 +33,8 @@ ButtonStyle.prototype._createStylesheet = function() {
 ButtonStyle.prototype.update = function() {
 	this._styles.clear();
 
+	var border_color = hexToRgba(this._state.border_color, this._state.border_transparency);
+
 	this._styles.select(this._selector + ".hidden")
 		.style("display", "none");
 
@@ -44,7 +48,7 @@ ButtonStyle.prototype.update = function() {
 		.style("margin", "0 2px 0 0")
 		.style("background-color", this._state.background)
 		.style("color", this._state.font_color)
-		.style("border", this._state.border_width + "px solid rgba(0,0,0," + this._state.border_color + ")")
+		.style("border", this._state.border_width + "px solid " + border_color)
 		.style("border-radius", this._state.border_radius + "px");
 
 	this._styles.select(this._selector + " .button.selected")
@@ -61,7 +65,7 @@ ButtonStyle.prototype.update = function() {
 
 	this._styles.select(this._selector + ".grouped .button:last-child")
 		.style("border-radius", "0 " + this._state.border_radius + "px " + this._state.border_radius + "px 0")
-		.style("border-right", this._state.border_width + "px solid rgba(0,0,0," + this._state.border_color + ")");
+		.style("border-right", this._state.border_width + "px solid " + border_color);
 
 	this._styles.select(this._selector + ".grouped.fixed-width:not(.hidden)")
 		.style("display", "table")

package/src/dropdown-style/index.js

@@ -1,12 +1,14 @@
+import { hexToRgba } from "@flourish/pocket-knife";
 import Stylesheet from "../lib/js2css";
 
 var DEFAULTS = Object.freeze({
 	background: "#ffffff",
 	font_color: "#333333",
 
-	border_style: "all",
+	border_style: "bottom",
 	border_width: 1,
-	border_color: "0.25",
+	border_color: "#000000",
+	border_transparency: 0.25,
 	border_radius: 3
 });
 
@@ -29,6 +31,8 @@ DropdownStyle.prototype._createStylesheet = function() {
 DropdownStyle.prototype.update = function() {
 	this._styles.clear();
 
+	var border_color = hexToRgba(this._state.border_color, this._state.border_transparency);
+
 	this._styles.select(this._selector + " .heading")
 		.style("margin-bottom", "0.4em");
 
@@ -40,25 +44,29 @@ DropdownStyle.prototype.update = function() {
 		.style("cursor", "pointer")
 		.style("overflow", "hidden")
 		.style("white-space", "nowrap")
+		.style("position", "relative")
 		.style("background-color", this._state.background)
 		.style("color", this._state.font_color)
-		.style("border", this._state.border_style == "bottom" ? null : this._state.border_width + "px solid rgba(0,0,0," + this._state.border_color + ")")
-		.style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid rgba(0,0,0," + this._state.border_color + ")" : null)
+		.style("border", this._state.border_style == "bottom" ? null : this._state.border_width + "px solid " + border_color)
+		.style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
 		.style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
 
-	this._styles.select(this._selector + " .main .symbol div")
+	this._styles.select(this._selector + " .main .symbol")
+		.style("float", "right")
+		.select("div")
 		.style("border-top-color", this._state.font_color + " !important");
 
 	this._styles.select(this._selector + " .main .current")
 		.style("line-height", "1em")
 		.style("height", "100%")
-		.style("width", "100%")
+		.style("max-width", "88%")
 		.style("display", "inline-block")
+		.style("overflow", "hidden")
 		.style("padding", "0.2em 0 0")
 		.style("vertical-align", "top");
 
 	this._styles.select(this._selector + " .list")
-		.style("border", this._state.border_width + "px solid rgba(0,0,0," + this._state.border_color + ")")
+		.style("border", this._state.border_width + "px solid " + border_color)
 		.style("background-color", this._state.background)
 		.style("position", "absolute")
 		.style("top", "2px")
@@ -72,6 +80,7 @@ DropdownStyle.prototype.update = function() {
 		.select(".list-item")
 		.style("line-height", "1em")
 		.style("cursor", "pointer")
+		.style("font-weight", "normal")
 		.style("color", this._state.font_color);
 
 	this._styles.select(this._selector + ".open .list")
@@ -86,6 +95,12 @@ DropdownStyle.prototype.update = function() {
 		.style("opacity", "1")
 		.style("cursor", "default");
 
+	if (this._state.border_style == "bottom") {
+		this._styles.select(this._selector + " .main")
+			.style("padding-left", 0)
+			.style("padding-right", "0.1rem");
+	}
+
 
 	this._stylesheet.innerHTML = this._styles.print();
 };

package/src/general-controls-style/index.js

@@ -37,10 +37,10 @@ GeneralControlsStyle.prototype.update = function() {
 		.style("padding", this._state.padding + "rem");
 
 	this._styles.select(this._selector + " .list-item")
-		.style("padding", this._state.padding + "rem");
+		.style("padding", Math.max(this._state.padding, 0.5) + "rem");
 
 	this._styles.select(this._selector + "-dropdown .main")
-		.style("padding", this._state.padding + "rem");
+		.style("padding", this._state.padding + "rem " + (this._state.padding * 1.5) + "rem");
 
 	// Some additional styling for slider controls
 	// TODO: should move this somewhere else at some point

package/ui-styles.js

@@ -93,10 +93,10 @@
 			.style("padding", this._state.padding + "rem");
 
 		this._styles.select(this._selector + " .list-item")
-			.style("padding", this._state.padding + "rem");
+			.style("padding", Math.max(this._state.padding, 0.5) + "rem");
 
 		this._styles.select(this._selector + "-dropdown .main")
-			.style("padding", this._state.padding + "rem");
+			.style("padding", this._state.padding + "rem " + (this._state.padding * 1.5) + "rem");
 
 		// Some additional styling for slider controls
 		// TODO: should move this somewhere else at some point
@@ -104,6 +104,582 @@
 		this._stylesheet.innerHTML = this._styles.print();
 	};
 
+	function define(constructor, factory, prototype) {
+	  constructor.prototype = factory.prototype = prototype;
+	  prototype.constructor = constructor;
+	}
+
+	function extend(parent, definition) {
+	  var prototype = Object.create(parent.prototype);
+	  for (var key in definition) prototype[key] = definition[key];
+	  return prototype;
+	}
+
+	function Color() {}
+
+	var darker = 0.7;
+	var brighter = 1 / darker;
+
+	var reI = "\\s*([+-]?\\d+)\\s*",
+	    reN = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",
+	    reP = "\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",
+	    reHex = /^#([0-9a-f]{3,8})$/,
+	    reRgbInteger = new RegExp("^rgb\\(" + [reI, reI, reI] + "\\)$"),
+	    reRgbPercent = new RegExp("^rgb\\(" + [reP, reP, reP] + "\\)$"),
+	    reRgbaInteger = new RegExp("^rgba\\(" + [reI, reI, reI, reN] + "\\)$"),
+	    reRgbaPercent = new RegExp("^rgba\\(" + [reP, reP, reP, reN] + "\\)$"),
+	    reHslPercent = new RegExp("^hsl\\(" + [reN, reP, reP] + "\\)$"),
+	    reHslaPercent = new RegExp("^hsla\\(" + [reN, reP, reP, reN] + "\\)$");
+
+	var named = {
+	  aliceblue: 0xf0f8ff,
+	  antiquewhite: 0xfaebd7,
+	  aqua: 0x00ffff,
+	  aquamarine: 0x7fffd4,
+	  azure: 0xf0ffff,
+	  beige: 0xf5f5dc,
+	  bisque: 0xffe4c4,
+	  black: 0x000000,
+	  blanchedalmond: 0xffebcd,
+	  blue: 0x0000ff,
+	  blueviolet: 0x8a2be2,
+	  brown: 0xa52a2a,
+	  burlywood: 0xdeb887,
+	  cadetblue: 0x5f9ea0,
+	  chartreuse: 0x7fff00,
+	  chocolate: 0xd2691e,
+	  coral: 0xff7f50,
+	  cornflowerblue: 0x6495ed,
+	  cornsilk: 0xfff8dc,
+	  crimson: 0xdc143c,
+	  cyan: 0x00ffff,
+	  darkblue: 0x00008b,
+	  darkcyan: 0x008b8b,
+	  darkgoldenrod: 0xb8860b,
+	  darkgray: 0xa9a9a9,
+	  darkgreen: 0x006400,
+	  darkgrey: 0xa9a9a9,
+	  darkkhaki: 0xbdb76b,
+	  darkmagenta: 0x8b008b,
+	  darkolivegreen: 0x556b2f,
+	  darkorange: 0xff8c00,
+	  darkorchid: 0x9932cc,
+	  darkred: 0x8b0000,
+	  darksalmon: 0xe9967a,
+	  darkseagreen: 0x8fbc8f,
+	  darkslateblue: 0x483d8b,
+	  darkslategray: 0x2f4f4f,
+	  darkslategrey: 0x2f4f4f,
+	  darkturquoise: 0x00ced1,
+	  darkviolet: 0x9400d3,
+	  deeppink: 0xff1493,
+	  deepskyblue: 0x00bfff,
+	  dimgray: 0x696969,
+	  dimgrey: 0x696969,
+	  dodgerblue: 0x1e90ff,
+	  firebrick: 0xb22222,
+	  floralwhite: 0xfffaf0,
+	  forestgreen: 0x228b22,
+	  fuchsia: 0xff00ff,
+	  gainsboro: 0xdcdcdc,
+	  ghostwhite: 0xf8f8ff,
+	  gold: 0xffd700,
+	  goldenrod: 0xdaa520,
+	  gray: 0x808080,
+	  green: 0x008000,
+	  greenyellow: 0xadff2f,
+	  grey: 0x808080,
+	  honeydew: 0xf0fff0,
+	  hotpink: 0xff69b4,
+	  indianred: 0xcd5c5c,
+	  indigo: 0x4b0082,
+	  ivory: 0xfffff0,
+	  khaki: 0xf0e68c,
+	  lavender: 0xe6e6fa,
+	  lavenderblush: 0xfff0f5,
+	  lawngreen: 0x7cfc00,
+	  lemonchiffon: 0xfffacd,
+	  lightblue: 0xadd8e6,
+	  lightcoral: 0xf08080,
+	  lightcyan: 0xe0ffff,
+	  lightgoldenrodyellow: 0xfafad2,
+	  lightgray: 0xd3d3d3,
+	  lightgreen: 0x90ee90,
+	  lightgrey: 0xd3d3d3,
+	  lightpink: 0xffb6c1,
+	  lightsalmon: 0xffa07a,
+	  lightseagreen: 0x20b2aa,
+	  lightskyblue: 0x87cefa,
+	  lightslategray: 0x778899,
+	  lightslategrey: 0x778899,
+	  lightsteelblue: 0xb0c4de,
+	  lightyellow: 0xffffe0,
+	  lime: 0x00ff00,
+	  limegreen: 0x32cd32,
+	  linen: 0xfaf0e6,
+	  magenta: 0xff00ff,
+	  maroon: 0x800000,
+	  mediumaquamarine: 0x66cdaa,
+	  mediumblue: 0x0000cd,
+	  mediumorchid: 0xba55d3,
+	  mediumpurple: 0x9370db,
+	  mediumseagreen: 0x3cb371,
+	  mediumslateblue: 0x7b68ee,
+	  mediumspringgreen: 0x00fa9a,
+	  mediumturquoise: 0x48d1cc,
+	  mediumvioletred: 0xc71585,
+	  midnightblue: 0x191970,
+	  mintcream: 0xf5fffa,
+	  mistyrose: 0xffe4e1,
+	  moccasin: 0xffe4b5,
+	  navajowhite: 0xffdead,
+	  navy: 0x000080,
+	  oldlace: 0xfdf5e6,
+	  olive: 0x808000,
+	  olivedrab: 0x6b8e23,
+	  orange: 0xffa500,
+	  orangered: 0xff4500,
+	  orchid: 0xda70d6,
+	  palegoldenrod: 0xeee8aa,
+	  palegreen: 0x98fb98,
+	  paleturquoise: 0xafeeee,
+	  palevioletred: 0xdb7093,
+	  papayawhip: 0xffefd5,
+	  peachpuff: 0xffdab9,
+	  peru: 0xcd853f,
+	  pink: 0xffc0cb,
+	  plum: 0xdda0dd,
+	  powderblue: 0xb0e0e6,
+	  purple: 0x800080,
+	  rebeccapurple: 0x663399,
+	  red: 0xff0000,
+	  rosybrown: 0xbc8f8f,
+	  royalblue: 0x4169e1,
+	  saddlebrown: 0x8b4513,
+	  salmon: 0xfa8072,
+	  sandybrown: 0xf4a460,
+	  seagreen: 0x2e8b57,
+	  seashell: 0xfff5ee,
+	  sienna: 0xa0522d,
+	  silver: 0xc0c0c0,
+	  skyblue: 0x87ceeb,
+	  slateblue: 0x6a5acd,
+	  slategray: 0x708090,
+	  slategrey: 0x708090,
+	  snow: 0xfffafa,
+	  springgreen: 0x00ff7f,
+	  steelblue: 0x4682b4,
+	  tan: 0xd2b48c,
+	  teal: 0x008080,
+	  thistle: 0xd8bfd8,
+	  tomato: 0xff6347,
+	  turquoise: 0x40e0d0,
+	  violet: 0xee82ee,
+	  wheat: 0xf5deb3,
+	  white: 0xffffff,
+	  whitesmoke: 0xf5f5f5,
+	  yellow: 0xffff00,
+	  yellowgreen: 0x9acd32
+	};
+
+	define(Color, color, {
+	  copy: function(channels) {
+	    return Object.assign(new this.constructor, this, channels);
+	  },
+	  displayable: function() {
+	    return this.rgb().displayable();
+	  },
+	  hex: color_formatHex, // Deprecated! Use color.formatHex.
+	  formatHex: color_formatHex,
+	  formatHsl: color_formatHsl,
+	  formatRgb: color_formatRgb,
+	  toString: color_formatRgb
+	});
+
+	function color_formatHex() {
+	  return this.rgb().formatHex();
+	}
+
+	function color_formatHsl() {
+	  return hslConvert(this).formatHsl();
+	}
+
+	function color_formatRgb() {
+	  return this.rgb().formatRgb();
+	}
+
+	function color(format) {
+	  var m, l;
+	  format = (format + "").trim().toLowerCase();
+	  return (m = reHex.exec(format)) ? (l = m[1].length, m = parseInt(m[1], 16), l === 6 ? rgbn(m) // #ff0000
+	      : l === 3 ? new Rgb((m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), ((m & 0xf) << 4) | (m & 0xf), 1) // #f00
+	      : l === 8 ? new Rgb(m >> 24 & 0xff, m >> 16 & 0xff, m >> 8 & 0xff, (m & 0xff) / 0xff) // #ff000000
+	      : l === 4 ? new Rgb((m >> 12 & 0xf) | (m >> 8 & 0xf0), (m >> 8 & 0xf) | (m >> 4 & 0xf0), (m >> 4 & 0xf) | (m & 0xf0), (((m & 0xf) << 4) | (m & 0xf)) / 0xff) // #f000
+	      : null) // invalid hex
+	      : (m = reRgbInteger.exec(format)) ? new Rgb(m[1], m[2], m[3], 1) // rgb(255, 0, 0)
+	      : (m = reRgbPercent.exec(format)) ? new Rgb(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, 1) // rgb(100%, 0%, 0%)
+	      : (m = reRgbaInteger.exec(format)) ? rgba(m[1], m[2], m[3], m[4]) // rgba(255, 0, 0, 1)
+	      : (m = reRgbaPercent.exec(format)) ? rgba(m[1] * 255 / 100, m[2] * 255 / 100, m[3] * 255 / 100, m[4]) // rgb(100%, 0%, 0%, 1)
+	      : (m = reHslPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, 1) // hsl(120, 50%, 50%)
+	      : (m = reHslaPercent.exec(format)) ? hsla(m[1], m[2] / 100, m[3] / 100, m[4]) // hsla(120, 50%, 50%, 1)
+	      : named.hasOwnProperty(format) ? rgbn(named[format]) // eslint-disable-line no-prototype-builtins
+	      : format === "transparent" ? new Rgb(NaN, NaN, NaN, 0)
+	      : null;
+	}
+
+	function rgbn(n) {
+	  return new Rgb(n >> 16 & 0xff, n >> 8 & 0xff, n & 0xff, 1);
+	}
+
+	function rgba(r, g, b, a) {
+	  if (a <= 0) r = g = b = NaN;
+	  return new Rgb(r, g, b, a);
+	}
+
+	function rgbConvert(o) {
+	  if (!(o instanceof Color)) o = color(o);
+	  if (!o) return new Rgb;
+	  o = o.rgb();
+	  return new Rgb(o.r, o.g, o.b, o.opacity);
+	}
+
+	function rgb(r, g, b, opacity) {
+	  return arguments.length === 1 ? rgbConvert(r) : new Rgb(r, g, b, opacity == null ? 1 : opacity);
+	}
+
+	function Rgb(r, g, b, opacity) {
+	  this.r = +r;
+	  this.g = +g;
+	  this.b = +b;
+	  this.opacity = +opacity;
+	}
+
+	define(Rgb, rgb, extend(Color, {
+	  brighter: function(k) {
+	    k = k == null ? brighter : Math.pow(brighter, k);
+	    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+	  },
+	  darker: function(k) {
+	    k = k == null ? darker : Math.pow(darker, k);
+	    return new Rgb(this.r * k, this.g * k, this.b * k, this.opacity);
+	  },
+	  rgb: function() {
+	    return this;
+	  },
+	  displayable: function() {
+	    return (-0.5 <= this.r && this.r < 255.5)
+	        && (-0.5 <= this.g && this.g < 255.5)
+	        && (-0.5 <= this.b && this.b < 255.5)
+	        && (0 <= this.opacity && this.opacity <= 1);
+	  },
+	  hex: rgb_formatHex, // Deprecated! Use color.formatHex.
+	  formatHex: rgb_formatHex,
+	  formatRgb: rgb_formatRgb,
+	  toString: rgb_formatRgb
+	}));
+
+	function rgb_formatHex() {
+	  return "#" + hex(this.r) + hex(this.g) + hex(this.b);
+	}
+
+	function rgb_formatRgb() {
+	  var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
+	  return (a === 1 ? "rgb(" : "rgba(")
+	      + Math.max(0, Math.min(255, Math.round(this.r) || 0)) + ", "
+	      + Math.max(0, Math.min(255, Math.round(this.g) || 0)) + ", "
+	      + Math.max(0, Math.min(255, Math.round(this.b) || 0))
+	      + (a === 1 ? ")" : ", " + a + ")");
+	}
+
+	function hex(value) {
+	  value = Math.max(0, Math.min(255, Math.round(value) || 0));
+	  return (value < 16 ? "0" : "") + value.toString(16);
+	}
+
+	function hsla(h, s, l, a) {
+	  if (a <= 0) h = s = l = NaN;
+	  else if (l <= 0 || l >= 1) h = s = NaN;
+	  else if (s <= 0) h = NaN;
+	  return new Hsl(h, s, l, a);
+	}
+
+	function hslConvert(o) {
+	  if (o instanceof Hsl) return new Hsl(o.h, o.s, o.l, o.opacity);
+	  if (!(o instanceof Color)) o = color(o);
+	  if (!o) return new Hsl;
+	  if (o instanceof Hsl) return o;
+	  o = o.rgb();
+	  var r = o.r / 255,
+	      g = o.g / 255,
+	      b = o.b / 255,
+	      min = Math.min(r, g, b),
+	      max = Math.max(r, g, b),
+	      h = NaN,
+	      s = max - min,
+	      l = (max + min) / 2;
+	  if (s) {
+	    if (r === max) h = (g - b) / s + (g < b) * 6;
+	    else if (g === max) h = (b - r) / s + 2;
+	    else h = (r - g) / s + 4;
+	    s /= l < 0.5 ? max + min : 2 - max - min;
+	    h *= 60;
+	  } else {
+	    s = l > 0 && l < 1 ? 0 : h;
+	  }
+	  return new Hsl(h, s, l, o.opacity);
+	}
+
+	function hsl(h, s, l, opacity) {
+	  return arguments.length === 1 ? hslConvert(h) : new Hsl(h, s, l, opacity == null ? 1 : opacity);
+	}
+
+	function Hsl(h, s, l, opacity) {
+	  this.h = +h;
+	  this.s = +s;
+	  this.l = +l;
+	  this.opacity = +opacity;
+	}
+
+	define(Hsl, hsl, extend(Color, {
+	  brighter: function(k) {
+	    k = k == null ? brighter : Math.pow(brighter, k);
+	    return new Hsl(this.h, this.s, this.l * k, this.opacity);
+	  },
+	  darker: function(k) {
+	    k = k == null ? darker : Math.pow(darker, k);
+	    return new Hsl(this.h, this.s, this.l * k, this.opacity);
+	  },
+	  rgb: function() {
+	    var h = this.h % 360 + (this.h < 0) * 360,
+	        s = isNaN(h) || isNaN(this.s) ? 0 : this.s,
+	        l = this.l,
+	        m2 = l + (l < 0.5 ? l : 1 - l) * s,
+	        m1 = 2 * l - m2;
+	    return new Rgb(
+	      hsl2rgb(h >= 240 ? h - 240 : h + 120, m1, m2),
+	      hsl2rgb(h, m1, m2),
+	      hsl2rgb(h < 120 ? h + 240 : h - 120, m1, m2),
+	      this.opacity
+	    );
+	  },
+	  displayable: function() {
+	    return (0 <= this.s && this.s <= 1 || isNaN(this.s))
+	        && (0 <= this.l && this.l <= 1)
+	        && (0 <= this.opacity && this.opacity <= 1);
+	  },
+	  formatHsl: function() {
+	    var a = this.opacity; a = isNaN(a) ? 1 : Math.max(0, Math.min(1, a));
+	    return (a === 1 ? "hsl(" : "hsla(")
+	        + (this.h || 0) + ", "
+	        + (this.s || 0) * 100 + "%, "
+	        + (this.l || 0) * 100 + "%"
+	        + (a === 1 ? ")" : ", " + a + ")");
+	  }
+	}));
+
+	/* From FvD 13.37, CSS Color Module Level 3 */
+	function hsl2rgb(h, m1, m2) {
+	  return (h < 60 ? m1 + (m2 - m1) * h / 60
+	      : h < 180 ? m2
+	      : h < 240 ? m1 + (m2 - m1) * (240 - h) / 60
+	      : 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 getTextWidth = (function() {
+		var context = document.createElement("canvas").getContext("2d");
+		return function(text, font) {
+			context.font = font || "10px sans-serif";
+			var metrics = context.measureText(text);
+			return metrics.width;
+		};
+	})();
+
+	function hexToColor(hex_string, opacity) {
+		if (typeof hex_string != "string") return false;
+		var c = color(hex_string);
+		c.opacity = opacity !== undefined ? opacity : 1;
+		return c;
+	}
+
+	function hexToRgba(hex_string, opacity) {
+		var c = hexToColor(hex_string, opacity);
+
+		return c ? c.toString() : false;
+	}
+
 	var DEFAULTS$1 = Object.freeze({
 		background: "#ffffff",
 		background_selected: "#ff0033",
@@ -112,7 +688,8 @@
 		font_color_selected: "#ffffff",
 
 		border_width: 1,
-		border_color: "0.25",
+		border_transparency: 0.25,
+		border_color: "#000000",
 		border_radius: 3
 	});
 
@@ -135,6 +712,8 @@
 	ButtonStyle.prototype.update = function() {
 		this._styles.clear();
 
+		var border_color = hexToRgba(this._state.border_color, this._state.border_transparency);
+
 		this._styles.select(this._selector + ".hidden")
 			.style("display", "none");
 
@@ -148,7 +727,7 @@
 			.style("margin", "0 2px 0 0")
 			.style("background-color", this._state.background)
 			.style("color", this._state.font_color)
-			.style("border", this._state.border_width + "px solid rgba(0,0,0," + this._state.border_color + ")")
+			.style("border", this._state.border_width + "px solid " + border_color)
 			.style("border-radius", this._state.border_radius + "px");
 
 		this._styles.select(this._selector + " .button.selected")
@@ -165,7 +744,7 @@
 
 		this._styles.select(this._selector + ".grouped .button:last-child")
 			.style("border-radius", "0 " + this._state.border_radius + "px " + this._state.border_radius + "px 0")
-			.style("border-right", this._state.border_width + "px solid rgba(0,0,0," + this._state.border_color + ")");
+			.style("border-right", this._state.border_width + "px solid " + border_color);
 
 		this._styles.select(this._selector + ".grouped.fixed-width:not(.hidden)")
 			.style("display", "table")
@@ -181,9 +760,10 @@
 		background: "#ffffff",
 		font_color: "#333333",
 
-		border_style: "all",
+		border_style: "bottom",
 		border_width: 1,
-		border_color: "0.25",
+		border_color: "#000000",
+		border_transparency: 0.25,
 		border_radius: 3
 	});
 
@@ -206,6 +786,8 @@
 	DropdownStyle.prototype.update = function() {
 		this._styles.clear();
 
+		var border_color = hexToRgba(this._state.border_color, this._state.border_transparency);
+
 		this._styles.select(this._selector + " .heading")
 			.style("margin-bottom", "0.4em");
 
@@ -217,25 +799,29 @@
 			.style("cursor", "pointer")
 			.style("overflow", "hidden")
 			.style("white-space", "nowrap")
+			.style("position", "relative")
 			.style("background-color", this._state.background)
 			.style("color", this._state.font_color)
-			.style("border", this._state.border_style == "bottom" ? null : this._state.border_width + "px solid rgba(0,0,0," + this._state.border_color + ")")
-			.style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid rgba(0,0,0," + this._state.border_color + ")" : null)
+			.style("border", this._state.border_style == "bottom" ? null : this._state.border_width + "px solid " + border_color)
+			.style("border-bottom", this._state.border_style == "bottom" ? this._state.border_width + "px solid " + border_color : null)
 			.style("border-radius", this._state.border_style == "bottom" ? null : this._state.border_radius + "px");
 
-		this._styles.select(this._selector + " .main .symbol div")
+		this._styles.select(this._selector + " .main .symbol")
+			.style("float", "right")
+			.select("div")
 			.style("border-top-color", this._state.font_color + " !important");
 
 		this._styles.select(this._selector + " .main .current")
 			.style("line-height", "1em")
 			.style("height", "100%")
-			.style("width", "100%")
+			.style("max-width", "88%")
 			.style("display", "inline-block")
+			.style("overflow", "hidden")
 			.style("padding", "0.2em 0 0")
 			.style("vertical-align", "top");
 
 		this._styles.select(this._selector + " .list")
-			.style("border", this._state.border_width + "px solid rgba(0,0,0," + this._state.border_color + ")")
+			.style("border", this._state.border_width + "px solid " + border_color)
 			.style("background-color", this._state.background)
 			.style("position", "absolute")
 			.style("top", "2px")
@@ -249,6 +835,7 @@
 			.select(".list-item")
 			.style("line-height", "1em")
 			.style("cursor", "pointer")
+			.style("font-weight", "normal")
 			.style("color", this._state.font_color);
 
 		this._styles.select(this._selector + ".open .list")
@@ -263,6 +850,12 @@
 			.style("opacity", "1")
 			.style("cursor", "default");
 
+		if (this._state.border_style == "bottom") {
+			this._styles.select(this._selector + " .main")
+				.style("padding-left", 0)
+				.style("padding-right", "0.1rem");
+		}
+
 
 		this._stylesheet.innerHTML = this._styles.print();
 	};