@mirai/ui 1.0.90 → 1.0.91

package/build/theme/theme.constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MAGNITUDES = exports.DOMAIN = exports.COLORS = void 0;
+var COLORS = ['accent'];
+exports.COLORS = COLORS;
+var DOMAIN = '--mirai-ui-';
+exports.DOMAIN = DOMAIN;
+var MAGNITUDES = [400, 300, 200];
+exports.MAGNITUDES = MAGNITUDES;
+//# sourceMappingURL=theme.constants.js.map

package/build/theme/theme.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.constants.js","names":["COLORS","DOMAIN","MAGNITUDES"],"sources":["../../src/theme/theme.constants.js"],"sourcesContent":["const COLORS = ['accent'];\n\nconst DOMAIN = '--mirai-ui-';\n\nconst MAGNITUDES = [400, 300, 200];\n\nexport { COLORS, DOMAIN, MAGNITUDES };\n"],"mappings":";;;;;;AAAA,IAAMA,MAAM,GAAG,CAAC,QAAQ,CAAC;AAAC;AAE1B,IAAMC,MAAM,GAAG,aAAa;AAAC;AAE7B,IAAMC,UAAU,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;AAAC"}

package/build/theme/theme.js

@@ -5,50 +5,55 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Theme = void 0;
 var _helpers = require("./helpers");
+var _theme = require("./theme.constants");
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-var VAR_DOMAIN = '--mirai-ui-';
-var COLORS = ['accent'];
-var MAGNITUDES = [400, 300, 200];
 var Theme = {
   get: function get() {
-    var domain = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : VAR_DOMAIN;
+    var domain = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _theme.DOMAIN;
     var style = getComputedStyle(document.querySelector(':root'));
     var variables = {};
-    _toConsumableArray(document.styleSheets).filter(function (stylesheet) {
-      return !!stylesheet.ownerRule;
-    }).forEach(function (stylesheet) {
-      _toConsumableArray(stylesheet.cssRules).filter(function () {
-        var rule = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        return rule.type === 1;
-      }).forEach(function () {
-        var rule = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        _toConsumableArray(rule.style).filter(function (name) {
-          return name.includes(domain);
-        }).forEach(function (name) {
-          return variables[(0, _helpers.camelcase)(name.replace(domain, ''))] = style.getPropertyValue(name).trim();
-        });
-      });
+    var keys = Array.from(document.styleSheets).filter(function (stylesheet) {
+      return stylesheet.href === null || stylesheet.href.startsWith(window.location.origin);
+    }).reduce(function (stylesheet) {
+      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        cssRules = _ref.cssRules;
+      return [].concat(_toConsumableArray(stylesheet), _toConsumableArray(Array.from(cssRules).reduce(function (value) {
+        var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+          _ref2$selectorText = _ref2.selectorText,
+          selectorText = _ref2$selectorText === void 0 ? '' : _ref2$selectorText,
+          _ref2$style = _ref2.style,
+          style = _ref2$style === void 0 ? [] : _ref2$style;
+        return selectorText === ':root' ? [].concat(_toConsumableArray(value), _toConsumableArray(Array.from(style).filter(function (name) {
+          return name.startsWith(domain);
+        }))) : value;
+      }, [])));
+    }, []);
+    keys.forEach(function (key) {
+      return variables[(0, _helpers.camelcase)(key.replace(domain, ''))] = style.getPropertyValue(key);
     });
     return variables;
   },
   setVariable: function setVariable(variable, value) {
-    var domain = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : VAR_DOMAIN;
+    var domain = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _theme.DOMAIN;
     var _document$querySelect = document.querySelector(':root'),
       style = _document$querySelect.style;
     style.setProperty("".concat(domain).concat(variable), value);
-    Theme.shadeColors();
+
+    // ! TODO: Should revisit this "algo"
+    // Theme.shadeColors();
   },
+
   shadeColors: function shadeColors() {
     var theme = Theme.get();
-    COLORS.filter(function (color) {
+    _theme.COLORS.filter(function (color) {
       return theme[color] !== undefined;
     }).forEach(function (color) {
-      return MAGNITUDES.forEach(function (magnitude) {
+      return _theme.MAGNITUDES.forEach(function (magnitude) {
         return Theme.setVariable("".concat(color, "-").concat(magnitude), (0, _helpers.colorShade)(theme[color], magnitude));
       });
     });

package/build/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":["VAR_DOMAIN","COLORS","MAGNITUDES","Theme","get","domain","style","getComputedStyle","document","querySelector","variables","styleSheets","filter","stylesheet","ownerRule","forEach","cssRules","rule","type","name","includes","camelcase","replace","getPropertyValue","trim","setVariable","variable","value","setProperty","shadeColors","theme","color","undefined","magnitude","colorShade"],"sources":["../../src/theme/theme.js"],"sourcesContent":["const VAR_DOMAIN = '--mirai-ui-';\n\nimport { camelcase, colorShade } from './helpers';\n\nconst COLORS = ['accent'];\nconst MAGNITUDES = [400, 300, 200];\n\nexport const Theme = {\n  get: (domain = VAR_DOMAIN) => {\n    const style = getComputedStyle(document.querySelector(':root'));\n\n    const variables = {};\n    [...document.styleSheets]\n      .filter((stylesheet) => !!stylesheet.ownerRule)\n      .forEach((stylesheet) => {\n        [...stylesheet.cssRules]\n          .filter((rule = {}) => rule.type === 1)\n          .forEach((rule = {}) => {\n            [...rule.style]\n              .filter((name) => name.includes(domain))\n              .forEach(\n                (name) => (variables[camelcase(name.replace(domain, ''))] = style.getPropertyValue(name).trim()),\n              );\n          });\n      });\n\n    return variables;\n  },\n\n  setVariable: (variable, value, domain = VAR_DOMAIN) => {\n    const { style } = document.querySelector(':root');\n\n    style.setProperty(`${domain}${variable}`, value);\n\n    Theme.shadeColors();\n  },\n\n  shadeColors: () => {\n    const theme = Theme.get();\n\n    COLORS.filter((color) => theme[color] !== undefined).forEach((color) =>\n      MAGNITUDES.forEach((magnitude) =>\n        Theme.setVariable(`${color}-${magnitude}`, colorShade(theme[color], magnitude)),\n      ),\n    );\n  },\n};\n"],"mappings":";;;;;;AAEA;AAAkD;AAAA;AAAA;AAAA;AAAA;AAAA;AAFlD,IAAMA,UAAU,GAAG,aAAa;AAIhC,IAAMC,MAAM,GAAG,CAAC,QAAQ,CAAC;AACzB,IAAMC,UAAU,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;AAE3B,IAAMC,KAAK,GAAG;EACnBC,GAAG,EAAE,eAAyB;IAAA,IAAxBC,MAAM,uEAAGL,UAAU;IACvB,IAAMM,KAAK,GAAGC,gBAAgB,CAACC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC,CAAC;IAE/D,IAAMC,SAAS,GAAG,CAAC,CAAC;IACpB,mBAAIF,QAAQ,CAACG,WAAW,EACrBC,MAAM,CAAC,UAACC,UAAU;MAAA,OAAK,CAAC,CAACA,UAAU,CAACC,SAAS;IAAA,EAAC,CAC9CC,OAAO,CAAC,UAACF,UAAU,EAAK;MACvB,mBAAIA,UAAU,CAACG,QAAQ,EACpBJ,MAAM,CAAC;QAAA,IAACK,IAAI,uEAAG,CAAC,CAAC;QAAA,OAAKA,IAAI,CAACC,IAAI,KAAK,CAAC;MAAA,EAAC,CACtCH,OAAO,CAAC,YAAe;QAAA,IAAdE,IAAI,uEAAG,CAAC,CAAC;QACjB,mBAAIA,IAAI,CAACX,KAAK,EACXM,MAAM,CAAC,UAACO,IAAI;UAAA,OAAKA,IAAI,CAACC,QAAQ,CAACf,MAAM,CAAC;QAAA,EAAC,CACvCU,OAAO,CACN,UAACI,IAAI;UAAA,OAAMT,SAAS,CAAC,IAAAW,kBAAS,EAACF,IAAI,CAACG,OAAO,CAACjB,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,GAAGC,KAAK,CAACiB,gBAAgB,CAACJ,IAAI,CAAC,CAACK,IAAI,EAAE;QAAA,CAAC,CACjG;MACL,CAAC,CAAC;IACN,CAAC,CAAC;IAEJ,OAAOd,SAAS;EAClB,CAAC;EAEDe,WAAW,EAAE,qBAACC,QAAQ,EAAEC,KAAK,EAA0B;IAAA,IAAxBtB,MAAM,uEAAGL,UAAU;IAChD,4BAAkBQ,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;MAAzCH,KAAK,yBAALA,KAAK;IAEbA,KAAK,CAACsB,WAAW,WAAIvB,MAAM,SAAGqB,QAAQ,GAAIC,KAAK,CAAC;IAEhDxB,KAAK,CAAC0B,WAAW,EAAE;EACrB,CAAC;EAEDA,WAAW,EAAE,uBAAM;IACjB,IAAMC,KAAK,GAAG3B,KAAK,CAACC,GAAG,EAAE;IAEzBH,MAAM,CAACW,MAAM,CAAC,UAACmB,KAAK;MAAA,OAAKD,KAAK,CAACC,KAAK,CAAC,KAAKC,SAAS;IAAA,EAAC,CAACjB,OAAO,CAAC,UAACgB,KAAK;MAAA,OACjE7B,UAAU,CAACa,OAAO,CAAC,UAACkB,SAAS;QAAA,OAC3B9B,KAAK,CAACsB,WAAW,WAAIM,KAAK,cAAIE,SAAS,GAAI,IAAAC,mBAAU,EAACJ,KAAK,CAACC,KAAK,CAAC,EAAEE,SAAS,CAAC,CAAC;MAAA,EAChF;IAAA,EACF;EACH;AACF,CAAC;AAAC"}
+{"version":3,"file":"theme.js","names":["Theme","get","domain","DOMAIN","style","getComputedStyle","document","querySelector","variables","keys","Array","from","styleSheets","filter","stylesheet","href","startsWith","window","location","origin","reduce","cssRules","value","selectorText","name","forEach","key","camelcase","replace","getPropertyValue","setVariable","variable","setProperty","shadeColors","theme","COLORS","color","undefined","MAGNITUDES","magnitude","colorShade"],"sources":["../../src/theme/theme.js"],"sourcesContent":["import { camelcase, colorShade } from './helpers';\nimport { COLORS, DOMAIN, MAGNITUDES } from './theme.constants';\n\nexport const Theme = {\n  get: (domain = DOMAIN) => {\n    const style = getComputedStyle(document.querySelector(':root'));\n    const variables = {};\n\n    const keys = Array.from(document.styleSheets)\n      .filter((stylesheet) => stylesheet.href === null || stylesheet.href.startsWith(window.location.origin))\n      .reduce(\n        (stylesheet, { cssRules } = {}) => [\n          ...stylesheet,\n          ...Array.from(cssRules).reduce(\n            (value, { selectorText = '', style = [] } = {}) =>\n              selectorText === ':root'\n                ? [...value, ...Array.from(style).filter((name) => name.startsWith(domain))]\n                : value,\n            [],\n          ),\n        ],\n        [],\n      );\n\n    keys.forEach((key) => (variables[camelcase(key.replace(domain, ''))] = style.getPropertyValue(key)));\n\n    return variables;\n  },\n\n  setVariable: (variable, value, domain = DOMAIN) => {\n    const { style } = document.querySelector(':root');\n\n    style.setProperty(`${domain}${variable}`, value);\n\n    // ! TODO: Should revisit this \"algo\"\n    // Theme.shadeColors();\n  },\n\n  shadeColors: () => {\n    const theme = Theme.get();\n\n    COLORS.filter((color) => theme[color] !== undefined).forEach((color) =>\n      MAGNITUDES.forEach((magnitude) =>\n        Theme.setVariable(`${color}-${magnitude}`, colorShade(theme[color], magnitude)),\n      ),\n    );\n  },\n};\n"],"mappings":";;;;;;AAAA;AACA;AAA+D;AAAA;AAAA;AAAA;AAAA;AAAA;AAExD,IAAMA,KAAK,GAAG;EACnBC,GAAG,EAAE,eAAqB;IAAA,IAApBC,MAAM,uEAAGC,aAAM;IACnB,IAAMC,KAAK,GAAGC,gBAAgB,CAACC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/D,IAAMC,SAAS,GAAG,CAAC,CAAC;IAEpB,IAAMC,IAAI,GAAGC,KAAK,CAACC,IAAI,CAACL,QAAQ,CAACM,WAAW,CAAC,CAC1CC,MAAM,CAAC,UAACC,UAAU;MAAA,OAAKA,UAAU,CAACC,IAAI,KAAK,IAAI,IAAID,UAAU,CAACC,IAAI,CAACC,UAAU,CAACC,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC;IAAA,EAAC,CACtGC,MAAM,CACL,UAACN,UAAU;MAAA,+EAAiB,CAAC,CAAC;QAAfO,QAAQ,QAARA,QAAQ;MAAA,oCAClBP,UAAU,sBACVJ,KAAK,CAACC,IAAI,CAACU,QAAQ,CAAC,CAACD,MAAM,CAC5B,UAACE,KAAK;QAAA,gFAAsC,CAAC,CAAC;UAAA,2BAApCC,YAAY;UAAZA,YAAY,mCAAG,EAAE;UAAA,oBAAEnB,KAAK;UAALA,KAAK,4BAAG,EAAE;QAAA,OACrCmB,YAAY,KAAK,OAAO,gCAChBD,KAAK,sBAAKZ,KAAK,CAACC,IAAI,CAACP,KAAK,CAAC,CAACS,MAAM,CAAC,UAACW,IAAI;UAAA,OAAKA,IAAI,CAACR,UAAU,CAACd,MAAM,CAAC;QAAA,EAAC,KACzEoB,KAAK;MAAA,GACX,EAAE,CACH;IAAA,CACF,EACD,EAAE,CACH;IAEHb,IAAI,CAACgB,OAAO,CAAC,UAACC,GAAG;MAAA,OAAMlB,SAAS,CAAC,IAAAmB,kBAAS,EAACD,GAAG,CAACE,OAAO,CAAC1B,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,GAAGE,KAAK,CAACyB,gBAAgB,CAACH,GAAG,CAAC;IAAA,CAAC,CAAC;IAEpG,OAAOlB,SAAS;EAClB,CAAC;EAEDsB,WAAW,EAAE,qBAACC,QAAQ,EAAET,KAAK,EAAsB;IAAA,IAApBpB,MAAM,uEAAGC,aAAM;IAC5C,4BAAkBG,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;MAAzCH,KAAK,yBAALA,KAAK;IAEbA,KAAK,CAAC4B,WAAW,WAAI9B,MAAM,SAAG6B,QAAQ,GAAIT,KAAK,CAAC;;IAEhD;IACA;EACF,CAAC;;EAEDW,WAAW,EAAE,uBAAM;IACjB,IAAMC,KAAK,GAAGlC,KAAK,CAACC,GAAG,EAAE;IAEzBkC,aAAM,CAACtB,MAAM,CAAC,UAACuB,KAAK;MAAA,OAAKF,KAAK,CAACE,KAAK,CAAC,KAAKC,SAAS;IAAA,EAAC,CAACZ,OAAO,CAAC,UAACW,KAAK;MAAA,OACjEE,iBAAU,CAACb,OAAO,CAAC,UAACc,SAAS;QAAA,OAC3BvC,KAAK,CAAC8B,WAAW,WAAIM,KAAK,cAAIG,SAAS,GAAI,IAAAC,mBAAU,EAACN,KAAK,CAACE,KAAK,CAAC,EAAEG,SAAS,CAAC,CAAC;MAAA,EAChF;IAAA,EACF;EACH;AACF,CAAC;AAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.0.90",
+  "version": "1.0.91",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",