feat(VCST-4048): add red theme

client-app/assets/presets/index.ts

@@ -3,6 +3,7 @@ import coffee from './coffee.json'
 import defaultPreset from './default.json'
 import mercury from './mercury.json'
 import purplePink from './purple-pink.json'
+import red from './red.json'
 import watermelon from './watermelon.json'
 import type { IThemeConfigPreset } from "@/core/types";
 
@@ -13,4 +14,5 @@ export const presets: Record<string, IThemeConfigPreset> = {
   ['purple-pink']: purplePink,
   watermelon: watermelon,
   coffee: coffee,
+  red: red,
 } as const;

client-app/assets/presets/red.json

@@ -0,0 +1,141 @@
+{
+  "color_primary_50": "#f2e2e2",
+  "color_primary_100": "#f0d3d4",
+  "color_primary_200": "#ecafaf",
+  "color_primary_300": "#ec8a8b",
+  "color_primary_400": "#ef5759",
+  "color_primary_500": "#e31e24",
+  "color_primary_600": "#c12a2d",
+  "color_primary_700": "#9e292b",
+  "color_primary_800": "#812728",
+  "color_primary_900": "#652324",
+  "color_primary_950": "#552323",
+
+  "color_secondary_50": "#f7f7f7",
+  "color_secondary_100": "#ebebeb",
+  "color_secondary_200": "#d1d1d1",
+  "color_secondary_300": "#bababa",
+  "color_secondary_400": "#a1a1a1",
+  "color_secondary_500": "#757575",
+  "color_secondary_600": "#5e5e5e",
+  "color_secondary_700": "#474747",
+  "color_secondary_800": "#2e2e2e",
+  "color_secondary_900": "#171717",
+  "color_secondary_950": "#0d0d0d",
+
+  "color_accent_50": "#dbebff",
+  "color_accent_100": "#b8d7ff",
+  "color_accent_200": "#6babff",
+  "color_accent_300": "#2483ff",
+  "color_accent_400": "#005dd6",
+  "color_accent_500": "#003d8d",
+  "color_accent_600": "#003170",
+  "color_accent_700": "#002657",
+  "color_accent_800": "#001838",
+  "color_accent_900": "#000d1f",
+  "color_accent_950": "#00070f",
+
+  "color_neutral_50": "#fafafa",
+  "color_neutral_100": "#f5f5f5",
+  "color_neutral_200": "#e7e7e7",
+  "color_neutral_300": "#cccccc",
+  "color_neutral_400": "#a3a3a3",
+  "color_neutral_500": "#737373",
+  "color_neutral_600": "#525252",
+  "color_neutral_700": "#404040",
+  "color_neutral_800": "#262626",
+  "color_neutral_900": "#171717",
+  "color_neutral_950": "#0a0a0a",
+
+  "color_warning_50": "#fff8e5",
+  "color_warning_100": "#fff1cc",
+  "color_warning_200": "#ffe599",
+  "color_warning_300": "#ffd166",
+  "color_warning_400": "#ffb733",
+  "color_warning_500": "#fc9e00",
+  "color_warning_600": "#db8b00",
+  "color_warning_700": "#b46b0f",
+  "color_warning_800": "#8c4f00",
+  "color_warning_900": "#542d00",
+  "color_warning_950": "#381d00",
+
+  "color_danger_50": "#fff2f1",
+  "color_danger_100": "#fad6d6",
+  "color_danger_300": "#f18484",
+  "color_danger_200": "#f5adad",
+  "color_danger_400": "#ec5b5b",
+  "color_danger_500": "#de3131",
+  "color_danger_600": "#bb1616",
+  "color_danger_800": "#800f0f",
+  "color_danger_700": "#a01313",
+  "color_danger_900": "#400000",
+  "color_danger_950": "#240000",
+
+  "color_success_50": "#ebf5ef",
+  "color_success_100": "#c8e9cb",
+  "color_success_200": "#add6be",
+  "color_success_300": "#84c29e",
+  "color_success_400": "#5bae7e",
+  "color_success_500": "#3e845b",
+  "color_success_600": "#3b7754",
+  "color_success_700": "#316144",
+  "color_success_800": "#1e3c2a",
+  "color_success_900": "#0b1b12",
+  "color_success_950": "#091610",
+
+  "color_info_50": "#ecf6fc",
+  "color_info_100": "#d9eaf2",
+  "color_info_200": "#b3d4e5",
+  "color_info_300": "#8dbfd8",
+  "color_info_400": "#55a3d0",
+  "color_info_500": "#2b7ea8",
+  "color_info_600": "#336b8c",
+  "color_info_700": "#325c76",
+  "color_info_800": "#2e4c60",
+  "color_info_900": "#283b4a",
+  "color_info_950": "#26343f",
+
+  "color_additional_50": "#ffffff",
+  "color_additional_950": "#000000",
+
+  "color_body_bg": "#f7f7f7",
+  "color_body_text": "#0a0a0a",
+
+  "color_link": "#003d8d",
+  "color_link_hover": "#652324",
+
+  "color_shape_icon_bg": "#9e292b",
+  "color_shape_icon": "#ffffff",
+
+  "color_empty_list_icon": "#e31e24",
+
+  "color_mobile_search_bar_bg": "#2e2e2e",
+
+  "color_header_top_bg": "#000000",
+  "color_header_top_text": "#ffffff",
+  "color_header_top_link": "#ffffff",
+  "color_header_top_link_hover": "#d1d1d1",
+  "color_header_top_link_active": "#d1d1d1",
+
+  "color_header_bottom_bg": "#2e2e2e",
+  "color_header_bottom_text": "#ffffff",
+  "color_header_bottom_link": "#ffffff",
+  "color_header_bottom_link_hover": "#d1d1d1",
+  "color_header_bottom_link_active": "#d1d1d1",
+  "color_header_bottom_link_icon": "#ffffff",
+
+  "color_footer_top_bg": "#2e2e2e",
+  "color_footer_top_text": "#ffffff",
+  "color_footer_top_link": "#ebebeb",
+  "color_footer_top_link_hover": "#ffffff",
+  "color_footer_top_link_active": "#d1d1d1",
+
+  "color_footer_bottom_bg": "#171717",
+  "color_footer_bottom_text": "#ffffff",
+  "color_footer_bottom_link": "#ebebeb",
+  "color_footer_bottom_link_hover": "#ffffff",
+  "color_footer_bottom_link_active": "#f5f5f5",
+
+
+  "color_price": "#171717"
+}

client-app/assets/styles/_colors.scss

@@ -24,6 +24,7 @@
 --header-bottom-link-color: var(--color-header-bottom-link, var(--color-secondary-700));
 --header-bottom-link-hover-color: var(--color-header-bottom-link-hover, var(--color-neutral-900));
 --header-bottom-link-active-color: var(--color-header-bottom-link-active, var(--color-neutral-900));
+--header-bottom-link-icon-color: var(--color-header-bottom-link-icon, var(--color-primary-500));
 
 --footer-top-bg-color: var(--color-footer-top-bg, var(--color-secondary-900));
 --footer-top-text-color: var(--color-footer-top-text, var(--color-additional-50));

client-app/config/settings_data.json

@@ -39,7 +39,7 @@
     "logo_image": "logo.svg",
     "logo_inverted_image": "logo-white.svg",
     "favicon_image": "/static/icons/favicon-32x32.png",
-    "homepage_background_image": "main-banner.webp",
+    "homepage_background_image": "CCTV-banner.webp",
     "catalog_pagination_mode": "infinite_scroll",
     "desktop_menu_mode": "horizontal",
 

client-app/core/types/theme-config.ts

@@ -116,8 +116,8 @@ export interface IThemeConfigPreset {
 
   color_price?: string;
 
-  color_hexagon_icon_bg?: string;
-  color_hexagon_icon?: string;
+  color_shape_icon_bg?: string;
+  color_shape_icon?: string;
 
   color_header_top_bg?: string;
   color_header_top_text?: string;
@@ -129,6 +129,7 @@ export interface IThemeConfigPreset {
   color_header_bottom_link?: string;
   color_header_bottom_link_hover?: string;
   color_header_bottom_link_active?: string;
+  color_header_bottom_link_icon?: string;
 
   color_footer_top_bg?: string;
   color_footer_top_text?: string;

client-app/modules/push-messages/components/link-push-messages.vue

@@ -4,7 +4,12 @@
       <BottomHeaderLink :link="item" :count="unreadCount" v-bind="triggerProps">
         <template #icon>
           <transition :name="unreadCount ? 'shake' : ''" mode="out-in">
-            <VcIcon :key="totalCount" :name="item.icon" class="mb-0.5 fill-primary" :size="24" />
+            <VcIcon
+              :key="totalCount"
+              :name="item.icon"
+              class="mb-0.5 fill-[--header-bottom-link-icon-color]"
+              :size="24"
+            />
           </transition>
         </template>
 

client-app/modules/push-messages/components/push-messages-mobile.vue

@@ -3,7 +3,7 @@
     <template #trigger="{ totalCount, unreadCount, triggerProps }">
       <button type="button" v-bind="triggerProps" class="relative">
         <transition :name="unreadCount ? 'shake' : ''" mode="out-in">
-          <VcIcon :key="totalCount" class="fill-primary" name="notification-v2" :size="28" />
+          <VcIcon :key="totalCount" class="fill-[--header-bottom-link-icon-color]" name="notification-v2" :size="28" />
         </transition>
 
         <transition mode="out-in" name="scale">

client-app/modules/push-messages/components/vc-push-messages.vue

@@ -148,6 +148,8 @@ const unreadVisibility = useVModel(props, "showUnreadOnly", emits);
   --vc-dialog-width: calc(100vw - 1rem);
   --vc-dialog-max-height: calc(100vh - 5rem);
 
+  @apply text-neutral-800;
+
   @media (min-width: theme("screens.sm")) {
     --vc-dialog-width: 25rem;
     --vc-dialog-max-height: calc(100vh - 10rem);

client-app/pages/home.vue

@@ -68,7 +68,7 @@
     </section>
 
     <!-- CTA -->
-    <section class="bg-primary py-6 lg:py-10">
+    <section class="bg-primary-700 py-6 lg:py-10">
       <div class="container mx-auto flex flex-col items-center space-y-2 px-6 md:px-12 lg:flex-row lg:space-x-10">
         <h2 class="whitespace-nowrap text-3xl font-black uppercase text-additional-50">
           {{ $t("pages.home.subscription_block.subscribe_now") }}

client-app/shared/layout/components/header/_internal/bottom-header-link.vue

@@ -19,7 +19,7 @@
     >
       <span class="relative">
         <slot name="icon">
-          <VcIcon v-if="link.icon" :name="link.icon" :size="24" class="mb-0.5 fill-primary" />
+          <VcIcon v-if="link.icon" :name="link.icon" :size="24" class="mb-0.5 fill-[--header-bottom-link-icon-color]" />
         </slot>
 
         <transition mode="out-in" name="scale">

client-app/shared/layout/components/header/_internal/bottom-header.vue

@@ -12,7 +12,7 @@
       <template v-if="organization">
         <div class="hidden h-6 w-0.5 bg-primary xl:block"></div>
 
-        <div class="hidden max-w-36 text-base italic leading-[18px] text-neutral-800 xl:line-clamp-2">
+        <div class="hidden max-w-36 text-base italic leading-[18px] text-[--header-top-text-color] xl:line-clamp-2">
           {{ organization?.name }}
         </div>
       </template>

client-app/shared/layout/components/header/_internal/mobile-header.vue

@@ -22,7 +22,7 @@
               class="h-full pe-3 ps-5 sm:pe-5"
               @click="mobileMenuVisible = true"
             >
-              <VcIcon class="fill-primary" name="menu" :size="32" />
+              <VcIcon class="fill-[--header-bottom-link-icon-color]" name="menu" :size="32" />
             </button>
 
             <router-link :to="$context.settings.default_return_url ?? '/'">
@@ -41,7 +41,7 @@
               class="px-1 py-2 xs:px-2"
               :href="`tel:${support_phone_number}`"
             >
-              <VcIcon class="fill-primary" name="phone" :size="28" />
+              <VcIcon class="fill-[--header-bottom-link-icon-color]" name="phone" :size="28" />
             </a>
 
             <button
@@ -50,7 +50,7 @@
               class="px-1 py-2 xs:px-2"
               @click="toggleSearchBar"
             >
-              <VcIcon class="fill-primary" name="search" :size="28" />
+              <VcIcon class="fill-[--header-bottom-link-icon-color]" name="search" :size="28" />
             </button>
 
             <component :is="item" v-for="(item, index) in customComponents" :key="index" class="px-1 py-2 xs:px-2" />
@@ -61,7 +61,7 @@
               class="px-1 py-2 xs:px-2"
             >
               <span class="relative block">
-                <VcIcon class="fill-primary" name="cart" :size="28" />
+                <VcIcon class="fill-[--header-bottom-link-icon-color]" name="cart" :size="28" />
 
                 <transition
                   mode="out-in"
@@ -111,7 +111,7 @@
         <VcButton :to="searchPhrase && searchPageLink" icon="search" />
 
         <button type="button" class="-mr-2 ml-2 h-11 appearance-none px-3" @click="hideSearchBar">
-          <VcIcon name="delete-thin" class="fill-additional-50" />
+          <VcIcon name="delete-thin" class="fill-[--header-bottom-link-icon-color]" />
         </button>
       </div>
     </div>

client-app/ui-kit/components/molecules/input/vc-input.vue

@@ -323,7 +323,7 @@ provide<VcInputContextType>("inputContext", {
   }
 
   &__input {
-    @apply relative m-px px-2 bg-transparent rounded-[3px] leading-none w-full min-w-0 appearance-none font-normal;
+    @apply relative m-px px-2 bg-transparent rounded-[3px] leading-none w-full min-w-0 appearance-none font-normal text-neutral-800;
 
     &::-webkit-search-cancel-button {
       @apply appearance-none;