@pezak/hui-theme

hui-theme

Harry's UI (hui) theme package.
Configures tailwind and primevue setup. Provides composables (useTheme) and utils for working with the theme and colors.

✨  Release Notes

Installation

Install the module to your Nuxt application with one command:

npx nuxi module add @pezak/hui-theme

Tailwind Config

In your /config folder, create a tailwind.config.ts file that is a standard tw config. For theme use huiTheme from the package and merge with defu.

Importing the predefined theme like such is meant for vs code tw intellisense to work properly.

import huiTheme from "@pezak/hui-theme/huiTheme";
import { defu } from "defu";

export default {
  // Theme
  theme: defu(
    {
      // Extends
      extend: {
        // Colors
        colors: {
          primary: {
            base: "#3A3A3A",
          },
        },
      },
    },
    huiTheme,
  ),
};

Create a base.sass file to import tailwind's classes and provide initial variables.

In ~/assets/styles/base.sass

@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:

{
  modules: [
    ...,
    "@pezak/hui-theme"
  ],

  huiTheme: {
    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

import lara from "@pezak/hui-theme/primevue";
import button from "./button"; // import other overrides like this

export default {
  ...lara,
  button,
};

When doing overrides cmd + click into the hui-theme import, navigate to the component you want, copy paste it to /primevue and change what you need fam got you bruv innit.

Contribution

Local development

# 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