@lrnwebcomponents/simple-colors - npm Package Compare versions

Comparing version 4.0.4 to 4.0.5

lib/simple-colors-picker.js

@@ -5,5 +5,5 @@ /**
  */
-import { html, css } from "lit";
-import { SimpleColors } from "../simple-colors.js";
-import "@lrnwebcomponents/simple-picker/simple-picker.js";
+import { LitElement, html, css } from "lit";
+import { SimpleColorsSuper } from "../simple-colors.js";
+import { SimplePickerBehaviors } from "@lrnwebcomponents/simple-picker/simple-picker.js";
 
@@ -23,3 +23,5 @@ /**
  */
-class SimpleColorsPicker extends SimpleColors {
+class SimpleColorsPicker extends SimplePickerBehaviors(
+  SimpleColorsSuper(LitElement)
+) {
   static get styles() {
@@ -38,34 +40,5 @@ return [
   }
-  // render function
-  render() {
-    return html`
-      <simple-picker
-        id="picker"
-        ?block-label="${this.blockLabel}"
-        ?disabled="${this.disabled}"
-        ?expanded="${this.expanded}"
-        ?hide-option-labels="${this.shades}"
-        @change="${this._handleChange}"
-        @collapse="${this._handleCollapse}"
-        @expand="${this._handleExpand}"
-        ?justify="${this.justify}"
-        @option-focus="${this._handleOptionFocus}"
-        aria-labelledby="${this.ariaLabelledby}"
-        .label="${this.label}"
-        .options="${this.options}"
-        .value="${this.value}"
-      >
-      </simple-picker>
-    `;
-  }
   constructor() {
     super();
-    this.ariaLabelledby = null;
-    this.blockLabel = false;
-    this.disabled = false;
-    this.expanded = false;
-    this.label = null;
     this.shades = false;
-    this.value = null;
-    this.__ready = false;
     this.options = this._getOptions(this.colors, this.shades, this.dark);
@@ -75,13 +48,14 @@ }
   updated(changedProperties) {
+    if (super.updated) super.updated(changedProperties);
     changedProperties.forEach((oldValue, propName) => {
       if (propName === "colors")
         this.options = this._getOptions(this.colors, this.shades, this.dark);
-      if (propName === "shades")
+      if (propName === "shades") {
         this.options = this._getOptions(this.colors, this.shades, this.dark);
+        this.hideOptionLabels = this.shades;
+      }
       if (propName === "dark")
         this.options = this._getOptions(this.colors, this.shades, this.dark);
-      if (propName === "value") this._fireValueChangedEvent();
-
-      this._fireChangeEvent();
     });
+    if (this.__ready !== undefined) this._fireChangeEvent();
   }
@@ -93,66 +67,3 @@
       ...super.properties,
-
       /**
-       * Optional. Sets the aria-labelledby attribute
-       */
-      ariaLabelledby: {
-        type: String,
-        attribute: "aria-labelledby",
-      },
-
-      /**
-       * Display as a block
-       */
-      blockLabel: {
-        type: Boolean,
-        attribute: "block-label",
-      },
-
-      /**
-       * Is the picker disabled?
-       */
-      disabled: {
-        type: Boolean,
-      },
-
-      /**
-       * Is it expanded?
-       */
-      expanded: {
-        type: Boolean,
-        reflect: true,
-      },
-
-      /**
-       * Is it expanded?
-       */
-      justify: {
-        type: Boolean,
-        reflect: true,
-        attribute: "justify",
-      },
-
-      /**
-       * Optional. The label for the picker input
-       */
-      label: {
-        type: String,
-      },
-
-      /**
-       * An array of options for the picker, eg.: `
-[
-  {
-    "icon": "editor:format-paint",      //Optional. Used if the picker is used as an icon picker.
-    "alt": "Blue",                      //Required for accessibility. Alt text description of the choice.
-    "style": "background-color: blue;", //Optional. Used to set an option's style.
-    ...                                 //Optional. Any other properties that should be captured as part of the selected option's value
-  },...
-]`
-        */
-      options: {
-        type: Array,
-        reflect: false, //,observer: false
-      },
-      /**
        * Show all shades instead of just main accent-colors
@@ -164,16 +75,2 @@ */
       },
-
-      /**
-       * The value of the option.
-       */
-      value: {
-        type: String,
-        reflect: true, //,notify: true
-      },
-      /**
-       *
-       */
-      __ready: {
-        type: Boolean,
-      },
     };
@@ -189,2 +86,9 @@ }
 
+  firstUpdated(changedProperties) {
+    if (super.firstUpdated) {
+      super.firstUpdated(changedProperties);
+    }
+    this.__ready = true;
+  }
+
   /**
@@ -196,3 +100,3 @@ * gets options for the selectors
   _getOptions(colors, shades, dark) {
-    let options = [[]],
+    let options = [],
       theme = dark !== false ? "dark" : "default";
@@ -235,11 +139,2 @@ if (shades === false) {
    *
-   * @event value-changed
-   */
-  _fireValueChangedEvent() {
-    this.dispatchEvent(new CustomEvent("value-changed", { detail: this }));
-  }
-
-  /**
-   * Fires with any property change.
-   *
    * @event change
@@ -252,40 +147,2 @@ */
   }
-
-  /**
-   * handles when the picker's value changes
-   */
-  _handleChange(e) {
-    this.value = e.detail.value;
-    if (this.__ready !== undefined) this._fireChangeEvent();
-  }
-
-  /**
-   * Fires when the picker collapses.
-   *
-   * @event collapse
-   */
-  _handleCollapse() {
-    if (this.__ready !== undefined)
-      this.dispatchEvent(new CustomEvent("collapse", { detail: this }));
-  }
-
-  /**
-   * Fires when the picker expands.
-   *
-   * @event expand
-   */
-  _handleExpand() {
-    if (this.__ready !== undefined)
-      this.dispatchEvent(new CustomEvent("expand", { detail: this }));
-  }
-
-  /**
-   * Fires when the picker's focus changes
-   *
-   * @event option-focus
-   */
-  _handleOptionFocus(e) {
-    if (this.__ready !== undefined)
-      this.dispatchEvent(new CustomEvent("option-focus", { detail: this }));
-  }
 }
@@ -292,0 +149,0 @@

package.json

@@ -16,5 +16,7 @@ {
     },
-    "sharedStyles": []
+    "sharedStyles": [
+      "screenreaderOnlyCSS"
+    ]
   },
-  "version": "4.0.4",
+  "version": "4.0.5",
   "description": "Automated conversion of simple-colors/",
@@ -34,7 +36,6 @@ "repository": {
     "watch": "gulp dev --gulpfile=gulpfile.cjs",
-    "serve": "es-dev-server -c ../../es-dev-server.config.js",
+    "serve": "web-dev-server -c ../../web-dev-server.config.js",
     "lighthouse": "gulp lighthouse --gulpfile=gulpfile.cjs",
-    "test": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs",
-    "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs --watch",
-    "test:browsers": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs --playwright --browsers chromium firefox webkit"
+    "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs --playwright --browsers chromium firefox --watch",
+    "test": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs --playwright --browsers chromium firefox"
   },
@@ -46,18 +47,16 @@ "author": {
   "dependencies": {
-    "@lrnwebcomponents/simple-colors-shared-styles": "^4.0.1",
-    "@lrnwebcomponents/simple-picker": "^4.0.4",
-    "lit": "2.0.0"
+    "@lrnwebcomponents/a11y-utils": "^4.0.5",
+    "@lrnwebcomponents/simple-colors-shared-styles": "^4.0.5",
+    "@lrnwebcomponents/simple-picker": "^4.0.5",
+    "lit": "^2.0.2"
   },
   "devDependencies": {
     "@lrnwebcomponents/deduping-fix": "^4.0.0",
-    "@lrnwebcomponents/simple-modal": "^4.0.4",
-    "@lrnwebcomponents/storybook-utilities": "^4.0.4",
-    "@open-wc/testing": "2.5.33",
+    "@lrnwebcomponents/simple-modal": "^4.0.5",
+    "@lrnwebcomponents/storybook-utilities": "^4.0.5",
+    "@open-wc/testing": "3.0.3",
     "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
     "@polymer/iron-demo-helpers": "3.1.0",
-    "@polymer/polymer": "^3.3.1",
-    "@web/test-runner": "0.13.5",
-    "@web/test-runner-commands": "0.4.5",
-    "@web/test-runner-playwright": "0.8.6",
-    "@web/test-runner-puppeteer": "0.10.0",
+    "@polymer/polymer": "^3.4.1",
+    "@web/dev-server": "0.1.28",
     "@webcomponents/webcomponentsjs": "2.6.0",
@@ -67,4 +66,2 @@ "concurrently": "5.3.0",
     "lodash": "^4.17.21",
-    "polymer-build": "3.1.4",
-    "polymer-cli": "1.9.11",
     "wct-browser-legacy": "1.0.2",
@@ -81,3 +78,3 @@ "web-animations-js": "2.3.2"
   ],
-  "gitHead": "d4cd14c5c57b408201bf4fa8f41d714de8b88f11"
+  "gitHead": "ca4a1abb2fc0e1822268b994850d371d92e0df54"
 }

simple-colors.js

@@ -7,2 +7,3 @@ /**
 import { SimpleColorsSharedStylesGlobal } from "@lrnwebcomponents/simple-colors-shared-styles/simple-colors-shared-styles.js";
+import { screenreaderOnlyCSS } from "@lrnwebcomponents/a11y-utils/a11y-utils.js";
 const SimpleColorsSuper = function (SuperClass) {
@@ -18,3 +19,3 @@ return class extends SuperClass {
         styles,
-
+        screenreaderOnlyCSS,
         css`
@@ -21,0 +22,0 @@ :host([dark]) {

simple-colors.umd.js

@@ -1,1 +0,1 @@
-!function(e,l){"object"==typeof exports&&"undefined"!=typeof module?l(exports,require("lit"),require("@lrnwebcomponents/simple-colors-shared-styles/simple-colors-shared-styles.js")):"function"==typeof define&&define.amd?define(["exports","lit","@lrnwebcomponents/simple-colors-shared-styles/simple-colors-shared-styles.js"],l):l((e="undefined"!=typeof globalThis?globalThis:e||self).SimpleColors={},e.lit,e.simpleColorsSharedStyles_js)}(this,(function(e,l,c){"use strict";function t(e,l){var c=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);l&&(t=t.filter((function(l){return Object.getOwnPropertyDescriptor(e,l).enumerable}))),c.push.apply(c,t)}return c}function o(e){for(var l=1;l<arguments.length;l++){var c=null!=arguments[l]?arguments[l]:{};l%2?t(Object(c),!0).forEach((function(l){f(e,l,c[l])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(c)):t(Object(c)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(c,l))}))}return e}function n(e,l){if(!(e instanceof l))throw new TypeError("Cannot call a class as a function")}function s(e,l){for(var c=0;c<l.length;c++){var t=l[c];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}function f(e,l,c){return l in e?Object.defineProperty(e,l,{value:c,enumerable:!0,configurable:!0,writable:!0}):e[l]=c,e}function m(e,l){if("function"!=typeof l&&null!==l)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(l&&l.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),l&&r(e,l)}function a(e){return(a=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function r(e,l){return(r=Object.setPrototypeOf||function(e,l){return e.__proto__=l,e})(e,l)}function i(e,l){if(l&&("object"==typeof l||"function"==typeof l))return l;if(void 0!==l)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function d(e){var l=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var c,t=a(e);if(l){var o=a(this).constructor;c=Reflect.construct(t,arguments,o)}else c=t.apply(this,arguments);return i(this,c)}}function p(e,l,c){return(p="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,l,c){var t=function(e,l){for(;!Object.prototype.hasOwnProperty.call(e,l)&&null!==(e=a(e)););return e}(e,l);if(t){var o=Object.getOwnPropertyDescriptor(t,l);return o.get?o.get.call(c):o.value}})(e,l,c||e)}function h(e,l){return l||(l=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(l)}}))}var u,b,x=function(e){return function(e){m(x,e);var t,f,r,i=d(x);function x(){var e;return n(this,x),(e=i.call(this)).accentColor="grey",e.dark=!1,e.colors=c.SimpleColorsSharedStylesGlobal.colors,e}return t=x,r=[{key:"styles",get:function(){var e=l.css("");return p(a(x),"styles",this)&&(e=p(a(x),"styles",this)),[e,l.css(b||(b=h(["\n:host([dark]) {\n  --simple-colors-default-theme-accent-1: #000000;\n  --simple-colors-default-theme-accent-2: #111111;\n  --simple-colors-default-theme-accent-3: #222222;\n  --simple-colors-default-theme-accent-4: #333333;\n  --simple-colors-default-theme-accent-5: #444444;\n  --simple-colors-default-theme-accent-6: #666666;\n  --simple-colors-default-theme-accent-7: #999999;\n  --simple-colors-default-theme-accent-8: #bbbbbb;\n  --simple-colors-default-theme-accent-9: #cccccc;\n  --simple-colors-default-theme-accent-10: #dddddd;\n  --simple-colors-default-theme-accent-11: #eeeeee;\n  --simple-colors-default-theme-accent-12: #ffffff;\n  \n  --simple-colors-default-theme-grey-1: #000000;\n  --simple-colors-default-theme-grey-2: #111111;\n  --simple-colors-default-theme-grey-3: #222222;\n  --simple-colors-default-theme-grey-4: #333333;\n  --simple-colors-default-theme-grey-5: #444444;\n  --simple-colors-default-theme-grey-6: #666666;\n  --simple-colors-default-theme-grey-7: #999999;\n  --simple-colors-default-theme-grey-8: #bbbbbb;\n  --simple-colors-default-theme-grey-9: #cccccc;\n  --simple-colors-default-theme-grey-10: #dddddd;\n  --simple-colors-default-theme-grey-11: #eeeeee;\n  --simple-colors-default-theme-grey-12: #ffffff;\n  \n  --simple-colors-default-theme-red-1: #3f0000;\n  --simple-colors-default-theme-red-2: #520000;\n  --simple-colors-default-theme-red-3: #670000;\n  --simple-colors-default-theme-red-4: #850000;\n  --simple-colors-default-theme-red-5: #ac0000;\n  --simple-colors-default-theme-red-6: #ee0000;\n  --simple-colors-default-theme-red-7: #ff2222;\n  --simple-colors-default-theme-red-8: #fd5151;\n  --simple-colors-default-theme-red-9: #ff7474;\n  --simple-colors-default-theme-red-10: #ff8f8f;\n  --simple-colors-default-theme-red-11: #ffaeae;\n  --simple-colors-default-theme-red-12: #ffdddd;\n  \n  --simple-colors-default-theme-pink-1: #440019;\n  --simple-colors-default-theme-pink-2: #5a0020;\n  --simple-colors-default-theme-pink-3: #78002b;\n  --simple-colors-default-theme-pink-4: #980036;\n  --simple-colors-default-theme-pink-5: #b80042;\n  --simple-colors-default-theme-pink-6: #da004e;\n  --simple-colors-default-theme-pink-7: #ff3996;\n  --simple-colors-default-theme-pink-8: #fd60aa;\n  --simple-colors-default-theme-pink-9: #ff73b5;\n  --simple-colors-default-theme-pink-10: #ff87c0;\n  --simple-colors-default-theme-pink-11: #ffa5cf;\n  --simple-colors-default-theme-pink-12: #ffe6f1;\n  \n  --simple-colors-default-theme-purple-1: #200025;\n  --simple-colors-default-theme-purple-2: #33003a;\n  --simple-colors-default-theme-purple-3: #490052;\n  --simple-colors-default-theme-purple-4: #6c0079;\n  --simple-colors-default-theme-purple-5: #8a009b;\n  --simple-colors-default-theme-purple-6: #a500ba;\n  --simple-colors-default-theme-purple-7: #e200ff;\n  --simple-colors-default-theme-purple-8: #ed61ff;\n  --simple-colors-default-theme-purple-9: #f07cff;\n  --simple-colors-default-theme-purple-10: #f394ff;\n  --simple-colors-default-theme-purple-11: #f4affd;\n  --simple-colors-default-theme-purple-12: #fce6ff;\n  \n  --simple-colors-default-theme-deep-purple-1: #1d0033;\n  --simple-colors-default-theme-deep-purple-2: #2a0049;\n  --simple-colors-default-theme-deep-purple-3: #3a0063;\n  --simple-colors-default-theme-deep-purple-4: #4c0081;\n  --simple-colors-default-theme-deep-purple-5: #5d009f;\n  --simple-colors-default-theme-deep-purple-6: #7e00d8;\n  --simple-colors-default-theme-deep-purple-7: #a931ff;\n  --simple-colors-default-theme-deep-purple-8: #b44aff;\n  --simple-colors-default-theme-deep-purple-9: #bb63f9;\n  --simple-colors-default-theme-deep-purple-10: #c97eff;\n  --simple-colors-default-theme-deep-purple-11: #ddacff;\n  --simple-colors-default-theme-deep-purple-12: #f3e4ff;\n  \n  --simple-colors-default-theme-indigo-1: #0a0030;\n  --simple-colors-default-theme-indigo-2: #100049;\n  --simple-colors-default-theme-indigo-3: #160063;\n  --simple-colors-default-theme-indigo-4: #20008c;\n  --simple-colors-default-theme-indigo-5: #2801b0;\n  --simple-colors-default-theme-indigo-6: #3a00ff;\n  --simple-colors-default-theme-indigo-7: #835fff;\n  --simple-colors-default-theme-indigo-8: #9373ff;\n  --simple-colors-default-theme-indigo-9: #9e82ff;\n  --simple-colors-default-theme-indigo-10: #af97ff;\n  --simple-colors-default-theme-indigo-11: #c3b2ff;\n  --simple-colors-default-theme-indigo-12: #e5ddff;\n  \n  --simple-colors-default-theme-blue-1: #001333;\n  --simple-colors-default-theme-blue-2: #001947;\n  --simple-colors-default-theme-blue-3: #002569;\n  --simple-colors-default-theme-blue-4: #003494;\n  --simple-colors-default-theme-blue-5: #0041bb;\n  --simple-colors-default-theme-blue-6: #0059ff;\n  --simple-colors-default-theme-blue-7: #4083ff;\n  --simple-colors-default-theme-blue-8: #5892fd;\n  --simple-colors-default-theme-blue-9: #74a5ff;\n  --simple-colors-default-theme-blue-10: #95baff;\n  --simple-colors-default-theme-blue-11: #acc9ff;\n  --simple-colors-default-theme-blue-12: #e2ecff;\n  \n  --simple-colors-default-theme-light-blue-1: #001b36;\n  --simple-colors-default-theme-light-blue-2: #002850;\n  --simple-colors-default-theme-light-blue-3: #003f7d;\n  --simple-colors-default-theme-light-blue-4: #0055a8;\n  --simple-colors-default-theme-light-blue-5: #0066ca;\n  --simple-colors-default-theme-light-blue-6: #007ffc;\n  --simple-colors-default-theme-light-blue-7: #41a1ff;\n  --simple-colors-default-theme-light-blue-8: #58adff;\n  --simple-colors-default-theme-light-blue-9: #65b3ff;\n  --simple-colors-default-theme-light-blue-10: #92c9ff;\n  --simple-colors-default-theme-light-blue-11: #a1d1ff;\n  --simple-colors-default-theme-light-blue-12: #cde8ff;\n  \n  --simple-colors-default-theme-cyan-1: #001a20;\n  --simple-colors-default-theme-cyan-2: #002c38;\n  --simple-colors-default-theme-cyan-3: #003f50;\n  --simple-colors-default-theme-cyan-4: #005970;\n  --simple-colors-default-theme-cyan-5: #007999;\n  --simple-colors-default-theme-cyan-6: #009dc7;\n  --simple-colors-default-theme-cyan-7: #00c9ff;\n  --simple-colors-default-theme-cyan-8: #1ccfff;\n  --simple-colors-default-theme-cyan-9: #33d4ff;\n  --simple-colors-default-theme-cyan-10: #77e2ff;\n  --simple-colors-default-theme-cyan-11: #9beaff;\n  --simple-colors-default-theme-cyan-12: #ddf8ff;\n  \n  --simple-colors-default-theme-teal-1: #001b14;\n  --simple-colors-default-theme-teal-2: #002a20;\n  --simple-colors-default-theme-teal-3: #003829;\n  --simple-colors-default-theme-teal-4: #004e3a;\n  --simple-colors-default-theme-teal-5: #007658;\n  --simple-colors-default-theme-teal-6: #009d75;\n  --simple-colors-default-theme-teal-7: #00ff9c;\n  --simple-colors-default-theme-teal-8: #29ffac;\n  --simple-colors-default-theme-teal-9: #56ffbd;\n  --simple-colors-default-theme-teal-10: #79ffcb;\n  --simple-colors-default-theme-teal-11: #98ffd7;\n  --simple-colors-default-theme-teal-12: #d9fff0;\n  \n  --simple-colors-default-theme-green-1: #001d0c;\n  --simple-colors-default-theme-green-2: #002a11;\n  --simple-colors-default-theme-green-3: #003d18;\n  --simple-colors-default-theme-green-4: #005a23;\n  --simple-colors-default-theme-green-5: #00762e;\n  --simple-colors-default-theme-green-6: #008c37;\n  --simple-colors-default-theme-green-7: #00f961;\n  --simple-colors-default-theme-green-8: #24ff70;\n  --simple-colors-default-theme-green-9: #49ff88;\n  --simple-colors-default-theme-green-10: #79ffa7;\n  --simple-colors-default-theme-green-11: #acffc9;\n  --simple-colors-default-theme-green-12: #e1ffeb;\n  \n  --simple-colors-default-theme-light-green-1: #0d2000;\n  --simple-colors-default-theme-light-green-2: #143000;\n  --simple-colors-default-theme-light-green-3: #1b3f00;\n  --simple-colors-default-theme-light-green-4: #296100;\n  --simple-colors-default-theme-light-green-5: #357f00;\n  --simple-colors-default-theme-light-green-6: #429d00;\n  --simple-colors-default-theme-light-green-7: #6fff00;\n  --simple-colors-default-theme-light-green-8: #8efd38;\n  --simple-colors-default-theme-light-green-9: #a1fd5a;\n  --simple-colors-default-theme-light-green-10: #b1ff75;\n  --simple-colors-default-theme-light-green-11: #c7ff9b;\n  --simple-colors-default-theme-light-green-12: #ebffdb;\n  \n  --simple-colors-default-theme-lime-1: #182400;\n  --simple-colors-default-theme-lime-2: #223400;\n  --simple-colors-default-theme-lime-3: #293f00;\n  --simple-colors-default-theme-lime-4: #3b5a00;\n  --simple-colors-default-theme-lime-5: #4d7600;\n  --simple-colors-default-theme-lime-6: #649900;\n  --simple-colors-default-theme-lime-7: #aeff00;\n  --simple-colors-default-theme-lime-8: #bdff2d;\n  --simple-colors-default-theme-lime-9: #caff58;\n  --simple-colors-default-theme-lime-10: #d4ff77;\n  --simple-colors-default-theme-lime-11: #dfff9b;\n  --simple-colors-default-theme-lime-12: #f1ffd2;\n  \n  --simple-colors-default-theme-yellow-1: #242400;\n  --simple-colors-default-theme-yellow-2: #303000;\n  --simple-colors-default-theme-yellow-3: #454400;\n  --simple-colors-default-theme-yellow-4: #585700;\n  --simple-colors-default-theme-yellow-5: #787700;\n  --simple-colors-default-theme-yellow-6: #929100;\n  --simple-colors-default-theme-yellow-7: #f6f600;\n  --simple-colors-default-theme-yellow-8: #ffff3a;\n  --simple-colors-default-theme-yellow-9: #ffff7c;\n  --simple-colors-default-theme-yellow-10: #ffff90;\n  --simple-colors-default-theme-yellow-11: #ffffac;\n  --simple-colors-default-theme-yellow-12: #ffffd5;\n  \n  --simple-colors-default-theme-amber-1: #221a00;\n  --simple-colors-default-theme-amber-2: #302500;\n  --simple-colors-default-theme-amber-3: #413200;\n  --simple-colors-default-theme-amber-4: #614b00;\n  --simple-colors-default-theme-amber-5: #876800;\n  --simple-colors-default-theme-amber-6: #b28900;\n  --simple-colors-default-theme-amber-7: #ffc500;\n  --simple-colors-default-theme-amber-8: #ffc235;\n  --simple-colors-default-theme-amber-9: #ffcf5e;\n  --simple-colors-default-theme-amber-10: #ffd677;\n  --simple-colors-default-theme-amber-11: #ffdf92;\n  --simple-colors-default-theme-amber-12: #fff2d4;\n  \n  --simple-colors-default-theme-orange-1: #2c1400;\n  --simple-colors-default-theme-orange-2: #3d1c00;\n  --simple-colors-default-theme-orange-3: #612d00;\n  --simple-colors-default-theme-orange-4: #833d00;\n  --simple-colors-default-theme-orange-5: #ae5100;\n  --simple-colors-default-theme-orange-6: #e56a00;\n  --simple-colors-default-theme-orange-7: #ff9625;\n  --simple-colors-default-theme-orange-8: #ff9e36;\n  --simple-colors-default-theme-orange-9: #ffb05c;\n  --simple-colors-default-theme-orange-10: #ffbd75;\n  --simple-colors-default-theme-orange-11: #ffca92;\n  --simple-colors-default-theme-orange-12: #ffebd7;\n  \n  --simple-colors-default-theme-deep-orange-1: #240700;\n  --simple-colors-default-theme-deep-orange-2: #3a0c00;\n  --simple-colors-default-theme-deep-orange-3: #561100;\n  --simple-colors-default-theme-deep-orange-4: #8a1c00;\n  --simple-colors-default-theme-deep-orange-5: #b92500;\n  --simple-colors-default-theme-deep-orange-6: #f53100;\n  --simple-colors-default-theme-deep-orange-7: #ff6c3c;\n  --simple-colors-default-theme-deep-orange-8: #ff7649;\n  --simple-colors-default-theme-deep-orange-9: #ff8a64;\n  --simple-colors-default-theme-deep-orange-10: #ffa588;\n  --simple-colors-default-theme-deep-orange-11: #ffb299;\n  --simple-colors-default-theme-deep-orange-12: #ffe7e0;\n  \n  --simple-colors-default-theme-brown-1: #200e09;\n  --simple-colors-default-theme-brown-2: #2c140e;\n  --simple-colors-default-theme-brown-3: #3b1e15;\n  --simple-colors-default-theme-brown-4: #5b3328;\n  --simple-colors-default-theme-brown-5: #724539;\n  --simple-colors-default-theme-brown-6: #85574a;\n  --simple-colors-default-theme-brown-7: #a47060;\n  --simple-colors-default-theme-brown-8: #ac7868;\n  --simple-colors-default-theme-brown-9: #b68373;\n  --simple-colors-default-theme-brown-10: #c59485;\n  --simple-colors-default-theme-brown-11: #e5b8aa;\n  --simple-colors-default-theme-brown-12: #f0e2de;\n  \n  --simple-colors-default-theme-blue-grey-1: #0f1518;\n  --simple-colors-default-theme-blue-grey-2: #182023;\n  --simple-colors-default-theme-blue-grey-3: #1e282c;\n  --simple-colors-default-theme-blue-grey-4: #2f3e45;\n  --simple-colors-default-theme-blue-grey-5: #40535b;\n  --simple-colors-default-theme-blue-grey-6: #56707c;\n  --simple-colors-default-theme-blue-grey-7: #718892;\n  --simple-colors-default-theme-blue-grey-8: #7a8f98;\n  --simple-colors-default-theme-blue-grey-9: #8d9fa7;\n  --simple-colors-default-theme-blue-grey-10: #9badb6;\n  --simple-colors-default-theme-blue-grey-11: #b1c5ce;\n  --simple-colors-default-theme-blue-grey-12: #e7eff1; }\n\n:host([accent-color=grey]) {\n  --simple-colors-default-theme-accent-1: #ffffff;\n  --simple-colors-default-theme-accent-2: #eeeeee;\n  --simple-colors-default-theme-accent-3: #dddddd;\n  --simple-colors-default-theme-accent-4: #cccccc;\n  --simple-colors-default-theme-accent-5: #bbbbbb;\n  --simple-colors-default-theme-accent-6: #999999;\n  --simple-colors-default-theme-accent-7: #666666;\n  --simple-colors-default-theme-accent-8: #444444;\n  --simple-colors-default-theme-accent-9: #333333;\n  --simple-colors-default-theme-accent-10: #222222;\n  --simple-colors-default-theme-accent-11: #111111;\n  --simple-colors-default-theme-accent-12: #000000;\n  --simple-colors-fixed-theme-accent-1: #ffffff;\n  --simple-colors-fixed-theme-accent-2: #eeeeee;\n  --simple-colors-fixed-theme-accent-3: #dddddd;\n  --simple-colors-fixed-theme-accent-4: #cccccc;\n  --simple-colors-fixed-theme-accent-5: #bbbbbb;\n  --simple-colors-fixed-theme-accent-6: #999999;\n  --simple-colors-fixed-theme-accent-7: #666666;\n  --simple-colors-fixed-theme-accent-8: #444444;\n  --simple-colors-fixed-theme-accent-9: #333333;\n  --simple-colors-fixed-theme-accent-10: #222222;\n  --simple-colors-fixed-theme-accent-11: #111111;\n  --simple-colors-fixed-theme-accent-12: #000000; }\n\n:host([dark][accent-color=grey]) {\n  --simple-colors-default-theme-accent-1: #000000;\n  --simple-colors-default-theme-accent-2: #111111;\n  --simple-colors-default-theme-accent-3: #222222;\n  --simple-colors-default-theme-accent-4: #333333;\n  --simple-colors-default-theme-accent-5: #444444;\n  --simple-colors-default-theme-accent-6: #666666;\n  --simple-colors-default-theme-accent-7: #999999;\n  --simple-colors-default-theme-accent-8: #bbbbbb;\n  --simple-colors-default-theme-accent-9: #cccccc;\n  --simple-colors-default-theme-accent-10: #dddddd;\n  --simple-colors-default-theme-accent-11: #eeeeee;\n  --simple-colors-default-theme-accent-12: #ffffff; }\n\n:host([accent-color=red]) {\n  --simple-colors-default-theme-accent-1: #ffdddd;\n  --simple-colors-default-theme-accent-2: #ffaeae;\n  --simple-colors-default-theme-accent-3: #ff8f8f;\n  --simple-colors-default-theme-accent-4: #ff7474;\n  --simple-colors-default-theme-accent-5: #fd5151;\n  --simple-colors-default-theme-accent-6: #ff2222;\n  --simple-colors-default-theme-accent-7: #ee0000;\n  --simple-colors-default-theme-accent-8: #ac0000;\n  --simple-colors-default-theme-accent-9: #850000;\n  --simple-colors-default-theme-accent-10: #670000;\n  --simple-colors-default-theme-accent-11: #520000;\n  --simple-colors-default-theme-accent-12: #3f0000;\n  --simple-colors-fixed-theme-accent-1: #ffdddd;\n  --simple-colors-fixed-theme-accent-2: #ffaeae;\n  --simple-colors-fixed-theme-accent-3: #ff8f8f;\n  --simple-colors-fixed-theme-accent-4: #ff7474;\n  --simple-colors-fixed-theme-accent-5: #fd5151;\n  --simple-colors-fixed-theme-accent-6: #ff2222;\n  --simple-colors-fixed-theme-accent-7: #ee0000;\n  --simple-colors-fixed-theme-accent-8: #ac0000;\n  --simple-colors-fixed-theme-accent-9: #850000;\n  --simple-colors-fixed-theme-accent-10: #670000;\n  --simple-colors-fixed-theme-accent-11: #520000;\n  --simple-colors-fixed-theme-accent-12: #3f0000; }\n\n:host([dark][accent-color=red]) {\n  --simple-colors-default-theme-accent-1: #3f0000;\n  --simple-colors-default-theme-accent-2: #520000;\n  --simple-colors-default-theme-accent-3: #670000;\n  --simple-colors-default-theme-accent-4: #850000;\n  --simple-colors-default-theme-accent-5: #ac0000;\n  --simple-colors-default-theme-accent-6: #ee0000;\n  --simple-colors-default-theme-accent-7: #ff2222;\n  --simple-colors-default-theme-accent-8: #fd5151;\n  --simple-colors-default-theme-accent-9: #ff7474;\n  --simple-colors-default-theme-accent-10: #ff8f8f;\n  --simple-colors-default-theme-accent-11: #ffaeae;\n  --simple-colors-default-theme-accent-12: #ffdddd; }\n\n:host([accent-color=pink]) {\n  --simple-colors-default-theme-accent-1: #ffe6f1;\n  --simple-colors-default-theme-accent-2: #ffa5cf;\n  --simple-colors-default-theme-accent-3: #ff87c0;\n  --simple-colors-default-theme-accent-4: #ff73b5;\n  --simple-colors-default-theme-accent-5: #fd60aa;\n  --simple-colors-default-theme-accent-6: #ff3996;\n  --simple-colors-default-theme-accent-7: #da004e;\n  --simple-colors-default-theme-accent-8: #b80042;\n  --simple-colors-default-theme-accent-9: #980036;\n  --simple-colors-default-theme-accent-10: #78002b;\n  --simple-colors-default-theme-accent-11: #5a0020;\n  --simple-colors-default-theme-accent-12: #440019;\n  --simple-colors-fixed-theme-accent-1: #ffe6f1;\n  --simple-colors-fixed-theme-accent-2: #ffa5cf;\n  --simple-colors-fixed-theme-accent-3: #ff87c0;\n  --simple-colors-fixed-theme-accent-4: #ff73b5;\n  --simple-colors-fixed-theme-accent-5: #fd60aa;\n  --simple-colors-fixed-theme-accent-6: #ff3996;\n  --simple-colors-fixed-theme-accent-7: #da004e;\n  --simple-colors-fixed-theme-accent-8: #b80042;\n  --simple-colors-fixed-theme-accent-9: #980036;\n  --simple-colors-fixed-theme-accent-10: #78002b;\n  --simple-colors-fixed-theme-accent-11: #5a0020;\n  --simple-colors-fixed-theme-accent-12: #440019; }\n\n:host([dark][accent-color=pink]) {\n  --simple-colors-default-theme-accent-1: #440019;\n  --simple-colors-default-theme-accent-2: #5a0020;\n  --simple-colors-default-theme-accent-3: #78002b;\n  --simple-colors-default-theme-accent-4: #980036;\n  --simple-colors-default-theme-accent-5: #b80042;\n  --simple-colors-default-theme-accent-6: #da004e;\n  --simple-colors-default-theme-accent-7: #ff3996;\n  --simple-colors-default-theme-accent-8: #fd60aa;\n  --simple-colors-default-theme-accent-9: #ff73b5;\n  --simple-colors-default-theme-accent-10: #ff87c0;\n  --simple-colors-default-theme-accent-11: #ffa5cf;\n  --simple-colors-default-theme-accent-12: #ffe6f1; }\n\n:host([accent-color=purple]) {\n  --simple-colors-default-theme-accent-1: #fce6ff;\n  --simple-colors-default-theme-accent-2: #f4affd;\n  --simple-colors-default-theme-accent-3: #f394ff;\n  --simple-colors-default-theme-accent-4: #f07cff;\n  --simple-colors-default-theme-accent-5: #ed61ff;\n  --simple-colors-default-theme-accent-6: #e200ff;\n  --simple-colors-default-theme-accent-7: #a500ba;\n  --simple-colors-default-theme-accent-8: #8a009b;\n  --simple-colors-default-theme-accent-9: #6c0079;\n  --simple-colors-default-theme-accent-10: #490052;\n  --simple-colors-default-theme-accent-11: #33003a;\n  --simple-colors-default-theme-accent-12: #200025;\n  --simple-colors-fixed-theme-accent-1: #fce6ff;\n  --simple-colors-fixed-theme-accent-2: #f4affd;\n  --simple-colors-fixed-theme-accent-3: #f394ff;\n  --simple-colors-fixed-theme-accent-4: #f07cff;\n  --simple-colors-fixed-theme-accent-5: #ed61ff;\n  --simple-colors-fixed-theme-accent-6: #e200ff;\n  --simple-colors-fixed-theme-accent-7: #a500ba;\n  --simple-colors-fixed-theme-accent-8: #8a009b;\n  --simple-colors-fixed-theme-accent-9: #6c0079;\n  --simple-colors-fixed-theme-accent-10: #490052;\n  --simple-colors-fixed-theme-accent-11: #33003a;\n  --simple-colors-fixed-theme-accent-12: #200025; }\n\n:host([dark][accent-color=purple]) {\n  --simple-colors-default-theme-accent-1: #200025;\n  --simple-colors-default-theme-accent-2: #33003a;\n  --simple-colors-default-theme-accent-3: #490052;\n  --simple-colors-default-theme-accent-4: #6c0079;\n  --simple-colors-default-theme-accent-5: #8a009b;\n  --simple-colors-default-theme-accent-6: #a500ba;\n  --simple-colors-default-theme-accent-7: #e200ff;\n  --simple-colors-default-theme-accent-8: #ed61ff;\n  --simple-colors-default-theme-accent-9: #f07cff;\n  --simple-colors-default-theme-accent-10: #f394ff;\n  --simple-colors-default-theme-accent-11: #f4affd;\n  --simple-colors-default-theme-accent-12: #fce6ff; }\n\n:host([accent-color=deep-purple]) {\n  --simple-colors-default-theme-accent-1: #f3e4ff;\n  --simple-colors-default-theme-accent-2: #ddacff;\n  --simple-colors-default-theme-accent-3: #c97eff;\n  --simple-colors-default-theme-accent-4: #bb63f9;\n  --simple-colors-default-theme-accent-5: #b44aff;\n  --simple-colors-default-theme-accent-6: #a931ff;\n  --simple-colors-default-theme-accent-7: #7e00d8;\n  --simple-colors-default-theme-accent-8: #5d009f;\n  --simple-colors-default-theme-accent-9: #4c0081;\n  --simple-colors-default-theme-accent-10: #3a0063;\n  --simple-colors-default-theme-accent-11: #2a0049;\n  --simple-colors-default-theme-accent-12: #1d0033;\n  --simple-colors-fixed-theme-accent-1: #f3e4ff;\n  --simple-colors-fixed-theme-accent-2: #ddacff;\n  --simple-colors-fixed-theme-accent-3: #c97eff;\n  --simple-colors-fixed-theme-accent-4: #bb63f9;\n  --simple-colors-fixed-theme-accent-5: #b44aff;\n  --simple-colors-fixed-theme-accent-6: #a931ff;\n  --simple-colors-fixed-theme-accent-7: #7e00d8;\n  --simple-colors-fixed-theme-accent-8: #5d009f;\n  --simple-colors-fixed-theme-accent-9: #4c0081;\n  --simple-colors-fixed-theme-accent-10: #3a0063;\n  --simple-colors-fixed-theme-accent-11: #2a0049;\n  --simple-colors-fixed-theme-accent-12: #1d0033; }\n\n:host([dark][accent-color=deep-purple]) {\n  --simple-colors-default-theme-accent-1: #1d0033;\n  --simple-colors-default-theme-accent-2: #2a0049;\n  --simple-colors-default-theme-accent-3: #3a0063;\n  --simple-colors-default-theme-accent-4: #4c0081;\n  --simple-colors-default-theme-accent-5: #5d009f;\n  --simple-colors-default-theme-accent-6: #7e00d8;\n  --simple-colors-default-theme-accent-7: #a931ff;\n  --simple-colors-default-theme-accent-8: #b44aff;\n  --simple-colors-default-theme-accent-9: #bb63f9;\n  --simple-colors-default-theme-accent-10: #c97eff;\n  --simple-colors-default-theme-accent-11: #ddacff;\n  --simple-colors-default-theme-accent-12: #f3e4ff; }\n\n:host([accent-color=indigo]) {\n  --simple-colors-default-theme-accent-1: #e5ddff;\n  --simple-colors-default-theme-accent-2: #c3b2ff;\n  --simple-colors-default-theme-accent-3: #af97ff;\n  --simple-colors-default-theme-accent-4: #9e82ff;\n  --simple-colors-default-theme-accent-5: #9373ff;\n  --simple-colors-default-theme-accent-6: #835fff;\n  --simple-colors-default-theme-accent-7: #3a00ff;\n  --simple-colors-default-theme-accent-8: #2801b0;\n  --simple-colors-default-theme-accent-9: #20008c;\n  --simple-colors-default-theme-accent-10: #160063;\n  --simple-colors-default-theme-accent-11: #100049;\n  --simple-colors-default-theme-accent-12: #0a0030;\n  --simple-colors-fixed-theme-accent-1: #e5ddff;\n  --simple-colors-fixed-theme-accent-2: #c3b2ff;\n  --simple-colors-fixed-theme-accent-3: #af97ff;\n  --simple-colors-fixed-theme-accent-4: #9e82ff;\n  --simple-colors-fixed-theme-accent-5: #9373ff;\n  --simple-colors-fixed-theme-accent-6: #835fff;\n  --simple-colors-fixed-theme-accent-7: #3a00ff;\n  --simple-colors-fixed-theme-accent-8: #2801b0;\n  --simple-colors-fixed-theme-accent-9: #20008c;\n  --simple-colors-fixed-theme-accent-10: #160063;\n  --simple-colors-fixed-theme-accent-11: #100049;\n  --simple-colors-fixed-theme-accent-12: #0a0030; }\n\n:host([dark][accent-color=indigo]) {\n  --simple-colors-default-theme-accent-1: #0a0030;\n  --simple-colors-default-theme-accent-2: #100049;\n  --simple-colors-default-theme-accent-3: #160063;\n  --simple-colors-default-theme-accent-4: #20008c;\n  --simple-colors-default-theme-accent-5: #2801b0;\n  --simple-colors-default-theme-accent-6: #3a00ff;\n  --simple-colors-default-theme-accent-7: #835fff;\n  --simple-colors-default-theme-accent-8: #9373ff;\n  --simple-colors-default-theme-accent-9: #9e82ff;\n  --simple-colors-default-theme-accent-10: #af97ff;\n  --simple-colors-default-theme-accent-11: #c3b2ff;\n  --simple-colors-default-theme-accent-12: #e5ddff; }\n\n:host([accent-color=blue]) {\n  --simple-colors-default-theme-accent-1: #e2ecff;\n  --simple-colors-default-theme-accent-2: #acc9ff;\n  --simple-colors-default-theme-accent-3: #95baff;\n  --simple-colors-default-theme-accent-4: #74a5ff;\n  --simple-colors-default-theme-accent-5: #5892fd;\n  --simple-colors-default-theme-accent-6: #4083ff;\n  --simple-colors-default-theme-accent-7: #0059ff;\n  --simple-colors-default-theme-accent-8: #0041bb;\n  --simple-colors-default-theme-accent-9: #003494;\n  --simple-colors-default-theme-accent-10: #002569;\n  --simple-colors-default-theme-accent-11: #001947;\n  --simple-colors-default-theme-accent-12: #001333;\n  --simple-colors-fixed-theme-accent-1: #e2ecff;\n  --simple-colors-fixed-theme-accent-2: #acc9ff;\n  --simple-colors-fixed-theme-accent-3: #95baff;\n  --simple-colors-fixed-theme-accent-4: #74a5ff;\n  --simple-colors-fixed-theme-accent-5: #5892fd;\n  --simple-colors-fixed-theme-accent-6: #4083ff;\n  --simple-colors-fixed-theme-accent-7: #0059ff;\n  --simple-colors-fixed-theme-accent-8: #0041bb;\n  --simple-colors-fixed-theme-accent-9: #003494;\n  --simple-colors-fixed-theme-accent-10: #002569;\n  --simple-colors-fixed-theme-accent-11: #001947;\n  --simple-colors-fixed-theme-accent-12: #001333; }\n\n:host([dark][accent-color=blue]) {\n  --simple-colors-default-theme-accent-1: #001333;\n  --simple-colors-default-theme-accent-2: #001947;\n  --simple-colors-default-theme-accent-3: #002569;\n  --simple-colors-default-theme-accent-4: #003494;\n  --simple-colors-default-theme-accent-5: #0041bb;\n  --simple-colors-default-theme-accent-6: #0059ff;\n  --simple-colors-default-theme-accent-7: #4083ff;\n  --simple-colors-default-theme-accent-8: #5892fd;\n  --simple-colors-default-theme-accent-9: #74a5ff;\n  --simple-colors-default-theme-accent-10: #95baff;\n  --simple-colors-default-theme-accent-11: #acc9ff;\n  --simple-colors-default-theme-accent-12: #e2ecff; }\n\n:host([accent-color=light-blue]) {\n  --simple-colors-default-theme-accent-1: #cde8ff;\n  --simple-colors-default-theme-accent-2: #a1d1ff;\n  --simple-colors-default-theme-accent-3: #92c9ff;\n  --simple-colors-default-theme-accent-4: #65b3ff;\n  --simple-colors-default-theme-accent-5: #58adff;\n  --simple-colors-default-theme-accent-6: #41a1ff;\n  --simple-colors-default-theme-accent-7: #007ffc;\n  --simple-colors-default-theme-accent-8: #0066ca;\n  --simple-colors-default-theme-accent-9: #0055a8;\n  --simple-colors-default-theme-accent-10: #003f7d;\n  --simple-colors-default-theme-accent-11: #002850;\n  --simple-colors-default-theme-accent-12: #001b36;\n  --simple-colors-fixed-theme-accent-1: #cde8ff;\n  --simple-colors-fixed-theme-accent-2: #a1d1ff;\n  --simple-colors-fixed-theme-accent-3: #92c9ff;\n  --simple-colors-fixed-theme-accent-4: #65b3ff;\n  --simple-colors-fixed-theme-accent-5: #58adff;\n  --simple-colors-fixed-theme-accent-6: #41a1ff;\n  --simple-colors-fixed-theme-accent-7: #007ffc;\n  --simple-colors-fixed-theme-accent-8: #0066ca;\n  --simple-colors-fixed-theme-accent-9: #0055a8;\n  --simple-colors-fixed-theme-accent-10: #003f7d;\n  --simple-colors-fixed-theme-accent-11: #002850;\n  --simple-colors-fixed-theme-accent-12: #001b36; }\n\n:host([dark][accent-color=light-blue]) {\n  --simple-colors-default-theme-accent-1: #001b36;\n  --simple-colors-default-theme-accent-2: #002850;\n  --simple-colors-default-theme-accent-3: #003f7d;\n  --simple-colors-default-theme-accent-4: #0055a8;\n  --simple-colors-default-theme-accent-5: #0066ca;\n  --simple-colors-default-theme-accent-6: #007ffc;\n  --simple-colors-default-theme-accent-7: #41a1ff;\n  --simple-colors-default-theme-accent-8: #58adff;\n  --simple-colors-default-theme-accent-9: #65b3ff;\n  --simple-colors-default-theme-accent-10: #92c9ff;\n  --simple-colors-default-theme-accent-11: #a1d1ff;\n  --simple-colors-default-theme-accent-12: #cde8ff; }\n\n:host([accent-color=cyan]) {\n  --simple-colors-default-theme-accent-1: #ddf8ff;\n  --simple-colors-default-theme-accent-2: #9beaff;\n  --simple-colors-default-theme-accent-3: #77e2ff;\n  --simple-colors-default-theme-accent-4: #33d4ff;\n  --simple-colors-default-theme-accent-5: #1ccfff;\n  --simple-colors-default-theme-accent-6: #00c9ff;\n  --simple-colors-default-theme-accent-7: #009dc7;\n  --simple-colors-default-theme-accent-8: #007999;\n  --simple-colors-default-theme-accent-9: #005970;\n  --simple-colors-default-theme-accent-10: #003f50;\n  --simple-colors-default-theme-accent-11: #002c38;\n  --simple-colors-default-theme-accent-12: #001a20;\n  --simple-colors-fixed-theme-accent-1: #ddf8ff;\n  --simple-colors-fixed-theme-accent-2: #9beaff;\n  --simple-colors-fixed-theme-accent-3: #77e2ff;\n  --simple-colors-fixed-theme-accent-4: #33d4ff;\n  --simple-colors-fixed-theme-accent-5: #1ccfff;\n  --simple-colors-fixed-theme-accent-6: #00c9ff;\n  --simple-colors-fixed-theme-accent-7: #009dc7;\n  --simple-colors-fixed-theme-accent-8: #007999;\n  --simple-colors-fixed-theme-accent-9: #005970;\n  --simple-colors-fixed-theme-accent-10: #003f50;\n  --simple-colors-fixed-theme-accent-11: #002c38;\n  --simple-colors-fixed-theme-accent-12: #001a20; }\n\n:host([dark][accent-color=cyan]) {\n  --simple-colors-default-theme-accent-1: #001a20;\n  --simple-colors-default-theme-accent-2: #002c38;\n  --simple-colors-default-theme-accent-3: #003f50;\n  --simple-colors-default-theme-accent-4: #005970;\n  --simple-colors-default-theme-accent-5: #007999;\n  --simple-colors-default-theme-accent-6: #009dc7;\n  --simple-colors-default-theme-accent-7: #00c9ff;\n  --simple-colors-default-theme-accent-8: #1ccfff;\n  --simple-colors-default-theme-accent-9: #33d4ff;\n  --simple-colors-default-theme-accent-10: #77e2ff;\n  --simple-colors-default-theme-accent-11: #9beaff;\n  --simple-colors-default-theme-accent-12: #ddf8ff; }\n\n:host([accent-color=teal]) {\n  --simple-colors-default-theme-accent-1: #d9fff0;\n  --simple-colors-default-theme-accent-2: #98ffd7;\n  --simple-colors-default-theme-accent-3: #79ffcb;\n  --simple-colors-default-theme-accent-4: #56ffbd;\n  --simple-colors-default-theme-accent-5: #29ffac;\n  --simple-colors-default-theme-accent-6: #00ff9c;\n  --simple-colors-default-theme-accent-7: #009d75;\n  --simple-colors-default-theme-accent-8: #007658;\n  --simple-colors-default-theme-accent-9: #004e3a;\n  --simple-colors-default-theme-accent-10: #003829;\n  --simple-colors-default-theme-accent-11: #002a20;\n  --simple-colors-default-theme-accent-12: #001b14;\n  --simple-colors-fixed-theme-accent-1: #d9fff0;\n  --simple-colors-fixed-theme-accent-2: #98ffd7;\n  --simple-colors-fixed-theme-accent-3: #79ffcb;\n  --simple-colors-fixed-theme-accent-4: #56ffbd;\n  --simple-colors-fixed-theme-accent-5: #29ffac;\n  --simple-colors-fixed-theme-accent-6: #00ff9c;\n  --simple-colors-fixed-theme-accent-7: #009d75;\n  --simple-colors-fixed-theme-accent-8: #007658;\n  --simple-colors-fixed-theme-accent-9: #004e3a;\n  --simple-colors-fixed-theme-accent-10: #003829;\n  --simple-colors-fixed-theme-accent-11: #002a20;\n  --simple-colors-fixed-theme-accent-12: #001b14; }\n\n:host([dark][accent-color=teal]) {\n  --simple-colors-default-theme-accent-1: #001b14;\n  --simple-colors-default-theme-accent-2: #002a20;\n  --simple-colors-default-theme-accent-3: #003829;\n  --simple-colors-default-theme-accent-4: #004e3a;\n  --simple-colors-default-theme-accent-5: #007658;\n  --simple-colors-default-theme-accent-6: #009d75;\n  --simple-colors-default-theme-accent-7: #00ff9c;\n  --simple-colors-default-theme-accent-8: #29ffac;\n  --simple-colors-default-theme-accent-9: #56ffbd;\n  --simple-colors-default-theme-accent-10: #79ffcb;\n  --simple-colors-default-theme-accent-11: #98ffd7;\n  --simple-colors-default-theme-accent-12: #d9fff0; }\n\n:host([accent-color=green]) {\n  --simple-colors-default-theme-accent-1: #e1ffeb;\n  --simple-colors-default-theme-accent-2: #acffc9;\n  --simple-colors-default-theme-accent-3: #79ffa7;\n  --simple-colors-default-theme-accent-4: #49ff88;\n  --simple-colors-default-theme-accent-5: #24ff70;\n  --simple-colors-default-theme-accent-6: #00f961;\n  --simple-colors-default-theme-accent-7: #008c37;\n  --simple-colors-default-theme-accent-8: #00762e;\n  --simple-colors-default-theme-accent-9: #005a23;\n  --simple-colors-default-theme-accent-10: #003d18;\n  --simple-colors-default-theme-accent-11: #002a11;\n  --simple-colors-default-theme-accent-12: #001d0c;\n  --simple-colors-fixed-theme-accent-1: #e1ffeb;\n  --simple-colors-fixed-theme-accent-2: #acffc9;\n  --simple-colors-fixed-theme-accent-3: #79ffa7;\n  --simple-colors-fixed-theme-accent-4: #49ff88;\n  --simple-colors-fixed-theme-accent-5: #24ff70;\n  --simple-colors-fixed-theme-accent-6: #00f961;\n  --simple-colors-fixed-theme-accent-7: #008c37;\n  --simple-colors-fixed-theme-accent-8: #00762e;\n  --simple-colors-fixed-theme-accent-9: #005a23;\n  --simple-colors-fixed-theme-accent-10: #003d18;\n  --simple-colors-fixed-theme-accent-11: #002a11;\n  --simple-colors-fixed-theme-accent-12: #001d0c; }\n\n:host([dark][accent-color=green]) {\n  --simple-colors-default-theme-accent-1: #001d0c;\n  --simple-colors-default-theme-accent-2: #002a11;\n  --simple-colors-default-theme-accent-3: #003d18;\n  --simple-colors-default-theme-accent-4: #005a23;\n  --simple-colors-default-theme-accent-5: #00762e;\n  --simple-colors-default-theme-accent-6: #008c37;\n  --simple-colors-default-theme-accent-7: #00f961;\n  --simple-colors-default-theme-accent-8: #24ff70;\n  --simple-colors-default-theme-accent-9: #49ff88;\n  --simple-colors-default-theme-accent-10: #79ffa7;\n  --simple-colors-default-theme-accent-11: #acffc9;\n  --simple-colors-default-theme-accent-12: #e1ffeb; }\n\n:host([accent-color=light-green]) {\n  --simple-colors-default-theme-accent-1: #ebffdb;\n  --simple-colors-default-theme-accent-2: #c7ff9b;\n  --simple-colors-default-theme-accent-3: #b1ff75;\n  --simple-colors-default-theme-accent-4: #a1fd5a;\n  --simple-colors-default-theme-accent-5: #8efd38;\n  --simple-colors-default-theme-accent-6: #6fff00;\n  --simple-colors-default-theme-accent-7: #429d00;\n  --simple-colors-default-theme-accent-8: #357f00;\n  --simple-colors-default-theme-accent-9: #296100;\n  --simple-colors-default-theme-accent-10: #1b3f00;\n  --simple-colors-default-theme-accent-11: #143000;\n  --simple-colors-default-theme-accent-12: #0d2000;\n  --simple-colors-fixed-theme-accent-1: #ebffdb;\n  --simple-colors-fixed-theme-accent-2: #c7ff9b;\n  --simple-colors-fixed-theme-accent-3: #b1ff75;\n  --simple-colors-fixed-theme-accent-4: #a1fd5a;\n  --simple-colors-fixed-theme-accent-5: #8efd38;\n  --simple-colors-fixed-theme-accent-6: #6fff00;\n  --simple-colors-fixed-theme-accent-7: #429d00;\n  --simple-colors-fixed-theme-accent-8: #357f00;\n  --simple-colors-fixed-theme-accent-9: #296100;\n  --simple-colors-fixed-theme-accent-10: #1b3f00;\n  --simple-colors-fixed-theme-accent-11: #143000;\n  --simple-colors-fixed-theme-accent-12: #0d2000; }\n\n:host([dark][accent-color=light-green]) {\n  --simple-colors-default-theme-accent-1: #0d2000;\n  --simple-colors-default-theme-accent-2: #143000;\n  --simple-colors-default-theme-accent-3: #1b3f00;\n  --simple-colors-default-theme-accent-4: #296100;\n  --simple-colors-default-theme-accent-5: #357f00;\n  --simple-colors-default-theme-accent-6: #429d00;\n  --simple-colors-default-theme-accent-7: #6fff00;\n  --simple-colors-default-theme-accent-8: #8efd38;\n  --simple-colors-default-theme-accent-9: #a1fd5a;\n  --simple-colors-default-theme-accent-10: #b1ff75;\n  --simple-colors-default-theme-accent-11: #c7ff9b;\n  --simple-colors-default-theme-accent-12: #ebffdb; }\n\n:host([accent-color=lime]) {\n  --simple-colors-default-theme-accent-1: #f1ffd2;\n  --simple-colors-default-theme-accent-2: #dfff9b;\n  --simple-colors-default-theme-accent-3: #d4ff77;\n  --simple-colors-default-theme-accent-4: #caff58;\n  --simple-colors-default-theme-accent-5: #bdff2d;\n  --simple-colors-default-theme-accent-6: #aeff00;\n  --simple-colors-default-theme-accent-7: #649900;\n  --simple-colors-default-theme-accent-8: #4d7600;\n  --simple-colors-default-theme-accent-9: #3b5a00;\n  --simple-colors-default-theme-accent-10: #293f00;\n  --simple-colors-default-theme-accent-11: #223400;\n  --simple-colors-default-theme-accent-12: #182400;\n  --simple-colors-fixed-theme-accent-1: #f1ffd2;\n  --simple-colors-fixed-theme-accent-2: #dfff9b;\n  --simple-colors-fixed-theme-accent-3: #d4ff77;\n  --simple-colors-fixed-theme-accent-4: #caff58;\n  --simple-colors-fixed-theme-accent-5: #bdff2d;\n  --simple-colors-fixed-theme-accent-6: #aeff00;\n  --simple-colors-fixed-theme-accent-7: #649900;\n  --simple-colors-fixed-theme-accent-8: #4d7600;\n  --simple-colors-fixed-theme-accent-9: #3b5a00;\n  --simple-colors-fixed-theme-accent-10: #293f00;\n  --simple-colors-fixed-theme-accent-11: #223400;\n  --simple-colors-fixed-theme-accent-12: #182400; }\n\n:host([dark][accent-color=lime]) {\n  --simple-colors-default-theme-accent-1: #182400;\n  --simple-colors-default-theme-accent-2: #223400;\n  --simple-colors-default-theme-accent-3: #293f00;\n  --simple-colors-default-theme-accent-4: #3b5a00;\n  --simple-colors-default-theme-accent-5: #4d7600;\n  --simple-colors-default-theme-accent-6: #649900;\n  --simple-colors-default-theme-accent-7: #aeff00;\n  --simple-colors-default-theme-accent-8: #bdff2d;\n  --simple-colors-default-theme-accent-9: #caff58;\n  --simple-colors-default-theme-accent-10: #d4ff77;\n  --simple-colors-default-theme-accent-11: #dfff9b;\n  --simple-colors-default-theme-accent-12: #f1ffd2; }\n\n:host([accent-color=yellow]) {\n  --simple-colors-default-theme-accent-1: #ffffd5;\n  --simple-colors-default-theme-accent-2: #ffffac;\n  --simple-colors-default-theme-accent-3: #ffff90;\n  --simple-colors-default-theme-accent-4: #ffff7c;\n  --simple-colors-default-theme-accent-5: #ffff3a;\n  --simple-colors-default-theme-accent-6: #f6f600;\n  --simple-colors-default-theme-accent-7: #929100;\n  --simple-colors-default-theme-accent-8: #787700;\n  --simple-colors-default-theme-accent-9: #585700;\n  --simple-colors-default-theme-accent-10: #454400;\n  --simple-colors-default-theme-accent-11: #303000;\n  --simple-colors-default-theme-accent-12: #242400;\n  --simple-colors-fixed-theme-accent-1: #ffffd5;\n  --simple-colors-fixed-theme-accent-2: #ffffac;\n  --simple-colors-fixed-theme-accent-3: #ffff90;\n  --simple-colors-fixed-theme-accent-4: #ffff7c;\n  --simple-colors-fixed-theme-accent-5: #ffff3a;\n  --simple-colors-fixed-theme-accent-6: #f6f600;\n  --simple-colors-fixed-theme-accent-7: #929100;\n  --simple-colors-fixed-theme-accent-8: #787700;\n  --simple-colors-fixed-theme-accent-9: #585700;\n  --simple-colors-fixed-theme-accent-10: #454400;\n  --simple-colors-fixed-theme-accent-11: #303000;\n  --simple-colors-fixed-theme-accent-12: #242400; }\n\n:host([dark][accent-color=yellow]) {\n  --simple-colors-default-theme-accent-1: #242400;\n  --simple-colors-default-theme-accent-2: #303000;\n  --simple-colors-default-theme-accent-3: #454400;\n  --simple-colors-default-theme-accent-4: #585700;\n  --simple-colors-default-theme-accent-5: #787700;\n  --simple-colors-default-theme-accent-6: #929100;\n  --simple-colors-default-theme-accent-7: #f6f600;\n  --simple-colors-default-theme-accent-8: #ffff3a;\n  --simple-colors-default-theme-accent-9: #ffff7c;\n  --simple-colors-default-theme-accent-10: #ffff90;\n  --simple-colors-default-theme-accent-11: #ffffac;\n  --simple-colors-default-theme-accent-12: #ffffd5; }\n\n:host([accent-color=amber]) {\n  --simple-colors-default-theme-accent-1: #fff2d4;\n  --simple-colors-default-theme-accent-2: #ffdf92;\n  --simple-colors-default-theme-accent-3: #ffd677;\n  --simple-colors-default-theme-accent-4: #ffcf5e;\n  --simple-colors-default-theme-accent-5: #ffc235;\n  --simple-colors-default-theme-accent-6: #ffc500;\n  --simple-colors-default-theme-accent-7: #b28900;\n  --simple-colors-default-theme-accent-8: #876800;\n  --simple-colors-default-theme-accent-9: #614b00;\n  --simple-colors-default-theme-accent-10: #413200;\n  --simple-colors-default-theme-accent-11: #302500;\n  --simple-colors-default-theme-accent-12: #221a00;\n  --simple-colors-fixed-theme-accent-1: #fff2d4;\n  --simple-colors-fixed-theme-accent-2: #ffdf92;\n  --simple-colors-fixed-theme-accent-3: #ffd677;\n  --simple-colors-fixed-theme-accent-4: #ffcf5e;\n  --simple-colors-fixed-theme-accent-5: #ffc235;\n  --simple-colors-fixed-theme-accent-6: #ffc500;\n  --simple-colors-fixed-theme-accent-7: #b28900;\n  --simple-colors-fixed-theme-accent-8: #876800;\n  --simple-colors-fixed-theme-accent-9: #614b00;\n  --simple-colors-fixed-theme-accent-10: #413200;\n  --simple-colors-fixed-theme-accent-11: #302500;\n  --simple-colors-fixed-theme-accent-12: #221a00; }\n\n:host([dark][accent-color=amber]) {\n  --simple-colors-default-theme-accent-1: #221a00;\n  --simple-colors-default-theme-accent-2: #302500;\n  --simple-colors-default-theme-accent-3: #413200;\n  --simple-colors-default-theme-accent-4: #614b00;\n  --simple-colors-default-theme-accent-5: #876800;\n  --simple-colors-default-theme-accent-6: #b28900;\n  --simple-colors-default-theme-accent-7: #ffc500;\n  --simple-colors-default-theme-accent-8: #ffc235;\n  --simple-colors-default-theme-accent-9: #ffcf5e;\n  --simple-colors-default-theme-accent-10: #ffd677;\n  --simple-colors-default-theme-accent-11: #ffdf92;\n  --simple-colors-default-theme-accent-12: #fff2d4; }\n\n:host([accent-color=orange]) {\n  --simple-colors-default-theme-accent-1: #ffebd7;\n  --simple-colors-default-theme-accent-2: #ffca92;\n  --simple-colors-default-theme-accent-3: #ffbd75;\n  --simple-colors-default-theme-accent-4: #ffb05c;\n  --simple-colors-default-theme-accent-5: #ff9e36;\n  --simple-colors-default-theme-accent-6: #ff9625;\n  --simple-colors-default-theme-accent-7: #e56a00;\n  --simple-colors-default-theme-accent-8: #ae5100;\n  --simple-colors-default-theme-accent-9: #833d00;\n  --simple-colors-default-theme-accent-10: #612d00;\n  --simple-colors-default-theme-accent-11: #3d1c00;\n  --simple-colors-default-theme-accent-12: #2c1400;\n  --simple-colors-fixed-theme-accent-1: #ffebd7;\n  --simple-colors-fixed-theme-accent-2: #ffca92;\n  --simple-colors-fixed-theme-accent-3: #ffbd75;\n  --simple-colors-fixed-theme-accent-4: #ffb05c;\n  --simple-colors-fixed-theme-accent-5: #ff9e36;\n  --simple-colors-fixed-theme-accent-6: #ff9625;\n  --simple-colors-fixed-theme-accent-7: #e56a00;\n  --simple-colors-fixed-theme-accent-8: #ae5100;\n  --simple-colors-fixed-theme-accent-9: #833d00;\n  --simple-colors-fixed-theme-accent-10: #612d00;\n  --simple-colors-fixed-theme-accent-11: #3d1c00;\n  --simple-colors-fixed-theme-accent-12: #2c1400; }\n\n:host([dark][accent-color=orange]) {\n  --simple-colors-default-theme-accent-1: #2c1400;\n  --simple-colors-default-theme-accent-2: #3d1c00;\n  --simple-colors-default-theme-accent-3: #612d00;\n  --simple-colors-default-theme-accent-4: #833d00;\n  --simple-colors-default-theme-accent-5: #ae5100;\n  --simple-colors-default-theme-accent-6: #e56a00;\n  --simple-colors-default-theme-accent-7: #ff9625;\n  --simple-colors-default-theme-accent-8: #ff9e36;\n  --simple-colors-default-theme-accent-9: #ffb05c;\n  --simple-colors-default-theme-accent-10: #ffbd75;\n  --simple-colors-default-theme-accent-11: #ffca92;\n  --simple-colors-default-theme-accent-12: #ffebd7; }\n\n:host([accent-color=deep-orange]) {\n  --simple-colors-default-theme-accent-1: #ffe7e0;\n  --simple-colors-default-theme-accent-2: #ffb299;\n  --simple-colors-default-theme-accent-3: #ffa588;\n  --simple-colors-default-theme-accent-4: #ff8a64;\n  --simple-colors-default-theme-accent-5: #ff7649;\n  --simple-colors-default-theme-accent-6: #ff6c3c;\n  --simple-colors-default-theme-accent-7: #f53100;\n  --simple-colors-default-theme-accent-8: #b92500;\n  --simple-colors-default-theme-accent-9: #8a1c00;\n  --simple-colors-default-theme-accent-10: #561100;\n  --simple-colors-default-theme-accent-11: #3a0c00;\n  --simple-colors-default-theme-accent-12: #240700;\n  --simple-colors-fixed-theme-accent-1: #ffe7e0;\n  --simple-colors-fixed-theme-accent-2: #ffb299;\n  --simple-colors-fixed-theme-accent-3: #ffa588;\n  --simple-colors-fixed-theme-accent-4: #ff8a64;\n  --simple-colors-fixed-theme-accent-5: #ff7649;\n  --simple-colors-fixed-theme-accent-6: #ff6c3c;\n  --simple-colors-fixed-theme-accent-7: #f53100;\n  --simple-colors-fixed-theme-accent-8: #b92500;\n  --simple-colors-fixed-theme-accent-9: #8a1c00;\n  --simple-colors-fixed-theme-accent-10: #561100;\n  --simple-colors-fixed-theme-accent-11: #3a0c00;\n  --simple-colors-fixed-theme-accent-12: #240700; }\n\n:host([dark][accent-color=deep-orange]) {\n  --simple-colors-default-theme-accent-1: #240700;\n  --simple-colors-default-theme-accent-2: #3a0c00;\n  --simple-colors-default-theme-accent-3: #561100;\n  --simple-colors-default-theme-accent-4: #8a1c00;\n  --simple-colors-default-theme-accent-5: #b92500;\n  --simple-colors-default-theme-accent-6: #f53100;\n  --simple-colors-default-theme-accent-7: #ff6c3c;\n  --simple-colors-default-theme-accent-8: #ff7649;\n  --simple-colors-default-theme-accent-9: #ff8a64;\n  --simple-colors-default-theme-accent-10: #ffa588;\n  --simple-colors-default-theme-accent-11: #ffb299;\n  --simple-colors-default-theme-accent-12: #ffe7e0; }\n\n:host([accent-color=brown]) {\n  --simple-colors-default-theme-accent-1: #f0e2de;\n  --simple-colors-default-theme-accent-2: #e5b8aa;\n  --simple-colors-default-theme-accent-3: #c59485;\n  --simple-colors-default-theme-accent-4: #b68373;\n  --simple-colors-default-theme-accent-5: #ac7868;\n  --simple-colors-default-theme-accent-6: #a47060;\n  --simple-colors-default-theme-accent-7: #85574a;\n  --simple-colors-default-theme-accent-8: #724539;\n  --simple-colors-default-theme-accent-9: #5b3328;\n  --simple-colors-default-theme-accent-10: #3b1e15;\n  --simple-colors-default-theme-accent-11: #2c140e;\n  --simple-colors-default-theme-accent-12: #200e09;\n  --simple-colors-fixed-theme-accent-1: #f0e2de;\n  --simple-colors-fixed-theme-accent-2: #e5b8aa;\n  --simple-colors-fixed-theme-accent-3: #c59485;\n  --simple-colors-fixed-theme-accent-4: #b68373;\n  --simple-colors-fixed-theme-accent-5: #ac7868;\n  --simple-colors-fixed-theme-accent-6: #a47060;\n  --simple-colors-fixed-theme-accent-7: #85574a;\n  --simple-colors-fixed-theme-accent-8: #724539;\n  --simple-colors-fixed-theme-accent-9: #5b3328;\n  --simple-colors-fixed-theme-accent-10: #3b1e15;\n  --simple-colors-fixed-theme-accent-11: #2c140e;\n  --simple-colors-fixed-theme-accent-12: #200e09; }\n\n:host([dark][accent-color=brown]) {\n  --simple-colors-default-theme-accent-1: #200e09;\n  --simple-colors-default-theme-accent-2: #2c140e;\n  --simple-colors-default-theme-accent-3: #3b1e15;\n  --simple-colors-default-theme-accent-4: #5b3328;\n  --simple-colors-default-theme-accent-5: #724539;\n  --simple-colors-default-theme-accent-6: #85574a;\n  --simple-colors-default-theme-accent-7: #a47060;\n  --simple-colors-default-theme-accent-8: #ac7868;\n  --simple-colors-default-theme-accent-9: #b68373;\n  --simple-colors-default-theme-accent-10: #c59485;\n  --simple-colors-default-theme-accent-11: #e5b8aa;\n  --simple-colors-default-theme-accent-12: #f0e2de; }\n\n:host([accent-color=blue-grey]) {\n  --simple-colors-default-theme-accent-1: #e7eff1;\n  --simple-colors-default-theme-accent-2: #b1c5ce;\n  --simple-colors-default-theme-accent-3: #9badb6;\n  --simple-colors-default-theme-accent-4: #8d9fa7;\n  --simple-colors-default-theme-accent-5: #7a8f98;\n  --simple-colors-default-theme-accent-6: #718892;\n  --simple-colors-default-theme-accent-7: #56707c;\n  --simple-colors-default-theme-accent-8: #40535b;\n  --simple-colors-default-theme-accent-9: #2f3e45;\n  --simple-colors-default-theme-accent-10: #1e282c;\n  --simple-colors-default-theme-accent-11: #182023;\n  --simple-colors-default-theme-accent-12: #0f1518;\n  --simple-colors-fixed-theme-accent-1: #e7eff1;\n  --simple-colors-fixed-theme-accent-2: #b1c5ce;\n  --simple-colors-fixed-theme-accent-3: #9badb6;\n  --simple-colors-fixed-theme-accent-4: #8d9fa7;\n  --simple-colors-fixed-theme-accent-5: #7a8f98;\n  --simple-colors-fixed-theme-accent-6: #718892;\n  --simple-colors-fixed-theme-accent-7: #56707c;\n  --simple-colors-fixed-theme-accent-8: #40535b;\n  --simple-colors-fixed-theme-accent-9: #2f3e45;\n  --simple-colors-fixed-theme-accent-10: #1e282c;\n  --simple-colors-fixed-theme-accent-11: #182023;\n  --simple-colors-fixed-theme-accent-12: #0f1518; }\n\n:host([dark][accent-color=blue-grey]) {\n  --simple-colors-default-theme-accent-1: #0f1518;\n  --simple-colors-default-theme-accent-2: #182023;\n  --simple-colors-default-theme-accent-3: #1e282c;\n  --simple-colors-default-theme-accent-4: #2f3e45;\n  --simple-colors-default-theme-accent-5: #40535b;\n  --simple-colors-default-theme-accent-6: #56707c;\n  --simple-colors-default-theme-accent-7: #718892;\n  --simple-colors-default-theme-accent-8: #7a8f98;\n  --simple-colors-default-theme-accent-9: #8d9fa7;\n  --simple-colors-default-theme-accent-10: #9badb6;\n  --simple-colors-default-theme-accent-11: #b1c5ce;\n  --simple-colors-default-theme-accent-12: #e7eff1; }\n      "])))]}},{key:"properties",get:function(){return o(o({},p(a(x),"properties",this)),{},{accentColor:{attribute:"accent-color",type:String,reflect:!0},dark:{name:"dark",type:Boolean,reflect:!0}})}},{key:"tag",get:function(){return"simple-colors"}}],(f=[{key:"render",value:function(){return l.html(u||(u=h(["\n\n<slot></slot>"])))}},{key:"invertShade",value:function(e){return c.SimpleColorsSharedStylesGlobal.invertShade(e)}},{key:"getColorInfo",value:function(e){return c.SimpleColorsSharedStylesGlobal.getColorInfo(e)}},{key:"makeVariable",value:function(){return c.SimpleColorsSharedStylesGlobal.makeVariable("grey",1,"default")}},{key:"getContrastingColors",value:function(e,l,t){return c.SimpleColorsSharedStylesGlobal.getContrastingColors(e,l,t)}},{key:"getContrastingShades",value:function(e,l,t,o){return c.SimpleColorsSharedStylesGlobal.getContrastingShades(e,l,t,o)}},{key:"isContrastCompliant",value:function(e,l,t,o,n){return c.SimpleColorsSharedStylesGlobal.isContrastCompliant(e,l,t,o,n)}}])&&s(t.prototype,f),r&&s(t,r),x}(e)},g=function(e){m(c,e);var l=d(c);function c(){return n(this,c),l.apply(this,arguments)}return c}(x(l.LitElement));window.customElements.define(g.tag,g),e.SimpleColors=g,e.SimpleColorsSuper=x,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,l){"object"==typeof exports&&"undefined"!=typeof module?l(exports,require("lit"),require("@lrnwebcomponents/simple-colors-shared-styles/simple-colors-shared-styles.js"),require("@lrnwebcomponents/a11y-utils/a11y-utils.js")):"function"==typeof define&&define.amd?define(["exports","lit","@lrnwebcomponents/simple-colors-shared-styles/simple-colors-shared-styles.js","@lrnwebcomponents/a11y-utils/a11y-utils.js"],l):l((e="undefined"!=typeof globalThis?globalThis:e||self).SimpleColors={},e.lit,e.simpleColorsSharedStyles_js,e.a11yUtils_js)}(this,(function(e,l,c,t){"use strict";function o(e,l){var c=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);l&&(t=t.filter((function(l){return Object.getOwnPropertyDescriptor(e,l).enumerable}))),c.push.apply(c,t)}return c}function n(e){for(var l=1;l<arguments.length;l++){var c=null!=arguments[l]?arguments[l]:{};l%2?o(Object(c),!0).forEach((function(l){m(e,l,c[l])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(c)):o(Object(c)).forEach((function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(c,l))}))}return e}function s(e,l){if(!(e instanceof l))throw new TypeError("Cannot call a class as a function")}function f(e,l){for(var c=0;c<l.length;c++){var t=l[c];t.enumerable=t.enumerable||!1,t.configurable=!0,"value"in t&&(t.writable=!0),Object.defineProperty(e,t.key,t)}}function m(e,l,c){return l in e?Object.defineProperty(e,l,{value:c,enumerable:!0,configurable:!0,writable:!0}):e[l]=c,e}function a(e,l){if("function"!=typeof l&&null!==l)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(l&&l.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),l&&i(e,l)}function r(e){return r=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},r(e)}function i(e,l){return i=Object.setPrototypeOf||function(e,l){return e.__proto__=l,e},i(e,l)}function d(e,l){if(l&&("object"==typeof l||"function"==typeof l))return l;if(void 0!==l)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function p(e){var l=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var c,t=r(e);if(l){var o=r(this).constructor;c=Reflect.construct(t,arguments,o)}else c=t.apply(this,arguments);return d(this,c)}}function h(e,l){for(;!Object.prototype.hasOwnProperty.call(e,l)&&null!==(e=r(e)););return e}function u(){return u="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(e,l,c){var t=h(e,l);if(t){var o=Object.getOwnPropertyDescriptor(t,l);return o.get?o.get.call(arguments.length<3?e:c):o.value}},u.apply(this,arguments)}function b(e,l){return l||(l=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(l)}}))}var x,g,y=function(e){return function(e){a(h,e);var o,m,i,d=p(h);function h(){var e;return s(this,h),(e=d.call(this)).accentColor="grey",e.dark=!1,e.colors=c.SimpleColorsSharedStylesGlobal.colors,e}return o=h,i=[{key:"styles",get:function(){var e=l.css("");return u(r(h),"styles",this)&&(e=u(r(h),"styles",this)),[e,t.screenreaderOnlyCSS,l.css(g||(g=b(["\n:host([dark]) {\n  --simple-colors-default-theme-accent-1: #000000;\n  --simple-colors-default-theme-accent-2: #111111;\n  --simple-colors-default-theme-accent-3: #222222;\n  --simple-colors-default-theme-accent-4: #333333;\n  --simple-colors-default-theme-accent-5: #444444;\n  --simple-colors-default-theme-accent-6: #666666;\n  --simple-colors-default-theme-accent-7: #999999;\n  --simple-colors-default-theme-accent-8: #bbbbbb;\n  --simple-colors-default-theme-accent-9: #cccccc;\n  --simple-colors-default-theme-accent-10: #dddddd;\n  --simple-colors-default-theme-accent-11: #eeeeee;\n  --simple-colors-default-theme-accent-12: #ffffff;\n  \n  --simple-colors-default-theme-grey-1: #000000;\n  --simple-colors-default-theme-grey-2: #111111;\n  --simple-colors-default-theme-grey-3: #222222;\n  --simple-colors-default-theme-grey-4: #333333;\n  --simple-colors-default-theme-grey-5: #444444;\n  --simple-colors-default-theme-grey-6: #666666;\n  --simple-colors-default-theme-grey-7: #999999;\n  --simple-colors-default-theme-grey-8: #bbbbbb;\n  --simple-colors-default-theme-grey-9: #cccccc;\n  --simple-colors-default-theme-grey-10: #dddddd;\n  --simple-colors-default-theme-grey-11: #eeeeee;\n  --simple-colors-default-theme-grey-12: #ffffff;\n  \n  --simple-colors-default-theme-red-1: #3f0000;\n  --simple-colors-default-theme-red-2: #520000;\n  --simple-colors-default-theme-red-3: #670000;\n  --simple-colors-default-theme-red-4: #850000;\n  --simple-colors-default-theme-red-5: #ac0000;\n  --simple-colors-default-theme-red-6: #ee0000;\n  --simple-colors-default-theme-red-7: #ff2222;\n  --simple-colors-default-theme-red-8: #fd5151;\n  --simple-colors-default-theme-red-9: #ff7474;\n  --simple-colors-default-theme-red-10: #ff8f8f;\n  --simple-colors-default-theme-red-11: #ffaeae;\n  --simple-colors-default-theme-red-12: #ffdddd;\n  \n  --simple-colors-default-theme-pink-1: #440019;\n  --simple-colors-default-theme-pink-2: #5a0020;\n  --simple-colors-default-theme-pink-3: #78002b;\n  --simple-colors-default-theme-pink-4: #980036;\n  --simple-colors-default-theme-pink-5: #b80042;\n  --simple-colors-default-theme-pink-6: #da004e;\n  --simple-colors-default-theme-pink-7: #ff3996;\n  --simple-colors-default-theme-pink-8: #fd60aa;\n  --simple-colors-default-theme-pink-9: #ff73b5;\n  --simple-colors-default-theme-pink-10: #ff87c0;\n  --simple-colors-default-theme-pink-11: #ffa5cf;\n  --simple-colors-default-theme-pink-12: #ffe6f1;\n  \n  --simple-colors-default-theme-purple-1: #200025;\n  --simple-colors-default-theme-purple-2: #33003a;\n  --simple-colors-default-theme-purple-3: #490052;\n  --simple-colors-default-theme-purple-4: #6c0079;\n  --simple-colors-default-theme-purple-5: #8a009b;\n  --simple-colors-default-theme-purple-6: #a500ba;\n  --simple-colors-default-theme-purple-7: #e200ff;\n  --simple-colors-default-theme-purple-8: #ed61ff;\n  --simple-colors-default-theme-purple-9: #f07cff;\n  --simple-colors-default-theme-purple-10: #f394ff;\n  --simple-colors-default-theme-purple-11: #f4affd;\n  --simple-colors-default-theme-purple-12: #fce6ff;\n  \n  --simple-colors-default-theme-deep-purple-1: #1d0033;\n  --simple-colors-default-theme-deep-purple-2: #2a0049;\n  --simple-colors-default-theme-deep-purple-3: #3a0063;\n  --simple-colors-default-theme-deep-purple-4: #4c0081;\n  --simple-colors-default-theme-deep-purple-5: #5d009f;\n  --simple-colors-default-theme-deep-purple-6: #7e00d8;\n  --simple-colors-default-theme-deep-purple-7: #a931ff;\n  --simple-colors-default-theme-deep-purple-8: #b44aff;\n  --simple-colors-default-theme-deep-purple-9: #bb63f9;\n  --simple-colors-default-theme-deep-purple-10: #c97eff;\n  --simple-colors-default-theme-deep-purple-11: #ddacff;\n  --simple-colors-default-theme-deep-purple-12: #f3e4ff;\n  \n  --simple-colors-default-theme-indigo-1: #0a0030;\n  --simple-colors-default-theme-indigo-2: #100049;\n  --simple-colors-default-theme-indigo-3: #160063;\n  --simple-colors-default-theme-indigo-4: #20008c;\n  --simple-colors-default-theme-indigo-5: #2801b0;\n  --simple-colors-default-theme-indigo-6: #3a00ff;\n  --simple-colors-default-theme-indigo-7: #835fff;\n  --simple-colors-default-theme-indigo-8: #9373ff;\n  --simple-colors-default-theme-indigo-9: #9e82ff;\n  --simple-colors-default-theme-indigo-10: #af97ff;\n  --simple-colors-default-theme-indigo-11: #c3b2ff;\n  --simple-colors-default-theme-indigo-12: #e5ddff;\n  \n  --simple-colors-default-theme-blue-1: #001333;\n  --simple-colors-default-theme-blue-2: #001947;\n  --simple-colors-default-theme-blue-3: #002569;\n  --simple-colors-default-theme-blue-4: #003494;\n  --simple-colors-default-theme-blue-5: #0041bb;\n  --simple-colors-default-theme-blue-6: #0059ff;\n  --simple-colors-default-theme-blue-7: #4083ff;\n  --simple-colors-default-theme-blue-8: #5892fd;\n  --simple-colors-default-theme-blue-9: #74a5ff;\n  --simple-colors-default-theme-blue-10: #95baff;\n  --simple-colors-default-theme-blue-11: #acc9ff;\n  --simple-colors-default-theme-blue-12: #e2ecff;\n  \n  --simple-colors-default-theme-light-blue-1: #001b36;\n  --simple-colors-default-theme-light-blue-2: #002850;\n  --simple-colors-default-theme-light-blue-3: #003f7d;\n  --simple-colors-default-theme-light-blue-4: #0055a8;\n  --simple-colors-default-theme-light-blue-5: #0066ca;\n  --simple-colors-default-theme-light-blue-6: #007ffc;\n  --simple-colors-default-theme-light-blue-7: #41a1ff;\n  --simple-colors-default-theme-light-blue-8: #58adff;\n  --simple-colors-default-theme-light-blue-9: #65b3ff;\n  --simple-colors-default-theme-light-blue-10: #92c9ff;\n  --simple-colors-default-theme-light-blue-11: #a1d1ff;\n  --simple-colors-default-theme-light-blue-12: #cde8ff;\n  \n  --simple-colors-default-theme-cyan-1: #001a20;\n  --simple-colors-default-theme-cyan-2: #002c38;\n  --simple-colors-default-theme-cyan-3: #003f50;\n  --simple-colors-default-theme-cyan-4: #005970;\n  --simple-colors-default-theme-cyan-5: #007999;\n  --simple-colors-default-theme-cyan-6: #009dc7;\n  --simple-colors-default-theme-cyan-7: #00c9ff;\n  --simple-colors-default-theme-cyan-8: #1ccfff;\n  --simple-colors-default-theme-cyan-9: #33d4ff;\n  --simple-colors-default-theme-cyan-10: #77e2ff;\n  --simple-colors-default-theme-cyan-11: #9beaff;\n  --simple-colors-default-theme-cyan-12: #ddf8ff;\n  \n  --simple-colors-default-theme-teal-1: #001b14;\n  --simple-colors-default-theme-teal-2: #002a20;\n  --simple-colors-default-theme-teal-3: #003829;\n  --simple-colors-default-theme-teal-4: #004e3a;\n  --simple-colors-default-theme-teal-5: #007658;\n  --simple-colors-default-theme-teal-6: #009d75;\n  --simple-colors-default-theme-teal-7: #00ff9c;\n  --simple-colors-default-theme-teal-8: #29ffac;\n  --simple-colors-default-theme-teal-9: #56ffbd;\n  --simple-colors-default-theme-teal-10: #79ffcb;\n  --simple-colors-default-theme-teal-11: #98ffd7;\n  --simple-colors-default-theme-teal-12: #d9fff0;\n  \n  --simple-colors-default-theme-green-1: #001d0c;\n  --simple-colors-default-theme-green-2: #002a11;\n  --simple-colors-default-theme-green-3: #003d18;\n  --simple-colors-default-theme-green-4: #005a23;\n  --simple-colors-default-theme-green-5: #00762e;\n  --simple-colors-default-theme-green-6: #008c37;\n  --simple-colors-default-theme-green-7: #00f961;\n  --simple-colors-default-theme-green-8: #24ff70;\n  --simple-colors-default-theme-green-9: #49ff88;\n  --simple-colors-default-theme-green-10: #79ffa7;\n  --simple-colors-default-theme-green-11: #acffc9;\n  --simple-colors-default-theme-green-12: #e1ffeb;\n  \n  --simple-colors-default-theme-light-green-1: #0d2000;\n  --simple-colors-default-theme-light-green-2: #143000;\n  --simple-colors-default-theme-light-green-3: #1b3f00;\n  --simple-colors-default-theme-light-green-4: #296100;\n  --simple-colors-default-theme-light-green-5: #357f00;\n  --simple-colors-default-theme-light-green-6: #429d00;\n  --simple-colors-default-theme-light-green-7: #6fff00;\n  --simple-colors-default-theme-light-green-8: #8efd38;\n  --simple-colors-default-theme-light-green-9: #a1fd5a;\n  --simple-colors-default-theme-light-green-10: #b1ff75;\n  --simple-colors-default-theme-light-green-11: #c7ff9b;\n  --simple-colors-default-theme-light-green-12: #ebffdb;\n  \n  --simple-colors-default-theme-lime-1: #182400;\n  --simple-colors-default-theme-lime-2: #223400;\n  --simple-colors-default-theme-lime-3: #293f00;\n  --simple-colors-default-theme-lime-4: #3b5a00;\n  --simple-colors-default-theme-lime-5: #4d7600;\n  --simple-colors-default-theme-lime-6: #649900;\n  --simple-colors-default-theme-lime-7: #aeff00;\n  --simple-colors-default-theme-lime-8: #bdff2d;\n  --simple-colors-default-theme-lime-9: #caff58;\n  --simple-colors-default-theme-lime-10: #d4ff77;\n  --simple-colors-default-theme-lime-11: #dfff9b;\n  --simple-colors-default-theme-lime-12: #f1ffd2;\n  \n  --simple-colors-default-theme-yellow-1: #242400;\n  --simple-colors-default-theme-yellow-2: #303000;\n  --simple-colors-default-theme-yellow-3: #454400;\n  --simple-colors-default-theme-yellow-4: #585700;\n  --simple-colors-default-theme-yellow-5: #787700;\n  --simple-colors-default-theme-yellow-6: #929100;\n  --simple-colors-default-theme-yellow-7: #f6f600;\n  --simple-colors-default-theme-yellow-8: #ffff3a;\n  --simple-colors-default-theme-yellow-9: #ffff7c;\n  --simple-colors-default-theme-yellow-10: #ffff90;\n  --simple-colors-default-theme-yellow-11: #ffffac;\n  --simple-colors-default-theme-yellow-12: #ffffd5;\n  \n  --simple-colors-default-theme-amber-1: #221a00;\n  --simple-colors-default-theme-amber-2: #302500;\n  --simple-colors-default-theme-amber-3: #413200;\n  --simple-colors-default-theme-amber-4: #614b00;\n  --simple-colors-default-theme-amber-5: #876800;\n  --simple-colors-default-theme-amber-6: #b28900;\n  --simple-colors-default-theme-amber-7: #ffc500;\n  --simple-colors-default-theme-amber-8: #ffc235;\n  --simple-colors-default-theme-amber-9: #ffcf5e;\n  --simple-colors-default-theme-amber-10: #ffd677;\n  --simple-colors-default-theme-amber-11: #ffdf92;\n  --simple-colors-default-theme-amber-12: #fff2d4;\n  \n  --simple-colors-default-theme-orange-1: #2c1400;\n  --simple-colors-default-theme-orange-2: #3d1c00;\n  --simple-colors-default-theme-orange-3: #612d00;\n  --simple-colors-default-theme-orange-4: #833d00;\n  --simple-colors-default-theme-orange-5: #ae5100;\n  --simple-colors-default-theme-orange-6: #e56a00;\n  --simple-colors-default-theme-orange-7: #ff9625;\n  --simple-colors-default-theme-orange-8: #ff9e36;\n  --simple-colors-default-theme-orange-9: #ffb05c;\n  --simple-colors-default-theme-orange-10: #ffbd75;\n  --simple-colors-default-theme-orange-11: #ffca92;\n  --simple-colors-default-theme-orange-12: #ffebd7;\n  \n  --simple-colors-default-theme-deep-orange-1: #240700;\n  --simple-colors-default-theme-deep-orange-2: #3a0c00;\n  --simple-colors-default-theme-deep-orange-3: #561100;\n  --simple-colors-default-theme-deep-orange-4: #8a1c00;\n  --simple-colors-default-theme-deep-orange-5: #b92500;\n  --simple-colors-default-theme-deep-orange-6: #f53100;\n  --simple-colors-default-theme-deep-orange-7: #ff6c3c;\n  --simple-colors-default-theme-deep-orange-8: #ff7649;\n  --simple-colors-default-theme-deep-orange-9: #ff8a64;\n  --simple-colors-default-theme-deep-orange-10: #ffa588;\n  --simple-colors-default-theme-deep-orange-11: #ffb299;\n  --simple-colors-default-theme-deep-orange-12: #ffe7e0;\n  \n  --simple-colors-default-theme-brown-1: #200e09;\n  --simple-colors-default-theme-brown-2: #2c140e;\n  --simple-colors-default-theme-brown-3: #3b1e15;\n  --simple-colors-default-theme-brown-4: #5b3328;\n  --simple-colors-default-theme-brown-5: #724539;\n  --simple-colors-default-theme-brown-6: #85574a;\n  --simple-colors-default-theme-brown-7: #a47060;\n  --simple-colors-default-theme-brown-8: #ac7868;\n  --simple-colors-default-theme-brown-9: #b68373;\n  --simple-colors-default-theme-brown-10: #c59485;\n  --simple-colors-default-theme-brown-11: #e5b8aa;\n  --simple-colors-default-theme-brown-12: #f0e2de;\n  \n  --simple-colors-default-theme-blue-grey-1: #0f1518;\n  --simple-colors-default-theme-blue-grey-2: #182023;\n  --simple-colors-default-theme-blue-grey-3: #1e282c;\n  --simple-colors-default-theme-blue-grey-4: #2f3e45;\n  --simple-colors-default-theme-blue-grey-5: #40535b;\n  --simple-colors-default-theme-blue-grey-6: #56707c;\n  --simple-colors-default-theme-blue-grey-7: #718892;\n  --simple-colors-default-theme-blue-grey-8: #7a8f98;\n  --simple-colors-default-theme-blue-grey-9: #8d9fa7;\n  --simple-colors-default-theme-blue-grey-10: #9badb6;\n  --simple-colors-default-theme-blue-grey-11: #b1c5ce;\n  --simple-colors-default-theme-blue-grey-12: #e7eff1; }\n\n:host([accent-color=grey]) {\n  --simple-colors-default-theme-accent-1: #ffffff;\n  --simple-colors-default-theme-accent-2: #eeeeee;\n  --simple-colors-default-theme-accent-3: #dddddd;\n  --simple-colors-default-theme-accent-4: #cccccc;\n  --simple-colors-default-theme-accent-5: #bbbbbb;\n  --simple-colors-default-theme-accent-6: #999999;\n  --simple-colors-default-theme-accent-7: #666666;\n  --simple-colors-default-theme-accent-8: #444444;\n  --simple-colors-default-theme-accent-9: #333333;\n  --simple-colors-default-theme-accent-10: #222222;\n  --simple-colors-default-theme-accent-11: #111111;\n  --simple-colors-default-theme-accent-12: #000000;\n  --simple-colors-fixed-theme-accent-1: #ffffff;\n  --simple-colors-fixed-theme-accent-2: #eeeeee;\n  --simple-colors-fixed-theme-accent-3: #dddddd;\n  --simple-colors-fixed-theme-accent-4: #cccccc;\n  --simple-colors-fixed-theme-accent-5: #bbbbbb;\n  --simple-colors-fixed-theme-accent-6: #999999;\n  --simple-colors-fixed-theme-accent-7: #666666;\n  --simple-colors-fixed-theme-accent-8: #444444;\n  --simple-colors-fixed-theme-accent-9: #333333;\n  --simple-colors-fixed-theme-accent-10: #222222;\n  --simple-colors-fixed-theme-accent-11: #111111;\n  --simple-colors-fixed-theme-accent-12: #000000; }\n\n:host([dark][accent-color=grey]) {\n  --simple-colors-default-theme-accent-1: #000000;\n  --simple-colors-default-theme-accent-2: #111111;\n  --simple-colors-default-theme-accent-3: #222222;\n  --simple-colors-default-theme-accent-4: #333333;\n  --simple-colors-default-theme-accent-5: #444444;\n  --simple-colors-default-theme-accent-6: #666666;\n  --simple-colors-default-theme-accent-7: #999999;\n  --simple-colors-default-theme-accent-8: #bbbbbb;\n  --simple-colors-default-theme-accent-9: #cccccc;\n  --simple-colors-default-theme-accent-10: #dddddd;\n  --simple-colors-default-theme-accent-11: #eeeeee;\n  --simple-colors-default-theme-accent-12: #ffffff; }\n\n:host([accent-color=red]) {\n  --simple-colors-default-theme-accent-1: #ffdddd;\n  --simple-colors-default-theme-accent-2: #ffaeae;\n  --simple-colors-default-theme-accent-3: #ff8f8f;\n  --simple-colors-default-theme-accent-4: #ff7474;\n  --simple-colors-default-theme-accent-5: #fd5151;\n  --simple-colors-default-theme-accent-6: #ff2222;\n  --simple-colors-default-theme-accent-7: #ee0000;\n  --simple-colors-default-theme-accent-8: #ac0000;\n  --simple-colors-default-theme-accent-9: #850000;\n  --simple-colors-default-theme-accent-10: #670000;\n  --simple-colors-default-theme-accent-11: #520000;\n  --simple-colors-default-theme-accent-12: #3f0000;\n  --simple-colors-fixed-theme-accent-1: #ffdddd;\n  --simple-colors-fixed-theme-accent-2: #ffaeae;\n  --simple-colors-fixed-theme-accent-3: #ff8f8f;\n  --simple-colors-fixed-theme-accent-4: #ff7474;\n  --simple-colors-fixed-theme-accent-5: #fd5151;\n  --simple-colors-fixed-theme-accent-6: #ff2222;\n  --simple-colors-fixed-theme-accent-7: #ee0000;\n  --simple-colors-fixed-theme-accent-8: #ac0000;\n  --simple-colors-fixed-theme-accent-9: #850000;\n  --simple-colors-fixed-theme-accent-10: #670000;\n  --simple-colors-fixed-theme-accent-11: #520000;\n  --simple-colors-fixed-theme-accent-12: #3f0000; }\n\n:host([dark][accent-color=red]) {\n  --simple-colors-default-theme-accent-1: #3f0000;\n  --simple-colors-default-theme-accent-2: #520000;\n  --simple-colors-default-theme-accent-3: #670000;\n  --simple-colors-default-theme-accent-4: #850000;\n  --simple-colors-default-theme-accent-5: #ac0000;\n  --simple-colors-default-theme-accent-6: #ee0000;\n  --simple-colors-default-theme-accent-7: #ff2222;\n  --simple-colors-default-theme-accent-8: #fd5151;\n  --simple-colors-default-theme-accent-9: #ff7474;\n  --simple-colors-default-theme-accent-10: #ff8f8f;\n  --simple-colors-default-theme-accent-11: #ffaeae;\n  --simple-colors-default-theme-accent-12: #ffdddd; }\n\n:host([accent-color=pink]) {\n  --simple-colors-default-theme-accent-1: #ffe6f1;\n  --simple-colors-default-theme-accent-2: #ffa5cf;\n  --simple-colors-default-theme-accent-3: #ff87c0;\n  --simple-colors-default-theme-accent-4: #ff73b5;\n  --simple-colors-default-theme-accent-5: #fd60aa;\n  --simple-colors-default-theme-accent-6: #ff3996;\n  --simple-colors-default-theme-accent-7: #da004e;\n  --simple-colors-default-theme-accent-8: #b80042;\n  --simple-colors-default-theme-accent-9: #980036;\n  --simple-colors-default-theme-accent-10: #78002b;\n  --simple-colors-default-theme-accent-11: #5a0020;\n  --simple-colors-default-theme-accent-12: #440019;\n  --simple-colors-fixed-theme-accent-1: #ffe6f1;\n  --simple-colors-fixed-theme-accent-2: #ffa5cf;\n  --simple-colors-fixed-theme-accent-3: #ff87c0;\n  --simple-colors-fixed-theme-accent-4: #ff73b5;\n  --simple-colors-fixed-theme-accent-5: #fd60aa;\n  --simple-colors-fixed-theme-accent-6: #ff3996;\n  --simple-colors-fixed-theme-accent-7: #da004e;\n  --simple-colors-fixed-theme-accent-8: #b80042;\n  --simple-colors-fixed-theme-accent-9: #980036;\n  --simple-colors-fixed-theme-accent-10: #78002b;\n  --simple-colors-fixed-theme-accent-11: #5a0020;\n  --simple-colors-fixed-theme-accent-12: #440019; }\n\n:host([dark][accent-color=pink]) {\n  --simple-colors-default-theme-accent-1: #440019;\n  --simple-colors-default-theme-accent-2: #5a0020;\n  --simple-colors-default-theme-accent-3: #78002b;\n  --simple-colors-default-theme-accent-4: #980036;\n  --simple-colors-default-theme-accent-5: #b80042;\n  --simple-colors-default-theme-accent-6: #da004e;\n  --simple-colors-default-theme-accent-7: #ff3996;\n  --simple-colors-default-theme-accent-8: #fd60aa;\n  --simple-colors-default-theme-accent-9: #ff73b5;\n  --simple-colors-default-theme-accent-10: #ff87c0;\n  --simple-colors-default-theme-accent-11: #ffa5cf;\n  --simple-colors-default-theme-accent-12: #ffe6f1; }\n\n:host([accent-color=purple]) {\n  --simple-colors-default-theme-accent-1: #fce6ff;\n  --simple-colors-default-theme-accent-2: #f4affd;\n  --simple-colors-default-theme-accent-3: #f394ff;\n  --simple-colors-default-theme-accent-4: #f07cff;\n  --simple-colors-default-theme-accent-5: #ed61ff;\n  --simple-colors-default-theme-accent-6: #e200ff;\n  --simple-colors-default-theme-accent-7: #a500ba;\n  --simple-colors-default-theme-accent-8: #8a009b;\n  --simple-colors-default-theme-accent-9: #6c0079;\n  --simple-colors-default-theme-accent-10: #490052;\n  --simple-colors-default-theme-accent-11: #33003a;\n  --simple-colors-default-theme-accent-12: #200025;\n  --simple-colors-fixed-theme-accent-1: #fce6ff;\n  --simple-colors-fixed-theme-accent-2: #f4affd;\n  --simple-colors-fixed-theme-accent-3: #f394ff;\n  --simple-colors-fixed-theme-accent-4: #f07cff;\n  --simple-colors-fixed-theme-accent-5: #ed61ff;\n  --simple-colors-fixed-theme-accent-6: #e200ff;\n  --simple-colors-fixed-theme-accent-7: #a500ba;\n  --simple-colors-fixed-theme-accent-8: #8a009b;\n  --simple-colors-fixed-theme-accent-9: #6c0079;\n  --simple-colors-fixed-theme-accent-10: #490052;\n  --simple-colors-fixed-theme-accent-11: #33003a;\n  --simple-colors-fixed-theme-accent-12: #200025; }\n\n:host([dark][accent-color=purple]) {\n  --simple-colors-default-theme-accent-1: #200025;\n  --simple-colors-default-theme-accent-2: #33003a;\n  --simple-colors-default-theme-accent-3: #490052;\n  --simple-colors-default-theme-accent-4: #6c0079;\n  --simple-colors-default-theme-accent-5: #8a009b;\n  --simple-colors-default-theme-accent-6: #a500ba;\n  --simple-colors-default-theme-accent-7: #e200ff;\n  --simple-colors-default-theme-accent-8: #ed61ff;\n  --simple-colors-default-theme-accent-9: #f07cff;\n  --simple-colors-default-theme-accent-10: #f394ff;\n  --simple-colors-default-theme-accent-11: #f4affd;\n  --simple-colors-default-theme-accent-12: #fce6ff; }\n\n:host([accent-color=deep-purple]) {\n  --simple-colors-default-theme-accent-1: #f3e4ff;\n  --simple-colors-default-theme-accent-2: #ddacff;\n  --simple-colors-default-theme-accent-3: #c97eff;\n  --simple-colors-default-theme-accent-4: #bb63f9;\n  --simple-colors-default-theme-accent-5: #b44aff;\n  --simple-colors-default-theme-accent-6: #a931ff;\n  --simple-colors-default-theme-accent-7: #7e00d8;\n  --simple-colors-default-theme-accent-8: #5d009f;\n  --simple-colors-default-theme-accent-9: #4c0081;\n  --simple-colors-default-theme-accent-10: #3a0063;\n  --simple-colors-default-theme-accent-11: #2a0049;\n  --simple-colors-default-theme-accent-12: #1d0033;\n  --simple-colors-fixed-theme-accent-1: #f3e4ff;\n  --simple-colors-fixed-theme-accent-2: #ddacff;\n  --simple-colors-fixed-theme-accent-3: #c97eff;\n  --simple-colors-fixed-theme-accent-4: #bb63f9;\n  --simple-colors-fixed-theme-accent-5: #b44aff;\n  --simple-colors-fixed-theme-accent-6: #a931ff;\n  --simple-colors-fixed-theme-accent-7: #7e00d8;\n  --simple-colors-fixed-theme-accent-8: #5d009f;\n  --simple-colors-fixed-theme-accent-9: #4c0081;\n  --simple-colors-fixed-theme-accent-10: #3a0063;\n  --simple-colors-fixed-theme-accent-11: #2a0049;\n  --simple-colors-fixed-theme-accent-12: #1d0033; }\n\n:host([dark][accent-color=deep-purple]) {\n  --simple-colors-default-theme-accent-1: #1d0033;\n  --simple-colors-default-theme-accent-2: #2a0049;\n  --simple-colors-default-theme-accent-3: #3a0063;\n  --simple-colors-default-theme-accent-4: #4c0081;\n  --simple-colors-default-theme-accent-5: #5d009f;\n  --simple-colors-default-theme-accent-6: #7e00d8;\n  --simple-colors-default-theme-accent-7: #a931ff;\n  --simple-colors-default-theme-accent-8: #b44aff;\n  --simple-colors-default-theme-accent-9: #bb63f9;\n  --simple-colors-default-theme-accent-10: #c97eff;\n  --simple-colors-default-theme-accent-11: #ddacff;\n  --simple-colors-default-theme-accent-12: #f3e4ff; }\n\n:host([accent-color=indigo]) {\n  --simple-colors-default-theme-accent-1: #e5ddff;\n  --simple-colors-default-theme-accent-2: #c3b2ff;\n  --simple-colors-default-theme-accent-3: #af97ff;\n  --simple-colors-default-theme-accent-4: #9e82ff;\n  --simple-colors-default-theme-accent-5: #9373ff;\n  --simple-colors-default-theme-accent-6: #835fff;\n  --simple-colors-default-theme-accent-7: #3a00ff;\n  --simple-colors-default-theme-accent-8: #2801b0;\n  --simple-colors-default-theme-accent-9: #20008c;\n  --simple-colors-default-theme-accent-10: #160063;\n  --simple-colors-default-theme-accent-11: #100049;\n  --simple-colors-default-theme-accent-12: #0a0030;\n  --simple-colors-fixed-theme-accent-1: #e5ddff;\n  --simple-colors-fixed-theme-accent-2: #c3b2ff;\n  --simple-colors-fixed-theme-accent-3: #af97ff;\n  --simple-colors-fixed-theme-accent-4: #9e82ff;\n  --simple-colors-fixed-theme-accent-5: #9373ff;\n  --simple-colors-fixed-theme-accent-6: #835fff;\n  --simple-colors-fixed-theme-accent-7: #3a00ff;\n  --simple-colors-fixed-theme-accent-8: #2801b0;\n  --simple-colors-fixed-theme-accent-9: #20008c;\n  --simple-colors-fixed-theme-accent-10: #160063;\n  --simple-colors-fixed-theme-accent-11: #100049;\n  --simple-colors-fixed-theme-accent-12: #0a0030; }\n\n:host([dark][accent-color=indigo]) {\n  --simple-colors-default-theme-accent-1: #0a0030;\n  --simple-colors-default-theme-accent-2: #100049;\n  --simple-colors-default-theme-accent-3: #160063;\n  --simple-colors-default-theme-accent-4: #20008c;\n  --simple-colors-default-theme-accent-5: #2801b0;\n  --simple-colors-default-theme-accent-6: #3a00ff;\n  --simple-colors-default-theme-accent-7: #835fff;\n  --simple-colors-default-theme-accent-8: #9373ff;\n  --simple-colors-default-theme-accent-9: #9e82ff;\n  --simple-colors-default-theme-accent-10: #af97ff;\n  --simple-colors-default-theme-accent-11: #c3b2ff;\n  --simple-colors-default-theme-accent-12: #e5ddff; }\n\n:host([accent-color=blue]) {\n  --simple-colors-default-theme-accent-1: #e2ecff;\n  --simple-colors-default-theme-accent-2: #acc9ff;\n  --simple-colors-default-theme-accent-3: #95baff;\n  --simple-colors-default-theme-accent-4: #74a5ff;\n  --simple-colors-default-theme-accent-5: #5892fd;\n  --simple-colors-default-theme-accent-6: #4083ff;\n  --simple-colors-default-theme-accent-7: #0059ff;\n  --simple-colors-default-theme-accent-8: #0041bb;\n  --simple-colors-default-theme-accent-9: #003494;\n  --simple-colors-default-theme-accent-10: #002569;\n  --simple-colors-default-theme-accent-11: #001947;\n  --simple-colors-default-theme-accent-12: #001333;\n  --simple-colors-fixed-theme-accent-1: #e2ecff;\n  --simple-colors-fixed-theme-accent-2: #acc9ff;\n  --simple-colors-fixed-theme-accent-3: #95baff;\n  --simple-colors-fixed-theme-accent-4: #74a5ff;\n  --simple-colors-fixed-theme-accent-5: #5892fd;\n  --simple-colors-fixed-theme-accent-6: #4083ff;\n  --simple-colors-fixed-theme-accent-7: #0059ff;\n  --simple-colors-fixed-theme-accent-8: #0041bb;\n  --simple-colors-fixed-theme-accent-9: #003494;\n  --simple-colors-fixed-theme-accent-10: #002569;\n  --simple-colors-fixed-theme-accent-11: #001947;\n  --simple-colors-fixed-theme-accent-12: #001333; }\n\n:host([dark][accent-color=blue]) {\n  --simple-colors-default-theme-accent-1: #001333;\n  --simple-colors-default-theme-accent-2: #001947;\n  --simple-colors-default-theme-accent-3: #002569;\n  --simple-colors-default-theme-accent-4: #003494;\n  --simple-colors-default-theme-accent-5: #0041bb;\n  --simple-colors-default-theme-accent-6: #0059ff;\n  --simple-colors-default-theme-accent-7: #4083ff;\n  --simple-colors-default-theme-accent-8: #5892fd;\n  --simple-colors-default-theme-accent-9: #74a5ff;\n  --simple-colors-default-theme-accent-10: #95baff;\n  --simple-colors-default-theme-accent-11: #acc9ff;\n  --simple-colors-default-theme-accent-12: #e2ecff; }\n\n:host([accent-color=light-blue]) {\n  --simple-colors-default-theme-accent-1: #cde8ff;\n  --simple-colors-default-theme-accent-2: #a1d1ff;\n  --simple-colors-default-theme-accent-3: #92c9ff;\n  --simple-colors-default-theme-accent-4: #65b3ff;\n  --simple-colors-default-theme-accent-5: #58adff;\n  --simple-colors-default-theme-accent-6: #41a1ff;\n  --simple-colors-default-theme-accent-7: #007ffc;\n  --simple-colors-default-theme-accent-8: #0066ca;\n  --simple-colors-default-theme-accent-9: #0055a8;\n  --simple-colors-default-theme-accent-10: #003f7d;\n  --simple-colors-default-theme-accent-11: #002850;\n  --simple-colors-default-theme-accent-12: #001b36;\n  --simple-colors-fixed-theme-accent-1: #cde8ff;\n  --simple-colors-fixed-theme-accent-2: #a1d1ff;\n  --simple-colors-fixed-theme-accent-3: #92c9ff;\n  --simple-colors-fixed-theme-accent-4: #65b3ff;\n  --simple-colors-fixed-theme-accent-5: #58adff;\n  --simple-colors-fixed-theme-accent-6: #41a1ff;\n  --simple-colors-fixed-theme-accent-7: #007ffc;\n  --simple-colors-fixed-theme-accent-8: #0066ca;\n  --simple-colors-fixed-theme-accent-9: #0055a8;\n  --simple-colors-fixed-theme-accent-10: #003f7d;\n  --simple-colors-fixed-theme-accent-11: #002850;\n  --simple-colors-fixed-theme-accent-12: #001b36; }\n\n:host([dark][accent-color=light-blue]) {\n  --simple-colors-default-theme-accent-1: #001b36;\n  --simple-colors-default-theme-accent-2: #002850;\n  --simple-colors-default-theme-accent-3: #003f7d;\n  --simple-colors-default-theme-accent-4: #0055a8;\n  --simple-colors-default-theme-accent-5: #0066ca;\n  --simple-colors-default-theme-accent-6: #007ffc;\n  --simple-colors-default-theme-accent-7: #41a1ff;\n  --simple-colors-default-theme-accent-8: #58adff;\n  --simple-colors-default-theme-accent-9: #65b3ff;\n  --simple-colors-default-theme-accent-10: #92c9ff;\n  --simple-colors-default-theme-accent-11: #a1d1ff;\n  --simple-colors-default-theme-accent-12: #cde8ff; }\n\n:host([accent-color=cyan]) {\n  --simple-colors-default-theme-accent-1: #ddf8ff;\n  --simple-colors-default-theme-accent-2: #9beaff;\n  --simple-colors-default-theme-accent-3: #77e2ff;\n  --simple-colors-default-theme-accent-4: #33d4ff;\n  --simple-colors-default-theme-accent-5: #1ccfff;\n  --simple-colors-default-theme-accent-6: #00c9ff;\n  --simple-colors-default-theme-accent-7: #009dc7;\n  --simple-colors-default-theme-accent-8: #007999;\n  --simple-colors-default-theme-accent-9: #005970;\n  --simple-colors-default-theme-accent-10: #003f50;\n  --simple-colors-default-theme-accent-11: #002c38;\n  --simple-colors-default-theme-accent-12: #001a20;\n  --simple-colors-fixed-theme-accent-1: #ddf8ff;\n  --simple-colors-fixed-theme-accent-2: #9beaff;\n  --simple-colors-fixed-theme-accent-3: #77e2ff;\n  --simple-colors-fixed-theme-accent-4: #33d4ff;\n  --simple-colors-fixed-theme-accent-5: #1ccfff;\n  --simple-colors-fixed-theme-accent-6: #00c9ff;\n  --simple-colors-fixed-theme-accent-7: #009dc7;\n  --simple-colors-fixed-theme-accent-8: #007999;\n  --simple-colors-fixed-theme-accent-9: #005970;\n  --simple-colors-fixed-theme-accent-10: #003f50;\n  --simple-colors-fixed-theme-accent-11: #002c38;\n  --simple-colors-fixed-theme-accent-12: #001a20; }\n\n:host([dark][accent-color=cyan]) {\n  --simple-colors-default-theme-accent-1: #001a20;\n  --simple-colors-default-theme-accent-2: #002c38;\n  --simple-colors-default-theme-accent-3: #003f50;\n  --simple-colors-default-theme-accent-4: #005970;\n  --simple-colors-default-theme-accent-5: #007999;\n  --simple-colors-default-theme-accent-6: #009dc7;\n  --simple-colors-default-theme-accent-7: #00c9ff;\n  --simple-colors-default-theme-accent-8: #1ccfff;\n  --simple-colors-default-theme-accent-9: #33d4ff;\n  --simple-colors-default-theme-accent-10: #77e2ff;\n  --simple-colors-default-theme-accent-11: #9beaff;\n  --simple-colors-default-theme-accent-12: #ddf8ff; }\n\n:host([accent-color=teal]) {\n  --simple-colors-default-theme-accent-1: #d9fff0;\n  --simple-colors-default-theme-accent-2: #98ffd7;\n  --simple-colors-default-theme-accent-3: #79ffcb;\n  --simple-colors-default-theme-accent-4: #56ffbd;\n  --simple-colors-default-theme-accent-5: #29ffac;\n  --simple-colors-default-theme-accent-6: #00ff9c;\n  --simple-colors-default-theme-accent-7: #009d75;\n  --simple-colors-default-theme-accent-8: #007658;\n  --simple-colors-default-theme-accent-9: #004e3a;\n  --simple-colors-default-theme-accent-10: #003829;\n  --simple-colors-default-theme-accent-11: #002a20;\n  --simple-colors-default-theme-accent-12: #001b14;\n  --simple-colors-fixed-theme-accent-1: #d9fff0;\n  --simple-colors-fixed-theme-accent-2: #98ffd7;\n  --simple-colors-fixed-theme-accent-3: #79ffcb;\n  --simple-colors-fixed-theme-accent-4: #56ffbd;\n  --simple-colors-fixed-theme-accent-5: #29ffac;\n  --simple-colors-fixed-theme-accent-6: #00ff9c;\n  --simple-colors-fixed-theme-accent-7: #009d75;\n  --simple-colors-fixed-theme-accent-8: #007658;\n  --simple-colors-fixed-theme-accent-9: #004e3a;\n  --simple-colors-fixed-theme-accent-10: #003829;\n  --simple-colors-fixed-theme-accent-11: #002a20;\n  --simple-colors-fixed-theme-accent-12: #001b14; }\n\n:host([dark][accent-color=teal]) {\n  --simple-colors-default-theme-accent-1: #001b14;\n  --simple-colors-default-theme-accent-2: #002a20;\n  --simple-colors-default-theme-accent-3: #003829;\n  --simple-colors-default-theme-accent-4: #004e3a;\n  --simple-colors-default-theme-accent-5: #007658;\n  --simple-colors-default-theme-accent-6: #009d75;\n  --simple-colors-default-theme-accent-7: #00ff9c;\n  --simple-colors-default-theme-accent-8: #29ffac;\n  --simple-colors-default-theme-accent-9: #56ffbd;\n  --simple-colors-default-theme-accent-10: #79ffcb;\n  --simple-colors-default-theme-accent-11: #98ffd7;\n  --simple-colors-default-theme-accent-12: #d9fff0; }\n\n:host([accent-color=green]) {\n  --simple-colors-default-theme-accent-1: #e1ffeb;\n  --simple-colors-default-theme-accent-2: #acffc9;\n  --simple-colors-default-theme-accent-3: #79ffa7;\n  --simple-colors-default-theme-accent-4: #49ff88;\n  --simple-colors-default-theme-accent-5: #24ff70;\n  --simple-colors-default-theme-accent-6: #00f961;\n  --simple-colors-default-theme-accent-7: #008c37;\n  --simple-colors-default-theme-accent-8: #00762e;\n  --simple-colors-default-theme-accent-9: #005a23;\n  --simple-colors-default-theme-accent-10: #003d18;\n  --simple-colors-default-theme-accent-11: #002a11;\n  --simple-colors-default-theme-accent-12: #001d0c;\n  --simple-colors-fixed-theme-accent-1: #e1ffeb;\n  --simple-colors-fixed-theme-accent-2: #acffc9;\n  --simple-colors-fixed-theme-accent-3: #79ffa7;\n  --simple-colors-fixed-theme-accent-4: #49ff88;\n  --simple-colors-fixed-theme-accent-5: #24ff70;\n  --simple-colors-fixed-theme-accent-6: #00f961;\n  --simple-colors-fixed-theme-accent-7: #008c37;\n  --simple-colors-fixed-theme-accent-8: #00762e;\n  --simple-colors-fixed-theme-accent-9: #005a23;\n  --simple-colors-fixed-theme-accent-10: #003d18;\n  --simple-colors-fixed-theme-accent-11: #002a11;\n  --simple-colors-fixed-theme-accent-12: #001d0c; }\n\n:host([dark][accent-color=green]) {\n  --simple-colors-default-theme-accent-1: #001d0c;\n  --simple-colors-default-theme-accent-2: #002a11;\n  --simple-colors-default-theme-accent-3: #003d18;\n  --simple-colors-default-theme-accent-4: #005a23;\n  --simple-colors-default-theme-accent-5: #00762e;\n  --simple-colors-default-theme-accent-6: #008c37;\n  --simple-colors-default-theme-accent-7: #00f961;\n  --simple-colors-default-theme-accent-8: #24ff70;\n  --simple-colors-default-theme-accent-9: #49ff88;\n  --simple-colors-default-theme-accent-10: #79ffa7;\n  --simple-colors-default-theme-accent-11: #acffc9;\n  --simple-colors-default-theme-accent-12: #e1ffeb; }\n\n:host([accent-color=light-green]) {\n  --simple-colors-default-theme-accent-1: #ebffdb;\n  --simple-colors-default-theme-accent-2: #c7ff9b;\n  --simple-colors-default-theme-accent-3: #b1ff75;\n  --simple-colors-default-theme-accent-4: #a1fd5a;\n  --simple-colors-default-theme-accent-5: #8efd38;\n  --simple-colors-default-theme-accent-6: #6fff00;\n  --simple-colors-default-theme-accent-7: #429d00;\n  --simple-colors-default-theme-accent-8: #357f00;\n  --simple-colors-default-theme-accent-9: #296100;\n  --simple-colors-default-theme-accent-10: #1b3f00;\n  --simple-colors-default-theme-accent-11: #143000;\n  --simple-colors-default-theme-accent-12: #0d2000;\n  --simple-colors-fixed-theme-accent-1: #ebffdb;\n  --simple-colors-fixed-theme-accent-2: #c7ff9b;\n  --simple-colors-fixed-theme-accent-3: #b1ff75;\n  --simple-colors-fixed-theme-accent-4: #a1fd5a;\n  --simple-colors-fixed-theme-accent-5: #8efd38;\n  --simple-colors-fixed-theme-accent-6: #6fff00;\n  --simple-colors-fixed-theme-accent-7: #429d00;\n  --simple-colors-fixed-theme-accent-8: #357f00;\n  --simple-colors-fixed-theme-accent-9: #296100;\n  --simple-colors-fixed-theme-accent-10: #1b3f00;\n  --simple-colors-fixed-theme-accent-11: #143000;\n  --simple-colors-fixed-theme-accent-12: #0d2000; }\n\n:host([dark][accent-color=light-green]) {\n  --simple-colors-default-theme-accent-1: #0d2000;\n  --simple-colors-default-theme-accent-2: #143000;\n  --simple-colors-default-theme-accent-3: #1b3f00;\n  --simple-colors-default-theme-accent-4: #296100;\n  --simple-colors-default-theme-accent-5: #357f00;\n  --simple-colors-default-theme-accent-6: #429d00;\n  --simple-colors-default-theme-accent-7: #6fff00;\n  --simple-colors-default-theme-accent-8: #8efd38;\n  --simple-colors-default-theme-accent-9: #a1fd5a;\n  --simple-colors-default-theme-accent-10: #b1ff75;\n  --simple-colors-default-theme-accent-11: #c7ff9b;\n  --simple-colors-default-theme-accent-12: #ebffdb; }\n\n:host([accent-color=lime]) {\n  --simple-colors-default-theme-accent-1: #f1ffd2;\n  --simple-colors-default-theme-accent-2: #dfff9b;\n  --simple-colors-default-theme-accent-3: #d4ff77;\n  --simple-colors-default-theme-accent-4: #caff58;\n  --simple-colors-default-theme-accent-5: #bdff2d;\n  --simple-colors-default-theme-accent-6: #aeff00;\n  --simple-colors-default-theme-accent-7: #649900;\n  --simple-colors-default-theme-accent-8: #4d7600;\n  --simple-colors-default-theme-accent-9: #3b5a00;\n  --simple-colors-default-theme-accent-10: #293f00;\n  --simple-colors-default-theme-accent-11: #223400;\n  --simple-colors-default-theme-accent-12: #182400;\n  --simple-colors-fixed-theme-accent-1: #f1ffd2;\n  --simple-colors-fixed-theme-accent-2: #dfff9b;\n  --simple-colors-fixed-theme-accent-3: #d4ff77;\n  --simple-colors-fixed-theme-accent-4: #caff58;\n  --simple-colors-fixed-theme-accent-5: #bdff2d;\n  --simple-colors-fixed-theme-accent-6: #aeff00;\n  --simple-colors-fixed-theme-accent-7: #649900;\n  --simple-colors-fixed-theme-accent-8: #4d7600;\n  --simple-colors-fixed-theme-accent-9: #3b5a00;\n  --simple-colors-fixed-theme-accent-10: #293f00;\n  --simple-colors-fixed-theme-accent-11: #223400;\n  --simple-colors-fixed-theme-accent-12: #182400; }\n\n:host([dark][accent-color=lime]) {\n  --simple-colors-default-theme-accent-1: #182400;\n  --simple-colors-default-theme-accent-2: #223400;\n  --simple-colors-default-theme-accent-3: #293f00;\n  --simple-colors-default-theme-accent-4: #3b5a00;\n  --simple-colors-default-theme-accent-5: #4d7600;\n  --simple-colors-default-theme-accent-6: #649900;\n  --simple-colors-default-theme-accent-7: #aeff00;\n  --simple-colors-default-theme-accent-8: #bdff2d;\n  --simple-colors-default-theme-accent-9: #caff58;\n  --simple-colors-default-theme-accent-10: #d4ff77;\n  --simple-colors-default-theme-accent-11: #dfff9b;\n  --simple-colors-default-theme-accent-12: #f1ffd2; }\n\n:host([accent-color=yellow]) {\n  --simple-colors-default-theme-accent-1: #ffffd5;\n  --simple-colors-default-theme-accent-2: #ffffac;\n  --simple-colors-default-theme-accent-3: #ffff90;\n  --simple-colors-default-theme-accent-4: #ffff7c;\n  --simple-colors-default-theme-accent-5: #ffff3a;\n  --simple-colors-default-theme-accent-6: #f6f600;\n  --simple-colors-default-theme-accent-7: #929100;\n  --simple-colors-default-theme-accent-8: #787700;\n  --simple-colors-default-theme-accent-9: #585700;\n  --simple-colors-default-theme-accent-10: #454400;\n  --simple-colors-default-theme-accent-11: #303000;\n  --simple-colors-default-theme-accent-12: #242400;\n  --simple-colors-fixed-theme-accent-1: #ffffd5;\n  --simple-colors-fixed-theme-accent-2: #ffffac;\n  --simple-colors-fixed-theme-accent-3: #ffff90;\n  --simple-colors-fixed-theme-accent-4: #ffff7c;\n  --simple-colors-fixed-theme-accent-5: #ffff3a;\n  --simple-colors-fixed-theme-accent-6: #f6f600;\n  --simple-colors-fixed-theme-accent-7: #929100;\n  --simple-colors-fixed-theme-accent-8: #787700;\n  --simple-colors-fixed-theme-accent-9: #585700;\n  --simple-colors-fixed-theme-accent-10: #454400;\n  --simple-colors-fixed-theme-accent-11: #303000;\n  --simple-colors-fixed-theme-accent-12: #242400; }\n\n:host([dark][accent-color=yellow]) {\n  --simple-colors-default-theme-accent-1: #242400;\n  --simple-colors-default-theme-accent-2: #303000;\n  --simple-colors-default-theme-accent-3: #454400;\n  --simple-colors-default-theme-accent-4: #585700;\n  --simple-colors-default-theme-accent-5: #787700;\n  --simple-colors-default-theme-accent-6: #929100;\n  --simple-colors-default-theme-accent-7: #f6f600;\n  --simple-colors-default-theme-accent-8: #ffff3a;\n  --simple-colors-default-theme-accent-9: #ffff7c;\n  --simple-colors-default-theme-accent-10: #ffff90;\n  --simple-colors-default-theme-accent-11: #ffffac;\n  --simple-colors-default-theme-accent-12: #ffffd5; }\n\n:host([accent-color=amber]) {\n  --simple-colors-default-theme-accent-1: #fff2d4;\n  --simple-colors-default-theme-accent-2: #ffdf92;\n  --simple-colors-default-theme-accent-3: #ffd677;\n  --simple-colors-default-theme-accent-4: #ffcf5e;\n  --simple-colors-default-theme-accent-5: #ffc235;\n  --simple-colors-default-theme-accent-6: #ffc500;\n  --simple-colors-default-theme-accent-7: #b28900;\n  --simple-colors-default-theme-accent-8: #876800;\n  --simple-colors-default-theme-accent-9: #614b00;\n  --simple-colors-default-theme-accent-10: #413200;\n  --simple-colors-default-theme-accent-11: #302500;\n  --simple-colors-default-theme-accent-12: #221a00;\n  --simple-colors-fixed-theme-accent-1: #fff2d4;\n  --simple-colors-fixed-theme-accent-2: #ffdf92;\n  --simple-colors-fixed-theme-accent-3: #ffd677;\n  --simple-colors-fixed-theme-accent-4: #ffcf5e;\n  --simple-colors-fixed-theme-accent-5: #ffc235;\n  --simple-colors-fixed-theme-accent-6: #ffc500;\n  --simple-colors-fixed-theme-accent-7: #b28900;\n  --simple-colors-fixed-theme-accent-8: #876800;\n  --simple-colors-fixed-theme-accent-9: #614b00;\n  --simple-colors-fixed-theme-accent-10: #413200;\n  --simple-colors-fixed-theme-accent-11: #302500;\n  --simple-colors-fixed-theme-accent-12: #221a00; }\n\n:host([dark][accent-color=amber]) {\n  --simple-colors-default-theme-accent-1: #221a00;\n  --simple-colors-default-theme-accent-2: #302500;\n  --simple-colors-default-theme-accent-3: #413200;\n  --simple-colors-default-theme-accent-4: #614b00;\n  --simple-colors-default-theme-accent-5: #876800;\n  --simple-colors-default-theme-accent-6: #b28900;\n  --simple-colors-default-theme-accent-7: #ffc500;\n  --simple-colors-default-theme-accent-8: #ffc235;\n  --simple-colors-default-theme-accent-9: #ffcf5e;\n  --simple-colors-default-theme-accent-10: #ffd677;\n  --simple-colors-default-theme-accent-11: #ffdf92;\n  --simple-colors-default-theme-accent-12: #fff2d4; }\n\n:host([accent-color=orange]) {\n  --simple-colors-default-theme-accent-1: #ffebd7;\n  --simple-colors-default-theme-accent-2: #ffca92;\n  --simple-colors-default-theme-accent-3: #ffbd75;\n  --simple-colors-default-theme-accent-4: #ffb05c;\n  --simple-colors-default-theme-accent-5: #ff9e36;\n  --simple-colors-default-theme-accent-6: #ff9625;\n  --simple-colors-default-theme-accent-7: #e56a00;\n  --simple-colors-default-theme-accent-8: #ae5100;\n  --simple-colors-default-theme-accent-9: #833d00;\n  --simple-colors-default-theme-accent-10: #612d00;\n  --simple-colors-default-theme-accent-11: #3d1c00;\n  --simple-colors-default-theme-accent-12: #2c1400;\n  --simple-colors-fixed-theme-accent-1: #ffebd7;\n  --simple-colors-fixed-theme-accent-2: #ffca92;\n  --simple-colors-fixed-theme-accent-3: #ffbd75;\n  --simple-colors-fixed-theme-accent-4: #ffb05c;\n  --simple-colors-fixed-theme-accent-5: #ff9e36;\n  --simple-colors-fixed-theme-accent-6: #ff9625;\n  --simple-colors-fixed-theme-accent-7: #e56a00;\n  --simple-colors-fixed-theme-accent-8: #ae5100;\n  --simple-colors-fixed-theme-accent-9: #833d00;\n  --simple-colors-fixed-theme-accent-10: #612d00;\n  --simple-colors-fixed-theme-accent-11: #3d1c00;\n  --simple-colors-fixed-theme-accent-12: #2c1400; }\n\n:host([dark][accent-color=orange]) {\n  --simple-colors-default-theme-accent-1: #2c1400;\n  --simple-colors-default-theme-accent-2: #3d1c00;\n  --simple-colors-default-theme-accent-3: #612d00;\n  --simple-colors-default-theme-accent-4: #833d00;\n  --simple-colors-default-theme-accent-5: #ae5100;\n  --simple-colors-default-theme-accent-6: #e56a00;\n  --simple-colors-default-theme-accent-7: #ff9625;\n  --simple-colors-default-theme-accent-8: #ff9e36;\n  --simple-colors-default-theme-accent-9: #ffb05c;\n  --simple-colors-default-theme-accent-10: #ffbd75;\n  --simple-colors-default-theme-accent-11: #ffca92;\n  --simple-colors-default-theme-accent-12: #ffebd7; }\n\n:host([accent-color=deep-orange]) {\n  --simple-colors-default-theme-accent-1: #ffe7e0;\n  --simple-colors-default-theme-accent-2: #ffb299;\n  --simple-colors-default-theme-accent-3: #ffa588;\n  --simple-colors-default-theme-accent-4: #ff8a64;\n  --simple-colors-default-theme-accent-5: #ff7649;\n  --simple-colors-default-theme-accent-6: #ff6c3c;\n  --simple-colors-default-theme-accent-7: #f53100;\n  --simple-colors-default-theme-accent-8: #b92500;\n  --simple-colors-default-theme-accent-9: #8a1c00;\n  --simple-colors-default-theme-accent-10: #561100;\n  --simple-colors-default-theme-accent-11: #3a0c00;\n  --simple-colors-default-theme-accent-12: #240700;\n  --simple-colors-fixed-theme-accent-1: #ffe7e0;\n  --simple-colors-fixed-theme-accent-2: #ffb299;\n  --simple-colors-fixed-theme-accent-3: #ffa588;\n  --simple-colors-fixed-theme-accent-4: #ff8a64;\n  --simple-colors-fixed-theme-accent-5: #ff7649;\n  --simple-colors-fixed-theme-accent-6: #ff6c3c;\n  --simple-colors-fixed-theme-accent-7: #f53100;\n  --simple-colors-fixed-theme-accent-8: #b92500;\n  --simple-colors-fixed-theme-accent-9: #8a1c00;\n  --simple-colors-fixed-theme-accent-10: #561100;\n  --simple-colors-fixed-theme-accent-11: #3a0c00;\n  --simple-colors-fixed-theme-accent-12: #240700; }\n\n:host([dark][accent-color=deep-orange]) {\n  --simple-colors-default-theme-accent-1: #240700;\n  --simple-colors-default-theme-accent-2: #3a0c00;\n  --simple-colors-default-theme-accent-3: #561100;\n  --simple-colors-default-theme-accent-4: #8a1c00;\n  --simple-colors-default-theme-accent-5: #b92500;\n  --simple-colors-default-theme-accent-6: #f53100;\n  --simple-colors-default-theme-accent-7: #ff6c3c;\n  --simple-colors-default-theme-accent-8: #ff7649;\n  --simple-colors-default-theme-accent-9: #ff8a64;\n  --simple-colors-default-theme-accent-10: #ffa588;\n  --simple-colors-default-theme-accent-11: #ffb299;\n  --simple-colors-default-theme-accent-12: #ffe7e0; }\n\n:host([accent-color=brown]) {\n  --simple-colors-default-theme-accent-1: #f0e2de;\n  --simple-colors-default-theme-accent-2: #e5b8aa;\n  --simple-colors-default-theme-accent-3: #c59485;\n  --simple-colors-default-theme-accent-4: #b68373;\n  --simple-colors-default-theme-accent-5: #ac7868;\n  --simple-colors-default-theme-accent-6: #a47060;\n  --simple-colors-default-theme-accent-7: #85574a;\n  --simple-colors-default-theme-accent-8: #724539;\n  --simple-colors-default-theme-accent-9: #5b3328;\n  --simple-colors-default-theme-accent-10: #3b1e15;\n  --simple-colors-default-theme-accent-11: #2c140e;\n  --simple-colors-default-theme-accent-12: #200e09;\n  --simple-colors-fixed-theme-accent-1: #f0e2de;\n  --simple-colors-fixed-theme-accent-2: #e5b8aa;\n  --simple-colors-fixed-theme-accent-3: #c59485;\n  --simple-colors-fixed-theme-accent-4: #b68373;\n  --simple-colors-fixed-theme-accent-5: #ac7868;\n  --simple-colors-fixed-theme-accent-6: #a47060;\n  --simple-colors-fixed-theme-accent-7: #85574a;\n  --simple-colors-fixed-theme-accent-8: #724539;\n  --simple-colors-fixed-theme-accent-9: #5b3328;\n  --simple-colors-fixed-theme-accent-10: #3b1e15;\n  --simple-colors-fixed-theme-accent-11: #2c140e;\n  --simple-colors-fixed-theme-accent-12: #200e09; }\n\n:host([dark][accent-color=brown]) {\n  --simple-colors-default-theme-accent-1: #200e09;\n  --simple-colors-default-theme-accent-2: #2c140e;\n  --simple-colors-default-theme-accent-3: #3b1e15;\n  --simple-colors-default-theme-accent-4: #5b3328;\n  --simple-colors-default-theme-accent-5: #724539;\n  --simple-colors-default-theme-accent-6: #85574a;\n  --simple-colors-default-theme-accent-7: #a47060;\n  --simple-colors-default-theme-accent-8: #ac7868;\n  --simple-colors-default-theme-accent-9: #b68373;\n  --simple-colors-default-theme-accent-10: #c59485;\n  --simple-colors-default-theme-accent-11: #e5b8aa;\n  --simple-colors-default-theme-accent-12: #f0e2de; }\n\n:host([accent-color=blue-grey]) {\n  --simple-colors-default-theme-accent-1: #e7eff1;\n  --simple-colors-default-theme-accent-2: #b1c5ce;\n  --simple-colors-default-theme-accent-3: #9badb6;\n  --simple-colors-default-theme-accent-4: #8d9fa7;\n  --simple-colors-default-theme-accent-5: #7a8f98;\n  --simple-colors-default-theme-accent-6: #718892;\n  --simple-colors-default-theme-accent-7: #56707c;\n  --simple-colors-default-theme-accent-8: #40535b;\n  --simple-colors-default-theme-accent-9: #2f3e45;\n  --simple-colors-default-theme-accent-10: #1e282c;\n  --simple-colors-default-theme-accent-11: #182023;\n  --simple-colors-default-theme-accent-12: #0f1518;\n  --simple-colors-fixed-theme-accent-1: #e7eff1;\n  --simple-colors-fixed-theme-accent-2: #b1c5ce;\n  --simple-colors-fixed-theme-accent-3: #9badb6;\n  --simple-colors-fixed-theme-accent-4: #8d9fa7;\n  --simple-colors-fixed-theme-accent-5: #7a8f98;\n  --simple-colors-fixed-theme-accent-6: #718892;\n  --simple-colors-fixed-theme-accent-7: #56707c;\n  --simple-colors-fixed-theme-accent-8: #40535b;\n  --simple-colors-fixed-theme-accent-9: #2f3e45;\n  --simple-colors-fixed-theme-accent-10: #1e282c;\n  --simple-colors-fixed-theme-accent-11: #182023;\n  --simple-colors-fixed-theme-accent-12: #0f1518; }\n\n:host([dark][accent-color=blue-grey]) {\n  --simple-colors-default-theme-accent-1: #0f1518;\n  --simple-colors-default-theme-accent-2: #182023;\n  --simple-colors-default-theme-accent-3: #1e282c;\n  --simple-colors-default-theme-accent-4: #2f3e45;\n  --simple-colors-default-theme-accent-5: #40535b;\n  --simple-colors-default-theme-accent-6: #56707c;\n  --simple-colors-default-theme-accent-7: #718892;\n  --simple-colors-default-theme-accent-8: #7a8f98;\n  --simple-colors-default-theme-accent-9: #8d9fa7;\n  --simple-colors-default-theme-accent-10: #9badb6;\n  --simple-colors-default-theme-accent-11: #b1c5ce;\n  --simple-colors-default-theme-accent-12: #e7eff1; }\n      "])))]}},{key:"properties",get:function(){return n(n({},u(r(h),"properties",this)),{},{accentColor:{attribute:"accent-color",type:String,reflect:!0},dark:{name:"dark",type:Boolean,reflect:!0}})}},{key:"tag",get:function(){return"simple-colors"}}],(m=[{key:"render",value:function(){return l.html(x||(x=b(["\n\n<slot></slot>"])))}},{key:"invertShade",value:function(e){return c.SimpleColorsSharedStylesGlobal.invertShade(e)}},{key:"getColorInfo",value:function(e){return c.SimpleColorsSharedStylesGlobal.getColorInfo(e)}},{key:"makeVariable",value:function(){return c.SimpleColorsSharedStylesGlobal.makeVariable("grey",1,"default")}},{key:"getContrastingColors",value:function(e,l,t){return c.SimpleColorsSharedStylesGlobal.getContrastingColors(e,l,t)}},{key:"getContrastingShades",value:function(e,l,t,o){return c.SimpleColorsSharedStylesGlobal.getContrastingShades(e,l,t,o)}},{key:"isContrastCompliant",value:function(e,l,t,o,n){return c.SimpleColorsSharedStylesGlobal.isContrastCompliant(e,l,t,o,n)}}])&&f(o.prototype,m),i&&f(o,i),h}(e)},w=function(e){a(c,e);var l=p(c);function c(){return s(this,c),l.apply(this,arguments)}return c}(y(l.LitElement));window.customElements.define(w.tag,w),e.SimpleColors=w,e.SimpleColorsSuper=y,Object.defineProperty(e,"__esModule",{value:!0})}));

src/simple-colors.js

@@ -7,2 +7,3 @@ /**
 import { SimpleColorsSharedStylesGlobal } from "@lrnwebcomponents/simple-colors-shared-styles/simple-colors-shared-styles.js";
+import { screenreaderOnlyCSS } from "@lrnwebcomponents/a11y-utils/a11y-utils.js";
 const SimpleColorsSuper = function (SuperClass) {
@@ -9,0 +10,0 @@ return class extends SuperClass {

test/simple-colors.test.js

@@ -1,28 +0,19 @@
-import {
-  expect,
-  fixture,
-  html,
-  assert,
-  elementUpdated,
-  fixtureCleanup,
-} from "@open-wc/testing";
-import { setViewport } from "@web/test-runner-commands";
+import { fixture, expect, html } from "@open-wc/testing";
+
 import "../simple-colors.js";
 
-/*
- * Instantiation test
- * create element and see if an attribute binds to the element
- */
-describe("Instantiation Test", () => {
-  it("simple-colors instantiates", async () => {
-    const el = await fixture(
+describe("simple-colors test", () => {
+  let element;
+  beforeEach(async () => {
+    element = await fixture(
       html` <simple-colors title="test-title"></simple-colors> `
     );
-    await expect(el.getAttribute("title")).to.equal("test-title");
   });
+
+  it("passes the a11y audit", async () => {
+    await expect(element).shadowDom.to.be.accessible();
+  });
 });
 
 /*
- * A11y Accessibility tests
- */
 describe("A11y/chai axe tests", () => {
@@ -81,6 +72,1 @@ it("simple-colors passes accessibility test", async () => {
 }) */
-
-// clean up fixtures after all tests are complete
-afterEach(() => {
-  fixtureCleanup();
-});

vscode-html-custom-data.json

@@ -52,16 +52,40 @@ {
       "name": "simple-colors-picker",
-      "description": "`simple-colors-picker`\na select element for changing `simple-colors` attributes in demos\n\n### Styling\nSee demo of \"all of the colors\" (`demo/colors.html`) for styling.\n\nEvents:\n\n  * `value-changed` {`CustomEvent<this>`} - \n\n  * `change` {`CustomEvent<this>`} - \n\n  * `collapse` {`CustomEvent<this>`} - \n\n  * `expand` {`CustomEvent<this>`} - \n\n  * `option-focus` {`CustomEvent<this>`} - \n\nAttributes:\n\n  * `justify` {`boolean`} - Is it expanded?\n\n  * `aria-labelledby` {`string`} - Optional. Sets the aria-labelledby attribute\n\n  * `block-label` {`boolean`} - Display as a block\n\n  * `disabled` {`boolean`} - Is the picker disabled?\n\n  * `expanded` {`boolean`} - Is it expanded?\n\n  * `label` {`string`} - Optional. The label for the picker input\n\n  * `shades` {`boolean`} - Show all shades instead of just main accent-colors\n\n  * `value` {`string`} - The value of the option.\n\n  * `__ready` {`boolean`} - \n\n  * `options` {`any[]`} - An array of options for the picker, eg.: `\n[\n{\n\"icon\": \"editor:format-paint\",      //Optional. Used if the picker is used as an icon picker.\n\"alt\": \"Blue\",                      //Required for accessibility. Alt text description of the choice.\n\"style\": \"background-color: blue;\", //Optional. Used to set an option's style.\n...                                 //Optional. Any other properties that should be captured as part of the selected option's value\n},...\n]`\n\n  * `accent-color` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\n  * `dark` {`boolean`} - make the default theme dark?\n\nProperties:\n\n  * `justify` {`boolean`} - Is it expanded?\n\n  * `ariaLabelledby` {`string`} - Optional. Sets the aria-labelledby attribute\n\n  * `blockLabel` {`boolean`} - Display as a block\n\n  * `disabled` {`boolean`} - Is the picker disabled?\n\n  * `expanded` {`boolean`} - Is it expanded?\n\n  * `label` {`string`} - Optional. The label for the picker input\n\n  * `shades` {`boolean`} - Show all shades instead of just main accent-colors\n\n  * `value` {`string`} - The value of the option.\n\n  * `__ready` {`boolean`} - \n\n  * `options` {`any[]`} - An array of options for the picker, eg.: `\n[\n{\n\"icon\": \"editor:format-paint\",      //Optional. Used if the picker is used as an icon picker.\n\"alt\": \"Blue\",                      //Required for accessibility. Alt text description of the choice.\n\"style\": \"background-color: blue;\", //Optional. Used to set an option's style.\n...                                 //Optional. Any other properties that should be captured as part of the selected option's value\n},...\n]`\n\n  * `accentColor` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\n  * `dark` {`boolean`} - make the default theme dark?\n\n  * `colors` - ",
+      "description": "`simple-colors-picker`\na select element for changing `simple-colors` attributes in demos\n\n### Styling\nSee demo of \"all of the colors\" (`demo/colors.html`) for styling.\n\nEvents:\n\n  * `change` {`CustomEvent<this>`} - fires when options or value changes\n\n  * `changed` {`CustomEvent<this>`} - Fires when properties change\n\n  * `click` {`CustomEvent<this>`} - handles listbox click event\n\n  * `mousedown` {`CustomEvent<this>`} - fires with listbox mousedown event\n\n  * `keydown` {`CustomEvent<this>`} - \n\n  * `option-focus` {`CustomEvent<this>`} - fires when active descendant changes\n\n  * `value-changed` {`CustomEvent<this>`} - fires when value changes\n\n  * `expand` {`CustomEvent<this>`} - fires when listbox is expanded\n\n  * `collapse` {`CustomEvent<this>`} - fires when listbox is collapsed\n\nAttributes:\n\n  * `shades` {`boolean`} - Show all shades instead of just main accent-colors\n\n  * `hide-null-option` {`boolean`} - hide the null option\nDefault behavior/false will select first option and set value accordingly.\n\n  * `justify` {`boolean`} - Box is 100% width of the ui\n\n  * `__options` {`any[]`} - An array of options for picker, eg.: `\n[\n[\n{\n  \"icon\": \"editor:format-paint\",      //Optional. Used if picker is used as an icon picker.\n  \"alt\": \"Blue\",                      //Required for accessibility. Alt text description of choice.\n  \"style\": \"background-color: blue;\", //Optional. Used to set an option's style.\n  ...                                 //Optional. Any other properties that should be captured as part of selected option's value\n},...\n]\n]`\n\n  * `allow-null` {`boolean`} - allow a null value?\nDefault behavior/false will select first option and set value accordingly.\n\n  * `align-right` {`boolean`} - Align right edges of listbox and button?\nDefault behavior/false aligns to left edges.\n\n  * `aria-labelledby` {`string`} - Optional. Sets aria-labelledby attribute\n\n  * `block-label` {`boolean`} - Position label above select dropdown?\n\n  * `disabled` {`boolean`} - Is picker disabled?\n\n  * `expanded` {`boolean`} - Is it expanded?\n\n  * `hide-option-labels` {`boolean`} - Hide option labels? As color-picker or icon-picker, labels may be redundant.\nThis option would move labels off-screen so that only screen-readers will have them.\n\n  * `hide-sample` {`boolean`} - Hide selected item sample?\nDefault behavior/false shows a sample without expanding menu.\n\n  * `label` {`string`} - Optional. Label for picker input\n\n  * `__ready` {`boolean`} - \n\n  * `options` {`{}[][]`} - An array of options for picker, eg.: \n[\n[\n{\n  \"icon\": \"editor:format-paint\",      //Optional. Used if picker is used as an icon picker.\n  \"alt\": \"Blue\",                      //Required for accessibility. Alt text description of choice.\n  \"style\": \"background-color: blue;\", //Optional. Used to set an option's style.\n  ...                                 //Optional. Any other properties that should be captured as part of selected option's value\n},...\n]\n]\n\n  * `title-as-html` {`boolean`} - Renders html as title. (Good for titles with HTML in them.)\n\n  * `value` {`string`} - An string that stores current value for picker\n\n  * `__activeDesc` {`string`} - Aria-activedescendant attribute (active option's ID)\n\n  * `__selectedOption` - Selected option based on value of picker\n\n  * `accent-color` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\n  * `dark` {`boolean`} - make the default theme dark?\n\nProperties:\n\n  * `shades` {`boolean`} - Show all shades instead of just main accent-colors\n\n  * `hideNullOption` {`boolean`} - hide the null option\nDefault behavior/false will select first option and set value accordingly.\n\n  * `justify` {`boolean`} - Box is 100% width of the ui\n\n  * `__options` {`any[]`} - An array of options for picker, eg.: `\n[\n[\n{\n  \"icon\": \"editor:format-paint\",      //Optional. Used if picker is used as an icon picker.\n  \"alt\": \"Blue\",                      //Required for accessibility. Alt text description of choice.\n  \"style\": \"background-color: blue;\", //Optional. Used to set an option's style.\n  ...                                 //Optional. Any other properties that should be captured as part of selected option's value\n},...\n]\n]`\n\n  * `hideNull` - \n\n  * `tag` - \n\n  * `allowNull` {`boolean`} - allow a null value?\nDefault behavior/false will select first option and set value accordingly.\n\n  * `alignRight` {`boolean`} - Align right edges of listbox and button?\nDefault behavior/false aligns to left edges.\n\n  * `ariaLabelledby` {`string`} - Optional. Sets aria-labelledby attribute\n\n  * `blockLabel` {`boolean`} - Position label above select dropdown?\n\n  * `disabled` {`boolean`} - Is picker disabled?\n\n  * `expanded` {`boolean`} - Is it expanded?\n\n  * `hideOptionLabels` {`boolean`} - Hide option labels? As color-picker or icon-picker, labels may be redundant.\nThis option would move labels off-screen so that only screen-readers will have them.\n\n  * `hideSample` {`boolean`} - Hide selected item sample?\nDefault behavior/false shows a sample without expanding menu.\n\n  * `label` {`string`} - Optional. Label for picker input\n\n  * `__ready` {`boolean`} - \n\n  * `options` {`{}[][]`} - An array of options for picker, eg.: \n[\n[\n{\n  \"icon\": \"editor:format-paint\",      //Optional. Used if picker is used as an icon picker.\n  \"alt\": \"Blue\",                      //Required for accessibility. Alt text description of choice.\n  \"style\": \"background-color: blue;\", //Optional. Used to set an option's style.\n  ...                                 //Optional. Any other properties that should be captured as part of selected option's value\n},...\n]\n]\n\n  * `titleAsHtml` {`boolean`} - Renders html as title. (Good for titles with HTML in them.)\n\n  * `value` {`string`} - An string that stores current value for picker\n\n  * `__activeDesc` {`string`} - Aria-activedescendant attribute (active option's ID)\n\n  * `__hasLabel` {`boolean`} - \n\n  * `__selectedOption` - Selected option based on value of picker\n\n  * `accentColor` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\n  * `dark` {`boolean`} - make the default theme dark?\n\n  * `colors` - ",
       "attributes": [
         {
+          "name": "shades",
+          "description": "`shades` {`boolean`} - Show all shades instead of just main accent-colors\n\nProperty: shades\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "hide-null-option",
+          "description": "`hide-null-option` {`boolean`} - hide the null option\nDefault behavior/false will select first option and set value accordingly.\n\nProperty: hideNullOption",
+          "valueSet": "v"
+        },
+        {
           "name": "justify",
-          "description": "`justify` {`boolean`} - Is it expanded?\n\nProperty: justify",
+          "description": "`justify` {`boolean`} - Box is 100% width of the ui\n\nProperty: justify",
           "valueSet": "v"
         },
         {
+          "name": "__options",
+          "description": "`__options` {`any[]`} - An array of options for picker, eg.: `\n[\n[\n{\n  \"icon\": \"editor:format-paint\",      //Optional. Used if picker is used as an icon picker.\n  \"alt\": \"Blue\",                      //Required for accessibility. Alt text description of choice.\n  \"style\": \"background-color: blue;\", //Optional. Used to set an option's style.\n  ...                                 //Optional. Any other properties that should be captured as part of selected option's value\n},...\n]\n]`\n\nProperty: __options"
+        },
+        {
+          "name": "allow-null",
+          "description": "`allow-null` {`boolean`} - allow a null value?\nDefault behavior/false will select first option and set value accordingly.\n\nProperty: allowNull\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "align-right",
+          "description": "`align-right` {`boolean`} - Align right edges of listbox and button?\nDefault behavior/false aligns to left edges.\n\nProperty: alignRight\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
           "name": "aria-labelledby",
-          "description": "`aria-labelledby` {`string`} - Optional. Sets the aria-labelledby attribute\n\nProperty: ariaLabelledby\n\nDefault: null"
+          "description": "`aria-labelledby` {`string`} - Optional. Sets aria-labelledby attribute\n\nProperty: ariaLabelledby\n\nDefault: null"
         },
         {
           "name": "block-label",
-          "description": "`block-label` {`boolean`} - Display as a block\n\nProperty: blockLabel\n\nDefault: false",
+          "description": "`block-label` {`boolean`} - Position label above select dropdown?\n\nProperty: blockLabel\n\nDefault: false",
           "valueSet": "v"
@@ -71,3 +95,3 @@ },
           "name": "disabled",
-          "description": "`disabled` {`boolean`} - Is the picker disabled?\n\nProperty: disabled\n\nDefault: false",
+          "description": "`disabled` {`boolean`} - Is picker disabled?\n\nProperty: disabled\n\nDefault: false",
           "valueSet": "v"
@@ -81,13 +105,14 @@ },
         {
-          "name": "label",
-          "description": "`label` {`string`} - Optional. The label for the picker input\n\nProperty: label\n\nDefault: null"
+          "name": "hide-option-labels",
+          "description": "`hide-option-labels` {`boolean`} - Hide option labels? As color-picker or icon-picker, labels may be redundant.\nThis option would move labels off-screen so that only screen-readers will have them.\n\nProperty: hideOptionLabels\n\nDefault: false",
+          "valueSet": "v"
         },
         {
-          "name": "shades",
-          "description": "`shades` {`boolean`} - Show all shades instead of just main accent-colors\n\nProperty: shades\n\nDefault: false",
+          "name": "hide-sample",
+          "description": "`hide-sample` {`boolean`} - Hide selected item sample?\nDefault behavior/false shows a sample without expanding menu.\n\nProperty: hideSample\n\nDefault: false",
           "valueSet": "v"
         },
         {
-          "name": "value",
-          "description": "`value` {`string`} - The value of the option.\n\nProperty: value\n\nDefault: null"
+          "name": "label",
+          "description": "`label` {`string`} - Optional. Label for picker input\n\nProperty: label\n\nDefault: null"
         },
@@ -101,5 +126,22 @@ {
           "name": "options",
-          "description": "`options` {`any[]`} - An array of options for the picker, eg.: `\n[\n{\n\"icon\": \"editor:format-paint\",      //Optional. Used if the picker is used as an icon picker.\n\"alt\": \"Blue\",                      //Required for accessibility. Alt text description of the choice.\n\"style\": \"background-color: blue;\", //Optional. Used to set an option's style.\n...                                 //Optional. Any other properties that should be captured as part of the selected option's value\n},...\n]`\n\nProperty: options"
+          "description": "`options` {`{}[][]`} - An array of options for picker, eg.: \n[\n[\n{\n  \"icon\": \"editor:format-paint\",      //Optional. Used if picker is used as an icon picker.\n  \"alt\": \"Blue\",                      //Required for accessibility. Alt text description of choice.\n  \"style\": \"background-color: blue;\", //Optional. Used to set an option's style.\n  ...                                 //Optional. Any other properties that should be captured as part of selected option's value\n},...\n]\n]\n\nProperty: options\n\nDefault: "
         },
         {
+          "name": "title-as-html",
+          "description": "`title-as-html` {`boolean`} - Renders html as title. (Good for titles with HTML in them.)\n\nProperty: titleAsHtml\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "value",
+          "description": "`value` {`string`} - An string that stores current value for picker\n\nProperty: value\n\nDefault: null"
+        },
+        {
+          "name": "__activeDesc",
+          "description": "`__activeDesc` {`string`} - Aria-activedescendant attribute (active option's ID)\n\nProperty: __activeDesc\n\nDefault: option-0-0"
+        },
+        {
+          "name": "__selectedOption",
+          "description": "`__selectedOption` - Selected option based on value of picker\n\nProperty: __selectedOption\n\nDefault: [object Object]"
+        },
+        {
           "name": "accent-color",
@@ -114,20 +156,36 @@ "description": "`accent-color` {`string`} - a selected accent-\"color\": grey, red, pink, purple, etc.\n\nProperty: accentColor\n\nDefault: grey"
         {
-          "name": "onvalue-changed",
-          "description": "`value-changed` {`CustomEvent<this>`} - "
+          "name": "onchange",
+          "description": "`change` {`CustomEvent<this>`} - fires when options or value changes"
         },
         {
-          "name": "onchange",
-          "description": "`change` {`CustomEvent<this>`} - "
+          "name": "onchanged",
+          "description": "`changed` {`CustomEvent<this>`} - Fires when properties change"
         },
         {
-          "name": "oncollapse",
-          "description": "`collapse` {`CustomEvent<this>`} - "
+          "name": "onclick",
+          "description": "`click` {`CustomEvent<this>`} - handles listbox click event"
         },
         {
+          "name": "onmousedown",
+          "description": "`mousedown` {`CustomEvent<this>`} - fires with listbox mousedown event"
+        },
+        {
+          "name": "onkeydown",
+          "description": "`keydown` {`CustomEvent<this>`} - "
+        },
+        {
+          "name": "onoption-focus",
+          "description": "`option-focus` {`CustomEvent<this>`} - fires when active descendant changes"
+        },
+        {
+          "name": "onvalue-changed",
+          "description": "`value-changed` {`CustomEvent<this>`} - fires when value changes"
+        },
+        {
           "name": "onexpand",
-          "description": "`expand` {`CustomEvent<this>`} - "
+          "description": "`expand` {`CustomEvent<this>`} - fires when listbox is expanded"
         },
         {
-          "name": "onoption-focus",
-          "description": "`option-focus` {`CustomEvent<this>`} - "
+          "name": "oncollapse",
+          "description": "`collapse` {`CustomEvent<this>`} - fires when listbox is collapsed"
         }
@@ -134,0 +192,0 @@ ]

No alert changes

Improved metrics

Total package byte prevSize

537956

increased by2.55%

Dev dependency count

14

decreased by-26.32%

Number of package files

37

increased by2.78%

Lines of code

6870

increased by5.06%

Worsened metrics

Dependency count

4

increased by33.33%

Dependency changes

• + Added@lrnwebcomponents/a11y-utils@^4.0.5

• - Removedlit@2.0.0(transitive)

• Updated@lrnwebcomponents/simple-colors-shared-styles@^4.0.5

• Updated@lrnwebcomponents/simple-picker@^4.0.5

• Updatedlit@^2.0.2