@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

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

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

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years 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

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

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