@lrnwebcomponents/simple-colors - npm Package Compare versions

Comparing version 3.0.6 to 4.0.0

analysis.json

@@ -289,3 +289,3 @@ {
             "end": {
-              "line": 55,
+              "line": 56,
               "column": 3
@@ -303,7 +303,7 @@ }
             "start": {
-              "line": 69,
+              "line": 70,
               "column": 2
             },
             "end": {
-              "line": 81,
+              "line": 82,
               "column": 3
@@ -328,7 +328,7 @@ }
             "start": {
-              "line": 177,
+              "line": 187,
               "column": 2
             },
             "end": {
-              "line": 211,
+              "line": 221,
               "column": 3
@@ -356,7 +356,7 @@ }
             "start": {
-              "line": 218,
+              "line": 228,
               "column": 2
             },
             "end": {
-              "line": 220,
+              "line": 230,
               "column": 3
@@ -377,7 +377,7 @@ }
             "start": {
-              "line": 227,
+              "line": 237,
               "column": 2
             },
             "end": {
-              "line": 231,
+              "line": 241,
               "column": 3
@@ -398,7 +398,7 @@ }
             "start": {
-              "line": 236,
+              "line": 246,
               "column": 2
             },
             "end": {
-              "line": 239,
+              "line": 249,
               "column": 3
@@ -423,7 +423,7 @@ }
             "start": {
-              "line": 246,
+              "line": 256,
               "column": 2
             },
             "end": {
-              "line": 249,
+              "line": 259,
               "column": 3
@@ -444,7 +444,7 @@ }
             "start": {
-              "line": 256,
+              "line": 266,
               "column": 2
             },
             "end": {
-              "line": 259,
+              "line": 269,
               "column": 3
@@ -465,7 +465,7 @@ }
             "start": {
-              "line": 266,
+              "line": 276,
               "column": 2
             },
             "end": {
-              "line": 269,
+              "line": 279,
               "column": 3
@@ -503,3 +503,3 @@ }
         "end": {
-          "line": 270,
+          "line": 280,
           "column": 1
@@ -506,0 +506,0 @@ }

lib/demo/simple-colors-swatch-info.js

@@ -5,3 +5,3 @@ /**
  */
-import { html, css } from "lit-element/lit-element.js";
+import { html, css } from "lit";
 import { SimpleColors } from "../../simple-colors.js";
@@ -8,0 +8,0 @@

lib/demo/simple-colors-swatches.js

@@ -5,3 +5,3 @@ /**
  */
-import { html, css } from "lit-element/lit-element.js";
+import { html, css } from "lit";
 import { SimpleColors } from "../../simple-colors.js"; //import the shared styles
@@ -8,0 +8,0 @@

lib/simple-colors-picker.js

@@ -5,3 +5,3 @@ /**
  */
-import { html, css } from "lit-element/lit-element.js";
+import { html, css } from "lit";
 import { SimpleColors } from "../simple-colors.js";
@@ -49,2 +49,3 @@ import "@lrnwebcomponents/simple-picker/simple-picker.js";
         @expand="${this._handleExpand}"
+        ?justify="${this.justify}"
         @option-focus="${this._handleOptionFocus}"
@@ -123,2 +124,11 @@ aria-labelledby="${this.ariaLabelledby}"
       /**
+       * Is it expanded?
+       */
+      justify: {
+        type: Boolean,
+        reflect: true,
+        attribute: "justify",
+      },
+
+      /**
        * Optional. The label for the picker input
@@ -125,0 +135,0 @@ */

lib/simple-colors-shared-styles-polymer.js

@@ -137,3 +137,3 @@ /**
       --simple-colors-default-theme-light-blue-11: #a1d1ff;
-      --simple-colors-default-theme-light-blue-12: #ddefff;
+      --simple-colors-default-theme-light-blue-12: #cde8ff;
 
@@ -608,3 +608,3 @@ --simple-colors-default-theme-cyan-1: #001a20;
     :host [accent-color="light-blue"] {
-      --simple-colors-default-theme-accent-1: #ddefff;
+      --simple-colors-default-theme-accent-1: #cde8ff;
       --simple-colors-default-theme-accent-2: #a1d1ff;
@@ -621,3 +621,3 @@ --simple-colors-default-theme-accent-3: #92c9ff;
       --simple-colors-default-theme-accent-12: #001b36;
-      --simple-colors-fixed-theme-accent-1: #ddefff;
+      --simple-colors-fixed-theme-accent-1: #cde8ff;
       --simple-colors-fixed-theme-accent-2: #a1d1ff;
@@ -651,3 +651,3 @@ --simple-colors-fixed-theme-accent-3: #92c9ff;
       --simple-colors-default-theme-accent-11: #a1d1ff;
-      --simple-colors-default-theme-accent-12: #ddefff;
+      --simple-colors-default-theme-accent-12: #cde8ff;
     }
@@ -654,0 +654,0 @@

package.json

@@ -18,3 +18,3 @@ {
   },
-  "version": "3.0.6",
+  "version": "4.0.0",
   "description": "Automated conversion of simple-colors/",
@@ -30,9 +30,11 @@ "repository": {
   "scripts": {
-    "test": "wct --configFile ../../wct.conf.json node_modules/@lrnwebcomponents/simple-colors/test/",
     "start": "yarn run dev",
-    "build": "gulp --gulpfile=gulpfile.cjs && rollup -c && prettier --ignore-path ../../.prettierignore --write \"**/*.{js,json}\" && wca analyze \"**/*.js\" --format vscode --outFile vscode-html-custom-data.json",
+    "build": "gulp --gulpfile=gulpfile.cjs && node --experimental-json-modules ../../node_modules/.bin/rollup --config && prettier --ignore-path ../../.prettierignore --write \"**/*.{js,json}\" && wca analyze \"**/*.js\" --format vscode --outFile vscode-html-custom-data.json",
     "dev": "concurrently --kill-others \"yarn run watch\" \"yarn run serve\"",
     "watch": "gulp dev --gulpfile=gulpfile.cjs",
     "serve": "es-dev-server -c ../../es-dev-server.config.js",
-    "lighthouse": "gulp lighthouse --gulpfile=gulpfile.cjs"
+    "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"
   },
@@ -44,18 +46,22 @@ "author": {
   "dependencies": {
-    "@lrnwebcomponents/simple-colors-shared-styles": "^3.0.5",
-    "@lrnwebcomponents/simple-picker": "^3.0.6",
-    "lit-element": "2.4.0"
+    "@lrnwebcomponents/simple-colors-shared-styles": "^4.0.0",
+    "@lrnwebcomponents/simple-picker": "^4.0.0",
+    "lit": "2.0.0-rc.2"
   },
   "devDependencies": {
-    "@lrnwebcomponents/deduping-fix": "^3.0.0",
-    "@lrnwebcomponents/simple-modal": "^3.0.6",
-    "@lrnwebcomponents/storybook-utilities": "^3.0.6",
+    "@lrnwebcomponents/deduping-fix": "^4.0.0",
+    "@lrnwebcomponents/simple-modal": "^4.0.0",
+    "@lrnwebcomponents/storybook-utilities": "^4.0.0",
+    "@open-wc/testing": "2.5.33",
     "@polymer/iron-component-page": "github:PolymerElements/iron-component-page",
     "@polymer/iron-demo-helpers": "3.1.0",
     "@polymer/polymer": "^3.3.1",
-    "@rhelements/rh-sass": "1.0.0-prerelease.7",
+    "@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",
     "@webcomponents/webcomponentsjs": "2.5.0",
     "concurrently": "5.3.0",
     "gulp-babel": "8.0.0",
-    "lodash": "4.17.19",
+    "lodash": "^4.17.21",
     "polymer-build": "3.1.4",
@@ -74,3 +80,3 @@ "polymer-cli": "1.9.11",
   ],
-  "gitHead": "ce5d24bc5829a7d5ea73218759db007619359682"
+  "gitHead": "e877f54ece91fb0b2f7aba62f9f9fd15060600f2"
 }

simple-colors-picker.stories.js

@@ -1,2 +0,2 @@
-import { html } from "lit-element/lit-element.js";
+import { html } from "lit";
 import { withKnobs, withWebComponentsKnobs } from "@open-wc/demoing-storybook";
@@ -3,0 +3,0 @@ import { StorybookUtilities } from "@lrnwebcomponents/storybook-utilities/storybook-utilities.js";

simple-colors.js

@@ -5,3 +5,3 @@ /**
  */
-import { LitElement, html, css } from "lit-element/lit-element.js";
+import { LitElement, html, css } from "lit";
 import { SimpleColorsSharedStylesGlobal } from "@lrnwebcomponents/simple-colors-shared-styles/simple-colors-shared-styles.js";
@@ -136,3 +136,3 @@ const SimpleColorsSuper = function (SuperClass) {
             --simple-colors-default-theme-light-blue-11: #a1d1ff;
-            --simple-colors-default-theme-light-blue-12: #ddefff;
+            --simple-colors-default-theme-light-blue-12: #cde8ff;
 
@@ -578,3 +578,3 @@ --simple-colors-default-theme-cyan-1: #001a20;
           :host([accent-color="light-blue"]) {
-            --simple-colors-default-theme-accent-1: #ddefff;
+            --simple-colors-default-theme-accent-1: #cde8ff;
             --simple-colors-default-theme-accent-2: #a1d1ff;
@@ -591,3 +591,3 @@ --simple-colors-default-theme-accent-3: #92c9ff;
             --simple-colors-default-theme-accent-12: #001b36;
-            --simple-colors-fixed-theme-accent-1: #ddefff;
+            --simple-colors-fixed-theme-accent-1: #cde8ff;
             --simple-colors-fixed-theme-accent-2: #a1d1ff;
@@ -618,3 +618,3 @@ --simple-colors-fixed-theme-accent-3: #92c9ff;
             --simple-colors-default-theme-accent-11: #a1d1ff;
-            --simple-colors-default-theme-accent-12: #ddefff;
+            --simple-colors-default-theme-accent-12: #cde8ff;
           }
@@ -621,0 +621,0 @@

simple-colors.stories.js

@@ -1,2 +0,2 @@
-import { html } from "lit-element/lit-element.js";
+import { html } from "lit";
 import { withKnobs, withWebComponentsKnobs } from "@open-wc/demoing-storybook";
@@ -3,0 +3,0 @@ import { StorybookUtilities } from "@lrnwebcomponents/storybook-utilities/storybook-utilities.js";

simple-colors.umd.js

@@ -1,1 +0,1 @@
-!function(e,l){"object"==typeof exports&&"undefined"!=typeof module?l(exports,require("lit-element/lit-element.js"),require("@lrnwebcomponents/simple-colors-shared-styles/simple-colors-shared-styles.js")):"function"==typeof define&&define.amd?define(["exports","lit-element/lit-element.js","@lrnwebcomponents/simple-colors-shared-styles/simple-colors-shared-styles.js"],l):l((e=e||self).SimpleColors={},e.litElement_js,e.simpleColorsSharedStyles_js)}(this,function(e,l,c){"use strict";function t(e,l){if(!(e instanceof l))throw new TypeError("Cannot call a class as a function")}function o(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 n(e,l,c){return l&&o(e.prototype,l),c&&o(e,c),e}function s(e,l,c){return l in e?Object.defineProperty(e,l,{value:c,enumerable:!0,configurable:!0,writable:!0}):e[l]=c,e}function f(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 m(e){for(var l=1;l<arguments.length;l++){var c=null!=arguments[l]?arguments[l]:{};l%2?f(Object(c),!0).forEach(function(l){s(e,l,c[l])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(c)):f(Object(c)).forEach(function(l){Object.defineProperty(e,l,Object.getOwnPropertyDescriptor(c,l))})}return 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)})(e)}function i(e,l){return(i=Object.setPrototypeOf||function(e,l){return e.__proto__=l,e})(e,l)}function d(e,l){return!l||"object"!=typeof l&&"function"!=typeof l?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):l}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 Date.prototype.toString.call(Reflect.construct(Date,[],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,c){return(h="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=r(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 u(e,l){return l||(l=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(l)}}))}function b(){var e=u(["\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: #ddefff;\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: #ddefff;\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: #ddefff;\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: #ddefff; }\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      "]);return b=function(){return e},e}function x(){var e=u(["\n\n<slot></slot>"]);return x=function(){return e},e}var g=function(e){return function(o){a(f,e);var s=p(f);function f(){var e;return t(this,f),(e=s.call(this)).accentColor="grey",e.dark=!1,e.colors=c.SimpleColorsSharedStylesGlobal.colors,e}return n(f,[{key:"render",value:function(){return l.html(x())}}],[{key:"styles",get:function(){var e=l.css("");return h(r(f),"styles",this)&&(e=h(r(f),"styles",this)),[e,l.css(b())]}},{key:"properties",get:function(){return m(m({},h(r(f),"properties",this)),{},{accentColor:{attribute:"accent-color",type:String,reflect:!0},dark:{name:"dark",type:Boolean,reflect:!0}})}}]),n(f,[{key:"invertShade",value:function(e){return c.SimpleColorsSharedStylesGlobal.invertShade(e)}},{key:"getColorInfo",value:function(e){return c.SimpleColorsSharedStylesGlobal.getColorInfo(e)}},{key:"makeVariable",value:function(){arguments.length>0&&void 0!==arguments[0]&&arguments[0],arguments.length>1&&void 0!==arguments[1]&&arguments[1],arguments.length>2&&void 0!==arguments[2]&&arguments[2];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)}}],[{key:"tag",get:function(){return"simple-colors"}}]),f}()},y=function(e){a(o,g(l.LitElement));var c=p(o);function o(){return t(this,o),c.apply(this,arguments)}return o}();window.customElements.define(y.tag,y),e.SimpleColors=y,e.SimpleColorsSuper=g,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")):"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){return!l||"object"!=typeof l&&"function"!=typeof l?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):l}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})}));

src/simple-colors.js

@@ -5,3 +5,3 @@ /**
  */
-import { LitElement, html, css } from "lit-element/lit-element.js";
+import { LitElement, html, css } from "lit";
 import { SimpleColorsSharedStylesGlobal } from "@lrnwebcomponents/simple-colors-shared-styles/simple-colors-shared-styles.js";
@@ -8,0 +8,0 @@ const SimpleColorsSuper = function (SuperClass) {

vscode-html-custom-data.json

@@ -52,5 +52,10 @@ {
       "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  * `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  * `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  * `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` - ",
       "attributes": [
         {
+          "name": "justify",
+          "description": "`justify` {`boolean`} - Is it expanded?\n\nProperty: justify",
+          "valueSet": "v"
+        },
+        {
           "name": "aria-labelledby",
@@ -57,0 +62,0 @@ "description": "`aria-labelledby` {`string`} - Optional. Sets the aria-labelledby attribute\n\nProperty: ariaLabelledby\n\nDefault: null"

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

536588

increased by50.82%

Number of package files

37

increased by5.71%

Lines of code

7042

increased by38.38%

Worsened metrics

Dev dependency count

19

increased by26.67%

Number of low supply chain risk alerts

4

increased by100%

Dependency changes

• + Addedlit@2.0.0-rc.2

• + Added@lit-labs/ssr-dom-shim@1.3.0(transitive)

• + Added@lit/reactive-element@1.6.3(transitive)

• + Added@lrnwebcomponents/a11y-utils@4.2.0(transitive)

• + Added@lrnwebcomponents/simple-colors@4.2.0(transitive)

• + Added@lrnwebcomponents/simple-colors-shared-styles@4.2.0(transitive)

• + Added@lrnwebcomponents/simple-icon@4.2.0(transitive)

• + Added@lrnwebcomponents/simple-picker@4.2.0(transitive)

• + Added@types/trusted-types@2.0.7(transitive)

• + Addedflag-icons@6.6.4(transitive)

• + Addedlit@2.0.0-rc.22.8.0(transitive)

• + Addedlit-element@3.3.3(transitive)

• + Addedlit-html@2.8.0(transitive)

• - Removedlit-element@2.4.0

• - Removed@lrnwebcomponents/simple-colors-shared-styles@3.0.5(transitive)

• - Removed@lrnwebcomponents/simple-icon@3.0.6(transitive)

• - Removed@lrnwebcomponents/simple-picker@3.0.6(transitive)

• - Removedlit-element@2.4.0(transitive)

• - Removedlit-html@1.4.1(transitive)

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

• Updated@lrnwebcomponents/simple-picker@^4.0.0