@vc-shell/framework 1.0.290 → 1.0.291

package/ui/components/atoms/vc-container/vc-container.vue

@@ -130,18 +130,30 @@ defineExpose({
 </script>
 
 <style lang="scss">
+:root {
+  --container-overscroll-icon-color: var(--secondary-600);
+  --container-text-color: var(--neutrals-400);
+  --container-padding: 16px;
+  --container-transition-duration: 0.3s;
+  --container-transition-ease: ease-out;
+  --container-shadow-color: var(--additional-950);
+  --container-shadow-opacity: 0.1;
+  --container-shadow: 0 3px 2px rgba(var(--container-shadow-color), var(--container-shadow-opacity)) inset;
+}
+
 .vc-container {
   @apply tw-w-full tw-h-full tw-overflow-hidden tw-box-border tw-flex tw-flex-col tw-relative;
 
   &_shadow {
-    @apply tw-shadow-[0_3px_2px_rgba(0,0,0,0.1)_inset];
+    @apply tw-shadow-[--container-shadow];
   }
 
   &__overscroll {
-    @apply tw-absolute tw-w-full [transition:top_0.3s_ease-out];
+    @apply tw-absolute tw-w-full;
+    transition: top var(--container-transition-duration) var(--container-transition-ease);
 
     &_touching {
-      @apply tw-transition-none;
+      transition: none;
     }
   }
 
@@ -150,17 +162,19 @@ defineExpose({
   }
 
   &__overscroll-icon {
-    @apply tw-text-[color:#a1c0d4];
+    @apply tw-text-[color:var(--container-overscroll-icon-color)];
   }
 
   &__overscroll span {
-    @apply tw-ml-2 tw-text-sm tw-text-gray-500;
+    @apply tw-ml-2 tw-text-sm;
+    color: var(--container-text-color);
   }
 
   &__inner {
     @apply tw-relative tw-overflow-y-auto tw-overflow-x-hidden
-    tw-flex-1 tw-p-[var(--scroll-padding)]
-    [transition:top_0.3s_ease-out];
+    tw-flex-1;
+    transition: top var(--container-transition-duration) var(--container-transition-ease);
+    padding: var(--container-padding);
 
     &_touching {
       transition: none;
@@ -168,7 +182,11 @@ defineExpose({
   }
 
   &_nopadding &__inner {
-    @apply tw-p-0;
+    padding: 0;
+  }
+
+  &_shadow {
+    @apply tw-shadow-[--container-shadow];
   }
 }
 </style>

package/ui/components/atoms/vc-hint/vc-hint.vue

@@ -1,11 +1,17 @@
 <template>
-  <div class="tw-text-[color:var(--hint-color)] tw-text-xs">
+  <div class="vc-hint">
     <slot></slot>
   </div>
 </template>
 
 <style lang="scss">
 :root {
-  --hint-color: #a5a5a5;
+  --hint-color: var(--neutrals-500);
+  --hint-font-size: 12px;
+}
+
+.vc-hint {
+  color: var(--hint-color);
+  font-size: var(--hint-font-size);
 }
 </style>

package/ui/components/atoms/vc-icon/vc-icon.vue

@@ -25,9 +25,9 @@ withDefaults(defineProps<Props>(), {
   --icon-size-xxl: 30px;
   --icon-size-xxxl: 64px;
 
-  --icon-color-success: #99c17a;
-  --icon-color-danger: #f34747;
-  --icon-color-warning: #f89406;
+  --icon-color-success: var(--success-500);
+  --icon-color-danger: var(--danger-500);
+  --icon-color-warning: var(--warning-500);
 }
 
 $sizes: xs, s, m, l, xl, xxl, xxxl;

package/ui/components/atoms/vc-image/vc-image.vue

@@ -5,20 +5,20 @@
   >
     <div
       :class="[
+        'vc-image__container',
         `vc-image_${aspect}`,
         {
-          'tw-rounded-full': rounded,
-          'tw-rounded-[3px] tw-border tw-border-solid tw-border-[color:#efefef]': bordered,
-          'tw-cursor-pointer': clickable,
+          'vc-image__container--rounded': rounded,
+          'vc-image__container--bordered': bordered,
+          'vc-image__container--clickable': clickable,
         },
-        'tw-relative',
       ]"
       :style="imageHandler"
       @click="onClick"
     >
       <div
         v-if="!src"
-        class="tw-absolute tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center tw-text-[#83a3be]"
+        class="vc-image__placeholder"
       >
         <VcIcon
           :icon="emptyIcon"
@@ -79,6 +79,10 @@ function onClick(): void {
   --image-size-l: 96px;
   --image-size-xl: 128px;
   --image-size-xxl: 145px;
+
+  --image-border-radius: 3px;
+  --image-border-color: var(--base-border-color, var(--neutrals-200));
+  --image-empty-icon-color: var(--secondary-500);
 }
 
 $aspects: (
@@ -88,7 +92,7 @@ $aspects: (
   3x2: 66.66%,
 );
 
-$paddings: xs, s, m, l, xl, xxl;
+$sizes: xs, s, m, l, xl, xxl;
 
 .vc-image {
   @apply tw-inline-block tw-relative;
@@ -99,14 +103,34 @@ $paddings: xs, s, m, l, xl, xxl;
     }
   }
 
-  @each $padding in $paddings {
-    &_#{$padding} {
-      @apply tw-w-[var(--image-size-#{$padding})] tw-max-w-full tw-min-w-0;
+  @each $size in $sizes {
+    &_#{$size} {
+      @apply tw-w-[var(--image-size-#{$size})] tw-max-w-full tw-min-w-0;
     }
   }
 
   &_auto {
     @apply tw-w-full;
   }
+
+  &__container {
+    @apply tw-relative;
+  }
+
+  &__container--rounded {
+    @apply tw-rounded-full;
+  }
+
+  &__container--bordered {
+    @apply tw-rounded-[var(--image-border-radius)] tw-border tw-border-solid tw-border-[color:var(--image-border-color)];
+  }
+
+  &__container--clickable {
+    @apply tw-cursor-pointer;
+  }
+
+  &__placeholder {
+    @apply tw-absolute tw-w-full tw-h-full tw-flex tw-items-center tw-justify-center tw-text-[color:var(--image-empty-icon-color)];
+  }
 }
 </style>

package/ui/components/atoms/vc-label/vc-label.vue

@@ -1,22 +1,22 @@
 <template>
-  <div class="tw-flex tw-flex-row tw-justify-between tw-items-center tw-relative">
-    <div class="tw-flex-nowrap tw-font-bold tw-truncate">
-      <span class="tw-truncate">
+  <div class="vc-label">
+    <div class="vc-label__text">
+      <span class="vc-label__content">
         <slot></slot>
       </span>
       <span
         v-if="required"
-        class="tw-text-[color:var(--label-required-color)] tw-ml-1"
+        class="vc-label__required"
         >*</span
       >
     </div>
     <span
       v-if="$slots['tooltip']"
-      class="tw-grow tw-basis-0 tw-ml-1 tw-relative"
+      class="vc-label__tooltip"
     >
       <VcTooltip placement="top-start">
         <VcIcon
-          class="tw-text-[color:var(--label-tooltip-color)]"
+          class="vc-label__tooltip-icon"
           :icon="tooltipIcon"
           size="s"
         ></VcIcon>
@@ -28,7 +28,7 @@
 
     <div
       v-if="multilanguage"
-      class="tw-text-[color:var(--app-menu-item-icon-color)] tw-shrink-0"
+      class="vc-label__language"
     >
       {{ currentLanguage }}
     </div>
@@ -57,7 +57,36 @@ defineSlots<{
 
 <style lang="scss">
 :root {
-  --label-required-color: #f14e4e;
-  --label-tooltip-color: #d3e0ee;
+  --label-required-color: var(--danger-500);
+  --label-tooltip-color: var(--info-400);
+  --label-lang-color: var(--neutrals-500);
+}
+
+.vc-label {
+  @apply tw-flex tw-flex-row tw-justify-between tw-items-center tw-relative;
+
+  &__text {
+    @apply tw-flex-nowrap tw-font-bold tw-truncate;
+  }
+
+  &__content {
+    @apply tw-truncate tw-text-sm;
+  }
+
+  &__required {
+    @apply tw-text-[color:var(--label-required-color)] tw-ml-1;
+  }
+
+  &__tooltip {
+    @apply tw-grow-0 tw-basis-0 tw-ml-1 tw-relative tw-mr-auto;
+  }
+
+  &__tooltip-icon {
+    @apply tw-text-[color:var(--label-tooltip-color)];
+  }
+
+  &__language {
+    @apply tw-text-[color:var(--label-lang-color)] tw-shrink-0 tw-text-sm;
+  }
 }
 </style>

package/ui/components/atoms/vc-link/vc-link.vue

@@ -2,9 +2,8 @@
   <div
     class="vc-link"
     :class="{
-      'tw-text-[color:var(--link-text-color-active)] tw-no-underline': active,
-      'tw-cursor-not-allowed tw-text-[color:var(--link-text-color-disabled)] hover:tw-text-[color:var(--link-text-color-disabled)] tw-no-underline':
-        disabled,
+      'vc-link--active': active,
+      'vc-link--disabled': disabled,
     }"
     @click="onClickFn"
   >
@@ -35,13 +34,21 @@ function onClickFn(): void {
 
 <style lang="scss">
 :root {
-  --link-text-color: hsl(200, 77%, 58%);
-  --link-text-color-hover: hsl(200, 77%, 48%);
-  --link-text-color-active: hsl(200, 77%, 48%);
-  --link-text-color-disabled: hsl(200, 77%, 73%);
+  --link-text-color: var(--primary-500);
+  --link-text-color-hover: var(--primary-400);
+  --link-text-color-active: var(--primary-700);
+  --link-text-color-disabled: var(--neutrals-300);
 }
 
 .vc-link {
-  @apply tw-text-[color:var(--link-text-color)] tw-no-underline tw-cursor-pointer tw-transition  tw-duration-200 tw-inline-block hover:tw-text-[color:var(--link-text-color-hover)] hover:tw-underline;
+  @apply tw-text-[color:var(--link-text-color)] tw-no-underline tw-cursor-pointer tw-transition tw-duration-200 tw-inline-block hover:tw-text-[color:var(--link-text-color-hover)] hover:tw-underline;
+
+  &--active {
+    @apply tw-text-[color:var(--link-text-color-active)] tw-no-underline hover:tw-text-[color:var(--link-text-color-active)] hover:tw-no-underline;
+  }
+
+  &--disabled {
+    @apply tw-cursor-not-allowed tw-text-[color:var(--link-text-color-disabled)] tw-no-underline hover:tw-text-[color:var(--link-text-color-disabled)] hover:tw-no-underline;
+  }
 }
 </style>

package/ui/components/atoms/vc-loading/vc-loading.vue

@@ -1,19 +1,17 @@
 <template>
   <div
-    class="tw-absolute tw-items-center tw-justify-center tw-flex-col tw-z-[9998] tw-hidden tw-w-full tw-h-full tw-box-border"
+    class="vc-loading-overlay"
     :class="{
-      '!tw-flex tw-backdrop-blur-[3px] tw-bg-[rgba(255, 255, 255, 0.5)]': active,
+      'vc-loading-overlay--active': active,
     }"
   >
-    <div class="tw-relative tw-w-[142px] tw-h-[40px] tw-z-[1]">
-      <span
-        class="tw-absolute tw-w-4 tw-h-4 tw-top-[12px] tw-left-[15px] tw-bg-[#319ed4] tw-rounded-full tw-translate-x-0 tw-animate-loadingMarker"
-      ></span>
-      <div class="tw-translate-x-0 tw-mt-3 tw-ml-[31px] tw-animate-loadingMarkers">
+    <div class="vc-loading-overlay__content">
+      <span class="vc-loading-overlay__main-marker"></span>
+      <div class="vc-loading-overlay__markers">
         <span
           v-for="item in 3"
           :key="`marker_${item}`"
-          class="tw-block tw-float-left tw-w-4 tw-h-4 tw-bg-[#319ed4] tw-rounded-full tw-ml-4"
+          class="vc-loading-overlay__marker"
         ></span>
       </div>
     </div>
@@ -27,3 +25,34 @@ export interface Props {
 
 defineProps<Props>();
 </script>
+
+<style lang="scss">
+:root {
+  --loading-marker-color: var(--primary-500);
+}
+
+.vc-loading-overlay {
+  @apply tw-absolute tw-items-center tw-justify-center tw-flex-col tw-z-[9998] tw-w-full tw-h-full tw-box-border tw-hidden;
+
+  &--active {
+    @apply tw-flex #{!important};
+    @apply tw-backdrop-blur-[3px];
+  }
+
+  &__content {
+    @apply tw-relative tw-w-36 tw-h-10 tw-z-[1];
+  }
+
+  &__main-marker {
+    @apply tw-absolute tw-w-4 tw-h-4 tw-top-3 tw-left-4 tw-bg-[color:var(--loading-marker-color)] tw-rounded-full tw-translate-x-0 tw-animate-loadingMarker;
+  }
+
+  &__markers {
+    @apply tw-translate-x-0 tw-mt-3 tw-ml-8 tw-animate-loadingMarkers;
+  }
+
+  &__marker {
+    @apply tw-block tw-float-left tw-w-4 tw-h-4 tw-bg-[color:var(--loading-marker-color)] tw-rounded-full tw-ml-4;
+  }
+}
+</style>

package/ui/components/atoms/vc-progress/vc-progress.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    :class="[
-      'vc-progress tw-border-[length:var(--progressbar-border-width)] tw-border-[color:var(--progressbar-border-color)] tw-rounded-[var(--progressbar-border-radius)] tw-h-[var(--progressbar-height)] tw-transition  tw-duration-200 tw-box-border tw-bg-[color:var(--progressbar-background-color)]',
-      variant,
-    ]"
+    class="vc-progress"
+    :class="{
+      'vc-progress--striped': variant === 'striped',
+    }"
   >
     <div
-      class="vc-progress__value tw-bg-[color:var(--progressbar-foreground-color)] tw-transition tw-duration-200 tw-h-full"
+      class="vc-progress__value"
       :style="`width: ${value}%`"
     ></div>
   </div>
@@ -28,33 +28,41 @@ withDefaults(defineProps<Props>(), {
 :root {
   --progressbar-height: 16px;
   --progressbar-border-radius: 2px;
-  --progressbar-background-color: #ffffff;
-  --progressbar-foreground-color: #e1eff9;
+  --progressbar-background-color: var(--additional-50);
+  --progressbar-foreground-color: var(--accent-200);
   --progressbar-border-width: 1px;
-  --progressbar-border-color: #e1eff9;
+  --progressbar-border-color: var(--base-border-color, var(--neutrals-200));
+  --progressbar-striped-bg: linear-gradient(
+        45deg,
+        transparent 50%,
+        var(--accent-200) 50%,
+        var(--accent-200) 75%,
+        transparent 75%
+      )
+      left/30px 30px repeat-x,
+    var(--accent-50);
+  --progressbar-striped-color: var(--accent-200);
 }
 
 @keyframes change {
   from {
-    background-position:
-      0 0,
-      left;
+    background-position: 0 0;
   }
   to {
-    background-position:
-      30px 0,
-      left;
+    background-position: 30px 0;
   }
 }
 
 .vc-progress {
-  &.striped {
-    .vc-progress__value {
-      background:
-        linear-gradient(45deg, transparent 50%, #acd2f2 50%, #acd2f2 75%, transparent 75%) left/30px 30px repeat-x,
-        #e1f0fe;
-      animation: change 1s linear infinite;
-    }
+  @apply tw-border-[length:var(--progressbar-border-width)] tw-border-[color:var(--progressbar-border-color)] tw-rounded-[var(--progressbar-border-radius)] tw-h-[var(--progressbar-height)] tw-transition tw-duration-200 tw-box-border tw-bg-[color:var(--progressbar-background-color)];
+
+  &__value {
+    @apply tw-bg-[color:var(--progressbar-foreground-color)] tw-transition tw-duration-200 tw-h-full;
+  }
+
+  &--striped .vc-progress__value {
+    background: var(--progressbar-striped-bg);
+    animation: change 1s linear infinite;
   }
 }
 </style>

package/ui/components/atoms/vc-row/vc-row.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vc-row tw-flex-nowrap tw-flex tw-items-stretch">
+  <div class="vc-row">
     <slot></slot>
   </div>
 </template>
@@ -13,8 +13,10 @@ defineSlots<{
 
 <style lang="scss">
 .vc-row {
+  @apply tw-flex tw-flex-nowrap tw-items-stretch;
+
   .vc-app_mobile & {
-    display: grid;
+    @apply tw-grid;
   }
 }
 </style>

package/ui/components/atoms/vc-status/vc-status.vue

@@ -6,7 +6,7 @@
     <slot></slot>
   </div>
 </template>
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+
 <script lang="ts" setup>
 export interface Props {
   variant?: "info" | "warning" | "danger" | "success" | "light-danger" | "info-dark" | "primary";
@@ -20,6 +20,7 @@ withDefaults(defineProps<Props>(), {
 });
 
 defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   default: (props?: any) => any;
 }>();
 </script>
@@ -33,45 +34,53 @@ defineSlots<{
   --status-border-radius-extended: 4px;
   --status-border-width: 1px;
 
-  --status-info-color: #ffffff;
-  --status-info-main-color: #bdd1df;
+  --status-info-color: var(--neutrals-50);
+  --status-info-main-color: var(--info-300);
+
+  --status-warning-color: var(--neutrals-50);
+  --status-warning-main-color: var(--warning-500);
 
-  --status-warning-color: #ffffff;
-  --status-warning-main-color: #f89406;
+  --status-danger-color: var(--neutrals-50);
+  --status-danger-main-color: var(--danger-500);
 
-  --status-danger-color: #ffffff;
-  --status-danger-main-color: #ef796f;
+  --status-success-color: var(--neutrals-50);
+  --status-success-main-color: var(--success-500);
 
-  --status-success-color: #ffffff;
-  --status-success-main-color: #87b563;
+  --status-light-danger-color: var(--neutrals-50);
+  --status-light-danger-main-color: var(--danger-200);
 
-  --status-light-danger-color: #333333;
-  --status-light-danger-main-color: #ffefef;
+  --status-info-dark-color: var(--neutrals-50);
+  --status-info-dark-main-color: var(--info-600);
 
-  --status-info-dark-color: #ffffff;
-  --status-info-dark-main-color: #82a6bd;
+  --status-primary-main-color: var(--primary-500);
+  --status-primary-color: var(--neutrals-50);
 
-  --status-primary-main-color: #319ed4;
-  --status-primary-color: #ffffff;
+  --status-outline-bg-color: var(--additional-50);
 }
 
 $variants: info, warning, danger, success, light-danger, info-dark, primary;
 
 .vc-status {
-  @apply tw-inline-block tw-rounded-[var(--status-border-radius)] tw-py-1 tw-px-3.5 tw-text-base tw-font-normal tw-whitespace-nowrap;
+  @apply tw-inline-block tw-font-normal tw-whitespace-nowrap tw-text-sm tw-truncate tw-text-center tw-border tw-border-solid tw-box-border tw-w-full;
+
+  @apply tw-py-1 tw-px-3.5 tw-rounded-[var(--status-border-radius)];
+
+  border-width: var(--status-border-width);
 
   @each $variant in $variants {
-    &_#{$variant} {
-      @apply tw-text-[color:var(--status-#{$variant}-color)] tw-border tw-border-solid tw-border-[color:var(--status-#{$variant}-main-color)] tw-bg-[color:var(--status-#{$variant}-main-color)];
+    &.vc-status_#{$variant} {
+      @apply tw-text-[color:var(--status-#{$variant}-color)] tw-border-[color:var(--status-#{$variant}-main-color)] tw-bg-[color:var(--status-#{$variant}-main-color)];
 
       &.vc-status_outline {
-        @apply tw-text-[color:var(--status-#{$variant}-main-color)] tw-border tw-border-solid tw-border-[color:var(--status-#{$variant}-main-color)] tw-bg-white;
+        @apply tw-text-[color:var(--status-#{$variant}-main-color)] tw-bg-[color:var(--status-outline-bg-color)];
       }
     }
   }
 
   &.vc-status_extended {
-    @apply tw-whitespace-normal tw-p-[var(--status-padding-extended)] tw-rounded-[var(--status-border-radius-extended)];
+    @apply tw-whitespace-normal tw-rounded-[var(--status-border-radius-extended)];
+
+    padding: var(--status-padding-extended);
   }
 }
 </style>

package/ui/components/atoms/vc-status-icon/vc-status-icon.vue

@@ -1,15 +1,15 @@
 <template>
-  <div>
+  <div class="vc-status-icon">
     <template v-if="status">
       <VcIcon
         icon="fas fa-check-circle"
-        class="tw-text-[color:#87b563]"
+        class="vc-status-icon__icon vc-status-icon__icon--success"
       ></VcIcon>
     </template>
     <template v-else>
       <VcIcon
         icon="fas fa-times-circle"
-        class="tw-text-[color:#bdd1df]"
+        class="vc-status-icon__icon vc-status-icon__icon--info"
       ></VcIcon>
     </template>
   </div>
@@ -23,3 +23,20 @@ export interface Props {
 
 defineProps<Props>();
 </script>
+
+<style lang="scss">
+:root {
+  --status-success-main-color: var(--success-400);
+  --status-info-main-color: var(--info-300);
+}
+
+.vc-status-icon {
+  &__icon--success {
+    @apply tw-text-[color:var(--status-success-main-color)];
+  }
+
+  &__icon--info {
+    @apply tw-text-[color:var(--status-info-main-color)];
+  }
+}
+</style>