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

chore(module): update theming

Browse Source
This commit is contained in:
Benjamin Canac
2024-03-07 15:33:53 +01:00
parent 0d1e17ef74
commit c79e6f188d
12 changed files with 231 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/module.ts
View File

@@ -2,27 +2,31 @@ import { defu } from 'defu'
import { createResolver, defineNuxtModule, addComponentsDir, addImportsDir, addVitePlugin, addPlugin, installModule } from '@nuxt/kit'
import tailwindcss from '@tailwindcss/vite'
import createTemplates from './templates'
import type { DeepPartial } from './runtime/types'
import * as theme from './runtime/theme'
// import type { DeepPartial } from './runtime/types'
// import * as theme from './runtime/theme'
type UI = {
primary?: string
gray?: string
[key: string]: any
} & DeepPartial<typeof theme>
// type UI = {
// primary?: string
// gray?: string
// [key: string]: any
// } & DeepPartial<typeof theme>
declare module 'nuxt/schema' {
interface AppConfigInput {
ui?: UI
}
}
declare module '@nuxt/schema' {
interface AppConfigInput {
ui?: UI
}
// declare module 'nuxt/schema' {
// interface AppConfigInput {
// ui?: UI
// }
// }
// declare module '@nuxt/schema' {
// interface AppConfigInput {
// ui?: UI
// }
// }
export interface ModuleOptions {
colors: string[]
}
export default defineNuxtModule({
export default defineNuxtModule<ModuleOptions>({
meta: {
name: 'ui',
configKey: 'ui',
@@ -30,10 +34,13 @@ export default defineNuxtModule({
nuxt: '^3.10.0'
}
},
async setup (_, nuxt) {
const resolver = createResolver(import.meta.url)
defaults: {
colors: ['primary', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose']
},
async setup (options, nuxt) {
const { resolve } = createResolver(import.meta.url)
nuxt.options.alias['#ui'] = resolver.resolve('./runtime')
nuxt.options.alias['#ui'] = resolve('./runtime')
nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
primary: 'green',
@@ -49,21 +56,21 @@ export default defineNuxtModule({
addVitePlugin(tailwindcss)
createTemplates(nuxt)
createTemplates(options, nuxt)
await installModule('nuxt-icon')
// await installModule('@nuxtjs/color-mode', { classSuffix: '' })
addPlugin({
src: resolver.resolve('./runtime/plugins/index')
src: resolve('./runtime/plugins/index')
})
addComponentsDir({
path: resolver.resolve('./runtime/components'),
path: resolve('./runtime/components'),
prefix: 'U',
pathPrefix: false
})
addImportsDir(resolver.resolve('./runtime/composables'))
addImportsDir(resolve('./runtime/composables'))
}
})

18
src/runtime/components/Button.vue
View File

@@ -2,10 +2,11 @@
import { tv, type VariantProps } from 'tailwind-variants'
// import appConfig from '#build/app.config'
import type { LinkProps } from '#ui/components/Link.vue'
import theme from '#ui/theme/button'
import theme from '#build/ui/button'
// @ts-ignore
const button = tv(theme)
// const appButton = tv({ extend: button, ...(appConfig.ui?.button || {}) })
// const button = tv({ extend: tv(theme), ...(appConfig.ui?.button || {}) })
type ButtonVariants = VariantProps<typeof button>
@@ -90,19 +91,6 @@ const trailingIconName = computed(() => {
:disabled="disabled || loading"
:class="ui.base({ class: props.class })"
v-bind="{ ...forward, ...$attrs }"
:style="color && {
'--color-current-50': `var(--color-${color}-50)`,
'--color-current-100': `var(--color-${color}-100)`,
'--color-current-200': `var(--color-${color}-200)`,
'--color-current-300': `var(--color-${color}-300)`,
'--color-current-400': `var(--color-${color}-400)`,
'--color-current-500': `var(--color-${color}-500)`,
'--color-current-600': `var(--color-${color}-600)`,
'--color-current-700': `var(--color-${color}-700)`,
'--color-current-800': `var(--color-${color}-800)`,
'--color-current-900': `var(--color-${color}-900)`,
'--color-current-950': `var(--color-${color}-950)`
}"
>
<slot name="leading" :disabled="disabled" :loading="loading" :ui="ui.icon()">
<UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.icon()" aria-hidden="true" />

2
src/runtime/components/Container.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { tv } from 'tailwind-variants'
// import appConfig from '#build/app.config'
import theme from '#ui/theme/container'
import theme from '#build/ui/container'
const container = tv(theme)
// const appContainer = tv({ extend: container, ...(appConfig.ui?.container || {}) })

2
src/runtime/components/Tooltip.vue
View File

@@ -2,7 +2,7 @@
import { tv } from 'tailwind-variants'
import type { TooltipRootProps, TooltipRootEmits, TooltipContentProps } from 'radix-vue'
// import appConfig from '#build/app.config'
import theme from '#ui/theme/tooltip'
import theme from '#build/ui/tooltip'
const tooltip = tv(theme)
// const appTooltip = tv({ extend: tooltip, ...(appConfig.ui?.tooltip || {}) })

1
src/runtime/plugins/index.ts
View File

@@ -9,7 +9,6 @@ export default defineNuxtPlugin(() => {
const root = computed(() => {
return `:root {
${shades.map(shade => `--color-current-${shade}: var(--color-${appConfig.ui.primary}-${shade});`).join('\n')}
${shades.map(shade => `--color-primary-${shade}: var(--color-${appConfig.ui.primary}-${shade});`).join('\n')}
--color-primary-DEFAULT: var(--color-primary-500);
${shades.map(shade => `--color-gray-${shade}: var(--color-${appConfig.ui.gray}-${shade});`).join('\n')}

142
src/runtime/theme/button.ts
View File

@@ -1,142 +0,0 @@
const colors = ['primary', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchia', 'pink', 'rose']
export default {
slots: {
base: 'rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0',
label: '',
icon: 'shrink-0'
},
variants: {
color: {
primary: '',
red: '',
orange: '',
amber: '',
yellow: '',
lime: '',
green: '',
emerald: '',
teal: '',
cyan: '',
sky: '',
blue: '',
indigo: '',
violet: '',
purple: '',
fuchia: '',
pink: '',
rose: ''
},
variant: {
solid: '',
outline: '',
soft: '',
ghost: '',
link: ''
},
size: {
'2xs': {
base: 'px-2 py-1 text-xs gap-x-1',
icon: 'h-4 w-4'
},
xs: {
base: 'px-2.5 py-1.5 text-xs gap-x-1.5',
icon: 'h-4 w-4'
},
sm: {
base: 'px-2.5 py-1.5 text-sm gap-x-1.5',
icon: 'h-5 w-5'
},
md: {
base: 'px-3 py-2 text-sm gap-x-2',
icon: 'h-5 w-5'
},
lg: {
base: 'px-3.5 py-2.5 text-sm gap-x-2.5',
icon: 'h-6 w-6'
},
xl: {
base: 'px-3.5 py-2.5 text-base gap-x-2.5',
icon: 'h-6 w-6'
}
},
truncate: {
true: {
label: 'truncate'
}
},
loading: {
true: {
icon: 'animate-spin'
}
},
block: {
true: 'w-full justify-center'
},
square: {
true: ''
}
},
compoundVariants: [{
color: ['primary'] as any,
variant: 'solid' as const,
class: { base: 'shadow-sm text-white dark:text-gray-900 bg-[--color-current-500] hover:bg-[--color-current-600] disabled:bg-[--color-current-500] dark:bg-[--color-current-400] dark:hover:bg-[--color-current-500] dark:disabled:bg-[--color-current-400] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[--color-current-500] dark:focus-visible:outline-[--color-current-400]' }
}, {
color: colors as any,
variant: 'outline' as const,
class: 'ring-1 ring-inset ring-current text-[--color-current-500] dark:text-[--color-current-400] hover:bg-[--color-current-50] disabled:bg-transparent dark:hover:bg-[--color-current-950] dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-[--color-current-500] dark:focus-visible:ring-[--color-current-400]'
}, {
color: colors as any,
variant: 'soft' as const,
class: 'text-[--color-current-500] dark:text-[--color-current-400] bg-[--color-current-50] hover:bg-[--color-current-100] disabled:bg-[--color-current-50] dark:bg-[--color-current-950] dark:hover:bg-[--color-current-900] dark:disabled:bg-[--color-current-950] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--color-current-500] dark:focus-visible:ring-[--color-current-400]'
}, {
color: colors as any,
variant: 'ghost' as const,
class: 'text-[--color-current-500] dark:text-[--color-current-400] hover:bg-[--color-current-50] disabled:bg-transparent dark:hover:bg-[--color-current-950] dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--color-current-500] dark:focus-visible:ring-[--color-current-400]'
}, {
color: colors as any,
variant: 'link' as const,
class: 'text-[--color-current-500] hover:text-[--color-current-600] disabled:text-[--color-current-500] dark:text-[--color-current-400] dark:hover:text-[--color-current-500] dark:disabled:text-[--color-current-400] underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[--color-current-500] dark:focus-visible:ring-[--color-current-400]'
}, {
size: '2xs' as const,
square: true,
class: {
base: 'p-1'
}
}, {
size: 'xs' as const,
square: true,
class: {
base: 'p-1'
}
}, {
size: 'sm' as const,
square: true,
class: {
base: 'p-1'
}
}, {
size: 'md' as const,
square: true,
class: {
base: 'p-2'
}
}, {
size: 'lg' as const,
square: true,
class: {
base: 'p-2'
}
}, {
size: 'xl' as const,
square: true,
class: {
base: 'p-2'
}
}],
defaultVariants: {
color: 'primary' as const,
variant: 'solid' as const,
size: 'sm' as const
}
}

25
src/templates.ts
View File

@@ -1,6 +1,9 @@
import { useNuxt, addTemplate } from '@nuxt/kit'
import { addTemplate, addTypeTemplate } from '@nuxt/kit'
import type { Nuxt } from '@nuxt/schema'
import type { ModuleOptions } from './module'
import * as theme from './theme'
export default function createTemplates (nuxt = useNuxt()) {
export default function createTemplates (options: ModuleOptions, nuxt: Nuxt) {
const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
const template = addTemplate({
@@ -23,7 +26,6 @@ export default function createTemplates (nuxt = useNuxt()) {
--color-cool-900: #111827;
--color-cool-950: #030712;
${shades.map(shade => `--color-current-${shade}: var(--color-${nuxt.options.appConfig.ui.primary}-${shade});`).join('\n')}
${shades.map(shade => `--color-primary-${shade}: var(--color-${nuxt.options.appConfig.ui.primary}-${shade});`).join('\n')}
${shades.map(shade => `--color-gray-${shade}: var(--color-${nuxt.options.appConfig.ui.gray}-${shade});`).join('\n')}
}
@@ -31,4 +33,21 @@ export default function createTemplates (nuxt = useNuxt()) {
})
nuxt.options.css.push(template.dst)
for (const component in theme) {
addTemplate({
filename: `ui/${component}.ts`,
write: true,
getContents: () => `export default ${JSON.stringify((theme as any)[component]({ colors: options.colors }), null, 2)}`
})
// addTypeTemplate({
// filename: `ui/${component}.d.ts`,
// write: true,
// getContents: () => `import ${component} from './${component}'
// type T = typeof ${component}
// export default T`
// })
}
}

149
src/theme/button.ts Normal file
View File

@@ -0,0 +1,149 @@
export default (config: any) => ({
slots: {
base: 'rounded-md font-medium inline-flex items-center focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 shrink-0',
label: '',
icon: 'shrink-0'
},
variants: {
color: Object.fromEntries(config.colors.map((color: string) => [color, ''])),
variant: {
solid: '',
outline: '',
soft: '',
ghost: '',
link: ''
},
size: {
'2xs': {
base: 'px-2 py-1 text-xs gap-x-1',
icon: 'h-4 w-4'
},
xs: {
base: 'px-2.5 py-1.5 text-xs gap-x-1.5',
icon: 'h-4 w-4'
},
sm: {
base: 'px-2.5 py-1.5 text-sm gap-x-1.5',
icon: 'h-5 w-5'
},
md: {
base: 'px-3 py-2 text-sm gap-x-2',
icon: 'h-5 w-5'
},
lg: {
base: 'px-3.5 py-2.5 text-sm gap-x-2.5',
icon: 'h-6 w-6'
},
xl: {
base: 'px-3.5 py-2.5 text-base gap-x-2.5',
icon: 'h-6 w-6'
}
},
truncate: {
true: {
label: 'truncate'
}
},
loading: {
true: {
icon: 'animate-spin'
}
},
block: {
true: 'w-full justify-center'
},
square: {
true: ''
}
},
compoundVariants: [...config.colors.map((color: string) => ({
color,
variant: 'solid',
class: `shadow-sm text-white dark:text-gray-900 bg-${color}-500 hover:bg-${color}-600 disabled:bg-${color}-500 dark:bg-${color}-400 dark:hover:bg-${color}-500 dark:disabled:bg-${color}-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
})), ...config.colors.map((color: string) => ({
color,
variant: 'outline',
class: `ring-1 ring-inset ring-current text-${color}-500 dark:text-${color}-400 hover:bg-${color}-50 disabled:bg-transparent dark:hover:bg-${color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
})), ...config.colors.map((color: string) => ({
color,
variant: 'soft',
class: `text-${color}-500 dark:text-${color}-400 bg-${color}-50 hover:bg-${color}-100 disabled:bg-${color}-50 dark:bg-${color}-950 dark:hover:bg-${color}-900 dark:disabled:bg-${color}-950 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
})), ...config.colors.map((color: string) => ({
color,
variant: 'ghost',
class: `text-${color}-500 dark:text-${color}-400 hover:bg-${color}-50 disabled:bg-transparent dark:hover:bg-${color}-950 dark:disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
})), ...config.colors.map((color: string) => ({
color,
variant: 'link',
class: `text-${color}-500 hover:text-${color}-600 disabled:text-${color}-500 dark:text-${color}-400 dark:hover:text-${color}-500 dark:disabled:text-${color}-400 underline-offset-4 hover:underline focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
})), {
color: 'white',
variant: 'solid',
class: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white hover:bg-gray-50 disabled:bg-white dark:bg-gray-900 dark:hover:bg-gray-800/50 dark:disabled:bg-gray-900 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
color: 'white',
variant: 'ghost',
class: 'text-gray-900 dark:text-white hover:bg-white dark:hover:bg-gray-900 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
color: 'gray',
variant: 'solid',
class: 'shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 hover:bg-gray-100 disabled:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700/50 dark:disabled:bg-gray-800 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
color: 'gray',
variant: 'ghost',
class: 'text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-gray-800 focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
color: 'gray',
variant: 'link',
class: 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
color: 'black',
variant: 'solid',
class: 'shadow-sm text-white dark:text-gray-900 bg-gray-900 hover:bg-gray-800 disabled:bg-gray-900 dark:bg-white dark:hover:bg-gray-100 dark:disabled:bg-white focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
color: 'black',
variant: 'link',
class: 'text-gray-900 dark:text-white underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400'
}, {
size: '2xs',
square: true,
class: {
base: 'p-1'
}
}, {
size: 'xs',
square: true,
class: {
base: 'p-1'
}
}, {
size: 'sm',
square: true,
class: {
base: 'p-1'
}
}, {
size: 'md',
square: true,
class: {
base: 'p-2'
}
}, {
size: 'lg',
square: true,
class: {
base: 'p-2'
}
}, {
size: 'xl',
square: true,
class: {
base: 'p-2'
}
}],
defaultVariants: {
color: 'primary',
variant: 'solid',
size: 'sm'
}
})

4
src/runtime/theme/container.ts → src/theme/container.ts
View File

@@ -1,3 +1,3 @@
export default {
export default () => ({
base: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8'
}
})

0
src/runtime/theme/index.ts → src/theme/index.ts
View File

4
src/runtime/theme/tooltip.ts → src/theme/tooltip.ts
View File

@@ -1,6 +1,6 @@
export default {
export default () => ({
slots: {
content: 'bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring-1 ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs font-normal truncate relative',
arrow: 'fill-white dark:fill-gray-900'
}
}
})