@gluhar/theme 2.0.0-dev.0

package/CHANGELOG.md

@@ -0,0 +1,147 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [1.2.0](https://github.com/harryyaprakov/hui/compare/@pezak/hui-theme@1.1.0...@pezak/hui-theme@1.2.0) (2024-09-12)
+
+
+### 🚀 Enhancements
+
+- Version bump ([32cd173](https://github.com/harryyaprakov/hui/commit/32cd173ed800a4d4ede5286e65b9c5728ce39950))
+
+
+
+
+
+# [1.1.0](https://github.com/harryyaprakov/hui/compare/@pezak/hui-theme@1.0.6...@pezak/hui-theme@1.1.0) (2024-09-12)
+
+
+### 🚀 Enhancements
+
+- Switch from nuxt-primevue to @primevue/nuxt-module ([d9429f1](https://github.com/harryyaprakov/hui/commit/d9429f1cda5ad3bcd6b4809a1ef34758ea9aff29))
+
+
+
+
+
+## [1.0.6](https://github.com/harryyaprakov/hui/compare/@pezak/hui-theme@1.0.5...@pezak/hui-theme@1.0.6) (2024-05-09)
+
+
+### 🩹 Fixes
+
+- Primevue path resolve on windows removing backslashes ([c1e4686](https://github.com/harryyaprakov/hui/commit/c1e46860747b861aa01b8315f6e6e33484efa5e7))
+
+
+
+
+
+## [1.0.5](https://github.com/harryyaprakov/hui/compare/@pezak/hui-theme@1.0.4...@pezak/hui-theme@1.0.5) (2024-04-01)
+
+**📝 Note:** Version bump only for package @pezak/hui-theme
+
+
+
+
+
+## [1.0.4](https://github.com/harryyaprakov/hui/compare/@pezak/hui-theme@1.0.2...@pezak/hui-theme@1.0.4) (2024-04-01)
+
+
+### 🩹 Fixes
+
+- Exports ([1c64a82](https://github.com/harryyaprakov/hui/commit/1c64a82c68c2c074b319730920c882bc267a64d7))
+- HuiTheme export again ([776c442](https://github.com/harryyaprakov/hui/commit/776c44221e56052e8a7fecbff519c029a92e0cf2))
+
+
+
+
+
+## [1.0.3](https://github.com/harryyaprakov/hui/compare/@pezak/hui-theme@1.0.2...@pezak/hui-theme@1.0.3) (2024-04-01)
+
+
+### 🩹 Fixes
+
+- HuiTheme export again ([776c442](https://github.com/harryyaprakov/hui/commit/776c44221e56052e8a7fecbff519c029a92e0cf2))
+
+
+
+
+
+## [1.0.2](https://github.com/harryyaprakov/hui/compare/@pezak/hui-theme@1.0.1...@pezak/hui-theme@1.0.2) (2024-04-01)
+
+
+### 🩹 Fixes
+
+- HuiTheme import ([e000080](https://github.com/harryyaprakov/hui/commit/e000080a0948e84f103364a9b1e26bef0165c4ba))
+
+
+
+
+
+## [1.0.1](https://github.com/harryyaprakov/hui/compare/@pezak/hui-theme@1.0.0...@pezak/hui-theme@1.0.1) (2024-04-01)
+
+
+### 🩹 Fixes
+
+- HuiTheme types export ([dfc42e7](https://github.com/harryyaprakov/hui/commit/dfc42e7bcf5536575639e8599de92371a3a25208))
+
+
+
+
+
+# [1.0.0](https://github.com/harryyaprakov/hui/compare/@pezak/hui-theme@0.2.3-dev.0...@pezak/hui-theme@1.0.0) (2024-04-01)
+
+**📝 Note:** Version bump only for package @pezak/hui-theme
+
+
+
+
+
+## [0.2.2](https://github.com/harryyaprakov/hui/compare/@pezak/hui-theme@0.2.1...@pezak/hui-theme@0.2.2) (2024-03-31)
+
+
+### 🩹 Fixes
+
+- Tailwind content to target primevue preset from the package ([9fc3e9d](https://github.com/harryyaprakov/hui/commit/9fc3e9d1929d741814c298e5edc04fcd5c54cc84))
+
+
+
+
+
+## [0.2.1](https://github.com/harryyaprakov/hui/compare/@pezak/hui-theme@0.2.0...@pezak/hui-theme@0.2.1) (2024-03-27)
+
+**📝 Note:** Version bump only for package @pezak/hui-theme
+
+
+
+
+
+# [0.2.0](https://github.com/harryyaprakov/hui/compare/@pezak/hui-theme@0.1.0-dev.1...@pezak/hui-theme@0.2.0) (2024-03-27)
+
+
+### 🚀 Enhancements
+
+- Add useTheme composable using exposed tw config ([7f761c8](https://github.com/harryyaprakov/hui/commit/7f761c89daec2a96d6359765c23d330ca75c5adf))
+- HandleTailwind + predefined muiTheme ([adb07fb](https://github.com/harryyaprakov/hui/commit/adb07fb99b5a9431bd32e8b349fda60b109059d3))
+
+
+
+
+
+# [0.1.0](https://github.com/harryyaprakov/hui/compare/@pezak/hui-theme@0.1.0-dev.1...@pezak/hui-theme@0.1.0) (2024-03-27)
+
+
+### 🚀 Enhancements
+
+- HandleTailwind + predefined muiTheme ([adb07fb](https://github.com/harryyaprakov/hui/commit/adb07fb99b5a9431bd32e8b349fda60b109059d3))
+
+
+
+
+
+# 0.1.0 (2024-03-27)
+
+
+### 🚀 Enhancements
+
+- Add hui-theme package ([b6bce13](https://github.com/harryyaprakov/hui/commit/b6bce13caf31fdbec238a3b6ce7b5cdc84b4ec3b))

package/README.md

@@ -0,0 +1,162 @@
+# `@gluhar/theme`
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+Gluhar Theme package.  
+Configures tailwind and primevue setup. Provides composables (useTheme) and utils for working with the theme and colors.
+
+[✨  Release Notes](./CHANGELOG.md)
+
+## Installation
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add @gluhar/theme
+```
+
+## 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,
+  ),
+};
+```
+
+Create a `base.sass` file to import tailwind's classes and provide initial variables.
+
+In `~/assets/styles/base.sass`
+
+```css
+@tailwind base
+@tailwind components
+@tailwind utilities
+
+:root
+  --primary-50: 236 253 245
+  --primary-100: 209 250 229
+  --primary-200: 167 243 208
+  --primary-300: 110 231 183
+  --primary-400: 52 211 153
+  --primary-500: 58 58 58
+  --primary-600: 5 150 105
+  --primary-700: 4 120 87
+  --primary-800: 6 95 70
+  --primary-900: 4 78 56
+  --primary-950: 2 44 34
+  --surface-0: 255 255 255
+  --surface-50: 248 250 252
+  --surface-100: 241 245 249
+  --surface-200: 226 232 240
+  --surface-300: 203 213 225
+  --surface-400: 148 163 184
+  --surface-500: 100 116 139
+  --surface-600: 71 85 105
+  --surface-700: 45 55 72
+  --surface-800: 30 41 59
+  --surface-900: 15 23 42
+  --surface-950: 3 6 23;
+```
+
+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:
+
+```ts
+{
+  modules: [
+    ...,
+    "@gluhar/theme"
+  ],
+
+  gluharTheme: {
+    tailwind: {
+      cssPath: '~/assets/main.css'
+    }
+  }
+}
+```
+
+## PrimeVue Config
+
+This package provides an up-to-date primevue preset for tailwind (lara). In your project you import whats provided and only add overrides for whats in use.
+
+Create a folder names `primevue` in /styles.
+
+`./assets/styles/primevue/index.js`
+
+```js
+import lara from "@gluhar/theme/primevue";
+import button from "./button"; // import other overrides like this
+
+export default {
+  ...lara,
+  button,
+};
+```
+
+When doing overrides cmd + click into the gluhar/theme import, navigate to the component you want, copy paste it to /primevue and change what you need fam got you bruv innit.
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  npm install
+  
+  # Generate type stubs
+  npm run dev:prepare
+  
+  # Develop with the playground
+  npm run dev
+  
+  # Build the playground
+  npm run dev:build
+  
+  # Run ESLint
+  npm run lint
+  
+  # Run Vitest
+  npm run test
+  npm run test:watch
+  
+  # Release new version
+  npm run release
+  ```
+
+</details>
+
+<!-- Badges -->
+
+[npm-version-src]: https://img.shields.io/npm/v/my-module/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/my-module
+[npm-downloads-src]: https://img.shields.io/npm/dm/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npmjs.com/package/my-module
+[license-src]: https://img.shields.io/npm/l/my-module.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/my-module
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.cjs

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,13 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { ModuleOptions } from '@nuxtjs/tailwindcss';
+import pv from '@primevue/nuxt-module';
+
+type Primevue = typeof pv;
+type PrimevueOptions = Parameters<Exclude<Primevue["getOptions"], undefined>>[0];
+interface GluharThemeOptions {
+    tailwind?: Partial<ModuleOptions>;
+    primevue?: Partial<PrimevueOptions>;
+}
+declare const _default: _nuxt_schema.NuxtModule<GluharThemeOptions, GluharThemeOptions, false>;
+
+export { type GluharThemeOptions, _default as default };

package/dist/module.d.ts

@@ -0,0 +1,13 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { ModuleOptions } from '@nuxtjs/tailwindcss';
+import pv from '@primevue/nuxt-module';
+
+type Primevue = typeof pv;
+type PrimevueOptions = Parameters<Exclude<Primevue["getOptions"], undefined>>[0];
+interface GluharThemeOptions {
+    tailwind?: Partial<ModuleOptions>;
+    primevue?: Partial<PrimevueOptions>;
+}
+declare const _default: _nuxt_schema.NuxtModule<GluharThemeOptions, GluharThemeOptions, false>;
+
+export { type GluharThemeOptions, _default as default };

package/dist/module.json

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

package/dist/module.mjs

@@ -0,0 +1,34 @@
+import path from 'pathe';
+import { defineNuxtModule, createResolver, installModule, 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.sass"),
+      exposeConfig: true
+    },
+    primevue: {
+      options: { unstyled: true },
+      importPT: {
+        from: path.resolve(cwd, "./assets/styles/primevue/")
+      }
+    }
+  },
+  setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const { primevue } = options;
+    handleTailwind(options, nuxt);
+    installModule("@primevue/nuxt-module", primevue);
+    addImportsDir(resolve("runtime/composables"));
+  }
+});
+
+export { module as default };

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

@@ -0,0 +1,10 @@
+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", "purple", "fuchsia", "pink", "rose"];
+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

@@ -0,0 +1,29 @@
+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",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose"
+];
+export const useTheme = () => {
+  return { colors, theme, baseColors };
+};

package/dist/runtime/fonts/object-sans/stylesheet.css

@@ -0,0 +1 @@
+@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/presets/lara/accordion/index.d.ts

@@ -0,0 +1,49 @@
+declare namespace _default {
+    namespace accordiontab {
+        namespace root {
+            let _class: string;
+            export { _class as class };
+        }
+        function header({ props }: {
+            props: any;
+        }): {
+            class: {
+                'select-none pointer-events-none cursor-default opacity-60': any;
+            }[];
+        };
+        function headerAction({ context }: {
+            context: any;
+        }): {
+            class: (string | {
+                'rounded-br-md rounded-bl-md': boolean;
+                'rounded-br-0 rounded-bl-0': any;
+                'text-surface-900'?: undefined;
+            } | {
+                'text-surface-900': any;
+                'rounded-br-md rounded-bl-md'?: undefined;
+                'rounded-br-0 rounded-bl-0'?: undefined;
+            })[];
+        };
+        namespace headerIcon {
+            let _class_1: string;
+            export { _class_1 as class };
+        }
+        namespace headerTitle {
+            let _class_2: string;
+            export { _class_2 as class };
+        }
+        namespace content {
+            let _class_3: string[];
+            export { _class_3 as class };
+        }
+        namespace transition {
+            let enterFromClass: string;
+            let enterActiveClass: string;
+            let enterToClass: string;
+            let leaveFromClass: string;
+            let leaveActiveClass: string;
+            let leaveToClass: string;
+        }
+    }
+}
+export default _default;

package/dist/runtime/presets/lara/accordion/index.js

@@ -0,0 +1,78 @@
+export default {
+    accordiontab: {
+        root: {
+            class: 'mb-1'
+        },
+        header: ({ props }) => ({
+            class: [
+                // State
+                { 'select-none pointer-events-none cursor-default opacity-60': props?.disabled }
+            ]
+        }),
+        headerAction: ({ context }) => ({
+            class: [
+                //Font
+                'font-bold',
+                'leading-none',
+
+                // Alignments
+                'flex items-center',
+                'relative',
+
+                // Sizing
+                'p-5',
+
+                // Shape
+                'rounded-t-md',
+                { 'rounded-br-md rounded-bl-md': !context.active, 'rounded-br-0 rounded-bl-0': context.active },
+
+                // Color
+                'border border-surface-200 dark:border-surface-700',
+                'bg-surface-50 dark:bg-surface-800',
+                'text-surface-600 dark:text-surface-0/80',
+                { 'text-surface-900': context.active },
+
+                // Transition
+                'transition duration-200 ease-in-out',
+                'transition-shadow duration-200',
+
+                // States
+                'hover:bg-surface-100 dark:hover:bg-surface-700/40',
+                'hover:text-surface-900',
+                'focus:outline-none focus:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50 ring-inset dark:focus-visible:ring-primary-300/50', // Focus
+
+                // Misc
+                'cursor-pointer no-underline select-none'
+            ]
+        }),
+        headerIcon: {
+            class: 'inline-block mr-2'
+        },
+        headerTitle: {
+            class: 'leading-none'
+        },
+        content: {
+            class: [
+                // Spacing
+                'p-5',
+
+                //Shape
+                'rounded-tl-none rounded-tr-none rounded-br-lg rounded-bl-lg',
+                'border-t-0',
+
+                // Color
+                'bg-surface-0 dark:bg-surface-800',
+                'border border-surface-200 dark:border-surface-700',
+                'text-surface-700 dark:text-surface-0/80'
+            ]
+        },
+        transition: {
+            enterFromClass: 'max-h-0',
+            enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
+            enterToClass: 'max-h-[1000px]',
+            leaveFromClass: 'max-h-[1000px]',
+            leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
+            leaveToClass: 'max-h-0'
+        }
+    }
+};