@udixio/theme 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/theme.esm.js

@@ -1,33 +1,66 @@
-import { NestFactory } from '@nestjs/core';
-import { __decorate, __metadata } from 'tslib';
-import { Injectable, Module } from '@nestjs/common';
-import { lerp, Contrast, clampDouble, hexFromArgb, Hct, argbFromHex, DislikeAnalyzer, TonalPalette } from '@material/material-color-utilities';
-import mergeDeep from 'merge-deep';
+import { asClass, createContainer, InjectionMode } from 'awilix';
+import { lerp, Contrast, clampDouble, hexFromArgb, Hct, argbFromHex, TonalPalette, DislikeAnalyzer, sanitizeDegreesDouble } from '@material/material-color-utilities';
+import plugin from 'tailwindcss/plugin';
 
-function asyncGeneratorStep(n, t, e, r, o, a, c) {
-  try {
-    var i = n[a](c),
-      u = i.value;
-  } catch (n) {
-    return void e(n);
+var ColorService = /*#__PURE__*/function () {
+  function ColorService(_ref) {
+    var colorManagerService = _ref.colorManagerService;
+    this.colorManagerService = void 0;
+    this.colorManagerService = colorManagerService;
   }
-  i.done ? t(u) : Promise.resolve(u).then(r, o);
-}
-function _asyncToGenerator(n) {
-  return function () {
-    var t = this,
-      e = arguments;
-    return new Promise(function (r, o) {
-      var a = n.apply(t, e);
-      function _next(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+  var _proto = ColorService.prototype;
+  _proto.getColors = function getColors() {
+    return this.colorManagerService.getAll();
+  }
+  // getColors() {
+  //   const colors: Record<string, string> = {};
+  //
+  //   for (const [key, value] of this.colorManagerService.getAll()) {
+  //     colors[key] = hexFromArgb(value.getArgb(this.schemeService.get()));
+  //   }
+  //
+  //   return colors;
+  // }
+  ;
+  _proto.addColor = function addColor(key, color) {
+    return this.colorManagerService.createOrUpdate(key, color);
+  };
+  _proto.addColors = function addColors(args) {
+    var _this = this;
+    if (!Array.isArray(args)) args = [args];
+    args.forEach(function (args) {
+      if (typeof args === 'function') {
+        args = args(_this);
+      }
+      if (args.fromPalettes) {
+        if (!Array.isArray(args.fromPalettes)) args.fromPalettes = [args.fromPalettes];
+        args.fromPalettes.map(function (paletteKey) {
+          _this.colorManagerService.addFromPalette(paletteKey);
+        });
       }
-      function _throw(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      if (args.colors) {
+        Object.keys(args.colors).map(function (key) {
+          return _this.addColor(key, args.colors[key]);
+        });
       }
-      _next(void 0);
     });
   };
+  _proto.getColor = function getColor(key) {
+    return this.colorManagerService.get(key);
+  };
+  _proto.removeColor = function removeColor(key) {
+    return this.colorManagerService.remove(key);
+  };
+  _proto.updateColor = function updateColor(key, newColor) {
+    return this.colorManagerService.createOrUpdate(key, newColor);
+  };
+  return ColorService;
+}();
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
 }
 function _defineProperties(e, r) {
   for (var t = 0; t < r.length; t++) {
@@ -40,6 +73,23 @@ function _createClass(e, r, t) {
     writable: !1
   }), e;
 }
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
+    return function () {
+      return o >= r.length ? {
+        done: !0
+      } : {
+        done: !1,
+        value: r[o++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -49,306 +99,13 @@ function _extends() {
     return n;
   }, _extends.apply(null, arguments);
 }
-function _regeneratorRuntime() {
-  _regeneratorRuntime = function () {
-    return e;
-  };
-  var t,
-    e = {},
-    r = Object.prototype,
-    n = r.hasOwnProperty,
-    o = Object.defineProperty || function (t, e, r) {
-      t[e] = r.value;
-    },
-    i = "function" == typeof Symbol ? Symbol : {},
-    a = i.iterator || "@@iterator",
-    c = i.asyncIterator || "@@asyncIterator",
-    u = i.toStringTag || "@@toStringTag";
-  function define(t, e, r) {
-    return Object.defineProperty(t, e, {
-      value: r,
-      enumerable: !0,
-      configurable: !0,
-      writable: !0
-    }), t[e];
-  }
-  try {
-    define({}, "");
-  } catch (t) {
-    define = function (t, e, r) {
-      return t[e] = r;
-    };
-  }
-  function wrap(t, e, r, n) {
-    var i = e && e.prototype instanceof Generator ? e : Generator,
-      a = Object.create(i.prototype),
-      c = new Context(n || []);
-    return o(a, "_invoke", {
-      value: makeInvokeMethod(t, r, c)
-    }), a;
-  }
-  function tryCatch(t, e, r) {
-    try {
-      return {
-        type: "normal",
-        arg: t.call(e, r)
-      };
-    } catch (t) {
-      return {
-        type: "throw",
-        arg: t
-      };
-    }
-  }
-  e.wrap = wrap;
-  var h = "suspendedStart",
-    l = "suspendedYield",
-    f = "executing",
-    s = "completed",
-    y = {};
-  function Generator() {}
-  function GeneratorFunction() {}
-  function GeneratorFunctionPrototype() {}
-  var p = {};
-  define(p, a, function () {
-    return this;
-  });
-  var d = Object.getPrototypeOf,
-    v = d && d(d(values([])));
-  v && v !== r && n.call(v, a) && (p = v);
-  var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p);
-  function defineIteratorMethods(t) {
-    ["next", "throw", "return"].forEach(function (e) {
-      define(t, e, function (t) {
-        return this._invoke(e, t);
-      });
-    });
-  }
-  function AsyncIterator(t, e) {
-    function invoke(r, o, i, a) {
-      var c = tryCatch(t[r], t, o);
-      if ("throw" !== c.type) {
-        var u = c.arg,
-          h = u.value;
-        return h && "object" == typeof h && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) {
-          invoke("next", t, i, a);
-        }, function (t) {
-          invoke("throw", t, i, a);
-        }) : e.resolve(h).then(function (t) {
-          u.value = t, i(u);
-        }, function (t) {
-          return invoke("throw", t, i, a);
-        });
-      }
-      a(c.arg);
-    }
-    var r;
-    o(this, "_invoke", {
-      value: function (t, n) {
-        function callInvokeWithMethodAndArg() {
-          return new e(function (e, r) {
-            invoke(t, n, e, r);
-          });
-        }
-        return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
-      }
-    });
-  }
-  function makeInvokeMethod(e, r, n) {
-    var o = h;
-    return function (i, a) {
-      if (o === f) throw Error("Generator is already running");
-      if (o === s) {
-        if ("throw" === i) throw a;
-        return {
-          value: t,
-          done: !0
-        };
-      }
-      for (n.method = i, n.arg = a;;) {
-        var c = n.delegate;
-        if (c) {
-          var u = maybeInvokeDelegate(c, n);
-          if (u) {
-            if (u === y) continue;
-            return u;
-          }
-        }
-        if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) {
-          if (o === h) throw o = s, n.arg;
-          n.dispatchException(n.arg);
-        } else "return" === n.method && n.abrupt("return", n.arg);
-        o = f;
-        var p = tryCatch(e, r, n);
-        if ("normal" === p.type) {
-          if (o = n.done ? s : l, p.arg === y) continue;
-          return {
-            value: p.arg,
-            done: n.done
-          };
-        }
-        "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg);
-      }
-    };
-  }
-  function maybeInvokeDelegate(e, r) {
-    var n = r.method,
-      o = e.iterator[n];
-    if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y;
-    var i = tryCatch(o, e.iterator, r.arg);
-    if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y;
-    var a = i.arg;
-    return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y);
-  }
-  function pushTryEntry(t) {
-    var e = {
-      tryLoc: t[0]
-    };
-    1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e);
-  }
-  function resetTryEntry(t) {
-    var e = t.completion || {};
-    e.type = "normal", delete e.arg, t.completion = e;
-  }
-  function Context(t) {
-    this.tryEntries = [{
-      tryLoc: "root"
-    }], t.forEach(pushTryEntry, this), this.reset(!0);
-  }
-  function values(e) {
-    if (e || "" === e) {
-      var r = e[a];
-      if (r) return r.call(e);
-      if ("function" == typeof e.next) return e;
-      if (!isNaN(e.length)) {
-        var o = -1,
-          i = function next() {
-            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
-            return next.value = t, next.done = !0, next;
-          };
-        return i.next = i;
-      }
-    }
-    throw new TypeError(typeof e + " is not iterable");
-  }
-  return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
-    value: GeneratorFunctionPrototype,
-    configurable: !0
-  }), o(GeneratorFunctionPrototype, "constructor", {
-    value: GeneratorFunction,
-    configurable: !0
-  }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
-    var e = "function" == typeof t && t.constructor;
-    return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
-  }, e.mark = function (t) {
-    return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t;
-  }, e.awrap = function (t) {
-    return {
-      __await: t
-    };
-  }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () {
-    return this;
-  }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) {
-    void 0 === i && (i = Promise);
-    var a = new AsyncIterator(wrap(t, r, n, o), i);
-    return e.isGeneratorFunction(r) ? a : a.next().then(function (t) {
-      return t.done ? t.value : a.next();
-    });
-  }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () {
-    return this;
-  }), define(g, "toString", function () {
-    return "[object Generator]";
-  }), e.keys = function (t) {
-    var e = Object(t),
-      r = [];
-    for (var n in e) r.push(n);
-    return r.reverse(), function next() {
-      for (; r.length;) {
-        var t = r.pop();
-        if (t in e) return next.value = t, next.done = !1, next;
-      }
-      return next.done = !0, next;
-    };
-  }, e.values = values, Context.prototype = {
-    constructor: Context,
-    reset: function (e) {
-      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
-    },
-    stop: function () {
-      this.done = !0;
-      var t = this.tryEntries[0].completion;
-      if ("throw" === t.type) throw t.arg;
-      return this.rval;
-    },
-    dispatchException: function (e) {
-      if (this.done) throw e;
-      var r = this;
-      function handle(n, o) {
-        return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o;
-      }
-      for (var o = this.tryEntries.length - 1; o >= 0; --o) {
-        var i = this.tryEntries[o],
-          a = i.completion;
-        if ("root" === i.tryLoc) return handle("end");
-        if (i.tryLoc <= this.prev) {
-          var c = n.call(i, "catchLoc"),
-            u = n.call(i, "finallyLoc");
-          if (c && u) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
-            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
-          } else if (c) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
-          } else {
-            if (!u) throw Error("try statement without catch or finally");
-            if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
-          }
-        }
-      }
-    },
-    abrupt: function (t, e) {
-      for (var r = this.tryEntries.length - 1; r >= 0; --r) {
-        var o = this.tryEntries[r];
-        if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) {
-          var i = o;
-          break;
-        }
-      }
-      i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null);
-      var a = i ? i.completion : {};
-      return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a);
-    },
-    complete: function (t, e) {
-      if ("throw" === t.type) throw t.arg;
-      return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y;
-    },
-    finish: function (t) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var r = this.tryEntries[e];
-        if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y;
-      }
-    },
-    catch: function (t) {
-      for (var e = this.tryEntries.length - 1; e >= 0; --e) {
-        var r = this.tryEntries[e];
-        if (r.tryLoc === t) {
-          var n = r.completion;
-          if ("throw" === n.type) {
-            var o = n.arg;
-            resetTryEntry(r);
-          }
-          return o;
-        }
-      }
-      throw Error("illegal catch attempt");
-    },
-    delegateYield: function (e, r, n) {
-      return this.delegate = {
-        iterator: values(e),
-        resultName: r,
-        nextLoc: n
-      }, "next" === this.method && (this.arg = t), y;
-    }
-  }, e;
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
+}
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
 }
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
@@ -364,6 +121,13 @@ function _toPropertyKey(t) {
   var i = _toPrimitive(t, "string");
   return "symbol" == typeof i ? i : i + "";
 }
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
 
 /**
  * @license
@@ -431,67 +195,6 @@ var ContrastCurve = /*#__PURE__*/function () {
   return ContrastCurve;
 }();
 
-/**
- * @license
- * Copyright 2023 Google LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-/**
- * Documents a constraint between two DynamicColors, in which their tones must
- * have a certain distance from each other.
- *
- * Prefer a DynamicColor with a background, this is for special cases when
- * designers want tonal distance, literally contrast, between two colors that
- * don't have a background / foreground relationship or a contrast guarantee.
- */
-var ToneDeltaPair =
-/**
- * Documents a constraint in tone distance between two DynamicColors.
- *
- * The polarity is an adjective that describes "A", compared to "B".
- *
- * For instance, ToneDeltaPair(A, B, 15, 'darker', stayTogether) states that
- * A's tone should be at least 15 darker than B's.
- *
- * 'nearer' and 'farther' describes closeness to the surface roles. For
- * instance, ToneDeltaPair(A, B, 10, 'nearer', stayTogether) states that A
- * should be 10 lighter than B in light mode, and 10 darker than B in dark
- * mode.
- *
- * @param roleA The first role in a pair.
- * @param roleB The second role in a pair.
- * @param delta Required difference between tones. Absolute value, negative
- * values have undefined behavior.
- * @param polarity The relative relation between tones of roleA and roleB,
- * as described above.
- * @param stayTogether Whether these two roles should stay on the same side of
- * the "awkward zone" (T50-59). This is necessary for certain cases where
- * one role has two backgrounds.
- */
-function ToneDeltaPair(roleA, roleB, delta, polarity, stayTogether) {
-  this.roleA = void 0;
-  this.roleB = void 0;
-  this.delta = void 0;
-  this.polarity = void 0;
-  this.stayTogether = void 0;
-  this.roleA = roleA;
-  this.roleB = roleB;
-  this.delta = delta;
-  this.polarity = polarity;
-  this.stayTogether = stayTogether;
-};
-
 /**
  * @license
  * Copyright 2022 Google LLC
@@ -828,6 +531,74 @@ var DynamicColor = /*#__PURE__*/function () {
   return DynamicColor;
 }();
 
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Documents a constraint between two DynamicColors, in which their tones must
+ * have a certain distance from each other.
+ *
+ * Prefer a DynamicColor with a background, this is for special cases when
+ * designers want tonal distance, literally contrast, between two colors that
+ * don't have a background / foreground relationship or a contrast guarantee.
+ */
+var ToneDeltaPair =
+/**
+ * Documents a constraint in tone distance between two DynamicColors.
+ *
+ * The polarity is an adjective that describes "A", compared to "B".
+ *
+ * For instance, ToneDeltaPair(A, B, 15, 'darker', stayTogether) states that
+ * A's tone should be at least 15 darker than B's.
+ *
+ * 'nearer' and 'farther' describes closeness to the surface roles. For
+ * instance, ToneDeltaPair(A, B, 10, 'nearer', stayTogether) states that A
+ * should be 10 lighter than B in light mode, and 10 darker than B in dark
+ * mode.
+ *
+ * @param roleA The first role in a pair.
+ * @param roleB The second role in a pair.
+ * @param delta Required difference between tones. Absolute value, negative
+ * values have undefined behavior.
+ * @param polarity The relative relation between tones of roleA and roleB,
+ * as described above.
+ * @param stayTogether Whether these two roles should stay on the same side of
+ * the "awkward zone" (T50-59). This is necessary for certain cases where
+ * one role has two backgrounds.
+ */
+function ToneDeltaPair(roleA, roleB, delta, polarity, stayTogether) {
+  this.roleA = void 0;
+  this.roleB = void 0;
+  this.delta = void 0;
+  this.polarity = void 0;
+  this.stayTogether = void 0;
+  this.roleA = roleA;
+  this.roleB = roleB;
+  this.delta = delta;
+  this.polarity = polarity;
+  this.stayTogether = stayTogether;
+};
+
+function argbToRgb(argb) {
+  return {
+    r: argb >> 16 & 0xff,
+    g: argb >> 8 & 0xff,
+    b: argb & 0xff
+  };
+}
 var ColorEntity = /*#__PURE__*/function () {
   function ColorEntity(option, schemeService, colorService) {
     this.option = void 0;
@@ -849,6 +620,9 @@ var ColorEntity = /*#__PURE__*/function () {
   _proto.getArgb = function getArgb() {
     return this.getDynamicColor().getArgb(this.schemeService.get());
   };
+  _proto.getRgb = function getRgb() {
+    return argbToRgb(this.getArgb());
+  };
   _proto.getName = function getName() {
     return this.option.name.replace(/([A-Z])/g, '_$1').toLowerCase();
   };
@@ -863,95 +637,21 @@ var ColorEntity = /*#__PURE__*/function () {
   return ColorEntity;
 }();
 
-var SchemeEntity = /*#__PURE__*/function () {
-  function SchemeEntity(options) {
-    this.options = void 0;
-    this.options = options;
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+var highestSurface = function highestSurface(s, colorService) {
+  if (colorService instanceof ColorService) {
+    return s.isDark ? colorService.getColor('surfaceBright').getDynamicColor() : colorService.getColor('surfaceDim').getDynamicColor();
+  } else {
+    return s.isDark ? colorService.get('surfaceBright').getDynamicColor() : colorService.get('surfaceDim').getDynamicColor();
   }
-  var _proto = SchemeEntity.prototype;
-  _proto.getPalette = function getPalette(key) {
-    if (!this.options) {
-      throw new Error('Scheme options is not set');
-    }
-    var palette = this.options.palettes.get(key);
-    if (!palette) {
-      throw new Error("Palette " + key + " not found");
-    }
-    return palette;
-  };
-  return _createClass(SchemeEntity, [{
-    key: "contrastLevel",
-    get: function get() {
-      if (!this.options) {
-        throw new Error('Scheme options is not set');
-      }
-      return this.options.contrastLevel;
-    }
-  }, {
-    key: "isDark",
-    get: function get() {
-      if (!this.options) {
-        throw new Error('Scheme options is not set');
-      }
-      return this.options.isDark;
-    }
-  }, {
-    key: "sourceColorHct",
-    get: function get() {
-      if (!this.options) {
-        throw new Error('Scheme options is not set');
-      }
-      return Hct.fromInt(this.options.sourceColorArgb);
-    }
-  }]);
-}();
-
-var SchemeService = /*#__PURE__*/function () {
-  function SchemeService() {
-    this.schemeEntity = void 0;
-    this.options = void 0;
-  }
-  var _proto = SchemeService.prototype;
-  _proto.createOrUpdate = function createOrUpdate(options) {
-    this.options = mergeDeep(options, this.options);
-    var palettes = new Map();
-    var sourceColorArgb = argbFromHex(this.options.sourceColorHex);
-    var sourceColorHct = Hct.fromInt(sourceColorArgb);
-    if (!this.options.palettes) {
-      return;
-    }
-    for (var _i = 0, _Object$entries = Object.entries(this.options.palettes); _i < _Object$entries.length; _i++) {
-      var _Object$entries$_i = _Object$entries[_i],
-        key = _Object$entries$_i[0],
-        paletteFunction = _Object$entries$_i[1];
-      var palette = paletteFunction(sourceColorHct);
-      palettes.set(key, palette);
-    }
-    this.schemeEntity = new SchemeEntity(_extends({}, this.options, {
-      palettes: palettes,
-      sourceColorArgb: sourceColorArgb
-    }));
-  };
-  _proto.get = function get() {
-    if (!this.schemeEntity) {
-      throw new Error('Scheme is not created');
-    }
-    return this.schemeEntity;
-  };
-  return SchemeService;
-}();
-SchemeService = /*#__PURE__*/__decorate([/*#__PURE__*/Injectable()], SchemeService);
-
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-var highestSurface = function highestSurface(s, colorManagerService) {
-  return s.isDark ? colorManagerService.get('surfaceBright').getDynamicColor() : colorManagerService.get('surfaceDim').getDynamicColor();
 };
 var ColorManagerService = /*#__PURE__*/function () {
-  function ColorManagerService(schemeService) {
-    this.schemeService = void 0;
+  function ColorManagerService(_ref) {
+    var schemeService = _ref.schemeService;
     this.colorMap = new Map();
+    this.schemeService = void 0;
     this.schemeService = schemeService;
   }
   var _proto = ColorManagerService.prototype;
@@ -1017,7 +717,7 @@ var ColorManagerService = /*#__PURE__*/function () {
       },
       contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
       toneDeltaPair: function toneDeltaPair(s) {
-        return new ToneDeltaPair(_this.get(colorKeyContainer).getDynamicColor(), _this.get(colorKey).getDynamicColor(), 15, 'nearer', false);
+        return new ToneDeltaPair(_this.get(colorKeyContainer).getDynamicColor(), _this.get(colorKey).getDynamicColor(), 10, 'nearer', false);
       }
     });
     this.createOrUpdate(onColorKey, {
@@ -1045,7 +745,7 @@ var ColorManagerService = /*#__PURE__*/function () {
       },
       contrastCurve: new ContrastCurve(1, 1, 3, 7),
       toneDeltaPair: function toneDeltaPair(s) {
-        return new ToneDeltaPair(_this.get(colorKeyContainer).getDynamicColor(), _this.get(colorKey).getDynamicColor(), 15, 'nearer', false);
+        return new ToneDeltaPair(_this.get(colorKeyContainer).getDynamicColor(), _this.get(colorKey).getDynamicColor(), 10, 'nearer', false);
       }
     });
     this.createOrUpdate(onColorKeyContainer, {
@@ -1137,7 +837,226 @@ var ColorManagerService = /*#__PURE__*/function () {
   };
   return ColorManagerService;
 }();
-ColorManagerService = /*#__PURE__*/__decorate([/*#__PURE__*/Injectable(), /*#__PURE__*/__metadata("design:paramtypes", [SchemeService])], ColorManagerService);
+
+var ColorModule = {
+  colorManagerService: /*#__PURE__*/asClass(ColorManagerService).singleton(),
+  colorService: /*#__PURE__*/asClass(ColorService).singleton()
+};
+
+var SchemeEntity = /*#__PURE__*/function () {
+  function SchemeEntity(options) {
+    this.options = void 0;
+    this.options = options;
+  }
+  var _proto = SchemeEntity.prototype;
+  _proto.getPalette = function getPalette(key) {
+    if (!this.options) {
+      throw new Error('Scheme options is not set');
+    }
+    var palette = this.options.palettes.get(key);
+    if (!palette) {
+      throw new Error("Palette " + key + " not found");
+    }
+    return palette;
+  };
+  return _createClass(SchemeEntity, [{
+    key: "contrastLevel",
+    get: function get() {
+      if (!this.options) {
+        throw new Error('Scheme options is not set');
+      }
+      return this.options.contrastLevel;
+    }
+  }, {
+    key: "isDark",
+    get: function get() {
+      if (!this.options) {
+        throw new Error('Scheme options is not set');
+      }
+      return this.options.isDark;
+    }
+  }, {
+    key: "sourceColorHct",
+    get: function get() {
+      if (!this.options) {
+        throw new Error('Scheme options is not set');
+      }
+      return Hct.fromInt(this.options.sourceColorArgb);
+    }
+  }]);
+}();
+
+var SchemeService = /*#__PURE__*/function () {
+  function SchemeService() {
+    this.schemeEntity = void 0;
+    this.options = void 0;
+  }
+  var _proto = SchemeService.prototype;
+  _proto.createOrUpdate = function createOrUpdate(options) {
+    var _this$options, _this$options2;
+    this.options = _extends({}, this.options, options, {
+      sourcesColorHex: _extends({}, (_this$options = this.options) == null ? void 0 : _this$options.sourcesColorHex, options.sourcesColorHex),
+      palettes: _extends({}, (_this$options2 = this.options) == null ? void 0 : _this$options2.palettes, options.palettes)
+    });
+    var palettes = new Map();
+    if (!this.options.sourcesColorHex.primary) {
+      throw new Error('Primary source color is not set');
+    }
+    var sourceColorArgb = argbFromHex(this.options.sourcesColorHex.primary);
+    var sourceColorHct = Hct.fromInt(sourceColorArgb);
+    if (!this.options.palettes) {
+      return;
+    }
+    for (var _i = 0, _Object$entries = Object.entries(this.options.palettes); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+        key = _Object$entries$_i[0],
+        _Object$entries$_i$ = _Object$entries$_i[1],
+        sourceColorkey = _Object$entries$_i$.sourceColorkey,
+        paletteFunction = _Object$entries$_i$.tonalPalette;
+      var palette = void 0;
+      if (!sourceColorkey) {
+        palette = paletteFunction(sourceColorHct);
+      } else {
+        var _sourceColorArgb = argbFromHex(this.options.sourcesColorHex[sourceColorkey]);
+        var _sourceColorHct = Hct.fromInt(_sourceColorArgb);
+        palette = paletteFunction(_sourceColorHct);
+      }
+      palettes.set(key, palette);
+    }
+    this.schemeEntity = new SchemeEntity(_extends({}, this.options, {
+      palettes: palettes,
+      sourceColorArgb: sourceColorArgb
+    }));
+  };
+  _proto.get = function get() {
+    if (!this.schemeEntity) {
+      throw new Error('Scheme is not created');
+    }
+    return this.schemeEntity;
+  };
+  return SchemeService;
+}();
+
+var ThemeService = /*#__PURE__*/function () {
+  function ThemeService(_ref) {
+    var schemeService = _ref.schemeService,
+      variantService = _ref.variantService;
+    this.schemeService = void 0;
+    this.variantService = void 0;
+    this.schemeService = schemeService;
+    this.variantService = variantService;
+    // this.addPalette({key: "primary", addDefaultColors: true})
+    // this.addPalette({key: "secondary", addDefaultColors: true})
+    // this.addPalette({key: "tertiary", addDefaultColors: true})
+    // this.addPalette({key: "error", palette: TonalPalette.fromHueAndChroma(25.0, 84.0)})
+    // this.addPalette({key: "neutral"})
+    // this.addPalette({key: "neutralVariant"})
+  }
+  // addPalette({key, palette, addDefaultColors}: {key: string; palette: TonalPalette; addDefaultColors: boolean}) {
+  //   this.themeOptions.palettes.set(key, palette);
+  //   if (addDefaultColors){
+  //     this.colorService.addPalette(key)
+  //   }
+  // }
+  // create(args: ThemeOptions): SchemeService {
+  //   return new SchemeService(args, this.colorService)
+  // }
+  //
+  // update(options: Partial<ThemeOptions>): SchemeService {
+  //   Object.assign(this.themeOptions, options);
+  //   return this.theme();
+  // }
+  var _proto = ThemeService.prototype;
+  _proto.create = function create(options) {
+    this.schemeService.createOrUpdate(_extends({}, options, {
+      sourcesColorHex: {
+        primary: options.sourceColorHex
+      }
+    }));
+    this.variantService.set(options.variant);
+  };
+  _proto.update = function update(options) {
+    var themeOptions = _extends({}, options);
+    if (options.sourceColorHex) themeOptions.sourcesColorHex = {
+      primary: options.sourceColorHex
+    };
+    this.schemeService.createOrUpdate(themeOptions);
+    if (options.variant) this.variantService.set(options.variant);
+  };
+  _proto.addCustomPalette = function addCustomPalette(key, colorHex) {
+    this.variantService.addCustomPalette(key, colorHex);
+  };
+  return ThemeService;
+}();
+
+var VariantService = /*#__PURE__*/function () {
+  function VariantService(_ref) {
+    var schemeService = _ref.schemeService;
+    this.customPalettes = {};
+    this.variantEntity = void 0;
+    this.schemeService = void 0;
+    this.schemeService = schemeService;
+  }
+  var _proto = VariantService.prototype;
+  _proto.addCustomPalette = function addCustomPalette(key, colorHex) {
+    this.customPalettes[key] = colorHex;
+    this.update();
+  };
+  _proto.set = function set(variantEntity) {
+    this.variantEntity = variantEntity;
+    if (!variantEntity.palettes.error) {
+      variantEntity.palettes.error = function () {
+        return TonalPalette.fromHueAndChroma(25.0, 84.0);
+      };
+    }
+    this.update();
+  };
+  _proto.update = function update() {
+    var _this = this;
+    if (!this.variantEntity) return;
+    var palettes = {};
+    Object.keys(this.variantEntity.palettes).forEach(function (key) {
+      palettes[key] = {
+        tonalPalette: _this.variantEntity.palettes[key]
+      };
+    });
+    if (this.variantEntity.customPalettes) {
+      Object.keys(this.customPalettes).forEach(function (key) {
+        palettes[key] = {
+          sourceColorkey: key,
+          tonalPalette: _this.variantEntity.customPalettes
+        };
+      });
+    }
+    this.schemeService.createOrUpdate({
+      sourcesColorHex: this.customPalettes,
+      palettes: palettes
+    });
+  };
+  return VariantService;
+}();
+
+var ThemeModule = {
+  schemeService: /*#__PURE__*/asClass(SchemeService).singleton(),
+  variantService: /*#__PURE__*/asClass(VariantService).singleton(),
+  themeService: /*#__PURE__*/asClass(ThemeService).singleton()
+};
+
+var AppService = function AppService(_ref) {
+  var colorService = _ref.colorService,
+    themeService = _ref.themeService,
+    pluginService = _ref.pluginService;
+  this.colorService = void 0;
+  this.themeService = void 0;
+  this.pluginService = void 0;
+  this.pluginService = pluginService;
+  this.colorService = colorService;
+  this.themeService = themeService;
+};
+
+var AppModule = {
+  appService: /*#__PURE__*/asClass(AppService).singleton()
+};
 
 function findDesiredChromaByTone(hue, chroma, tone, byDecreasingTone) {
   var answer = tone;
@@ -1163,485 +1082,1044 @@ function findDesiredChromaByTone(hue, chroma, tone, byDecreasingTone) {
   }
   return answer;
 }
-var defaultColors = function defaultColors(colorManagerService) {
+var defaultColors = function defaultColors(colorService) {
   return {
-    background: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
+    fromPalettes: ['primary', 'secondary', 'tertiary'],
+    colors: {
+      background: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 6 : 98;
+        },
+        isBackground: true
+      },
+      onBackground: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 90 : 10;
+        },
+        background: function background(s) {
+          return colorService.getColor('background').getDynamicColor();
+        },
+        contrastCurve: new ContrastCurve(3, 3, 4.5, 7)
+      },
+      surface: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 6 : 98;
+        },
+        isBackground: true
+      },
+      surfaceDim: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 6 : 87;
+        },
+        isBackground: true
+      },
+      surfaceBright: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 24 : 98;
+        },
+        isBackground: true
+      },
+      surfaceContainerLowest: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 4 : 100;
+        },
+        isBackground: true
+      },
+      surfaceContainerLow: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 10 : 96;
+        },
+        isBackground: true
+      },
+      surfaceContainer: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 12 : 94;
+        },
+        isBackground: true
+      },
+      surfaceContainerHigh: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 17 : 92;
+        },
+        isBackground: true
+      },
+      surfaceContainerHighest: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 22 : 90;
+        },
+        isBackground: true
+      },
+      onSurface: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 90 : 10;
+        },
+        background: function background(s) {
+          return highestSurface(s, colorService);
+        },
+        contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+      },
+      surfaceVariant: {
+        palette: function palette(s) {
+          return s.getPalette('neutralVariant');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 30 : 90;
+        },
+        isBackground: true
+      },
+      onSurfaceVariant: {
+        palette: function palette(s) {
+          return s.getPalette('neutralVariant');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 80 : 30;
+        },
+        background: function background(s) {
+          return highestSurface(s, colorService);
+        },
+        contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
+      },
+      inverseSurface: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 90 : 20;
+        }
       },
-      tone: function tone(s) {
-        return s.isDark ? 6 : 98;
+      inverseOnSurface: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 20 : 95;
+        },
+        background: function background(s) {
+          return colorService.getColor('inverseSurface').getDynamicColor();
+        },
+        contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+      },
+      outline: {
+        palette: function palette(s) {
+          return s.getPalette('neutralVariant');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 60 : 50;
+        },
+        background: function background(s) {
+          return highestSurface(s, colorService);
+        },
+        contrastCurve: new ContrastCurve(1.5, 3, 4.5, 7)
+      },
+      outlineVariant: {
+        palette: function palette(s) {
+          return s.getPalette('neutralVariant');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 30 : 80;
+        },
+        background: function background(s) {
+          return highestSurface(s, colorService);
+        },
+        contrastCurve: new ContrastCurve(1, 1, 3, 7)
+      },
+      shadow: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return 0;
+        }
       },
-      isBackground: true
-    },
-    onBackground: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
+      scrim: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return 0;
+        }
       },
-      tone: function tone(s) {
-        return s.isDark ? 90 : 10;
+      surfaceTint: {
+        palette: function palette(s) {
+          return s.getPalette('neutral');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 80 : 40;
+        },
+        isBackground: true
+      },
+      secondaryContainer: {
+        tone: function tone(s) {
+          var initialTone = s.isDark ? 30 : 90;
+          return findDesiredChromaByTone(s.getPalette('secondary').hue, s.getPalette('secondary').chroma, initialTone, !s.isDark);
+        }
       },
-      background: function background(s) {
-        return colorManagerService.get('background').getDynamicColor();
+      onSecondaryContainer: {
+        tone: function tone(s) {
+          return DynamicColor.foregroundTone(colorService.getColor('secondaryContainer').getDynamicColor().tone(s), 4.5);
+        }
       },
-      contrastCurve: new ContrastCurve(3, 3, 4.5, 7)
-    },
-    surface: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
+      tertiaryContainer: {
+        palette: function palette(s) {
+          return s.getPalette('tertiary');
+        },
+        tone: function tone(s) {
+          var proposedHct = s.getPalette('tertiary').getHct(s.sourceColorHct.tone);
+          return DislikeAnalyzer.fixIfDisliked(proposedHct).tone;
+        }
       },
-      tone: function tone(s) {
-        return s.isDark ? 6 : 98;
+      onTertiaryContainer: {
+        palette: function palette(s) {
+          return s.getPalette('tertiary');
+        },
+        tone: function tone(s) {
+          return DynamicColor.foregroundTone(colorService.getColor('tertiaryContainer').getDynamicColor().tone(s), 4.5);
+        }
       },
-      isBackground: true
-    },
-    surfaceDim: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
+      error: {
+        palette: function palette(s) {
+          return s.getPalette('error');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 80 : 40;
+        },
+        isBackground: true,
+        background: function background(s) {
+          return highestSurface(s, colorService);
+        },
+        contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+        toneDeltaPair: function toneDeltaPair(s) {
+          return new ToneDeltaPair(colorService.getColor('errorContainer').getDynamicColor(), colorService.getColor('error').getDynamicColor(), 15, 'nearer', false);
+        }
       },
-      tone: function tone(s) {
-        return s.isDark ? 6 : 87;
+      onError: {
+        palette: function palette(s) {
+          return s.getPalette('error');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 20 : 100;
+        },
+        background: function background(s) {
+          return colorService.getColor('error').getDynamicColor();
+        },
+        contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+      },
+      errorContainer: {
+        palette: function palette(s) {
+          return s.getPalette('error');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 30 : 90;
+        },
+        isBackground: true,
+        background: function background(s) {
+          return highestSurface(s, colorService);
+        },
+        contrastCurve: new ContrastCurve(1, 1, 3, 7),
+        toneDeltaPair: function toneDeltaPair(s) {
+          return new ToneDeltaPair(colorService.getColor('errorContainer').getDynamicColor(), colorService.getColor('error').getDynamicColor(), 15, 'nearer', false);
+        }
       },
-      isBackground: true
+      onErrorContainer: {
+        palette: function palette(s) {
+          return s.getPalette('error');
+        },
+        tone: function tone(s) {
+          return s.isDark ? 90 : 10;
+        },
+        background: function background(s) {
+          return colorService.getColor('errorContainer').getDynamicColor();
+        },
+        contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+      },
+      onTertiaryFixed: {
+        palette: function palette(s) {
+          return s.getPalette('tertiary');
+        },
+        tone: function tone(s) {
+          return 10.0;
+        },
+        background: function background(s) {
+          return colorService.getColor('tertiaryFixedDim').getDynamicColor();
+        },
+        secondBackground: function secondBackground(s) {
+          return colorService.getColor('tertiaryFixed').getDynamicColor();
+        },
+        contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+      },
+      onTertiaryFixedVariant: {
+        palette: function palette(s) {
+          return s.getPalette('tertiary');
+        },
+        tone: function tone(s) {
+          return 30.0;
+        },
+        background: function background(s) {
+          return colorService.getColor('tertiaryFixedDim').getDynamicColor();
+        },
+        secondBackground: function secondBackground(s) {
+          return colorService.getColor('tertiaryFixed').getDynamicColor();
+        },
+        contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
+      }
+    }
+  };
+};
+
+var getRotatedHue = function getRotatedHue(sourceColor, hues, rotations) {
+  var sourceHue = sourceColor.hue;
+  if (hues.length !== rotations.length) {
+    throw new Error("mismatch between hue length " + hues.length + " & rotations " + rotations.length);
+  }
+  if (rotations.length === 1) {
+    return sanitizeDegreesDouble(sourceColor.hue + rotations[0]);
+  }
+  var size = hues.length;
+  for (var i = 0; i <= size - 2; i++) {
+    var thisHue = hues[i];
+    var nextHue = hues[i + 1];
+    if (thisHue < sourceHue && sourceHue < nextHue) {
+      return sanitizeDegreesDouble(sourceHue + rotations[i]);
+    }
+  }
+  // If this statement executes, something is wrong, there should have been a
+  // rotation found using the arrays.
+  return sourceHue;
+};
+var VariantEntity = function VariantEntity(palettes, customPalettes) {
+  if (palettes === void 0) {
+    palettes = {};
+  }
+  this.palettes = void 0;
+  this.customPalettes = void 0;
+  this.palettes = palettes;
+  this.customPalettes = customPalettes;
+};
+
+var _VariantModel;
+var VariantModel = function VariantModel() {};
+_VariantModel = VariantModel;
+VariantModel.tonalSpot = {
+  palettes: {
+    primary: function primary(sourceColorHct) {
+      return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 36.0);
     },
-    surfaceBright: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 24 : 98;
-      },
-      isBackground: true
+    secondary: function secondary(sourceColorHct) {
+      return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16.0);
     },
-    surfaceContainerLowest: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 4 : 100;
-      },
-      isBackground: true
+    tertiary: function tertiary(sourceColorHct) {
+      return TonalPalette.fromHueAndChroma(sanitizeDegreesDouble(sourceColorHct.hue + 60.0), 24.0);
     },
-    surfaceContainerLow: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 10 : 96;
-      },
-      isBackground: true
+    neutral: function neutral(sourceColorHct) {
+      return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 6.0);
     },
-    surfaceContainer: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 12 : 94;
-      },
-      isBackground: true
+    neutralVariant: function neutralVariant(sourceColorHct) {
+      return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8.0);
+    }
+  },
+  customPalettes: function customPalettes(colorHct) {
+    return TonalPalette.fromHueAndChroma(colorHct.hue, 16);
+  }
+};
+VariantModel.vibrant = {
+  palettes: {
+    primary: function primary(sourceColorHct) {
+      return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 200.0);
     },
-    surfaceContainerHigh: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 17 : 92;
-      },
-      isBackground: true
+    secondary: function secondary(sourceColorHct) {
+      return TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, _VariantModel.hues, _VariantModel.secondaryRotations), 24.0);
     },
-    surfaceContainerHighest: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 22 : 90;
-      },
-      isBackground: true
+    tertiary: function tertiary(sourceColorHct) {
+      return TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, _VariantModel.hues, _VariantModel.tertiaryRotations), 32.0);
     },
-    onSurface: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 90 : 10;
-      },
-      background: function background(s) {
-        return highestSurface(s, colorManagerService);
-      },
-      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
-    },
-    surfaceVariant: {
-      palette: function palette(s) {
-        return s.getPalette('neutralVariant');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 30 : 90;
-      },
-      isBackground: true
-    },
-    onSurfaceVariant: {
-      palette: function palette(s) {
-        return s.getPalette('neutralVariant');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 80 : 30;
-      },
-      background: function background(s) {
-        return highestSurface(s, colorManagerService);
-      },
-      contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
+    neutral: function neutral(sourceColorHct) {
+      return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 6.0);
     },
-    inverseSurface: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 90 : 20;
+    neutralVariant: function neutralVariant(sourceColorHct) {
+      return TonalPalette.fromHueAndChroma(sourceColorHct.hue, 8.0);
+    }
+  },
+  customPalettes: function customPalettes(colorHct) {
+    return TonalPalette.fromHueAndChroma(getRotatedHue(colorHct, _VariantModel.hues, _VariantModel.secondaryRotations), 24.0);
+  }
+};
+VariantModel.hues = [0.0, 41.0, 61.0, 101.0, 131.0, 181.0, 251.0, 301.0, 360.0];
+VariantModel.secondaryRotations = [18.0, 15.0, 10.0, 12.0, 15.0, 18.0, 15.0, 12.0, 12.0];
+VariantModel.tertiaryRotations = [35.0, 30.0, 20.0, 25.0, 30.0, 35.0, 30.0, 25.0, 25.0];
+
+function defineConfig(configObject) {
+  if (!configObject || typeof configObject !== 'object') {
+    throw new Error('The configuration is missing or not an object');
+  }
+  if (!('sourceColor' in configObject)) {
+    throw new Error('Invalid configuration');
+  }
+  return configObject;
+}
+var ConfigService = /*#__PURE__*/function () {
+  function ConfigService(_ref) {
+    var appService = _ref.appService;
+    this.configPath = './theme.config';
+    this.appService = void 0;
+    this.appService = appService;
+  }
+  var _proto = ConfigService.prototype;
+  _proto.loadConfig = function loadConfig(config) {
+    var _this$appService = this.appService,
+      themeService = _this$appService.themeService,
+      colorService = _this$appService.colorService,
+      pluginService = _this$appService.pluginService;
+    var _ref2 = config != null ? config : this.getConfig(),
+      sourceColor = _ref2.sourceColor,
+      _ref2$contrastLevel = _ref2.contrastLevel,
+      contrastLevel = _ref2$contrastLevel === void 0 ? 0 : _ref2$contrastLevel,
+      _ref2$isDark = _ref2.isDark,
+      isDark = _ref2$isDark === void 0 ? false : _ref2$isDark,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? VariantModel.tonalSpot : _ref2$variant,
+      palettes = _ref2.palettes,
+      colors = _ref2.colors,
+      _ref2$useDefaultColor = _ref2.useDefaultColors,
+      useDefaultColors = _ref2$useDefaultColor === void 0 ? true : _ref2$useDefaultColor,
+      plugins = _ref2.plugins;
+    themeService.create({
+      contrastLevel: contrastLevel,
+      isDark: isDark,
+      sourceColorHex: sourceColor,
+      variant: variant
+    });
+    if (palettes) {
+      Object.entries(palettes).forEach(function (_ref3) {
+        var key = _ref3[0],
+          value = _ref3[1];
+        return themeService.addCustomPalette(key, value);
+      });
+    }
+    if (useDefaultColors) {
+      colorService.addColors(defaultColors);
+    }
+    if (colors) {
+      colorService.addColors(colors);
+    }
+    if (plugins) {
+      plugins.forEach(function (plugin) {
+        pluginService.addPlugin(plugin);
+      });
+      pluginService.loadPlugins(this.appService);
+    }
+  };
+  _proto.getConfig = function getConfig() {
+    if (typeof process !== 'undefined' && process.release && process.release.name === 'node') {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      var path = require('path');
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      var fs = require('fs');
+      var base = path.resolve(this.configPath);
+      var extensions = ['.js', '.ts', '.jms', '.jcs'];
+      var configImport = null;
+      for (var _i = 0, _extensions = extensions; _i < _extensions.length; _i++) {
+        var ext = _extensions[_i];
+        var _path = base + ext;
+        if (fs.existsSync(_path)) {
+          configImport = require(_path);
+          break;
+        }
       }
-    },
-    inverseOnSurface: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 20 : 95;
-      },
-      background: function background(s) {
-        return colorManagerService.get('inverseSurface').getDynamicColor();
-      },
-      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
-    },
-    outline: {
-      palette: function palette(s) {
-        return s.getPalette('neutralVariant');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 60 : 50;
-      },
-      background: function background(s) {
-        return highestSurface(s, colorManagerService);
-      },
-      contrastCurve: new ContrastCurve(1.5, 3, 4.5, 7)
-    },
-    outlineVariant: {
-      palette: function palette(s) {
-        return s.getPalette('neutralVariant');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 30 : 80;
+      if (!configImport) {
+        throw new Error('Configuration file not found');
+      }
+      var config;
+      if ('default' in configImport) {
+        config = configImport["default"];
+      } else {
+        config = configImport;
+      }
+      return config;
+    } else {
+      throw new Error('You must provide configuration object when using this library in a browser.');
+    }
+  };
+  return ConfigService;
+}();
+
+var ConfigModule = {
+  configService: /*#__PURE__*/asClass(ConfigService).singleton()
+};
+
+var PluginService = /*#__PURE__*/function () {
+  function PluginService() {
+    this.plugins = new Map();
+  }
+  var _proto = PluginService.prototype;
+  _proto.addPlugin = function addPlugin(plugin) {
+    this.plugins.set(plugin.name, plugin);
+  };
+  _proto.loadPlugins = function loadPlugins(appService) {
+    var _this = this;
+    var plugins = new Map(this.plugins);
+    var size = 0;
+    do {
+      size = plugins.size;
+      plugins.forEach(function (plugin, key) {
+        var deps = plugin.dependencies.filter(function (dep) {
+          return !_this.plugins.has(new dep().name);
+        });
+        if (deps.length === 0) {
+          _this.plugins.set(plugin.name, plugin.init(appService));
+          plugins["delete"](key);
+        }
+      });
+    } while (plugins.size != 0 && plugins.size < size);
+    if (plugins.size > 0) throw new Error("Some plugins couldn't be loaded due to missing dependencies: " + Array.from(plugins.keys()));
+  };
+  _proto.getPlugin = function getPlugin(plugin) {
+    var pluginInstance = this.plugins.get(new plugin().name);
+    if (!pluginInstance) throw new Error("Plugin " + plugin.name + " not found");
+    return pluginInstance;
+  };
+  return PluginService;
+}();
+
+var PluginModule = {
+  pluginService: /*#__PURE__*/asClass(PluginService).singleton()
+};
+
+function importContainer(container, services) {
+  services.forEach(function (service) {
+    Object.entries(service).forEach(function (_ref) {
+      var name = _ref[0],
+        serviceClass = _ref[1];
+      container.register(name, serviceClass);
+    });
+  });
+  return container;
+}
+var AppContainer = /*#__PURE__*/createContainer({
+  injectionMode: InjectionMode.PROXY
+});
+importContainer(AppContainer, [ConfigModule, AppModule, PluginModule, ColorModule, ThemeModule]);
+
+function bootstrap() {
+  return AppContainer.resolve('appService');
+}
+function bootstrapFromConfig(args) {
+  var configService = AppContainer.resolve('configService');
+  if (args != null && args.path) configService.configPath = args.path;
+  configService.loadConfig(args == null ? void 0 : args.config);
+  return AppContainer.resolve('appService');
+}
+
+var PluginAbstract = /*#__PURE__*/function () {
+  function PluginAbstract(options) {
+    this.options = void 0;
+    this.pluginInstance = void 0;
+    this.options = options;
+  }
+  var _proto = PluginAbstract.prototype;
+  _proto.init = function init(appService) {
+    this.pluginInstance = new this.pluginClass(appService, this.options);
+    this.pluginInstance.onInit();
+    return this;
+  };
+  _proto.getInstance = function getInstance() {
+    if (!this.pluginInstance) {
+      throw new Error("Plugin " + this.name + " is not initialized");
+    }
+    return this.pluginInstance;
+  };
+  return PluginAbstract;
+}();
+var PluginImplAbstract = function PluginImplAbstract(appService, options) {
+  this.appService = void 0;
+  this.options = void 0;
+  this.appService = appService;
+  this.options = options;
+  this.onInit();
+};
+
+var FontFamily;
+(function (FontFamily) {
+  FontFamily["Expressive"] = "expressive";
+  FontFamily["Neutral"] = "neutral";
+})(FontFamily || (FontFamily = {}));
+var FontPlugin = /*#__PURE__*/function (_PluginAbstract) {
+  function FontPlugin() {
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _PluginAbstract.call.apply(_PluginAbstract, [this].concat(args)) || this;
+    _this.dependencies = [];
+    _this.name = 'font';
+    _this.pluginClass = FontPluginImpl;
+    return _this;
+  }
+  _inheritsLoose(FontPlugin, _PluginAbstract);
+  return FontPlugin;
+}(PluginAbstract);
+var FontPluginImpl = /*#__PURE__*/function (_PluginImplAbstract) {
+  function FontPluginImpl() {
+    var _this2;
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    _this2 = _PluginImplAbstract.call.apply(_PluginImplAbstract, [this].concat(args)) || this;
+    _this2._fontFamily = void 0;
+    _this2._fontStyles = void 0;
+    return _this2;
+  }
+  _inheritsLoose(FontPluginImpl, _PluginImplAbstract);
+  var _proto = FontPluginImpl.prototype;
+  _proto.getFonts = function getFonts() {
+    return {
+      fontStyles: this.fontStyles,
+      fontFamily: this.fontFamily
+    };
+  };
+  _proto.onInit = function onInit() {
+    var _this$options$fontFam,
+      _this$options,
+      _this$options$fontFam2,
+      _this$options2,
+      _this3 = this;
+    this.fontFamily = {
+      expressive: (_this$options$fontFam = (_this$options = this.options) == null || (_this$options = _this$options.fontFamily) == null ? void 0 : _this$options.expressive) != null ? _this$options$fontFam : ['Roboto', 'sans-serif'],
+      neutral: (_this$options$fontFam2 = (_this$options2 = this.options) == null || (_this$options2 = _this$options2.fontFamily) == null ? void 0 : _this$options2.neutral) != null ? _this$options$fontFam2 : ['Roboto', 'sans-serif']
+    };
+    this.fontStyles = {
+      display: {
+        large: {
+          fontWeight: 400,
+          fontSize: 3.5625,
+          lineHeight: 4,
+          letterSpacing: -0.015625,
+          fontFamily: FontFamily.Expressive
+        },
+        medium: {
+          fontWeight: 400,
+          fontSize: 2.8125,
+          lineHeight: 3.25,
+          fontFamily: FontFamily.Expressive
+        },
+        small: {
+          fontWeight: 400,
+          fontSize: 2.25,
+          lineHeight: 2.75,
+          fontFamily: FontFamily.Expressive
+        }
       },
-      background: function background(s) {
-        return highestSurface(s, colorManagerService);
+      headline: {
+        large: {
+          fontWeight: 400,
+          fontSize: 2,
+          lineHeight: 2.5,
+          fontFamily: FontFamily.Expressive
+        },
+        medium: {
+          fontWeight: 400,
+          fontSize: 1.75,
+          lineHeight: 2.25,
+          fontFamily: FontFamily.Expressive
+        },
+        small: {
+          fontWeight: 400,
+          fontSize: 1.5,
+          lineHeight: 2,
+          fontFamily: FontFamily.Expressive
+        }
       },
-      contrastCurve: new ContrastCurve(1, 1, 3, 7)
-    },
-    shadow: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
+      title: {
+        large: {
+          fontWeight: 400,
+          fontSize: 1.375,
+          lineHeight: 1.75,
+          fontFamily: FontFamily.Neutral
+        },
+        medium: {
+          fontWeight: 500,
+          fontSize: 1,
+          lineHeight: 1.5,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.009375
+        },
+        small: {
+          fontWeight: 500,
+          fontSize: 0.875,
+          lineHeight: 1.25,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.00625
+        }
       },
-      tone: function tone(s) {
-        return 0;
-      }
-    },
-    scrim: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
+      label: {
+        large: {
+          fontWeight: 500,
+          fontSize: 0.875,
+          lineHeight: 1.25,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.00625
+        },
+        medium: {
+          fontWeight: 500,
+          fontSize: 0.75,
+          lineHeight: 1,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.03125
+        },
+        small: {
+          fontWeight: 500,
+          fontSize: 0.6875,
+          lineHeight: 1,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.03125
+        }
       },
-      tone: function tone(s) {
-        return 0;
+      body: {
+        large: {
+          fontWeight: 400,
+          fontSize: 1,
+          lineHeight: 1.5625,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.03125
+        },
+        medium: {
+          fontWeight: 400,
+          fontSize: 0.875,
+          lineHeight: 1.25,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.015625
+        },
+        small: {
+          fontWeight: 400,
+          fontSize: 0.75,
+          lineHeight: 1,
+          fontFamily: FontFamily.Neutral,
+          letterSpacing: 0.025
+        }
       }
+    };
+    if (this.options && this.options.fontStyles) Object.entries(this.options.fontStyles).forEach(function (_ref) {
+      var key = _ref[0],
+        fontParam = _ref[1];
+      var fontRole = key;
+      Object.entries(fontParam).forEach(function (_ref2) {
+        var size = _ref2[0],
+          fontStyle = _ref2[1];
+        var fontSize = size;
+        if (fontStyle) {
+          _this3.fontStyles[fontRole][fontSize] = _extends({}, _this3.fontStyles[fontRole][fontSize], fontStyle);
+        }
+      });
+    });
+  };
+  return _createClass(FontPluginImpl, [{
+    key: "fontFamily",
+    get: function get() {
+      if (!this._fontFamily) throw new Error('Font family not initialized');
+      return this._fontFamily;
     },
-    surfaceTint: {
-      palette: function palette(s) {
-        return s.getPalette('neutral');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 80 : 40;
-      },
-      isBackground: true
-    },
-    secondaryContainer: {
-      tone: function tone(s) {
-        var initialTone = s.isDark ? 30 : 90;
-        return findDesiredChromaByTone(s.getPalette('secondary').hue, s.getPalette('secondary').chroma, initialTone, !s.isDark);
-      }
+    set: function set(value) {
+      this._fontFamily = value;
+    }
+  }, {
+    key: "fontStyles",
+    get: function get() {
+      if (!this._fontStyles) throw new Error('Font styles not initialized');
+      return this._fontStyles;
     },
-    onSecondaryContainer: {
-      tone: function tone(s) {
-        return DynamicColor.foregroundTone(colorManagerService.get('secondaryContainer').getDynamicColor().tone(s), 4.5);
+    set: function set(value) {
+      this._fontStyles = value;
+    }
+  }]);
+}(PluginImplAbstract);
+
+var state = function state(colorkeys) {
+  return plugin(function (pluginArgs) {
+    addAllNewComponents(pluginArgs, {
+      statePrefix: 'state',
+      disabledStyles: {
+        textOpacity: 0.38,
+        backgroundOpacity: 0.12
+      },
+      transition: {
+        duration: 150
       }
-    },
-    tertiaryContainer: {
-      palette: function palette(s) {
-        return s.getPalette('tertiary');
-      },
-      tone: function tone(s) {
-        var proposedHct = s.getPalette('tertiary').getHct(s.sourceColorHct.tone);
-        return DislikeAnalyzer.fixIfDisliked(proposedHct).tone;
+    }, colorkeys);
+  }, {});
+};
+var addAllNewComponents = function addAllNewComponents(_ref, _ref2, colorKeys) {
+  var addComponents = _ref.addComponents;
+  var statePrefix = _ref2.statePrefix,
+    disabledStyles = _ref2.disabledStyles,
+    transition = _ref2.transition;
+  var newComponents = {};
+  for (var _i = 0, _arr = [false, true]; _i < _arr.length; _i++) {
+    var isGroup = _arr[_i];
+    var group = isGroup ? 'group-' : '';
+    for (var _iterator = _createForOfIteratorHelperLoose(colorKeys), _step; !(_step = _iterator()).done;) {
+      var _newComponents$classN;
+      var colorName = _step.value;
+      var className = "." + group + statePrefix + "-" + colorName;
+      newComponents[className] = (_newComponents$classN = {}, _newComponents$classN["@apply " + group + "hover:bg-" + colorName + "/[0.08]"] = {}, _newComponents$classN["@apply " + group + "active:bg-" + colorName + "/[0.12]"] = {}, _newComponents$classN["@apply " + group + "focus-visible:bg-" + colorName + "/[0.12]"] = {}, _newComponents$classN);
+      if (transition) {
+        newComponents[className]["@apply transition-colors"] = {};
+        newComponents[className]["@apply duration-" + transition.duration] = {};
       }
-    },
-    onTertiaryContainer: {
-      palette: function palette(s) {
-        return s.getPalette('tertiary');
-      },
-      tone: function tone(s) {
-        return DynamicColor.foregroundTone(colorManagerService.get('tertiaryContainer').getDynamicColor().tone(s), 4.5);
+      if (disabledStyles) {
+        newComponents[className]["@apply " + group + "disabled:text-on-surface/[" + disabledStyles.textOpacity + "]"] = {};
+        newComponents[className]["@apply " + group + "disabled:bg-on-surface/[" + disabledStyles.backgroundOpacity + "]"] = {};
       }
-    },
-    error: {
-      palette: function palette(s) {
-        return s.getPalette('error');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 80 : 40;
-      },
-      isBackground: true,
-      background: function background(s) {
-        return highestSurface(s, colorManagerService);
-      },
-      contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
-      toneDeltaPair: function toneDeltaPair(s) {
-        return new ToneDeltaPair(colorManagerService.get('errorContainer').getDynamicColor(), colorManagerService.get('error').getDynamicColor(), 15, 'nearer', false);
-      }
-    },
-    onError: {
-      palette: function palette(s) {
-        return s.getPalette('error');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 20 : 100;
-      },
-      background: function background(s) {
-        return colorManagerService.get('error').getDynamicColor();
-      },
-      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
-    },
-    errorContainer: {
-      palette: function palette(s) {
-        return s.getPalette('error');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 30 : 90;
-      },
-      isBackground: true,
-      background: function background(s) {
-        return highestSurface(s, colorManagerService);
-      },
-      contrastCurve: new ContrastCurve(1, 1, 3, 7),
-      toneDeltaPair: function toneDeltaPair(s) {
-        return new ToneDeltaPair(colorManagerService.get('errorContainer').getDynamicColor(), colorManagerService.get('error').getDynamicColor(), 15, 'nearer', false);
+    }
+  }
+  for (var _iterator2 = _createForOfIteratorHelperLoose(colorKeys), _step2; !(_step2 = _iterator2()).done;) {
+    var _colorName = _step2.value;
+    for (var _i2 = 0, _arr2 = ['hover', 'active', 'focus', 'disabled']; _i2 < _arr2.length; _i2++) {
+      var stateName = _arr2[_i2];
+      var _className = "." + stateName + "-" + statePrefix + "-" + _colorName;
+      if (stateName === 'active' || stateName === 'focus') {
+        var _newComponents$_class;
+        newComponents[_className] = (_newComponents$_class = {}, _newComponents$_class["@apply bg-" + _colorName + "/[0.12]"] = {}, _newComponents$_class);
+      } else if (stateName === 'hover') {
+        var _newComponents$_class2;
+        newComponents[_className] = (_newComponents$_class2 = {}, _newComponents$_class2["@apply bg-" + _colorName + "/[0.08]"] = {}, _newComponents$_class2);
+      } else if (stateName === 'disabled') {
+        var _newComponents$_class3, _newComponents$_class4;
+        newComponents[_className] = (_newComponents$_class3 = {}, _newComponents$_class3["@apply text-on-surface/[" + disabledStyles.textOpacity + "]"] = {}, _newComponents$_class3);
+        newComponents[_className] = (_newComponents$_class4 = {}, _newComponents$_class4["@apply bg-on-surface/[" + disabledStyles.backgroundOpacity + "]"] = {}, _newComponents$_class4);
       }
-    },
-    onErrorContainer: {
-      palette: function palette(s) {
-        return s.getPalette('error');
-      },
-      tone: function tone(s) {
-        return s.isDark ? 90 : 10;
-      },
-      background: function background(s) {
-        return colorManagerService.get('errorContainer').getDynamicColor();
-      },
-      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
-    },
-    onTertiaryFixed: {
-      palette: function palette(s) {
-        return s.getPalette('tertiary');
-      },
-      tone: function tone(s) {
-        return 10.0;
-      },
-      background: function background(s) {
-        return colorManagerService.get('tertiaryFixedDim').getDynamicColor();
-      },
-      secondBackground: function secondBackground(s) {
-        return colorManagerService.get('tertiaryFixed').getDynamicColor();
-      },
-      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
-    },
-    onTertiaryFixedVariant: {
-      palette: function palette(s) {
-        return s.getPalette('tertiary');
-      },
-      tone: function tone(s) {
-        return 30.0;
-      },
-      background: function background(s) {
-        return colorManagerService.get('tertiaryFixedDim').getDynamicColor();
-      },
-      secondBackground: function secondBackground(s) {
-        return colorManagerService.get('tertiaryFixed').getDynamicColor();
-      },
-      contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
     }
-  };
+  }
+  addComponents(newComponents);
 };
 
-var ColorService = /*#__PURE__*/function () {
-  function ColorService(colorManagerService) {
-    this.colorManagerService = void 0;
-    this.colorManagerService = colorManagerService;
-  }
-  var _proto = ColorService.prototype;
-  _proto.getAllColors = function getAllColors() {
-    return this.colorManagerService.getAll();
-  }
-  // getColors() {
-  //   const colors: Record<string, string> = {};
-  //
-  //   for (const [key, value] of this.colorManagerService.getAll()) {
-  //     colors[key] = hexFromArgb(value.getArgb(this.schemeService.get()));
-  //   }
-  //
-  //   return colors;
-  // }
-  ;
-  _proto.addBaseColors = function addBaseColors() {
-    var _this = this;
-    this.colorManagerService.addFromPalette('primary');
-    this.colorManagerService.addFromPalette('secondary');
-    this.colorManagerService.addFromPalette('tertiary');
-    var colors = defaultColors(this.colorManagerService);
-    Object.keys(colors).map(function (key) {
-      var color = colors[key];
-      if (!color) return;
-      return _this.colorManagerService.createOrUpdate(key, color);
-    });
+function createSubTheme(_ref) {
+  var name = _ref.name,
+    darkMode = _ref.darkMode,
+    isDarkTheme = _ref.isDarkTheme,
+    colors = _ref.colors;
+  var theme = {
+    name: isDarkTheme ? name + 'Dark' : name,
+    selectors: isDarkTheme && darkMode === 'class' ? ['.dark-mode .theme-' + name, '.dark-mode.theme-' + name, '[data-theme="dark"] .theme-' + name, '[data-theme="dark"].theme-' + name] : ['.theme-' + name, ".theme-" + name + " .light-mode", ".theme-" + name + " [data-theme=\"light\"]", ".light-mode .theme-" + name, ".light-mode.theme-" + name, "[data-theme=\"light\"] .theme-" + name, "[data-theme=\"light\"].theme-" + name],
+    mediaQuery: isDarkTheme && darkMode === 'media' ? '@media (prefers-color-scheme: dark)' : undefined,
+    extend: {
+      colors: colors
+    }
   };
-  _proto.addColor = function addColor(key, color) {
-    return this.colorManagerService.createOrUpdate(key, color);
+  return theme;
+}
+var themer = function themer(args) {
+  var _args$appService = args.appService,
+    themeService = _args$appService.themeService,
+    colorService = _args$appService.colorService;
+  var options = {
+    defaultTheme: {
+      extend: {
+        colors: {}
+      }
+    },
+    themes: [{
+      name: 'darkTheme',
+      extend: {
+        colors: {}
+      }
+    }]
   };
-  _proto.addColors = function addColors(colors) {
-    var _this2 = this;
-    return Object.keys(colors).map(function (key) {
-      return _this2.addColor(key, colors[key]);
+  Object.entries(args.colors).forEach(function (_ref2) {
+    var key = _ref2[0],
+      value = _ref2[1];
+    options.defaultTheme.extend.colors[key] = value.light;
+    options.themes[0].extend.colors[key] = value.dark;
+  });
+  options.themes[0].selectors = args.darkMode === 'class' ? ['.dark-mode', '[data-theme="dark"]'] : undefined;
+  options.themes[0].mediaQuery = args.darkMode === 'media' ? '@media (prefers-color-scheme: dark)' : undefined;
+  if (args.subThemes) {
+    Object.entries(args.subThemes).forEach(function (_ref3) {
+      var key = _ref3[0],
+        value = _ref3[1];
+      themeService.update({
+        sourceColorHex: value
+      });
+      for (var _i = 0, _arr = [true, false]; _i < _arr.length; _i++) {
+        var isDarkTheme = _arr[_i];
+        var colors = {};
+        themeService.update({
+          isDark: isDarkTheme
+        });
+        for (var _iterator = _createForOfIteratorHelperLoose(colorService.getColors().entries()), _step; !(_step = _iterator()).done;) {
+          var _step$value = _step.value,
+            _key = _step$value[0],
+            _value = _step$value[1];
+          var newKey = _key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+          colors[newKey] = _value.getHex();
+        }
+        options.themes.push(createSubTheme({
+          name: key,
+          isDarkTheme: isDarkTheme,
+          darkMode: args.darkMode,
+          colors: colors
+        }));
+      }
     });
-  };
-  _proto.getColor = function getColor(key) {
-    return this.colorManagerService.get(key);
-  };
-  _proto.removeColor = function removeColor(key) {
-    return this.colorManagerService.remove(key);
-  };
-  _proto.updateColor = function updateColor(key, newColor) {
-    return this.colorManagerService.createOrUpdate(key, newColor);
-  };
-  return ColorService;
-}();
-ColorService = /*#__PURE__*/__decorate([/*#__PURE__*/Injectable(), /*#__PURE__*/__metadata("design:paramtypes", [ColorManagerService])], ColorService);
-
-var VariantService = /*#__PURE__*/function () {
-  function VariantService(schemeService) {
-    this.schemeService = void 0;
-    this.schemeService = schemeService;
   }
-  var _proto = VariantService.prototype;
-  _proto.set = function set(variantEntity) {
-    if (!variantEntity.palettes.error) {
-      variantEntity.palettes.error = function () {
-        return TonalPalette.fromHueAndChroma(25.0, 84.0);
+  return require('tailwindcss-themer')(options);
+};
+
+var font = function font(fontStyles, responsiveBreakPoints) {
+  var createUtilities = function createUtilities(_ref) {
+    var theme = _ref.theme;
+    var pixelUnit = 'rem';
+    var newUtilities = {};
+    var baseTextStyle = function baseTextStyle(sizeValue) {
+      return {
+        fontSize: sizeValue.fontSize + pixelUnit,
+        fontWeight: sizeValue.fontWeight,
+        lineHeight: sizeValue.lineHeight + pixelUnit,
+        letterSpacing: sizeValue.letterSpacing ? sizeValue.letterSpacing + pixelUnit : null,
+        fontFamily: theme('fontFamily.' + sizeValue.fontFamily)
       };
+    };
+    var responsiveTextStyle = function responsiveTextStyle(sizeValue, breakPointName, breakPointRatio) {
+      var _ref2;
+      return _ref2 = {}, _ref2["@media (min-width: " + theme('screens.' + breakPointName, {}) + ")"] = {
+        fontSize: sizeValue.fontSize * breakPointRatio + pixelUnit,
+        lineHeight: sizeValue.lineHeight * breakPointRatio + pixelUnit
+      }, _ref2;
+    };
+    for (var _i = 0, _Object$entries = Object.entries(fontStyles); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+        roleName = _Object$entries$_i[0],
+        roleValue = _Object$entries$_i[1];
+      var _loop = function _loop() {
+        var _Object$entries2$_i = _Object$entries2[_i2],
+          sizeName = _Object$entries2$_i[0],
+          sizeValue = _Object$entries2$_i[1];
+        newUtilities['.text-' + roleName + '-' + sizeName] = _extends({}, baseTextStyle(sizeValue), Object.entries(responsiveBreakPoints).reduce(function (acc, _ref3) {
+          var breakPointName = _ref3[0],
+            breakPointRatio = _ref3[1];
+          acc = _extends({}, acc, responsiveTextStyle(sizeValue, breakPointName, breakPointRatio));
+          return acc;
+        }, {}));
+      };
+      for (var _i2 = 0, _Object$entries2 = Object.entries(roleValue); _i2 < _Object$entries2.length; _i2++) {
+        _loop();
+      }
     }
-    this.schemeService.createOrUpdate(variantEntity);
+    return newUtilities;
   };
-  return VariantService;
-}();
-VariantService = /*#__PURE__*/__decorate([/*#__PURE__*/Injectable(), /*#__PURE__*/__metadata("design:paramtypes", [SchemeService])], VariantService);
+  return plugin(function (_ref4) {
+    var addUtilities = _ref4.addUtilities,
+      theme = _ref4.theme;
+    var newUtilities = createUtilities({
+      theme: theme
+    });
+    addUtilities(newUtilities);
+  });
+};
 
-var ThemeService = /*#__PURE__*/function () {
-  function ThemeService(schemeService, variantService) {
-    this.schemeService = void 0;
-    this.variantService = void 0;
-    this.schemeService = schemeService;
-    this.variantService = variantService;
-    // this.addPalette({key: "primary", addDefaultColors: true})
-    // this.addPalette({key: "secondary", addDefaultColors: true})
-    // this.addPalette({key: "tertiary", addDefaultColors: true})
-    // this.addPalette({key: "error", palette: TonalPalette.fromHueAndChroma(25.0, 84.0)})
-    // this.addPalette({key: "neutral"})
-    // this.addPalette({key: "neutralVariant"})
+var TailwindPlugin = /*#__PURE__*/function (_PluginAbstract) {
+  function TailwindPlugin() {
+    var _this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _PluginAbstract.call.apply(_PluginAbstract, [this].concat(args)) || this;
+    _this.dependencies = [FontPlugin];
+    _this.name = 'tailwind';
+    _this.pluginClass = TailwindImplPlugin;
+    return _this;
   }
-  // addPalette({key, palette, addDefaultColors}: {key: string; palette: TonalPalette; addDefaultColors: boolean}) {
-  //   this.themeOptions.palettes.set(key, palette);
-  //   if (addDefaultColors){
-  //     this.colorService.addPalette(key)
-  //   }
-  // }
-  // create(args: ThemeOptions): SchemeService {
-  //   return new SchemeService(args, this.colorService)
-  // }
-  //
-  // update(options: Partial<ThemeOptions>): SchemeService {
-  //   Object.assign(this.themeOptions, options);
-  //   return this.theme();
-  // }
-  var _proto = ThemeService.prototype;
-  _proto.create = function create(options) {
-    this.schemeService.createOrUpdate(options);
-  };
-  _proto.addVariant = function addVariant(variant) {
-    this.variantService.set(variant);
+  _inheritsLoose(TailwindPlugin, _PluginAbstract);
+  return TailwindPlugin;
+}(PluginAbstract);
+var TailwindImplPlugin = /*#__PURE__*/function (_PluginImplAbstract) {
+  function TailwindImplPlugin() {
+    return _PluginImplAbstract.apply(this, arguments) || this;
+  }
+  _inheritsLoose(TailwindImplPlugin, _PluginImplAbstract);
+  var _proto = TailwindImplPlugin.prototype;
+  _proto.onInit = function onInit() {
+    var _this$options, _this$options$darkMod, _this$options2, _this$options2$respon;
+    (_this$options$darkMod = (_this$options = this.options).darkMode) != null ? _this$options$darkMod : _this$options.darkMode = 'class';
+    (_this$options2$respon = (_this$options2 = this.options).responsiveBreakPoints) != null ? _this$options2$respon : _this$options2.responsiveBreakPoints = {
+      lg: 1.125
+    };
   };
-  _proto.update = function update(options) {
-    this.schemeService.createOrUpdate(options);
+  _proto.getTheme = function getTheme() {
+    var colors = {};
+    for (var _i = 0, _arr = [false, true]; _i < _arr.length; _i++) {
+      var isDark = _arr[_i];
+      this.appService.themeService.update({
+        isDark: isDark
+      });
+      for (var _iterator = _createForOfIteratorHelperLoose(this.appService.colorService.getColors().entries()), _step; !(_step = _iterator()).done;) {
+        var _colors$newKey;
+        var _step$value = _step.value,
+          key = _step$value[0],
+          value = _step$value[1];
+        var newKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+        (_colors$newKey = colors[newKey]) != null ? _colors$newKey : colors[newKey] = {
+          light: '',
+          dark: ''
+        };
+        colors[newKey][isDark ? 'dark' : 'light'] = value.getHex();
+      }
+    }
+    var _this$appService$plug = this.appService.pluginService.getPlugin(FontPlugin).getInstance().getFonts(),
+      fontStyles = _this$appService$plug.fontStyles,
+      fontFamily = _this$appService$plug.fontFamily;
+    return {
+      colors: {},
+      fontFamily: fontFamily,
+      plugins: [state(Object.keys(colors)), font(fontStyles, this.options.responsiveBreakPoints), themer({
+        colors: colors,
+        darkMode: this.options.darkMode,
+        subThemes: this.options.subThemes,
+        appService: this.appService
+      })]
+    };
   };
-  return ThemeService;
-}();
-ThemeService = /*#__PURE__*/__decorate([/*#__PURE__*/Injectable(), /*#__PURE__*/__metadata("design:paramtypes", [SchemeService, VariantService])], ThemeService);
+  return TailwindImplPlugin;
+}(PluginImplAbstract);
 
-var AppService = function AppService(colorService, themeService) {
-  this.colorService = void 0;
-  this.themeService = void 0;
-  this.colorService = colorService;
-  this.themeService = themeService;
+var createTheme = function createTheme() {
+  var app = bootstrapFromConfig();
+  var plugin = app.pluginService.getPlugin(TailwindPlugin).getInstance();
+  return _extends({}, plugin.getTheme(), {
+    appService: app
+  });
 };
-AppService = /*#__PURE__*/__decorate([/*#__PURE__*/Injectable(), /*#__PURE__*/__metadata("design:paramtypes", [ColorService, ThemeService])], AppService);
-
-var ThemeModule = function ThemeModule() {};
-ThemeModule = /*#__PURE__*/__decorate([/*#__PURE__*/Module({
-  providers: [SchemeService, ThemeService, VariantService],
-  exports: [ThemeService, SchemeService]
-})], ThemeModule);
-
-var ColorModule = function ColorModule() {};
-ColorModule = /*#__PURE__*/__decorate([/*#__PURE__*/Module({
-  imports: [ThemeModule],
-  providers: [ColorService, ColorManagerService],
-  exports: [ColorService]
-})], ColorModule);
-
-var AppModule = function AppModule() {};
-AppModule = /*#__PURE__*/__decorate([/*#__PURE__*/Module({
-  imports: [ColorModule, ThemeModule],
-  providers: [AppService]
-})], AppModule);
-
-function main() {
-  return _main.apply(this, arguments);
-}
-function _main() {
-  _main = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-    var app, appService, close;
-    return _regeneratorRuntime().wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _context.next = 2;
-          return NestFactory.create(AppModule);
-        case 2:
-          app = _context.sent;
-          appService = app.get(AppService);
-          close = function close() {
-            return app.close();
-          };
-          return _context.abrupt("return", [appService, close]);
-        case 6:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  }));
-  return _main.apply(this, arguments);
-}
 
-export { main };
+export { AppContainer, AppModule, AppService, ColorEntity, ColorManagerService, ColorModule, ColorService, ConfigModule, ConfigService, ContrastCurve, DynamicColor, FontFamily, FontPlugin, PluginAbstract, PluginImplAbstract, PluginModule, PluginService, SchemeEntity, SchemeService, TailwindPlugin, ThemeModule, ThemeService, ToneDeltaPair, VariantEntity, VariantModel, VariantService, bootstrap, bootstrapFromConfig, createTheme, defaultColors, defineConfig, getRotatedHue, highestSurface, importContainer, state, themer };
 //# sourceMappingURL=theme.esm.js.map