quasar-ui-sellmate-ui-kit 3.14.13 → 3.14.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "3.14.13",
+  "version": "3.14.15",
   "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
   "description": "Sellmate UI Kit",
   "license": "MIT",

package/src/components/InputWithSearchIcon.vue

@@ -7,7 +7,7 @@
       :name="closeIcon12"
       size="12px"
       class="q-pa-sm cursor-pointer"
-      color="Grey_Default"
+      color="grey_65"
       @click="$emit('onDelete')"
     />
   </div>
@@ -44,7 +44,7 @@
     padding-left: 8px;
     position: relative;
     border-radius: 2px;
-    border: 1px solid $Grey_Lighten-1;
+    border: 1px solid $grey_55;
     background-color: white;
     position: sticky;
     top: 0;

package/src/components/SBadge.vue

@@ -25,18 +25,18 @@
         default: () => ({
           success: {
             label: '성공',
-            color: 'Blue_C_Lighten-6',
+            color: 'brilliantblue_20',
             textColor: 'positive',
           },
           fail: {
             label: '실패',
-            color: 'Red_Lighten-6',
-            textColor: 'Red_Lighten-1',
+            color: 'red_15',
+            textColor: 'red_70',
           },
           total: {
             label: '전체',
-            color: 'Grey_Lighten-5',
-            textColor: 'Grey_Darken-1',
+            color: 'grey_10',
+            textColor: 'grey_70',
           },
         }),
       },

package/src/components/SBreadcrumbs.vue

@@ -1,13 +1,9 @@
 <template>
-  <q-breadcrumbs
-    class="s-breadcrumbs"
-    separator-color="Grey_Darken-5"
-    active-color="Grey_Darken-5"
-  >
+  <q-breadcrumbs class="s-breadcrumbs" separator-color="grey_95" active-color="grey_95">
     <q-breadcrumbs-el
       v-for="(item, i) in labels"
       :key="i"
-      class="text-Grey_Darken-5 s-breadcrumbs-el"
+      class="text-grey_95 s-breadcrumbs-el"
       :to="item.link ? undefined : item.path"
       :tag="item.link ? 'a' : 'button'"
       :href="item.link"
@@ -20,36 +16,36 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import { QBreadcrumbs, QBreadcrumbsEl } from 'quasar';
+  import { defineComponent } from 'vue';
+  import { QBreadcrumbs, QBreadcrumbsEl } from 'quasar';
 
-export default defineComponent({
-  name: 'SBreadcrumbs',
-  components: {
-    QBreadcrumbs,
-    QBreadcrumbsEl,
-  },
-  props: {
-    labels: Array,
-  },
-});
+  export default defineComponent({
+    name: 'SBreadcrumbs',
+    components: {
+      QBreadcrumbs,
+      QBreadcrumbsEl,
+    },
+    props: {
+      labels: Array,
+    },
+  });
 </script>
 
 <style lang="scss">
-.q-breadcrumbs.s-breadcrumbs {
-  height: 22px;
-  & > div {
-    height: 100%;
-    margin: 0 !important;
+  .q-breadcrumbs.s-breadcrumbs {
+    height: 22px;
     & > div {
+      height: 100%;
       margin: 0 !important;
-    }
-    .q-breadcrumbs__separator {
-      margin: 0 8px !important;
-    }
-    .q-breadcrumbs--last {
-      font-weight: bold;
+      & > div {
+        margin: 0 !important;
+      }
+      .q-breadcrumbs__separator {
+        margin: 0 8px !important;
+      }
+      .q-breadcrumbs--last {
+        font-weight: bold;
+      }
     }
   }
-}
 </style>

package/src/components/SButton.vue

@@ -37,7 +37,7 @@
       },
       color: {
         type: String,
-        default: 'Blue_B_Default',
+        default: 'oceanblue_75',
       },
       noHover: {
         type: Boolean,
@@ -205,12 +205,12 @@
   }
   .s-button.q-btn--outline.disabled,
   .s-button.disabled {
-    background: $Grey_Lighten-3 !important;
+    background: $grey_30 !important;
     opacity: 1 !important;
-    color: $Grey_Default !important;
+    color: $grey_65 !important;
     border: none !important;
     &:before {
-      border: 1px solid $Grey_Lighten-2;
+      border: 1px solid $grey_45;
     }
   }
   .s-button.text-only {

package/src/components/SButtonGroup.vue

@@ -1,41 +1,36 @@
 <template>
-  <q-btn-group
-    class="s-btn-group"
-    :class="{ 'no-hover': noHover }"
-    flat
-    unelevated
-  >
+  <q-btn-group class="s-btn-group" :class="{ 'no-hover': noHover }" flat unelevated>
     <slot></slot>
   </q-btn-group>
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import { QBtnGroup } from 'quasar';
+  import { defineComponent } from 'vue';
+  import { QBtnGroup } from 'quasar';
 
-export default defineComponent({
-  name: 'SButtonGroup',
-  components: {
-    QBtnGroup,
-  },
-  props: {
-    noHover: {
-      type: Boolean,
-      default: false,
+  export default defineComponent({
+    name: 'SButtonGroup',
+    components: {
+      QBtnGroup,
     },
-  },
-});
+    props: {
+      noHover: {
+        type: Boolean,
+        default: false,
+      },
+    },
+  });
 </script>
 
 <style lang="scss">
-@import "../css/quasar.variables.scss";
+  @import '../css/quasar.variables.scss';
 
-.s-btn-group {
-  .disabled {
-    border: none;
-    &::before {
-      border: 1px solid $Grey_Lighten-2;
+  .s-btn-group {
+    .disabled {
+      border: none;
+      &::before {
+        border: 1px solid $grey_45;
+      }
     }
   }
-}
 </style>

package/src/components/SButtonToggle.vue

@@ -11,8 +11,8 @@
     outline
     unelevated
     :ripple="false"
-    color="Grey_Lighten-2"
-    text-color="Grey_Lighten-2"
+    color="grey_45"
+    text-color="grey_45"
     toggle-color="positive"
     toggle-text-color="positive"
     class="s-btn-toggle"
@@ -66,7 +66,7 @@
       }
 
       &:before {
-        border-left: 1px solid $Grey_Lighten-2 !important;
+        border-left: 1px solid $grey_45 !important;
       }
 
       &:hover {

package/src/components/SCaution.vue

@@ -2,25 +2,20 @@
   <q-banner
     dense
     rounded
-    class="s-caution text-Grey_Darken-4 flex s-border-radius-sm"
+    class="s-caution text-grey_90 flex s-border-radius-sm"
     :class="[
       {
         's-caution--no-icon': noIcon,
         's-caution--modal': useModal || useNotice,
       },
-      useModal
-        ? (useNotice ? 'bg-Grey_Lighten-6' : 'bg-Red_Lighten-6')
-        : 'bg-Red_Lighten-6 s-border-Red_Lighten-3'
+      useModal ? (useNotice ? 'bg-grey_05' : 'bg-red_15') : 'bg-red_15 s-border-red_45',
     ]"
   >
     <template #avatar v-if="!noIcon">
-      <q-icon
-        class="s-caution-icon"
-        size="24px"
-        color="Red_Lighten-1"
-        :name="cautionOutlineIcon"
-      />
-      <strong class="s-caution__icon--title q-mt-xs text-white block font-16-700">{{ label }}</strong>
+      <q-icon class="s-caution-icon" size="24px" color="red_70" :name="cautionOutlineIcon" />
+      <strong class="s-caution__icon--title q-mt-xs text-white block font-16-700">{{
+        label
+      }}</strong>
     </template>
     <template #default>
       <ul>
@@ -30,114 +25,113 @@
   </q-banner>
 </template>
 <script>
-import { defineComponent } from 'vue';
-import { QBanner, QIcon } from 'quasar';
-import { cautionOutlineIcon } from '../assets/icons';
+  import { defineComponent } from 'vue';
+  import { QBanner, QIcon } from 'quasar';
+  import { cautionOutlineIcon } from '../assets/icons';
 
-export default defineComponent({
-  components: {
-    QBanner,
-    QIcon,
-  },
-  props: {
-    label: {
-      type: String,
-      default: '주의사항',
+  export default defineComponent({
+    components: {
+      QBanner,
+      QIcon,
     },
-    /**
-     * @description icon 영역 없앰
-    */
-    noIcon: {
-      type: Boolean,
-      default: false,
-    },
-    /**
-     * @description 모달 주의사항
-     */
-    useModal: {
-      type: Boolean,
-      default: false,
+    props: {
+      label: {
+        type: String,
+        default: '주의사항',
+      },
+      /**
+       * @description icon 영역 없앰
+       */
+      noIcon: {
+        type: Boolean,
+        default: false,
+      },
+      /**
+       * @description 모달 주의사항
+       */
+      useModal: {
+        type: Boolean,
+        default: false,
+      },
+      /**
+       * @description 모달 안내사항 (회색)
+       */
+      useNotice: {
+        type: Boolean,
+        default: false,
+      },
     },
-    /**
-     * @description 모달 안내사항 (회색)
-    */
-    useNotice: {
-      type: Boolean,
-      default: false,
+    setup() {
+      return {
+        cautionOutlineIcon,
+      };
     },
-
-  },
-  setup() {
-    return {
-      cautionOutlineIcon,
-    };
-  },
-});
+  });
 </script>
 
 <style lang="scss" scoped>
-@import "../css/quasar.variables.scss";
+  @import '../css/quasar.variables.scss';
 
-.s-caution {
-  padding: 0;
-  overflow: hidden;
-  max: {
-    height: 100%;
-    width: 100%;
-  }
-  :deep(.q-banner__avatar) {
-    flex-direction: column;
-    min-width: 104px !important;
-    max-width: 104px !important;
-    margin: 0 !important;
-    background-color: $Red_Lighten-1;
-    padding: 0 24px;
-    line-height: 26px;
-    align-self: stretch;
-    justify-content: center;
-  }
+  .s-caution {
+    padding: 0;
+    overflow: hidden;
+    max: {
+      height: 100%;
+      width: 100%;
+    }
+    :deep(.q-banner__avatar) {
+      flex-direction: column;
+      min-width: 104px !important;
+      max-width: 104px !important;
+      margin: 0 !important;
+      background-color: $red_70;
+      padding: 0 24px;
+      line-height: 26px;
+      align-self: stretch;
+      justify-content: center;
+    }
 
-  :deep(.q-banner__content) {
-    padding: 0 !important;
-    margin: 20px 32px 20px 48px;
-    > ul {
-      padding: 0;
-      margin: 0;
+    :deep(.q-banner__content) {
+      padding: 0 !important;
+      margin: 20px 32px 20px 48px;
+      > ul {
+        padding: 0;
+        margin: 0;
 
-      > li {
-        list-style: none;
-        font-size: $default-font;
-        // NOTE: 현재(2024-02-16) 디자인팀에서 line-height px 단위로 일괄 조절 진행중. 차후 공통으로 % 적용된 부분 일괄 변경 필요.
-        line-height: 22px;
-        text-indent: -18px !important;
-        &:before {
-          content: '-';
+        > li {
+          list-style: none;
           font-size: $default-font;
+          // NOTE: 현재(2024-02-16) 디자인팀에서 line-height px 단위로 일괄 조절 진행중. 차후 공통으로 % 적용된 부분 일괄 변경 필요.
           line-height: 22px;
-          margin-right: 12px;
+          text-indent: -18px !important;
+          &:before {
+            content: '-';
+            font-size: $default-font;
+            line-height: 22px;
+            margin-right: 12px;
+          }
         }
       }
     }
-  }
 
-  &--no-icon {
-    :deep(.q-banner__avatar) {
-      display: none;
+    &--no-icon {
+      :deep(.q-banner__avatar) {
+        display: none;
+      }
     }
-  }
 
-  &--modal {
-    :deep(.q-banner__content) {
-      margin: 12px 24px 12px 40px;
-      ul {
-        li {
-          text-indent: -14px !important;
-          &:before {
-            margin-right: 8px;
+    &--modal {
+      :deep(.q-banner__content) {
+        margin: 12px 24px 12px 40px;
+        ul {
+          li {
+            text-indent: -14px !important;
+            &:before {
+              margin-right: 8px;
+            }
           }
         }
       }
     }
   }
-}
 </style>

package/src/components/SCheckbox.vue

@@ -8,116 +8,115 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue';
-import { QCheckbox } from 'quasar';
+  import { defineComponent } from 'vue';
+  import { QCheckbox } from 'quasar';
 
-export default defineComponent({
-  name: 'SCheckbox',
-  components: {
-    QCheckbox,
-  },
-  props: {
-    length: Number,
-  },
-  setup() {
-    return {};
-  },
-});
+  export default defineComponent({
+    name: 'SCheckbox',
+    components: {
+      QCheckbox,
+    },
+    props: {
+      length: Number,
+    },
+    setup() {
+      return {};
+    },
+  });
 </script>
 
 <style lang="scss">
-@import "../css/quasar.variables.scss";
+  @import '../css/quasar.variables.scss';
 
-.s-checkbox {
-  margin: 0;
-  justify-content: center;
-  align-items: center;
-  font-size: $default-font;
-  height: 1.667em;
-  &:hover {
-    .q-checkbox__inner {
-      .q-checkbox__bg {
-        border: 1px solid $positive;
-        background-color: $Blue_B_Lighten-5;
+  .s-checkbox {
+    margin: 0;
+    justify-content: center;
+    align-items: center;
+    font-size: $default-font;
+    height: 1.667em;
+    &:hover {
+      .q-checkbox__inner {
+        .q-checkbox__bg {
+          border: 1px solid $positive;
+          background-color: $oceanblue_25;
+        }
       }
     }
-  }
-  & > .q-checkbox__inner {
-    min-width: 0;
-    width: 0.4em;
-    height: 0.4em;
-    &:before {
-      background: none !important;
-    }
-    .q-checkbox__bg {
-      border: 1px solid $Grey_Default;
+    & > .q-checkbox__inner {
+      min-width: 0;
       width: 0.4em;
       height: 0.4em;
-      background: white;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      .q-checkbox__svg {
-        width: 0.286em !important;
-        margin: 0 auto;
+      &:before {
+        background: none !important;
       }
-    }
-    &--indet,
-    &--truthy {
-      color: $positive !important;
       .q-checkbox__bg {
-        border: none !important;
-        background-color: $positive !important;
+        border: 1px solid $grey_65;
+        width: 0.4em;
+        height: 0.4em;
+        background: white;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        .q-checkbox__svg {
+          width: 0.286em !important;
+          margin: 0 auto;
+        }
       }
-      path {
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        &:first-of-type {
-          transform: scale(0.98);
+      &--indet,
+      &--truthy {
+        color: $positive !important;
+        .q-checkbox__bg {
+          border: none !important;
+          background-color: $positive !important;
+        }
+        path {
+          stroke-linecap: round;
+          stroke-linejoin: round;
+          &:first-of-type {
+            transform: scale(0.98);
+          }
         }
       }
     }
+    & > .q-checkbox__label {
+      padding-left: $between-margin-md;
+      color: $grey_90;
+      line-height: $default-content-height;
+    }
   }
-  & > .q-checkbox__label {
-    padding-left: $between-margin-md;
-    color: $Grey_Darken-4;
-    line-height: $default-content-height;
-  }
-}
 
-.s-checkbox[aria-checked="true"].disabled {
-  .q-checkbox__inner {
-    .q-checkbox__bg {
-      background: $Grey_Lighten-4 !important;
-      border: 1px solid $Grey_Lighten-2 !important;
+  .s-checkbox[aria-checked='true'].disabled {
+    .q-checkbox__inner {
+      .q-checkbox__bg {
+        background: $grey_20 !important;
+        border: 1px solid $grey_45 !important;
+      }
     }
   }
-
-}
-.disabled.s-checkbox {
-  border: none !important;
-  background: none !important;
-  & > .q-checkbox__inner {
-    .q-checkbox__bg {
-      border: 1px solid $Grey_Lighten-2;
-      background: $Grey_Lighten-4;
-      .q-checkbox__svg {
-        color: $Grey_Default;
+  .disabled.s-checkbox {
+    border: none !important;
+    background: none !important;
+    & > .q-checkbox__inner {
+      .q-checkbox__bg {
+        border: 1px solid $grey_45;
+        background: $grey_20;
+        .q-checkbox__svg {
+          color: $grey_65;
+        }
       }
     }
   }
-}
 
-.ck-margin-sm {
-  margin-right: 20px;
-  &:last-of-type {
-    margin-right: 0;
+  .ck-margin-sm {
+    margin-right: 20px;
+    &:last-of-type {
+      margin-right: 0;
+    }
   }
-}
-.ck-margin-lg {
-  margin-right: 40px;
-  &:last-of-type {
-    margin-right: 0;
+  .ck-margin-lg {
+    margin-right: 40px;
+    &:last-of-type {
+      margin-right: 0;
+    }
   }
-}
 </style>