@gluhar/theme 4.1.0 → 6.0.0-next.0

package/README.md

@@ -5,78 +5,41 @@
 [![License][license-src]][license-href]
 [![Nuxt][nuxt-src]][nuxt-href]
 
-Gluhar Theme package.  
-Configures tailwind setup. Provides composables (useTheme) and utils for working with the theme and colors.
+Gluhar Theme package. Sets up Tailwind CSS v4, ships shared tokens (`theme.css`) and fonts, and hands the CSS breakpoints to `useResponsive()`.
 
 [✨  Release Notes](./CHANGELOG.md)
 
-## INFO
+## Setup
 
-I have set a specific version for `@nuxtjs/tailwindcss` of 6.12.2, because 6.13 messes up with Tailwind Intellisense and does not load the config file correctly. It produces a `.nuxt/tailwind.config.d.ts` file that overrides the actual config and the defined custom classes. (23 Jan 2025)
+Installed by `@gluhar/app`. It registers `@tailwindcss/vite`; there is no JS Tailwind config. `tailwindcss` is a peer dependency and must be installed in the project.
 
-## Installation
+`assets/styles/main.css` (option `gluhar.theme.css`) is added to `nuxt.options.css` unless you list it yourself, e.g. to order it after font CSS:
 
-Install the module to your Nuxt application with one command:
-
-```bash
-npx nuxi module add @gluhar/theme
-```
+```css
+@import "tailwindcss";
+@import "@gluhar/theme/theme.css";
 
-## Tailwind Config
-
-In your /config folder, create a `tailwind.config.ts` file that is a standard tw config. For theme use gluharTheme from the package and merge with defu.
-
-Importing the predefined theme like such is meant for vs code tw intellisense to work properly.
-
-```ts
-import gluharTheme from "@gluhar/theme/gluharTheme";
-import { defu } from "defu";
-
-export default {
-  // Theme
-  theme: defu(
-    {
-      // Extends
-      extend: {
-        // Colors
-        colors: {
-          primary: {
-            base: "#3A3A3A",
-          },
-        },
-      },
-    },
-    gluharTheme,
-  ),
-};
+@theme {
+  --breakpoint-tablet: 48.0625rem; /* overrides gluhar's 768px */
+  --breakpoint-nav: 75.0625rem; /* project-named, also usable as up("nav") */
+  --color-brand: #0181d2;
+}
 ```
 
-Create a `base.css` file to import tailwind's classes and provide initial variables.
+Fluid type is a separate, optional plugin: [`@gluhar/fluid`](../fluid).
 
-In `~/assets/styles/base.css`
+## Conventions
 
-```css
-@tailwind base
-@tailwind components
-@tailwind utilities;
-```
+- **Styling lives in the template as utilities, including all responsive styling** (`tablet:`, `desktop:`, project-named variants). `<style>` / `@apply` only for what utilities can't reach (third-party markup, scrollbars, `@layer base`).
+- **CSS owns layout; JS owns behaviour.** Never switch layout on `useResponsive()` flags — they're `false` on the server by design.
+- **Declare breakpoints once, as `--breakpoint-*`** in the main stylesheet or a local file it `@import`s. The module reads them at build time (rem at 16px, `--breakpoint-*: initial` resets) and writes them to `appConfig.gluhar.breakpoints`. Never hardcode breakpoint numbers in JS.
+- Name breakpoints for what they do (`cols`, `nav`) rather than remapping `md`/`lg`.
 
-If you want your main stylesheet to be named differently, not be sass or be elsewhere, you can config the `cssPath` in nuxt.config.ts:
+## What `theme.css` provides
 
-```ts
-{
-  modules: [
-    ...,
-    "@gluhar/theme"
-  ],
+`primary-light|base|dark`, `secondary-base`, `accent-base`, `white-base` colours; `tablet` (768) / `desktop` (1200) / `wide` (2000) breakpoints; `tracking-tightest`, `leading-tighter|tightest`, `ease-in-out-expo`; `h-screen-s|l|d`, `flex-0-auto`; class-based `dark:`; Lenis base CSS; and the `@source` that scans `@gluhar/app`'s components.
 
-  gluharTheme: {
-    tailwind: {
-      cssPath: '~/assets/main.css'
-    }
-  }
-}
-```
+Fonts: `@import "@gluhar/theme/fonts/object-sans";` or `css: ["@gluhar/theme/fonts/object-sans"]`.
 
 ## Contribution
 

package/dist/module.d.mts

@@ -1,9 +1,14 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { ModuleOptions } from '@nuxtjs/tailwindcss';
 
 interface GluharThemeOptions {
-    tailwind?: Partial<ModuleOptions>;
+    /**
+     * The project's main stylesheet, relative to the root dir. Added to
+     * `nuxt.options.css` if it isn't there yet, and scanned for
+     * `--breakpoint-*`. `false` to manage CSS entirely yourself.
+     */
+    css?: string | false;
 }
 declare const _default: _nuxt_schema.NuxtModule<GluharThemeOptions, GluharThemeOptions, false>;
 
-export { type GluharThemeOptions, _default as default };
+export { _default as default };
+export type { GluharThemeOptions };

package/dist/module.d.ts

@@ -1,9 +1,14 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { ModuleOptions } from '@nuxtjs/tailwindcss';
 
 interface GluharThemeOptions {
-    tailwind?: Partial<ModuleOptions>;
+    /**
+     * The project's main stylesheet, relative to the root dir. Added to
+     * `nuxt.options.css` if it isn't there yet, and scanned for
+     * `--breakpoint-*`. `false` to manage CSS entirely yourself.
+     */
+    css?: string | false;
 }
 declare const _default: _nuxt_schema.NuxtModule<GluharThemeOptions, GluharThemeOptions, false>;
 
-export { type GluharThemeOptions, _default as default };
+export { _default as default };
+export type { GluharThemeOptions };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@gluhar/theme",
   "configKey": "gluharTheme",
-  "version": "4.1.0",
+  "version": "6.0.0-next.0",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,25 +1,84 @@
-import path from 'pathe';
-import { defineNuxtModule, createResolver, addImportsDir } from '@nuxt/kit';
-import { handleTailwind } from '../dist/runtime/tailwind/handleTailwind.js';
+import { existsSync, readFileSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { useLogger, defineNuxtModule, createResolver, addVitePlugin } from '@nuxt/kit';
+import tailwindcss from '@tailwindcss/vite';
+import { defu } from 'defu';
 
-const cwd = process.cwd();
+const REM = 16;
+const readBreakpoints = (file, into = {}, seen = /* @__PURE__ */ new Set()) => {
+  if (seen.has(file) || !existsSync(file))
+    return into;
+  seen.add(file);
+  const css = readFileSync(file, "utf8").replace(/\/\*[\s\S]*?\*\//g, "");
+  const pattern = /@import\s+["'](\.{1,2}\/[^"']+)["']|--breakpoint-(\*|[\w-]+)\s*:\s*([^;]+);/g;
+  for (const [, imported, name, value] of css.matchAll(pattern)) {
+    if (imported) {
+      readBreakpoints(resolve(dirname(file), imported), into, seen);
+      continue;
+    }
+    if (name === "*") {
+      if (value?.trim() === "initial")
+        for (const key of Object.keys(into))
+          delete into[key];
+      continue;
+    }
+    const match = value?.trim().match(/^([\d.]+)(rem|em|px)?$/);
+    if (!match)
+      continue;
+    const [, amount, unit] = match;
+    into[name] = unit === "px" ? Number(amount) : Number(amount) * REM;
+  }
+  return into;
+};
+
+const logger = useLogger("@gluhar/theme");
 const module = defineNuxtModule({
   meta: {
     name: "@gluhar/theme",
     configKey: "gluharTheme"
   },
-  // Default configuration options of the Nuxt module
   defaults: {
-    tailwind: {
-      configPath: path.join(cwd, "config/tailwind.config"),
-      cssPath: path.join(cwd, "assets/styles/base.css"),
-      exposeConfig: true
-    }
+    css: "assets/styles/main.css"
   },
   setup(options, nuxt) {
-    const { resolve } = createResolver(import.meta.url);
-    handleTailwind(options, nuxt);
-    addImportsDir(resolve("runtime/composables"));
+    const { resolve: resolveRuntime } = createResolver(import.meta.url);
+    addVitePlugin(tailwindcss());
+    const css = options.css ? resolve(nuxt.options.rootDir, options.css) : void 0;
+    if (css && !existsSync(css)) {
+      logger.warn(
+        `No stylesheet at ${options.css}. Create it with:
+  @import "tailwindcss";
+  @import "@gluhar/theme/theme.css";`
+      );
+    }
+    if (css && existsSync(css)) {
+      const listed = nuxt.options.css.some(
+        (entry) => typeof entry === "string" && resolve(nuxt.options.rootDir, entry.replace(/^[~@]\//, "")) === css
+      );
+      if (!listed)
+        nuxt.options.css.push(css);
+    }
+    const readAll = () => {
+      const breakpoints = readBreakpoints(resolveRuntime("runtime/theme.css"));
+      if (css)
+        readBreakpoints(css, breakpoints);
+      return breakpoints;
+    };
+    nuxt.options.appConfig.gluhar = defu(
+      { breakpoints: readAll() },
+      nuxt.options.appConfig.gluhar
+    );
+    if (css && nuxt.options.dev) {
+      const initial = JSON.stringify(nuxt.options.appConfig.gluhar.breakpoints);
+      nuxt.hook("builder:watch", async (_event, path) => {
+        if (!path.endsWith(".css"))
+          return;
+        if (JSON.stringify(readAll()) !== initial) {
+          logger.info("Breakpoints changed \u2014 restarting.");
+          await nuxt.callHook("restart");
+        }
+      });
+    }
   }
 });
 

package/dist/runtime/theme.css

@@ -0,0 +1 @@
+@source "../../../app/dist/runtime/components";@source "../../../sanity/dist/runtime/components";@custom-variant dark (&:where(.dark, .dark *));@theme{--breakpoint-tablet:48rem;--breakpoint-desktop:75rem;--breakpoint-wide:125rem;--color-primary-light:#333;--color-primary-base:#222;--color-primary-dark:#111;--color-secondary-base:#f9f9f9;--color-accent-base:#faf;--color-white-base:#fff;--tracking-tightest:-0.075em;--leading-tighter:1.18;--leading-tightest:1.1;--ease-in-out-expo:cubic-bezier(0.87,0,0.13,1)}@utility h-screen-s{height:100svh}@utility h-screen-l{height:100lvh}@utility h-screen-d{height:100dvh}@utility flex-0-auto{flex:1 0 auto}html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth{scroll-behavior:auto!important}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:hidden}.lenis.lenis-scrolling iframe{pointer-events:none}

package/dist/types.d.mts

@@ -4,4 +4,4 @@ import type { default as Module } from './module.js'
 
 export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
 
-export { type GluharThemeOptions, default } from './module.js'
+export { default } from './module.js'

package/dist/types.d.ts

@@ -4,4 +4,4 @@ import type { default as Module } from './module'
 
 export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
 
-export { type GluharThemeOptions, default } from './module'
+export { default } from './module'

package/package.json

@@ -1,21 +1,24 @@
 {
   "name": "@gluhar/theme",
-  "version": "4.1.0",
-  "description": "Gluhar Theme package. Configures tailwind setup. Provides composables and utils for working with the theme and colors.",
+  "version": "6.0.0-next.0",
+  "description": "Gluhar Theme package. Sets up Tailwind CSS v4, ships shared tokens (theme.css) and fonts, and feeds the CSS breakpoints to useResponsive.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gluharco/gluhar.git",
+    "directory": "packages/theme"
+  },
   "license": "MIT",
   "type": "module",
   "exports": {
     ".": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "types": "./dist/types.d.mts",
+      "import": "./dist/module.mjs"
     },
-    "./gluharTheme": "./dist/runtime/tailwind/gluharTheme.js",
-    "./fonts/*": "./dist/runtime/fonts/*/stylesheet.css",
-    "./styles/*": "./dist/runtime/styles/*.css"
+    "./theme.css": "./dist/runtime/theme.css",
+    "./fonts/*": "./dist/runtime/fonts/*/stylesheet.css"
   },
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
+  "main": "./dist/module.mjs",
+  "types": "./dist/types.d.mts",
   "files": [
     "dist",
     "CHANGELOG.md"
@@ -23,6 +26,7 @@
   "scripts": {
     "gluhar": "npm run gluhar --prefix ../.. -- --cwd=$PWD",
     "build": "npm run gluhar build -- -t module",
+    "prepack": "npm run build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
@@ -31,24 +35,25 @@
     "test:watch": "vitest watch"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.13.1",
-    "@nuxtjs/tailwindcss": "6.12.2",
-    "defu": "^6.1.4",
-    "fluid-tailwind": "^1.0.4",
-    "pathe": "^1.1.2",
-    "tailwindcss": "^3.4.10"
+    "@nuxt/kit": "^4.5.0",
+    "@tailwindcss/vite": "^4.3.0",
+    "defu": "^6.1.4"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
-    "@nuxt/eslint-config": "^0.5.6",
-    "@nuxt/module-builder": "^0.8.3",
-    "@nuxt/schema": "^3.13.1",
-    "@nuxt/test-utils": "^3.14.1",
-    "@types/node": "^20.16.5",
+    "@nuxt/eslint-config": "^1.9.0",
+    "@nuxt/module-builder": "^1.0.3",
+    "@nuxt/schema": "^4.5.0",
+    "@nuxt/test-utils": "^3.19.2",
+    "@types/node": "^22.5.4",
     "changelogen": "^0.5.5",
     "eslint": "^9.10.0",
-    "nuxt": "^3.13.1",
-    "vitest": "^2.0.5"
+    "nuxt": "^4.5.0",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "nuxt": "^4.5.0",
+    "tailwindcss": "^4.3.0"
   },
-  "gitHead": "10ebf6500c71e1beeceece4de90467b26aa67a21"
+  "gitHead": "8773cd99c43cbe6a7dc415e50af8b13a7b8d4daf"
 }

package/dist/runtime/composables/useTheme.d.ts

@@ -1,10 +0,0 @@
-import theme from "#tailwind-config/theme";
-import colors from "#tailwind-config/theme/colors";
-declare const baseColors: readonly ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "fuchsia", "purple", "rose", "pink"];
-export type BaseColor = (typeof baseColors)[number];
-export declare const useTheme: () => {
-    colors: typeof colors;
-    theme: typeof theme;
-    baseColors: readonly BaseColor[];
-};
-export {};

package/dist/runtime/composables/useTheme.js

@@ -1,29 +0,0 @@
-import theme from "#tailwind-config/theme";
-import colors from "#tailwind-config/theme/colors";
-const baseColors = [
-  "slate",
-  "gray",
-  "zinc",
-  "neutral",
-  "stone",
-  "red",
-  "orange",
-  "amber",
-  "yellow",
-  "lime",
-  "green",
-  "emerald",
-  "teal",
-  "cyan",
-  "sky",
-  "blue",
-  "indigo",
-  "violet",
-  "fuchsia",
-  "purple",
-  "rose",
-  "pink"
-];
-export const useTheme = () => {
-  return { colors, theme, baseColors };
-};

package/dist/runtime/tailwind/gluharTheme.d.ts

@@ -1,4 +0,0 @@
-import type { Config as TailwindConfig } from "tailwindcss/types/config.d";
-export declare const sansFallbacks: string[];
-declare const gluharTheme: TailwindConfig["theme"];
-export default gluharTheme;

package/dist/runtime/tailwind/gluharTheme.js

@@ -1,55 +0,0 @@
-export const sansFallbacks = [
-  "ui-sans-serif",
-  "system-ui",
-  "sans-serif",
-  "Apple Color Emoji",
-  "Segoe UI Emoji",
-  "Segoe UI Symbol",
-  "Noto Color Emoji"
-];
-const gluharTheme = {
-  extend: {
-    // Colors
-    colors: {
-      primary: {
-        light: "#333",
-        base: "#222",
-        dark: "#111"
-      },
-      secondary: {
-        base: "#F9F9F9"
-      },
-      accent: {
-        base: "#ffaaff"
-      },
-      white: {
-        base: "#fff"
-      }
-    },
-    // Spacings
-    spacing: {
-      "13": "3.25rem",
-      "15": "3.75rem",
-      "17": "4.25rem",
-      "18": "4.5rem",
-      "128": "32rem",
-      "144": "36rem"
-    },
-    // Heights
-    height: {
-      "screen-s": "100svh",
-      "screen-l": "100lvh",
-      "screen-d": "100dvh"
-    },
-    // Typography
-    letterSpacing: { tightest: "-.075em" },
-    lineHeight: { tighter: "1.18", tightest: "1.1" },
-    // Layout
-    flex: { "0-auto": "1 0 auto" },
-    // Easing
-    transitionTimingFunction: {
-      "in-out-expo": "cubic-bezier(0.87, 0, 0.13, 1)"
-    }
-  }
-};
-export default gluharTheme;

package/dist/runtime/tailwind/handleTailwind.d.ts

@@ -1,3 +0,0 @@
-import type { Nuxt } from "@nuxt/schema";
-import type { GluharThemeOptions } from "~/src/module";
-export declare const handleTailwind: (options: GluharThemeOptions, nuxt: Nuxt) => void;

package/dist/runtime/tailwind/handleTailwind.js

@@ -1,20 +0,0 @@
-import { addImports, createResolver, installModule } from "@nuxt/kit";
-export const handleTailwind = (options, nuxt) => {
-  const { resolve } = createResolver(import.meta.url);
-  const { tailwind } = options;
-  const config = {
-    content: ["assets/styles/**/*.{js,vue,ts}"],
-    // content: ["assets/styles/**/*.{js,vue,ts}", extract],
-    // plugins: [fluid],
-    // Dark mode to be handled with by a class, instead of media
-    darkMode: "class"
-  };
-  installModule("@nuxtjs/tailwindcss", {
-    ...tailwind,
-    config
-  });
-  addImports({
-    name: "gluharTheme",
-    from: resolve("runtime/tailwind/gluharTheme")
-  });
-};