@mirai/ui 1.0.17 → 1.0.18

package/build/theme/default.theme.css

@@ -22,14 +22,8 @@
   /* !TODO ------------------------------------------------------------------ */
 
   --mirai-ui-accent: #3978c5;
-  --mirai-ui-accent-400: #609ae0;
-  --mirai-ui-accent-300: #b7d3f9;
-  --mirai-ui-accent-200: #e5eefa;
-
   --mirai-ui-error: #e04646;
-  --mirai-ui-error-400: #eccccc;
   --mirai-ui-success: #5fb560;
-  --mirai-ui-success-400: #c6e7c6;
 
   /* spacing */
   --mirai-ui-space-XS: 8px;

package/build/theme/helpers/colorShade.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.colorShade = void 0;
+var R = 0;
+var G = 8;
+var B = 16;
+var SCALE = {
+  400: 40,
+  300: 80,
+  200: 180
+};
+
+var colorShade = function colorShade() {
+  var hexColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#000000';
+  var magnitude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  if (!hexColor.charAt(0) === '#' || hexColor.length !== 7) return hexColor;
+  var decimalColor = parseInt(hexColor.slice(1), 16);
+
+  var range = function range(value) {
+    return value < 0 ? 0 : value > 255 ? 255 : value;
+  };
+
+  return '#' + [R, G, B].map(function (item) {
+    return range((decimalColor >> item & 0xff) + (SCALE[magnitude] || 0)) << item;
+  }).reduce(function (previous, current) {
+    return previous + current;
+  }, 0).toString(16).padStart(6, '0');
+};
+
+exports.colorShade = colorShade;
+//# sourceMappingURL=colorShade.js.map

package/build/theme/helpers/colorShade.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorShade.js","names":["R","G","B","SCALE","colorShade","hexColor","magnitude","charAt","length","decimalColor","parseInt","slice","range","value","map","item","reduce","previous","current","toString","padStart"],"sources":["../../../src/theme/helpers/colorShade.js"],"sourcesContent":["const R = 0;\nconst G = 8;\nconst B = 16;\n\nconst SCALE = {\n  400: 40,\n  300: 80,\n  200: 180,\n};\n\nexport const colorShade = (hexColor = '#000000', magnitude = 0) => {\n  if (!hexColor.charAt(0) === '#' || hexColor.length !== 7) return hexColor;\n\n  const decimalColor = parseInt(hexColor.slice(1), 16);\n  const range = (value) => (value < 0 ? 0 : value > 255 ? 255 : value);\n\n  return (\n    '#' +\n    [R, G, B]\n      .map((item) => range(((decimalColor >> item) & 0xff) + (SCALE[magnitude] || 0)) << item)\n      .reduce((previous, current) => previous + current, 0)\n      .toString(16)\n      .padStart(6, '0')\n  );\n};\n"],"mappings":";;;;;;AAAA,IAAMA,CAAC,GAAG,CAAV;AACA,IAAMC,CAAC,GAAG,CAAV;AACA,IAAMC,CAAC,GAAG,EAAV;AAEA,IAAMC,KAAK,GAAG;EACZ,KAAK,EADO;EAEZ,KAAK,EAFO;EAGZ,KAAK;AAHO,CAAd;;AAMO,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAyC;EAAA,IAAxCC,QAAwC,uEAA7B,SAA6B;EAAA,IAAlBC,SAAkB,uEAAN,CAAM;EACjE,IAAI,CAACD,QAAQ,CAACE,MAAT,CAAgB,CAAhB,CAAD,KAAwB,GAAxB,IAA+BF,QAAQ,CAACG,MAAT,KAAoB,CAAvD,EAA0D,OAAOH,QAAP;EAE1D,IAAMI,YAAY,GAAGC,QAAQ,CAACL,QAAQ,CAACM,KAAT,CAAe,CAAf,CAAD,EAAoB,EAApB,CAA7B;;EACA,IAAMC,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;IAAA,OAAYA,KAAK,GAAG,CAAR,GAAY,CAAZ,GAAgBA,KAAK,GAAG,GAAR,GAAc,GAAd,GAAoBA,KAAhD;EAAA,CAAd;;EAEA,OACE,MACA,CAACb,CAAD,EAAIC,CAAJ,EAAOC,CAAP,EACGY,GADH,CACO,UAACC,IAAD;IAAA,OAAUH,KAAK,CAAC,CAAEH,YAAY,IAAIM,IAAjB,GAAyB,IAA1B,KAAmCZ,KAAK,CAACG,SAAD,CAAL,IAAoB,CAAvD,CAAD,CAAL,IAAoES,IAA9E;EAAA,CADP,EAEGC,MAFH,CAEU,UAACC,QAAD,EAAWC,OAAX;IAAA,OAAuBD,QAAQ,GAAGC,OAAlC;EAAA,CAFV,EAEqD,CAFrD,EAGGC,QAHH,CAGY,EAHZ,EAIGC,QAJH,CAIY,CAJZ,EAIe,GAJf,CAFF;AAQD,CAdM"}

package/build/theme/helpers/index.js

@@ -16,4 +16,17 @@ Object.keys(_camelcase).forEach(function (key) {
     }
   });
 });
+
+var _colorShade = require("./colorShade");
+
+Object.keys(_colorShade).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _colorShade[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _colorShade[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/build/theme/helpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/theme/helpers/index.js"],"sourcesContent":["export * from './camelcase';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/theme/helpers/index.js"],"sourcesContent":["export * from './camelcase';\nexport * from './colorShade';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AACA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/theme/theme.js

@@ -20,6 +20,8 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 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', 'error', 'success'];
+var MAGNITUDES = [400, 300, 200];
 var Theme = {
   get: function get() {
     var domain = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : VAR_DOMAIN;
@@ -47,7 +49,19 @@ var Theme = {
         style = _document$querySelect.style;
 
     style.setProperty("".concat(domain).concat(variable), value);
+    Theme.shadeColors();
+  },
+  shadeColors: function shadeColors() {
+    var theme = Theme.get();
+    COLORS.filter(function (color) {
+      return theme[color] !== undefined;
+    }).forEach(function (color) {
+      return MAGNITUDES.forEach(function (magnitude) {
+        return Theme.setVariable("".concat(color, "-").concat(magnitude), (0, _helpers.colorShade)(theme[color], magnitude));
+      });
+    });
   }
 };
 exports.Theme = Theme;
+Theme.shadeColors();
 //# sourceMappingURL=theme.js.map

package/build/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":["VAR_DOMAIN","Theme","get","domain","style","getComputedStyle","document","querySelector","variables","styleSheets","forEach","stylesheet","cssRules","filter","rule","type","name","includes","replace","getPropertyValue","trim","setVariable","variable","value","setProperty"],"sources":["../../src/theme/theme.js"],"sourcesContent":["const VAR_DOMAIN = '--mirai-ui-';\n\nimport { camelcase } from './helpers';\n\nexport const Theme = {\n  get: (domain = VAR_DOMAIN) => {\n    const style = getComputedStyle(document.querySelector(':root'));\n\n    const variables = {};\n    [...document.styleSheets].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((name) => (variables[camelcase(name.replace(domain, ''))] = style.getPropertyValue(name).trim()));\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};\n"],"mappings":";;;;;;;AAEA;;;;;;;;;;;;;;AAFA,IAAMA,UAAU,GAAG,aAAnB;AAIO,IAAMC,KAAK,GAAG;EACnBC,GAAG,EAAE,eAAyB;IAAA,IAAxBC,MAAwB,uEAAfH,UAAe;IAC5B,IAAMI,KAAK,GAAGC,gBAAgB,CAACC,QAAQ,CAACC,aAAT,CAAuB,OAAvB,CAAD,CAA9B;IAEA,IAAMC,SAAS,GAAG,EAAlB;;IACA,mBAAIF,QAAQ,CAACG,WAAb,EAA0BC,OAA1B,CAAkC,UAACC,UAAD,EAAgB;MAChD,mBAAIA,UAAU,CAACC,QAAf,EACGC,MADH,CACU,UAACC,IAAD;QAAA,OAAUA,IAAI,CAACC,IAAL,KAAc,CAAxB;MAAA,CADV,EAEGL,OAFH,CAEW,UAACI,IAAD,EAAU;QACjB,mBAAIA,IAAI,CAACV,KAAT,EACGS,MADH,CACU,UAACG,IAAD;UAAA,OAAUA,IAAI,CAACC,QAAL,CAAcd,MAAd,CAAV;QAAA,CADV,EAEGO,OAFH,CAEW,UAACM,IAAD;UAAA,OAAWR,SAAS,CAAC,wBAAUQ,IAAI,CAACE,OAAL,CAAaf,MAAb,EAAqB,EAArB,CAAV,CAAD,CAAT,GAAiDC,KAAK,CAACe,gBAAN,CAAuBH,IAAvB,EAA6BI,IAA7B,EAA5D;QAAA,CAFX;MAGD,CANH;IAOD,CARD;;IAUA,OAAOZ,SAAP;EACD,CAhBkB;EAkBnBa,WAAW,EAAE,qBAACC,QAAD,EAAWC,KAAX,EAA0C;IAAA,IAAxBpB,MAAwB,uEAAfH,UAAe;;IACrD,4BAAkBM,QAAQ,CAACC,aAAT,CAAuB,OAAvB,CAAlB;IAAA,IAAQH,KAAR,yBAAQA,KAAR;;IAEAA,KAAK,CAACoB,WAAN,WAAqBrB,MAArB,SAA8BmB,QAA9B,GAA0CC,KAA1C;EACD;AAtBkB,CAAd"}
+{"version":3,"file":"theme.js","names":["VAR_DOMAIN","COLORS","MAGNITUDES","Theme","get","domain","style","getComputedStyle","document","querySelector","variables","styleSheets","forEach","stylesheet","cssRules","filter","rule","type","name","includes","replace","getPropertyValue","trim","setVariable","variable","value","setProperty","shadeColors","theme","color","undefined","magnitude"],"sources":["../../src/theme/theme.js"],"sourcesContent":["const VAR_DOMAIN = '--mirai-ui-';\n\nimport { camelcase, colorShade } from './helpers';\n\nconst COLORS = ['accent', 'error', 'success'];\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].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((name) => (variables[camelcase(name.replace(domain, ''))] = style.getPropertyValue(name).trim()));\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\nTheme.shadeColors();\n"],"mappings":";;;;;;;AAEA;;;;;;;;;;;;;;AAFA,IAAMA,UAAU,GAAG,aAAnB;AAIA,IAAMC,MAAM,GAAG,CAAC,QAAD,EAAW,OAAX,EAAoB,SAApB,CAAf;AACA,IAAMC,UAAU,GAAG,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX,CAAnB;AAEO,IAAMC,KAAK,GAAG;EACnBC,GAAG,EAAE,eAAyB;IAAA,IAAxBC,MAAwB,uEAAfL,UAAe;IAC5B,IAAMM,KAAK,GAAGC,gBAAgB,CAACC,QAAQ,CAACC,aAAT,CAAuB,OAAvB,CAAD,CAA9B;IAEA,IAAMC,SAAS,GAAG,EAAlB;;IACA,mBAAIF,QAAQ,CAACG,WAAb,EAA0BC,OAA1B,CAAkC,UAACC,UAAD,EAAgB;MAChD,mBAAIA,UAAU,CAACC,QAAf,EACGC,MADH,CACU,UAACC,IAAD;QAAA,OAAUA,IAAI,CAACC,IAAL,KAAc,CAAxB;MAAA,CADV,EAEGL,OAFH,CAEW,UAACI,IAAD,EAAU;QACjB,mBAAIA,IAAI,CAACV,KAAT,EACGS,MADH,CACU,UAACG,IAAD;UAAA,OAAUA,IAAI,CAACC,QAAL,CAAcd,MAAd,CAAV;QAAA,CADV,EAEGO,OAFH,CAEW,UAACM,IAAD;UAAA,OAAWR,SAAS,CAAC,wBAAUQ,IAAI,CAACE,OAAL,CAAaf,MAAb,EAAqB,EAArB,CAAV,CAAD,CAAT,GAAiDC,KAAK,CAACe,gBAAN,CAAuBH,IAAvB,EAA6BI,IAA7B,EAA5D;QAAA,CAFX;MAGD,CANH;IAOD,CARD;;IAUA,OAAOZ,SAAP;EACD,CAhBkB;EAkBnBa,WAAW,EAAE,qBAACC,QAAD,EAAWC,KAAX,EAA0C;IAAA,IAAxBpB,MAAwB,uEAAfL,UAAe;;IACrD,4BAAkBQ,QAAQ,CAACC,aAAT,CAAuB,OAAvB,CAAlB;IAAA,IAAQH,KAAR,yBAAQA,KAAR;;IAEAA,KAAK,CAACoB,WAAN,WAAqBrB,MAArB,SAA8BmB,QAA9B,GAA0CC,KAA1C;IAEAtB,KAAK,CAACwB,WAAN;EACD,CAxBkB;EA0BnBA,WAAW,EAAE,uBAAM;IACjB,IAAMC,KAAK,GAAGzB,KAAK,CAACC,GAAN,EAAd;IAEAH,MAAM,CAACc,MAAP,CAAc,UAACc,KAAD;MAAA,OAAWD,KAAK,CAACC,KAAD,CAAL,KAAiBC,SAA5B;IAAA,CAAd,EAAqDlB,OAArD,CAA6D,UAACiB,KAAD;MAAA,OAC3D3B,UAAU,CAACU,OAAX,CAAmB,UAACmB,SAAD;QAAA,OACjB5B,KAAK,CAACoB,WAAN,WAAqBM,KAArB,cAA8BE,SAA9B,GAA2C,yBAAWH,KAAK,CAACC,KAAD,CAAhB,EAAyBE,SAAzB,CAA3C,CADiB;MAAA,CAAnB,CAD2D;IAAA,CAA7D;EAKD;AAlCkB,CAAd;;AAqCP5B,KAAK,CAACwB,WAAN"}

package/package.json

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