From 776aef6e7f3596e29db886bac4c0187d28d44715 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Fri, 25 Apr 2025 10:45:26 +0200 Subject: [PATCH] improve code reusability --- src/runtime/plugins/colors.ts | 34 ++--------------------------- src/runtime/utils/colors.ts | 34 +++++++++++++++++++++++++++++ src/runtime/vue/plugins/colors.ts | 36 ++----------------------------- 3 files changed, 38 insertions(+), 66 deletions(-) create mode 100644 src/runtime/utils/colors.ts diff --git a/src/runtime/plugins/colors.ts b/src/runtime/plugins/colors.ts index 9ae716d6..dd9292eb 100644 --- a/src/runtime/plugins/colors.ts +++ b/src/runtime/plugins/colors.ts @@ -1,43 +1,13 @@ import { computed } from 'vue' -import colors from 'tailwindcss/colors' import type { UseHeadInput } from '@unhead/vue/types' import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from '#imports' - -const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const - -function getColor(color: keyof typeof colors, shade: typeof shades[number]): string { - if (color in colors && typeof colors[color] === 'object' && shade in colors[color]) { - return colors[color][shade] as string - } - return '' -} - -function generateShades(key: string, value: string) { - return `${shades.map(shade => `--ui-color-${key}-${shade}: var(--color-${value === 'neutral' ? 'old-neutral' : value}-${shade}, ${getColor(value as keyof typeof colors, shade)});`).join('\n ')}` -} -function generateColor(key: string, shade: number) { - return `--ui-${key}: var(--ui-color-${key}-${shade});` -} +import { generateColorStyles } from '../utils/colors' export default defineNuxtPlugin(() => { const appConfig = useAppConfig() const nuxtApp = useNuxtApp() - const root = computed(() => { - const { neutral, ...colors } = appConfig.ui.colors - - return `@layer base { - :root { - ${Object.entries(appConfig.ui.colors).map(([key, value]: [string, string]) => generateShades(key, value)).join('\n ')} - } - :root, .light { - ${Object.keys(colors).map(key => generateColor(key, 500)).join('\n ')} - } - .dark { - ${Object.keys(colors).map(key => generateColor(key, 400)).join('\n ')} - } -}` - }) + const root = computed(() => generateColorStyles(appConfig.ui.colors)) // Head const headData: UseHeadInput = { diff --git a/src/runtime/utils/colors.ts b/src/runtime/utils/colors.ts new file mode 100644 index 00000000..f593a8b7 --- /dev/null +++ b/src/runtime/utils/colors.ts @@ -0,0 +1,34 @@ +import colors from 'tailwindcss/colors' + +export const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const + +export function getColor(color: keyof typeof colors, shade: typeof shades[number]): string { + if (color in colors && typeof colors[color] === 'object' && shade in colors[color]) { + return colors[color][shade] as string + } + return '' +} + +export function generateShades(key: string, value: string) { + return `${shades.map(shade => `--ui-color-${key}-${shade}: var(--color-${value === 'neutral' ? 'old-neutral' : value}-${shade}, ${getColor(value as keyof typeof colors, shade)});`).join('\n ')}` +} + +export function generateColor(key: string, shade: number) { + return `--ui-${key}: var(--ui-color-${key}-${shade});` +} + +export function generateColorStyles(colors: Record) { + const { neutral, ...rest } = colors + + return `@layer base { + :root { + ${Object.entries(colors).map(([key, value]: [string, string]) => generateShades(key, value)).join('\n ')} + } + :root, .light { + ${Object.keys(rest).map(key => generateColor(key, 500)).join('\n ')} + } + .dark { + ${Object.keys(rest).map(key => generateColor(key, 400)).join('\n ')} + } +}` +} diff --git a/src/runtime/vue/plugins/colors.ts b/src/runtime/vue/plugins/colors.ts index ae0bad37..e0a05c34 100644 --- a/src/runtime/vue/plugins/colors.ts +++ b/src/runtime/vue/plugins/colors.ts @@ -1,46 +1,15 @@ import { computed, watchEffect } from 'vue' -import colors from 'tailwindcss/colors' import { useHead } from '@unhead/vue' import type { Plugin } from 'vue' import { useAppConfig } from '../composables/useAppConfig' - -const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const - -function getColor(color: keyof typeof colors, shade: typeof shades[number]): string { - if (color in colors && typeof colors[color] === 'object' && shade in colors[color]) { - return colors[color][shade] as string - } - return '' -} - -function generateShades(key: string, value: string) { - return `${shades.map(shade => `--ui-color-${key}-${shade}: var(--color-${value === 'neutral' ? 'old-neutral' : value}-${shade}, ${getColor(value as keyof typeof colors, shade)});`).join('\n ')}` -} - -function generateColor(key: string, shade: number) { - return `--ui-${key}: var(--ui-color-${key}-${shade});` -} +import { generateColorStyles } from '../../utils/colors' export default { install(app) { app.runWithContext(() => { const appConfig = useAppConfig() - const root = computed(() => { - const { neutral, ...colors } = appConfig.ui.colors - - return `@layer base { - :root { - ${Object.entries(appConfig.ui.colors).map(([key, value]: [string, string]) => generateShades(key, value)).join('\n ')} - } - :root, .light { - ${Object.keys(colors).map(key => generateColor(key, 500)).join('\n ')} - } - .dark { - ${Object.keys(colors).map(key => generateColor(key, 400)).join('\n ')} - } -}` - }) + const root = computed(() => generateColorStyles(appConfig.ui.colors)) useHead({ style: [{ @@ -58,7 +27,6 @@ export default { styleEl.id = 'nuxt-ui-colors-vue' document.head.appendChild(styleEl) } - styleEl.innerHTML = root.value }) }