npm - @mirai/ui - Versions diffs - 1.0.19 → 1.0.22 - Mend

@mirai/ui 1.0.19 → 1.0.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/build/theme/default.theme.css CHANGED Viewed

@@ -1,42 +1,61 @@
 :root {
   /* typography */
-  --mirai-ui-font: Helvetica;
-  --mirai-ui-input-font: Helvetica;
+  --mirai-ui-font: Arial, Regular;
+  --mirai-ui-input-font: Arial, Regular;
   --mirai-ui-font-weight: 400;
-  --mirai-ui-font-bold: Helvetica;
+  --mirai-ui-font-bold: Arial, Regular;
   --mirai-ui-font-bold-weight: 700;
-  --mirai-ui-font-size-headline: 24px;
-  --mirai-ui-font-size-paragraph: 16px;
-  --mirai-ui-font-size-action: 15px;
-  --mirai-ui-font-size-small: 11px;
-  --mirai-ui-input-font-size: 16px;
+  --mirai-ui-font-size-headline: 18px;
+  --mirai-ui-font-size-subheadline: 16px;
+  --mirai-ui-font-size-paragraph: 14px;
+  --mirai-ui-font-size-action: 14px;
+  --mirai-ui-font-size-small: 12px;
+  --mirai-ui-input-font-size: 14px;
+  --mirai-ui-line-height: 24px;
   --mirai-ui-text-direction: ltr;
   --mirai-ui-text-align: left;
   /* palette */
   --mirai-ui-base: #ffffff;
   /* !TODO: Change to -text ------------------------------------------------- */
-  --mirai-ui-content: #202020;
-  --mirai-ui-content-400: #5f6368;
-  --mirai-ui-content-300: #d3d3d3;
+  --mirai-ui-content: #484848;
+  --mirai-ui-content-background: #f6f6f6;
+  --mirai-ui-content-border: #e4e4e4;
+  --mirai-ui-content-dark: #202020;
+  --mirai-ui-content-light: #999999;
   /* !TODO ------------------------------------------------------------------ */
   --mirai-ui-accent: #3978c5;
-  --mirai-ui-accent-400: #61a0ed;
-  --mirai-ui-accent-300: #89c8ff;
-  --mirai-ui-accent-200: #edffff;
-  --mirai-ui-error: #e04646;
-  --mirai-ui-error-300: #ff9696;
-  --mirai-ui-success: #5fb560;
-  --mirai-ui-success-300: #afffb0;
+  --mirai-ui-accent-background: #e9f1fc;
+  --mirai-ui-accent-border: #b0c9e8;
+  --mirai-ui-accent-dark: #224876;
+  --mirai-ui-accent-light: #88aedc;
+  --mirai-ui-error: #d14343;
+  --mirai-ui-error-background: #fdf4f4;
+  --mirai-ui-error-border: #f4b6b6;
+  --mirai-ui-error-dark: #7d2828;
+  --mirai-ui-error-light: #ee9191;
+  --mirai-ui-success: #52bd94;
+  --mirai-ui-success-background: #f5fbf8;
+  --mirai-ui-success-border: #dcf2ea;
+  --mirai-ui-success-dark: #317159;
+  --mirai-ui-success-light: #a3e6cd;
+  --mirai-ui-warning: #ffb020;
+  --mirai-ui-warning-background: #fffaf1;
+  --mirai-ui-warning-border: #ffdfa6;
+  --mirai-ui-warning-dark: #66460d;
+  --mirai-ui-warning-light: #ffd079;
   /* spacing */
   --mirai-ui-space-XS: 8px;
   --mirai-ui-space-S: 12px;
   --mirai-ui-space-M: 16px;
   --mirai-ui-space-L: 24px;
-  --mirai-ui-space-XL: 32px;
-  --mirai-ui-space-XXL: 56px;
+  --mirai-ui-space-XL: 48px;
+  --mirai-ui-space-XXL: 64px;
   /* layer */
   --mirai-ui-layer-S: 0;

package/build/theme/theme.js CHANGED Viewed

@@ -20,7 +20,7 @@ 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 COLORS = ['accent'];
 var MAGNITUDES = [400, 300, 200];
 var Theme = {
   get: function get() {

package/build/theme/theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"],"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"}
1	+ {"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'];\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"],"mappings":";;;;;;;AAEA;;;;;;;;;;;;;;AAFA,IAAMA,UAAU,GAAG,aAAnB;AAIA,IAAMC,MAAM,GAAG,CAAC,QAAD,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"}

package/package.json CHANGED Viewed

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