winduum 0.5.0-next.10 → 0.5.0-next.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "0.5.0-next.10",
+  "version": "0.5.0-next.11",
   "type": "module",
   "main": "utils/tailwind.cjs",
   "module": "utils/tailwind.js",

package/src/base/theme/dark.css

@@ -1,5 +1,5 @@
 :root.dark, :host.dark {
   --color-scheme: dark;
-  --color-main: rgb(255 255 255);
-  --color-body: rgb(25 26 27);
+  --color-main: var(--color-light);
+  --color-body: var(--color-dark);
 }

package/src/base/theme/default.css

@@ -4,24 +4,24 @@
   --color-current-fg: var(--color-main-fg);
   --color-accent: var(--color-primary);
   --color-accent-fg: var(--color-primary-fg);
-  --color-primary: rgb(3 138 255);
+  --color-primary: #3b82f6; /* color.blue.500 */
   --color-primary-fg: var(--color-light);
-  --color-main: rgb(17 19 2);
+  --color-main: #171717; /* color.neutral.900 */
   --color-main-fg: var(--color-body);
   --color-main-primary: var(--color-main);
   --color-main-secondary: color-mix(in sRGB, var(--color-main) 75%, var(--color-main-fg));
   --color-main-tertiary: color-mix(in sRGB, var(--color-main) 50%, var(--color-main-fg));
-  --color-body: rgb(255 255 255);
+  --color-body: #fff; /* color.white */
   --color-body-fg: var(--color-main);
   --color-body-primary: var(--color-body);
   --color-body-secondary: color-mix(in sRGB, var(--color-body) 95%, var(--color-body-fg));
   --color-body-tertiary: color-mix(in sRGB, var(--color-body) 90%, var(--color-body-fg));
-  --color-light: rgb(255 255 255);
+  --color-light: #fff; /* color.white */
   --color-light-fg: var(--color-dark);
-  --color-dark: rgb(17 19 21);
+  --color-dark: #171717; /* color.neutral.900 */
   --color-dark-fg: var(--color-light);
-  --color-success: rgb(33 154 67);
-  --color-error: rgb(254 50 75);
-  --color-warning: rgb(254 179 53);
-  --color-info: rgb(45 168 234);
+  --color-success: #16a34a; /* color.green.600 */
+  --color-error: #dc2626; /* color.red.600 */
+  --color-warning: #eab308; /* color.yellow.500 */
+  --color-info: #0ea5e9; /* color.sky.500 */
 }

package/src/ui/btn/default.css

@@ -12,7 +12,7 @@
   height: var(--ui-btn-height);
   padding: var(--ui-btn-py) var(--ui-btn-px);
   border-radius: var(--ui-btn-border-radius, var(--rounded));
-  font-size: var(--ui-btn-font-size, 0.875rem);
+  font-size: var(--ui-btn-font-size, var(--text-sm));
   font-weight: var(--ui-btn-font-weight, var(--font-medium));
   letter-spacing: var(--ui-btn-letter-spacing, 0);
   background-color: var(--ui-btn-bg);

package/src/ui/control/icon.css

@@ -1,40 +1,40 @@
 .ui-control {
   --ui-control-icon-size: 1.25rem;
   --ui-control-icon-gap: 0.375rem;
-  --ui-control-icon-count-s: 1;
-  --ui-control-icon-count-e: 1;
+  --ui-control-icon-s: calc(var(--ui-control-icon-count-s, 1) * (var(--ui-control-icon-size) + var(--ui-control-icon-gap)) - var(--ui-control-icon-gap));
+  --ui-control-icon-e: calc(var(--ui-control-icon-count-e, 1) * (var(--ui-control-icon-size) + var(--ui-control-icon-gap)) - var(--ui-control-icon-gap));
 
-  &:has(.icon-l) {
-    --ui-control-ps: calc(var(--ui-control-icon-count-s) * (var(--ui-control-icon-size) + var(--ui-control-icon-gap)) - var(--ui-control-icon-gap) + var(--ui-control-px));
+  &:has(.icon-s) {
+    --ui-control-ps: calc(var(--ui-control-icon-s) + var(--ui-control-px));
   }
 
-  &:has(.icon-r) {
-    --ui-control-pe: calc(var(--ui-control-icon-count-e) * (var(--ui-control-icon-size) + var(--ui-control-icon-gap)) - var(--ui-control-icon-gap) + var(--ui-control-px));
+  &:has(.icon-e) {
+    --ui-control-pe: calc(var(--ui-control-icon-e) + var(--ui-control-px));
   }
 
-  &:has(.icon-l > *:nth-child(2)) {
+  &:has(.icon-s > *:nth-child(2)) {
     --ui-control-icon-count-s: 2;
   }
 
-  &:has(.icon-r > *:nth-child(2)) {
+  &:has(.icon-e > *:nth-child(2)) {
     --ui-control-icon-count-e: 2;
   }
 
-  & :where(.icon-l) {
+  & :where(.icon-s) {
     margin-inline-end: auto;
   }
 
-  & :where(.icon-r) {
+  & :where(.icon-e) {
     margin-inline-start: auto;
   }
 
-  & :where(.icon-l, .icon-r) {
+  & :where(.icon-s, .icon-e) {
     display: flex;
     align-items: center;
     gap: var(--ui-control-icon-gap);
   }
 
-  &:has(textarea) :where(.icon-l, .icon-r) {
+  &:has(textarea) :where(.icon-s, .icon-e) {
     margin-block-start: var(--ui-control-py);
   }
 }

package/src/ui/control/select.css

@@ -3,11 +3,11 @@
   --ui-control-select-icon-me: -0.25rem;
   --ui-control-pe: calc(var(--ui-control-select-icon-size) + var(--ui-control-select-icon-me));
 
-  &:has(.icon-r) {
+  &:has(.icon-e) {
     --ui-control-icon-count-e: 2;
   }
 
-  & :where(.icon-r) {
+  & :where(.icon-e) {
     margin-inline-end: var(--ui-control-select-icon-size);
   }
 

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'],
     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,40 @@ 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'));
+        ]);
     }, {
         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 +299,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

@@ -208,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 {