@nuxt/ui
Version:
A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
52 lines (51 loc) • 1.8 kB
JavaScript
import { computed } from "vue";
import colors from "tailwindcss/colors";
import { defineNuxtPlugin, useAppConfig, useNuxtApp, useHead } from "#imports";
const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
function getColor(color, shade) {
if (color in colors && typeof colors[color] === "object" && shade in colors[color]) {
return colors[color][shade];
}
return "";
}
function generateShades(key, value) {
return `${shades.map((shade) => `--ui-color-${key}-${shade}: var(--color-${value === "neutral" ? "old-neutral" : value}-${shade}, ${getColor(value, shade)});`).join("\n ")}`;
}
function generateColor(key, shade) {
return `--ui-${key}: var(--ui-color-${key}-${shade});`;
}
export default defineNuxtPlugin(() => {
const appConfig = useAppConfig();
const nuxtApp = useNuxtApp();
const root = computed(() => {
const { neutral, ...colors2 } = appConfig.ui.colors;
return `@layer base {
:root {
${Object.entries(appConfig.ui.colors).map(([key, value]) => generateShades(key, value)).join("\n ")}
}
:root, .light {
${Object.keys(colors2).map((key) => generateColor(key, 500)).join("\n ")}
}
.dark {
${Object.keys(colors2).map((key) => generateColor(key, 400)).join("\n ")}
}
}`;
});
const headData = {
style: [{
innerHTML: () => root.value,
tagPriority: -2,
id: "nuxt-ui-colors"
}]
};
if (import.meta.client && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {
const style = document.createElement("style");
style.innerHTML = root.value;
style.setAttribute("data-nuxt-ui-colors", "");
document.head.appendChild(style);
headData.script = [{
innerHTML: "document.head.removeChild(document.querySelector('[data-nuxt-ui-colors]'))"
}];
}
useHead(headData);
});