From 00b92a205a574fd595a936121d0e034b1ac57acd Mon Sep 17 00:00:00 2001
From: Maksim Nedoshev <m0ksem1337@gmail.com>
Date: Thu, 4 Jul 2024 13:11:18 +0300
Subject: [PATCH] fix: improve docs SSR

---
 packages/docs/components/layout/Header.vue    |  5 ++---
 packages/nuxt/src/runtime/plugin.ts           | 13 +++++------
 packages/ui/src/services/color/CHANGELOG.md   |  3 ++-
 .../plugin/create-color-config-plugin.ts      |  2 +-
 .../ui/src/styles/global/css-variables.scss   | 22 -------------------
 5 files changed, 11 insertions(+), 34 deletions(-)

diff --git a/packages/docs/components/layout/Header.vue b/packages/docs/components/layout/Header.vue
index e21c5b7795..df8f8cb083 100644
--- a/packages/docs/components/layout/Header.vue
+++ b/packages/docs/components/layout/Header.vue
@@ -31,8 +31,7 @@
 
       <template #right>
         <div
-          v-if="isOptionsListVisible"
-          class="header__options"
+          class="header__options hidden sm:flex"
         >
           <VaButton
             v-for="(link, index) in links"
@@ -52,7 +51,7 @@
 
         <!-- options mobile menu -->
         <VaButton
-          v-if="isOptionsMenuVisible"
+          class="sm:hidden"
           aria-label="Open options menu"
           preset="plain"
           @click="toggleOptions"
diff --git a/packages/nuxt/src/runtime/plugin.ts b/packages/nuxt/src/runtime/plugin.ts
index b7cf91b70f..a1bd3b1da5 100644
--- a/packages/nuxt/src/runtime/plugin.ts
+++ b/packages/nuxt/src/runtime/plugin.ts
@@ -9,28 +9,27 @@ import {
   type PartialGlobalConfig
 } from 'vuestic-ui'
 import { markRaw, computed, watch, type Ref } from 'vue'
-import { useHead, ReactiveHead, defineNuxtPlugin, useCookie  } from '#imports'
+import type { VuesticOptions } from '../types'
+import { useHead, ReactiveHead, defineNuxtPlugin, useCookie } from '#imports'
 import NuxtLink from '#app/components/nuxt-link'
 import configFromFile from '#vuestic-config'
 
-import type { VuesticOptions } from '../types'
-
 function getGlobalProperty (app, key) {
   return app.config.globalProperties[key]
 }
 
-export default defineNuxtPlugin(async (nuxtApp) => {
+export default defineNuxtPlugin((nuxtApp) => {
   const { vueApp: app } = nuxtApp
 
   // It's important to use `, because TS will compile qoutes to " and JSON will not be parsed...
-  const moduleOptions: VuesticOptions = JSON.parse(`<%= options.value %>`)
+  const moduleOptions: VuesticOptions = JSON.parse('<%= options.value %>')
   const themeCookie = useCookie(moduleOptions.themeCookieKey)
   const userConfig = configFromFile || moduleOptions.config || {}
   const configWithColors: PartialGlobalConfig = {
     ...userConfig,
     colors: {
       currentPresetName: themeCookie.value || userConfig.colors?.currentPresetName || 'light',
-      ...userConfig.colors,
+      ...userConfig.colors
     }
   }
 
@@ -44,7 +43,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       VaDropdownPlugin,
       VaToastPlugin,
       VaModalPlugin,
-      ColorsClassesPlugin,
+      ColorsClassesPlugin
     },
     /** Do not import any components. Nuxt will import them automatically */
     components: {}
diff --git a/packages/ui/src/services/color/CHANGELOG.md b/packages/ui/src/services/color/CHANGELOG.md
index 60548df196..dd5eb2c3fa 100644
--- a/packages/ui/src/services/color/CHANGELOG.md
+++ b/packages/ui/src/services/color/CHANGELOG.md
@@ -1,4 +1,5 @@
 # 1.10.0
 
 - Removed colortranslator and reduced bundle size
-- Color CSS variables now application specific if you have multiple vue apps on page
\ No newline at end of file
+- Color CSS variables now application specific if you have multiple vue apps on page
+- Removed extra predefined CSS variables with default theme
\ No newline at end of file
diff --git a/packages/ui/src/services/color/plugin/create-color-config-plugin.ts b/packages/ui/src/services/color/plugin/create-color-config-plugin.ts
index 1898c6b91b..c052e4f4ab 100644
--- a/packages/ui/src/services/color/plugin/create-color-config-plugin.ts
+++ b/packages/ui/src/services/color/plugin/create-color-config-plugin.ts
@@ -34,7 +34,7 @@ export const createColorConfigPlugin = (app: App, config?: PartialGlobalConfig)
     return `${renderedColors};${renderedOnColors}`
   }
 
-  const renderCSSVariablesStyleContent = (colors: ColorVariables = configColors, selector = ':root') => {
+  const renderCSSVariablesStyleContent = (colors: ColorVariables = configColors, selector = ':root, :host') => {
     const colorNames = Object.keys(colors)
 
     let result = `${selector} {
diff --git a/packages/ui/src/styles/global/css-variables.scss b/packages/ui/src/styles/global/css-variables.scss
index 2a79077dc7..d0b725e24d 100644
--- a/packages/ui/src/styles/global/css-variables.scss
+++ b/packages/ui/src/styles/global/css-variables.scss
@@ -55,28 +55,6 @@
   --va-form-element-border-width: 1px;
   --va-form-element-border-radius: 0.25rem;
 
-  /* Colors */
-  // Accent
-  --va-primary: #154ec1;
-  --va-secondary: #767c88;
-  --va-success: #3d9209;
-  --va-info: #158de3;
-  --va-danger: #e42222;
-  --va-warning: #ffd43a;
-
-  // Background Colors
-  --va-background-primary: #f6f6f6;
-  --va-background-secondary: #ffffff;
-  --va-background-element: #ebf1f4;
-  --va-background-border: #dee5f2;
-
-  // Text Colors
-  --va-text-primary: #262824;
-  --va-text-inverted: #ffffff;
-
-  // Misc
-  --va-shadow: rgba(0, 0, 0, 0.12);
-  --va-focus: #49a8ff;
   --va-gap-small: 0.25rem;
   --va-gap-medium: 0.375rem;
   --va-gap-large: 0.75rem;