@timus-networks/theme NPM

@timus-networks/fonts

Nuxt module for Theme Installation.

Installation
Usage
Scripts
Contributing
License

Installation

To install this module, you can use npm or yarn:

npm

npm install @timus-networks/theme

yarn

yarn add @timus-networks/theme

Usage

To use this module in your Nuxt 3 project, add it to your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@timus-networks/theme'],
});

Add below code to your tailwind.config.js file

// tint & shade color generator
function generateColors(baseName, start = 1, end = 9, step = 1) {
  const colors = {};

  for (let i = start; i <= end; i += step) {
    colors[i] = `var(--el-color-${baseName}-light-${i})`;
  }

  return colors;
}

const colorNames = ['primary', 'secondary', 'neutral', 'danger', 'success', 'warning', 'info'];
const colorShades = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const classPrefixes = ['bg', 'text', 'border'];
const colors = colorNames.reduce((acc, color) => ({ ...acc, [`${color}`]: generateColors(color, 1, 9) }), {});

module.exports = {
  // content: ['./pages/**/*.{vue,html}', './components/**/*.{vue,html}', './layouts/**/*.{vue,html}', './modules/**/*.{vue,html}'],
  content: ['./modules/**/*.{vue,html}'],
  theme: {
    extend: {
      colors,
      spacing: {
        default: '30px',
        7.5: '30px', // 30px için özel bir sınıf ekliyoruz
      },
    },
  },
  plugins: [
    function ({ addUtilities, theme, e }) {
      const gridCols = theme('gridTemplateColumns');
      const utilities = Object.entries(gridCols).map(([key, value]) => ({
        [`.${e(`grid-cols-${key}`)}`]: {
          'grid-template-columns': value,
          gap: '30px', // Burada varsayılan boşluğu ayarlıyoruz
        },
      }));

      addUtilities(utilities);
    },
  ],
  safelist: classPrefixes.flatMap((prefix) => colorNames.flatMap((color) => colorShades.map((i) => `${prefix}-${color}-${i}`))),
};

Scripts

The following npm scripts are available:

test: Run tests using Vitest.
test:watch: Run tests in watch mode.
test:types: Check TypeScript types.
lint:prettier: Lint code using Prettier.
lint:eslint: Lint code using ESLint.
lint:stylelint: Lint styles using Stylelint.
fix: Fix linting errors.
prepack: Run the prepack script.
pub: Publish the module.
release: Release a new version.

Contributing

If you would like to contribute, please follow these guidelines:

Fork the repository.
Create a new branch for your feature or bug fix.
Commit your changes.
Push your branch and create a pull request.

License

This project is licensed under the MIT License.

nuxt nuxt3 module component vue vue3 theme tailwind

@nuxt/kit tailwindcss vue-tsc

@everything-registry/sub-chunk-920

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

9 months ago

10 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

12 months ago

12 months ago

11 months ago

10 months ago

10 months ago

10 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

10 months ago

10 months ago

12 months ago

12 months ago

11 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

10 months ago

10 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

@timus-networks/theme v2.4.66

@timus-networks/fonts

Table of Contents

Installation

npm

yarn

Usage

Scripts

Contributing

License