@gluhar/theme 4.1.0 → 6.0.0-next.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-next.1](https://github.com/gluharco/gluhar/compare/v6.0.0-next.0...v6.0.0-next.1) (2026-10-20)
+
+
+### 🚀 Enhancements
+
+- **release:** Publish from GitHub Actions with npm trusted publishing ([8773cd9](https://github.com/gluharco/gluhar/commit/8773cd99c43cbe6a7dc415e50af8b13a7b8d4daf))
+
+
+
+
+
 # [4.1.0](https://github.com/gluharco/gluhar/compare/@gluhar/theme@4.0.4...@gluhar/theme@4.1.0) (2026-04-28)
 
 

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/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.1",
+  "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,24 @@
     "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"
   },
-  "gitHead": "10ebf6500c71e1beeceece4de90467b26aa67a21"
+  "peerDependencies": {
+    "nuxt": "^4.5.0",
+    "tailwindcss": "^4.3.0"
+  }
 }

package/dist/module.cjs

@@ -1,5 +0,0 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -1,9 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-import { ModuleOptions } from '@nuxtjs/tailwindcss';
-
-interface GluharThemeOptions {
-    tailwind?: Partial<ModuleOptions>;
-}
-declare const _default: _nuxt_schema.NuxtModule<GluharThemeOptions, GluharThemeOptions, false>;
-
-export { type GluharThemeOptions, _default as default };

package/dist/module.d.ts

@@ -1,9 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-import { ModuleOptions } from '@nuxtjs/tailwindcss';
-
-interface GluharThemeOptions {
-    tailwind?: Partial<ModuleOptions>;
-}
-declare const _default: _nuxt_schema.NuxtModule<GluharThemeOptions, GluharThemeOptions, false>;
-
-export { type GluharThemeOptions, _default as default };

package/dist/module.json

@@ -1,9 +0,0 @@
-{
-  "name": "@gluhar/theme",
-  "configKey": "gluharTheme",
-  "version": "4.1.0",
-  "builder": {
-    "@nuxt/module-builder": "0.8.3",
-    "unbuild": "2.0.0"
-  }
-}

package/dist/module.mjs

@@ -1,26 +0,0 @@
-import path from 'pathe';
-import { defineNuxtModule, createResolver, addImportsDir } from '@nuxt/kit';
-import { handleTailwind } from '../dist/runtime/tailwind/handleTailwind.js';
-
-const cwd = process.cwd();
-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
-    }
-  },
-  setup(options, nuxt) {
-    const { resolve } = createResolver(import.meta.url);
-    handleTailwind(options, nuxt);
-    addImportsDir(resolve("runtime/composables"));
-  }
-});
-
-export { module as default };

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/fonts/object-sans/stylesheet.css

@@ -1 +0,0 @@
-@font-face{ascent-override:85%;font-family:Object Sans;font-style:normal;font-weight:400;src:url(PPObjectSans-Regular.otf) format("opentype")}@font-face{font-family:Object Sans;font-style:italic;font-weight:400;src:url(PPObjectSans-Slanted.otf) format("opentype")}@font-face{font-family:Object Sans;font-style:normal;font-weight:700;src:url(PPObjectSans-Heavy.otf) format("opentype")}@font-face{font-family:Object Sans;font-style:italic;font-weight:700;src:url(PPObjectSans-HeavySlanted.otf) format("opentype")}

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")
-  });
-};

package/dist/types.d.mts

@@ -1,7 +0,0 @@
-import type { NuxtModule } from '@nuxt/schema'
-
-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'

package/dist/types.d.ts

@@ -1,7 +0,0 @@
-import type { NuxtModule } from '@nuxt/schema'
-
-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'