@timus-networks/theme 1.0.1 → 1.0.3

package/README.md

@@ -5,7 +5,7 @@
 
 ```json
 {
-  "modules": ["@nuxtjs/axios", ["@timus-networks/filter", { "client": false, "typescript": false }]]
+  "modules": ["@nuxtjs/axios", ["@timus-networks/theme", { "client": false, "typescript": false }]]
 }
 ```
 
@@ -32,6 +32,35 @@ tailwindcss: {
 },
 ```
 
+4. Add below code to your **tailwind.confif.js** file
+
+```js
+// tint & shade color generator
+function generateColors(baseName, start = 100, end = 900, step = 100) {
+  const colors = {};
+  for (let i = start; i <= end; i += step) {
+    colors[i] = `var(--${baseName}-${i})`;
+  }
+  return colors;
+}
+
+const colorNames = ['primary', 'secondary', 'gray', 'danger', 'success', 'warning', 'info'];
+
+const colors = colorNames.reduce((acc, color) => {
+  return { ...acc, [`${color}`]: generateColors(color, 100, 900) };
+}, {});
+
+module.exports = {
+  content: ['./pages/**/*.{html,js}'],
+  theme: {
+    extend: {
+      colors: colors,
+    },
+  },
+  plugins: [],
+};
+```
+
 ### Usage
 
 Default dark theme is `false`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timus-networks/theme",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.",
   "main": "module.js",
   "types": "index.d.ts",

package/scss/_layers.scss

@@ -1,9 +1,9 @@
-@layer components {
-  @import 'colors';
-  @import 'containers';
-  @import 'fonts';
-  @import 'icons';
-  @import 'buttons.scss';
-  @import 'inputs.scss';
-  @import 'selectbox.scss';
-}
+// @layer components {
+//   @import 'colors';
+//   @import 'containers';
+//   @import 'fonts';
+//   @import 'icons';
+//   @import 'buttons.scss';
+//   @import 'inputs.scss';
+//   @import 'selectbox.scss';
+// }