winduum 0.5.0-next.8 → 0.5.0

package/src/ui/switch.css

@@ -1,24 +1,18 @@
 .ui-switch {
   --ui-switch-width: 3rem;
   --ui-switch-height: 1.5rem;
-  --ui-switch-font-size: 0.875rem;
-  --ui-switch-gap: 0.625rem;
-  --ui-switch-padding: 0.375rem;
-  --ui-switch-bg: var(--color-dark);
-  --ui-switch-radius: var(--rounded-full);
-  --ui-switch-outline-width: 3px;
-  --ui-switch-outline-offset: 0;
-  --ui-switch-outline-opacity: 20%;
+  --ui-check-icon-size: 1.125rem;
 
   :where(.dark) & {
     --ui-switch-bg: var(--color-body-tertiary);
   }
 
-  display: flex;
-  align-items: center;
-  gap: 0 var(--ui-switch-gap);
-  width: fit-content;
-  font-size: var(--ui-switch-font-size);
+  display: inline-flex;
+  gap: var(--ui-switch-gap, 0.75rem);
+  font-weight: var(--ui-switch-font-weight, var(--font-normal));
+  font-size: var(--ui-switch-font-size, var(--text-sm));
+  line-height: var(--ui-switch-line-height, calc(1em + var(--ui-switch-line-height-ratio, 0.25lh)));
+  letter-spacing: var(--ui-switch-letter-spacing, inherit);
   text-wrap: balance;
 
   & :where(label[for], input) {
@@ -31,34 +25,28 @@
   }
 
   & :where(input) {
+    display: flex;
     width: var(--ui-switch-width);
     height: var(--ui-switch-height);
-    display: block;
-    position: relative;
-    border-radius: var(--ui-switch-radius);
-    background-color: var(--ui-switch-bg);
-    transition:
-      var(--transition-background),
-      outline-color var(--duration),
-      outline-offset var(--duration);
-    appearance: none;
-    outline: var(--ui-switch-outline-width) solid transparent;
+    background-color: var(--ui-switch-bg, var(--color-dark));
+    border-radius: var(--ui-switch-radius, var(--rounded-full));
+    outline: var(--ui-switch-outline-width, 3px) solid transparent;
     outline-offset: 0;
-    color: inherit;
+    transition-property: var(--transition);
+    transition-timing-function: var(--ease-in-out);
+    transition-duration: var(--duration);
+    flex-shrink: 0;
+    position: relative;
+    padding: calc((var(--ui-switch-height) - var(--ui-check-icon-size)) / 2);
 
     &::before {
-      width: calc(var(--ui-switch-height) - var(--ui-switch-padding));
-      height: calc(var(--ui-switch-height) - var(--ui-switch-padding));
-      background-color: var(--color-light);
-      border-radius: var(--ui-switch-radius);
-      position: absolute;
-      left: var(--ui-switch-height);
-      top: 50%;
       content: "";
-      display: block;
-      margin-left: calc((var(--ui-switch-height) - var(--ui-switch-padding) + var(--ui-switch-padding) / 2) * -1);
-      transition: left var(--duration), var(--transition-background);
-      transform: translateY(-50%);
+      width: var(--ui-check-icon-size);
+      height: var(--ui-check-icon-size);
+      background-color: var(--color-light);
+      border-radius: inherit;
+      margin-block: auto;
+      transition: var(--transition-all);
     }
 
     &:where(:required) {
@@ -69,13 +57,13 @@
     }
 
     &:disabled {
-      opacity: 0.8;
-      pointer-events: none;
+      cursor: not-allowed;
+      opacity: var(--ui-switch-disabled-opacity, 0.5);
     }
 
     &:focus {
-      outline-color: color-mix(in sRGB, var(--color-current) var(--ui-switch-outline-opacity), transparent);
-      outline-offset: var(--ui-switch-outline-offset);
+      outline-color: color-mix(in sRGB, var(--color-current) var(--ui-switch-outline-opacity, 20%), transparent);
+      outline-offset: var(--ui-switch-outline-offset, 0);
     }
 
     &:checked {
@@ -83,8 +71,7 @@
       --ui-switch-bg: var(--color-accent);
 
       &::before {
-        background-color: var(--color-light);
-        left: 100%;
+        margin-left: calc(100% - var(--ui-check-icon-size));
       }
     }
   }

package/src/ui/title/default.css

@@ -2,7 +2,7 @@
   font-family: var(--ui-title-font-family, var(--font-secondary));
   font-weight: var(--ui-title-font-weight, var(--font-semibold));
   font-size: var(--ui-title-font-size, var(--text-sm));
-  line-height: var(--ui-title-line-height, calc(1em + var(--ui-title-line-height-ratio, 0.25lh)));
+  line-height: var(--ui-title-line-height, calc(1em + var(--ui-title-line-height-ratio, 0.15lh)));
   letter-spacing: var(--ui-title-letter-spacing, 0);
   text-wrap: balance;
 }

package/tailwind.config.js

@@ -1,4 +1,6 @@
 import winduum from './utils/tailwind.js'
+import containerQueries from '@tailwindcss/container-queries'
+import animate from 'tailwindcss-animate'
 
 export default {
     darkMode: 'class',
@@ -7,6 +9,8 @@ export default {
         './playground/**/*.{js,html,vue}'
     ],
     plugins: [
-        winduum()
+        winduum(),
+        containerQueries,
+        animate
     ]
 }

package/utils/tailwind.cjs

@@ -6,7 +6,6 @@ var plugin = require('tailwindcss/plugin');
 var flattenColorPalette = require('tailwindcss/src/util/flattenColorPalette');
 var toColorValue = require('tailwindcss/src/util/toColorValue');
 var color = require('tailwindcss/src/util/color');
-var lodash = require('lodash');
 
 function withAlphaVariable ({ color: color$1, property, variable }) {
     const properties = [].concat(property);
@@ -49,11 +48,13 @@ 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],
     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', 'section'],
+    spacing: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'],
     borderRadius: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', 'full'],
     animations: ['fade-in', 'fade-out', 'fade-in-down', 'fade-out-up', 'ripple', 'spin', 'move-indeterminate'],
+    mask: ['check', 'radio', 'angle-up', 'angle-down'],
     screens: {
         xs: '22.5em',
         sm: '26em',
@@ -67,7 +68,7 @@ const defaultConfig = {
         '2xxl': '158em'
     },
     settings: {
-        rgb: true,
+        rgb: false,
         colorMix: true
     }
 };
@@ -102,6 +103,18 @@ const tailwindVariablesFont = (type, variables = [], values = {}) => {
     return values
 };
 
+const tailwindPropertyUtilities = (type, variables = []) => {
+    const result = {};
+
+    variables.forEach(name => {
+        result[`.${type}-${name}`] = {
+            [type]: `var(--${type}-${name})`
+        };
+    });
+
+    return result
+};
+
 const tailwindAnimations = (values) => {
     const result = {};
 
@@ -114,8 +127,23 @@ const tailwindAnimations = (values) => {
     return result
 };
 
+const tailwindMask = (values) => {
+    const result = {};
+
+    values.forEach(value => {
+        result[`.mask-${value}`] = {
+            mask: value
+        };
+    });
+
+    return result
+};
+
 const createPlugin = (userConfig = {}) => {
-    userConfig = lodash.merge(defaultConfig, userConfig);
+    userConfig = {
+        ...defaultConfig,
+        userConfig
+    };
 
     return plugin(({ addUtilities, matchUtilities, theme, variants, e, corePlugins }) => {
         matchUtilities(
@@ -184,15 +212,13 @@ const createPlugin = (userConfig = {}) => {
                         }
                     }
 
-                    const color = matchValue
-                        ? { color: 'var(--color-current)' }
-                        : {
-                            ...withAlphaVariable({
-                                color: value,
-                                property: 'color',
-                                variable: '--tw-text-opacity'
-                            })
-                        };
+                    const color = {
+                        ...withAlphaVariable({
+                            color: value,
+                            property: 'color',
+                            variable: '--tw-text-opacity'
+                        })
+                    };
 
                     if (!corePlugins('textOpacity')) {
                         return {
@@ -216,28 +242,52 @@ const createPlugin = (userConfig = {}) => {
             { values: flattenColorPalette(theme('textColor')), type: ['color', 'any'] }
         );
         addUtilities(tailwindAnimations(userConfig.animations));
+        addUtilities(tailwindPropertyUtilities('mask', userConfig.mask));
         addUtilities([
             Object.entries(theme('spacing')).map(([key, value]) => {
                 return {
-                    [`.${e(`sq-${key}`)}`]: {
-                        width: value,
-                        height: value
+                    [`.${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
+                        }
                     }
                 }
             })
-        ], variants('sq'));
+        ]);
+        addUtilities({
+            '.flex-center': {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--spacing-sm)'
+            },
+            '.flex-between': {
+                display: 'flex',
+                justifyContent: 'between',
+                gap: 'var(--spacing-sm)'
+            }
+        });
     }, {
         corePlugins: {
             preflight: false,
-            container: false,
             textColor: false,
             accentColor: false
         },
         theme: {
             extend: {
+                transitionProperty: {
+                    DEFAULT: 'var(--transition)'
+                },
                 transitionDuration: {
-                    DEFAULT: 'var(--transition-duration)'
+                    DEFAULT: 'var(--duration)'
                 },
+                transitionTimingFunction: tailwindVariables('ease', userConfig.ease),
                 colors: tailwindColors(userConfig.colors),
                 fontSize: tailwindVariablesFont('text', userConfig.fontSize),
                 fontFamily: tailwindVariables('font', userConfig.fontFamily),
@@ -261,5 +311,7 @@ exports.default = createPlugin;
 exports.defaultConfig = defaultConfig;
 exports.tailwindAnimations = tailwindAnimations;
 exports.tailwindColors = tailwindColors;
+exports.tailwindMask = tailwindMask;
+exports.tailwindPropertyUtilities = tailwindPropertyUtilities;
 exports.tailwindVariables = tailwindVariables;
 exports.tailwindVariablesFont = tailwindVariablesFont;

package/utils/tailwind.js

@@ -2,7 +2,6 @@ import plugin from 'tailwindcss/plugin'
 import flattenColorPalette from 'tailwindcss/src/util/flattenColorPalette'
 import toColorValue from 'tailwindcss/src/util/toColorValue'
 import { parseColor, formatColor } from 'tailwindcss/src/util/color'
-import lodash from 'lodash'
 
 function withAlphaVariable ({ color, property, variable }) {
     const properties = [].concat(property)
@@ -48,9 +47,10 @@ export const defaultConfig = {
     ease: ['linear', 'in', 'out', 'in-out'],
     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', 'section'],
+    spacing: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'],
     borderRadius: ['xs', 'sm', 'base', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', 'full'],
     animations: ['fade-in', 'fade-out', 'fade-in-down', 'fade-out-up', 'ripple', 'spin', 'move-indeterminate'],
+    mask: ['check', 'radio', 'angle-up', 'angle-down'],
     screens: {
         xs: '22.5em',
         sm: '26em',
@@ -64,7 +64,7 @@ export const defaultConfig = {
         '2xxl': '158em'
     },
     settings: {
-        rgb: true,
+        rgb: false,
         colorMix: true
     }
 }
@@ -99,6 +99,18 @@ export const tailwindVariablesFont = (type, variables = [], values = {}) => {
     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 = {}
 
@@ -111,8 +123,23 @@ export const tailwindAnimations = (values) => {
     return result
 }
 
+export const tailwindMask = (values) => {
+    const result = {}
+
+    values.forEach(value => {
+        result[`.mask-${value}`] = {
+            mask: value
+        }
+    })
+
+    return result
+}
+
 export const createPlugin = (userConfig = {}) => {
-    userConfig = lodash.merge(defaultConfig, userConfig)
+    userConfig = {
+        ...defaultConfig,
+        userConfig
+    }
 
     return plugin(({ addUtilities, matchUtilities, theme, variants, e, corePlugins }) => {
         matchUtilities(
@@ -181,15 +208,13 @@ export const createPlugin = (userConfig = {}) => {
                         }
                     }
 
-                    const color = matchValue
-                        ? { color: 'var(--color-current)' }
-                        : {
-                            ...withAlphaVariable({
-                                color: value,
-                                property: 'color',
-                                variable: '--tw-text-opacity'
-                            })
-                        }
+                    const color = {
+                        ...withAlphaVariable({
+                            color: value,
+                            property: 'color',
+                            variable: '--tw-text-opacity'
+                        })
+                    }
 
                     if (!corePlugins('textOpacity')) {
                         return {
@@ -213,20 +238,40 @@ export const createPlugin = (userConfig = {}) => {
             { values: flattenColorPalette(theme('textColor')), type: ['color', 'any'] }
         )
         addUtilities(tailwindAnimations(userConfig.animations))
+        addUtilities(tailwindPropertyUtilities('mask', userConfig.mask))
         addUtilities([
             Object.entries(theme('spacing')).map(([key, value]) => {
                 return {
-                    [`.${e(`sq-${key}`)}`]: {
-                        width: value,
-                        height: value
+                    [`.${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
+                        }
                     }
                 }
             })
-        ], variants('sq'))
+        ])
+        addUtilities({
+            '.flex-center': {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 'var(--spacing-sm)'
+            },
+            '.flex-between': {
+                display: 'flex',
+                justifyContent: 'between',
+                gap: 'var(--spacing-sm)'
+            }
+        })
     }, {
         corePlugins: {
             preflight: false,
-            container: false,
             textColor: false,
             accentColor: false
         },

package/src/ui/control/floating-focus.css

@@ -1,12 +0,0 @@
-.ui-control:has(:not([type="color"]) ~ label) {
-  --ui-control-label-focus-transform: translateY(-0.6875rem) scale(0.8);
-  --ui-control-label-focus-opacity: 50%;
-  --ui-control-placeholder-color: transparent;
-
-  & :where(input, textarea, select) {
-    &:is(:focus, :not(:placeholder-shown)) ~ label {
-      transform: var(--ui-control-label-focus-transform);
-      opacity: var(--ui-control-label-focus-opacity);
-    }
-  }
-}