@vc-shell/framework 1.0.290 → 1.0.292

package/ui/components/molecules/vc-multivalue/vc-multivalue.vue

@@ -5,7 +5,7 @@
       `vc-multivalue_${type}`,
       {
         'vc-multivalue_opened': isOpened,
-        'vc-multivalue_error tw-pb-[20px]': error,
+        'vc-multivalue_error vc-multivalue__error-padding': error,
         'vc-multivalue_disabled': disabled,
       },
     ]"
@@ -13,7 +13,7 @@
     <!-- Input label -->
     <VcLabel
       v-if="label"
-      class="tw-mb-2"
+      class="vc-multivalue__label"
       :required="required"
       :multilanguage="multilanguage"
       :current-language="currentLanguage"
@@ -31,7 +31,7 @@
       ref="dropdownToggleRef"
       class="vc-multivalue__field-wrapper"
     >
-      <div class="tw-items-center tw-flex tw-flex-wrap tw-flex-grow">
+      <div class="vc-multivalue__content">
         <div
           v-for="(item, i) in modelValue"
           :key="`${item?.id}_${generateId()}`"
@@ -47,7 +47,7 @@
               :item="item"
               :remove="() => onDelete(i)"
             >
-              <span class="tw-truncate">{{ formatValue(item) }}</span>
+              <span class="vc-multivalue__truncate">{{ formatValue(item) }}</span>
             </slot>
             <VcIcon
               v-if="!disabled"
@@ -60,7 +60,7 @@
         </div>
 
         <template v-if="multivalue">
-          <div class="vc-multivalue__field vc-multivalue__field_dictionary tw-grow tw-basis-0 tw-p-2">
+          <div class="vc-multivalue__field vc-multivalue__field_dictionary">
             <VcButton
               small
               :disabled="disabled"
@@ -105,7 +105,7 @@
         <template v-else>
           <input
             v-model="value"
-            class="vc-multivalue__field tw-grow tw-basis-0 tw-px-3"
+            class="vc-multivalue__field vc-multivalue__input"
             :placeholder="placeholder"
             :type="internalTypeComputed"
             :disabled="disabled"
@@ -115,13 +115,14 @@
           />
         </template>
       </div>
-      <!-- Loading-->
+      <!-- Loading -->
       <div
         v-if="loading"
-        class="tw-flex tw-items-center tw-flex-nowrap tw-px-3 tw-text-[color:var(--select-clear-color)]"
+        class="vc-multivalue__loading"
       >
         <VcIcon
-          icon="fas fa-circle-notch tw-animate-spin"
+          icon="fas fa-circle-notch"
+          class="vc-multivalue__loading-icon"
           size="m"
         ></VcIcon>
       </div>
@@ -136,24 +137,23 @@
           <VcHint
             v-if="errorMessage"
             class="vc-multivalue__error"
+            >{{ errorMessage }}</VcHint
           >
-            {{ errorMessage }}
-          </VcHint>
         </slot>
       </div>
       <div v-else>
         <slot name="hint">
           <VcHint
             v-if="hint"
-            class="tw-text-[color:var(--multivalue-placeholder-color)] tw-mt-1 tw-break-words tw-p-0"
+            class="vc-multivalue__hint"
+            >{{ hint }}</VcHint
           >
-            {{ hint }}
-          </VcHint>
         </slot>
       </div>
     </Transition>
   </div>
 </template>
+
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup generic="T extends { id?: string }">
 import { unref, nextTick, ref, computed } from "vue";
@@ -315,13 +315,13 @@ function sameWidthChangeBorders() {
       let borderBottom;
       let borderRadius;
       if (placement === "top") {
-        borderTop = "1px solid var(--select-border-color)";
-        borderBottom = "1px solid var(--select-background-color)";
-        borderRadius = "var(--select-border-radius) var(--select-border-radius) 0 0";
+        borderTop = "1px solid var(--multivalue-select-border-color)";
+        borderBottom = "1px solid var(--multivalue-select-background-color)";
+        borderRadius = "var(--multivalue-select-border-radius) var(--multivalue-select-border-radius) 0 0";
       } else {
-        borderBottom = "1px solid var(--select-border-color)";
-        borderTop = "1px solid var(--select-background-color)";
-        borderRadius = "0 0 var(--select-border-radius) var(--select-border-radius)";
+        borderBottom = "1px solid var(--multivalue-select-border-color)";
+        borderTop = "1px solid var(--multivalue-select-background-color)";
+        borderRadius = "0 0 var(--multivalue-select-border-radius) var(--multivalue-select-border-radius)";
       }
 
       const width = `${rects.reference.width}px`;
@@ -368,20 +368,28 @@ function onSearch(event: Event) {
 :root {
   --multivalue-height: 38px;
   --multivalue-border-radius: 3px;
-  --multivalue-border-color: #d3dbe9;
-  --multivalue-border-color-error: #f14e4e;
-  --multivalue-background-color: #ffffff;
-  --multivalue-placeholder-color: #a5a5a5;
-
-  --select-height: 38px;
-  --select-border-radius: 3px;
-  --select-border-color: #d3dbe9;
-  --select-border-color-error: #f14e4e;
-  --select-background-color: #ffffff;
-  --select-background-color-disabled: #fafafa;
-  --select-placeholder-color: #a5a5a5;
-  --select-chevron-color: #43b0e6;
-  --select-chevron-color-hover: #319ed4;
+  --multivalue-border-color: var(--secondary-200);
+  --multivalue-border-color-error: var(--base-error-color, var(--danger-500));
+  --multivalue-background-color: var(--additional-50);
+  --multivalue-placeholder-color: var(--neutrals-400);
+
+  --multivalue-select-border-radius: 3px;
+  --multivalue-select-border-color: var(--secondary-200);
+  --multivalue-select-border-color-error: var(--base-error-color, var(--danger-500));
+  --multivalue-select-background-color: var(--additional-50);
+  --multivalue-select-background-color-disabled: var(--neutrals-50);
+  --multivalue-select-placeholder-color: var(--neutrals-400);
+  --multivalue-select-chevron-color: var(--primary-500);
+  --multivalue-select-chevron-color-hover: var(--primary-600);
+
+  --multivalue-search-border-color: var(--secondary-200);
+  --multivalue-item-hover-background-color: var(--accent-50);
+  --multivalue-hint-color: var(--base-error-color, var(--danger-500));
+  --multivalue-field-value-background-color: var(--additional-50);
+  --multivalue-field-value-border-color: var(--secondary-200);
+  --multivalue-clear-icon-color: var(--primary-500);
+  --multivalue-disabled-text-color: var(--neutrals-400);
+  --multivalue-disabled-background-color: var(--neutrals-50);
 }
 
 .vc-multivalue {
@@ -396,37 +404,66 @@ function onSearch(event: Event) {
     }
   }
 
+  &__label {
+    @apply tw-mb-2;
+  }
+
+  &__error-padding {
+    @apply tw-pb-[20px];
+  }
+
   &__field-wrapper {
     @apply tw-border tw-border-solid
     tw-border-[color:var(--multivalue-border-color)]
     tw-rounded-[var(--multivalue-border-radius)]
-    tw-bg-[color:var(--multivalue-background-color)]
     tw-items-center
     tw-flex tw-justify-between;
   }
 
+  &__content {
+    @apply tw-items-center tw-flex tw-flex-wrap tw-flex-grow;
+  }
+
+  &__field-value-wrapper {
+    @apply tw-ml-2 tw-flex tw-items-center;
+  }
+
+  &__field-value {
+    @apply tw-bg-[color:var(--multivalue-background-color)] tw-border tw-border-solid tw-border-[color:var(--multivalue-border-color)]
+      tw-rounded-[2px] tw-flex tw-items-center tw-h-[28px] tw-box-border tw-px-2 tw-max-w-[150px];
+  }
+
+  &__truncate {
+    @apply tw-truncate tw-text-sm;
+  }
+
+  &__field-value-clear {
+    @apply tw-text-[color:var(--multivalue-clear-icon-color)] tw-ml-2 tw-cursor-pointer;
+  }
+
   &__dropdown {
     @apply tw-flex tw-flex-col tw-box-border
     tw-max-h-[300px] tw-z-10 tw-overflow-hidden
-    tw-absolute tw-bg-[color:var(--select-background-color)]
-    tw-border tw-border-solid tw-border-[color:var(--select-border-color)]
-    tw-border-t-[color:var(--select-background-color)]
-    tw-rounded-b-[var(--select-border-radius)]
+    tw-absolute tw-bg-[color:var(--multivalue-select-background-color)]
+    tw-border tw-border-solid tw-border-[color:var(--multivalue-select-border-color)]
+    tw-border-t-[color:var(--multivalue-select-background-color)]
+    tw-rounded-b-[var(--multivalue-select-border-radius)]
     tw-p-2;
   }
 
   &__search {
-    @apply tw-w-full tw-box-border tw-border tw-border-solid tw-border-[#eaecf2]
-      tw-rounded-[4px] tw-h-8 tw-leading-[32px]
-      tw-outline-none tw-mb-3 tw-px-2;
+    @apply tw-w-full tw-box-border tw-border tw-border-solid
+    tw-border-[color:var(--multivalue-search-border-color)]
+    tw-rounded-[4px] tw-h-8 tw-leading-[32px]
+    tw-outline-none tw-mb-3 tw-px-2 tw-bg-[color:var(--multivalue-background-color)];
   }
 
   &__item {
-    @apply tw-flex tw-items-center tw-min-h-[36px] tw-px-2 tw-rounded-[3px] tw-cursor-pointer hover:tw-bg-[#eff7fc];
+    @apply tw-flex tw-items-center tw-min-h-[36px] tw-px-2 tw-rounded-[3px] tw-cursor-pointer hover:tw-bg-[color:var(--multivalue-item-hover-background-color)];
   }
 
   &_opened &__field-wrapper {
-    @apply tw-rounded-t-[var(--select-border-radius)];
+    @apply tw-rounded-t-[var(--multivalue-select-border-radius)];
   }
 
   &_error &__field-wrapper {
@@ -434,12 +471,12 @@ function onSearch(event: Event) {
   }
 
   &__error {
-    @apply tw-mt-1 [--hint-color:var(--multivalue-border-color-error)];
+    @apply tw-mt-1 [--hint-color:var(--multivalue-hint-color)];
   }
 
   &__field {
-    @apply tw-border-none tw-outline-none tw-min-h-[var(--multivalue-height)]
-      tw-min-w-[120px] tw-box-border placeholder:tw-text-[color:var(--multivalue-placeholder-color)];
+    @apply tw-border-none tw-outline-none tw-min-h-[var(--multivalue-height)] tw-bg-[color:var(--multivalue-background-color)]
+      tw-min-w-[120px] tw-box-border placeholder:tw-text-[color:var(--multivalue-placeholder-color)] tw-text-sm;
 
     &::-webkit-input-placeholder {
       @apply tw-text-[color:var(--multivalue-placeholder-color)];
@@ -464,37 +501,38 @@ function onSearch(event: Event) {
     }
 
     &-value {
-      @apply tw-bg-[#fbfdfe] tw-border tw-border-solid tw-border-[color:#bdd1df] tw-rounded-[2px]
-        tw-flex tw-items-center tw-h-[28px] tw-box-border tw-px-2 tw-max-w-[150px];
+      @apply tw-bg-[color:var(--multivalue-field-value-background-color)] tw-border tw-border-solid tw-border-[color:var(--multivalue-field-value-border-color)]
+        tw-rounded-[2px] tw-flex tw-items-center tw-h-[28px] tw-box-border tw-px-2 tw-max-w-[150px];
 
       &-clear {
-        @apply tw-text-[#a9bfd2] tw-ml-2 tw-cursor-pointer;
+        @apply tw-text-[color:var(--multivalue-clear-icon-color)] tw-ml-2 tw-cursor-pointer;
       }
     }
 
     &_dictionary {
-      @apply tw-h-auto tw-min-w-[auto];
+      @apply tw-h-auto tw-min-w-[auto] tw-grow tw-basis-0 tw-p-2;
     }
   }
 
   &_disabled &__field-wrapper,
   &_disabled &__field {
-    @apply tw-bg-[#fafafa] tw-text-[#424242];
+    @apply tw-bg-[color:var(--multivalue-disabled-background-color)] tw-text-[color:var(--multivalue-disabled-text-color)];
   }
-}
 
-.slide-up-enter-active,
-.slide-up-leave-active {
-  transition: all 0.25s ease-out;
-}
+  &__input {
+    @apply tw-px-3;
+  }
 
-.slide-up-enter-from {
-  opacity: 0;
-  transform: translateY(5px);
-}
+  &__loading {
+    @apply tw-flex tw-items-center tw-flex-nowrap tw-px-3 tw-text-[color:var(--select-clear-color)];
+  }
 
-.slide-up-leave-to {
-  opacity: 0;
-  transform: translateY(-5px);
+  &__loading-icon {
+    @apply tw-animate-spin;
+  }
+
+  &__hint {
+    @apply tw-text-[color:var(--multivalue-placeholder-color)] tw-mt-1 tw-break-words tw-p-0;
+  }
 }
 </style>

package/ui/components/molecules/vc-notification/vc-notification.vue

@@ -2,20 +2,20 @@
   <div
     :id="String(notificationId)"
     ref="nodeRef"
-    class="vc-notification tw-flex tw-items-center tw-mt-1 tw-mb-3 tw-mx-2 tw-bg-[color:var(--notification-background)] tw-border tw-border-solid tw-border-[color:#eef0f2] tw-box-border tw-shadow-[2px_2px_11px_rgba(126,142,157,0.4)] tw-rounded-[var(--notification-border-radius)] tw-overflow-hidden tw-py-2 tw-px-4 tw-max-w-[600px] tw-justify-between"
+    class="vc-notification"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
   >
-    <div class="tw-flex tw-flex-row tw-items-center">
+    <div class="vc-notification__content-wrapper">
       <VcIcon
         :icon="types[type ?? 'default']?.icon"
         :style="{ color: types[type ?? 'default']?.color }"
         size="l"
-        class="tw-mr-2"
+        class="vc-notification__icon"
       ></VcIcon>
       <div
         v-if="typeof content === 'string'"
-        class="vc-notification__content tw-text-[color:var(--notification-content-color)] tw-whitespace-pre-line tw-overflow-auto tw-max-h-[100px]"
+        class="vc-notification__content"
       >
         {{ content }}
       </div>
@@ -25,7 +25,7 @@
     </div>
     <VcIcon
       icon="fas fa-times"
-      class="tw-cursor-pointer tw-text-[color:var(--notification-dismiss-color)] tw-ml-2"
+      class="vc-notification__dismiss-icon"
       size="s"
       @click.stop="closeNotification"
     ></VcIcon>
@@ -123,21 +123,46 @@ function onMouseLeave() {
 
 <style lang="scss">
 :root {
-  --notification-background: #ffffff;
-  --notification-border-radius: 4px;
-  --notification-box-shadow: 2px 2px 11px rgba(126, 142, 157, 0.4);
-  --notification-dismiss-color: #83a3be;
-  --notification-content-color: #8c9cab;
-
-  --notification-warning: #f89406;
-  --notification-error: #ef796f;
-  --notification-success: #87b563;
-  --notification-info: #bdd1df;
+  --notification-background: var(--additional-50);
+  --notification-border-radius: var(--multivalue-border-radius);
+  --notification-border-color: var(--base-border-color, var(--neutrals-200));
+  --notification-dismiss-color: var(--secondary-500);
+  --notification-content-color: var(--neutrals-600);
+
+  --notification-warning: var(--warning-500);
+  --notification-error: var(--danger-500);
+  --notification-success: var(--success-500);
+  --notification-info: var(--info-500);
+
+  --notification-shadow-color: var(--neutrals-300);
+  --notification-shadow: 2px 2px 11px rgb(from var(--notification-shadow-color) r g b / 40%);
 }
 
 .vc-notification {
+  @apply tw-flex tw-items-center tw-box-border;
+  @apply tw-bg-[color:var(--notification-background)] tw-border tw-border-solid tw-border-[color:var(--notification-border-color)];
+  @apply tw-rounded-[var(--notification-border-radius)] tw-overflow-hidden tw-py-2 tw-px-4;
+  @apply tw-max-w-[600px] tw-justify-between;
+  @apply tw-shadow-[var(--notification-shadow)];
   pointer-events: all;
 
+  &__content-wrapper {
+    @apply tw-flex tw-items-center tw-flex-row;
+  }
+
+  &__icon {
+    @apply tw-mr-2;
+  }
+
+  &__content {
+    @apply tw-text-[color:var(--notification-content-color)] tw-whitespace-pre-line tw-overflow-auto;
+    @apply tw-max-h-[100px];
+  }
+
+  &__dismiss-icon {
+    @apply tw-cursor-pointer tw-text-[color:var(--notification-dismiss-color)] tw-ml-2;
+  }
+
   .vc-app_mobile {
     @apply tw-max-w-[80%];
   }

package/ui/components/molecules/vc-pagination/vc-pagination.vue

@@ -53,7 +53,7 @@
           <template #control="{ modelValue }">
             <input
               :value="modelValue"
-              class="tw-w-full"
+              class="vc-pagination__input"
               :max="props.pages"
               @input="(event) => handleInputChange((event.target as HTMLInputElement)?.value)"
               @keyup.enter="setPage(jumpPage)"
@@ -166,19 +166,19 @@ const pagesToShow = computed(() => {
 :root {
   --pagination-item-width: 30px;
   --pagination-item-height: 30px;
-  --pagination-item-color: #000000;
-  --pagination-item-color-hover: #000000;
-  --pagination-item-color-current: #ffffff;
-  --pagination-item-color-disabled: #9c9c9c;
-  --pagination-item-background-color: #ffffff;
-  --pagination-item-background-color-hover: #dfeef9;
-  --pagination-item-background-color-current: #43b0e6;
-  --pagination-item-background-color-disabled: #ffffff;
+  --pagination-item-color: var(--base-text-color, var(--neutrals-950));
+  --pagination-item-color-hover: var(--primary-500);
+  --pagination-item-color-current: var(--additional-50);
+  --pagination-item-color-disabled: var(--neutrals-400);
+  --pagination-item-background-color: var(--additional-50);
+  --pagination-item-background-color-hover: var(--primary-100);
+  --pagination-item-background-color-current: var(--primary-500);
+  --pagination-item-background-color-disabled: var(--neutrals-100);
   --pagination-item-border-radius: 3px;
-  --pagination-item-border-color: #eaecf2;
-  --pagination-item-border-color-hover: #eaecf2;
-  --pagination-item-border-color-current: #eaecf2;
-  --pagination-item-border-color-disabled: #eaecf2;
+  --pagination-item-border-color: var(--secondary-100);
+  --pagination-item-border-color-hover: var(--neutrals-200);
+  --pagination-item-border-color-current: var(--neutrals-200);
+  --pagination-item-border-color-disabled: var(--neutrals-200);
 }
 
 .vc-pagination {
@@ -207,8 +207,8 @@ const pagesToShow = computed(() => {
     tw-rounded-[var(--pagination-item-border-radius)]
     tw-text-[color:var(--pagination-item-color)]
     tw-box-border
-    tw-transition  tw-duration-200
-    tw-mr-3 tw-select-none last:tw-mr-0;
+    tw-transition tw-duration-200
+    tw-mr-3 tw-select-none last:tw-mr-0 tw-text-xs;
 
     &_current,
     &_current:hover {
@@ -243,5 +243,9 @@ const pagesToShow = computed(() => {
     width: 50px;
     text-align: center;
   }
+
+  &__input {
+    @apply tw-w-full;
+  }
 }
 </style>

package/ui/components/molecules/vc-radio-button/vc-radio-button.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vc-radio-button">
-    <label class="tw-text-base tw-flex tw-items-center tw-gap-[5px]">
+    <label class="vc-radio-button__label">
       <input
         type="radio"
         :name="name"
@@ -13,18 +13,19 @@
         @change="onChange"
       />
 
-      {{ label }}</label
-    >
+      {{ label }}
+    </label>
     <slot
       v-if="errorMessage"
       name="error"
     >
-      <VcHint class="vc-radio-button__error tw-mt-1">
+      <VcHint class="vc-radio-button__error">
         {{ errorMessage }}
       </VcHint>
     </slot>
   </div>
 </template>
+
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import * as _ from "lodash-es";
@@ -96,19 +97,22 @@ function onChange() {
 
 <style lang="scss">
 :root {
-  --radio-active: #43b0e6;
-  --radio-active-inner: #fff;
-  --radio-focus: 2px rgba(39, 94, 254, 0.3);
-  --radio-border: #bbc1e1;
-  --radio-border-hover: #43b0e6;
-  --radio-background: #fff;
-  --radio-disabled: #f6f8ff;
-  --radio-disabled-inner: #e1e6f9;
-  --radio-error: #f14e4e;
+  --radio-active: var(--primary-400);
+  --radio-active-inner: var(--additional-50);
+  --radio-border: var(--secondary-300);
+  --radio-border-hover: var(--primary-400);
+  --radio-background: var(--additional-50);
+  --radio-disabled: var(--secondary-100);
+  --radio-disabled-inner: var(--secondary-200);
+  --radio-error: var(--base-error-color, var(--danger-500));
   --radio-size: 14px;
 }
 
 .vc-radio-button {
+  &__label {
+    @apply tw-text-base tw-flex tw-items-center tw-gap-1.5;
+  }
+
   input[type="radio"] {
     border-radius: 50%;
     appearance: none;
@@ -176,22 +180,13 @@ function onChange() {
       }
     }
 
-    & + label {
-      font-size: 14px;
-      line-height: 21px;
-      display: inline-block;
-      vertical-align: top;
-      cursor: pointer;
-      margin-left: 4px;
-    }
-
     &.vc-radio-button_error {
       --radio-border-color: var(--radio-error);
     }
   }
 
   &__error {
-    --hint-color: var(--radio-error);
+    @apply tw-mt-1 [--hint-color:var(--radio-error)];
   }
 }
 </style>

package/ui/components/molecules/vc-rating/vc-rating.vue

@@ -3,7 +3,7 @@
     <!-- Rating label -->
     <VcLabel
       v-if="label"
-      class="tw-mb-2"
+      class="vc-rating__label"
     >
       <span>{{ label }}</span>
       <template
@@ -16,7 +16,7 @@
 
     <!-- Rating icon -->
     <template v-if="modelValue">
-      <template v-if="variant == 'stars'">
+      <template v-if="variant === 'stars'">
         <VcIcon
           v-for="index in modelValue"
           :key="index"
@@ -32,7 +32,7 @@
       </template>
       <template v-else>
         <VcIcon
-          v-if="variant == 'star-and-text'"
+          v-if="variant === 'star-and-text'"
           icon="fas fa-star"
           class="vc-rating__icon"
         ></VcIcon>
@@ -68,7 +68,11 @@ defineSlots<{
 
 <style lang="scss">
 :root {
-  --rating-placeholder-color: #a5a5a5;
+  --rating-placeholder-color: var(--neutrals-400);
+
+  --rating-special-color: var(--warning-500);
+  --rating-special-color-hover: var(--warning-600);
+  --rating-special-color-disabled: var(--warning-200);
 }
 
 .vc-rating {
@@ -78,7 +82,7 @@ defineSlots<{
     @apply tw-text-[color:var(--rating-placeholder-color)];
   }
   &__icon {
-    @apply tw-text-[color:var(--special-color)] tw-mr-1;
+    @apply tw-text-[color:var(--rating-special-color)] tw-mr-1;
     font-size: inherit;
   }
   &__rating {