fix(module): handle nested colors from ui config (#2008)

Author: davestewart

docs/content/1.getting-started/3.theming.md

@@ -23,7 +23,7 @@ export default defineAppConfig({
 Try to change the `primary` and `gray` colors by clicking on the :u-icon{name="i-heroicons-swatch-20-solid" class="w-4 h-4 align-middle text-primary-500 dark:text-primary-400"} button in the header.
 ::
 
-As this module uses Tailwind CSS under the hood, you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. By default, the `primary` color is `green` and the `gray` color is `cool`.
+As this module uses Tailwind CSS under the hood, you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors or groups, such as `brand.primary`. By default, the `primary` color is `green` and the `gray` color is `cool`.
 
 When [using custom colors](https://tailwindcss.com/docs/customizing-colors#using-custom-colors) or [adding additional colors](https://tailwindcss.com/docs/customizing-colors#adding-additional-colors) through the `extend` key in your `tailwind.config.ts`, you'll need to make sure to define all the shades from `50` to `950` as most of them are used in the components config defined in [`ui.config/`](https://github.com/nuxt/ui/tree/dev/src/runtime/ui.config) directory. You can [generate your colors](https://tailwindcss.com/docs/customizing-colors#generating-colors) using tools such as https://uicolors.app/ for example.
 

src/runtime/plugins/colors.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import { hexToRgb } from '../utils'
+import { get, hexToRgb } from '../utils'
 import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from '#imports'
 import colors from '#tailwind-config/theme/colors'
 
@@ -8,8 +8,8 @@ export default defineNuxtPlugin(() => {
   const nuxtApp = useNuxtApp()
 
   const root = computed(() => {
-    const primary: Record<string, string> | undefined = colors[appConfig.ui.primary]
-    const gray: Record<string, string> | undefined = colors[appConfig.ui.gray]
+    const primary: Record<string, string> | undefined = get(colors, appConfig.ui.primary)
+    const gray: Record<string, string> | undefined = get(colors, appConfig.ui.gray)
 
     if (!primary) {
       console.warn(`[@nuxt/ui] Primary color '${appConfig.ui.primary}' not found in Tailwind config`)