feature: support configure css variables generation location

packages/nuxt/nuxt.shim.d.ts

@@ -13,7 +13,7 @@ declare module 'vuestci-ui' {
 }
 
 declare module '#imports' {
-  export * from 'nuxt/dist/head/runtime/composables.ts'
+  export * from '@unhead/vue'
 }
 
 declare module '#vuestic-config' {

packages/nuxt/src/runtime/plugin.ts

@@ -11,7 +11,7 @@ import {
 import { markRaw, computed, watch, type Ref } from 'vue'
 
 import { defineNuxtPlugin, useCookie } from '#app'
-import { useHead } from '#imports'
+import { useHead, ReactiveHead } from '#imports'
 import NuxtLink from '#app/components/nuxt-link'
 import configFromFile from '#vuestic-config'
 
@@ -56,21 +56,25 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   if (colorConfig) {
     useHead(computed(() => {
       return {
-        htmlAttrs: {
-          style: colorConfig.renderCSSVariables()
-        }
-      }
+        style: [
+          {
+            innerHTML: colorConfig.renderCSSVariablesStyleContent()
+          }
+        ]
+      } satisfies ReactiveHead
     }))
   }
 
   const colorsClasses = getGlobalProperty(app, '$vaColorsClasses')
   if (colorsClasses) {
     useHead(computed(() => {
       return {
-        htmlAttrs: {
-          style: colorsClasses.renderColorHelpers()
-        }
-      }
+        style: [
+          {
+            innerHTML: colorsClasses.renderColorHelpers()
+          }
+        ]
+      } satisfies ReactiveHead
     }))
   }
 

packages/ui/src/components/va-alert/useAlertStyles.ts

@@ -50,7 +50,7 @@ export const useAlertStyles = (props: AlertStyleProps) => {
   const contentStyle = computed(() => {
     return {
       alignItems: props.center ? 'center' : '',
-      color: (props.border || props.outline) ? getColor(getTextColor(background.value), undefined, true) : textColorComputed.value,
+      color: (props.border || props.outline) ? 'currentColor' : textColorComputed.value,
     }
   })
 

packages/ui/src/services/color/plugin/create-color-config-plugin.ts

@@ -1,14 +1,20 @@
 import { PartialGlobalConfig } from './../../global-config/types'
 import { ColorVariables } from './../types'
-import { App, watch } from 'vue'
+import { App, watch, computed } from 'vue'
 import { isServer } from '../../../utils/ssr'
 import { cssVariableName } from '../utils'
 import { useColors } from '../../../composables'
+import { generateUniqueId } from '../../../utils/uuid'
+import { addOrUpdateStyleElement } from '../../../utils/dom'
 
 export const setCSSVariable = (name: string, value: string, root: HTMLElement) => {
   root.style.setProperty(cssVariableName(name), value)
 }
 
+export const generateCSSVariable = (key: string, value: string) => {
+  return `${cssVariableName(key)}: ${value};\n`
+}
+
 export const createColorConfigPlugin = (app: App, config?: PartialGlobalConfig) => {
   const { colors: configColors, getTextColor, getColor, currentPresetName, applyPreset } = useColors()
 
@@ -23,27 +29,41 @@ export const createColorConfigPlugin = (app: App, config?: PartialGlobalConfig)
     return `${renderedColors};${renderedOnColors}`
   }
 
-  const updateColors = (newValue: ColorVariables | undefined) => {
-    if (!newValue) { return }
-    if (isServer()) { return }
-
-    const root = document.documentElement
+  const renderCSSVariablesStyleContent = (colors: ColorVariables = configColors) => {
+    const colorNames = Object.keys(colors)
 
-    const colorNames = Object.keys(newValue)
+    let result = ':root {\n'
     colorNames.forEach((key) => {
-      setCSSVariable(key, newValue[key], root)
+      result += generateCSSVariable(key, colors[key])
     })
     colorNames.forEach((key) => {
-      setCSSVariable(`on-${key}`, getColor(getTextColor(newValue[key])), root)
+      result += generateCSSVariable(`on-${key}`, getColor(getTextColor(colors[key])))
     })
+    result += '}\n'
+
+    return result
+  }
+
+  const uniqueId = computed(generateUniqueId)
+
+  const updateColors = (newValue: ColorVariables | undefined) => {
+    if (!newValue) { return }
+    if (isServer()) { return }
+
+    const styleContent = renderCSSVariablesStyleContent(newValue)
+
+    addOrUpdateStyleElement(`va-color-variables-${uniqueId.value}`, () => styleContent)
   }
 
   watch(configColors, (newValue) => {
     updateColors(newValue)
   }, { immediate: true, deep: true })
 
   return {
+    colors: configColors,
+    currentPresetName,
     renderCSSVariables,
     updateColors,
+    renderCSSVariablesStyleContent,
   }
 }