chore: add theme switcher hallowen theme (#4414)

packages/docs/components/layout/Header.vue

@@ -7,7 +7,7 @@
 
     <VaNavbar
       v-show="!isOptionsVisible"
-      class="header"
+      class="header docs-header"
       color="background-secondary"
     >
       <template #left>
@@ -44,7 +44,7 @@
           >
             {{ link.text }}
           </VaButton>
-          <ColorDropdown class="mr-2" />
+          <!-- <ColorDropdown class="mr-2" /> -->
           <ThemeSwitch class="mr-4" />
           <VersionDropdown />
         </div>
@@ -194,11 +194,7 @@ onMounted(() => {
 }
 
 .header {
-  // Halloween background
   box-shadow: 0 2px 8px var(--va-shadow);
-  background-image: url("https://i.imgur.com/BNkuj2J.png");
-  background-position: center;
-  background-blend-mode: multiply;
 
   &.va-navbar {
     padding: var(--navbar-padding);

packages/docs/components/layout/Sidebar.vue

@@ -1,7 +1,7 @@
 <template>
   <VaSidebar
     v-model="writableVisible"
-    class="sidebar"
+    class="sidebar docs-sidebar"
     :width="sidebarWidth"
   >
     <VaAccordion
@@ -178,11 +178,6 @@ export default defineComponent({
 @import "@/assets/smart-grid.scss";
 
 .sidebar {
-  // Halloween background
-  background-image: url("https://i.imgur.com/fLEstk9.png");
-  background-repeat: no-repeat;
-  background-blend-mode: multiply;
-
   &__collapse-custom-header {
     position: relative;
     padding: 1rem 1.2rem;

packages/docs/components/layout/header/ThemeSwitch.vue

@@ -1,57 +1,49 @@
 <template>
   <div>
-    <VaSwitch
-      :model-value="false"
-      color="#5123a1"
-      off-color="#ffd300"
-      style="--va-switch-checker-background-color: #252723;"
-      class="theme-switch-button"
-      name="Switch theme"
-      :aria-label="`Switch theme to ${isDark ? 'light' : 'dark'}`"
-    >
-      <template #innerLabel>
-        <div class="va-text-center">
-          <VaIcon
-            size="24px"
-            :name="'fas-ghost'"
-          />
-        </div>
+    <VaMenu>
+      <template #anchor>
+        <VaButton
+          :icon="currentTheme?.icon"
+          preset="secondary"
+        />
       </template>
-    </VaSwitch>
-    <!-- <VaSwitch
-      v-model="isDark"
-      color="#5123a1"
-      off-color="#ffd300"
-      style="--va-switch-checker-background-color: #252723;"
-      class="theme-switch-button"
-      name="Switch theme"
-      :aria-label="`Switch theme to ${isDark ? 'light' : 'dark'}`"
-    >
-      <template #innerLabel>
-        <div class="va-text-center">
-          <VaIcon
-            size="24px"
-            :name="isDark ? 'dark_mode' : 'light_mode'"
-          />
-        </div>
-      </template>
-    </VaSwitch> -->
+      <VaMenuItem
+        v-for="(theme) in themes"
+        :key="theme"
+        :icon="theme.icon"
+        :child:left-icon="{
+          color: theme.color
+        }"
+        class="h-[40px]"
+        @selected="applyPreset(theme.key)"
+      >
+        {{ theme.name }}
+
+        <template #right-icon>
+          <VaColorIndicator :color="presets[theme.key].backgroundPrimary" />
+          <VaColorIndicator class="-ml-2" :color="presets[theme.key].secondary" />
+          <VaColorIndicator class="-ml-2" :color="presets[theme.key].primary" />
+        </template>
+      </VaMenuItem>
+    </VaMenu>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 
-const { currentPresetName, applyPreset } = useColors()
+const { currentPresetName, applyPreset, presets } = useColors()
 
-const isDark = computed({
-  get: () => currentPresetName.value === 'dark',
-  set: (value) => applyPreset(value ? 'dark' : 'light'),
-})
+const themes = [
+  { name: 'Light', icon: 'light_mode', key: 'light', color: '#ffd300' },
+  { name: 'Dark', icon: 'dark_mode', key: 'dark', color: '#5123a1' },
+  { name: 'Spooky', icon: 'fas-ghost', key: 'halloween', color: '#e36414' },
+]
+
+const currentTheme = computed(() => themes.find((theme) => theme.key === currentPresetName.value))
 </script>
 
 <style lang="scss">
-
 .theme-switch-button {
   --va-switch-checker-wrapper-width: 4rem;
   --va-switch-inner-height: 2.25rem;

packages/docs/config/vuestic-config.ts

@@ -31,6 +31,9 @@ const halloweenColors = {
   backgroundSidebar: '#130C0C',
   backgroundLanding: '#f4f9fc',
   backgroundLandingBorder: 'rgba(155, 179, 206, 0.8)',
+  textPrimary: '#FFFFFF',
+  textInverted: '#FFFFFF',
+  shadow: 'rgba(0, 0, 0, 0.30)',
 }
 
 export const VuesticConfig = defineVuesticConfig({
@@ -72,23 +75,19 @@ export const VuesticConfig = defineVuesticConfig({
     presets: {
       // Halloween colors
       light: {
-        ...halloweenColors
+        secondary: '#666E75',
+        backgroundPrimary: '#FFFFFF',
+        backgroundLanding: '#f4f9fc',
+        backgroundLandingBorder: 'rgba(155, 179, 206, 0.8)',
+        backgroundSidebar: '#ECF0F1',
       },
       dark: {
-        ...halloweenColors
+        secondary: '#818992',
+        backgroundLanding: '#070d14',
+        backgroundLandingBorder: 'rgba(43, 49, 56, 0.8)',
+        backgroundSidebar: '#131A22',
+        shadow: 'rgba(0, 0, 0, 0.12)',
       },
-
-      // light: {
-      //   secondary: '#666E75',
-      //   backgroundPrimary: '#FFFFFF',
-      //   backgroundLanding: '#f4f9fc',
-      //   backgroundLandingBorder: 'rgba(155, 179, 206, 0.8)',
-      // },
-      // dark: {
-      //   secondary: '#818992',
-      //   backgroundLanding: '#070d14',
-      //   backgroundLandingBorder: 'rgba(43, 49, 56, 0.8)',
-      // },
       landing: {
         // primary: '#1827A7',
         // secondary: '#767C88',
@@ -113,6 +112,7 @@ export const VuesticConfig = defineVuesticConfig({
 
         ...halloweenColors,
       },
+      halloween: halloweenColors,
     },
   },
 })

packages/docs/layouts/default.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     class="docs-layout"
+    :class="[`docs-layout--theme-${currentPresetName}`]"
   >
     <div
       v-show="doShowLoader"
@@ -41,6 +42,8 @@
 <script setup lang="ts">
 const breakpoints = useBreakpoint()
 
+const { currentPresetName } = useColors()
+
 const isSidebarVisible = ref(!breakpoints.smDown)
 const isOptionsVisible = ref(false)
 const doShowLoader = ref(true)
@@ -78,6 +81,11 @@ onMounted(() => {
     doShowLoader.value = false
   }, 300);
 
+  if (!window.localStorage.getItem('eventConfig')) {
+    window.localStorage.setItem('eventConfig', 'halloween')
+    currentPresetName.value = 'halloween'
+  }
+
   window.addEventListener('mousemove', onMouseMove)
 
   const resetInertia = () => {
@@ -126,29 +134,53 @@ html {
   // Halloween background
   position: relative;
 
-  &::before {
-    content: '';
-    position: absolute;
-    height: 100%;
-    min-height: 100vh;
-    width: 100%;
-    background-image: url("https://i.imgur.com/rpnciUN.png");
-    background-size: 30%;
-    background-color: #000;
-    z-index: 0;
-    opacity: 0.5;
-  }
+  &--theme-halloween {
+    &::before {
+      content: '';
+      position: absolute;
+      height: 100%;
+      min-height: 100vh;
+      width: 100%;
+      background-image: url("https://i.imgur.com/rpnciUN.png");
+      background-size: 30%;
+      background-color: #000;
+      z-index: 0;
+      opacity: 0.5;
+    }
 
-  &::after {
-    content: '';
-    position: fixed;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    background: radial-gradient(circle at v-bind("mouse.x + 'px'") v-bind("mouse.y + 'px'"), transparent 0%, #000 v-bind("(mouseInertia.x + mouseInertia.y) * 0.5 + 'px'"));
-    background-size: 200%;
-    z-index: 0;
-    pointer-events: none;
+    &::after {
+      content: '';
+      position: fixed;
+      top: 0;
+      height: 100%;
+      width: 100%;
+      background: radial-gradient(circle at v-bind("mouse.x + 'px'") v-bind("mouse.y + 'px'"), transparent 0%, #000 v-bind("(mouseInertia.x + mouseInertia.y) * 0.5 + 'px'"));
+      background-size: 200%;
+      z-index: 0;
+      pointer-events: none;
+    }
+
+    .docs-layout__loader {
+      // Halloween loader
+      background-image: url("https://i.imgur.com/yLvFZoB.png");
+      background-position: center;
+      background-repeat: no-repeat;
+      animation: background-jump 1s infinite;
+    }
+
+    .docs-sidebar {
+      // Halloween background
+      background-image: url("https://i.imgur.com/fLEstk9.png");
+      background-repeat: no-repeat;
+      background-blend-mode: multiply;
+    }
+
+    .docs-header {
+      // Halloween background
+      background-image: url("https://i.imgur.com/BNkuj2J.png");
+      background-position: center;
+      background-blend-mode: multiply;
+    }
   }
 
   & > * {
@@ -175,11 +207,6 @@ html {
     height: 100%;
     z-index: 9999999;
     background: var(--va-background-primary);
-    // Halloween loader
-    background-image: url("https://i.imgur.com/yLvFZoB.png");
-    background-position: center;
-    background-repeat: no-repeat;
-    animation: background-jump 1s infinite;
   }
 
   &__main-section {

packages/ui/src/components/va-dropdown/hooks/useDropdown.ts

@@ -56,7 +56,7 @@ export const useDropdown = (
       result.push(
         // boundary doesn't work with ssr (trying to access document)
         flip({
-          boundary: target.value,
+          boundary: target.value ?? 'clippingAncestors',
         }),
       )
     }

packages/ui/src/components/va-menu-list/components/VaMenuItem.vue

@@ -11,7 +11,7 @@
   >
     <td class="va-menu-item__cell va-menu-item__cell--left">
       <slot name="left-icon">
-        <VaIcon class="va-menu-item__icon--left" v-if="icon" :name="icon" />
+        <VaIcon class="va-menu-item__icon--left" v-if="icon" :name="icon" va-child="leftIcon" />
       </slot>
     </td>
 
@@ -25,7 +25,7 @@
 
     <td class="va-menu-item__cell va-menu-item__cell--right">
       <slot name="right-icon">
-        <VaIcon v-if="rightIcon" class="va-menu-item__icon--right" :name="rightIcon" />
+        <VaIcon v-if="rightIcon" class="va-menu-item__icon--right" :name="rightIcon" va-child="rightIcon" />
       </slot>
     </td>
   </tr>
@@ -36,6 +36,7 @@ import { ref, computed } from 'vue'
 import { VaIcon } from '../../va-icon/'
 import { useKeyboardOnlyFocusGlobal } from '../../../composables'
 import { makeMenuItemAttributes } from '../composables/useMenuKeyboardNavigation'
+import { defineChildProps, useChildComponents } from '../../../composables/useChildComponents'
 
 defineOptions({
   name: 'VaMenuItem',
@@ -46,11 +47,17 @@ const props = defineProps({
   icon: { type: String, defatult: '' },
   rightIcon: { type: String, defatult: '' },
   disabled: { type: Boolean, default: false },
+  ...defineChildProps({
+    leftIcon: VaIcon,
+    rightIcon: VaIcon,
+  }),
 })
 
 const emit = defineEmits(['selected'])
 
 const { hasKeyboardFocus, keyboardFocusListeners } = useKeyboardOnlyFocusGlobal()
+
+useChildComponents(props)
 </script>
 
 <style lang="scss">
@@ -82,6 +89,7 @@ const { hasKeyboardFocus, keyboardFocusListeners } = useKeyboardOnlyFocusGlobal(
 
       &:empty {
         padding: 0;
+        width: 0;
       }
     }
 

packages/ui/src/components/va-menu/VaMenu.vue

@@ -22,6 +22,7 @@ import { extractComponentProps, extractComponentEmits, filterComponentProps } fr
 import { useImmediateFocus, useComponentPresetProp } from '../../composables'
 import { focusFirstFocusableChild } from '../../utils/focus'
 import { unwrapEl } from '../../utils/unwrapEl'
+import { useChildComponents, defineChildProps } from '../../composables/useChildComponents'
 
 const VaMenuListProps = extractComponentProps(VaMenuList)
 const VaMenuListEmits = extractComponentEmits(VaMenuList)
@@ -39,6 +40,10 @@ const props = defineProps({
   ...useComponentPresetProp,
   ...VaMenuListProps,
   ...VaDropdownProps,
+  ...defineChildProps({
+    menuList: VaMenuList,
+    dropdown: VaDropdown,
+  }),
   stickToEdges: { type: Boolean, default: true },
 })
 
@@ -73,6 +78,8 @@ const onKeydown = (event: KeyboardEvent) => {
 const menuListProps = filterComponentProps(VaMenuListProps)
 const dropdownProps = filterComponentProps(VaDropdownProps)
 
+useChildComponents(props)
+
 defineExpose({
   close,
 })