@air/tailwind-config - npm Package Compare versions

Comparing version 3.3.0 to 3.4.0

package.json

 {
   "name": "@air/tailwind-config",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "main": "src/index.js",
@@ -16,3 +16,4 @@ "files": [
     "@air/colors": "*",
-    "postcss": "8.4.27",
+    "postcss": "8.4.31",
+    "tailwind-scrollbar": "3.0.5",
     "tailwindcss": "3.3.3",
@@ -19,0 +20,0 @@ "tailwindcss-radix": "2.8.0"

src/index.js

@@ -1,3 +0,105 @@
-const { colors } = require('@air/colors');
+const {
+  colors: colorsV1,
+  blue,
+  blueDark,
+  green,
+  greenDark,
+  grey,
+  greyDark,
+  indigo,
+  indigoDark,
+  orange,
+  orangeDark,
+  pink,
+  pinkDark,
+  purple,
+  purpleDark,
+  red,
+  redDark,
+  teal,
+  tealDark,
+  yellow,
+  yellowDark,
+} = require('@air/colors');
 
+const colors = {
+  blue,
+  blueDark,
+  green,
+  greenDark,
+  grey,
+  greyDark,
+  indigo,
+  indigoDark,
+  orange,
+  orangeDark,
+  pink,
+  pinkDark,
+  purple,
+  purpleDark,
+  red,
+  redDark,
+  teal,
+  tealDark,
+  yellow,
+  yellowDark,
+};
+
+const colorKeys = () => {
+  let keys = Object.keys(colors);
+
+  function filterItems(arr, query) {
+    return arr.filter(function (el) {
+      return el.indexOf(query == -1);
+    });
+  }
+
+  keys = filterItems(keys, 'Dark');
+
+  return keys;
+};
+
+const generateColorClasses = () => {
+  const keys = colorKeys();
+  let mappedColors = {};
+
+  keys.map((color) => {
+    mappedColors[color] = {};
+  });
+
+  keys.map((color) => {
+    for (let index = 0; index < 12; index++) {
+      const step = index + 1;
+      mappedColors[color][step] = `var(--colors-${color}${step})`;
+    }
+  });
+
+  return mappedColors;
+};
+
+const generateColorVariables = () => {
+  let rootColors = {};
+  let darkColors = {};
+
+  const radixColors = Object.values(colors);
+
+  radixColors.map((color, i) => {
+    const key = Object.keys(colors)[i];
+
+    if (key.includes('Dark')) {
+      darkColors = { ...darkColors, ...color };
+    } else {
+      rootColors = { ...rootColors, ...color };
+    }
+  });
+
+  return {
+    root: { ...rootColors },
+    dark: { ...darkColors },
+  };
+};
+
+const variables = generateColorVariables();
+const classes = generateColorClasses();
+
 /** @type {import('tailwindcss').Config} */
@@ -18,7 +120,20 @@ module.exports = {
     },
+
+    variables: {
+      DEFAULT: {
+        colors: { ...variables.root },
+      },
+      '[data-theme="dark"]': {
+        colors: { ...variables.dark },
+      },
+    },
+
     extend: {
-      colors,
+      colors: {
+        ...colorsV1,
+        ...classes,
+      },
 
       backgroundImage: {
-        skeleton: `linear-gradient(90deg, ${colors.pigeon[50]}, ${colors.pigeon[100]},  ${colors.pigeon[50]})`,
+        skeleton: `linear-gradient(90deg, ${colorsV1.pigeon[50]}, ${colorsV1.pigeon[100]},  ${colorsV1.pigeon[50]})`,
       },
@@ -57,3 +172,3 @@
         modal: '0px 0px 8px rgba(0, 0, 0, 0.2), 0px 0px 16px rgba(0, 0, 0, 0.3)',
-        popover: '0px 2px 8px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.15), 0px 0px 2px rgba(0, 0, 0, 0.25)',
+        popover: '0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 3px 6px rgba(0, 0, 0, 0.1), 0px 9px 24px rgba(0, 0, 0, 0.2)',
       },
@@ -155,3 +270,3 @@
   },
-  plugins: [require('tailwindcss-radix')()],
+  plugins: [require('tailwindcss-radix')(), require('@mertasan/tailwindcss-variables'), require('tailwind-scrollbar')],
 };

No alert changes

Improved metrics

Total package byte prevSize

6751

increased by40.18%

Lines of code

244

increased by67.12%

Worsened metrics

Dev dependency count

5

increased by25%

No dependency changes