@mirai/ui 1.1.0-d → 1.1.1

package/build/theme/default.theme.css

@@ -13,21 +13,19 @@
   --mirai-ui-font-bold: var(--mirai-ui-font);
   --mirai-ui-font-bold-weight: 700;
   --mirai-ui-font-size-headline-1: 32px;
-  --mirai-ui-line-height-headline-1: 38px;
+  --mirai-ui-line-height-headline-1: 40px;
   --mirai-ui-font-size-headline-2: 24px;
-  --mirai-ui-line-height-headline-2: 25px;
-  --mirai-ui-font-size-headline-3: 18px;
-  --mirai-ui-line-height-headline-3: 22px;
-  --mirai-ui-font-size-headline-4: 16px;
-  --mirai-ui-line-height-headline-4: 19px;
+  --mirai-ui-line-height-headline-2: 32px;
+  --mirai-ui-font-size-headline-3: 20px;
+  --mirai-ui-line-height-headline-3: 24px;
   --mirai-ui-font-size-paragraph: 16px;
-  --mirai-ui-line-height-paragraph: 22px;
+  --mirai-ui-line-height-paragraph: 20px;
   --mirai-ui-font-size-action: 14px;
-  --mirai-ui-line-height-action: 20px;
+  --mirai-ui-line-height-action: 18px;
   --mirai-ui-font-size-small: 12px;
-  --mirai-ui-line-height-small: 18px;
+  --mirai-ui-line-height-small: 16px;
   --mirai-ui-font-size-tiny: 10px;
-  --mirai-ui-line-height-tiny: 14px;
+  --mirai-ui-line-height-tiny: 12px;
   --mirai-ui-text-direction: ltr;
   --mirai-ui-text-align: left;
 
@@ -36,8 +34,8 @@
 
   --mirai-ui-content: #484848;
   --mirai-ui-content-background: #f6f6f6;
-  --mirai-ui-content-border: #e4e4e4;
-  --mirai-ui-content-light: #999999;
+  --mirai-ui-content-border: #dedede;
+  --mirai-ui-content-light: #6e6e6e;
   --mirai-ui-content-dark: #202020;
 
   --mirai-ui-accent: #3978c5;
@@ -46,31 +44,24 @@
   --mirai-ui-accent-light: #88aedc;
   --mirai-ui-accent-dark: #224876;
 
-  --mirai-ui-error: #cc003a;
-  --mirai-ui-error-background: #ffece5;
-  --mirai-ui-error-border: #ff8a7f;
-  --mirai-ui-error-light: #ff5c4c;
-  --mirai-ui-error-dark: #99002b;
-
-  --mirai-ui-warning: #ad5a00;
-  --mirai-ui-warning-background: #fff3cc;
-  --mirai-ui-warning-border: #ffce66;
-  --mirai-ui-warning-light: #ffad00;
-  --mirai-ui-warning-dark: #804200;
-
-  --mirai-ui-success: #067949;
-  --mirai-ui-success-background: #e7fde7;
-  --mirai-ui-success-border: #77f18e;
-  --mirai-ui-success-light: #14be34;
-  --mirai-ui-success-dark: #04492c;
-
-  --mirai-ui-info-background: #e6f8ff;
-  --mirai-ui-info-border: #6bc6fe;
-  --mirai-ui-info-light: #079ffd;
-  --mirai-ui-info: #005cb2;
-  --mirai-ui-info-dark: #003566;
+  --mirai-ui-error: #d32f2f;
+  --mirai-ui-error-background: #fdeded;
+  --mirai-ui-error-border: #fad6d6;
+
+  --mirai-ui-warning: #663c00;
+  --mirai-ui-warning-background: #fff4e5;
+  --mirai-ui-warning-border: #ffe5c2;
+
+  --mirai-ui-success: #1e4620;
+  --mirai-ui-success-background: #edf7ed;
+  --mirai-ui-success-border: #d5ecd5;
+
+  --mirai-ui-info: #014361;
+  --mirai-ui-info-background: #e6f5fd;
+  --mirai-ui-info-border: #c6e8fa;
 
   /* spacing */
+  --mirai-ui-space-XXS: 4px;
   --mirai-ui-space-XS: 8px;
   --mirai-ui-space-S: 12px;
   --mirai-ui-space-M: 16px;
@@ -90,7 +81,7 @@
 
   /* input */
   --mirai-ui-input-font-size: var(--mirai-ui-font-size-paragraph);
-  --mirai-ui-input-min-height: calc(var(--mirai-ui-space-XL) + var(--mirai-ui-space-XS));
+  --mirai-ui-input-min-height: var(--mirai-ui-space-XL);
 
   /* border */
   --mirai-ui-border-radius: 4px;
@@ -99,6 +90,14 @@
   /* shadow */
   --mirai-ui-shadow: 0 0 var(--mirai-ui-space-S) rgba(0, 0, 0, 0.1);
 
+  /* focus */
+  /* ! TODO: Nice to have */
+  /* --mirai-ui-focus-color: var(--mirai-ui-accent-dark); */
+  /* --mirai-ui-focus-shadow: 0 0 0 var(--mirai-ui-space-XXS) var(--mirai-ui-accent-border); */
+  --mirai-ui-focus-color: var(--mirai-ui-content);
+  --mirai-ui-focus-shadow: 0 0 0 var(--mirai-ui-space-XXS) var(--mirai-ui-content-border);
+  --mirai-ui-focus-shadow-error: 0 0 0 var(--mirai-ui-space-XXS) var(--mirai-ui-error-border);
+
   /* locale */
   --mirai-ui-row-direction: row;
 }
@@ -113,7 +112,9 @@
   --mirai-ui-checkbox-border-radius: var(--mirai-ui-border-radius);
   --mirai-ui-checkbox-checked: var(--mirai-ui-accent);
   --mirai-ui-checkbox-disabled: var(--mirai-ui-content-border);
-  --mirai-ui-checkbox-size: var(--mirai-ui-space-L);
+  --mirai-ui-checkbox-size: calc(var(--mirai-ui-space-M) + calc(var(--mirai-ui-space-XXS) / 2));
+  --mirai-ui-checkbox-size-mobile: var(--mirai-ui-space-L);
+
   /* Icon */
 
   /* Input */
@@ -136,7 +137,8 @@
   --mirai-ui-radio-border: var(--mirai-ui-content-light);
   --mirai-ui-radio-checked: var(--mirai-ui-accent);
   --mirai-ui-radio-disabled: var(--mirai-ui-content-border);
-  --mirai-ui-radio-size: var(--mirai-ui-space-L);
+  --mirai-ui-radio-size: var(--mirai-ui-checkbox-size);
+  --mirai-ui-radio-size-mobile: var(--mirai-ui-checkbox-size-mobile);
 
   /* ScrollView */
 
@@ -145,12 +147,12 @@
   /* Switch */
   --mirai-ui-switch-base: var(--mirai-ui-base);
   --mirai-ui-switch-border-color: var(--mirai-ui-content-light);
-  --mirai-ui-switch-border-size: calc(var(--mirai-ui-space-XS) / 4);
+  --mirai-ui-switch-border-size: var(--mirai-ui-space-XXS);
   --mirai-ui-switch-border-radius: var(--mirai-ui-space-L);
   --mirai-ui-switch-checked: var(--mirai-ui-accent);
   --mirai-ui-switch-disabled: var(--mirai-ui-content-border);
-  --mirai-ui-switch-color-hover: var(--mirai-ui-content);
-  --mirai-ui-switch-size: var(--mirai-ui-space-L);
+  --mirai-ui-switch-size: var(--mirai-ui-space-M);
+  --mirai-ui-switch-size-mobile: calc(var(--mirai-ui-space-L) - var(--mirai-ui-space-XXS));
 
   /* Text */
 
@@ -163,7 +165,6 @@
 :root {
   /* Action */
   --mirai-ui-action-color: var(--mirai-ui-accent);
-  --mirai-ui-action-color-active: var(--mirai-ui-content);
   --mirai-ui-action-color-disabled: var(--mirai-ui-content-light);
   --mirai-ui-action-font-weight: var(--mirai-ui-font-weight);
 
@@ -173,7 +174,6 @@
   --mirai-ui-button-busy-motion: calc(var(--mirai-ui-motion-expand) * 10);
   --mirai-ui-button-color: var(--mirai-ui-base);
   --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
-  --mirai-ui-button-color-hover: var(--mirai-ui-content);
   --mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
   --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
   --mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
@@ -205,7 +205,7 @@
 
   /* InputOption */
   --mirai-ui-input-option-disabled: var(--mirai-ui-content-light);
-  --mirai-ui-input-option-label-margin: var(--mirai-ui-space-S);
+  --mirai-ui-input-option-gap: var(--mirai-ui-space-XS);
   --mirai-ui-input-option-padding-y: var(--mirai-ui-space-S);
 
   /* InputSelect */
@@ -217,17 +217,17 @@
   --mirai-ui-input-text-focus: var(--mirai-ui-content);
   --mirai-ui-input-text-icon: var(--mirai-ui-font-size-headline-3);
   --mirai-ui-input-text-padding-x: var(--mirai-ui-space-M);
-  --mirai-ui-input-text-padding-y: var(--mirai-ui-space-S);
+  --mirai-ui-input-text-padding-y: var(--mirai-ui-space-XS);
   --mirai-ui-input-text-radius: var(--mirai-ui-border-radius);
 
   /* Menu */
   --mirai-ui-menu-base: var(--mirai-ui-base);
   --mirai-ui-menu-border-radius: var(--mirai-ui-border-radius);
-  --mirai-ui-menu-min-width: 192px;
+  --mirai-ui-menu-min-width: calc(var(--mirai-ui-breakpoint-S) / 2);
   --mirai-ui-menu-shadow: var(--mirai-ui-shadow);
   --mirai-ui-menu-option-disabled: var(--mirai-ui-content-border);
-  --mirai-ui-menu-option-hover-background: var(--mirai-ui-accent);
-  --mirai-ui-menu-option-hover-color: var(--mirai-ui-base);
+  --mirai-ui-menu-option-hover-background: var(--mirai-ui-content-background);
+  --mirai-ui-menu-option-hover-color: var(--mirai-ui-content);
   --mirai-ui-menu-option-padding: var(--mirai-ui-space-M);
 
   /* Modal */
@@ -252,9 +252,10 @@
   --mirai-ui-progress-motion: calc(var(--mirai-ui-motion-expand) * 3);
 
   /* Slider */
-  --mirai-ui-slider-background: var(--mirai-ui-content-dark);
+  --mirai-ui-slider-button: var(--mirai-ui-base);
+  --mirai-ui-slider-button-icon: var(--mirai-ui-content);
   --mirai-ui-slider-overlay: rgba(0, 0, 0, 0.66);
-  --mirai-ui-slider-color: var(--mirai-ui-base);
+  --mirai-ui-slider-overlay-color: var(--mirai-ui-base);
   --mirai-ui-slider-border-radius: var(--mirai-ui-border-radius);
 
   /* Table */
@@ -265,11 +266,11 @@
   --mirai-ui-table-color-disabled: var(--mirai-ui-content-border);
   --mirai-ui-table-padding-x: var(--mirai-ui-space-M);
   --mirai-ui-table-padding-y: var(--mirai-ui-space-M);
-  --mirai-ui-table-selected-background: var(--mirai-ui-accent-background);
-  --mirai-ui-table-selected-color: var(--mirai-ui-accent);
+  --mirai-ui-table-selected-background: var(--mirai-ui-content-background);
+  --mirai-ui-table-selected-color: var(--mirai-ui-content);
 
   /* Tooltip */
-  --mirai-ui-tooltip-background: rgba(0, 0, 0, 0.8);
+  --mirai-ui-tooltip-background: var(--mirai-ui-content-dark);
   --mirai-ui-tooltip-border-radius: var(--mirai-ui-border-radius);
   --mirai-ui-tooltip-color: var(--mirai-ui-base);
   --mirai-ui-tooltip-space: var(--mirai-ui-space-XS);

package/build/theme/theme.constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MAGNITUDES = exports.DOMAIN = exports.DIRECTION_TYPE = exports.DIRECTION = exports.COLORS = void 0;
+exports.MAGNITUDES = exports.DOMAIN = exports.DIRECTION_TYPE = exports.DIRECTION = exports.DEBOUNCE_TIMEOUT_CACHE = exports.COLORS = void 0;
 var _DIRECTION;
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -11,6 +11,8 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _ty
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var COLORS = ['accent'];
 exports.COLORS = COLORS;
+var DEBOUNCE_TIMEOUT_CACHE = 2000;
+exports.DEBOUNCE_TIMEOUT_CACHE = DEBOUNCE_TIMEOUT_CACHE;
 var DIRECTION_TYPE = {
   LEFT: 0,
   RIGHT: 1

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

@@ -1 +1 @@
-{"version":3,"file":"theme.constants.js","names":["COLORS","DIRECTION_TYPE","LEFT","RIGHT","DIRECTION","DOMAIN","MAGNITUDES"],"sources":["../../src/theme/theme.constants.js"],"sourcesContent":["const COLORS = ['accent'];\n\nconst DIRECTION_TYPE = {\n  LEFT: 0,\n  RIGHT: 1,\n};\nconst DIRECTION = {\n  [DIRECTION_TYPE.LEFT]: {\n    'text-align': 'left',\n    'text-direction': 'ltr',\n    'row-direction': 'row',\n  },\n  [DIRECTION_TYPE.RIGHT]: {\n    'text-align': 'right',\n    'text-direction': 'rtl',\n    'row-direction': 'row-reverse',\n  },\n};\nconst DOMAIN = '--mirai-ui-';\n\nconst MAGNITUDES = [400, 300, 200];\n\nexport { COLORS, DIRECTION, DIRECTION_TYPE, DOMAIN, MAGNITUDES };\n"],"mappings":";;;;;;;;;;;AAAA,IAAMA,MAAM,GAAG,CAAC,QAAQ,CAAC;AAAC;AAE1B,IAAMC,cAAc,GAAG;EACrBC,IAAI,EAAE,CAAC;EACPC,KAAK,EAAE;AACT,CAAC;AAAC;AACF,IAAMC,SAAS,iDACZH,cAAc,CAACC,IAAI,EAAG;EACrB,YAAY,EAAE,MAAM;EACpB,gBAAgB,EAAE,KAAK;EACvB,eAAe,EAAE;AACnB,CAAC,+BACAD,cAAc,CAACE,KAAK,EAAG;EACtB,YAAY,EAAE,OAAO;EACrB,gBAAgB,EAAE,KAAK;EACvB,eAAe,EAAE;AACnB,CAAC,cACF;AAAC;AACF,IAAME,MAAM,GAAG,aAAa;AAAC;AAE7B,IAAMC,UAAU,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;AAAC"}
+{"version":3,"file":"theme.constants.js","names":["COLORS","DEBOUNCE_TIMEOUT_CACHE","DIRECTION_TYPE","LEFT","RIGHT","DIRECTION","DOMAIN","MAGNITUDES"],"sources":["../../src/theme/theme.constants.js"],"sourcesContent":["const COLORS = ['accent'];\n\nconst DEBOUNCE_TIMEOUT_CACHE = 2000;\n\nconst DIRECTION_TYPE = {\n  LEFT: 0,\n  RIGHT: 1,\n};\nconst DIRECTION = {\n  [DIRECTION_TYPE.LEFT]: {\n    'text-align': 'left',\n    'text-direction': 'ltr',\n    'row-direction': 'row',\n  },\n  [DIRECTION_TYPE.RIGHT]: {\n    'text-align': 'right',\n    'text-direction': 'rtl',\n    'row-direction': 'row-reverse',\n  },\n};\nconst DOMAIN = '--mirai-ui-';\n\nconst MAGNITUDES = [400, 300, 200];\n\nexport { COLORS, DEBOUNCE_TIMEOUT_CACHE, DIRECTION, DIRECTION_TYPE, DOMAIN, MAGNITUDES };\n"],"mappings":";;;;;;;;;;;AAAA,IAAMA,MAAM,GAAG,CAAC,QAAQ,CAAC;AAAC;AAE1B,IAAMC,sBAAsB,GAAG,IAAI;AAAC;AAEpC,IAAMC,cAAc,GAAG;EACrBC,IAAI,EAAE,CAAC;EACPC,KAAK,EAAE;AACT,CAAC;AAAC;AACF,IAAMC,SAAS,iDACZH,cAAc,CAACC,IAAI,EAAG;EACrB,YAAY,EAAE,MAAM;EACpB,gBAAgB,EAAE,KAAK;EACvB,eAAe,EAAE;AACnB,CAAC,+BACAD,cAAc,CAACE,KAAK,EAAG;EACtB,YAAY,EAAE,OAAO;EACrB,gBAAgB,EAAE,KAAK;EACvB,eAAe,EAAE;AACnB,CAAC,cACF;AAAC;AACF,IAAME,MAAM,GAAG,aAAa;AAAC;AAE7B,IAAMC,UAAU,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;AAAC"}

package/build/theme/theme.js

@@ -1,5 +1,6 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,6 +11,11 @@ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArra
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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); }
@@ -19,6 +25,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 var Theme = {
   get: function get() {
     var domain = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _theme.DOMAIN;
+    var _ref = window || {},
+      _ref$Mirai = _ref.Mirai;
+    _ref$Mirai = _ref$Mirai === void 0 ? {} : _ref$Mirai;
+    var themeCache = _ref$Mirai.themeCache;
+    if (themeCache) return themeCache;
     var style = getComputedStyle(document.querySelector(':root'));
     var variables = {};
     var keys = Array.from(document.styleSheets).filter(function (stylesheet) {
@@ -29,14 +40,14 @@ var Theme = {
         return false;
       }
     }).reduce(function (stylesheet) {
-      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-        cssRules = _ref.cssRules;
+      var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+        cssRules = _ref2.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;
+        var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+          _ref3$selectorText = _ref3.selectorText,
+          selectorText = _ref3$selectorText === void 0 ? '' : _ref3$selectorText,
+          _ref3$style = _ref3.style,
+          style = _ref3$style === void 0 ? [] : _ref3$style;
         return selectorText === ':root' ? [].concat(_toConsumableArray(value), _toConsumableArray(Array.from(style).filter(function (name) {
           return name.startsWith(domain);
         }))) : value;
@@ -46,6 +57,12 @@ var Theme = {
       var _style$getPropertyVal;
       return variables[(0, _helpers.camelcase)(key.replace(domain, ''))] = (_style$getPropertyVal = style.getPropertyValue(key)) === null || _style$getPropertyVal === void 0 ? void 0 : _style$getPropertyVal.trim();
     });
+    window.Mirai = _objectSpread(_objectSpread({}, window.Mirai), {}, {
+      themeCache: variables
+    });
+    setTimeout(function () {
+      return Theme.clearCache();
+    }, _theme.DEBOUNCE_TIMEOUT_CACHE);
     return variables;
   },
   setVariable: function setVariable(variable, value) {
@@ -53,6 +70,7 @@ var Theme = {
     var _document$querySelect = document.querySelector(':root'),
       style = _document$querySelect.style;
     style.setProperty("".concat(domain).concat(variable), value);
+    Theme.clearCache();
 
     // ! TODO: Should revisit this "algo"
     // Theme.shadeColors();
@@ -77,13 +95,18 @@ var Theme = {
     var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _theme.DIRECTION_TYPE.LEFT;
     if (!Object.values(_theme.DIRECTION_TYPE).includes(direction)) return;
     var variables = _theme.DIRECTION[direction] || {};
-    Object.entries(variables).map(function (_ref3) {
-      var _ref4 = _slicedToArray(_ref3, 2),
-        key = _ref4[0],
-        value = _ref4[1];
+    Object.entries(variables).map(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        key = _ref5[0],
+        value = _ref5[1];
       return Theme.setVariable(key, value);
     });
     return direction;
+  },
+  clearCache: function clearCache() {
+    var _window;
+    if (!((_window = window) !== null && _window !== void 0 && _window.Mirai)) return;
+    window.Mirai.themeCache = undefined;
   }
 };
 exports.Theme = Theme;

package/build/theme/theme.js.map

@@ -1 +1 @@
-{"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","cssRules","reduce","value","selectorText","name","forEach","key","camelcase","replace","getPropertyValue","trim","setVariable","variable","setProperty","shadeColors","theme","COLORS","color","undefined","MAGNITUDES","magnitude","colorShade","getDirection","textDirection","DIRECTION","DIRECTION_TYPE","RIGHT","LEFT","setDirection","direction","Object","values","includes","entries","map"],"sources":["../../src/theme/theme.js"],"sourcesContent":["import { camelcase, colorShade } from './helpers';\nimport { COLORS, DIRECTION, DIRECTION_TYPE, 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) => {\n        try {\n          return (\n            (stylesheet.href === null || stylesheet.href.startsWith(window.location.origin)) &&\n            (stylesheet.cssRules ?? {})\n          );\n        } catch {\n          return false;\n        }\n      })\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)?.trim()));\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  getDirection: () => {\n    const { textDirection } = Theme.get();\n\n    return textDirection !== DIRECTION[DIRECTION_TYPE.RIGHT]['text-direction']\n      ? DIRECTION_TYPE.LEFT\n      : DIRECTION_TYPE.RIGHT;\n  },\n\n  setDirection: (direction = DIRECTION_TYPE.LEFT) => {\n    if (!Object.values(DIRECTION_TYPE).includes(direction)) return;\n\n    const variables = DIRECTION[direction] || {};\n    Object.entries(variables).map(([key, value]) => Theme.setVariable(key, value));\n\n    return direction;\n  },\n};\n"],"mappings":"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"}
+{"version":3,"file":"theme.js","names":["Theme","get","domain","DOMAIN","window","Mirai","themeCache","style","getComputedStyle","document","querySelector","variables","keys","Array","from","styleSheets","filter","stylesheet","href","startsWith","location","origin","cssRules","reduce","value","selectorText","name","forEach","key","camelcase","replace","getPropertyValue","trim","setTimeout","clearCache","DEBOUNCE_TIMEOUT_CACHE","setVariable","variable","setProperty","shadeColors","theme","COLORS","color","undefined","MAGNITUDES","magnitude","colorShade","getDirection","textDirection","DIRECTION","DIRECTION_TYPE","RIGHT","LEFT","setDirection","direction","Object","values","includes","entries","map"],"sources":["../../src/theme/theme.js"],"sourcesContent":["import { camelcase, colorShade } from './helpers';\nimport { COLORS, DEBOUNCE_TIMEOUT_CACHE, DIRECTION, DIRECTION_TYPE, DOMAIN, MAGNITUDES } from './theme.constants';\n\nexport const Theme = {\n  get: (domain = DOMAIN) => {\n    const { Mirai: { themeCache } = {} } = window || {};\n    if (themeCache) return themeCache;\n\n    const style = getComputedStyle(document.querySelector(':root'));\n    const variables = {};\n\n    const keys = Array.from(document.styleSheets)\n      .filter((stylesheet) => {\n        try {\n          return (\n            (stylesheet.href === null || stylesheet.href.startsWith(window.location.origin)) &&\n            (stylesheet.cssRules ?? {})\n          );\n        } catch {\n          return false;\n        }\n      })\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)?.trim()));\n\n    window.Mirai = { ...window.Mirai, themeCache: variables };\n    setTimeout(() => Theme.clearCache(), DEBOUNCE_TIMEOUT_CACHE);\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    Theme.clearCache();\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  getDirection: () => {\n    const { textDirection } = Theme.get();\n\n    return textDirection !== DIRECTION[DIRECTION_TYPE.RIGHT]['text-direction']\n      ? DIRECTION_TYPE.LEFT\n      : DIRECTION_TYPE.RIGHT;\n  },\n\n  setDirection: (direction = DIRECTION_TYPE.LEFT) => {\n    if (!Object.values(DIRECTION_TYPE).includes(direction)) return;\n\n    const variables = DIRECTION[direction] || {};\n    Object.entries(variables).map(([key, value]) => Theme.setVariable(key, value));\n\n    return direction;\n  },\n\n  clearCache: () => {\n    if (!window?.Mirai) return;\n\n    window.Mirai.themeCache = undefined;\n  },\n};\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.1.0-d",
+  "version": "1.1.1",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",
@@ -25,9 +25,9 @@
   },
   "dependencies": {
     "@mirai/locale": "^0.2",
+    "@react-icons/all-files": "https://github.com/react-icons/react-icons/releases/download/v5.0.1/react-icons-all-files-5.0.1.tgz",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-icons": "^4.10.1"
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@babel/cli": "7.19.3",
@@ -48,8 +48,7 @@
     "node": ">=18.18.0"
   },
   "resolutions": {
-    "@mirai/locale": "^0.2",
-    "react-icons": "^4.10.1"
+    "@mirai/locale": "^0.2"
   },
   "browserslist": {
     "production": [

package/build/primitives/Primitive/helpers/getTag.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getTag = void 0;
-var NATIVE_TAGS = [
-// -- PRIMITIVES -------------------------------------------------------------
-// <Input>
-'input', 'textarea',
-// <Select>
-'select', 'option',
-// -- COMPONENTS -------------------------------------------------------------
-// <Action>
-'a',
-// <Button>
-'button',
-// <Form>
-'form',
-// <Table>
-'table', 'thead', 'tbody', 'tr', 'th', 'td'];
-var getTag = function getTag() {
-  var tag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'primitive';
-  var isNative = NATIVE_TAGS.includes(tag);
-
-  // * Experimental
-  // if (tag === 'button' && props.type !== 'submit') isNative = false;
-
-  return isNative ? tag : "ui_".concat(tag);
-};
-exports.getTag = getTag;
-//# sourceMappingURL=getTag.js.map

package/build/primitives/Primitive/helpers/getTag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"getTag.js","names":["NATIVE_TAGS","getTag","tag","isNative","includes"],"sources":["../../../../src/primitives/Primitive/helpers/getTag.js"],"sourcesContent":["const NATIVE_TAGS = [\n  // -- PRIMITIVES -------------------------------------------------------------\n  // <Input>\n  'input',\n  'textarea',\n  // <Select>\n  'select',\n  'option',\n  // -- COMPONENTS -------------------------------------------------------------\n  // <Action>\n  'a',\n  // <Button>\n  'button',\n  // <Form>\n  'form',\n  // <Table>\n  'table',\n  'thead',\n  'tbody',\n  'tr',\n  'th',\n  'td',\n];\n\nexport const getTag = (\n  tag = 'primitive',\n  // * experimental\n  // props = {}\n) => {\n  let isNative = NATIVE_TAGS.includes(tag);\n\n  // * Experimental\n  // if (tag === 'button' && props.type !== 'submit') isNative = false;\n\n  return isNative ? tag : `ui_${tag}`;\n};\n"],"mappings":";;;;;;AAAA,IAAMA,WAAW,GAAG;AAClB;AACA;AACA,OAAO,EACP,UAAU;AACV;AACA,QAAQ,EACR,QAAQ;AACR;AACA;AACA,GAAG;AACH;AACA,QAAQ;AACR;AACA,MAAM;AACN;AACA,OAAO,EACP,OAAO,EACP,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAI,CACL;AAEM,IAAMC,MAAM,GAAG,SAATA,MAAM,GAId;EAAA,IAHHC,GAAG,uEAAG,WAAW;EAIjB,IAAIC,QAAQ,GAAGH,WAAW,CAACI,QAAQ,CAACF,GAAG,CAAC;;EAExC;EACA;;EAEA,OAAOC,QAAQ,GAAGD,GAAG,gBAASA,GAAG,CAAE;AACrC,CAAC;AAAC"}