@mirai/ui 1.1.9 → 1.1.11

package/build/primitives/Text/__tests__/__snapshots__/Text.test.js.snap

@@ -1,59 +1,129 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`primitive:<Text> inherit:className 1`] = `
+exports[`primitive:<Text> color prop:accent 1`] = `
 <DocumentFragment>
   <span
-    class="text paragraph mirai"
+    class="text accent paragraph"
   >
     Lorem Ipsum
   </span>
 </DocumentFragment>
 `;
 
-exports[`primitive:<Text> prop:accent 1`] = `
+exports[`primitive:<Text> color prop:accentDark 1`] = `
 <DocumentFragment>
   <span
-    class="text accent paragraph"
+    class="text accentDark paragraph"
   >
     Lorem Ipsum
   </span>
 </DocumentFragment>
 `;
 
-exports[`primitive:<Text> prop:action 1`] = `
+exports[`primitive:<Text> color prop:accentLight 1`] = `
 <DocumentFragment>
   <span
-    class="text action"
+    class="text accentLight paragraph"
   >
     Lorem Ipsum
   </span>
 </DocumentFragment>
 `;
 
-exports[`primitive:<Text> prop:bold 1`] = `
+exports[`primitive:<Text> color prop:dark 1`] = `
 <DocumentFragment>
   <span
-    class="text bold paragraph"
+    class="text dark paragraph"
   >
     Lorem Ipsum
   </span>
 </DocumentFragment>
 `;
 
-exports[`primitive:<Text> prop:capitalize 1`] = `
+exports[`primitive:<Text> color prop:error 1`] = `
 <DocumentFragment>
   <span
-    class="text capitalize paragraph"
+    class="text error paragraph"
   >
     Lorem Ipsum
   </span>
 </DocumentFragment>
 `;
 
-exports[`primitive:<Text> prop:error 1`] = `
+exports[`primitive:<Text> color prop:info 1`] = `
 <DocumentFragment>
   <span
-    class="text error paragraph"
+    class="text info paragraph"
+  >
+    Lorem Ipsum
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Text> color prop:light 1`] = `
+<DocumentFragment>
+  <span
+    class="text light paragraph"
+  >
+    Lorem Ipsum
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Text> color prop:success 1`] = `
+<DocumentFragment>
+  <span
+    class="text success paragraph"
+  >
+    Lorem Ipsum
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Text> color prop:warning 1`] = `
+<DocumentFragment>
+  <span
+    class="text warning paragraph"
+  >
+    Lorem Ipsum
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Text> inherit:className 1`] = `
+<DocumentFragment>
+  <span
+    class="text paragraph mirai"
+  >
+    Lorem Ipsum
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Text> prop:action 1`] = `
+<DocumentFragment>
+  <span
+    class="text action"
+  >
+    Lorem Ipsum
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Text> prop:bold 1`] = `
+<DocumentFragment>
+  <span
+    class="text bold paragraph"
+  >
+    Lorem Ipsum
+  </span>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Text> prop:capitalize 1`] = `
+<DocumentFragment>
+  <span
+    class="text capitalize paragraph"
   >
     Lorem Ipsum
   </span>
@@ -110,16 +180,6 @@ exports[`primitive:<Text> prop:headline 1`] = `
 </DocumentFragment>
 `;
 
-exports[`primitive:<Text> prop:lighten 1`] = `
-<DocumentFragment>
-  <span
-    class="text paragraph lighten"
-  >
-    Lorem Ipsum
-  </span>
-</DocumentFragment>
-`;
-
 exports[`primitive:<Text> prop:markdown 1`] = `
 <DocumentFragment>
   <span
@@ -150,16 +210,6 @@ exports[`primitive:<Text> prop:small 1`] = `
 </DocumentFragment>
 `;
 
-exports[`primitive:<Text> prop:success 1`] = `
-<DocumentFragment>
-  <span
-    class="text paragraph success"
-  >
-    Lorem Ipsum
-  </span>
-</DocumentFragment>
-`;
-
 exports[`primitive:<Text> prop:tag 1`] = `
 <DocumentFragment>
   <p
@@ -200,16 +250,6 @@ exports[`primitive:<Text> prop:upperCase 1`] = `
 </DocumentFragment>
 `;
 
-exports[`primitive:<Text> prop:warning 1`] = `
-<DocumentFragment>
-  <span
-    class="text paragraph warning"
-  >
-    Lorem Ipsum
-  </span>
-</DocumentFragment>
-`;
-
 exports[`primitive:<Text> prop:wide 1`] = `
 <DocumentFragment>
   <span

package/build/primitives/Text/helpers/color.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.color = void 0;
+var _TextModule = _interopRequireDefault(require("../Text.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var color = function color() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    accent = _ref.accent,
+    accentDark = _ref.accentDark,
+    accentLight = _ref.accentLight,
+    dark = _ref.dark,
+    error = _ref.error,
+    info = _ref.info,
+    light = _ref.light,
+    success = _ref.success,
+    warning = _ref.warning;
+  return accent ? _TextModule.default.accent : accentDark ? _TextModule.default.accentDark : accentLight ? _TextModule.default.accentLight : dark ? _TextModule.default.dark : error ? _TextModule.default.error : info ? _TextModule.default.info : light ? _TextModule.default.light : success ? _TextModule.default.success : warning ? _TextModule.default.warning : undefined;
+};
+exports.color = color;
+//# sourceMappingURL=color.js.map

package/build/primitives/Text/helpers/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":["color","accent","accentDark","accentLight","dark","error","info","light","success","warning","style","undefined"],"sources":["../../../../src/primitives/Text/helpers/color.js"],"sourcesContent":["import style from '../Text.module.css';\n\nexport const color = ({ accent, accentDark, accentLight, dark, error, info, light, success, warning } = {}) =>\n  accent\n    ? style.accent\n    : accentDark\n    ? style.accentDark\n    : accentLight\n    ? style.accentLight\n    : dark\n    ? style.dark\n    : error\n    ? style.error\n    : info\n    ? style.info\n    : light\n    ? style.light\n    : success\n    ? style.success\n    : warning\n    ? style.warning\n    : undefined;\n"],"mappings":";;;;;;AAAA;AAAuC;AAEhC,IAAMA,KAAK,GAAG,SAARA,KAAK;EAAA,+EAAsF,CAAC,CAAC;IAAlFC,MAAM,QAANA,MAAM;IAAEC,UAAU,QAAVA,UAAU;IAAEC,WAAW,QAAXA,WAAW;IAAEC,IAAI,QAAJA,IAAI;IAAEC,KAAK,QAALA,KAAK;IAAEC,IAAI,QAAJA,IAAI;IAAEC,KAAK,QAALA,KAAK;IAAEC,OAAO,QAAPA,OAAO;IAAEC,OAAO,QAAPA,OAAO;EAAA,OACjGR,MAAM,GACFS,mBAAK,CAACT,MAAM,GACZC,UAAU,GACVQ,mBAAK,CAACR,UAAU,GAChBC,WAAW,GACXO,mBAAK,CAACP,WAAW,GACjBC,IAAI,GACJM,mBAAK,CAACN,IAAI,GACVC,KAAK,GACLK,mBAAK,CAACL,KAAK,GACXC,IAAI,GACJI,mBAAK,CAACJ,IAAI,GACVC,KAAK,GACLG,mBAAK,CAACH,KAAK,GACXC,OAAO,GACPE,mBAAK,CAACF,OAAO,GACbC,OAAO,GACPC,mBAAK,CAACD,OAAO,GACbE,SAAS;AAAA;AAAC"}

package/build/primitives/Text/helpers/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _color = require("./color");
+Object.keys(_color).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _color[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _color[key];
+    }
+  });
+});
 var _parseMarkdown = require("./parseMarkdown");
 Object.keys(_parseMarkdown).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/build/primitives/Text/helpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/primitives/Text/helpers/index.js"],"sourcesContent":["export * from './parseMarkdown';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/primitives/Text/helpers/index.js"],"sourcesContent":["export * from './color';\nexport * from './parseMarkdown';\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/default.theme.css

@@ -1,9 +1,3 @@
-/*
-  ! TODO: Review state: {namespace}-{subject}-{property}-{state}
-  EX: --mirai-ui-button-background-hover:
-      --mirai-ui-button-secondary-background-hover
-*/
-
 :root {
   /* typography */
   --mirai-ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
@@ -47,18 +41,26 @@
   --mirai-ui-error: #d32f2f;
   --mirai-ui-error-background: #fdeded;
   --mirai-ui-error-border: #fad6d6;
+  --mirai-ui-error-light: #e58282;
+  --mirai-ui-error-dark: #7f1c1c;
 
   --mirai-ui-warning: #663c00;
   --mirai-ui-warning-background: #fff4e5;
   --mirai-ui-warning-border: #ffe5c2;
+  --mirai-ui-warning-light: #a38a66;
+  --mirai-ui-warning-dark: #3d2400;
 
   --mirai-ui-success: #1e4620;
   --mirai-ui-success-background: #edf7ed;
   --mirai-ui-success-border: #d5ecd5;
+  --mirai-ui-success-light: #789079;
+  --mirai-ui-success-dark: #122a13;
 
   --mirai-ui-info: #014361;
   --mirai-ui-info-background: #e6f5fd;
   --mirai-ui-info-border: #c6e8fa;
+  --mirai-ui-info-light: #678ea0;
+  --mirai-ui-info-dark: #01283a;
 
   /* spacing */
   --mirai-ui-space-XXS: 4px;
@@ -92,8 +94,10 @@
 
   /* focus */
   --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-shadow-error: 0 0 0 var(--mirai-ui-space-XXS) var(--mirai-ui-error-border);
+  --mirai-ui-focus-color-shadow: var(--mirai-ui-accent-border);
+  --mirai-ui-focus-width: var(--mirai-ui-space-XXS);
+  --mirai-ui-focus-shadow: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-focus-color-shadow);
+  --mirai-ui-focus-shadow-error: 0 0 0 var(--mirai-ui-focus-width) var(--mirai-ui-error-border);
 
   /* locale */
   --mirai-ui-row-direction: row;
@@ -173,14 +177,16 @@
   --mirai-ui-button-color-active: rgba(255, 255, 255, 0.2);
   --mirai-ui-button-disabled-background: var(--mirai-ui-content-border);
   --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
-  --mirai-ui-button-focus-color: var(--mirai-ui-accent-dark);
-  --mirai-ui-button-focus-shadow: 0 0 0 var(--mirai-ui-space-XXS) var(--mirai-ui-accent-border);
+  --mirai-ui-button-focus-color: var(--mirai-ui-focus-color);
+  --mirai-ui-button-focus-color-shadow: var(--mirai-ui-focus-color-shadow);
   --mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
   --mirai-ui-button-padding-x: var(--mirai-ui-space-L);
   --mirai-ui-button-padding-y: var(--mirai-ui-space-S);
   --mirai-ui-button-radius: var(--mirai-ui-border-radius);
   --mirai-ui-button-secondary-background: var(--mirai-ui-base);
-  --mirai-ui-button-secondary-color-active: var(--mirai-ui-accent-border);
+  --mirai-ui-button-secondary-color: var(--mirai-ui-button-background);
+  --mirai-ui-button-secondary-focus-color: var(--mirai-ui-button-focus-color);
+  --mirai-ui-button-secondary-focus-color-shadow: var(--mirai-ui-focus-color-shadow);
   --mirai-ui-button-squared: calc(var(--mirai-ui-space-M) * 2);
   --mirai-ui-button-transparent-background-active: var(--mirai-ui-accent-background);
   --mirai-ui-button-transparent-color: var(--mirai-ui-content);
@@ -286,17 +292,16 @@
   50%,
   100% {
     background-color: var(--mirai-ui-button-color-active);
-    background-color: var();
   }
 }
 
 @keyframes mirai-button-secondary-busy {
   0% {
-    background-color: var(--mirai-ui-button-background);
+    background-color: var(--mirai-ui-button-secondary-background);
   }
   50%,
   100% {
-    background-color: var(--mirai-ui-button-secondary-color-active);
+    background-color: var(--mirai-ui-button-secondary-color);
   }
 }
 

package/package.json

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