@lrnwebcomponents/simple-colors - npm Package Compare versions

Comparing version 0.0.28 to 0.0.29

build/es5-amd/simple-colors.js

 define([
-  "exports",
-  "./node_modules/@polymer/polymer/polymer-element.js",
-  "./node_modules/@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js"
-], function(_exports, _polymerElement, _HAXWiring) {
+  "./node_modules/@polymer/polymer/polymer-legacy.js",
+  "./lib/simple-colors-utility.js"
+], function() {
   "use strict";
-  Object.defineProperty(_exports, "__esModule", { value: !0 });
-  _exports.SimpleColors = void 0;
-  function _templateObject_973ac6a0d70511e8a1d7f1fe34cfa022() {
-    var data = babelHelpers.taggedTemplateLiteral([
-      "\n<style>:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n</style>\n<slot></slot>"
-    ]);
-    _templateObject_973ac6a0d70511e8a1d7f1fe34cfa022 = function() {
-      return data;
-    };
-    return data;
-  }
-  var SimpleColors = (function(_PolymerElement) {
-    babelHelpers.inherits(SimpleColors, _PolymerElement);
-    function SimpleColors() {
-      babelHelpers.classCallCheck(this, SimpleColors);
-      return babelHelpers.possibleConstructorReturn(
-        this,
-        (SimpleColors.__proto__ || Object.getPrototypeOf(SimpleColors)).apply(
-          this,
-          arguments
-        )
-      );
-    }
-    babelHelpers.createClass(
-      SimpleColors,
-      [
-        {
-          key: "connectedCallback",
-          value: function connectedCallback() {
-            babelHelpers
-              .get(
-                SimpleColors.prototype.__proto__ ||
-                  Object.getPrototypeOf(SimpleColors.prototype),
-                "connectedCallback",
-                this
-              )
-              .call(this);
-            this.HAXWiring = new _HAXWiring.HAXWiring();
-            this.HAXWiring.setHaxProperties(
-              SimpleColors.haxProperties,
-              SimpleColors.tag,
-              this
-            );
+  window.simpleColorsBehaviors = window.simpleColorsBehaviors || {};
+  window.simpleColorsBehaviors = {
+    properties: {
+      accentColor: { type: String, value: null, reflectToAttribute: !0 },
+      dark: { type: Boolean, value: !1, reflectToAttribute: !0 },
+      __hexCodes: { type: Object, value: null },
+      __lightTheme: { type: Object, computed: "_getLightTheme(__hexCodes)" },
+      __darkTheme: { type: Object, computed: "_getDarkTheme(__hexCodes)" }
+    },
+    observers: ["setTheme(accentColor,dark,__hexCodes)"],
+    created: function created() {
+      window.SimpleColorsUtility.requestAvailability();
+      this.__wcagaa = {
+        greys: { small: [5, 5, 4, 4, 1], large: [5, 5, 5, 4, 2] },
+        colors: { small: [4, 3, 3, 1, 0], large: [5, 4, 3, 2, 1] }
+      };
+    },
+    ready: function ready() {
+      this.__hexCodes = window.SimpleColorsUtility.hexCodes;
+    },
+    setTheme: function setTheme(accentColor, dark, hexCodes) {
+      if (null !== hexCodes && "" !== hexCodes) {
+        if (null !== accentColor && "" !== accentColor) {
+          var prop = accentColor.replace(/-([a-z])/g, function(g) {
+            return g[1].toUpperCase();
+          });
+          if (this.__lightTheme.hasOwnProperty(prop)) {
+            this.__lightTheme.accent = this.__lightTheme[prop].slice();
+            this.__darkTheme.accent = this.__darkTheme[prop].slice();
+          } else {
+            this.__lightTheme.accent = this.__hexCodes.accent.slice();
+            this.__darkTheme.accent = this.__hexCodes.accent.slice().reverse();
           }
         }
-      ],
-      [
-        {
-          key: "template",
-          get: function get() {
-            return (0, _polymerElement.html)(
-              _templateObject_973ac6a0d70511e8a1d7f1fe34cfa022()
-            );
+        this._setThemeProps("--simple-colors-light-theme-", this.__lightTheme);
+        this._setThemeProps("--simple-colors-dark-theme-", this.__darkTheme);
+        if (dark) {
+          this._setThemeProps("--simple-colors-", this.__darkTheme);
+        } else {
+          this._setThemeProps("--simple-colors-", this.__lightTheme);
+        }
+      }
+    },
+    _setProps: function _setProps(prefix, colors) {
+      prefix = prefix
+        .replace("-grey", "")
+        .replace(/([a-z])([A-Z])/g, "$1-$2")
+        .toLowerCase();
+      for (var customStyle = {}, i = 0; i < colors.length; i++) {
+        var half = colors.length / 2,
+          suffix =
+            i < half
+              ? "-foreground" + (i + 1)
+              : "-background" + (colors.length - i);
+        if (null !== customStyle && null !== customStyle[prefix + suffix]) {
+          customStyle[prefix + suffix] = colors[i];
+        }
+      }
+      this.updateStyles(customStyle);
+    },
+    _setThemeProps: function _setThemeProps(themePrefix, theme) {
+      for (var property in theme) {
+        if (theme.hasOwnProperty(property)) {
+          this._setProps(themePrefix + property, theme[property]);
+        }
+      }
+    },
+    _getLightTheme: function _getLightTheme(hexCodes) {
+      this._setThemeProps("--simple-colors-", hexCodes);
+      this._setThemeProps("--simple-colors-light-theme-", hexCodes);
+      return hexCodes;
+    },
+    _getDarkTheme: function _getDarkTheme(hexCodes) {
+      var dark = {};
+      for (var property in hexCodes) {
+        if (hexCodes.hasOwnProperty(property)) {
+          dark[property] = hexCodes[property].slice().reverse();
+        }
+      }
+      this._setThemeProps("--simple-colors-dark-theme-", dark);
+      return dark;
+    },
+    getContrasts: function getContrasts(
+      theme,
+      isColor,
+      isForeground,
+      level,
+      isSmallText
+    ) {
+      isSmallText = isSmallText !== void 0 ? isSmallText : !0;
+      var results = [],
+        data = isColor ? this.__wcagaa.colors : this.__wcagaa.greys,
+        levels = data.small[level - 1];
+      if (!isSmallText) levels = data.large[level - 1];
+      for (var i = 0; i < levels; i++) {
+        var suffix = isForeground ? "-background" : "-foreground",
+          index =
+            (isForeground && "light" === theme) ||
+            (!isForeground && "dark" === theme)
+              ? i + 1
+              : levels - (i - 1);
+        if (!isColor) {
+          for (var property in this.__hexCodes) {
+            if ("colorLevels" !== property) {
+              var _color =
+                "grey" === property
+                  ? ""
+                  : "-" +
+                    property.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+              results.push({
+                variable:
+                  "--simple-colors-" +
+                  theme +
+                  "-theme" +
+                  _color +
+                  suffix +
+                  (i + 1),
+                hexCode: this.__hexCodes[property][index]
+              });
+            }
           }
-        },
-        {
-          key: "haxProperties",
-          get: function get() {
-            return {
-              canScale: !0,
-              canPosition: !0,
-              canEditSource: !1,
-              gizmo: {
-                title: "Simple colors",
-                description: "Automated conversion of simple-colors/",
-                icon: "icons:android",
-                color: "green",
-                groups: ["Colors"],
-                handles: [{ type: "todo:read-the-docs-for-usage" }],
-                meta: {
-                  author: "btopro",
-                  owner: "The Pennsylvania State University"
-                }
-              },
-              settings: { quick: [], configure: [], advanced: [] }
-            };
-          }
-        },
-        {
-          key: "properties",
-          get: function get() {
-            return {};
-          }
-        },
-        {
-          key: "tag",
-          get: function get() {
-            return "simple-colors";
-          }
+        } else {
+          results.push({
+            variable:
+              "--simple-colors-" + theme + "-theme" + color + suffix + (i + 1),
+            hexCode: this.__hexCodes[property][index]
+          });
         }
-      ]
-    );
-    return SimpleColors;
-  })(_polymerElement.PolymerElement);
-  _exports.SimpleColors = SimpleColors;
-  window.customElements.define(SimpleColors.tag, SimpleColors);
+      }
+      return results;
+    }
+  };
 });

build/es6/simple-colors.js

 import {
   html,
-  PolymerElement
-} from "./node_modules/@polymer/polymer/polymer-element.js";
-import { HAXWiring } from "./node_modules/@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";
-export { SimpleColors };
-class SimpleColors extends PolymerElement {
-  static get template() {
-    return html`
-<style>:host {
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
-</style>
-<slot></slot>`;
-  }
-  static get haxProperties() {
-    return {
-      canScale: !0,
-      canPosition: !0,
-      canEditSource: !1,
-      gizmo: {
-        title: "Simple colors",
-        description: "Automated conversion of simple-colors/",
-        icon: "icons:android",
-        color: "green",
-        groups: ["Colors"],
-        handles: [{ type: "todo:read-the-docs-for-usage" }],
-        meta: { author: "btopro", owner: "The Pennsylvania State University" }
-      },
-      settings: { quick: [], configure: [], advanced: [] }
+  Polymer
+} from "./node_modules/@polymer/polymer/polymer-legacy.js";
+import "./lib/simple-colors-utility.js";
+window.simpleColorsBehaviors = window.simpleColorsBehaviors || {};
+window.simpleColorsBehaviors = {
+  properties: {
+    accentColor: { type: String, value: null, reflectToAttribute: !0 },
+    dark: { type: Boolean, value: !1, reflectToAttribute: !0 },
+    __hexCodes: { type: Object, value: null },
+    __lightTheme: { type: Object, computed: "_getLightTheme(__hexCodes)" },
+    __darkTheme: { type: Object, computed: "_getDarkTheme(__hexCodes)" }
+  },
+  observers: ["setTheme(accentColor,dark,__hexCodes)"],
+  created: function() {
+    window.SimpleColorsUtility.requestAvailability();
+    this.__wcagaa = {
+      greys: { small: [5, 5, 4, 4, 1], large: [5, 5, 5, 4, 2] },
+      colors: { small: [4, 3, 3, 1, 0], large: [5, 4, 3, 2, 1] }
     };
+  },
+  ready: function() {
+    this.__hexCodes = window.SimpleColorsUtility.hexCodes;
+  },
+  setTheme: function(accentColor, dark, hexCodes) {
+    if (null !== hexCodes && "" !== hexCodes) {
+      if (null !== accentColor && "" !== accentColor) {
+        let prop = accentColor.replace(/-([a-z])/g, function(g) {
+          return g[1].toUpperCase();
+        });
+        if (this.__lightTheme.hasOwnProperty(prop)) {
+          this.__lightTheme.accent = this.__lightTheme[prop].slice();
+          this.__darkTheme.accent = this.__darkTheme[prop].slice();
+        } else {
+          this.__lightTheme.accent = this.__hexCodes.accent.slice();
+          this.__darkTheme.accent = this.__hexCodes.accent.slice().reverse();
+        }
+      }
+      this._setThemeProps("--simple-colors-light-theme-", this.__lightTheme);
+      this._setThemeProps("--simple-colors-dark-theme-", this.__darkTheme);
+      if (dark) {
+        this._setThemeProps("--simple-colors-", this.__darkTheme);
+      } else {
+        this._setThemeProps("--simple-colors-", this.__lightTheme);
+      }
+    }
+  },
+  _setProps: function(prefix, colors) {
+    prefix = prefix
+      .replace("-grey", "")
+      .replace(/([a-z])([A-Z])/g, "$1-$2")
+      .toLowerCase();
+    var customStyle = {};
+    for (let i = 0; i < colors.length; i++) {
+      let half = colors.length / 2,
+        suffix =
+          i < half
+            ? "-foreground" + (i + 1)
+            : "-background" + (colors.length - i);
+      if (null !== customStyle[prefix + suffix]) {
+        customStyle[prefix + suffix] = colors[i];
+      }
+    }
+    this.updateStyles(customStyle);
+  },
+  _setThemeProps: function(themePrefix, theme) {
+    for (var property in theme) {
+      if (theme.hasOwnProperty(property)) {
+        this._setProps(themePrefix + property, theme[property]);
+      }
+    }
+  },
+  _getLightTheme: function(hexCodes) {
+    this._setThemeProps("--simple-colors-", hexCodes);
+    this._setThemeProps("--simple-colors-light-theme-", hexCodes);
+    return hexCodes;
+  },
+  _getDarkTheme: function(hexCodes) {
+    let dark = {};
+    for (var property in hexCodes) {
+      if (hexCodes.hasOwnProperty(property)) {
+        dark[property] = hexCodes[property].slice().reverse();
+      }
+    }
+    this._setThemeProps("--simple-colors-dark-theme-", dark);
+    return dark;
+  },
+  getContrasts: function(theme, isColor, isForeground, level, isSmallText) {
+    isSmallText = isSmallText !== void 0 ? isSmallText : !0;
+    let results = [],
+      data = isColor ? this.__wcagaa.colors : this.__wcagaa.greys,
+      levels = data.small[level - 1];
+    if (!isSmallText) levels = data.large[level - 1];
+    for (let i = 0; i < levels; i++) {
+      let suffix = isForeground ? "-background" : "-foreground",
+        index =
+          (isForeground && "light" === theme) ||
+          (!isForeground && "dark" === theme)
+            ? i + 1
+            : levels - (i - 1);
+      if (!isColor) {
+        for (var property in this.__hexCodes) {
+          if ("colorLevels" !== property) {
+            let color =
+              "grey" === property
+                ? ""
+                : "-" +
+                  property.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+            results.push({
+              variable:
+                "--simple-colors-" +
+                theme +
+                "-theme" +
+                color +
+                suffix +
+                (i + 1),
+              hexCode: this.__hexCodes[property][index]
+            });
+          }
+        }
+      } else {
+        results.push({
+          variable:
+            "--simple-colors-" + theme + "-theme" + color + suffix + (i + 1),
+          hexCode: this.__hexCodes[property][index]
+        });
+      }
+    }
+    return results;
   }
-  static get properties() {
-    return {};
-  }
-  static get tag() {
-    return "simple-colors";
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.HAXWiring = new HAXWiring();
-    this.HAXWiring.setHaxProperties(
-      SimpleColors.haxProperties,
-      SimpleColors.tag,
-      this
-    );
-  }
-}
-window.customElements.define(SimpleColors.tag, SimpleColors);
+};

lib/simple-colors-picker-swatch.js

@@ -1,2 +0,3 @@
-import "./simple-colors.js";
+import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
+import "../simple-colors.js";
 Polymer({
@@ -3,0 +4,0 @@ _template: html`

lib/simple-colors-picker.js

@@ -0,129 +1,133 @@
+import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
 import "@polymer/iron-icons/iron-icons.js";
 import "@polymer/iron-icons/image-icons.js";
-import "./simple-colors.js";
 import "./simple-colors-picker-swatch.js";
+import "../simple-colors.js";
+
 Polymer({
   _template: html`
+  <custom-style>
     <style is="custom-style">
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+      :host, :host #button, :host #palette {
+        margin: 0;
+        padding: 0;
+      }
+      :host #collapse {
+        position: absolute;
+        top: var(--simple-colors-picker-preview-size, 20px);
+        margin-top: 12px;
+      }
+      :host[disabled] #collapse,
+      :host[collapsed] #collapse {
+        height: 0;
+        overflow: hidden;
+        transition: all 0.25s;
+        transition-delay: 0.25s;
+      }
+      :host #palette {
+        position: absolute;
+        left: 0;
+        right: 0;
+        display: table;
+        border-collapse: collapse;
+        z-index: 1000;
+        border: 1px solid;
+        border-color: var(--simple-colors-picker-button-border-color, --simple-colors-background3);
+      }
+      :host .row {
+        display: table-row;
+      }
+      :host simple-colors-picker-swatch {
+        display: table-cell;
+        padding-top: var(--simple-colors-picker-swatch-size, 20px);
+        padding-left: var(--simple-colors-picker-swatch-size, 20px);
+      }
+      :host simple-colors-picker-swatch[disabled] {
+        display: none;
+      }
+      :host .sr-only {
+        display: table-cell;
+        font-size: 0;
+      }
+      :host #button {
+        display: flex;
+        align-items: center;
+        border: 1px solid;
+        border-radius: 0.25em;
+        color: var(--simple-colors-picker-button-color, --simple-colors-foreground2);
+        border-color: var(--simple-colors-picker-button-border-color, --simple-colors-background3);
+        background-color: var(--simple-colors-picker-button-bg-color, --simple-colors-background2);
+      }
+      :host[disabled] #button, 
+      :host #button[disabled] {
+        color: var(--simple-colors-picker-button-disabled-color, --simple-colors-foreground4);
+        border-color: var(--simple-colors-picker-button-disabled-border-color, --simple-colors-background5);
+        background-color: var(--simple-colors-picker-button-disabled-bg-color, --simple-colors-background4);
+        cursor: not-allowed;
+      }
+      :host:not([disabled]) #button:focus,
+      :host:not([disabled]) #button:hover {
+        color: var(--simple-colors-picker-button-hover-color, --simple-colors-foreground1);
+        border-color: var(--simple-colors-picker-button-hover-color, --simple-colors-background5);
+        background-color: var(--simple-colors-picker-button-hover-bg-color, --simple-colors-background1);
+      }
+      :host #button > div {
+        margin: 5px;
+        border: 1px solid;
+        flex-grow: 1;
+        border-color: var(--simple-colors-picker-button-hover-color, --simple-colors-background5);
+        display: inline-block;
+      }
+      :host #button > div, :host #button > div iron-icon {
+        width: var(--simple-colors-picker-preview-size, 20px);
+        height: var(--simple-colors-picker-preview-size, 20px);
+      }
+      :host:not([collapsed]) #icon {
+        transform: rotate(-90deg);
+        transition: transform 0.25s;
+      }
+      :host #empty {
+        padding: 15px;
+      }
+      @media screen and (max-width: 600px) {
         :host {
-          display: inline-block;
-          position: relative;
+          position: static;
         }
-        :host, :host #button, :host #palette {
-          margin: 0;
-          padding: 0;
-        }
         :host #collapse {
-          position: absolute;
-          top: var(--simple-colors-picker-preview-size, 20px);
-          margin-top: 12px;
-        }
-        :host[disabled] #collapse,
-        :host[collapsed] #collapse {
-          height: 0;
-          overflow: hidden;
-          transition: all 0.25s;
-          transition-delay: 0.25s;
-        }
+          top: 0;
+          margin-top: 0;
+          position: relative;
+        } 
         :host #palette {
-          position: absolute;
-          left: 0;
-          right: 0;
-          display: table;
-          border-collapse: collapse;
-          z-index: 1000;
-          border: 1px solid;
-          border-color: var(--simple-colors-picker-button-border-color, --simple-colors-background3);
-        }
-        :host .row {
-          display: table-row;
-        }
-        :host simple-colors-picker-swatch {
-          display: table-cell;
-          padding-top: var(--simple-colors-picker-swatch-size, 20px);
-          padding-left: var(--simple-colors-picker-swatch-size, 20px);
-        }
-        :host simple-colors-picker-swatch[disabled] {
-          display: none;
-        }
-        :host .sr-only {
-          display: table-cell;
-          font-size: 0;
-        }
-        :host #button {
-          display: flex;
-          align-items: center;
-          border: 1px solid;
-          border-radius: 0.25em;
-          color: var(--simple-colors-picker-button-color, --simple-colors-foreground2);
-          border-color: var(--simple-colors-picker-button-border-color, --simple-colors-background3);
-          background-color: var(--simple-colors-picker-button-bg-color, --simple-colors-background2);
-        }
-        :host[disabled] #button, 
-        :host #button[disabled] {
-          color: var(--simple-colors-picker-button-disabled-color, --simple-colors-foreground4);
-          border-color: var(--simple-colors-picker-button-disabled-border-color, --simple-colors-background5);
-          background-color: var(--simple-colors-picker-button-disabled-bg-color, --simple-colors-background4);
-          cursor: not-allowed;
-        }
-        :host:not([disabled]) #button:focus,
-        :host:not([disabled]) #button:hover {
-          color: var(--simple-colors-picker-button-hover-color, --simple-colors-foreground1);
-          border-color: var(--simple-colors-picker-button-hover-color, --simple-colors-background5);
-          background-color: var(--simple-colors-picker-button-hover-bg-color, --simple-colors-background1);
-        }
-        :host #button > div {
-          margin: 5px;
-          border: 1px solid;
-          flex-grow: 1;
-          border-color: var(--simple-colors-picker-button-hover-color, --simple-colors-background5);
-          display: inline-block;
-        }
-        :host #button > div, :host #button > div iron-icon {
-          width: var(--simple-colors-picker-preview-size, 20px);
-          height: var(--simple-colors-picker-preview-size, 20px);
-        }
-        :host:not([collapsed]) #icon {
-          transform: rotate(-90deg);
-          transition: transform 0.25s;
-        }
-        :host #empty {
-          padding: 15px;
-        }
-        @media screen and (max-width: 600px) {
-          :host {
-            position: static;
-          }
-          :host #collapse {
-            top: 0;
-            margin-top: 0;
-            position: relative;
-          } 
-          :host #palette {
-            position: sticky;
-          }  
-        }
+          position: sticky;
+        }  
+      }
     </style>
-    <button id="button" label="[[label]]" disabled\$="[[disabled]]">
-      <div id="swatch" style="[[selectedStyle]]"><iron-icon id="texture" icon="image:texture"></iron-icon></div>
-      <span id="icon"><iron-icon icon="arrow-drop-down"></iron-icon></span>
-    </button>
-    <div id="collapse" aria-collapsed="[[collapse]]">
-      <div id="palette">
-        <div id="empty">No colors available.</div>
-        <template id="rows" is="dom-repeat" items="[[swatches]]" as="row" index-as="level">
-          <div class="row">
-            <span id="level" class="sr-only">lightness level [[level]]</span>
-            <template id="swatches" is="dom-repeat" items="[[row]]" as="swatch" index-as="order">
-              <simple-colors-picker-swatch aria-describedby="level" disabled="[[disabled]]" hex="[[swatch.hex]]" label="[[swatch.label]]" level="[[swatch.level]]" order="[[order]]" role="button" selected="[[swatch.selected]]" tabindex="0">
-              </simple-colors-picker-swatch>
-            </template>
-          </div>
-        </template>
-      </div>
+  </custom-style>
+  <button id="button" label="[[label]]" disabled\$="[[disabled]]">
+    <div id="swatch" style="[[selectedStyle]]"><iron-icon id="texture" icon="image:texture"></iron-icon></div>
+    <span id="icon"><iron-icon icon="arrow-drop-down"></iron-icon></span>
+  </button>
+  <div id="collapse" aria-collapsed="[[collapse]]">
+    <div id="palette">
+      <div id="empty">No colors available.</div>
+      <template id="rows" is="dom-repeat" items="[[swatches]]" as="row" index-as="level">
+        <div class="row">
+          <span id="level" class="sr-only">lightness level [[level]]</span>
+          <template id="swatches" is="dom-repeat" items="[[row]]" as="swatch" index-as="order">
+            <simple-colors-picker-swatch aria-describedby="level" disabled="[[disabled]]" hex="[[swatch.hex]]" label="[[swatch.label]]" level="[[swatch.level]]" order="[[order]]" role="button" selected="[[swatch.selected]]" tabindex="0">
+            </simple-colors-picker-swatch>
+          </template>
+        </div>
+      </template>
     </div>
+  </div>
 `,
 
   is: "simple-colors-picker",
-  behaviors: [window.simpleColorsBehaviors],
+  behaviors: [simpleColorsBehaviors],
 
@@ -369,3 +373,3 @@ listeners: {
   _onPreviousSwatch: function(e) {
-    let target = this.$$(
+    let target = this.shadowRoot.querySelector(
       'simple-colors-picker-swatch[order="' +
@@ -384,3 +388,3 @@ (e.detail.order - 1) +
   _onNextSwatch: function(e) {
-    let target = this.$$(
+    let target = this.shadowRoot.querySelector(
       'simple-colors-picker-swatch[order="' +
@@ -399,3 +403,3 @@ (e.detail.order + 1) +
   _onPreviousLevel: function(e) {
-    let target = this.$$(
+    let target = this.shadowRoot.querySelector(
       'simple-colors-picker-swatch[order="' +
@@ -414,3 +418,3 @@ e.detail.order +
   _onNextLevel: function(e) {
-    let target = this.$$(
+    let target = this.shadowRoot.querySelector(
       'simple-colors-picker-swatch[order="' +
@@ -417,0 +421,0 @@ e.detail.order +

lib/simple-colors-utility.js

 import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
 
-Polymer.SimpleColorsUtility = Polymer({
+window.SimpleColorsUtility = Polymer({
   is: "simple-colors-utility"
 });
 
-Polymer.SimpleColorsUtility.instance = null;
-Polymer.SimpleColorsUtility.hexCodes = {
+window.SimpleColorsUtility.instance = null;
+window.SimpleColorsUtility.hexCodes = {
   colorLevels: [
@@ -262,3 +262,3 @@ "foreground1",
 };
-Polymer.SimpleColorsUtility.addStyles = function() {
+window.SimpleColorsUtility.addStyles = function() {
   let root = this,
@@ -408,10 +408,10 @@ css = "",
  */
-Polymer.SimpleColorsUtility.requestAvailability = function() {
-  if (!Polymer.SimpleColorsUtility.instance) {
-    Polymer.SimpleColorsUtility.instance = document.createElement(
+window.SimpleColorsUtility.requestAvailability = function() {
+  if (!window.SimpleColorsUtility.instance) {
+    window.SimpleColorsUtility.instance = document.createElement(
       "simple-colors"
     );
-    Polymer.SimpleColorsUtility.addStyles();
+    window.SimpleColorsUtility.addStyles();
   }
-  document.body.appendChild(Polymer.SimpleColorsUtility.instance);
+  document.body.appendChild(window.SimpleColorsUtility.instance);
 };

package.json

@@ -19,3 +19,3 @@ {
   },
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "Automated conversion of simple-colors/",
@@ -44,3 +44,3 @@ "repository": {
   "dependencies": {
-    "@lrnwebcomponents/hax-body-behaviors": "^0.0.20",
+    "@polymer/iron-icons": "^3.0.0",
     "@polymer/polymer": "^3.0.5"
@@ -56,5 +56,5 @@ },
     "lodash": "4.17.11",
-    "polymer-build": "3.0.4",
-    "polymer-cli": "1.8.0",
-    "wct-browser-legacy": "1.0.1"
+    "polymer-build": "3.1.0",
+    "polymer-cli": "1.8.1",
+    "wct-browser-legacy": "1.0.2"
   },
@@ -69,3 +69,3 @@ "private": false,
   ],
-  "gitHead": "67f5e266e92a62dd4f359dae42b86159fc10f54e"
+  "gitHead": "9a19006247e8f5523b63bdc4adb4e358fcf59090"
 }

simple-colors.amd.js

@@ -1,1 +0,1 @@
-define(["exports","./node_modules/@polymer/polymer/polymer-element.js","./node_modules/@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js"],function(_exports,_polymerElement,_HAXWiring){"use strict";Object.defineProperty(_exports,"__esModule",{value:!0});_exports.SimpleColors=void 0;function _templateObject_973ac6a0d70511e8a1d7f1fe34cfa022(){var data=babelHelpers.taggedTemplateLiteral(["\n<style>:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n</style>\n<slot></slot>"]);_templateObject_973ac6a0d70511e8a1d7f1fe34cfa022=function(){return data};return data}var SimpleColors=function(_PolymerElement){babelHelpers.inherits(SimpleColors,_PolymerElement);function SimpleColors(){babelHelpers.classCallCheck(this,SimpleColors);return babelHelpers.possibleConstructorReturn(this,(SimpleColors.__proto__||Object.getPrototypeOf(SimpleColors)).apply(this,arguments))}babelHelpers.createClass(SimpleColors,[{key:"connectedCallback",value:function connectedCallback(){babelHelpers.get(SimpleColors.prototype.__proto__||Object.getPrototypeOf(SimpleColors.prototype),"connectedCallback",this).call(this);this.HAXWiring=new _HAXWiring.HAXWiring;this.HAXWiring.setHaxProperties(SimpleColors.haxProperties,SimpleColors.tag,this)}}],[{key:"template",get:function get(){return(0,_polymerElement.html)(_templateObject_973ac6a0d70511e8a1d7f1fe34cfa022())}},{key:"haxProperties",get:function get(){return{canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Simple colors",description:"Automated conversion of simple-colors/",icon:"icons:android",color:"green",groups:["Colors"],handles:[{type:"todo:read-the-docs-for-usage"}],meta:{author:"btopro",owner:"The Pennsylvania State University"}},settings:{quick:[],configure:[],advanced:[]}}}},{key:"properties",get:function get(){return{}}},{key:"tag",get:function get(){return"simple-colors"}}]);return SimpleColors}(_polymerElement.PolymerElement);_exports.SimpleColors=SimpleColors;window.customElements.define(SimpleColors.tag,SimpleColors)});
+define(["./node_modules/@polymer/polymer/polymer-legacy.js","./lib/simple-colors-utility.js"],function(){"use strict";window.simpleColorsBehaviors=window.simpleColorsBehaviors||{};window.simpleColorsBehaviors={properties:{accentColor:{type:String,value:null,reflectToAttribute:!0},dark:{type:Boolean,value:!1,reflectToAttribute:!0},__hexCodes:{type:Object,value:null},__lightTheme:{type:Object,computed:"_getLightTheme(__hexCodes)"},__darkTheme:{type:Object,computed:"_getDarkTheme(__hexCodes)"}},observers:["setTheme(accentColor,dark,__hexCodes)"],created:function created(){window.SimpleColorsUtility.requestAvailability();this.__wcagaa={greys:{small:[5,5,4,4,1],large:[5,5,5,4,2]},colors:{small:[4,3,3,1,0],large:[5,4,3,2,1]}}},ready:function ready(){this.__hexCodes=window.SimpleColorsUtility.hexCodes},setTheme:function setTheme(accentColor,dark,hexCodes){if(null!==hexCodes&&""!==hexCodes){if(null!==accentColor&&""!==accentColor){var prop=accentColor.replace(/-([a-z])/g,function(g){return g[1].toUpperCase()});if(this.__lightTheme.hasOwnProperty(prop)){this.__lightTheme.accent=this.__lightTheme[prop].slice();this.__darkTheme.accent=this.__darkTheme[prop].slice()}else{this.__lightTheme.accent=this.__hexCodes.accent.slice();this.__darkTheme.accent=this.__hexCodes.accent.slice().reverse()}}this._setThemeProps("--simple-colors-light-theme-",this.__lightTheme);this._setThemeProps("--simple-colors-dark-theme-",this.__darkTheme);if(dark){this._setThemeProps("--simple-colors-",this.__darkTheme)}else{this._setThemeProps("--simple-colors-",this.__lightTheme)}}},_setProps:function _setProps(prefix,colors){prefix=prefix.replace("-grey","").replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();for(var customStyle={},i=0;i<colors.length;i++){var half=colors.length/2,suffix=i<half?"-foreground"+(i+1):"-background"+(colors.length-i);if(null!==customStyle&&null!==customStyle[prefix+suffix]){customStyle[prefix+suffix]=colors[i]}}this.updateStyles(customStyle)},_setThemeProps:function _setThemeProps(themePrefix,theme){for(var property in theme){if(theme.hasOwnProperty(property)){this._setProps(themePrefix+property,theme[property])}}},_getLightTheme:function _getLightTheme(hexCodes){this._setThemeProps("--simple-colors-",hexCodes);this._setThemeProps("--simple-colors-light-theme-",hexCodes);return hexCodes},_getDarkTheme:function _getDarkTheme(hexCodes){var dark={};for(var property in hexCodes){if(hexCodes.hasOwnProperty(property)){dark[property]=hexCodes[property].slice().reverse()}}this._setThemeProps("--simple-colors-dark-theme-",dark);return dark},getContrasts:function getContrasts(theme,isColor,isForeground,level,isSmallText){isSmallText=isSmallText!==void 0?isSmallText:!0;var results=[],data=isColor?this.__wcagaa.colors:this.__wcagaa.greys,levels=data.small[level-1];if(!isSmallText)levels=data.large[level-1];for(var i=0;i<levels;i++){var suffix=isForeground?"-background":"-foreground",index=isForeground&&"light"===theme||!isForeground&&"dark"===theme?i+1:levels-(i-1);if(!isColor){for(var property in this.__hexCodes){if("colorLevels"!==property){var _color="grey"===property?"":"-"+property.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();results.push({variable:"--simple-colors-"+theme+"-theme"+_color+suffix+(i+1),hexCode:this.__hexCodes[property][index]})}}}else{results.push({variable:"--simple-colors-"+theme+"-theme"+color+suffix+(i+1),hexCode:this.__hexCodes[property][index]})}}return results}}});

simple-colors.es6.js

@@ -1,10 +0,1 @@
-import{html,PolymerElement}from"./node_modules/@polymer/polymer/polymer-element.js";import{HAXWiring}from"./node_modules/@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";export{SimpleColors};class SimpleColors extends PolymerElement{static get template(){return html`
-<style>:host {
-  display: block;
-}
-
-:host([hidden]) {
-  display: none;
-}
-</style>
-<slot></slot>`}static get haxProperties(){return{canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Simple colors",description:"Automated conversion of simple-colors/",icon:"icons:android",color:"green",groups:["Colors"],handles:[{type:"todo:read-the-docs-for-usage"}],meta:{author:"btopro",owner:"The Pennsylvania State University"}},settings:{quick:[],configure:[],advanced:[]}}}static get properties(){return{}}static get tag(){return"simple-colors"}connectedCallback(){super.connectedCallback();this.HAXWiring=new HAXWiring;this.HAXWiring.setHaxProperties(SimpleColors.haxProperties,SimpleColors.tag,this)}}window.customElements.define(SimpleColors.tag,SimpleColors);
+import{html,Polymer}from"./node_modules/@polymer/polymer/polymer-legacy.js";import"./lib/simple-colors-utility.js";window.simpleColorsBehaviors=window.simpleColorsBehaviors||{};window.simpleColorsBehaviors={properties:{accentColor:{type:String,value:null,reflectToAttribute:!0},dark:{type:Boolean,value:!1,reflectToAttribute:!0},__hexCodes:{type:Object,value:null},__lightTheme:{type:Object,computed:"_getLightTheme(__hexCodes)"},__darkTheme:{type:Object,computed:"_getDarkTheme(__hexCodes)"}},observers:["setTheme(accentColor,dark,__hexCodes)"],created:function(){window.SimpleColorsUtility.requestAvailability();this.__wcagaa={greys:{small:[5,5,4,4,1],large:[5,5,5,4,2]},colors:{small:[4,3,3,1,0],large:[5,4,3,2,1]}}},ready:function(){this.__hexCodes=window.SimpleColorsUtility.hexCodes},setTheme:function(accentColor,dark,hexCodes){if(null!==hexCodes&&""!==hexCodes){if(null!==accentColor&&""!==accentColor){let prop=accentColor.replace(/-([a-z])/g,function(g){return g[1].toUpperCase()});if(this.__lightTheme.hasOwnProperty(prop)){this.__lightTheme.accent=this.__lightTheme[prop].slice();this.__darkTheme.accent=this.__darkTheme[prop].slice()}else{this.__lightTheme.accent=this.__hexCodes.accent.slice();this.__darkTheme.accent=this.__hexCodes.accent.slice().reverse()}}this._setThemeProps("--simple-colors-light-theme-",this.__lightTheme);this._setThemeProps("--simple-colors-dark-theme-",this.__darkTheme);if(dark){this._setThemeProps("--simple-colors-",this.__darkTheme)}else{this._setThemeProps("--simple-colors-",this.__lightTheme)}}},_setProps:function(prefix,colors){prefix=prefix.replace("-grey","").replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();var customStyle={};for(let i=0;i<colors.length;i++){let half=colors.length/2,suffix=i<half?"-foreground"+(i+1):"-background"+(colors.length-i);if(null!==customStyle[prefix+suffix]){customStyle[prefix+suffix]=colors[i]}}this.updateStyles(customStyle)},_setThemeProps:function(themePrefix,theme){for(var property in theme){if(theme.hasOwnProperty(property)){this._setProps(themePrefix+property,theme[property])}}},_getLightTheme:function(hexCodes){this._setThemeProps("--simple-colors-",hexCodes);this._setThemeProps("--simple-colors-light-theme-",hexCodes);return hexCodes},_getDarkTheme:function(hexCodes){let dark={};for(var property in hexCodes){if(hexCodes.hasOwnProperty(property)){dark[property]=hexCodes[property].slice().reverse()}}this._setThemeProps("--simple-colors-dark-theme-",dark);return dark},getContrasts:function(theme,isColor,isForeground,level,isSmallText){isSmallText=isSmallText!==void 0?isSmallText:!0;let results=[],data=isColor?this.__wcagaa.colors:this.__wcagaa.greys,levels=data.small[level-1];if(!isSmallText)levels=data.large[level-1];for(let i=0;i<levels;i++){let suffix=isForeground?"-background":"-foreground",index=isForeground&&"light"===theme||!isForeground&&"dark"===theme?i+1:levels-(i-1);if(!isColor){for(var property in this.__hexCodes){if("colorLevels"!==property){let color="grey"===property?"":"-"+property.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();results.push({variable:"--simple-colors-"+theme+"-theme"+color+suffix+(i+1),hexCode:this.__hexCodes[property][index]})}}}else{results.push({variable:"--simple-colors-"+theme+"-theme"+color+suffix+(i+1),hexCode:this.__hexCodes[property][index]})}}return results}};

simple-colors.js

@@ -0,92 +1,204 @@
+import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
+import "./lib/simple-colors-utility.js";
+// @polymerBehavior
 /**
- * Copyright 2018 The Pennsylvania State University
- * @license Apache-2.0, see License.md for full text.
- */
-import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
-import { HAXWiring } from "@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";
-export { SimpleColors };
-/**
- * `simple-colors`
- * `Automated conversion of simple-colors/`
- *
- * @microcopy - language worth noting:
- *  -
- *
- * @customElement
- * @polymer
- * @demo demo/index.html
- */
-class SimpleColors extends PolymerElement {
-  // render function
-  static get template() {
-    return html`
-<style>:host {
-  display: block;
-}
+`simple-colors-behaviors`
+A set of theming and accent color behaviors for components.
+@microcopy - the mental model for this element
+ - 
+ - 
+*/
+window.simpleColorsBehaviors = window.simpleColorsBehaviors || {};
+window.simpleColorsBehaviors = {
+  properties: {
+    /**
+     * Accent color on UI. Default is greyscale.
+     */
 
-:host([hidden]) {
-  display: none;
-}
-</style>
-<slot></slot>`;
-  }
+    accentColor: {
+      type: String,
+      value: null,
+      reflectToAttribute: true
+    },
+    /**
+     * Dark colors for UI? Default is false (light).
+     */
+    dark: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true
+    },
+    /**
+     * Stores hex codes for accessible colors.
+     */
+    __hexCodes: {
+      type: Object,
+      value: null
+    },
+    /**
+     * Stores light theme values
+     */
+    __lightTheme: {
+      type: Object,
+      computed: "_getLightTheme(__hexCodes)"
+    },
+    /**
+     * Stores dark theme values
+     */
+    __darkTheme: {
+      type: Object,
+      computed: "_getDarkTheme(__hexCodes)"
+    }
+  },
 
-  // haxProperty definition
-  static get haxProperties() {
-    return {
-      canScale: true,
-      canPosition: true,
-      canEditSource: false,
-      gizmo: {
-        title: "Simple colors",
-        description: "Automated conversion of simple-colors/",
-        icon: "icons:android",
-        color: "green",
-        groups: ["Colors"],
-        handles: [
-          {
-            type: "todo:read-the-docs-for-usage"
-          }
-        ],
-        meta: {
-          author: "btopro",
-          owner: "The Pennsylvania State University"
+  observers: ["setTheme(accentColor,dark,__hexCodes)"],
+  /**
+   * Set color variables. Set variables for element and for slotted content.
+   */
+  created: function() {
+    window.SimpleColorsUtility.requestAvailability();
+    this.__wcagaa = {
+      /* a given color's highest level of WCAG 2.00 AA contrasting color by level 
+          based on text size and level of color, for example: 
+          --simple-colors-foreground5: 
+            -background1 in small text, 
+            -background1 or -background2 for large text
+          --simple-colors-green-foreground4: 
+            -background1 in small text, 
+            -background1 or -background2 for large text
+          --simple-colors-green-foreground5: 
+            no colors in small text, 
+            -background1 for large text
+      */
+      greys: { small: [5, 5, 4, 4, 1], large: [5, 5, 5, 4, 2] },
+      colors: { small: [4, 3, 3, 1, 0], large: [5, 4, 3, 2, 1] }
+    };
+  },
+  ready: function() {
+    this.__hexCodes = window.SimpleColorsUtility.hexCodes;
+  },
+
+  setTheme: function(accentColor, dark, hexCodes) {
+    if (hexCodes !== null && hexCodes !== "") {
+      if (accentColor !== null && accentColor !== "") {
+        let prop = accentColor.replace(/-([a-z])/g, function(g) {
+          return g[1].toUpperCase();
+        });
+        if (this.__lightTheme.hasOwnProperty(prop)) {
+          this.__lightTheme.accent = this.__lightTheme[prop].slice();
+          this.__darkTheme.accent = this.__darkTheme[prop].slice();
+        } else {
+          this.__lightTheme.accent = this.__hexCodes.accent.slice();
+          this.__darkTheme.accent = this.__hexCodes.accent.slice().reverse();
         }
-      },
-      settings: {
-        quick: [],
-        configure: [],
-        advanced: []
       }
+      this._setThemeProps("--simple-colors-light-theme-", this.__lightTheme);
+      this._setThemeProps("--simple-colors-dark-theme-", this.__darkTheme);
+
+      if (dark) {
+        this._setThemeProps("--simple-colors-", this.__darkTheme);
+      } else {
+        this._setThemeProps("--simple-colors-", this.__lightTheme);
+      }
+    }
+  },
+
+  _setProps: function(prefix, colors) {
+    prefix = prefix
+      .replace("-grey", "")
+      .replace(/([a-z])([A-Z])/g, "$1-$2")
+      .toLowerCase();
+    var customStyle = {};
+    for (let i = 0; i < colors.length; i++) {
+      let half = colors.length / 2,
+        suffix =
+          i < half
+            ? "-foreground" + (i + 1)
+            : "-background" + (colors.length - i);
+      // @todo may need to check shadydom / shadow value
+      if (customStyle !== null && customStyle[prefix + suffix] !== null) {
+        customStyle[prefix + suffix] = colors[i];
+      }
+    }
+    this.updateStyles(customStyle);
+  },
+  _setThemeProps: function(themePrefix, theme) {
+    for (var property in theme) {
+      if (theme.hasOwnProperty(property)) {
+        this._setProps(themePrefix + property, theme[property]);
+      }
+    }
+  },
+  _getLightTheme: function(hexCodes) {
+    let setThemeProps = function(themePrefix, theme) {
+      for (var property in theme) {
+        if (theme.hasOwnProperty(property)) {
+          this._setProps(themePrefix + property, theme[property]);
+        }
+      }
     };
-  }
-  // properties available to the custom element for data binding
-  static get properties() {
-    return {};
-  }
+    this._setThemeProps("--simple-colors-", hexCodes);
+    this._setThemeProps("--simple-colors-light-theme-", hexCodes);
+    return hexCodes;
+  },
+  _getDarkTheme: function(hexCodes) {
+    let dark = {};
+    for (var property in hexCodes) {
+      if (hexCodes.hasOwnProperty(property)) {
+        dark[property] = hexCodes[property].slice().reverse();
+      }
+    }
+    this._setThemeProps("--simple-colors-dark-theme-", dark);
+    return dark;
+  },
+  getContrasts: function(theme, isColor, isForeground, level, isSmallText) {
+    isSmallText = isSmallText !== undefined ? isSmallText : true;
+    /*  Small text requires the highest contrast ratio for WCAG 2.0 AA compliance. 
+        Small text is any content that is NOT:
+        - bold text that is 14 point or higher,
+        - text that is 18 point or higher,
+        - a decorative element that has no semantic meaning, such as a border, or
+        - a disabled UI element */
+    let results = [];
+    let data = isColor ? this.__wcagaa.colors : this.__wcagaa.greys,
+      levels = data.small[level - 1];
+    if (!isSmallText) levels = data.large[level - 1];
+    for (let i = 0; i < levels; i++) {
+      let suffix = isForeground ? "-background" : "-foreground",
+        index =
+          (isForeground && theme === "light") ||
+          (!isForeground && theme === "dark")
+            ? i + 1
+            : levels - (i - 1);
 
-  /**
-   * Store the tag name to make it easier to obtain directly.
-   * @notice function name must be here for tooling to operate correctly
-   */
-  static get tag() {
-    return "simple-colors";
+      if (!isColor) {
+        for (var property in this.__hexCodes) {
+          if (property !== "colorLevels") {
+            let color =
+              property === "grey"
+                ? ""
+                : "-" +
+                  property.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+            results.push({
+              variable:
+                "--simple-colors-" +
+                theme +
+                "-theme" +
+                color +
+                suffix +
+                (i + 1),
+              hexCode: this.__hexCodes[property][index]
+            });
+          }
+        }
+      } else {
+        results.push({
+          variable:
+            "--simple-colors-" + theme + "-theme" + color + suffix + (i + 1),
+          hexCode: this.__hexCodes[property][index]
+        });
+      }
+    }
+    return results;
   }
-  /**
-   * life cycle, element is afixed to the DOM
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.HAXWiring = new HAXWiring();
-    this.HAXWiring.setHaxProperties(
-      SimpleColors.haxProperties,
-      SimpleColors.tag,
-      this
-    );
-  }
-  /**
-   * life cycle, element is removed from the DOM
-   */
-  //disconnectedCallback() {}
-}
-window.customElements.define(SimpleColors.tag, SimpleColors);
+};

simple-colors.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@polymer/polymer/polymer-element.js"),require("@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js")):"function"==typeof define&&define.amd?define(["exports","@polymer/polymer/polymer-element.js","@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js"],t):t(e.SimpleColors={},e.polymerElement_js,e.HAXWiring_js)}(this,function(e,t,n){"use strict";function o(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function r(e){return(r=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function i(e,t){return(i=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function c(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function l(e,t,n){return(l="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,t,n){var o=function(e,t){for(;!Object.prototype.hasOwnProperty.call(e,t)&&null!==(e=r(e)););return e}(e,t);if(o){var i=Object.getOwnPropertyDescriptor(o,t);return i.get?i.get.call(n):i.value}})(e,t,n||e)}function s(){var e,t,n=(e=["\n<style>:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n</style>\n<slot></slot>"],t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}})));return s=function(){return n},n}var u=function(e){function u(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,u),c(this,r(u).apply(this,arguments))}var a,f,p;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&i(e,t)}(u,t.PolymerElement),a=u,p=[{key:"template",get:function(){return t.html(s())}},{key:"haxProperties",get:function(){return{canScale:!0,canPosition:!0,canEditSource:!1,gizmo:{title:"Simple colors",description:"Automated conversion of simple-colors/",icon:"icons:android",color:"green",groups:["Colors"],handles:[{type:"todo:read-the-docs-for-usage"}],meta:{author:"btopro",owner:"The Pennsylvania State University"}},settings:{quick:[],configure:[],advanced:[]}}}},{key:"properties",get:function(){return{}}},{key:"tag",get:function(){return"simple-colors"}}],(f=[{key:"connectedCallback",value:function(){l(r(u.prototype),"connectedCallback",this).call(this),this.HAXWiring=new n.HAXWiring,this.HAXWiring.setHaxProperties(u.haxProperties,u.tag,this)}}])&&o(a.prototype,f),p&&o(a,p),u}();window.customElements.define(u.tag,u),e.SimpleColors=u,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(require("@polymer/polymer/polymer-legacy.js")):"function"==typeof define&&define.amd?define(["@polymer/polymer/polymer-legacy.js"],o):o(e.polymerLegacy_js)}(this,function(e){"use strict";window.SimpleColorsUtility=e.Polymer({is:"simple-colors-utility"}),window.SimpleColorsUtility.instance=null,window.SimpleColorsUtility.hexCodes={colorLevels:["foreground1","foreground2","foreground3","foreground4","foreground5","background5","background4","background3","background2","background1"],grey:["#000000","#111111","#222222","#444444","#666666","#999999","#bbbbbb","#dddddd","#eeeeee","#ffffff"],accent:["#000000","#111111","#222222","#444444","#666666","#999999","#bbbbbb","#dddddd","#eeeeee","#ffffff"],red:["#520000","#670000","#850000","#ac0000","#ee0000","#ff2222","#fd5151","#ff7474","#ff8f8f","#ffaeae"],pink:["#5a0020","#78002b","#980036","#b80042","#da004e","#ff3996","#fd60aa","#ff73b5","#ff87c0","#ffa5cf"],purple:["#33003a","#490052","#6c0079","#8a009b","#a500ba","#e200ff","#ed61ff","#f07cff","#f394ff","#f4affd"],deepPurple:["#2a0049","#3a0063","#4c0081","#5d009f","#7e00d8","#a931ff","#b44aff","#bb63f9","#c97eff","#ddacff"],indigo:["#100049","#160063","#20008c","#2801b0","#3a00ff","#835fff","#9373ff","#9e82ff","#af97ff","#c3b2ff"],blue:["#001947","#002569","#003494","#0041bb","#0059ff","#4083ff","#5892fd","#74a5ff","#95baff","#acc9ff"],lightBlue:["#002850","#003f7d","#0055a8","#0066ca","#007ffc","#41a1ff","#58adff","#65b3ff","#92c9ff","#a1d1ff"],cyan:["#002c38","#003f50","#005970","#007999","#009dc7","#00c9ff","#1ccfff","#33d4ff","#77e2ff","#9beaff"],teal:["#002a20","#003829","#004e3a","#007658","#009d75","#00ff9c","#29ffac","#56ffbd","#79ffcb","#98ffd7"],green:["#002a11","#003d18","#005a23","#00762e","#008c37","#00f961","#24ff70","#49ff88","#79ffa7","#acffc9"],lightGreen:["#143000","#1b3f00","#296100","#357f00","#429d00","#6fff00","#8efd38","#a1fd5a","#b1ff75","#c7ff9b"],lime:["#223400","#293f00","#3b5a00","#4d7600","#649900","#aeff00","#bdff2d","#caff58","#d4ff77","#dfff9b"],yellow:["#303000","#454400","#585700","#787700","#929100","#f6f600","#ffff3a","#ffff7c","#ffff90","#ffffac"],amber:["#302500","#413200","#614b00","#876800","#b28900","#ffc500","#ffc235","#ffcf5e","#ffd677","#ffdf92"],orange:["#3d1c00","#612d00","#833d00","#ae5100","#e56a00","#ff9625","#ff9e36","#ffb05c","#ffbd75","#ffca92"],deepOrange:["#3a0c00","#561100","#8a1c00","#b92500","#f53100","#ff6c3c","#ff7649","#ff8a64","#ffa588","#ffb299"],brown:["#2c140e","#3b1e15","#5b3328","#724539","#85574a","#a47060","#ac7868","#b68373","#c59485","#e5b8aa"],blueGrey:["#182023","#1e282c","#2f3e45","#40535b","#56707c","#718892","#7a8f98","#8d9fa7","#9badb6","#b1c5ce"]},window.SimpleColorsUtility.addStyles=function(){var e=this,o="",f=function(f,r,t){for(var a in o+=f+" { ",e.hexCodes)if("colorLevels"!==a&&e.hexCodes.hasOwnProperty(a))for(var l=t?e.hexCodes[a].slice().reverse():e.hexCodes[a].slice(),s="grey"!==a?"--simple-colors"+r+"-"+a.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase():"--simple-colors"+r,i=0;i<10;i++){var c="-"+e.hexCodes.colorLevels[i];o+=s+c+": "+l[i]+";"}return o+=" } \n\n"},r=function(e,o,f,r,t,a){var l=o+"accent-"+f+r,s=""===e?o+e+f:o+e+"-"+f;return"accent"===e?"":"."+s+r+", \n"+(""===e?"."+l+", \n":"")+'[accent-color="'+(""===e?"none":e)+'"] .'+l+" { \n\t"+t+": var(--"+s+", "+a+"); \n}\n"},t=function(e,f){for(var r=0;r<10;r++){var t=r<5?"-foreground":"-background",a=r<5?r+1:r-4;o+=e+"-accent"+t+a+": var("+("grey"!==f?e+f+t+a:e+t+a)+");"}},a=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");for(var s in f("html","-light-theme",!1),f("html","-dark-theme",!0),f('html, *[dark="false"]',"",!1),f("*[dark]","",!0),function(f){for(var t in e.hexCodes)if("colorLevels"!==t&&e.hexCodes.hasOwnProperty(t))for(var a=e.hexCodes[t].slice(),l="simple-colors-",s="grey"!==t?t.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase():"",i=0;i<10;i++){var c=e.hexCodes.colorLevels[i];o+=r(s,l,c,"","background-color",a[i]),o+=r(s,l,c,"-text","color",a[i]),o+=r(s,l,c,"-border","border-color",a[i])}o+="\n"}(),e.hexCodes)if("accent"!==s&&"colorLevels"!==s){var i="grey"!==(s=s.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase())?"-"+s:"";o+='*[accent-color="'+("grey"!==s?s:"none")+'"] { ',t("--simple-colors",i),t("--simple-colors-light-theme",i),t("--simple-colors-dark-theme",i),o+=" } \n\n"}l.type="text/css",l.styleSheet?l.styleSheet.cssText=o:l.appendChild(document.createTextNode(o)),a.appendChild(l)},window.SimpleColorsUtility.requestAvailability=function(){window.SimpleColorsUtility.instance||(window.SimpleColorsUtility.instance=document.createElement("simple-colors"),window.SimpleColorsUtility.addStyles()),document.body.appendChild(window.SimpleColorsUtility.instance)},window.simpleColorsBehaviors=window.simpleColorsBehaviors||{},window.simpleColorsBehaviors={properties:{accentColor:{type:String,value:null,reflectToAttribute:!0},dark:{type:Boolean,value:!1,reflectToAttribute:!0},__hexCodes:{type:Object,value:null},__lightTheme:{type:Object,computed:"_getLightTheme(__hexCodes)"},__darkTheme:{type:Object,computed:"_getDarkTheme(__hexCodes)"}},observers:["setTheme(accentColor,dark,__hexCodes)"],created:function(){window.SimpleColorsUtility.requestAvailability(),this.__wcagaa={greys:{small:[5,5,4,4,1],large:[5,5,5,4,2]},colors:{small:[4,3,3,1,0],large:[5,4,3,2,1]}}},ready:function(){this.__hexCodes=window.SimpleColorsUtility.hexCodes},setTheme:function(e,o,f){if(null!==f&&""!==f){if(null!==e&&""!==e){var r=e.replace(/-([a-z])/g,function(e){return e[1].toUpperCase()});this.__lightTheme.hasOwnProperty(r)?(this.__lightTheme.accent=this.__lightTheme[r].slice(),this.__darkTheme.accent=this.__darkTheme[r].slice()):(this.__lightTheme.accent=this.__hexCodes.accent.slice(),this.__darkTheme.accent=this.__hexCodes.accent.slice().reverse())}this._setThemeProps("--simple-colors-light-theme-",this.__lightTheme),this._setThemeProps("--simple-colors-dark-theme-",this.__darkTheme),o?this._setThemeProps("--simple-colors-",this.__darkTheme):this._setThemeProps("--simple-colors-",this.__lightTheme)}},_setProps:function(e,o){e=e.replace("-grey","").replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();for(var f={},r=0;r<o.length;r++){var t=r<o.length/2?"-foreground"+(r+1):"-background"+(o.length-r);null!==f&&null!==f[e+t]&&(f[e+t]=o[r])}this.updateStyles(f)},_setThemeProps:function(e,o){for(var f in o)o.hasOwnProperty(f)&&this._setProps(e+f,o[f])},_getLightTheme:function(e){return this._setThemeProps("--simple-colors-",e),this._setThemeProps("--simple-colors-light-theme-",e),e},_getDarkTheme:function(e){var o={};for(var f in e)e.hasOwnProperty(f)&&(o[f]=e[f].slice().reverse());return this._setThemeProps("--simple-colors-dark-theme-",o),o},getContrasts:function(e,o,f,r,t){t=void 0===t||t;var a=[],l=o?this.__wcagaa.colors:this.__wcagaa.greys,s=l.small[r-1];t||(s=l.large[r-1]);for(var i=0;i<s;i++){var c=f?"-background":"-foreground",n=f&&"light"===e||!f&&"dark"===e?i+1:s-(i-1);if(o)a.push({variable:"--simple-colors-"+e+"-theme"+color+c+(i+1),hexCode:this.__hexCodes[d][n]});else for(var d in this.__hexCodes)if("colorLevels"!==d){var h="grey"===d?"":"-"+d.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();a.push({variable:"--simple-colors-"+e+"-theme"+h+c+(i+1),hexCode:this.__hexCodes[d][n]})}}return a}}});
 //# sourceMappingURL=simple-colors.umd.js.map

src/simple-colors.js

@@ -0,46 +1,204 @@
+import { html, Polymer } from "@polymer/polymer/polymer-legacy.js";
+import "./lib/simple-colors-utility.js";
+// @polymerBehavior
 /**
- * Copyright 2018 The Pennsylvania State University
- * @license Apache-2.0, see License.md for full text.
- */
-import { html, PolymerElement } from "@polymer/polymer/polymer-element.js";
-import { HAXWiring } from "@lrnwebcomponents/hax-body-behaviors/lib/HAXWiring.js";
-export { SimpleColors };
-/**
- * `simple-colors`
- * `Automated conversion of simple-colors/`
- *
- * @microcopy - language worth noting:
- *  -
- *
- * @customElement
- * @polymer
- * @demo demo/index.html
- */
-class SimpleColors extends PolymerElement {
-  /* REQUIRED FOR TOOLING DO NOT TOUCH */
+`simple-colors-behaviors`
+A set of theming and accent color behaviors for components.
+@microcopy - the mental model for this element
+ - 
+ - 
+*/
+window.simpleColorsBehaviors = window.simpleColorsBehaviors || {};
+window.simpleColorsBehaviors = {
+  properties: {
+    /**
+     * Accent color on UI. Default is greyscale.
+     */
 
+    accentColor: {
+      type: String,
+      value: null,
+      reflectToAttribute: true
+    },
+    /**
+     * Dark colors for UI? Default is false (light).
+     */
+    dark: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true
+    },
+    /**
+     * Stores hex codes for accessible colors.
+     */
+    __hexCodes: {
+      type: Object,
+      value: null
+    },
+    /**
+     * Stores light theme values
+     */
+    __lightTheme: {
+      type: Object,
+      computed: "_getLightTheme(__hexCodes)"
+    },
+    /**
+     * Stores dark theme values
+     */
+    __darkTheme: {
+      type: Object,
+      computed: "_getDarkTheme(__hexCodes)"
+    }
+  },
+
+  observers: ["setTheme(accentColor,dark,__hexCodes)"],
   /**
-   * Store the tag name to make it easier to obtain directly.
-   * @notice function name must be here for tooling to operate correctly
+   * Set color variables. Set variables for element and for slotted content.
    */
-  static get tag() {
-    return "simple-colors";
+  created: function() {
+    window.SimpleColorsUtility.requestAvailability();
+    this.__wcagaa = {
+      /* a given color's highest level of WCAG 2.00 AA contrasting color by level 
+          based on text size and level of color, for example: 
+          --simple-colors-foreground5: 
+            -background1 in small text, 
+            -background1 or -background2 for large text
+          --simple-colors-green-foreground4: 
+            -background1 in small text, 
+            -background1 or -background2 for large text
+          --simple-colors-green-foreground5: 
+            no colors in small text, 
+            -background1 for large text
+      */
+      greys: { small: [5, 5, 4, 4, 1], large: [5, 5, 5, 4, 2] },
+      colors: { small: [4, 3, 3, 1, 0], large: [5, 4, 3, 2, 1] }
+    };
+  },
+  ready: function() {
+    this.__hexCodes = window.SimpleColorsUtility.hexCodes;
+  },
+
+  setTheme: function(accentColor, dark, hexCodes) {
+    if (hexCodes !== null && hexCodes !== "") {
+      if (accentColor !== null && accentColor !== "") {
+        let prop = accentColor.replace(/-([a-z])/g, function(g) {
+          return g[1].toUpperCase();
+        });
+        if (this.__lightTheme.hasOwnProperty(prop)) {
+          this.__lightTheme.accent = this.__lightTheme[prop].slice();
+          this.__darkTheme.accent = this.__darkTheme[prop].slice();
+        } else {
+          this.__lightTheme.accent = this.__hexCodes.accent.slice();
+          this.__darkTheme.accent = this.__hexCodes.accent.slice().reverse();
+        }
+      }
+      this._setThemeProps("--simple-colors-light-theme-", this.__lightTheme);
+      this._setThemeProps("--simple-colors-dark-theme-", this.__darkTheme);
+
+      if (dark) {
+        this._setThemeProps("--simple-colors-", this.__darkTheme);
+      } else {
+        this._setThemeProps("--simple-colors-", this.__lightTheme);
+      }
+    }
+  },
+
+  _setProps: function(prefix, colors) {
+    prefix = prefix
+      .replace("-grey", "")
+      .replace(/([a-z])([A-Z])/g, "$1-$2")
+      .toLowerCase();
+    var customStyle = {};
+    for (let i = 0; i < colors.length; i++) {
+      let half = colors.length / 2,
+        suffix =
+          i < half
+            ? "-foreground" + (i + 1)
+            : "-background" + (colors.length - i);
+      // @todo may need to check shadydom / shadow value
+      if (customStyle !== null && customStyle[prefix + suffix] !== null) {
+        customStyle[prefix + suffix] = colors[i];
+      }
+    }
+    this.updateStyles(customStyle);
+  },
+  _setThemeProps: function(themePrefix, theme) {
+    for (var property in theme) {
+      if (theme.hasOwnProperty(property)) {
+        this._setProps(themePrefix + property, theme[property]);
+      }
+    }
+  },
+  _getLightTheme: function(hexCodes) {
+    let setThemeProps = function(themePrefix, theme) {
+      for (var property in theme) {
+        if (theme.hasOwnProperty(property)) {
+          this._setProps(themePrefix + property, theme[property]);
+        }
+      }
+    };
+    this._setThemeProps("--simple-colors-", hexCodes);
+    this._setThemeProps("--simple-colors-light-theme-", hexCodes);
+    return hexCodes;
+  },
+  _getDarkTheme: function(hexCodes) {
+    let dark = {};
+    for (var property in hexCodes) {
+      if (hexCodes.hasOwnProperty(property)) {
+        dark[property] = hexCodes[property].slice().reverse();
+      }
+    }
+    this._setThemeProps("--simple-colors-dark-theme-", dark);
+    return dark;
+  },
+  getContrasts: function(theme, isColor, isForeground, level, isSmallText) {
+    isSmallText = isSmallText !== undefined ? isSmallText : true;
+    /*  Small text requires the highest contrast ratio for WCAG 2.0 AA compliance. 
+        Small text is any content that is NOT:
+        - bold text that is 14 point or higher,
+        - text that is 18 point or higher,
+        - a decorative element that has no semantic meaning, such as a border, or
+        - a disabled UI element */
+    let results = [];
+    let data = isColor ? this.__wcagaa.colors : this.__wcagaa.greys,
+      levels = data.small[level - 1];
+    if (!isSmallText) levels = data.large[level - 1];
+    for (let i = 0; i < levels; i++) {
+      let suffix = isForeground ? "-background" : "-foreground",
+        index =
+          (isForeground && theme === "light") ||
+          (!isForeground && theme === "dark")
+            ? i + 1
+            : levels - (i - 1);
+
+      if (!isColor) {
+        for (var property in this.__hexCodes) {
+          if (property !== "colorLevels") {
+            let color =
+              property === "grey"
+                ? ""
+                : "-" +
+                  property.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+            results.push({
+              variable:
+                "--simple-colors-" +
+                theme +
+                "-theme" +
+                color +
+                suffix +
+                (i + 1),
+              hexCode: this.__hexCodes[property][index]
+            });
+          }
+        }
+      } else {
+        results.push({
+          variable:
+            "--simple-colors-" + theme + "-theme" + color + suffix + (i + 1),
+          hexCode: this.__hexCodes[property][index]
+        });
+      }
+    }
+    return results;
   }
-  /**
-   * life cycle, element is afixed to the DOM
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.HAXWiring = new HAXWiring();
-    this.HAXWiring.setHaxProperties(
-      SimpleColors.haxProperties,
-      SimpleColors.tag,
-      this
-    );
-  }
-  /**
-   * life cycle, element is removed from the DOM
-   */
-  //disconnectedCallback() {}
-}
-window.customElements.define(SimpleColors.tag, SimpleColors);
+};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

243143

decreased by-23.71%

Number of package files

36

decreased by-14.29%

Lines of code

3066

decreased by-47.59%

Number of medium supply chain risk alerts

3

increased by50%

Dependency changes

• + Added@polymer/iron-icons@^3.0.0

• + Added@polymer/iron-flex-layout@3.0.1(transitive)

• + Added@polymer/iron-icon@3.0.1(transitive)

• + Added@polymer/iron-icons@3.0.1(transitive)

• + Added@polymer/iron-iconset-svg@3.0.1(transitive)

• + Added@polymer/iron-meta@3.0.1(transitive)

• - Removed@lrnwebcomponents/hax-body-behaviors@^0.0.20

• - Removed@lrnwebcomponents/hax-body-behaviors@0.0.20(transitive)