arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve code reusability

Browse Source
This commit is contained in:
HugoRCD
2025-04-25 10:45:26 +02:00
parent 8284d05529
commit 776aef6e7f
3 changed files with 38 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/runtime/plugins/colors.ts
View File

@@ -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 = {

34
src/runtime/utils/colors.ts Normal file
View File

@@ -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<string, string>) {
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 ')}
}
}`
}

36
src/runtime/vue/plugins/colors.ts
View File

@@ -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
})
}