favesalon-embed 1.0.0 → 1.0.2

package/dist/collection/components/style-detail/index.css

@@ -1,76 +0,0 @@
-.salon-modal.salon-modal--lookbook-detail .salon-modal--close {
-  display: none !important;
-}
-
-.salon-modal.salon-modal--lookbook-detail .salon-modal--content {
-  background-color: #fff;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-  overflow-y: auto;
-}
-
-.salon-modal.salon-modal--lookbook-detail .style-detail--slides--image {
-  height: 240px !important;
-}
-
-.salon-modal.salon-modal--lookbook-detail .style-detail--slides--thumbnails {
-  text-align: center;
-}
-
-.salon-modal.salon-modal--lookbook-detail .style-detail--slides--thumbnail {
-  display: inline-block;
-  margin-top: 12px;
-  margin-right: 12px;
-  height: 40px;
-  width: 60px;
-}
-
-.salon-modal.salon-modal--lookbook-detail .style-detail--slides--button {
-  border: none;
-  position: absolute;
-  top: 50%;
-  z-index: 20;
-  height: 40px;
-  width: 40px;
-
-  -moz-border-radius: 50px;
-  -webkit-border-radius: 50px;
-  border-radius: 50px;
-
-  -moz-transform: translate(0, -50%);
-  -webkit-transform: translate(0, -50%);
-  transform: translate(0, -50%);
-}
-
-.salon-modal.salon-modal--lookbook-detail .style-detail--slides--prev {
-  left: 24px;
-}
-
-.salon-modal.salon-modal--lookbook-detail .style-detail--slides--next {
-  right: 24px;
-}
-
-
-@media (min-width: 768px) {
-  .salon-modal.salon-modal--lookbook-detail .style-detail--slides--image {
-    height: 360px !important;
-  }
-}
-
-
-@media (min-width: 992px) {
-  .salon-modal.salon-modal--lookbook-detail .style-detail--slides--image {
-    height: 480px !important;
-  }
-
-  .salon-modal.salon-modal--lookbook-detail .style-detail--slides--thumbnail {
-    height: 56px;
-    width: 72px;
-  }
-}

package/dist/collection/components/style-detail/index.js

@@ -1,386 +0,0 @@
-import { h } from '@stencil/core';
-import dayjs from 'dayjs';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import { isVideoMedia } from '../../types/style';
-import { Colors } from '../../constants/colors';
-import HttpService from '../../services/services';
-import { getSalonImage } from '../../types/salon';
-import { shortDateYearFormat } from '../../types/common';
-dayjs.extend(relativeTime);
-export class StyleDetail {
-  constructor() {
-    this.salonId = undefined;
-    this.salonLookbook = undefined;
-    this.lookbookInfo = undefined;
-    this.isModalOpen = true;
-    this.currentMediaIdx = 0;
-    this.currentMedia = undefined;
-    this.albumMedias = [];
-    this.similarStyles = [];
-    this.totalComments = 0;
-    this.lookbookComments = [];
-    this.isLayoutSetup = undefined;
-  }
-  componentWillLoad() {
-    this.injectSDK();
-    if (!!this.salonLookbook) {
-      this.lookbookInfo = JSON.parse(this.salonLookbook);
-      this.fetchData();
-    }
-  }
-  componentDidRender() {
-    this.setupGridLayout();
-  }
-  injectSDK() {
-    return new Promise((resolve) => {
-      const script = document.createElement('script');
-      script.type = 'text/javascript';
-      script.src = 'https://cdn.jsdelivr.net/npm/macy@2';
-      document.body.appendChild(script);
-      return resolve(true);
-    });
-  }
-  setupGridLayout() {
-    if (!this.isLayoutSetup && this.similarStyles.length > 0 && document.querySelector('#similar-styles--grid')) {
-      const script = document.createElement('script');
-      script.type = 'text/javascript';
-      script.innerHTML = `
-        var masonry = new Macy({
-          container: '#similar-styles--grid',
-          useContainerForBreakpoints: true,
-          margin: 16,
-          columns: 2,
-        });
-      `;
-      document.body.appendChild(script);
-      this.isLayoutSetup = true;
-    }
-  }
-  fetchData() {
-    try {
-      const promises = [
-        HttpService().fetchStyleDetail(this.lookbookInfo.id).then(response => {
-          const { styleInfo, similarStyles } = response;
-          this.similarStyles = similarStyles;
-          if (styleInfo) {
-            this.lookbookInfo = styleInfo;
-            this.albumMedias = styleInfo.albumMedias || [];
-            this.currentMedia = (styleInfo.albumMedias || [])[0];
-          }
-        }),
-        HttpService().fetchStyleComments(this.lookbookInfo.id).then(response => {
-          this.totalComments = response.total;
-          this.lookbookComments = response.data;
-        }),
-      ];
-      return Promise.all(promises);
-    }
-    catch (e) { }
-  }
-  closeModal() {
-    this.isModalOpen = false;
-    const el = document.querySelector('style-detail');
-    el.remove();
-  }
-  onClickLookbook(style) {
-    const elLookbookModal = document.createElement('div');
-    elLookbookModal.innerHTML = `
-      <style-detail
-        salon-id=${this.salonId}
-        salon-lookbook='${JSON.stringify(style)}'
-      ></style-detail>
-    `;
-    document.body.appendChild(elLookbookModal);
-  }
-  onClickPrev() {
-    if (this.currentMediaIdx === 0) {
-      this.currentMediaIdx = this.albumMedias.length - 1;
-      this.currentMedia = this.albumMedias[this.currentMediaIdx];
-    }
-    else {
-      this.currentMediaIdx = this.currentMediaIdx - 1;
-      this.currentMedia = this.albumMedias[this.currentMediaIdx];
-    }
-  }
-  onClickNext() {
-    if (this.currentMediaIdx === this.albumMedias.length - 1) {
-      this.currentMediaIdx = 0;
-      this.currentMedia = this.albumMedias[0];
-    }
-    else {
-      this.currentMediaIdx = this.currentMediaIdx + 1;
-      this.currentMedia = this.albumMedias[this.currentMediaIdx];
-    }
-  }
-  render() {
-    const { createdDate, totalView, totalLike, totalBooking, album, salon, stylist, } = this.lookbookInfo;
-    if (this.isModalOpen) {
-      const { caption, description, mediaUrl } = this.currentMedia || {};
-      const isVideo = isVideoMedia((this.currentMedia || {}));
-      return (h("div", { class: "salon-modal salon-modal--lookbook-detail" }, h("div", { class: "salon-modal--inner" }, h("div", { class: "salon-modal--content" }, h("div", { class: "style-detail" }, h("div", { class: "style-detail--header" }, h("div", { style: {
-          position: 'relative',
-          overflow: 'hidden',
-        } }, h("div", { style: Object.assign({ backgroundColor: Colors.Gray01, backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: '0 0', filter: 'blur(30px)', position: 'absolute', inset: '0', zIndex: '1' }, this.currentMedia && !isVideoMedia(this.currentMedia) ? { backgroundImage: `url("${this.currentMedia.imageThumb}")` } : {}) }), h("div", { style: {
-          zIndex: '2',
-          position: 'relative',
-          width: '100%',
-          backgroundColor: 'rgba(0, 0, 0, 0.25)',
-          padding: '12px 16px',
-          overflow: 'hidden',
-        } }, h("span", { style: {
-          color: Colors.White,
-          border: 'none',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '32px',
-        } }, h("span", null, this.currentMediaIdx + 1, " / ", this.albumMedias.length)), h("div", { style: {
-          display: 'flex',
-          alignItems: 'center',
-          position: 'absolute',
-          right: '16px',
-          top: '50%',
-          transform: 'translate(0, -50%)',
-        } }, h("button", { type: "text", class: "btn btn-light", style: {
-          backgroundColor: Colors.White,
-          borderColor: Colors.White,
-          border: 'none',
-          borderRadius: '50px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '32px',
-          width: '32px',
-          marginLeft: '12px',
-        }, onClick: () => this.closeModal() }, h("i", { class: "ri-close-fill", style: { fontSize: '16px', lineHeight: '1' } })))), h("div", { style: { position: 'relative', zIndex: "3" } }, h("div", { class: "style-detail--slides", style: {
-          marginTop: '16px',
-          marginBottom: '12px',
-        } }, h("div", { class: "style-detail--slides--image", style: {
-          width: '100%',
-          position: 'relative',
-          height: '360px',
-        } }, isVideo && (h("video", { muted: true, controls: true, width: "100%", height: "100%" }, h("source", { src: mediaUrl, type: "video/mp4" }))), !isVideo && (h("div", { style: {
-          position: 'absolute',
-          inset: '0',
-          zIndex: '2',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        } }, h("img", { src: mediaUrl, alt: caption, style: {
-          objectFit: 'contain',
-          maxHeight: '100%',
-          maxWidth: '100%',
-        } })))), h("div", { class: "style-detail--slides--thumbnails", style: {
-          width: '100%',
-          position: 'relative',
-        } }, this.albumMedias.map((media, idx) => {
-        const isStyleVideo = isVideoMedia(media);
-        return (h("div", { class: "style-detail--slides--thumbnail", style: Object.assign(Object.assign({ backgroundColor: Colors.Gray01, borderRadius: '4px', overflow: 'hidden', position: 'relative', cursor: 'pointer' }, this.currentMediaIdx !== idx ? { opacity: '0.75' } : {}), !isStyleVideo ? {
-            backgroundImage: `url("${media.imageThumb || media.imageThumbMedium}")`,
-            backgroundRepeat: 'no-repeat',
-            backgroundPosition: 'center center',
-            backgroundSize: 'cover',
-          } : {}), onClick: () => {
-            this.currentMedia = media;
-            this.currentMediaIdx = idx;
-          } }, isStyleVideo && (h("div", null, h("video", { muted: true, width: "100%", height: "100%", poster: media.imageThumb }, h("source", { src: media.mediaUrl, type: "video/mp4" })), h("i", { class: "ri-play-circle-fill", style: {
-            fontSize: '48px',
-            color: Colors.TextColor,
-            position: 'absolute',
-            left: '50%',
-            top: '50%',
-            transform: 'translate(-50%, -50%)',
-          } })))));
-      }))), this.albumMedias.length > 1 && (h("div", null, h("button", { type: "button btn-light", class: "style-detail--slides--button style-detail--slides--prev", onClick: () => this.onClickPrev() }, h("i", { class: "ri-arrow-left-line", style: { color: Colors.TextColor, fontSize: '18px' } })), h("button", { type: "button btn-light", class: "style-detail--slides--button style-detail--slides--next", onClick: () => this.onClickNext() }, h("i", { class: "ri-arrow-right-line", style: { color: Colors.TextColor, fontSize: '18px' } }))))))), h("div", { class: "style-detail--content" }, h("div", { class: "container" }, h("div", { style: {
-          paddingBottom: '24px',
-          paddingTop: '24px',
-        } }, h("div", { class: "row" }, h("div", { class: this.similarStyles.length > 0 ? 'col-md-8' : 'col-md-12', style: { marginBottom: '24px' } }, h("div", { class: "row" }, salon && (h("div", { class: "col-sm-6 col-md-5", style: { marginBottom: '24px' } }, h("div", { style: {
-          backgroundColor: Colors.Red01,
-          borderRadius: '4px',
-          padding: '8px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        } }, h("div", { style: { paddingLeft: '8px' } }, h("div", { style: { color: Colors.Gray05, fontSize: '12px' } }, "At salon"), h("div", { style: {
-          color: Colors.Secondary,
-          fontSize: '20px',
-          lineHeight: '24px',
-        } }, salon.businessName)), h("div", { style: {
-          backgroundImage: `url("${getSalonImage(salon)}")`,
-          backgroundColor: Colors.Red02,
-          backgroundSize: 'cover',
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: '0 0',
-          borderRadius: '4px',
-          height: '48px',
-          width: '48px',
-        } })))), stylist && stylist.id && (h("div", { class: "col-sm-6 col-md-5", style: { marginBottom: '24px' } }, h("div", { style: {
-          backgroundColor: Colors.Yellow01,
-          borderRadius: '4px',
-          padding: '8px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        } }, h("div", { style: { paddingLeft: '8px' } }, h("div", { style: { color: Colors.Gray05, fontSize: '12px' } }, "By stylist"), h("div", { style: {
-          color: Colors.Secondary,
-          fontSize: '20px',
-          lineHeight: '24px',
-        } }, stylist.fullName)), h("div", { style: {
-          backgroundImage: `url("${stylist.avatar}")`,
-          backgroundColor: Colors.Yellow02,
-          backgroundSize: 'cover',
-          backgroundRepeat: 'no-repeat',
-          backgroundPosition: '0 0',
-          borderRadius: '4px',
-          height: '48px',
-          width: '48px',
-        } }))))), h("div", { style: {
-          borderBottom: `1px solid ${Colors.Gray02}`,
-          borderTop: `1px solid ${Colors.Gray02}`,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          paddingBottom: '16px',
-          paddingTop: '16px',
-        } }, h("div", { style: {
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-around',
-          flexShrink: '1',
-          flexGrow: '1',
-        } }, h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, totalLike), h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "faves")), h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, totalBooking), h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "booked")), h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, totalView), h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "views")), h("div", { style: { width: '25%', textAlign: 'center', maxWidth: '120px' } }, h("div", { style: { fontSize: '24px', fontWeight: '600', lineHeight: '1' } }, this.totalComments), h("div", { style: { fontSize: '14px', marginTop: '4px' } }, "comments")))), (caption || description) && (h("div", { style: { paddingTop: '24px' } }, h("div", { style: { color: Colors.Gray04, fontSize: '14px' } }, createdDate && dayjs(createdDate).format(shortDateYearFormat)), h("div", { style: { fontSize: '24px' } }, caption), h("div", { style: {
-          fontSize: '16px',
-          paddingTop: caption ? '16px' : '0',
-        } }, description))), album && album.tags.length > 0 && (h("div", { style: {
-          paddingTop: '24px',
-          marginBottom: '-12px',
-        } }, album.tags.map((tag, idx) => (h("button", { class: "btn btn-light", key: `album--tag-${idx}`, style: {
-          backgroundColor: Colors.Gray01,
-          borderColor: Colors.Gray01,
-          borderRadius: '4px',
-          marginRight: '12px',
-          marginBottom: '12px',
-        } }, tag))))), h("div", { style: { marginTop: '32px' } }, this.lookbookComments && this.lookbookComments.length > 0 && (h("div", null, h("div", { style: { fontWeight: '600', marginBottom: '8px' } }, this.totalComments, " ", this.totalComments === 1 ? 'comment' : 'comments'), h("div", { class: "view view--style-comments", style: {
-          borderTop: `1px solid ${Colors.Gray02}`,
-          paddingTop: '24px',
-          paddingBottom: '24px',
-        } }, this.lookbookComments.map((comment, idx) => {
-        const { user, title, description, createdDate } = comment;
-        return (h("div", { key: `style-info--comment-${idx}`, style: idx > 0 ? {
-            borderTop: `1px solid ${Colors.Gray02}`,
-            marginTop: '24px',
-            paddingTop: '24px',
-          } : {} }, h("div", { style: { overflow: 'hidden' } }, h("user-avatar", { size: 48, avatar: user.avatar, name: h("div", null, h("div", { style: { color: Colors.Gray04, lineHeight: '1', fontSize: '12px', fontWeight: '400' } }, dayjs(createdDate).fromNow()), h("div", { style: { fontSize: '18px', fontWeight: '600' } }, user.fullName)), shortName: `${(user.firstName || '').charAt(0)}${(user.lastName || '').charAt(0)}`, nameStyle: { fontWeight: 'bold' } })), h("div", { style: {
-            color: Colors.Black,
-            fontSize: '16px',
-            paddingTop: '16px',
-          } }, title), description && (h("div", { style: {
-            color: Colors.Gray05,
-            paddingTop: '8px',
-          } }, description))));
-      })))))), h("div", { class: "col-md-4", style: { marginBottom: '24px' } }, h("div", { class: "block block--similar-styles" }, this.similarStyles.length > 0 && (h("div", { class: "block--content" }, h("h3", { style: {
-          lineHeight: '1.2',
-          fontSize: '24px',
-          color: Colors.Secondary,
-        } }, "More like this"), h("div", { style: { marginTop: '16px' } }, h("div", { class: "similar-styles--grid", id: "similar-styles--grid" }, this.similarStyles.slice(0, 6).map(style => {
-        const { caption, imageThumbMedium, owner } = style;
-        return (h("div", { class: "similar-styles--grid-item", onClick: () => {
-            this.closeModal();
-            this.onClickLookbook(style);
-          } }, h("div", { class: "card", style: {
-            background: 'none',
-            border: 'none',
-            cursor: 'pointer',
-          } }, h("div", { class: "similar-styles--grid-item--image", style: {
-            borderRadius: '8px',
-            overflow: 'hidden',
-            minHeight: '80px',
-            background: Colors.Gray01,
-          } }, h("img", { src: imageThumbMedium, alt: caption, style: { maxWidth: '100%' } })), owner && (h("div", { class: "card-body", style: { paddingLeft: '0' } }, h("user-avatar", { name: owner.fullName, shortName: `${(owner.firstName || '').charAt(0)}${(owner.lastName || '').charAt(0)}`, avatar: owner.avatar }))))));
-      }))))))))))))))));
-    }
-    return null;
-  }
-  static get is() { return "style-detail"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["index.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["index.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "salonId": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "salon-id",
-        "reflect": false
-      },
-      "salonLookbook": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "salon-lookbook",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "lookbookInfo": {},
-      "isModalOpen": {},
-      "currentMediaIdx": {},
-      "currentMedia": {},
-      "albumMedias": {},
-      "similarStyles": {},
-      "totalComments": {},
-      "lookbookComments": {},
-      "isLayoutSetup": {}
-    };
-  }
-  static get methods() {
-    return {
-      "fetchData": {
-        "complexType": {
-          "signature": "() => Promise<any[]>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<any[]>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
-      }
-    };
-  }
-}

package/dist/collection/components/user-avatar/index.js

@@ -1,134 +0,0 @@
-import { h } from '@stencil/core';
-import { Colors } from '../../constants/colors';
-export class UserAvatar {
-  constructor() {
-    this.size = 24;
-    this.name = undefined;
-    this.nameStyle = undefined;
-    this.shortName = undefined;
-    this.avatar = undefined;
-  }
-  render() {
-    return (h("div", { style: { display: "flex", alignItems: "center" } }, this.avatar && (h("div", { style: {
-        backgroundImage: `url("${this.avatar}")`,
-        backgroundColor: Colors.Gray01,
-        backgroundPosition: 'center center',
-        backgroundSize: 'cover',
-        borderRadius: '50%',
-        height: `${this.size}px`,
-        width: `${this.size}px`,
-        minWidth: `${this.size}px`,
-      } })), !this.avatar && (h("div", { style: {
-        backgroundColor: Colors.Gray01,
-        backgroundPosition: 'center center',
-        backgroundSize: 'cover',
-        borderRadius: '50%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        height: `${this.size}px`,
-        width: `${this.size}px`,
-        minWidth: `${this.size}px`,
-      } }, this.shortName)), this.name && (h("div", { style: Object.assign({ flexShrink: '1', flexGrow: '1', marginLeft: '12px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }, this.nameStyle) }, this.name))));
-  }
-  static get is() { return "user-avatar"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["index.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["index.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "size": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "24"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "name",
-        "reflect": false
-      },
-      "nameStyle": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "object",
-          "resolved": "object",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        }
-      },
-      "shortName": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "short-name",
-        "reflect": false
-      },
-      "avatar": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "avatar",
-        "reflect": false
-      }
-    };
-  }
-}
-;

package/dist/collection/constants/colors.js

@@ -1,65 +0,0 @@
-export const Colors = {
-  TextColor: '#141414',
-  Black: '#000000',
-  White: '#ffffff',
-  Primary: '#F05A61',
-  Secondary: '#001529',
-  Black01: '#262626',
-  Black02: '#1f1f1f',
-  Black03: '#141414',
-  Gray01: '#F5F5F5',
-  Gray02: '#EFEFEF',
-  Gray03: '#DBDBDB',
-  Gray04: '#999999',
-  Gray05: '#666666',
-  Red01: '#FEEFEF',
-  Red02: '#F9BDC0',
-  Red03: '#F05A61',
-  Red04: '#C0484E',
-  Red05: '#90363A',
-  Orange01: '#FFF4F0',
-  Orange02: '#FFD1C3',
-  Orange03: '#FF8D69',
-  Orange04: '#CC7154',
-  Orange05: '#99553F',
-  Yellow01: '#FDFBF4',
-  Yellow02: '#F8EDD3',
-  Yellow03: '#EED291',
-  Yellow04: '#BEA874',
-  Yellow05: '#8F7E57',
-  Lilac01: '#F3F0F4',
-  Lilac02: '#CFC1D4',
-  Lilac03: '#886594',
-  Lilac04: '#6D5176',
-  Lilac05: '#523D59',
-  Blue01: '#EAECEE',
-  Blue02: '#AAB1BD',
-  Blue03: '#2B3C59',
-  Blue04: '#223047',
-  Blue05: '#1A2435',
-  Green01: '#ECF7ED',
-  Green02: '#B2E1B9',
-  Green03: '#3FB34F',
-  Green04: '#328F3F',
-  Green05: '#266B2F',
-  Success01: '#EEF9E8',
-  Success02: '#BAE7A3',
-  Success03: '#52C41A',
-  Success04: '#429D15',
-  Success05: '#317610',
-  Error01: '#FFEDED',
-  Error02: '#FFB8B9',
-  Error03: '#FF4D4F',
-  Error04: '#CC3E3F',
-  Error05: '#992E2F',
-  Warning01: '#FFF7E8',
-  Warning02: '#FDDEA1',
-  Warning03: '#FAAD14',
-  Warning04: '#C88A10',
-  Warning05: '#96680C',
-  Info01: '#E8F4FF',
-  Info02: '#A3D3FF',
-  Info03: '#1890FF',
-  Info04: '#1373CC',
-  Info05: '#0E5699',
-};