mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
feat(module): generate tailwindcss theme colors (#2967)
Co-authored-by: HugoRCD <hugo.richard@epitech.eu> Co-authored-by: Sébastien Chopin <seb@nuxt.com>
This commit is contained in:
Benjamin Canac
GitHub
@@ -7,7 +7,7 @@
|
||||
[![License][license-src]][license-href]
|
||||
[![Nuxt][nuxt-src]][nuxt-href]
|
||||
|
||||
We're thrilled to introduce Nuxt UI v3, a significant upgrade to our UI library that delivers extensive improvements and robust new capabilities. This major update harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS v4](https://tailwindcss.com/docs/v4-beta), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
|
||||
We're thrilled to introduce Nuxt UI v3, a significant upgrade to our UI library that delivers extensive improvements and robust new capabilities. This major update harnesses the combined strengths of [Reka UI](https://reka-ui.com/), [Tailwind CSS v4](https://tailwindcss.com/), and [Tailwind Variants](https://www.tailwind-variants.org/) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.
|
||||
|
||||
> [!NOTE]
|
||||
> You are on the `v3` development branch, check out the [dev branch](https://github.com/nuxt/ui/tree/dev) for Nuxt UI v2.
|
||||
|
||||
@@ -5,7 +5,8 @@ export default defineAppConfig({
|
||||
duration: 5000
|
||||
},
|
||||
theme: {
|
||||
radius: 0.25
|
||||
radius: 0.25,
|
||||
blackAsPrimary: false
|
||||
},
|
||||
ui: {
|
||||
colors: {
|
||||
|
||||
@@ -50,6 +50,7 @@ const links = computed(() => [{
|
||||
|
||||
const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
|
||||
const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
|
||||
const blackAsPrimary = computed(() => appConfig.theme.blackAsPrimary ? `:root { --ui-primary: black; } .dark { --ui-primary: white; }` : ':root {}')
|
||||
|
||||
useHead({
|
||||
meta: [
|
||||
@@ -61,7 +62,8 @@ useHead({
|
||||
{ rel: 'canonical', href: `https://ui.nuxt.com${withoutTrailingSlash(route.path)}` }
|
||||
],
|
||||
style: [
|
||||
{ innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 }
|
||||
{ innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 },
|
||||
{ innerHTML: blackAsPrimary, id: 'nuxt-ui-black-as-primary', tagPriority: -2 }
|
||||
],
|
||||
htmlAttrs: {
|
||||
lang: 'en'
|
||||
|
||||
@@ -1,3 +1,64 @@
|
||||
<script setup lang="ts">
|
||||
import colors from 'tailwindcss/colors'
|
||||
import { omit } from '#ui/utils'
|
||||
|
||||
const appConfig = useAppConfig()
|
||||
const colorMode = useColorMode()
|
||||
|
||||
const neutralColors = ['slate', 'gray', 'zinc', 'neutral', 'stone']
|
||||
const neutral = computed({
|
||||
get() {
|
||||
return appConfig.ui.colors.neutral
|
||||
},
|
||||
set(option) {
|
||||
appConfig.ui.colors.neutral = option
|
||||
window.localStorage.setItem('nuxt-ui-neutral', appConfig.ui.colors.neutral)
|
||||
}
|
||||
})
|
||||
|
||||
const colorsToOmit = ['inherit', 'current', 'transparent', 'black', 'white', ...neutralColors]
|
||||
const primaryColors = Object.keys(omit(colors, colorsToOmit as any))
|
||||
const primary = computed({
|
||||
get() {
|
||||
return appConfig.ui.colors.primary
|
||||
},
|
||||
set(option) {
|
||||
appConfig.ui.colors.primary = option
|
||||
window.localStorage.setItem('nuxt-ui-primary', appConfig.ui.colors.primary)
|
||||
setBlackAsPrimary(false)
|
||||
}
|
||||
})
|
||||
|
||||
const radiuses = [0, 0.125, 0.25, 0.375, 0.5]
|
||||
const radius = computed({
|
||||
get() {
|
||||
return appConfig.theme.radius
|
||||
},
|
||||
set(option) {
|
||||
appConfig.theme.radius = option
|
||||
window.localStorage.setItem('nuxt-ui-radius', String(appConfig.theme.radius))
|
||||
}
|
||||
})
|
||||
|
||||
const modes = [
|
||||
{ label: 'light', icon: appConfig.ui.icons.light },
|
||||
{ label: 'dark', icon: appConfig.ui.icons.dark }
|
||||
]
|
||||
const mode = computed({
|
||||
get() {
|
||||
return colorMode.value
|
||||
},
|
||||
set(option) {
|
||||
colorMode.preference = option
|
||||
}
|
||||
})
|
||||
|
||||
function setBlackAsPrimary(value: boolean) {
|
||||
appConfig.theme.blackAsPrimary = value
|
||||
window.localStorage.setItem('nuxt-ui-black-as-primary', String(value))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UPopover :ui="{ content: 'w-72 px-6 py-4 flex flex-col gap-4' }">
|
||||
<template #default="{ open }">
|
||||
@@ -18,12 +79,22 @@
|
||||
</legend>
|
||||
|
||||
<div class="grid grid-cols-3 gap-1 -mx-2">
|
||||
<ThemePickerButton
|
||||
chip="primary"
|
||||
label="Black"
|
||||
:selected="appConfig.theme.blackAsPrimary"
|
||||
@click="setBlackAsPrimary(true)"
|
||||
>
|
||||
<template #leading>
|
||||
<span class="inline-block w-2 h-2 rounded-full bg-black dark:bg-white" />
|
||||
</template>
|
||||
</ThemePickerButton>
|
||||
<ThemePickerButton
|
||||
v-for="color in primaryColors"
|
||||
:key="color"
|
||||
:label="color"
|
||||
:chip="color"
|
||||
:selected="primary === color"
|
||||
:selected="!appConfig.theme.blackAsPrimary && primary === color"
|
||||
@click="primary = color"
|
||||
/>
|
||||
</div>
|
||||
@@ -81,60 +152,3 @@
|
||||
</template>
|
||||
</UPopover>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import colors from 'tailwindcss/colors'
|
||||
import { omit } from '#ui/utils'
|
||||
|
||||
const appConfig = useAppConfig()
|
||||
const colorMode = useColorMode()
|
||||
|
||||
// Computed
|
||||
|
||||
const neutralColors = ['slate', 'gray', 'zinc', 'neutral', 'stone']
|
||||
const neutral = computed({
|
||||
get() {
|
||||
return appConfig.ui.colors.neutral
|
||||
},
|
||||
set(option) {
|
||||
appConfig.ui.colors.neutral = option
|
||||
window.localStorage.setItem('nuxt-ui-neutral', appConfig.ui.colors.neutral)
|
||||
}
|
||||
})
|
||||
|
||||
const colorsToOmit = ['inherit', 'current', 'transparent', 'black', 'white', ...neutralColors]
|
||||
const primaryColors = Object.keys(omit(colors, colorsToOmit as any))
|
||||
const primary = computed({
|
||||
get() {
|
||||
return appConfig.ui.colors.primary
|
||||
},
|
||||
set(option) {
|
||||
appConfig.ui.colors.primary = option
|
||||
window.localStorage.setItem('nuxt-ui-primary', appConfig.ui.colors.primary)
|
||||
}
|
||||
})
|
||||
|
||||
const radiuses = [0, 0.125, 0.25, 0.375, 0.5]
|
||||
const radius = computed({
|
||||
get() {
|
||||
return appConfig.theme.radius
|
||||
},
|
||||
set(option) {
|
||||
appConfig.theme.radius = option
|
||||
window.localStorage.setItem('nuxt-ui-radius', String(appConfig.theme.radius))
|
||||
}
|
||||
})
|
||||
|
||||
const modes = [
|
||||
{ label: 'light', icon: appConfig.ui.icons.light },
|
||||
{ label: 'dark', icon: appConfig.ui.icons.dark }
|
||||
]
|
||||
const mode = computed({
|
||||
get() {
|
||||
return colorMode.value
|
||||
},
|
||||
set(option) {
|
||||
colorMode.preference = option
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,3 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
label: string
|
||||
icon?: string
|
||||
chip?: string
|
||||
selected?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton
|
||||
size="sm"
|
||||
@@ -8,6 +17,7 @@
|
||||
class="capitalize ring-[var(--ui-border)] rounded-[var(--ui-radius)] text-[11px]"
|
||||
>
|
||||
<template v-if="chip" #leading>
|
||||
<slot name="leading">
|
||||
<span
|
||||
class="inline-block w-2 h-2 rounded-full"
|
||||
:class="`bg-[var(--color-light)] dark:bg-[var(--color-dark)]`"
|
||||
@@ -16,15 +26,7 @@
|
||||
'--color-dark': `var(--color-${chip}-400)`
|
||||
}"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
label: string
|
||||
icon?: string
|
||||
chip?: string
|
||||
selected?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@@ -18,9 +18,17 @@ export default defineNuxtPlugin({
|
||||
}
|
||||
}
|
||||
|
||||
function updateBlackAsPrimary() {
|
||||
const blackAsPrimary = localStorage.getItem('nuxt-ui-black-as-primary')
|
||||
if (blackAsPrimary) {
|
||||
appConfig.theme.blackAsPrimary = blackAsPrimary === 'true'
|
||||
}
|
||||
}
|
||||
|
||||
updateColor('primary')
|
||||
updateColor('neutral')
|
||||
updateRadius()
|
||||
updateBlackAsPrimary()
|
||||
}
|
||||
|
||||
if (import.meta.server) {
|
||||
@@ -31,11 +39,13 @@ export default defineNuxtPlugin({
|
||||
|
||||
if (localStorage.getItem('nuxt-ui-primary')) {
|
||||
const primaryColor = localStorage.getItem('nuxt-ui-primary');
|
||||
if (primaryColor !== 'black') {
|
||||
html = html.replace(
|
||||
/(--ui-color-primary-\\d{2,3}:\\s*var\\()--color-${appConfig.ui.colors.primary}-(\\d{2,3}\\))/g,
|
||||
\`$1--color-\${primaryColor}-$2\`
|
||||
);
|
||||
}
|
||||
}
|
||||
if (localStorage.getItem('nuxt-ui-neutral')) {
|
||||
const neutralColor = localStorage.getItem('nuxt-ui-neutral');
|
||||
html = html.replace(
|
||||
@@ -56,6 +66,14 @@ export default defineNuxtPlugin({
|
||||
`.replace(/\s+/g, ' '),
|
||||
type: 'text/javascript',
|
||||
tagPriority: -1
|
||||
}, {
|
||||
innerHTML: `
|
||||
if (localStorage.getItem('nuxt-ui-black-as-primary') === 'true') {
|
||||
document.querySelector('style#nuxt-ui-black-as-primary').innerHTML = ':root { --ui-primary: black; } .dark { --ui-primary: white; }';
|
||||
} else {
|
||||
document.querySelector('style#nuxt-ui-black-as-primary').innerHTML = '';
|
||||
}
|
||||
`.replace(/\s+/g, ' ')
|
||||
}]
|
||||
})
|
||||
}
|
||||
|
||||
@@ -23,15 +23,15 @@ This transition empowers Nuxt UI to become a more comprehensive and flexible UI
|
||||
|
||||
### Tailwind CSS v4
|
||||
|
||||
Nuxt UI v3 integrates the latest Tailwind CSS v4 beta (released Nov 21, 2024), bringing significant improvements:
|
||||
Nuxt UI v3 integrates the latest Tailwind CSS v4, bringing significant improvements:
|
||||
|
||||
- **Built for performance**: Full builds in the new engine are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
|
||||
- **Unified toolchain**: Built-in import handling, vendor prefixing, and syntax transforms, with no additional tooling required.
|
||||
- **CSS-first configuration**: A reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
|
||||
- **Designed for the modern web**: Built on native cascade layers, wide-gamut colors, and including first-class support for modern CSS features like container queries, @starting-style, popovers, and more.
|
||||
|
||||
::note{to="https://tailwindcss.com/docs/v4-beta" target="_blank" aria-label="Tailwind CSS v4 beta documentation"}
|
||||
For a comprehensive overview of Tailwind CSS v4 beta features, read the **prerelease documentation**.
|
||||
::note{to="https://tailwindcss.com/docs/upgrade-guide" target="_blank" aria-label="Tailwind CSS v4 upgrade guide"}
|
||||
Learn how to upgrade your project from Tailwind CSS v3 to v4.
|
||||
::
|
||||
|
||||
### Tailwind Variants
|
||||
|
||||
@@ -5,11 +5,11 @@ description: 'Learn how to customize Nuxt UI components using Tailwind CSS v4, C
|
||||
|
||||
## Tailwind CSS
|
||||
|
||||
Nuxt UI v3 uses Tailwind CSS v4 beta, you can read the [prerelease documentation](https://tailwindcss.com/docs/v4-beta) for more information.
|
||||
Nuxt UI v3 uses Tailwind CSS v4, you can read the [upgrade guide](https://tailwindcss.com/docs/upgrade-guide) to learn how to upgrade your project from v3 to v4.
|
||||
|
||||
### `@theme`
|
||||
|
||||
Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your theme with CSS variables inside a `@theme` directive:
|
||||
Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your theme with CSS variables inside a [`@theme`](https://tailwindcss.com/docs/functions-and-directives#theme-directive) directive to define your project's custom design tokens, like fonts, colors, and breakpoints:
|
||||
|
||||
::module-only
|
||||
#ui
|
||||
@@ -71,15 +71,15 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
|
||||
|
||||
The `@theme` directive tells Tailwind to make new utilities and variants available based on these variables. It's the equivalent of the `theme.extend` key in Tailwind CSS v3 `tailwind.config.ts` file.
|
||||
|
||||
::note{to="https://tailwindcss.com/docs/v4-beta#css-first-configuration" target="_blank"}
|
||||
Learn more about Tailwind CSS v4 CSS-first configuration approach.
|
||||
::note{to="https://tailwindcss.com/docs/theme" target="_blank"}
|
||||
Learn more about customizing your theme in the theme variables documentation.
|
||||
::
|
||||
|
||||
### `@source`
|
||||
|
||||
You can use the `@source` directive to add explicit content glob patterns if you want to look for Tailwind classes in other files that are not automatically detected.
|
||||
You can use the [`@source` directive](https://tailwindcss.com/docs/functions-and-directives#source-directive) to explicitly specify source files that aren't picked up by Tailwind's automatic content detection:
|
||||
|
||||
This can be useful when writing Tailwind classes in markdown files with [`@nuxt/content`](https://github.com/nuxt/content):
|
||||
This can be useful when writing Tailwind classes in markdown files with [`@nuxt/content`](https://github.com/nuxt/content) for example:
|
||||
|
||||
::module-only
|
||||
#ui
|
||||
@@ -107,42 +107,8 @@ This can be useful when writing Tailwind classes in markdown files with [`@nuxt/
|
||||
:::
|
||||
::
|
||||
|
||||
::note{to="https://tailwindcss.com/docs/v4-beta#adding-content-sources"}
|
||||
Learn how to add content sources in Tailwind CSS v4.
|
||||
::
|
||||
|
||||
### `@plugin`
|
||||
|
||||
You can use the `@plugin` directive to import Tailwind CSS plugins.
|
||||
|
||||
::module-only
|
||||
#ui
|
||||
:::div
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
|
||||
@plugin "@tailwindcss/typography";
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#ui-pro
|
||||
:::div
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
|
||||
@plugin "@tailwindcss/typography";
|
||||
```
|
||||
|
||||
:::
|
||||
::
|
||||
|
||||
::note{to="https://tailwindcss.com/docs/v4-beta#using-plugins"}
|
||||
Learn more about using plugins in Tailwind CSS v4.
|
||||
::note{to="https://tailwindcss.com/docs/detecting-classes-in-source-files"}
|
||||
Learn more about automatic content detection in the detecting classes in source files documentation.
|
||||
::
|
||||
|
||||
## Design system
|
||||
@@ -286,63 +252,6 @@ export default defineConfig({
|
||||
:::
|
||||
::
|
||||
|
||||
::warning
|
||||
These color aliases are not automatically defined as Tailwind CSS colors, so classes like `text-primary-500 dark:text-primary-400` won't be available by default as in Nuxt UI v2. This approach provides more flexibility and prevents overwriting of user-defined Tailwind CSS colors.<br><br>
|
||||
|
||||
However, you can generate these classes using Tailwind's `@theme` directive, allowing you to use custom color utility classes while maintaining dynamic color aliases:
|
||||
|
||||
::module-only
|
||||
#ui
|
||||
:::div{class="*:!mb-0 *:!mt-2.5"}
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
|
||||
@theme {
|
||||
--color-primary-50: var(--ui-color-primary-50);
|
||||
--color-primary-100: var(--ui-color-primary-100);
|
||||
--color-primary-200: var(--ui-color-primary-200);
|
||||
--color-primary-300: var(--ui-color-primary-300);
|
||||
--color-primary-400: var(--ui-color-primary-400);
|
||||
--color-primary-500: var(--ui-color-primary-500);
|
||||
--color-primary-600: var(--ui-color-primary-600);
|
||||
--color-primary-700: var(--ui-color-primary-700);
|
||||
--color-primary-800: var(--ui-color-primary-800);
|
||||
--color-primary-900: var(--ui-color-primary-900);
|
||||
--color-primary-950: var(--ui-color-primary-950);
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#ui-pro
|
||||
:::div{class="*:!mb-0 *:!mt-2.5"}
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
|
||||
@theme {
|
||||
--color-primary-50: var(--ui-color-primary-50);
|
||||
--color-primary-100: var(--ui-color-primary-100);
|
||||
--color-primary-200: var(--ui-color-primary-200);
|
||||
--color-primary-300: var(--ui-color-primary-300);
|
||||
--color-primary-400: var(--ui-color-primary-400);
|
||||
--color-primary-500: var(--ui-color-primary-500);
|
||||
--color-primary-600: var(--ui-color-primary-600);
|
||||
--color-primary-700: var(--ui-color-primary-700);
|
||||
--color-primary-800: var(--ui-color-primary-800);
|
||||
--color-primary-900: var(--ui-color-primary-900);
|
||||
--color-primary-950: var(--ui-color-primary-950);
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
::
|
||||
|
||||
::
|
||||
|
||||
### Tokens
|
||||
|
||||
Nuxt UI leverages a robust system of CSS variables as design tokens to ensure consistent and flexible component styling. These tokens form the foundation of the theming system, offering smooth support for both light and dark modes.
|
||||
@@ -424,6 +333,58 @@ You can change which shade is used for each color on light and dark mode:
|
||||
|
||||
::
|
||||
|
||||
#### Black as Primary Color
|
||||
|
||||
::framework-only
|
||||
#nuxt
|
||||
:::p
|
||||
You cannot set `primary: 'black'`{lang="ts-type"} in your [`app.config.ts`](#config) because this color has no shade, instead you can override the primary color in your `main.css` file to create a black & white theme:
|
||||
:::
|
||||
|
||||
#vue
|
||||
:::p
|
||||
You cannot set `primary: 'black'`{lang="ts-type"} in your [`vite.config.ts`](#config) because this color has no shade, instead you can override the primary color in your `main.css` file to create a black & white theme:
|
||||
:::
|
||||
::
|
||||
|
||||
::module-only
|
||||
#ui
|
||||
:::div{class="*:!mb-0 *:!mt-2.5"}
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
|
||||
:root {
|
||||
--ui-primary: black;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--ui-primary: white;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
#ui-pro
|
||||
:::div{class="*:!mb-0 *:!mt-2.5"}
|
||||
|
||||
```css [main.css]
|
||||
@import "tailwindcss";
|
||||
@import "@nuxt/ui-pro";
|
||||
|
||||
:root {
|
||||
--ui-primary: black;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--ui-primary: white;
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
::
|
||||
|
||||
#### Neutral Palette
|
||||
|
||||
Nuxt UI provides a comprehensive set of design tokens for the `neutral` color palette, ensuring consistent and accessible UI styling across both light and dark modes. These tokens offer fine-grained control over text, background, and border colors:
|
||||
|
||||
@@ -41,7 +41,8 @@
|
||||
}
|
||||
},
|
||||
"imports": {
|
||||
"#build/ui/*": "./.nuxt/ui/*.ts"
|
||||
"#build/ui/*": "./.nuxt/ui/*.ts",
|
||||
"#build/ui.css": "./.nuxt/ui.css"
|
||||
},
|
||||
"bin": {
|
||||
"nuxt-ui": "./cli/index.mjs"
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@import '#build/ui.css';
|
||||
@import './keyframes.css';
|
||||
|
||||
@variant light (&:where(.light, .light *));
|
||||
|
||||
@@ -10,7 +10,7 @@ export default defineNuxtPlugin(() => {
|
||||
const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
|
||||
|
||||
function generateShades(key: string, value: string) {
|
||||
return `${shades.map(shade => `--ui-color-${key}-${shade}: var(--color-${value}-${shade});`).join('\n ')}`
|
||||
return `${shades.map(shade => `--ui-color-${key}-${shade}: var(--color-${value === 'neutral' ? 'old-neutral' : value}-${shade});`).join('\n ')}`
|
||||
}
|
||||
function generateColor(key: string, shade: number) {
|
||||
return `--ui-${key}: var(--ui-color-${key}-${shade});`
|
||||
|
||||
@@ -5,6 +5,7 @@ import type { Nuxt, NuxtTemplate, NuxtTypeTemplate } from '@nuxt/schema'
|
||||
import type { Resolver } from '@nuxt/kit'
|
||||
import type { ModuleOptions } from './module'
|
||||
import * as theme from './theme'
|
||||
import colors from 'tailwindcss/colors'
|
||||
|
||||
export function buildTemplates(options: ModuleOptions) {
|
||||
return Object.entries(theme).reduce((acc, [key, component]) => {
|
||||
@@ -69,6 +70,26 @@ export function getTemplates(options: ModuleOptions, uiConfig: Record<string, an
|
||||
})
|
||||
}
|
||||
|
||||
templates.push({
|
||||
filename: 'ui.css',
|
||||
write: true,
|
||||
getContents: () => `@theme default {
|
||||
--color-old-neutral-50: ${colors.neutral[50]};
|
||||
--color-old-neutral-100: ${colors.neutral[100]};
|
||||
--color-old-neutral-200: ${colors.neutral[200]};
|
||||
--color-old-neutral-300: ${colors.neutral[300]};
|
||||
--color-old-neutral-400: ${colors.neutral[400]};
|
||||
--color-old-neutral-500: ${colors.neutral[500]};
|
||||
--color-old-neutral-600: ${colors.neutral[600]};
|
||||
--color-old-neutral-700: ${colors.neutral[700]};
|
||||
--color-old-neutral-800: ${colors.neutral[800]};
|
||||
--color-old-neutral-900: ${colors.neutral[900]};
|
||||
--color-old-neutral-950: ${colors.neutral[950]};
|
||||
${[...(options.theme?.colors || []), 'neutral'].map(color => [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map(shade => `--color-${color}-${shade}: var(--ui-color-${color}-${shade});`).join('\n\t')).join('\n\t')}
|
||||
}
|
||||
`
|
||||
})
|
||||
|
||||
templates.push({
|
||||
filename: 'ui/index.ts',
|
||||
write: true,
|
||||
|
||||
Reference in New Issue
Block a user