@vc-shell/framework 1.0.290 → 1.0.292

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-item/vc-gallery-item.vue

@@ -14,7 +14,7 @@
       background="contain"
     ></VcImage>
     <div class="vc-gallery-item__overlay">
-      <div class="tw-flex">
+      <div class="vc-gallery-item__overlay-content">
         <VcIcon
           v-if="!readonly && !disableDrag"
           class="vc-gallery-item__move"
@@ -22,13 +22,13 @@
           size="s"
         ></VcIcon>
         <div
-          class="tw-truncate"
+          class="vc-gallery-item__image-name"
           :title="image.name"
         >
           {{ image.name }}
         </div>
       </div>
-      <div class="tw-flex tw-grow tw-basis-0 tw-items-center tw-justify-around">
+      <div class="vc-gallery-item__actions">
         <div
           v-if="actions && actions.preview"
           class="vc-gallery-item__button"
@@ -38,7 +38,9 @@
             class="vc-gallery-item__button-icon"
             icon="fas fa-eye"
           ></VcIcon>
-          <div class="tw-mt-2">{{ t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.FULLSCREEN") }}</div>
+          <div class="vc-gallery-item__button-text">
+            {{ t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.FULLSCREEN") }}
+          </div>
         </div>
         <div
           v-if="!readonly && actions && actions.edit"
@@ -49,7 +51,9 @@
             class="vc-gallery-item__button-icon"
             icon="fas fa-pen"
           ></VcIcon>
-          <div class="tw-mt-2">{{ $t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.EDIT") }}</div>
+          <div class="vc-gallery-item__button-text">
+            {{ $t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.EDIT") }}
+          </div>
         </div>
         <div
           v-if="!readonly && actions && actions.remove"
@@ -60,7 +64,9 @@
             class="vc-gallery-item__button-icon"
             icon="fas fa-trash"
           ></VcIcon>
-          <div class="tw-mt-2">{{ $t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.DELETE") }}</div>
+          <div class="vc-gallery-item__button-text">
+            {{ $t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_ITEM.DELETE") }}
+          </div>
         </div>
       </div>
     </div>
@@ -107,28 +113,51 @@ function onClose() {
 </script>
 
 <style lang="scss">
+:root {
+  --gallery-item-border-color: var(--secondary-200);
+  --gallery-item-overlay-bg-color: var(--primary-100);
+  --gallery-item-move-icon-color: var(--secondary-300);
+  --gallery-item-button-icon-color: var(--primary-500);
+}
+
 .vc-gallery-item {
-  @apply tw-relative tw-w-[155px] tw-h-[155px] tw-box-border tw-border tw-border-solid tw-border-[#d3dae9] tw-rounded-md tw-p-1;
+  @apply tw-relative tw-w-[155px] tw-h-[155px] tw-box-border tw-border tw-border-solid tw-border-[var(--gallery-item-border-color)] tw-rounded-md tw-p-1;
 
   &__overlay {
-    @apply tw-bg-[rgba(238,246,252,0.97)] tw-flex-col tw-p-2 tw-opacity-0 tw-flex tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-transition  tw-duration-200;
+    @apply tw-bg-[var(--gallery-item-overlay-bg-color)] tw-opacity-0 tw-flex tw-flex-col tw-p-2 tw-absolute tw-left-0 tw-top-0 tw-right-0 tw-bottom-0 tw-transition-opacity tw-duration-200;
   }
 
   &:hover &__overlay,
-  .vc-app_touch &_hover &__overlay {
+  .vc-app_touch &__hover &__overlay {
     @apply tw-opacity-100;
   }
 
   &__move {
-    @apply tw-text-[#a1c0d4] tw-cursor-move tw-mr-2;
+    @apply tw-text-[var(--gallery-item-move-icon-color)] tw-cursor-move tw-mr-2;
   }
 
   &__button {
     @apply tw-cursor-pointer tw-flex tw-flex-col tw-items-center;
 
     &-icon {
-      @apply tw-text-[#319ed4];
+      @apply tw-text-[var(--gallery-item-button-icon-color)];
     }
+
+    &-text {
+      @apply tw-mt-2 tw-text-sm;
+    }
+  }
+
+  &__overlay-content {
+    @apply tw-flex;
+  }
+
+  &__image-name {
+    @apply tw-truncate tw-text-sm;
+  }
+
+  &__actions {
+    @apply tw-flex tw-grow tw-basis-0 tw-items-center tw-justify-around;
   }
 }
 </style>

package/ui/components/organisms/vc-gallery/_internal/vc-gallery-preview/vc-gallery-preview.vue

@@ -11,22 +11,22 @@
     <template #header>
       <div>
         <span>{{ currentImage.name }} (</span>
-        <VcLink @click="copyLink(currentImage.url ?? '')">{{
-          t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_PREVIEW.COPY_IMAGE_LINK")
-        }}</VcLink>
+        <VcLink @click="copyLink(currentImage.url ?? '')">
+          {{ t("COMPONENTS.ORGANISMS.VC_GALLERY.INTERNAL.VC_GALLERY_PREVIEW.COPY_IMAGE_LINK") }}
+        </VcLink>
         <span>)</span>
       </div>
     </template>
     <template #content>
-      <div class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center">
-        <div class="tw-box-border p-5 tw-grow tw-basis-0 tw-w-full">
+      <div class="vc-gallery-preview__content">
+        <div class="vc-gallery-preview__image-container">
           <div
-            class="tw-w-full tw-h-full tw-box-border"
+            class="vc-gallery-preview__image-handler"
             :style="imageHandler"
           ></div>
           <button
             v-if="localIndex > 0"
-            class="tw-absolute tw-top-2/4 -tw-mt-9 tw-h-[72px] tw-w-[72px] tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[#f1f6fa] tw-cursor-pointer tw-text-[#a1c0d4] [--icon-size-xl: 36px] hover:tw-shadow-[0_0_20px_rgba(31,40,50,0.15)] tw-left-[25px]"
+            class="vc-gallery-preview__nav-btn vc-gallery-preview__nav-btn_left"
             @click="localIndex--"
           >
             <VcIcon
@@ -36,7 +36,7 @@
           </button>
           <button
             v-if="localIndex < images.length - 1"
-            class="tw-absolute tw-top-2/4 -tw-mt-9 tw-h-[72px] tw-w-[72px] tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[#f1f6fa] tw-cursor-pointer tw-text-[#a1c0d4] [--icon-size-xl: 36px] hover:tw-shadow-[0_0_20px_rgba(31,40,50,0.15)] tw-right-[25px]"
+            class="vc-gallery-preview__nav-btn vc-gallery-preview__nav-btn_right"
             @click="localIndex++"
           >
             <VcIcon
@@ -45,14 +45,12 @@
             ></VcIcon>
           </button>
         </div>
-        <div class="tw-p-4 tw-pb-[40px] tw-max-w-full tw-overflow-x-auto tw-box-border tw-shrink tw-flex">
+        <div class="vc-gallery-preview__thumbnails">
           <div
             v-for="(item, i) in images"
             :key="i"
-            class="tw-m-1 tw-opacity-60"
-            :class="{
-              'vc-gallery-preview__images-item_current': i === localIndex,
-            }"
+            class="vc-gallery-preview__thumbnail"
+            :class="{ 'vc-gallery-preview__thumbnail_current': i === localIndex }"
           >
             <VcImage
               :src="item.url"
@@ -120,12 +118,48 @@ function handleKeyDown(event: KeyboardEvent) {
 </script>
 
 <style lang="scss">
+:root {
+  --gallery-preview-btn-bg-color: var(--secondary-50);
+  --gallery-preview-btn-icon-color: var(--secondary-400);
+  --gallery-preview-btn-shadow-color: var(--base-text-color, var(--neutrals-950));
+  --gallery-preview-btn-shadow: 0 0 20px rgb(from var(--gallery-preview-btn-shadow-color) r g b / 15%);
+  --gallery-preview-overlay-color: var(--primary-400);
+}
+
 .vc-gallery-preview {
-  &__images {
-    &-item {
-      &_current {
-        @apply tw-relative tw-opacity-100 after:tw-content-[""] after:tw-bg-[#43b0e6] after:tw-h-1 after:tw-w-full after:tw-rounded-[5px] after:tw-absolute after:tw-left-0 after:-tw-bottom-[12px];
-      }
+  &__content {
+    @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center;
+  }
+
+  &__image-container {
+    @apply tw-box-border tw-p-5 tw-grow tw-basis-0 tw-w-full tw-relative;
+  }
+
+  &__image-handler {
+    @apply tw-w-full tw-h-full tw-box-border;
+  }
+
+  &__nav-btn {
+    @apply tw-absolute tw-top-2/4 tw-h-[72px] tw-w-[72px] tw-flex tw-items-center tw-justify-center tw-rounded-full tw-bg-[var(--gallery-preview-btn-bg-color)] tw-cursor-pointer tw-text-[color:var(--gallery-preview-btn-icon-color)] hover:[box-shadow:var(--gallery-preview-btn-shadow)];
+
+    &_left {
+      @apply tw-left-[25px];
+    }
+
+    &_right {
+      @apply tw-right-[25px];
+    }
+  }
+
+  &__thumbnails {
+    @apply tw-p-4 tw-pb-[40px] tw-max-w-full tw-overflow-x-auto tw-box-border tw-shrink tw-flex;
+  }
+
+  &__thumbnail {
+    @apply tw-m-1 tw-opacity-60;
+
+    &_current {
+      @apply tw-opacity-100 tw-relative after:tw-content-[''] after:tw-bg-[var(--gallery-preview-overlay-color)] after:tw-h-1 after:tw-w-full after:tw-rounded-[5px] after:tw-absolute after:tw-left-0 after:-tw-bottom-[12px];
     }
   }
 }

package/ui/components/organisms/vc-gallery/vc-gallery.vue

@@ -13,15 +13,15 @@
     </VcLabel>
 
     <template v-if="(defaultImages && defaultImages.length) || !disabled">
-      <div class="tw-flex tw-flex-wrap tw-relative">
+      <div class="vc-gallery__container">
         <div
           ref="galleryRef"
-          class="tw-flex tw-flex-wrap tw-w-full"
+          class="vc-gallery__wrapper"
         >
           <VcGalleryItem
             v-for="(image, i) in defaultImages"
             :key="`image_${i}`"
-            class="tw-m-2 vc-gallery__item"
+            class="vc-gallery__item"
             :image="image"
             :readonly="disabled"
             :actions="itemActions"
@@ -37,7 +37,7 @@
           ></VcGalleryItem>
           <VcFileUpload
             v-if="!disabled && !uploadHidden"
-            class="tw-m-2"
+            class="vc-gallery__upload"
             :icon="uploadIcon"
             :variant="variant"
             :multiple="multiple"
@@ -50,13 +50,13 @@
         </div>
         <div
           ref="reorderGalleryRef"
-          class="tw-w-0.5 tw-bg-[#41afe6] tw-h-full tw-absolute tw-top-0 tw-bottom-0 tw-z-[2] tw-hidden"
+          class="vc-gallery__reorder-line"
         ></div>
       </div>
     </template>
     <div
       v-else
-      class="tw-flex tw-justify-center tw-p-5 tw-h-full tw-items-center"
+      class="vc-gallery__empty"
     >
       <VcHint>{{ t("COMPONENTS.ORGANISMS.VC_GALLERY.GALLERY_IS_EMPTY") }}</VcHint>
     </div>
@@ -313,3 +313,35 @@ function findParentElement(element: HTMLElement) {
   }
 }
 </script>
+
+<style lang="scss">
+:root {
+  --gallery-reorder-color: var(--primary-500);
+}
+
+.vc-gallery {
+  &__container {
+    @apply tw-flex tw-flex-wrap tw-relative;
+  }
+
+  &__wrapper {
+    @apply tw-flex tw-flex-wrap tw-w-full;
+  }
+
+  &__item {
+    @apply tw-m-2;
+  }
+
+  &__upload {
+    @apply tw-m-2;
+  }
+
+  &__reorder-line {
+    @apply tw-w-0.5 tw-bg-[color:var(--gallery-reorder-color)] tw-h-full tw-absolute tw-top-0 tw-bottom-0 tw-z-[2] tw-hidden;
+  }
+
+  &__empty {
+    @apply tw-flex tw-justify-center tw-p-5 tw-h-full tw-items-center;
+  }
+}
+</style>

package/ui/components/organisms/vc-login-form/vc-login-form.vue

@@ -1,27 +1,21 @@
 <template>
   <div
-    class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center"
+    class="vc-login-form__container"
     :style="backgroundImageHandler"
   >
     <div
-      class="tw-h-[80px] tw-w-[516px] tw-max-w-[90%] tw-mb-[50px] -tw-mt-[90px]"
+      class="vc-login-form__logo"
       :style="logoImageHandler"
     ></div>
-    <div
-      class="tw-w-[516px] tw-max-w-[90%] tw-bg-white tw-rounded-md tw-overflow-hidden tw-shadow-[0_0_0_rgba(0,0,0,0.05)]"
-    >
-      <div
-        class="tw-uppercase tw-text-white tw-bg-[#465769] tw-h-[50px] tw-px-[28px] tw-text-xl tw-flex tw-items-center"
-      >
+    <div class="vc-login-form__box">
+      <div class="vc-login-form__header">
         {{ title }}
       </div>
-      <div class="tw-pt-4 tw-px-[28px] tw-pb-[24px]">
+      <div class="vc-login-form__content">
         <slot></slot>
       </div>
     </div>
-    <div
-      class="tw-absolute tw-bottom-[2px] tw-left-[93px] tw-text-[color:var(--login-version-color)] tw-text-xs tw-mt-auto tw-self-center tw-p-1"
-    >
+    <div class="vc-login-form__version">
       {{ version }}
     </div>
   </div>
@@ -56,7 +50,7 @@ const backgroundImageHandler = computed(() => {
 
 const logoImageHandler = computed(() => {
   if (props.logo) {
-    return `background: url(${CSS.escape(props.logo)})  center / contain no-repeat`;
+    return `background: url(${CSS.escape(props.logo)}) center / contain no-repeat`;
   }
   return undefined;
 });
@@ -68,6 +62,38 @@ console.debug("Init vc-login-form");
 
 <style lang="scss">
 :root {
-  --login-version-color: #838d9a;
+  --login-version-color: var(--neutrals-400);
+  --login-header-bg-color: var(--secondary-700);
+  --login-box-shadow-color: var(--additional-950);
+  --login-box-shadow: rgb(from var(--login-box-shadow-color) r g b / 5%);
+  --login-bg-color: var(--additional-50);
+  --login-title-color: var(--additional-50);
+  --login-title-bg: var(--secondary-700);
+}
+
+.vc-login-form {
+  &__container {
+    @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center;
+  }
+
+  &__logo {
+    @apply tw-h-20 tw-w-[516px] tw-max-w-[90%] tw-mb-12 -tw-mt-24;
+  }
+
+  &__box {
+    @apply tw-w-[516px] tw-max-w-[90%] tw-bg-[var(--login-bg-color)] tw-rounded-md tw-overflow-hidden [box-shadow:var(--login-box-shadow)];
+  }
+
+  &__header {
+    @apply tw-uppercase tw-text-[var(--login-title-color)] tw-bg-[var(--login-title-bg)] tw-h-12 tw-px-7 tw-text-lg tw-flex tw-items-center;
+  }
+
+  &__content {
+    @apply tw-pt-4 tw-px-7 tw-pb-6;
+  }
+
+  &__version {
+    @apply tw-absolute tw-bottom-0.5 tw-left-[93px] tw-text-[var(--login-version-color)] tw-text-xs tw-mt-auto tw-self-center tw-p-1;
+  }
 }
 </style>