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

refactor(module)!: implement design system with CSS variables (#2298)

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-07 14:48:02 +02:00
committed by GitHub
parent 3cf5535b2f
commit 9368c6a639
279 changed files with 6533 additions and 6994 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/module.ts
View File

@@ -2,6 +2,7 @@ import { defu } from 'defu'
import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, installModule, hasNuxtModule } from '@nuxt/kit'
import { addTemplates } from './templates'
import icons from './theme/icons'
import { pick } from './runtime/utils'
export type * from './runtime/types'
@@ -18,10 +19,16 @@ export interface ModuleOptions {
*/
fonts?: boolean
/**
* Enable or disable `@nuxtjs/color-mode` module
* @defaultValue true
*/
colorMode?: boolean
theme?: {
/**
* Colors to generate classes for (defaults to TailwindCSS colors)
* @defaultValue ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
* @defaultValue ['primary', 'secondary', 'success', 'info', 'warning', 'error']
*/
colors?: string[]
@@ -44,6 +51,7 @@ export default defineNuxtModule<ModuleOptions>({
defaults: {
prefix: 'U',
fonts: true,
colorMode: true,
theme: {
colors: undefined,
transitions: true
@@ -53,18 +61,22 @@ export default defineNuxtModule<ModuleOptions>({
const { resolve } = createResolver(import.meta.url)
options.theme = options.theme || {}
options.theme.colors = options.theme.colors?.length ? [...new Set(['primary', 'error', ...options.theme.colors])] : ['primary', 'error', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
options.theme.colors = options.theme.colors?.length ? [...new Set(['primary', ...options.theme.colors])] : ['primary', 'secondary', 'success', 'info', 'warning', 'error']
nuxt.options.ui = options
nuxt.options.alias['#ui'] = resolve('./runtime')
nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
colors: {
colors: pick({
primary: 'green',
secondary: 'blue',
success: 'green',
info: 'blue',
warning: 'yellow',
error: 'red',
gray: 'slate'
},
neutral: 'slate'
}, [...(options.theme?.colors || []), 'neutral' as any]),
icons
})
@@ -88,8 +100,12 @@ export default defineNuxtModule<ModuleOptions>({
}
await registerModule('@nuxt/icon', { cssLayer: 'components' })
await registerModule('@nuxt/fonts', { experimental: { processCSSVariables: true } })
await registerModule('@nuxtjs/color-mode', { classSuffix: '', disableTransition: true })
if (options.fonts) {
await registerModule('@nuxt/fonts', { experimental: { processCSSVariables: true } })
}
if (options.colorMode) {
await registerModule('@nuxtjs/color-mode', { classSuffix: '', disableTransition: true })
}
addPlugin({ src: resolve('./runtime/plugins/colors') })
addPlugin({ src: resolve('./runtime/plugins/modal') })