@skafform/vite-plugin 0.1.3 → 0.1.4

package/base.css

@@ -42,6 +42,7 @@
 
   /* Mise en page */
   --skafform-navbar-height:   60px;
+  --skafform-page-gutter:     40px;
 }
 
 html, body {

package/dist/index.js

@@ -85,13 +85,81 @@ function skafform() {
 ${vars}
 }`;
   }
+  const TAILWIND_TOKEN_MAP = {
+    "primary": "--color-primary",
+    "primary-fg": "--color-primary-fg",
+    "primary-hover": "--color-primary-hover",
+    "background": "--color-background",
+    "foreground": "--color-foreground",
+    "muted": "--color-muted",
+    "muted-fg": "--color-muted-fg",
+    "border": "--color-border",
+    "border-subtle": "--color-border-subtle",
+    "error": "--color-error",
+    "font": "--font-sans",
+    "font-heading": "--font-heading",
+    "font-body": "--font-body",
+    "font-size-xs": "--text-xs",
+    "font-size-sm": "--text-sm",
+    "font-size-base": "--text-base",
+    "font-size-lg": "--text-lg",
+    "font-size-xl": "--text-xl",
+    "font-size-2xl": "--text-2xl",
+    "radius": "--radius",
+    "radius-sm": "--radius-sm",
+    "radius-md": "--radius-md",
+    "radius-lg": "--radius-lg",
+    "radius-full": "--radius-full",
+    "shadow-sm": "--shadow-sm",
+    "shadow-md": "--shadow-md",
+    "shadow-lg": "--shadow-lg"
+  };
+  function generateTailwindTheme(tokens) {
+    const lines = [];
+    for (const key of Object.keys(tokens)) {
+      const twVar = TAILWIND_TOKEN_MAP[key];
+      if (twVar) lines.push(`  ${twVar}: var(--skafform-${key});`);
+    }
+    if (lines.length === 0) return "";
+    return `@theme inline {
+${lines.join("\n")}
+}`;
+  }
+  function generateDarkTokensCss(darkTokens, lightTokens) {
+    const entries = Object.entries(darkTokens);
+    if (entries.length === 0) return "";
+    const darkVars = entries.map(([k, v]) => `    --skafform-${k}: ${v};`).join("\n");
+    const classVars = entries.map(([k, v]) => `  --skafform-${k}: ${v};`).join("\n");
+    const lightVars = entries.filter(([k]) => k in lightTokens).map(([k]) => `  --skafform-${k}: ${lightTokens[k]};`).join("\n");
+    return [
+      `@media (prefers-color-scheme: dark) {
+  :root {
+${darkVars}
+  }
+}`,
+      `.dark {
+${classVars}
+}`,
+      lightVars ? `.light {
+${lightVars}
+}` : ""
+    ].filter(Boolean).join("\n");
+  }
   function getCssString() {
     const themeJson = getThemeJson(config.theme);
     const themeCssPath = resolve(root, `themes/${config.theme}/styles/theme.css`);
     const base = readCss(baseCssPath);
     const theme = existsSync(themeCssPath) ? readCss(themeCssPath) : "";
     const tokens = generateTokensCss(themeJson.tokens ?? {});
-    return base + "\n" + theme + (tokens ? "\n" + tokens : "");
+    const dark = themeJson.tokens_dark ? generateDarkTokensCss(themeJson.tokens_dark, themeJson.tokens ?? {}) : "";
+    const css = base + "\n" + theme + (tokens ? "\n" + tokens : "") + (dark ? "\n" + dark : "");
+    if (config.tailwind) {
+      const tailwindTheme = generateTailwindTheme(themeJson.tokens ?? {});
+      return `@import "tailwindcss";
+
+` + css + (tailwindTheme ? "\n" + tailwindTheme : "");
+    }
+    return css;
   }
   return {
     name: "skafform",
@@ -133,7 +201,8 @@ ${vars}
         const themeJson = getThemeJson(config.theme);
         return `export default ${JSON.stringify({
           ...config,
-          customize: { ...themeJson.customize ?? {}, ...config.customize ?? {} }
+          customize: { ...themeJson.customize ?? {}, ...config.customize ?? {} },
+          fonts: themeJson.fonts ?? []
         })}`;
       }
       if (id === RESOLVED_ADMIN_SECTIONS) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skafform/vite-plugin",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "exports": {
     ".": {