@mirai/core 0.3.292 → 0.3.293

package/build/components/Deals/Deals.module.css

@@ -1,9 +1,3 @@
-:root {
-  --mirai-deals-modal-z-index: 601;
-  --mirai-deals-notification-max-width: calc(var(--mirai-ui-calendar-cell) * 14 + var(--mirai-ui-calendar-padding) * 2);
-  --mirai-ui-modal-layer: var(--mirai-deals-modal-z-index);
-}
-
 .action {
   color: var(--mirai-ui-content-light);
   display: flex;
@@ -98,7 +92,7 @@
   }
 
   .cta {
-    height: var(--mirai-finder-field-height);
+    height: var(--mirai-field-height);
   }
 }
 

package/build/components/Finder/Finder.module.css

@@ -1,16 +1,3 @@
-:root {
-  /* finder */
-  --mirai-finder-background: var(--mirai-ui-base);
-  --mirai-finder-border: var(--mirai-ui-input-text-border);
-  --mirai-finder-border-color: var(--mirai-ui-content-border);
-  --mirai-finder-border-radius: var(--mirai-ui-border-radius);
-  --mirai-finder-gap: var(--mirai-ui-space-XXS);
-  --mirai-finder-padding: var(--mirai-ui-space-S);
-
-  --mirai-finder-field-custom-height: calc(var(--mirai-finder-field-height) * 1);
-  --mirai-finder-modal-content-max-height: calc(100vh - calc(var(--mirai-ui-space-XXL) + var(--mirai-ui-space-XL)));
-}
-
 .finder {
   border-radius: var(--mirai-finder-border-radius);
   gap: var(--mirai-finder-gap);
@@ -35,19 +22,19 @@
 }
 
 .field {
-  height: var(--mirai-finder-field-custom-height);
+  height: var(--mirai-finder-field-height);
 }
 
 .button {
   border-radius: var(--mirai-finder-border-radius) !important;
-  height: var(--mirai-finder-field-custom-height);
+  height: var(--mirai-finder-field-height);
 }
 
 .button.withIcon {
-  max-height: var(--mirai-finder-field-custom-height);
-  max-width: var(--mirai-finder-field-custom-height);
-  min-height: var(--mirai-finder-field-custom-height);
-  min-width: var(--mirai-finder-field-custom-height);
+  max-height: var(--mirai-finder-field-height);
+  max-width: var(--mirai-finder-field-height);
+  min-height: var(--mirai-finder-field-height);
+  min-width: var(--mirai-finder-field-height);
   padding: 0 !important;
 }
 
@@ -63,7 +50,7 @@
 }
 
 .compact .icon {
-  color: var(--mirai-finder-field-icon-color);
+  color: var(--mirai-field-icon-color);
 }
 
 .compact .textEllipsis {
@@ -129,7 +116,7 @@
   }
 
   .finder:not(.column) .separator {
-    height: var(--mirai-finder-field-custom-height);
+    height: var(--mirai-finder-field-height);
     width: var(--mirai-ui-border-width);
   }
 

package/build/components/Finder/components/Calendar/Calendar.module.css

@@ -1,7 +1,3 @@
-:root {
-  --mirai-finder-calendar-padding: var(--mirai-ui-space-M);
-}
-
 .footer {
   border-top: solid 1px var(--mirai-ui-content-border);
   padding: var(--mirai-finder-calendar-padding);

package/build/components/Finder/components/Places/Places.module.css

@@ -1,13 +1,3 @@
-:root {
-  --mirai-places-item-height: 32px;
-  --mirai-places-item-width: 300px;
-  --mirai-places-item-background-selected: var(--mirai-ui-accent);
-  --mirai-places-item-color-selected: var(--mirai-ui-base);
-  /*  */
-  --mirai-places-padding: var(--mirai-ui-space-M);
-  --mirai-places-items-per-column: 18;
-}
-
 .footer {
   padding: var(--mirai-places-padding);
   border-top: solid 1px var(--mirai-ui-content-border);

package/build/components/Header/Header.module.css

@@ -1,11 +1,3 @@
-:root {
-  --mirai-header-accent: var(--mirai-ui-accent);
-  --mirai-header-content: var(--mirai-ui-content);
-  --mirai-header-content-background: var(--mirai-ui-base);
-  --mirai-header-content-border: var(--mirai-ui-content-border);
-  --mirai-header-content-light: var(--mirai-ui-content-light);
-}
-
 .header {
   width: 100vw;
 }

package/build/components/__shared__/Card/Card.module.css

@@ -1,7 +1,3 @@
-:root {
-  --mirai-card-image-height: 208px;
-}
-
 .cards {
   gap: var(--mirai-ui-space-M);
 }

package/build/components/__shared__/Field/Field.module.css

@@ -1,18 +1,3 @@
-:root {
-  /* ! TODO: We should refactor this */
-  --mirai-finder-field-background: var(--mirai-ui-input-background);
-  --mirai-finder-field-border: var(--mirai-ui-input-text-border);
-  --mirai-finder-field-border-radius: var(--mirai-ui-input-text-radius);
-  --mirai-finder-field-border-focus: var(--mirai-ui-focus-color);
-  --mirai-finder-field-height: var(--mirai-ui-input-min-height);
-  --mirai-finder-field-icon-color: var(--mirai-ui-input-disabled);
-  --mirai-finder-field-icon-size: var(--mirai-ui-input-text-icon);
-  --mirai-finder-field-label-color: var(--mirai-ui-content-light);
-  --mirai-finder-field-layer-shadow: var(--mirai-ui-shadow);
-  --mirai-finder-field-padding-x: var(--mirai-ui-input-text-padding-x);
-  --mirai-finder-field-padding-y: var(--mirai-ui-input-text-padding-y);
-}
-
 .caption {
   flex: 1;
   overflow: hidden;
@@ -28,32 +13,32 @@
 .field {
   align-items: center;
   align-content: center;
-  background-color: var(--mirai-finder-field-background);
-  border-radius: var(--mirai-finder-field-border-radius);
+  background-color: var(--mirai-field-background);
+  border-radius: var(--mirai-field-border-radius);
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
   flex-direction: var(--mirai-ui-row-direction);
-  gap: calc(var(--mirai-finder-field-padding-x) / 2);
-  height: var(--mirai-finder-field-height);
+  gap: calc(var(--mirai-field-padding-x) / 2);
+  height: var(--mirai-field-height);
   justify-content: flex-start;
-  padding: 0 var(--mirai-finder-field-padding-x);
+  padding: 0 var(--mirai-field-padding-x);
   z-index: 0;
 }
 
 .field:not(.inline) {
-  border: var(--mirai-finder-field-border);
+  border: var(--mirai-field-border);
   transition: border-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing),
     box-shadow var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
 }
 
 .field:not(.inline).focus {
-  border-color: var(--mirai-finder-field-border-focus);
+  border-color: var(--mirai-field-border-focus);
   box-shadow: var(--mirai-ui-focus-shadow);
 }
 
 .field:not(.inline).hover {
-  border-color: var(--mirai-finder-field-border-focus);
+  border-color: var(--mirai-field-border-focus);
 }
 
 .field.inline.focus,
@@ -62,14 +47,14 @@
 }
 
 .icon {
-  font-size: var(--mirai-finder-field-icon-size);
-  height: var(--mirai-finder-field-icon-size);
-  line-height: var(--mirai-finder-field-icon-size);
-  width: var(--mirai-finder-field-icon-size);
+  font-size: var(--mirai-field-icon-size);
+  height: var(--mirai-field-icon-size);
+  line-height: var(--mirai-field-icon-size);
+  width: var(--mirai-field-icon-size);
 }
 
 .icon.context {
-  color: var(--mirai-finder-field-icon-color);
+  color: var(--mirai-field-icon-color);
 }
 
 .icon.error {
@@ -81,7 +66,7 @@
 }
 
 .label {
-  color: var(--mirai-finder-field-label-color);
+  color: var(--mirai-field-label-color);
 }
 
 .input {
@@ -89,11 +74,11 @@
 }
 
 .layerContent {
-  margin: var(--mirai-finder-field-padding-y) 0;
-  background-color: var(--mirai-finder-field-background);
-  border: var(--mirai-finder-field-border);
-  border-radius: var(--mirai-finder-field-border-radius);
-  box-shadow: var(--mirai-finder-field-layer-shadow);
+  margin: var(--mirai-field-padding-y) 0;
+  background-color: var(--mirai-field-background);
+  border: var(--mirai-field-border);
+  border-radius: var(--mirai-field-border-radius);
+  box-shadow: var(--mirai-field-layer-shadow);
 }
 
 /* S */

package/build/components/__shared__/FieldPromocode/FieldPromocode.module.css

@@ -32,7 +32,7 @@ input.input {
 /* M & L */
 @media only screen and (min-width: 431px) {
   input.input {
-    height: calc(var(--mirai-finder-field-height)- calc(var(--mirai-ui-border-width) * 2));
+    height: calc(var(--mirai-field-height)- calc(var(--mirai-ui-border-width) * 2));
     max-width: calc(var(--mirai-ui-space-XL) * 2);
   }
 }

package/build/components/__shared__/Occupation/Occupation.module.css

@@ -1,9 +1,3 @@
-:root {
-  --mirai-occupation-offset-horizontal: var(--mirai-ui-space-L);
-  --mirai-occupation-scrollview-max-height: 340px;
-  --mirai-occupation-width: 320px;
-}
-
 .offset {
   padding-left: var(--mirai-occupation-offset-horizontal);
   padding-right: var(--mirai-occupation-offset-horizontal);

package/build/theme.css

@@ -7,8 +7,57 @@
 }
 
 :root {
-  /* booking */
-  /* --corporative-color: #003580; */
-  /* pinterest */
-  /* --corporative-color: #bd081c; */
+  /* Calendar */
+  --mirai-finder-calendar-padding: var(--mirai-ui-space-M);
+
+  /* Card */
+  --mirai-card-image-height: 208px;
+
+  /* Deals */
+  --mirai-deals-modal-z-index: 601;
+  --mirai-deals-notification-max-width: calc(var(--mirai-ui-calendar-cell) * 14 + var(--mirai-ui-calendar-padding) * 2);
+  --mirai-ui-modal-layer: var(--mirai-deals-modal-z-index);
+
+  /* Field */
+  --mirai-field-background: var(--mirai-ui-input-background);
+  --mirai-field-border: var(--mirai-ui-input-text-border);
+  --mirai-field-border-radius: var(--mirai-ui-input-text-radius);
+  --mirai-field-border-focus: var(--mirai-ui-focus-color);
+  --mirai-field-height: var(--mirai-ui-input-min-height);
+  --mirai-field-icon-color: var(--mirai-ui-input-disabled);
+  --mirai-field-icon-size: var(--mirai-ui-input-text-icon);
+  --mirai-field-label-color: var(--mirai-ui-content-light);
+  --mirai-field-layer-shadow: var(--mirai-ui-shadow);
+  --mirai-field-padding-x: var(--mirai-ui-input-text-padding-x);
+  --mirai-field-padding-y: var(--mirai-ui-input-text-padding-y);
+
+  /* Finder */
+  --mirai-finder-background: var(--mirai-ui-base);
+  --mirai-finder-border: var(--mirai-ui-input-text-border);
+  --mirai-finder-border-color: var(--mirai-ui-content-border);
+  --mirai-finder-border-radius: var(--mirai-ui-border-radius);
+  --mirai-finder-gap: var(--mirai-ui-space-XXS);
+  --mirai-finder-field-height: calc(var(--mirai-field-height) * 1);
+  --mirai-finder-padding: var(--mirai-ui-space-S);
+  --mirai-finder-modal-content-max-height: calc(100vh - calc(var(--mirai-ui-space-XXL) + var(--mirai-ui-space-XL)));
+
+  /* Header */
+  --mirai-header-accent: var(--mirai-ui-accent);
+  --mirai-header-content: var(--mirai-ui-content);
+  --mirai-header-content-background: var(--mirai-ui-base);
+  --mirai-header-content-border: var(--mirai-ui-content-border);
+  --mirai-header-content-light: var(--mirai-ui-content-light);
+
+  /* Occupation */
+  --mirai-occupation-offset-horizontal: var(--mirai-ui-space-L);
+  --mirai-occupation-scrollview-max-height: 340px;
+  --mirai-occupation-width: 320px;
+
+  /* Places */
+  --mirai-places-item-height: 32px;
+  --mirai-places-item-width: 300px;
+  --mirai-places-item-background-selected: var(--mirai-ui-accent);
+  --mirai-places-item-color-selected: var(--mirai-ui-base);
+  --mirai-places-padding: var(--mirai-ui-space-M);
+  --mirai-places-items-per-column: 18;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/core",
-  "version": "0.3.292",
+  "version": "0.3.293",
   "source": "src/index.js",
   "repository": "https://gitlab.com/miraicorp/dev/frontend/core",
   "author": "JΛVI <hello@soyjavi.com>",

package/public/themes/monalisa.theme.css

@@ -2,14 +2,18 @@
 @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;600&display=swap');
 
 :root {
+  /* == legacy ====================================================================================================== */
+  /* booking */
+  /* --corporative-color: #003580; */
+  /* pinterest */
+  /* --corporative-color: #bd081c; */
+
+  /* == @mirai/ui =================================================================================================== */
+  /* typography */
   --mirai-ui-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
   --mirai-ui-font-weight: 500;
   --mirai-ui-font-bold-weight: 600;
 
-  --mirai-ui-font-brand: 'Playfair Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
-    sans-serif;
-  --mirai-ui-font-brand-weight: 700;
-
   /* palette */
   --mirai-ui-accent: #f0a42b;
   --mirai-ui-accent-background: #fef6ea;
@@ -19,6 +23,25 @@
 
   /* Button */
   --mirai-ui-button-font-weight: 600;
+
+  /* == components ================================================================================================== */
+  /* Banner */
+  --mirai-ui-font-brand: 'Playfair Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
+    sans-serif;
+  --mirai-ui-font-brand-weight: 700;
+
+  /* Finder */
+  /* Booking */
+  /* --corporative-color: #003580;
+  --mirai-finder-background: #ffb700;
+  --mirai-finder-border-radius: var(--mirai-ui-input-text-radius);
+  --mirai-finder-padding: var(--mirai-ui-space-XXS); */
+
+  /* Airbnb */
+  /* --corporative-color: #ff385c;
+  --mirai-finder-border-radius: var(--mirai-ui-space-XL);
+  --mirai-finder-field-height: calc(var(--mirai-field-height) * 1.2);
+  --mirai-finder-padding: var(--mirai-ui-space-XS); */
 }
 
 body {