winduum 0.1.4 → 0.1.5

package/dist/tailwind.css

@@ -1 +1 @@
-*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.col-span-4{grid-column:span 4 / span 4}.col-span-6{grid-column:span 6 / span 6}.col-span-3{grid-column:span 3 / span 3}.col-span-12{grid-column:span 12 / span 12}.flex{display:flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.w-full{width:100%}.w-24{width:6rem}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.gap-4{gap:1rem}.gap-2{gap:.5rem}.gap-8{gap:2rem}.rounded-full{border-radius:var(--rounded-full)}.rounded{border-radius:var(--rounded)}.bg-blue-100\/10{background-color:#dbeafe1a}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(var(--color-secondary) / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-accent{--tw-bg-opacity: 1;background-color:rgb(var(--color-accent) / var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary) / var(--tw-bg-opacity))}.bg-info{--tw-bg-opacity: 1;background-color:rgb(var(--color-info) / var(--tw-bg-opacity))}.bg-warning{--tw-bg-opacity: 1;background-color:rgb(var(--color-warning) / var(--tw-bg-opacity))}.bg-error{--tw-bg-opacity: 1;background-color:rgb(var(--color-error) / var(--tw-bg-opacity))}.bg-success{--tw-bg-opacity: 1;background-color:rgb(var(--color-success) / var(--tw-bg-opacity))}.bg-light{--tw-bg-opacity: 1;background-color:rgb(var(--color-light) / var(--tw-bg-opacity))}.bg-dark{--tw-bg-opacity: 1;background-color:rgb(var(--color-dark) / var(--tw-bg-opacity))}.bg-default{--tw-bg-opacity: 1;background-color:rgb(var(--color-default) / var(--tw-bg-opacity))}.bg-current{--tw-bg-opacity: 1;background-color:rgb(var(--color-current) / var(--tw-bg-opacity))}.bg-background{--tw-bg-opacity: 1;background-color:rgb(var(--color-background) / var(--tw-bg-opacity))}.bg-opacity-10{--tw-bg-opacity: .1}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-purple-600{--tw-gradient-from: #9333ea;--tw-gradient-to: rgb(147 51 234 / 0);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to: #3b82f6}.p-md{padding:var(--spacing-md)}.p-xs{padding:var(--spacing-xs)}.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.font-primary{font-family:var(--font-primary)}.font-secondary{font-family:var(--font-secondary)}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:var(--font-bold)}.font-light{font-weight:var(--font-light)}.font-normal{font-weight:var(--font-normal)}.font-medium{font-weight:var(--font-medium)}.font-semibold{font-weight:var(--font-semibold)}.font-extrabold{font-weight:var(--font-extrabold)}.uppercase{text-transform:uppercase}.text-dark{--tw-text-opacity: 1;color:rgb(var(--color-dark) / var(--tw-text-opacity))}.text-default{--tw-text-opacity: 1;color:rgb(var(--color-default) / var(--tw-text-opacity))}.text-accent{--tw-text-opacity: 1;color:rgb(var(--color-accent) / var(--tw-text-opacity))}.text-error{--tw-text-opacity: 1;color:rgb(var(--color-error) / var(--tw-text-opacity))}.text-primary{--tw-text-opacity: 1;color:rgb(var(--color-primary) / var(--tw-text-opacity))}.text-secondary{--tw-text-opacity: 1;color:rgb(var(--color-secondary) / var(--tw-text-opacity))}.text-info{--tw-text-opacity: 1;color:rgb(var(--color-info) / var(--tw-text-opacity))}.text-warning{--tw-text-opacity: 1;color:rgb(var(--color-warning) / var(--tw-text-opacity))}.text-success{--tw-text-opacity: 1;color:rgb(var(--color-success) / var(--tw-text-opacity))}.text-light{--tw-text-opacity: 1;color:rgb(var(--color-light) / var(--tw-text-opacity))}.text-current{--tw-text-opacity: 1;color:rgb(var(--color-current) / var(--tw-text-opacity))}.text-background{--tw-text-opacity: 1;color:rgb(var(--color-background) / var(--tw-text-opacity))}.accent-background{--color-accent: var(--color-background);accent-color:rgb(var(--color-accent))}.accent-default{--color-accent: var(--color-default);accent-color:rgb(var(--color-accent))}.accent-light{--color-accent: var(--color-light);accent-color:rgb(var(--color-accent))}.accent-dark{--color-accent: var(--color-dark);accent-color:rgb(var(--color-accent))}.accent-primary{--color-accent: var(--color-primary);accent-color:rgb(var(--color-accent))}.accent-secondary{--color-accent: var(--color-secondary);accent-color:rgb(var(--color-accent))}.accent-warning{--color-accent: var(--color-warning);accent-color:rgb(var(--color-accent))}.accent-error{--color-accent: var(--color-error);accent-color:rgb(var(--color-accent))}.accent-info{--color-accent: var(--color-info);accent-color:rgb(var(--color-accent))}.accent-success{--color-accent: var(--color-success);accent-color:rgb(var(--color-accent))}.accent-accent{--color-accent: var(--color-accent);accent-color:rgb(var(--color-accent))}.accent-current{--color-accent: var(--color-current);accent-color:rgb(var(--color-accent))}.text-background{--color-current: var(--color-background)}.text-default{--color-current: var(--color-default)}.text-light{--color-current: var(--color-light)}.text-dark{--color-current: var(--color-dark)}.text-primary{--color-current: var(--color-primary)}.text-secondary{--color-current: var(--color-secondary)}.text-warning{--color-current: var(--color-warning)}.text-error{--color-current: var(--color-error)}.text-info{--color-current: var(--color-info)}.text-success{--color-current: var(--color-success)}.text-accent{--color-current: var(--color-accent)}.text-current{--color-current: var(--color-current)}:where(.col){display:flex;flex-direction:column}.container.is-sm{--container-width: var(--container-width-sm)}.dark .dark\:bg-dark{--tw-bg-opacity: 1;background-color:rgb(var(--color-dark) / var(--tw-bg-opacity))}.dark .dark\:text-light{--tw-text-opacity: 1;color:rgb(var(--color-light) / var(--tw-text-opacity));--color-current: var(--color-light)}
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.col-span-4{grid-column:span 4 / span 4}.col-span-6{grid-column:span 6 / span 6}.col-span-3{grid-column:span 3 / span 3}.col-span-12{grid-column:span 12 / span 12}.flex{display:flex}.grid{display:grid}.hidden{display:none}.aspect-square{aspect-ratio:1 / 1}.w-full{width:100%}.w-24{width:6rem}@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}.animate-bounce{animation:bounce 1s infinite}.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.gap-4{gap:1rem}.gap-2{gap:.5rem}.gap-8{gap:2rem}.rounded-full{border-radius:var(--rounded-full)}.rounded{border-radius:var(--rounded)}.bg-blue-100\/10{background-color:#dbeafe1a}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(var(--color-secondary) / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-accent{--tw-bg-opacity: 1;background-color:rgb(var(--color-accent) / var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity: 1;background-color:rgb(229 231 235 / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(var(--color-primary) / var(--tw-bg-opacity))}.bg-info{--tw-bg-opacity: 1;background-color:rgb(var(--color-info) / var(--tw-bg-opacity))}.bg-warning{--tw-bg-opacity: 1;background-color:rgb(var(--color-warning) / var(--tw-bg-opacity))}.bg-error{--tw-bg-opacity: 1;background-color:rgb(var(--color-error) / var(--tw-bg-opacity))}.bg-success{--tw-bg-opacity: 1;background-color:rgb(var(--color-success) / var(--tw-bg-opacity))}.bg-light{--tw-bg-opacity: 1;background-color:rgb(var(--color-light) / var(--tw-bg-opacity))}.bg-dark{--tw-bg-opacity: 1;background-color:rgb(var(--color-dark) / var(--tw-bg-opacity))}.bg-default{--tw-bg-opacity: 1;background-color:rgb(var(--color-default) / var(--tw-bg-opacity))}.bg-current{--tw-bg-opacity: 1;background-color:rgb(var(--color-current) / var(--tw-bg-opacity))}.bg-background{--tw-bg-opacity: 1;background-color:rgb(var(--color-background) / var(--tw-bg-opacity))}.bg-opacity-10{--tw-bg-opacity: .1}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-purple-600{--tw-gradient-from: #9333ea;--tw-gradient-to: rgb(147 51 234 / 0);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to: #3b82f6}.p-md{padding:var(--spacing-md)}.p-xs{padding:var(--spacing-xs)}.font-sans{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}.font-primary{font-family:var(--font-primary)}.font-secondary{font-family:var(--font-secondary)}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:var(--font-bold)}.font-light{font-weight:var(--font-light)}.font-normal{font-weight:var(--font-normal)}.font-medium{font-weight:var(--font-medium)}.font-semibold{font-weight:var(--font-semibold)}.font-extrabold{font-weight:var(--font-extrabold)}.uppercase{text-transform:uppercase}.accent-current{--color-accent: var(--color-current);accent-color:rgb(var(--color-accent))}.accent-background{--color-accent: var(--color-background);accent-color:rgb(var(--color-accent))}.accent-default{--color-accent: var(--color-default);accent-color:rgb(var(--color-accent))}.accent-light{--color-accent: var(--color-light);accent-color:rgb(var(--color-accent))}.accent-dark{--color-accent: var(--color-dark);accent-color:rgb(var(--color-accent))}.accent-primary{--color-accent: var(--color-primary);accent-color:rgb(var(--color-accent))}.accent-secondary{--color-accent: var(--color-secondary);accent-color:rgb(var(--color-accent))}.accent-warning{--color-accent: var(--color-warning);accent-color:rgb(var(--color-accent))}.accent-error{--color-accent: var(--color-error);accent-color:rgb(var(--color-accent))}.accent-info{--color-accent: var(--color-info);accent-color:rgb(var(--color-accent))}.accent-success{--color-accent: var(--color-success);accent-color:rgb(var(--color-accent))}.accent-accent{--color-accent: var(--color-accent);accent-color:rgb(var(--color-accent))}.text-current{--color-current: var(--color-current);color:rgb(var(--color-current))}.text-background{--color-current: var(--color-background);color:rgb(var(--color-current))}.text-default{--color-current: var(--color-default);color:rgb(var(--color-current))}.text-light{--color-current: var(--color-light);color:rgb(var(--color-current))}.text-dark{--color-current: var(--color-dark);color:rgb(var(--color-current))}.text-primary{--color-current: var(--color-primary);color:rgb(var(--color-current))}.text-secondary{--color-current: var(--color-secondary);color:rgb(var(--color-current))}.text-warning{--color-current: var(--color-warning);color:rgb(var(--color-current))}.text-error{--color-current: var(--color-error);color:rgb(var(--color-current))}.text-info{--color-current: var(--color-info);color:rgb(var(--color-current))}.text-success{--color-current: var(--color-success);color:rgb(var(--color-current))}.text-accent{--color-current: var(--color-accent);color:rgb(var(--color-current))}:where(.col){display:flex;flex-direction:column}:where(.container):where(.is-sm){--container-width: var(--container-width-sm)}.dark .dark\:bg-dark{--tw-bg-opacity: 1;background-color:rgb(var(--color-dark) / var(--tw-bg-opacity))}.dark .dark\:text-light{--color-current: var(--color-light);color:rgb(var(--color-current))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "main": "index.js",
   "scripts": {
@@ -9,25 +9,28 @@
     "build-prod": "vite build -c vite.config.prod.js",
     "eslint": "eslint '**/*.js' --fix",
     "stylelint": "npx stylelint '**/*.css' --fix",
-    "tailwind-helpers": "rollup utils/helpers.js --file utils/helpers.cjs --format cjs"
+    "tailwind": "rollup utils/tailwind.js --file utils/tailwind.cjs -f cjs --exports named"
+  },
+  "dependencies": {
+    "lodash": "^4.17.21"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
     "autoprefixer": "^10.4.13",
-    "css-has-pseudo": "^4.0.2",
-    "eslint": "^8.32.0",
+    "css-has-pseudo": "^5.0.1",
+    "eslint": "^8.33.0",
     "eslint-config-standard": "^17.0.0",
     "postcss": "^8.4.21",
-    "postcss-custom-media": "^9.0.1",
-    "postcss-custom-properties": "^12.1.11",
-    "postcss-custom-selectors": "^7.0.0",
+    "postcss-custom-media": "^9.1.1",
+    "postcss-custom-properties": "^13.1.1",
+    "postcss-custom-selectors": "^7.1.1",
     "postcss-import": "^15.1.0",
-    "postcss-nesting": "^10.2.0",
+    "postcss-nesting": "^11.1.0",
     "stylelint-config-standard": "^29.0.0",
     "tailwindcss": "^3.2.4",
     "fast-glob": "^3.2.12",
-    "vite": "^4.0.4",
-    "vue": "^3.2.45"
+    "vite": "^4.1.1",
+    "vue": "^3.2.47"
   },
   "files": [
     "index.js",
@@ -37,8 +40,9 @@
     "utils"
   ],
   "exports": {
-    ".": "./index.js",
-    "./tailwind.config.cjs": "./tailwind.config.cjs",
+    ".": "./utils/tailwind.cjs",
+    "./tailwind-cjs": "./utils/tailwind.cjs",
+    "./tailwind-esm": "./utils/tailwind.js",
     "./main.css": "./dist/main.css",
     "./tailwind.css": "./dist/tailwind.css",
     "./src/*": "./src/*",

package/src/App.vue

@@ -8,5 +8,5 @@
 
 <style scoped>
     @import "tailwindcss/utilities";
-    @import "styles/Ui/Btn.css";
+    @import "styles/ui/Btn.css";
 </style>

package/src/index.html

@@ -12,5 +12,6 @@
     <a href="/badge.html">ui-badge</a>
     <a href="/btn.html">ui-btn</a>
     <a href="/input.html">ui-input</a>
+    <div class="animate-bounce">asd</div>
 </body>
 </html>

package/src/styles/{Base → base}/tailwind/base.css

@@ -13,14 +13,14 @@
     flex-direction: column;
   }
 
-  .container {
+  :where(.container) {
     margin-left: auto;
     margin-right: auto;
     padding-left: var(--container-padding);
     padding-right: var(--container-padding);
     max-width: var(--container-width);
 
-    &.is-sm {
+    &:where(.is-sm) {
       --container-width: var(--container-width-sm);
     }
   }

package/src/styles/main.css

@@ -1,10 +1,10 @@
-@import "Base/reset.css";
-@import "Base/default.css";
-@import "Base/config.css";
-@import "Base/icons.css";
-@import "Base/keyframes.css";
-@import "Base/theme/default.css";
-@import "Base/theme/dark.css";
-@import "Ui/+.css";
-@import "Components/+.css";
-@import "Libraries/+.css";
+@import "base/reset.css";
+@import "base/default.css";
+@import "base/config.css";
+@import "base/icons.css";
+@import "base/keyframes.css";
+@import "base/theme/default.css";
+@import "base/theme/dark.css";
+@import "ui/+.css";
+@import "components/+.css";
+@import "libraries/+.css";

package/src/styles/tailwind.css

@@ -1 +1 @@
-@import "Base/tailwind/base.css";
+@import "base/tailwind/base.css";

package/tailwind.config.cjs

@@ -1,61 +1,9 @@
-const { tailwindColors, tailwindVariables, tailwindColorsAccent, tailwindColorsCurrent, tailwindAnimations } = require('./utils/helpers.cjs')
-const plugin = require('tailwindcss/plugin')
-
-const colors = [
-  'background', 'default', 'light', 'dark', 'primary', 'secondary',
-  'warning', 'error', 'info', 'success', 'accent', `current`
-]
-
-const animations = [
-  'fade-in', 'fade-out'
-]
-
 module.exports = {
   darkMode: 'class',
   content: [
     './src/**/*.{js,html}'
   ],
-  corePlugins: {
-    preflight: false,
-    container: false,
-    accentColor: false
-  },
-  theme: {
-    extend: {
-      colors: tailwindColors(colors),
-      fontFamily: tailwindVariables('font', ['primary', 'secondary']),
-      fontWeight: tailwindVariables('font', ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold']),
-      zIndex: tailwindVariables('z', [10, 20, 30, 40, 50, 60], {
-        0: 0,
-        auto: 'auto'
-      }),
-      spacing: tailwindVariables('spacing', ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'section']),
-      borderRadius: tailwindVariables('rounded', ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'full'], {
-        DEFAULT: 'var(--rounded)'
-      }),
-      screens: {
-        'xs': '22.5em',
-        'sm': '26em',
-        'md': '48em',
-        'lg': '60em',
-        'xl': '76em',
-        '2xl': '82em',
-        '3xl': '88em',
-        '4xl': '100em',
-        'xxl': '126em',
-        '2xxl': '158em'
-      }
-    },
-  },
   plugins: [
-    plugin(({ addUtilities }) => {
-      addUtilities(tailwindColorsAccent(colors))
-    }),
-    plugin(({ addUtilities }) => {
-      addUtilities(tailwindColorsCurrent(colors))
-    }),
-    plugin(({ addUtilities }) => {
-      addUtilities(tailwindAnimations(animations))
-    })
+    require('winduum')()
   ],
 }

package/utils/tailwind.cjs

@@ -0,0 +1,175 @@
+'use strict';
+
+var plugin = require('tailwindcss/plugin');
+var twColors = require('tailwindcss/colors');
+var lodash = require('lodash');
+
+const defaultConfig = {
+    colors: [
+        'background', 'default', 'light', 'dark', 'primary', 'secondary',
+        'warning', 'error', 'info', 'success', 'accent', `current`
+    ],
+    fontFamily: ['primary', 'secondary'],
+    fontWeight: ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'],
+    zIndex: [10, 20, 30, 40, 50, 60],
+    spacing: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'section'],
+    borderRadius: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'full'],
+    animations: ['fade-in', 'fade-out'],
+    screens: {
+        'xs': '22.5em',
+        'sm': '26em',
+        'md': '48em',
+        'lg': '60em',
+        'xl': '76em',
+        '2xl': '82em',
+        '3xl': '88em',
+        '4xl': '100em',
+        'xxl': '126em',
+        '2xxl': '158em'
+    }
+};
+
+const hexToRgb = hex => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)
+    .substring(1).match(/.{2}/g)
+    .map(x => parseInt(x, 16));
+
+const getTailwindColors = (twColors) => {
+    const accentColors = [];
+
+    Object.keys(twColors).forEach(color => {
+        if (color.match(/(lightBlue|warmGray|trueGray|coolGray|blueGray)/)) {
+            return
+        }
+
+        if (typeof twColors[color] === "object") {
+            Object.keys(twColors[color]).forEach(variant => {
+                accentColors.push([`${color.replace(/[A-Z]/g, m => "-" + m.toLowerCase())}-${variant}`, twColors[color][variant]]);
+            });
+        } else {
+            accentColors.push([color, twColors[color]]);
+        }
+    });
+
+    return accentColors
+};
+
+const tailwindColors = (colors = []) => {
+    colors.forEach(name => {
+        colors[name] = ({ opacityValue }) => {
+            if (opacityValue === undefined) {
+                return `rgb(var(--color-${name}))`
+            }
+            return `rgb(var(--color-${name}) / ${opacityValue})`
+        };
+    });
+
+    return colors
+};
+
+const tailwindColorsAccent = (colors = []) => {
+    const result = {};
+
+    colors.forEach(color => {
+        if (Array.isArray(color)) {
+            const rgb = hexToRgb(color[1]);
+
+            result[`.accent-${color[0]}`] = {
+                '--color-accent': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
+                'accent-color': 'rgb(var(--color-accent))'
+            };
+        } else {
+            result[`.accent-${color}`] = {
+                '--color-accent': `var(--color-${color})`,
+                'accent-color': 'rgb(var(--color-accent))'
+            };
+        }
+    });
+
+    return result
+};
+
+const tailwindColorsCurrent = (colors = []) => {
+    const result = {};
+
+    colors.forEach(color => {
+        if (Array.isArray(color)) {
+            const rgb = hexToRgb(color[1]);
+
+            result[`.text-${color[0]}`] = {
+                '--color-current': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
+                'color': 'rgb(var(--color-current))'
+            };
+        } else {
+            result[`.text-${color}`] = {
+                '--color-current': `var(--color-${color})`,
+                'color': 'rgb(var(--color-current))'
+            };
+        }
+    });
+
+    return result
+};
+
+const tailwindVariables = (type, variables = [], values = {}) => {
+    variables.forEach(name => {
+        values[name] = `var(--${type}-${name})`;
+    });
+
+    return values
+};
+
+const tailwindAnimations = (values) => {
+    const result = {};
+
+    values.forEach(value => {
+        result[`.animation-${value}`] = {
+            'animation-name': value
+        };
+    });
+
+    return result
+};
+
+const createPlugin = (userConfig = {}) => {
+    userConfig = lodash.merge(defaultConfig, userConfig);
+
+    return plugin(({addUtilities}) => {
+        addUtilities(Object.assign(tailwindColorsAccent(getTailwindColors(twColors)), tailwindColorsAccent(userConfig.colors)));
+        addUtilities(Object.assign(tailwindColorsCurrent(getTailwindColors(twColors)), tailwindColorsCurrent(userConfig.colors)));
+        addUtilities(tailwindAnimations(userConfig.animations));
+    }, {
+        corePlugins: {
+            preflight: false,
+            container: false,
+            accentColor: false,
+            textColor: false
+        },
+        theme: {
+            extend: {
+                colors: tailwindColors(userConfig.colors),
+                fontFamily: tailwindVariables('font', userConfig.fontFamily),
+                fontWeight: tailwindVariables('font', userConfig.fontWeight),
+                zIndex: tailwindVariables('z', userConfig.zIndex, {
+                    0: 0,
+                    auto: 'auto'
+                }),
+                spacing: tailwindVariables('spacing', userConfig.spacing),
+                borderRadius: tailwindVariables('rounded', userConfig.borderRadius, {
+                    DEFAULT: 'var(--rounded)'
+                }),
+                screens: userConfig.screens
+            },
+        }
+    })
+};
+
+module.exports.createPlugin = createPlugin;
+module.exports = createPlugin;
+module.exports.defaultConfig = defaultConfig;
+module.exports.getTailwindColors = getTailwindColors;
+module.exports.hexToRgb = hexToRgb;
+module.exports.tailwindAnimations = tailwindAnimations;
+module.exports.tailwindColors = tailwindColors;
+module.exports.tailwindColorsAccent = tailwindColorsAccent;
+module.exports.tailwindColorsCurrent = tailwindColorsCurrent;
+module.exports.tailwindVariables = tailwindVariables;

package/utils/tailwind.js

@@ -0,0 +1,164 @@
+import plugin from 'tailwindcss/plugin'
+import twColors from "tailwindcss/colors"
+import lodash from 'lodash'
+
+export const defaultConfig = {
+    colors: [
+        'background', 'default', 'light', 'dark', 'primary', 'secondary',
+        'warning', 'error', 'info', 'success', 'accent', `current`
+    ],
+    fontFamily: ['primary', 'secondary'],
+    fontWeight: ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'],
+    zIndex: [10, 20, 30, 40, 50, 60],
+    spacing: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'section'],
+    borderRadius: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', 'full'],
+    animations: ['fade-in', 'fade-out'],
+    screens: {
+        'xs': '22.5em',
+        'sm': '26em',
+        'md': '48em',
+        'lg': '60em',
+        'xl': '76em',
+        '2xl': '82em',
+        '3xl': '88em',
+        '4xl': '100em',
+        'xxl': '126em',
+        '2xxl': '158em'
+    }
+}
+
+export const hexToRgb = hex => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,(m, r, g, b) => '#' + r + r + g + g + b + b)
+    .substring(1).match(/.{2}/g)
+    .map(x => parseInt(x, 16))
+
+export const getTailwindColors = (twColors) => {
+    const accentColors = []
+
+    Object.keys(twColors).forEach(color => {
+        if (color.match(/(lightBlue|warmGray|trueGray|coolGray|blueGray)/)) {
+            return
+        }
+
+        if (typeof twColors[color] === "object") {
+            Object.keys(twColors[color]).forEach(variant => {
+                accentColors.push([`${color.replace(/[A-Z]/g, m => "-" + m.toLowerCase())}-${variant}`, twColors[color][variant]])
+            })
+        } else {
+            accentColors.push([color, twColors[color]])
+        }
+    })
+
+    return accentColors
+}
+
+export const tailwindColors = (colors = []) => {
+    colors.forEach(name => {
+        colors[name] = ({ opacityValue }) => {
+            if (opacityValue === undefined) {
+                return `rgb(var(--color-${name}))`
+            }
+            return `rgb(var(--color-${name}) / ${opacityValue})`
+        }
+    })
+
+    return colors
+}
+
+export const tailwindColorsAccent = (colors = []) => {
+    const result = {};
+
+    colors.forEach(color => {
+        if (Array.isArray(color)) {
+            const rgb = hexToRgb(color[1])
+
+            result[`.accent-${color[0]}`] = {
+                '--color-accent': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
+                'accent-color': 'rgb(var(--color-accent))'
+            }
+        } else {
+            result[`.accent-${color}`] = {
+                '--color-accent': `var(--color-${color})`,
+                'accent-color': 'rgb(var(--color-accent))'
+            }
+        }
+    })
+
+    return result
+};
+
+export const tailwindColorsCurrent = (colors = []) => {
+    const result = {};
+
+    colors.forEach(color => {
+        if (Array.isArray(color)) {
+            const rgb = hexToRgb(color[1])
+
+            result[`.text-${color[0]}`] = {
+                '--color-current': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
+                'color': 'rgb(var(--color-current))'
+            }
+        } else {
+            result[`.text-${color}`] = {
+                '--color-current': `var(--color-${color})`,
+                'color': 'rgb(var(--color-current))'
+            }
+        }
+    })
+
+    return result
+};
+
+export const tailwindVariables = (type, variables = [], values = {}) => {
+    variables.forEach(name => {
+        values[name] = `var(--${type}-${name})`
+    })
+
+    return values
+}
+
+export const tailwindAnimations = (values) => {
+    const result = {}
+
+    values.forEach(value => {
+        result[`.animation-${value}`] = {
+            'animation-name': value
+        }
+    })
+
+    return result
+}
+
+export const createPlugin = (userConfig = {}) => {
+    userConfig = lodash.merge(defaultConfig, userConfig)
+
+    return plugin(({addUtilities}) => {
+        addUtilities(Object.assign(tailwindColorsAccent(getTailwindColors(twColors)), tailwindColorsAccent(userConfig.colors)))
+        addUtilities(Object.assign(tailwindColorsCurrent(getTailwindColors(twColors)), tailwindColorsCurrent(userConfig.colors)))
+        addUtilities(tailwindAnimations(userConfig.animations))
+    }, {
+        corePlugins: {
+            preflight: false,
+            container: false,
+            accentColor: false,
+            textColor: false
+        },
+        theme: {
+            extend: {
+                colors: tailwindColors(userConfig.colors),
+                fontFamily: tailwindVariables('font', userConfig.fontFamily),
+                fontWeight: tailwindVariables('font', userConfig.fontWeight),
+                zIndex: tailwindVariables('z', userConfig.zIndex, {
+                    0: 0,
+                    auto: 'auto'
+                }),
+                spacing: tailwindVariables('spacing', userConfig.spacing),
+                borderRadius: tailwindVariables('rounded', userConfig.borderRadius, {
+                    DEFAULT: 'var(--rounded)'
+                }),
+                screens: userConfig.screens
+            },
+        }
+    })
+}
+
+export default createPlugin

package/utils/helpers.cjs

@@ -1,67 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const tailwindColors = (colors = []) => {
-    colors.forEach(name => {
-        colors[name] = ({ opacityValue }) => {
-            if (opacityValue === undefined) {
-                return `rgb(var(--color-${name}))`
-            }
-            return `rgb(var(--color-${name}) / ${opacityValue})`
-        };
-    });
-
-    return colors
-};
-
-const tailwindColorsAccent = (colors = []) => {
-    const result = {};
-
-    colors.forEach(color => {
-        result[`.accent-${color}`] = {
-            '--color-accent': `var(--color-${color})`,
-            'accent-color': 'rgb(var(--color-accent))'
-        };
-    });
-
-    return result
-};
-
-const tailwindColorsCurrent = (colors = []) => {
-    const result = {};
-
-    colors.forEach(color => {
-        result[`.text-${color}`] = {
-            '--color-current': `var(--color-${color})`
-        };
-    });
-
-    return result
-};
-
-const tailwindVariables = (type, variables = [], values = {}) => {
-    variables.forEach(name => {
-        values[name] = `var(--${type}-${name})`;
-    });
-
-    return values
-};
-
-const tailwindAnimations = (values) => {
-    const result = {};
-
-    values.forEach(value => {
-        result[`.animation-${value}`] = {
-            'animation-name': value
-        };
-    });
-
-    return result
-};
-
-exports.tailwindAnimations = tailwindAnimations;
-exports.tailwindColors = tailwindColors;
-exports.tailwindColorsAccent = tailwindColorsAccent;
-exports.tailwindColorsCurrent = tailwindColorsCurrent;
-exports.tailwindVariables = tailwindVariables;

package/utils/helpers.js

@@ -1,59 +0,0 @@
-const tailwindColors = (colors = []) => {
-    colors.forEach(name => {
-        colors[name] = ({ opacityValue }) => {
-            if (opacityValue === undefined) {
-                return `rgb(var(--color-${name}))`
-            }
-            return `rgb(var(--color-${name}) / ${opacityValue})`
-        }
-    })
-
-    return colors
-}
-
-const tailwindColorsAccent = (colors = []) => {
-    const result = {}
-
-    colors.forEach(color => {
-        result[`.accent-${color}`] = {
-            '--color-accent': `var(--color-${color})`,
-            'accent-color': 'rgb(var(--color-accent))'
-        }
-    })
-
-    return result
-}
-
-const tailwindColorsCurrent = (colors = []) => {
-    const result = {}
-
-    colors.forEach(color => {
-        result[`.text-${color}`] = {
-            '--color-current': `var(--color-${color})`
-        }
-    })
-
-    return result
-}
-
-const tailwindVariables = (type, variables = [], values = {}) => {
-    variables.forEach(name => {
-        values[name] = `var(--${type}-${name})`
-    })
-
-    return values
-}
-
-const tailwindAnimations = (values) => {
-    const result = {}
-
-    values.forEach(value => {
-        result[`.animation-${value}`] = {
-            'animation-name': value
-        }
-    })
-
-    return result
-}
-
-export { tailwindColors, tailwindVariables, tailwindColorsAccent, tailwindColorsCurrent, tailwindAnimations }