@vc-shell/framework 1.0.290 → 1.0.292

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

@@ -10,12 +10,12 @@
       :icon="icon"
       :size="small ? 'xs' : iconSize"
     ></VcIcon>
-    <span
+    <p
       v-if="$slots['default']"
       class="vc-button__title"
     >
       <slot></slot>
-    </span>
+    </p>
   </button>
 </template>
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
@@ -77,24 +77,24 @@ function onClick(e: Event): void {
 
 <style lang="scss">
 :root {
-  --button-primary-background-color: 65, 175, 230;
-  --button-primary-background-color-hover: 49, 158, 212;
-  --button-primary-background-color-disabled: 169, 221, 246;
-  --button-primary-text-color: 255, 255, 255;
+  --button-primary-background-color: var(--primary-500);
+  --button-primary-background-color-hover: var(--primary-600);
+  --button-primary-background-color-disabled: var(--primary-300);
+  --button-primary-text-color: var(--neutrals-50);
   --button-primary-text-color-outlined: var(--button-primary-background-color);
   --button-primary-text-color-hover: var(--button-primary-background-color-hover);
 
-  --button-warning-background-color: 248, 148, 6;
-  --button-warning-background-color-hover: 235, 139, 3;
-  --button-warning-background-color-disabled: 254, 212, 152;
-  --button-warning-text-color: 255, 255, 255;
+  --button-warning-background-color: var(--warning-500);
+  --button-warning-background-color-hover: var(--warning-600);
+  --button-warning-background-color-disabled: var(--warning-300);
+  --button-warning-text-color: var(--neutrals-50);
   --button-warning-text-color-outlined: var(--button-warning-background-color);
   --button-warning-text-color-hover: var(--button-warning-background-color-hover);
 
-  --button-danger-background-color: 255, 74, 74;
-  --button-danger-background-color-hover: 215, 58, 58;
-  --button-danger-background-color-disabled: 255, 94, 94;
-  --button-danger-text-color: 255, 255, 255;
+  --button-danger-background-color: var(--danger-500);
+  --button-danger-background-color-hover: var(--danger-600);
+  --button-danger-background-color-disabled: var(--danger-300);
+  --button-danger-text-color: var(--neutrals-50);
   --button-danger-text-color-outlined: var(--button-danger-background-color);
   --button-danger-text-color-hover: var(--button-danger-background-color-hover);
 
@@ -106,6 +106,9 @@ function onClick(e: Event): void {
 
   --button-height: 36px;
   --button-height-small: 28px;
+
+  --button-raised-shadow-color: var(--secondary-200);
+  --button-raised-shadow: 1px 4px 10px rgb(from var(--button-raised-shadow-color) r g b / 100%);
 }
 
 $variants: primary, warning, danger;
@@ -120,13 +123,13 @@ $variants: primary, warning, danger;
       @apply tw-inline-flex tw-items-center tw-font-medium tw-text-sm tw-cursor-pointer tw-box-border tw-transition tw-duration-200
       tw-rounded-[var(--button-border-radius)] tw-px-[var(--button-padding-hor)] tw-py-[var(--button-padding-vert)]
       tw-min-h-[var(--button-height)]
-      tw-bg-[color:rgb(var(--button-#{$variant}-background-color))]
+      tw-bg-[color:var(--button-#{$variant}-background-color)]
       tw-flex tw-justify-center
-      tw-text-[color:rgb(var(--button-#{$variant}-text-color))]
-      hover:tw-bg-[color:rgb(var(--button-#{$variant}-background-color-hover))]
-      focus:tw-bg-[color:rgb(var(--button-#{$variant}-background-color-hover))]
+      tw-text-[color:var(--button-#{$variant}-text-color)]
+      hover:tw-bg-[color:var(--button-#{$variant}-background-color-hover)]
+      focus:tw-bg-[color:var(--button-#{$variant}-background-color-hover)]
       disabled:tw-cursor-not-allowed
-      disabled:tw-bg-[color:rgb(var(--button-#{$variant}-background-color-disabled))];
+      disabled:tw-bg-[color:var(--button-#{$variant}-background-color-disabled)];
 
       &.vc-button_small {
         @apply tw-py-[var(--button-padding-vert-small)] tw-min-h-[var(--button-height-small)] tw-px-[var(--button-padding-hor-small)] tw-font-normal tw-text-xs;
@@ -137,44 +140,44 @@ $variants: primary, warning, danger;
       }
 
       &.vc-button_outline {
-        @apply tw-bg-transparent tw-border tw-border-[color:rgb(var(--button-#{$variant}-background-color))]
-        tw-text-[color:rgb(var(--button-#{$variant}-text-color-outlined))]
-        hover:tw-text-[color:rgb(var(--button-#{$variant}-text-color-hover))]
+        @apply tw-bg-transparent tw-border tw-border-[color:var(--button-#{$variant}-background-color)]
+        tw-text-[color:var(--button-#{$variant}-text-color-outlined)]
+        hover:tw-text-[color:var(--button-#{$variant}-text-color-hover)]
         hover:tw-bg-transparent
-        hover:tw-border-[color:rgb(var(--button-#{$variant}-background-color-hover))]
-        disabled:tw-text-[color:rgba(var(--button-#{$variant}-text-color-hover),0.5)]
-        disabled:tw-border-[color:rgba(var(--button-#{$variant}-background-color),0.5)]
+        hover:tw-border-[color:var(--button-#{$variant}-background-color-hover)]
+        disabled:tw-text-[color:rgb(from_var(--button-#{$variant}-text-color-hover)_r_g_b/50%)]
+        disabled:tw-border-[color:rgb(from_var(--button-#{$variant}-background-color)_r_g_b/50%)]
         disabled:tw-bg-transparent;
       }
 
       &.vc-button_text {
         @apply tw-border-none tw-bg-transparent tw-p-0 tw-min-h-0
-        tw-text-[color:rgb(var(--button-#{$variant}-background-color))]
-        hover:tw-text-[color:rgb(var(--button-#{$variant}-background-color-hover))]
-        focus:tw-text-[color:rgb(var(--button-#{$variant}-background-color-hover))]
-        disabled:tw-text-[color:rgba(var(--button-#{$variant}-background-color),0.5)];
+        tw-text-[color:var(--button-#{$variant}-background-color)]
+        hover:tw-text-[color:var(--button-#{$variant}-background-color-hover)]
+        focus:tw-text-[color:var(--button-#{$variant}-background-color-hover)]
+        disabled:tw-text-[color:rgb(from_var(--button-#{$variant}-background-color)_r_g_b/50%)];
       }
 
       &.vc-button_raised {
-        @apply tw-shadow-[1px_4px_10px_rgba(197,206,214,1)] tw-px-[var(--button-padding-hor)] tw-py-[var(--button-padding-vert)];
+        @apply [box-shadow:var(--button-raised-shadow)] tw-px-[var(--button-padding-hor)] tw-py-[var(--button-padding-vert)];
 
         &.vc-button_text:not(:disabled) {
           &:hover,
           &:focus {
-            @apply tw-bg-[color:rgba(var(--button-#{$variant}-background-color-hover),0.07)];
+            @apply tw-bg-[color:rgb(from_var(--button-#{$variant}-background-color-hover)_r_g_b/7%)];
           }
         }
       }
 
       &.vc-button_selected {
-        @apply tw-bg-[color:rgb(var(--button-#{$variant}-background-color-hover))];
+        @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)];
 
         &.vc-button_text {
-          @apply tw-bg-[color:rgba(var(--button-#{$variant}-background-color-hover),0.07)] tw-p-1;
+          @apply tw-bg-[color:rgb(from_var(--button-#{$variant}-background-color-hover)_r_g_b/7%)] tw-p-1;
         }
 
         &.vc-button_outline {
-          @apply tw-border-[color:rgb(var(--button-#{$variant}-background-color-hover))]  tw-bg-transparent  #{!important};
+          @apply tw-border-[color:var(--button-#{$variant}-background-color-hover)]  tw-bg-transparent  #{!important};
         }
       }
     }

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

@@ -94,30 +94,36 @@ watch(
 
 <style lang="scss">
 :root {
-  --card-background: #ffffff;
+  --card-background: var(--additional-50);
   --card-border-radius: 6px;
-  --card-box-shadow: 1px 1px 7px rgba(126, 142, 157, 0.15);
-  --card-header-background: #f4f8fb;
-  --card-header-color: #83a3be;
+  --card-box-shadow-color: var(--secondary-600);
+  --card-box-shadow: 1px 1px 7px rgb(from var(--card-box-shadow-color) r g b / 15%);
+  --card-header-background: var(--secondary-50);
+  --card-header-color: var(--secondary-600);
 
-  --card-header-background-success: #e9f7df;
-  --card-header-background-danger: #ffe6e6;
+  --card-header-background-success: var(--success-100);
+  --card-header-background-danger: var(--danger-100);
 
-  --card-header-color-success: #99c17a;
-  --card-header-color-danger: #f34747;
+  --card-header-color-success: var(--success-600);
+  --card-header-color-danger: var(--danger-600);
+
+  --card-header-padding-hor: 16px;
+  --card-header-padding-vert: 12px;
+
+  --card-border-color: var(--base-border-color, var(--neutrals-200));
 }
 
 $variants: success, danger;
 
 .vc-card {
   @apply tw-bg-[color:var(--card-background)] tw-border
-  tw-border-[color:#eef0f2] tw-border-solid tw-box-border
+  tw-border-[color:var(--card-border-color)] tw-border-solid tw-box-border
   tw-shadow-[var(--card-box-shadow)]
   tw-rounded-[var(--card-border-radius)] tw-overflow-hidden
   tw-flex-grow tw-flex tw-flex-col;
 
   &__header {
-    @apply tw-bg-[color:var(--card-header-background)] tw-px-4 tw-py-3 tw-flex tw-items-center tw-content-between tw-w-full tw-box-border;
+    @apply tw-bg-[color:var(--card-header-background)] tw-px-[var(--card-header-padding-hor)] tw-py-[var(--card-header-padding-vert)] tw-flex tw-items-center tw-content-between tw-w-full tw-box-border;
   }
 
   &_collapsable &__header {
@@ -127,7 +133,7 @@ $variants: success, danger;
   &__title {
     @apply tw-uppercase tw-flex-grow
    tw-text-[color:var(--card-header-color)]
-   tw-text-base tw-font-bold;
+   tw-text-sm tw-font-bold;
   }
 
   &__icon {

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

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="vc-col tw-flex tw-flex-col tw-min-w-0 tw-basis-0"
+    class="vc-col"
     :style="{ flexGrow: size }"
   >
     <slot></slot>
@@ -23,9 +23,7 @@ defineSlots<{
 </script>
 
 <style lang="scss">
-// .vc-col {
-//   .vc-app_mobile & {
-//     @apply tw-grow #{!important};
-//   }
-// }
+.vc-col {
+  @apply tw-flex tw-flex-col tw-min-w-0 tw-basis-0;
+}
 </style>

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>