feat(va-config): colors prop

packages/docs/layouts/landing.vue

@@ -1,13 +1,15 @@
 <template>
-  <NuxtPage />
+  <VaConfig :colors="{ currentPresetName: 'landing' }">
+    <div class="landing">
+      <NuxtPage />
+    </div>
+  </VaConfig>
 </template>
 
 <script lang="ts" setup>
 import { useColors } from 'vuestic-ui'
 
-const { applyPreset } = useColors()
-
-applyPreset('landing')
+const { presets } = useColors()
 
 useHead({
   title: 'Vuestic UI — Vue 3 UI framework',
@@ -17,11 +19,12 @@ useHead({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 // Need to import tailwind in layout, because otherwise Vuestic component's css will has a higher priority
 // @import '~/assets/css/tailwind.css';
 
-body {
+.landing {
   background: var(--va-background-secondary);
+  color: var(--va-on-background-secondary)
 }
 </style>

packages/ui/src/components/va-config/VaConfig.demo.vue

@@ -70,6 +70,18 @@
         </va-button>
       </va-config>
     </VbCard>
+
+    <VbCard title="Colors">
+      <va-config :colors="{ variables: {
+        primary: '#f0f',
+      } }">
+        <va-button>
+          Button inside va-config
+        </va-button>
+
+        <div style="background-color: var(--va-primary); color: var(--va-on-primary);">CSS variables</div>
+       </va-config>
+    </VbCard>
   </VbDemo>
 </template>
 

packages/ui/src/components/va-config/VaConfig.vue

@@ -1,28 +1,63 @@
 <template>
-  <slot />
+  <CssVarsRenderer v-bind="$attrs">
+    <slot />
+  </CssVarsRenderer>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType } from 'vue'
+import { computed, defineComponent, PropType, h, Fragment } from 'vue'
 import { useComponentPresetProp } from '../../composables/useComponentPreset'
 import { ComponentConfig } from '../../services/component-config'
 
 import { provideLocalConfig, useLocalConfig } from '../../composables/useLocalConfig'
+import { useGlobalConfigProvider } from './hooks/useGlobalConfigProvider'
+import { PartialGlobalConfig } from '../../services/global-config'
+import { renderSlotNodes } from '../../utils/headless'
+import { useColors } from '../../composables'
+
+const CssVarsRenderer = defineComponent({
+  name: 'VaCssVarsRenderer',
+
+  inheritAttrs: false,
+
+  setup (props, { slots, attrs }) {
+    const { colorsToCSSVariable, colors } = useColors()
+
+    const style = computed(() => {
+      return colorsToCSSVariable(colors)
+    })
+
+    return () => h(Fragment, attrs, renderSlotNodes(slots.default, {}, {
+      style: style.value,
+    }) || undefined)
+  },
+})
 
 export default defineComponent({
   name: 'VaConfig',
+  components: { CssVarsRenderer },
   props: {
     ...useComponentPresetProp,
     components: { type: Object as PropType<ComponentConfig>, default: () => ({}) },
+    colors: { type: Object as PropType<PartialGlobalConfig['colors']>, default: () => ({}) },
   },
+  inheritAttrs: false,
   setup (props) {
     const prevChain = useLocalConfig()
     // We want it to be an array and not a merged object for optimization purposes
     const nextChain = computed(() => [...prevChain.value, props.components])
 
     provideLocalConfig(nextChain)
 
-    return {}
+    const newConfig = useGlobalConfigProvider(computed(() => {
+      return {
+        colors: props.colors,
+      }
+    }))
+
+    return {
+      newConfig,
+    }
   },
 })
 </script>

packages/ui/src/components/va-config/hooks/useGlobalConfigProvider.ts

@@ -0,0 +1,45 @@
+import { mergeDeep } from './../../../utils/merge-deep'
+import cloneDeep from 'lodash/cloneDeep'
+import { provide, computed, Ref } from 'vue'
+import { useGlobalConfig } from '../../../composables'
+import { GLOBAL_CONFIG, GlobalConfig, GlobalConfigUpdater, PartialGlobalConfig } from '../../../services/global-config'
+
+export const useGlobalConfigProvider = (next: Ref<PartialGlobalConfig>) => {
+  const { globalConfig } = useGlobalConfig()
+
+  const nextChain = computed(() => {
+    const gcCopy = cloneDeep(globalConfig.value)
+    const compiledCopy: GlobalConfig = {
+      ...gcCopy,
+      colors: {
+        ...gcCopy.colors,
+        get variables () {
+          return this.presets[this.currentPresetName]
+        },
+        set variables (value) {
+          this.presets[this.currentPresetName] = value
+        },
+      },
+    }
+
+    return mergeDeep(compiledCopy, next.value) as GlobalConfig
+  })
+
+  const getGlobalConfig = (): GlobalConfig => nextChain.value
+  const setGlobalConfig = (updater: GlobalConfig | GlobalConfigUpdater<GlobalConfig>) => {
+    throw new Error('setGlobalConfig can not be used in VaConfig')
+  }
+
+  const mergeGlobalConfig = (updater: PartialGlobalConfig | GlobalConfigUpdater<PartialGlobalConfig>) => {
+    throw new Error('mergeGlobalConfig can not be used in VaConfig')
+  }
+
+  provide(GLOBAL_CONFIG, {
+    getGlobalConfig,
+    setGlobalConfig,
+    mergeGlobalConfig,
+    globalConfig: nextChain,
+  })
+
+  return nextChain
+}

packages/ui/src/composables/useColors.ts

@@ -22,6 +22,7 @@ import {
   normalizeColorName,
 } from '../services/color/utils'
 import { isDev } from '../utils/env'
+import kebabCase from 'lodash/kebabCase'
 
 /**
  * You can add these props to any component by destructuring them inside props option.
@@ -111,7 +112,8 @@ export const useColors = () => {
       .keys(colors)
       .filter((key) => colors[key] !== undefined)
       .reduce((acc: Record<string, any>, colorName: string) => {
-        acc[`--${prefix}-${colorName}`] = getColor(colors[colorName], undefined, true)
+        acc[`--${prefix}-${kebabCase(colorName)}`] = getColor(colors[colorName], undefined, true)
+        acc[`--${prefix}-on-${kebabCase(colorName)}`] = getColor(getTextColor(getColor(colors[colorName]!)), undefined, true)
         return acc
       }, {})
   }

packages/ui/src/services/color/tests/color-config.spec.ts

@@ -44,10 +44,10 @@ describe('useColors', () => {
     )
 
     it.each([
-      [[{ color: '#000000' }, 'va-test'], { '--va-test-color': '#000000' }],
-      [[{ color: 'secondary' }, 'va-test'], { '--va-test-color': 'var(--va-secondary)' }],
-      [[{ color: 'var(--va-primary)' }, 'va-test'], { '--va-test-color': 'var(--va-primary)' }], // TODO call Oleg
-      [[{ color: 'bad-color' }, 'va-test'], { '--va-test-color': '#154EC1' }],
+      [[{ color: '#000000' }, 'va-test'], { '--va-test-color': '#000000', '--va-test-on-color': 'var(--va-text-inverted)' }],
+      [[{ color: 'secondary' }, 'va-test'], { '--va-test-color': 'var(--va-secondary)', '--va-test-on-color': 'var(--va-text-inverted)' }],
+      [[{ color: 'var(--va-primary)' }, 'va-test'], { '--va-test-color': 'var(--va-primary)', '--va-test-on-color': 'var(--va-text-inverted)' }],
+      [[{ color: 'bad-color' }, 'va-test'], { '--va-test-color': '#154EC1', '--va-test-on-color': 'var(--va-text-inverted)' }],
       [[{}, 'va-test'], {}],
     ])(
       'colorToCssVariableArgs %s should be %s',

packages/ui/src/utils/headless.ts

@@ -37,7 +37,7 @@ const toNode = (v: any, attrs: NodeAttributes): VNode | null => {
 
   if (v.type === Fragment) {
     if (v.children === null) { return v }
-    return toNode(v.children[0], attrs)
+    return h(Fragment, v.props, v.children.map((v: any) => toNode(v, attrs)))
   }
 
   return h(v, attrs)

packages/ui/src/utils/merge-deep.ts

@@ -14,7 +14,10 @@ export const mergeDeep = (target: any, source: any): any => {
     const sourceValue = source[key]
 
     if (isObject(targetValue) && isObject(sourceValue)) {
-      target[key] = mergeDeep(Object.assign({}, targetValue), sourceValue)
+      target[key] = mergeDeep(Object.create(
+        Object.getPrototypeOf(targetValue),
+        Object.getOwnPropertyDescriptors(targetValue),
+      ), sourceValue)
     } else {
       target[key] = sourceValue
     }