How to use @lrnwebcomponents/simple-colors - 9 common examples

_getHexColor(color) {
    let name = color.replace("-text", "");
    let tmp = new SimpleColors();
    if (tmp.colors[name]) {
      return tmp.colors[name][6];
    }
    return "#000000";
  }
}

_getHexColor(color) {
    let name = color.replace("-text", "");
    let tmp = new SimpleColors();
    if (tmp.colors[name]) {
      return tmp.colors[name][6];
    }
    return "#000000";
  }
  updated(changedProperties) {

_getHexColor(color) {
    let name = color.replace("-text", "");
    let tmp = new SimpleColors();
    if (tmp.colors[name]) {
      return tmp.colors[name][6];
    }
    return "#000000";
  }
  static get properties() {

import { html, css } from "lit-element/lit-element.js";
import { HAXCMSLitElementTheme } from "@lrnwebcomponents/haxcms-elements/lib/core/HAXCMSLitElementTheme.js";
import { store } from "@lrnwebcomponents/haxcms-elements/lib/core/haxcms-site-store.js";
import { autorun, toJS } from "mobx/lib/mobx.module.js";
import { SimpleColorsSuper } from "@lrnwebcomponents/simple-colors/simple-colors.js";
import "@lrnwebcomponents/simple-blog/lib/simple-blog-post.js";
import "@polymer/iron-pages/iron-pages.js";
/**
 * `simple-blog`
 * @customElement simple-blog
 * `A simple blog and associated elements`
 * @demo demo/index.html
 */
class SimpleBlog extends SimpleColorsSuper(HAXCMSLitElementTheme) {
  /**
   * LitElement constructable styles enhancement
   */
  static get styles() {
    return [
      ...super.styles,
      css`
        html,
        body {
          background-color: #fafafa;
        }
        :host {
          display: block;
          font-family: "Roboto", "Noto", sans-serif;
          -webkit-font-smoothing: antialiased;
          font-size: 14px;

import { HAXCMSLitElementTheme } from "@lrnwebcomponents/haxcms-elements/lib/core/HAXCMSLitElementTheme.js";
import { SimpleColorsSuper } from "@lrnwebcomponents/simple-colors/simple-colors.js";
import { store } from "@lrnwebcomponents/haxcms-elements/lib/core/haxcms-site-store.js";
import { autorun, toJS } from "mobx/lib/mobx.module.js";
/**
 * @deprecatedApply - required for @apply / invoking @apply css var convention
 */
import "@polymer/polymer/lib/elements/custom-style.js";
/**
 * `outline-player`
 * @customElement outline-player
 * `A basic outline presentation`
 *
 * @demo demo/index.html
 */
class OutlinePlayer extends SimpleColorsSuper(HAXCMSLitElementTheme) {
  /**
   * LitElement style render
   */
  static get styles() {
    return [
      ...super.styles,
      css`
        :host {
          display: block;
          font-family: libre baskerville;
          position: relative;
          overflow: hidden;
          --outline-player-min-height: 100vh;
          --app-drawer-width: 300px;
          --outline-player-dark: #222222;
          --outline-player-light: #f8f8f8;

* @license Apache-2.0, see License.md for full text.
 */
import { html, css } from "lit-element/lit-element.js";
import { HAXCMSLitElementTheme } from "@lrnwebcomponents/haxcms-elements/lib/core/HAXCMSLitElementTheme.js";
import { SimpleColorsSuper } from "@lrnwebcomponents/simple-colors/simple-colors.js";
import { store } from "@lrnwebcomponents/haxcms-elements/lib/core/haxcms-site-store.js";
import { autorun, toJS } from "mobx/lib/mobx.module.js";
/**
 * `haxcms-slide-theme`
 * `A simple slide playing theme`
 *

 * @polymer
 * @demo demo/index.html
 */
class HAXCMSSlideTheme extends SimpleColorsSuper(HAXCMSLitElementTheme) {
  constructor() {
    super();
    this.__disposer = [];
    setTimeout(() => {
      import("@lrnwebcomponents/haxcms-elements/lib/ui-components/site/site-title.js");
      import("@lrnwebcomponents/haxcms-elements/lib/ui-components/site/site-print-button.js");
      import("@lrnwebcomponents/haxcms-elements/lib/ui-components/active-item/site-active-title.js");
      import("@lrnwebcomponents/haxcms-elements/lib/ui-components/navigation/site-dot-indicator");
      import("@lrnwebcomponents/haxcms-elements/lib/ui-components/navigation/site-menu-button.js");
      import("@polymer/paper-icon-button/paper-icon-button.js");
      import("@polymer/iron-icons/iron-icons.js");
      import("@polymer/paper-tooltip/paper-tooltip.js");
    }, 0);
  }
  /**
   * Store the tag name to make it easier to obtain directly.

constructor() {
    super();
    this.SimpleColors = new SimpleColorsPolymer();
    setPassiveTouchGestures(true);
    window.HAXCMS = {};
    import("@lrnwebcomponents/haxcms-elements/lib/core/site-list/haxcms-site-listing-deps.js");
  }
  /**

static get properties() {
    return Object.assign(SimpleColorsPolymer.properties, {
      /**
       * Is this an audio file?
       */
      audioOnly: {
        name: "audioOnly",
        type: Boolean,
        value: false,
        reflectToAttribute: true
      },

      /**
       * autoplay is an option,
       * but generally not recommended for a11y
       */
      autoplay: {
        name: "autoplay",

_colorChanged: function(e) {
    this.set("manifest.metadata.cssVariable", e.detail.value);
    this.notifyPath("manifest.metadata.cssVariable");
    this.set(
      "manifest.metadata.hexCode",
      SimpleColors.colors[
        e.detail.value
          .replace("--simple-colors-default-theme-", "")
          .replace("-7", "")
      ][6]
    );
    this.notifyPath("manifest.metadata.hexCode");
  },