winduum 0.6.0 → 0.7.0-next.2

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/config/transition.css

@@ -1,5 +1,5 @@
 :root, :host {
-  --transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, outline-color, outline-offset;
+  --transition: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, outline-color, outline-offset, visibility;
   --transition-all: all var(--duration) var(--ease-in-out);
   --transition-color: color var(--duration) var(--ease-in-out);
   --transition-background: background var(--duration) var(--ease-in-out);

package/src/base/defaults.css

@@ -31,9 +31,9 @@
 }
 
 :where(hr) {
-  --tw-border-opacity: 1;
+  --tw-border-opacity: 0.15;
 
-  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/common.js

@@ -0,0 +1,11 @@
+export const nextRepaint = () => {
+    return new Promise(resolve => {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+                resolve()
+            })
+        })
+    })
+}
+
+export const animationsFinished = element => Promise.all(element.getAnimations().map(animation => animation.finished))

package/src/components/{compare.css → compare/default.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/compare/index.css

@@ -0,0 +1 @@
+@import "default.css";

package/src/components/{compare.js → compare/index.js}

@@ -1,6 +1,6 @@
 /**
- * @param {import("./compare").Position} event
- * @param {import("./compare").PositionOptions} options
+ * @param {import("./types/index").Position} event
+ * @param {import("./types/index").PositionOptions} options
  * @returns void
  */
 export const setPosition = ({ currentTarget }, options = {}) => {
@@ -14,7 +14,7 @@ export const setPosition = ({ currentTarget }, options = {}) => {
 }
 
 /**
- * @param {import("./compare").KeyboardStep} event
+ * @param {import("./types/index").KeyboardStep} event
  * @param {Number} step
  * @returns void
  */
@@ -25,10 +25,16 @@ export const setKeyboardStep = ({ key, currentTarget }, step = 10) => {
 }
 
 /**
- * @param {import("./compare").MouseStep} event
+ * @param {import("./types/index").MouseStep} event
  * @param {Number} step
  * @returns void
  */
 export const setMouseStep = ({ currentTarget }, step = 0.1) => {
     currentTarget.step = step
 }
+
+export default {
+    setPosition,
+    setKeyboardStep,
+    setMouseStep
+}

package/src/components/compare/readme.md

@@ -0,0 +1 @@
+# Compare

package/src/components/details/index.js

@@ -0,0 +1,57 @@
+/**
+ * @param {HTMLInputElement | HTMLElement} element
+ * @returns Promise<void>
+ */
+export const showDetails = async (element) => {
+    const details = element.closest('details')
+    const { down } = await import('slide-element')
+    const content = element.closest('summary').nextElementSibling
+
+    details._isHiding = false
+    details.open = true
+
+    await down(content, {
+        display: ''
+    })
+}
+
+/**
+ * @param {HTMLInputElement | HTMLElement} element
+ * @returns Promise<void>
+ */
+export const closeDetails = async (element) => {
+    const details = element.closest('details')
+    const { up } = await import('slide-element')
+    const content = element.closest('summary').nextElementSibling
+
+    details._isHiding = true
+
+    await up(content, {
+        display: ''
+    })
+
+    details._isHiding && (details.open = false)
+    details._isHiding = false
+}
+
+/**
+ * @param {HTMLInputElement | HTMLElement} element
+ * @returns Promise<void>
+ */
+export const toggleDetails = async (element) => {
+    const details = element.closest('details')
+
+    if (details._isHiding && !element.checked) return
+
+    if (element.checked ?? !details.open) {
+        await showDetails(element)
+    } else {
+        await closeDetails(element)
+    }
+}
+
+export default {
+    showDetails,
+    closeDetails,
+    toggleDetails
+}

package/src/components/details/readme.md

@@ -0,0 +1 @@
+# Details

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;