@sk-web-gui/core 0.1.81 → 0.1.83

package/src/preset.js

@@ -1,87 +1,38 @@
-// const { colors } = require('@sk-web-gui/theme');
-const { colors } = require('@sk-web-gui/theme');
-const withOpacity = require('./with-opacity');
+const plugin = require('tailwindcss/plugin');
 
-module.exports = {
-  theme: {
-    fontSize: {
-      tiny: '1rem',
-      xs: '1.2rem',
-      sm: '1.4rem',
-      base: '1.6rem',
-      lg: '1.8rem',
-      xl: '2.0rem',
-      '2xl': '2.4rem',
-      '3xl': '3.2rem',
-      '4xl': '4.0rem',
-      '5xl': '5.2rem',
+module.exports = function (
+  options = { customScrollbar: true, tailwindForms: true, plugin: { colors: [], cssBase: true } }
+) {
+  return {
+    theme: {
+      ...(options.customScrollbar
+        ? {
+            '.custom-scrollbar': {
+              '@apply scrollbar scrollbar-h-5 scrollbar-w-4 scrollbar-thumb-gray-300 scrollbar-track-gray-100 scrollbar-thumb-rounded-full scrollbar-track-rounded-full':
+                {},
+            },
+          }
+        : {}),
     },
-    extend: {
-      colors: {
-        ...colors,
-        current: 'currentColor',
-      },
-      cursor: {
-        base: 'var(--vc-cursor)',
-      },
-      spacing: {
-        xs: '4px',
-        sm: '8px',
-        md: '16px',
-        lg: '24px',
-        xl: '48px',
-      },
-      lineHeight: {
-        tiny: '1.4rem',
-        xs: '1.6rem',
-        sm: '2rem',
-        base: '2.4rem',
-        lg: '2.4rem',
-        xl: '3.2rem',
-        '2xl': '3.2rem',
-        '3xl': '4rem',
-        '4xl': '4.8rem',
-        '5xl': '5.8rem',
-      },
-      opacity: {
-        15: '0.15',
-      },
-      backgroundColor: {
-        base: withOpacity('--vc-colors-bg-base'),
-        fill: withOpacity('--vc-colors-bg-fill'),
-      },
-      textColor: {
-        foreground: withOpacity('--vc-colors-text-foreground'),
-        muted: withOpacity('--vc-colors-text-muted'),
-      },
-      borderRadius: {
-        base: 'var(--vc-rounded)',
-      },
-      zIndex: {
-        hide: -1,
-        none: 0,
-        base: 1,
-        docked: 10,
-        dropdown: 1000,
-        sticky: 1100,
-        banner: 1200,
-        overlay: 1300,
-        modal: 1400,
-        popover: 1500,
-        skipLink: 1600,
-        toast: 1700,
-        tooltip: 1800,
-      },
-      keyframes: {
-        'reset-overflow': {
-          'from, to': {
-            overflow: 'hidden',
-          },
-        },
-      },
-      animation: {
-        'reset-overflow': 'reset-overflow 180ms backwards',
-      },
+    plugins: [
+      ...(options.tailwindForms ? [require('@tailwindcss/forms')] : []),
+      ...(options.customScrollbar ? [require('tailwind-scrollbar')({ nocompatible: true })] : []),
+      ...(options.customScrollbar
+        ? [
+            plugin(function ({ addBase }) {
+              addBase({
+                '.custom-scrollbar': {
+                  '@apply scrollbar scrollbar-h-5 scrollbar-w-4 scrollbar-thumb-gray-300 scrollbar-track-gray-100 scrollbar-thumb-rounded-full scrollbar-track-rounded-full':
+                    {},
+                },
+              });
+            }),
+          ]
+        : []),
+      require('./plugin')(options.plugin),
+    ],
+    variants: {
+      ...(options.customScrollbar ? { scrollbar: ['rounded'] } : {}),
     },
-  },
+  };
 };

package/src/theme.js

@@ -0,0 +1,84 @@
+const { colors } = require('@sk-web-gui/theme');
+const withOpacity = require('./with-opacity');
+
+module.exports = {
+  fontSize: {
+    tiny: '1rem',
+    xs: '1.2rem',
+    sm: '1.4rem',
+    base: '1.6rem',
+    lg: '1.8rem',
+    xl: '2.0rem',
+    '2xl': '2.4rem',
+    '3xl': '3.2rem',
+    '4xl': '4.0rem',
+    '5xl': '5.2rem',
+  },
+  extend: {
+    colors: {
+      ...colors,
+      current: 'currentColor',
+    },
+    cursor: {
+      base: 'var(--vc-cursor)',
+    },
+    spacing: {
+      xs: '4px',
+      sm: '8px',
+      md: '16px',
+      lg: '24px',
+      xl: '48px',
+    },
+    lineHeight: {
+      tiny: '1.4rem',
+      xs: '1.6rem',
+      sm: '2rem',
+      base: '2.4rem',
+      lg: '2.4rem',
+      xl: '3.2rem',
+      '2xl': '3.2rem',
+      '3xl': '4rem',
+      '4xl': '4.8rem',
+      '5xl': '5.8rem',
+    },
+    opacity: {
+      15: '0.15',
+    },
+    backgroundColor: {
+      base: withOpacity('--vc-colors-bg-base'),
+      fill: withOpacity('--vc-colors-bg-fill'),
+    },
+    textColor: {
+      foreground: withOpacity('--vc-colors-text-foreground'),
+      muted: withOpacity('--vc-colors-text-muted'),
+    },
+    borderRadius: {
+      base: 'var(--vc-rounded)',
+    },
+    zIndex: {
+      hide: -1,
+      none: 0,
+      base: 1,
+      docked: 10,
+      dropdown: 1000,
+      sticky: 1100,
+      banner: 1200,
+      overlay: 1300,
+      modal: 1400,
+      popover: 1500,
+      skipLink: 1600,
+      toast: 1700,
+      tooltip: 1800,
+    },
+    keyframes: {
+      'reset-overflow': {
+        'from, to': {
+          overflow: 'hidden',
+        },
+      },
+    },
+    animation: {
+      'reset-overflow': 'reset-overflow 180ms backwards',
+    },
+  },
+};