@timus-networks/theme

@timus-networks/fonts

Nuxt module for Theme Installation.

Table of Contents

• 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

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

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

2. 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:

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

License

This project is licensed under the MIT License.