winduum 0.6.0 → 0.7.0-next.1

package/plugin/tailwind.js

@@ -1,11 +1,17 @@
 import plugin from 'tailwindcss/plugin'
-import withAlphaVariable from 'tailwindcss/src/util/withAlphaVariable'
 import flattenColorPalette from 'tailwindcss/src/util/flattenColorPalette'
-import toColorValue from 'tailwindcss/src/util/toColorValue'
-
+import FlexUtility from './utilities/flex.js'
+import DotUtility from './utilities/dot.js'
+import divideGap from './utilities/divide-gap.js'
+import { accentColor, textColor } from './utilities/color.js'
+import { tailwindAnimations, tailwindColors, tailwindPropertyUtilities, tailwindVariables, tailwindVariablesFont } from './utilities/common.js'
+
+/**
+ * @type {import('./tailwind').PluginOptions} options.
+ */
 export const defaultConfig = {
     colors: [
-        'primary', 'accent', 'current',
+        'primary', 'accent',
         'warning', 'error', 'info', 'success', 'light', 'dark',
         'main', 'main-primary', 'main-secondary', 'main-tertiary',
         'body', 'body-primary', 'body-secondary', 'body-tertiary',
@@ -17,7 +23,7 @@ export const defaultConfig = {
     fontFamily: ['primary', 'secondary'],
     fontWeight: ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'],
     ease: ['linear', 'in', 'out', 'in-out'],
-    zIndex: [10, 20, 30, 40, 50, 60],
+    zIndex: ['10', '20', '30', '40', '50', '60'],
     fontSize: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', '3xl', '4xl', '5xl', '6xl', '7xl', '7xl', '8xl', '9xl'],
     spacing: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'],
     borderRadius: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', 'full'],
@@ -41,202 +47,40 @@ export const defaultConfig = {
     }
 }
 
-export const tailwindColors = (colors = []) => {
-    colors.forEach(name => {
-        if (defaultConfig.settings.rgb) {
-            colors[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`
-        }
-
-        colors[name] = defaultConfig.settings.colorMix
-            ? `color-mix(in var(--space), var(--color-${name}) calc(<alpha-value> * 100%), transparent)`
-            : `rgb(var(--color-${name}) / <alpha-value>)`
-    })
-
-    return colors
-}
-
-export const tailwindVariables = (type, variables = [], values = {}) => {
-    variables.forEach(name => {
-        values[name] = `var(--${type}-${name})`
-    })
-
-    return values
-}
-
-export const tailwindVariablesFont = (type, variables = [], values = {}) => {
-    variables.forEach(name => {
-        values[name] = [`var(--${type}-${name})`, `calc(var(--${type}-${name}) + 0.5rem)`]
-    })
-
-    return values
-}
-
-export const tailwindPropertyUtilities = (type, variables = []) => {
-    const result = {}
-
-    variables.forEach(name => {
-        result[`.${type}-${name}`] = {
-            [type]: `var(--${type}-${name})`
-        }
-    })
-
-    return result
-}
-
-export const tailwindAnimations = (values) => {
-    const result = {}
-
-    values.forEach(value => {
-        result[`.animation-${value}`] = {
-            'animation-name': value
-        }
-    })
-
-    return result
-}
-
+/**
+ * @param {import('./tailwind').PluginOptions} userConfig
+ */
 export const createPlugin = (userConfig = {}) => {
+    const settings = {
+        ...defaultConfig.settings,
+        ...userConfig.settings
+    }
+
     userConfig = {
         ...defaultConfig,
-        ...userConfig
+        ...userConfig,
+        settings
     }
 
-    return plugin(({ addUtilities, addComponents, matchUtilities, theme, e, corePlugins }) => {
+    return plugin(({ addComponents, matchUtilities, theme, e, corePlugins }) => {
         matchUtilities(
             {
-                accent: (value) => {
-                    const matchValue = toColorValue(value).match(/var\((--color-.*?)\)/)
-                    const fallbackRgb = matchValue && matchValue[0].includes('-rgb')
-
-                    const colorProperties = {}
-
-                    if (fallbackRgb) {
-                        colorProperties['--color-accent-rgb'] = matchValue[0]
-                    }
-
-                    if ((matchValue && matchValue[0] === 'var(--color-accent)') || (matchValue && matchValue[0] === 'var(--color-accent-rgb)')) {
-                        return {
-                            'accent-color': matchValue && toColorValue(value).includes('calc(1 * 100%)') ? matchValue[0] : toColorValue(value)
-                        }
-                    }
-
-                    if (matchValue) {
-                        if (fallbackRgb) {
-                            colorProperties['--color-accent-foreground-rgb'] = `var(${matchValue[1].replace('-rgb', '-foreground-rgb')})`
-                        }
-
-                        if (toColorValue(value).includes('calc(1 * 100%)') || toColorValue(value).includes(' / 1')) {
-                            return {
-                                ...colorProperties,
-                                '--color-accent': fallbackRgb ? toColorValue(value) : matchValue[0],
-                                '--color-accent-foreground': fallbackRgb ? `rgb(var(${matchValue[1].replace('-rgb', '-foreground-rgb')}, var(--color-light-rgb)))` : `var(${matchValue[1]}-foreground, var(--color-light))`,
-                                'accent-color': defaultConfig.settings.colorMix ? 'var(--color-accent)' : 'rgb(var(--color-accent))'
-                            }
-                        } else {
-                            return {
-                                ...colorProperties,
-                                '--color-accent': toColorValue(value),
-                                '--color-accent-foreground': fallbackRgb ? `rgb(var(${matchValue[1].replace('-rgb', '-foreground-rgb')}, var(--color-light-rgb)))` : `var(${matchValue[1]}-foreground, var(--color-light))`,
-                                'accent-color': defaultConfig.settings.colorMix ? 'var(--color-accent)' : 'rgb(var(--color-accent))'
-                            }
-                        }
-                    }
-
-                    return {
-                        '--color-accent': toColorValue(value),
-                        'accent-color': 'var(--color-accent)'
-                    }
-                }
+                accent: value => accentColor({ value }, userConfig.settings)
             },
             { values: flattenColorPalette(theme('accentColor')), type: ['color', 'any'] }
         )
         matchUtilities(
             {
-                text: (value) => {
-                    const matchValue = toColorValue(value).match(/var\((.*?)\)/)
-                    const fallbackRgb = matchValue && matchValue[0].includes('-rgb')
-
-                    const colorProperties = {}
-
-                    if (fallbackRgb) {
-                        colorProperties['--color-current-rgb'] = matchValue[0]
-                    }
-
-                    if ((matchValue && matchValue[0] === 'var(--color-current)') || (matchValue && matchValue[0] === 'var(--color-current-rgb)')) {
-                        return {
-                            color: toColorValue(value)
-                        }
-                    }
-
-                    const color = {
-                        ...withAlphaVariable({
-                            color: value,
-                            property: 'color',
-                            variable: '--tw-text-opacity'
-                        })
-                    }
-
-                    if (!corePlugins('textOpacity')) {
-                        return {
-                            ...colorProperties,
-                            '--color-current': toColorValue(value),
-                            ...color
-                        }
-                    }
-
-                    return {
-                        ...colorProperties,
-                        ...withAlphaVariable({
-                            color: value,
-                            property: '--color-current',
-                            variable: '--tw-text-opacity'
-                        }),
-                        ...color
-                    }
-                }
+                text: value => textColor({ value, corePlugins }, userConfig.settings)
             },
             { values: flattenColorPalette(theme('textColor')), type: ['color', 'any'] }
         )
         addComponents(tailwindAnimations(userConfig.animations))
         addComponents(tailwindPropertyUtilities('mask', userConfig.mask))
-        addComponents([
-            Object.entries(theme('spacing')).map(([key, value]) => {
-                return {
-                    [`.${e(`divide-gap-x-${key}`)}`]: {
-                        '& > :where(*:not(:first-child))': {
-                            paddingLeft: value,
-                            marginLeft: value
-                        }
-                    },
-                    [`.${e(`divide-gap-y-${key}`)}`]: {
-                        '& > :where(*:not(:first-child))': {
-                            paddingTop: value,
-                            marginTop: value
-                        }
-                    }
-                }
-            })
-        ])
+        addComponents(divideGap({ theme, e }))
         addComponents({
-            '.flex-center': {
-                display: 'flex',
-                alignItems: 'center',
-                gap: 'var(--spacing-sm)'
-            },
-            '.flex-between': {
-                display: 'flex',
-                justifyContent: 'space-between',
-                gap: 'var(--spacing-sm)'
-            },
-            '.dot': {
-                '--tw-bg-opacity': '1',
-                display: 'inline-flex',
-                width: '0.625rem',
-                height: '0.625rem',
-                borderRadius: 'var(--rounded-full)',
-                backgroundColor: 'color-mix(in srgb, var(--color-accent) calc(var(--tw-bg-opacity) * 100%), transparent)',
-                flexShrink: '0'
-            }
+            ...FlexUtility,
+            ...DotUtility
         })
     }, {
         corePlugins: {
@@ -253,7 +97,7 @@ export const createPlugin = (userConfig = {}) => {
                     DEFAULT: 'var(--duration)'
                 },
                 transitionTimingFunction: tailwindVariables('ease', userConfig.ease),
-                colors: tailwindColors(userConfig.colors),
+                colors: tailwindColors(userConfig.colors, settings.colorMix, settings.rgb),
                 fontSize: tailwindVariablesFont('text', userConfig.fontSize),
                 fontFamily: tailwindVariables('font', userConfig.fontFamily),
                 fontWeight: tailwindVariables('font', userConfig.fontWeight),
@@ -271,4 +115,6 @@ export const createPlugin = (userConfig = {}) => {
     })
 }
 
+export { tailwindAnimations, tailwindColors, tailwindPropertyUtilities, tailwindVariables, tailwindVariablesFont }
+
 export default createPlugin

package/plugin/utilities/color.js

@@ -0,0 +1,69 @@
+import withAlphaVariable from 'tailwindcss/src/util/withAlphaVariable'
+import toColorValue from 'tailwindcss/src/util/toColorValue'
+
+export const accentColor = ({ value }, settings) => {
+    const matchValue = toColorValue(value).match(/var\((--color-.*?)\)/)
+    const colorProperties = {}
+
+    if (matchValue) {
+        if (settings.rgb) {
+            colorProperties['--color-accent-rgb'] =
+                `var(${matchValue[1].includes('-rgb') ? matchValue[1] : matchValue[1] + '-rgb'})`
+            colorProperties['--color-accent-foreground-rgb'] =
+                `var(${matchValue[1].includes('-rgb') ? matchValue[1].replace('-rgb', '-foreground-rgb') : matchValue[1] + '-foreground-rgb, var(--color-light-rgb)'})`
+        }
+
+        if (toColorValue(value).includes('calc(1 * 100%)') || toColorValue(value).includes(' / 1')) {
+            colorProperties['--color-accent'] = matchValue[0].replace('-rgb', '')
+            colorProperties['--color-accent-foreground'] = `var(${matchValue[1].replace('-rgb', '')}-foreground, var(--color-light))`
+
+            return {
+                ...colorProperties,
+                'accent-color': settings.colorMix ? 'var(--color-accent)' : 'rgb(var(--color-accent))'
+            }
+        } else {
+            if (matchValue[1].includes('-rgb')) {
+                colorProperties['--color-accent'] = toColorValue(value)
+            } else {
+                colorProperties['--color-accent'] = settings.rgb ? `rgb(var(--color-accent-rgb) / ${toColorValue(value).match(/calc\((.*?)\)/)[0]})` : toColorValue(value)
+            }
+
+            colorProperties['--color-accent-foreground'] = settings.rgb ? 'rgb(var(--color-accent-foreground-rgb))' : `var(${matchValue[1]}-foreground, var(--color-light))`
+
+            return {
+                ...colorProperties,
+                'accent-color': settings.colorMix ? 'var(--color-accent)' : 'rgb(var(--color-accent))'
+            }
+        }
+    }
+
+    return {
+        '--color-accent': toColorValue(value),
+        'accent-color': 'var(--color-accent)'
+    }
+}
+
+export const textColor = ({ value, corePlugins }, settings) => {
+    const matchValue = toColorValue(value).match(/var\((--color-.*?)\)/)
+    const withCurrentRgb = {}
+
+    if (matchValue && settings.rgb) {
+        withCurrentRgb['--tw-text-current-rgb'] = matchValue[1].includes('rgb') ? matchValue[0] : `var(${matchValue[1]}-rgb)`
+    }
+
+    if (!corePlugins('textOpacity')) {
+        return {
+            ...withCurrentRgb,
+            color: toColorValue(value)
+        }
+    }
+
+    return {
+        ...withCurrentRgb,
+        ...withAlphaVariable({
+            color: value,
+            property: 'color',
+            variable: '--tw-text-opacity'
+        })
+    }
+}

package/plugin/utilities/common.js

@@ -0,0 +1,80 @@
+/**
+ * @param {[]} colors
+ * @param {boolean} colorMix
+ * @param {boolean} rgb
+ * @returns {[]}
+ */
+export const tailwindColors = (colors = [], colorMix = true, rgb = false) => {
+    colors.forEach(name => {
+        if (rgb) {
+            colors[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`
+        }
+
+        colors[name] = colorMix
+            ? `color-mix(in var(--space), var(--color-${name}) calc(<alpha-value> * 100%), transparent)`
+            : `rgb(var(--color-${name}) / <alpha-value>)`
+    })
+
+    return colors
+}
+
+/**
+ * @param {string} type
+ * @param {string[]} variables
+ * @param {Object} values
+ * @returns {Object}
+ */
+export const tailwindVariables = (type, variables = [], values = {}) => {
+    variables.forEach(name => {
+        values[name] = `var(--${type}-${name})`
+    })
+
+    return values
+}
+
+/**
+ * @param {string} type
+ * @param {string[]} variables
+ * @param {Object} values
+ * @returns {Object}
+ */
+export const tailwindVariablesFont = (type, variables = [], values = {}) => {
+    variables.forEach(name => {
+        values[name] = [`var(--${type}-${name})`, `calc(var(--${type}-${name}) + 0.5rem)`]
+    })
+
+    return values
+}
+
+/**
+ * @param {string} type
+ * @param {string[]} variables
+ * @returns {Object}
+ */
+export const tailwindPropertyUtilities = (type, variables = []) => {
+    const result = {}
+
+    variables.forEach(name => {
+        result[`.${type}-${name}`] = {
+            [type]: `var(--${type}-${name})`
+        }
+    })
+
+    return result
+}
+
+/**
+ * @param {string[]} values
+ * @returns {Object}
+ */
+export const tailwindAnimations = (values) => {
+    const result = {}
+
+    values.forEach(value => {
+        result[`.animation-${value}`] = {
+            'animation-name': value
+        }
+    })
+
+    return result
+}

package/plugin/utilities/divide-gap.js

@@ -0,0 +1,20 @@
+export default function divideGap ({ theme, e }) {
+    return [
+        ...Object.entries(theme('spacing')).map(([key, value]) => {
+            return {
+                [`.${e(`divide-gap-x-${key}`)}`]: {
+                    '& > :where(*:not(:first-child))': {
+                        paddingLeft: value,
+                        marginLeft: value
+                    }
+                },
+                [`.${e(`divide-gap-y-${key}`)}`]: {
+                    '& > :where(*:not(:first-child))': {
+                        paddingTop: value,
+                        marginTop: value
+                    }
+                }
+            }
+        })
+    ]
+}

package/plugin/utilities/dot.js

@@ -0,0 +1,11 @@
+export default {
+    '.dot': {
+        '--tw-bg-opacity': '1',
+        display: 'inline-flex',
+        width: '0.625rem',
+        height: '0.625rem',
+        borderRadius: 'var(--rounded-full)',
+        backgroundColor: 'color-mix(in srgb, var(--color-accent) calc(var(--tw-bg-opacity) * 100%), transparent)',
+        flexShrink: '0'
+    }
+}

package/plugin/utilities/flex.js

@@ -0,0 +1,12 @@
+export default {
+    '.flex-center': {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 'var(--spacing-sm)'
+    },
+    '.flex-between': {
+        display: 'flex',
+        justifyContent: 'space-between',
+        gap: 'var(--spacing-sm)'
+    }
+}

package/src/base/defaults.css

@@ -33,7 +33,7 @@
 :where(hr) {
   --tw-border-opacity: 1;
 
-  border-top: 1px solid color-mix(in var(--space), currentColor calc(var(--tw-border-opacity) * 100%), transparent);
+  border-block-start: 1px solid color-mix(in var(--space), currentColor calc(var(--tw-border-opacity) * 100%), transparent);
   border-radius: var(--rounded);
   width: 100%;
 }

package/src/base/theme/default.css

@@ -1,8 +1,6 @@
 :root, :host {
   --space: sRGB;
   --scheme: light;
-  --color-current: var(--color-main);
-  --color-current-foreground: var(--color-main-foreground);
   --color-accent: var(--color-primary);
   --color-accent-foreground: var(--color-primary-foreground);
   --color-primary: #3b82f6; /* color.blue.500 */

package/src/components/compare.css

@@ -7,17 +7,17 @@
   border-radius: inherit;
 
   > *, &::before {
-    grid-area: 1/1;
     position: relative;
-    z-index: 1;
     pointer-events: none;
+    grid-area: 1/1;
+    z-index: 1;
   }
 
   &::before {
-    content: "";
-    inline-size: 1px;
     background-color: var(--color-accent);
     inset-inline-start: var(--c-compare-position);
+    inline-size: 1px;
+    content: "";
   }
 
   > :where(input) {
@@ -27,15 +27,14 @@
 
     &:is(:focus-visible, :active) {
       ~ .ui-btn {
-        --ui-btn-color: var(--color-current);
-        --ui-btn-bg-mix: black;
-        --ui-btn-bg-opacity: 80%;
+        --tw-bg-mix: var(--ui-btn-hover-bg-mix, var(--color-dark));
+        --tw-bg-opacity: 0.8;
       }
     }
 
     &:focus-visible ~ .ui-btn {
-      outline-color: color-mix(in var(--space), var(--color-accent) 50%, transparent);
-      outline-offset: 2px;
+      --ui-btn-outline-offset: 2px;
+      --tw-outline-opacity: 0.5;
     }
 
     &:active {
@@ -44,9 +43,9 @@
   }
 
   > :where(.ui-btn) {
-    margin-block: auto;
     inset-inline-start: var(--c-compare-position);
     margin-inline-start: calc(var(--ui-btn-width) / 2 * -1);
+    margin-block: auto;
   }
 
   > :where(.ui-image) {
@@ -59,8 +58,8 @@
       grid-area: 1/1;
 
       &:first-child {
-        position: relative;
         clip-path: var(--c-compare-clip-path);
+        position: relative;
       }
     }
   }

package/src/components/dialog/content.css

@@ -2,7 +2,7 @@
   background-color: var(--color-body-primary);
   border-radius: var(--rounded-3xl);
   padding: var(--c-dialog-py) var(--c-dialog-px);
-  width: min(100%, var(--c-dialog-width, 35rem));
+  inline-size: min(100%, var(--c-dialog-width, 35rem));
   margin: auto;
   animation: var(--duration) ease 0s backwards 1 fade-in-down;
 

package/src/components/dialog/default.css

@@ -1,16 +1,18 @@
 .c-dialog {
   --tw-bg-opacity: 0.8;
+  --tw-bg-space: var(--space);
 
+
+  z-index: var(--z-30);
+  padding: var(--c-dialog-py) var(--c-dialog-px);
+  background-color: color-mix(in var(--tw-bg-space), var(--c-dialog-bg, var(--color-dark)) var(--c-dialog-bg-opacity, calc(var(--tw-bg-opacity) * 100%)), transparent);
+  transition: var(--transition-background);
+  display: flex;
   position: fixed;
   inset: 0;
-  z-index: var(--z-30);
   overflow: auto;
-  -webkit-overflow-scrolling: touch;
-  background-color: var(--c-dialog-bg, color-mix(in var(--space), var(--color-dark) var(--c-dialog-bg-opacity, calc(var(--tw-bg-opacity) * 100%)), transparent));
   overscroll-behavior: contain;
-  display: flex;
-  padding: var(--c-dialog-py) var(--c-dialog-px);
-  transition: var(--transition-background);
+  -webkit-overflow-scrolling: touch;
 
   &, &::backdrop {
     visibility: hidden;
@@ -23,8 +25,8 @@
 }
 
 html:has(.c-dialog.visible) {
-  scrollbar-width: none;
   padding-inline-end: var(--c-dialog-scrollbar-width, 0);
+  scrollbar-width: none;
 
   &::-webkit-scrollbar {
     display: none;

package/src/components/field.css

@@ -1,7 +1,7 @@
 .c-field {
+  gap: var(--spacing-sm);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-sm);
 
   .validated &:has(:invalid) {
     & :where(.ui-info[hidden]) {

package/src/ui/badge/bordered.css

@@ -1,13 +1,14 @@
 .ui-badge {
   &:where(.bordered) {
     --tw-border-opacity: 1;
+    --tw-border-space: var(--space);
 
-    border: var(--ui-badge-border-width, 1px) solid color-mix(in var(--space), var(--color-accent) calc(var(--tw-border-opacity) * 100%), transparent);
+    border: var(--ui-badge-border-width, 1px) solid color-mix(in var(--tw-border-space), var(--color-accent) calc(var(--tw-border-opacity) * 100%), transparent);
     padding-inline: calc(var(--ui-badge-px) - var(--ui-badge-border-width, 1px));
   }
 
   &:is(.bordered) {
-    --color-current: var(--color-accent);
-    --ui-badge-bg-opacity: 0%;
+    --color-accent-foreground: var(--color-accent);
+    --tw-bg-opacity: 0;
   }
 }

package/src/ui/badge/default.css

@@ -1,13 +1,11 @@
 .ui-badge {
   --tw-bg-opacity: 1;
   --tw-text-opacity: 1;
-  --color-current: var(--color-accent-foreground);
-  --ui-badge-bg: color-mix(in var(--space), var(--color-accent) var(--ui-badge-bg-opacity), var(--ui-badge-bg-mix, transparent));
-  --ui-badge-bg-opacity: calc(var(--tw-bg-opacity) * 100%);
-  --ui-badge-color: color-mix(in var(--space), var(--color-current) var(--ui-badge-color-opacity), transparent);
-  --ui-badge-color-opacity: calc(var(--tw-text-opacity) * 100%);
+  --tw-bg-mix: transparent;
+  --tw-bg-space: var(--space);
+  --tw-text-space: var(--space);
 
-  width: var(--ui-badge-width, auto);
+  width: var(--ui-badge-width);
   height: var(--ui-badge-height);
   padding: var(--ui-badge-py) var(--ui-badge-px);
   border-radius: var(--ui-badge-border-radius, var(--rounded-lg));
@@ -15,15 +13,13 @@
   font-weight: var(--ui-badge-font-weight, inherit);
   font-size: var(--ui-badge-font-size, var(--text-xs));
   letter-spacing: var(--ui-badge-letter-spacing, inherit);
-  background-color: var(--ui-badge-bg);
-  color: var(--ui-badge-color);
+  background-color: color-mix(in var(--tw-bg-space), var(--color-accent) calc(var(--tw-bg-opacity) * 100%), var(--tw-bg-mix));
+  color: color-mix(in var(--tw-text-space), var(--color-accent-foreground) calc(var(--tw-text-opacity) * 100%), transparent);
   gap: var(--ui-badge-gap, var(--spacing-xs));
   display: inline-flex;
   text-align: center;
   align-items: center;
   justify-content: center;
-  white-space: nowrap;
+  line-height: 1;
   flex-shrink: 0;
-  position: relative;
-  transition: var(--transition-opacity);
 }

package/src/ui/badge/muted.css

@@ -1,4 +1,4 @@
 .ui-badge:is(.muted) {
-  --color-current: var(--color-accent);
-  --ui-badge-bg-opacity: 10%;
+  --color-accent-foreground: var(--color-accent);
+  --tw-bg-opacity: 10%;
 }