winduum 0.2.0-beta.9 → 0.2.2-next.1

package/src/ui/btn/gradient-bordered-rgb.css

@@ -1,5 +1,5 @@
 :is(.ui-btn.gradient-bordered) {
-  --color-current-rgb: var(--color-base-rgb);
+  --color-body-current-rgb: var(--color-body-current-rgb);
 
   &::before {
     background-color: rgb(var(--color-body-rgb) / calc(100% - var(--ui-btn-bg-opacity)));

package/src/ui/btn/gradient-bordered.css

@@ -6,7 +6,7 @@
   --ui-btn-active-bg-opacity: 20%;
   --ui-btn-focus-outline-offset: 0;
   --ui-btn-bg-opacity: 0%;
-  --color-current: var(--color-base);
+  --color-body-current: var(--color-main);
 
   &::before {
     content: "";

package/src/ui/btn/index.css

@@ -11,4 +11,3 @@
 @import "raised.css";
 @import "square.css";
 @import "circle.css";
-@import "group.css";

package/src/ui/btn/loading.css

@@ -14,7 +14,7 @@
     width: var(--ui-btn-loading-width);
     height: var(--ui-btn-loading-width);
     content: "";
-    border: var(--ui-btn-loading-border-width) solid var(--color-current);
+    border: var(--ui-btn-loading-border-width) solid var(--color-body-current);
     border-right-color: transparent;
     border-radius: 50%;
     animation: spin 0.45s infinite linear;

package/src/ui/btn/raised.css

@@ -2,7 +2,7 @@
   --ui-btn-border-width: 2px;
   --ui-btn-border-opacity: calc(var(--tw-border-opacity, 0.85) * 100%);
 
-  border: var(--ui-btn-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-btn-border-opacity), var(--color-current));
+  border: var(--ui-btn-border-width) solid color-mix(in sRGB, var(--color-accent) var(--ui-btn-border-opacity), var(--color-body-current));
   padding-left: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
   padding-right: calc(var(--ui-btn-px) - var(--ui-btn-border-width));
 }

package/src/ui/check-rgb.css

@@ -1,6 +1,6 @@
 .ui-check {
   --ui-check-bg: var(--color-body-rgb);
-  --ui-check-border-color: var(--color-current-rgb);
+  --ui-check-border-color: var(--color-body-current-rgb);
   --ui-check-checked-bg: var(--color-accent-rgb);
 
   & :where(input) {
@@ -14,7 +14,7 @@
     }
 
     &:disabled {
-      --ui-check-bg: var(--color-current-rgb);
+      --ui-check-bg: var(--color-body-current-rgb);
     }
 
     &:checked {
@@ -23,7 +23,6 @@
   }
 
   &.invalid, .validated & :where(input):invalid {
-    --color-current-rgb: var(--color-error-rgb);
     --ui-check-bg: var(--color-error-rgb);
     --ui-check-border-color: var(--color-error-rgb);
     --ui-check-checked-bg: var(--color-error-rgb);

package/src/ui/check.css

@@ -2,10 +2,10 @@
   --ui-check-width: 1.375rem;
   --ui-check-font-size: 0.875rem;
   --ui-check-gap: 0.625rem;
-  --ui-check-bg: var(--color-body);
+  --ui-check-bg: transparent;
   --ui-check-bg-mix: transparent;
   --ui-check-bg-opacity: calc(var(--tw-bg-opacity, 0.1) * 100%);
-  --ui-check-border-color: var(--color-current);
+  --ui-check-border-color: var(--color-body-current);
   --ui-check-border-mix: transparent;
   --ui-check-border-opacity: calc(var(--tw-border-opacity, 0.2) * 100%);
   --ui-check-border-width: 1px;
@@ -102,7 +102,7 @@
 
     &:disabled {
       --ui-check-bg-opacity: 15%;
-      --ui-check-bg: var(--color-current);
+      --ui-check-bg: var(--color-body-current);
 
       cursor: not-allowed;
       opacity: var(--ui-check-disabled-opacity);
@@ -121,7 +121,6 @@
   }
 
   &.invalid, .validated & :where(input):invalid {
-    --color-current: var(--color-error);
     --ui-check-bg: var(--color-error);
     --ui-check-border-color: var(--color-error);
     --ui-check-checked-bg: var(--color-error);

package/src/ui/control/default-rgb.css

@@ -1,5 +1,5 @@
 .ui-control {
-  --ui-control-border-color: var(--color-current-rgb);
+  --ui-control-border-color: var(--color-body-current-rgb);
 
   & :where(input, textarea, select) {
     border: var(--ui-control-border-width) solid rgb(var(--ui-control-border-color) / var(--ui-control-border-opacity));
@@ -11,7 +11,7 @@
     }
 
     &:disabled {
-      background-color: rgb(var(--color-base-rgb) / var(--ui-control-disabled-opacity));
+      background-color: rgb(var(--color-main-rgb) / var(--ui-control-disabled-opacity));
     }
   }
 

package/src/ui/control/default.css

@@ -7,14 +7,14 @@
   --ui-control-px: 0.875rem;
   --ui-control-pl: var(--ui-control-px);
   --ui-control-pr: var(--ui-control-px);
-  --ui-control-bg: var(--color-body);
+  --ui-control-bg: transparent;
   --ui-control-color: currentColor;
   --ui-control-placeholder-color: currentColor;
   --ui-control-placeholder-opacity: 0.5;
   --ui-control-font-size: 0.875rem;
   --ui-control-font-weight: var(--font-medium);
   --ui-control-border-width: 1px;
-  --ui-control-border-color: var(--color-current);
+  --ui-control-border-color: var(--color-body-current);
   --ui-control-border-mix: transparent;
   --ui-control-border-opacity: 15%;
   --ui-control-border-radius: var(--rounded);
@@ -59,7 +59,7 @@
 
     &:disabled {
       cursor: not-allowed;
-      background-color: color-mix(in sRGB, var(--color-base) var(--ui-control-disabled-opacity), var(--ui-control-bg));
+      background-color: color-mix(in sRGB, var(--color-body-current) var(--ui-control-disabled-opacity), var(--ui-control-bg));
     }
 
     &:required ~ label {

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

@@ -1,4 +1,6 @@
 .ui-control:where(.floating) {
+  --ui-control-placeholder-color: transparent;
+
   & :where(input, textarea, select) {
     &:is(:focus, :not(:placeholder-shown)) ~ label {
       transform: var(--ui-control-floating-label-focus-transform);

package/src/ui/control/floating.css

@@ -4,7 +4,6 @@
   --ui-control-floating-label-focus-transform: translateY(-0.6875rem) scale(0.8);
   --ui-control-floating-label-focus-opacity: 50%;
   --ui-control-floating-label-transition-duration: 0.4s;
-  --ui-control-placeholder-color: transparent;
 
   & :where(label) {
     grid-area: input;

package/src/ui/control/index.css

@@ -3,4 +3,3 @@
 @import "icon.css";
 @import "floating.css";
 @import "floating-focus.css";
-@import "group.css";

package/src/ui/{control/group.css → group.css}

@@ -1,12 +1,19 @@
-.ui-control-group {
+.ui-group {
   display: flex;
   flex-wrap: wrap;
 
-  & :where(.ui-btn) {
-    --ui-btn-border-width: 1px;
-    --ui-btn-height: 3rem;
-    --ui-btn-outline-offset: 0;
-    --ui-btn-border-opacity: 15%;
+  &:has(.ui-control) {
+    :where(.ui-btn) {
+      --ui-btn-border-width: 1px;
+      --ui-btn-border-opacity: 15%;
+      --ui-btn-height: auto;
+
+      min-width: 3rem;
+    }
+  }
+
+  :where(.ui-btn) {
+    --ui-btn-focus-outline-offset: 0;
   }
 
   & > * {
@@ -14,7 +21,7 @@
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
 
-      &, :where(input, select) {
+      &, & :where(input, select) {
         border-left: 0;
       }
     }

package/src/ui/image.css

@@ -6,7 +6,7 @@
   background-color: var(--ui-image-bg);
   border-radius: inherit;
 
-  & > * {
+  & > *:not(source) {
     display: block;
     width: 100%;
     height: 100%;

package/src/ui/index.css

@@ -2,6 +2,7 @@
 @import "btn/index.css";
 @import "check.css";
 @import "control.css";
+@import "group.css";
 @import "heading.css";
 @import "image.css";
 @import "info.css";

package/src/ui/link/default.css

@@ -1,11 +1,10 @@
 .ui-link {
-  --color-accent: var(--color-current);
   --ui-link-font-size: 0.875rem;
   --ui-link-font-weight: var(--font-medium);
   --ui-link-letter-spacing: 0;
   --ui-link-hover-color: var(--color-accent);
   --ui-link-hover-opacity: 0.75;
-  --ui-link-active-opacity: 0.75;
+  --ui-link-active-opacity: 1;
   --ui-link-gap: 0.5rem;
 
   font-size: var(--ui-link-font-size);
@@ -27,6 +26,7 @@
 
     &:focus-visible {
       color: var(--ui-link-hover-color);
+      opacity: var(--ui-link-hover-opacity);
     }
 
     &:active {

package/src/ui/link/underlined.css

@@ -1,5 +1,6 @@
 .ui-link:where([class*="underlined"]) {
   --ui-link-hover-opacity: 1;
+  --ui-link-active-opacity: 0.75;
   --ui-link-underline-color: currentColor;
   --ui-link-underline-width: 1px;
   --ui-link-underline-opacity: 0;
@@ -10,7 +11,7 @@
     --ui-link-underline-transform: none;
     --ui-link-underline-color: var(--color-accent);
     --ui-link-hover-opacity: 0.75;
-    --ui-link-active-opacity: 0.75;
+    --ui-link-active-opacity: 1;
   }
 
   &::after, & span::after {

package/src/ui/notice.css

@@ -1,5 +1,4 @@
 .ui-notice {
-  --color-current: var(--color-accent);
   --ui-notice-bg: var(--color-accent);
   --ui-notice-py: 1.25rem;
   --ui-notice-px: 1.5rem;
@@ -19,7 +18,7 @@
   background-color: color-mix(in sRGB, var(--ui-notice-bg) 10%, transparent);
   outline: var(--ui-notice-outline-width) solid color-mix(in sRGB, var(--ui-notice-bg) var(--ui-notice-outline-opacity), transparent);
   outline-offset: var(--ui-notice-outline-offset);
-  color: var(--color-current);
+  color: var(--color-accent);
   gap: var(--ui-notice-gap);
 
   & :where(hr) {

package/src/ui/switch-rgb.css

@@ -5,7 +5,7 @@
     }
 
     &:checked {
-      --color-current-rgb: var(--color-accent-rgb);
+      --color-body-current-rgb: var(--color-accent-rgb);
     }
   }
 }

package/src/ui/switch.css

@@ -65,12 +65,12 @@
     }
 
     &:focus {
-      outline-color: color-mix(in sRGB, var(--color-current) var(--ui-switch-outline-opacity), transparent);
+      outline-color: color-mix(in sRGB, var(--color-body-current) var(--ui-switch-outline-opacity), transparent);
       outline-offset: var(--ui-switch-outline-offset);
     }
 
     &:checked {
-      --color-current: var(--color-accent);
+      --color-body-current: var(--color-accent);
       --ui-switch-bg: var(--color-accent);
 
       &::before {

package/src/ui/text-rgb.css

@@ -1,12 +1,12 @@
 .ui-text {
   & :where(table) {
     & :where(thead) {
-      border-bottom: 1px solid rgb(var(--color-current-rgb) / 7.5%);
+      border-bottom: 1px solid rgb(var(--color-body-current-rgb) / 7.5%);
     }
 
     & :where(tbody tr) {
       &:nth-of-type(even) {
-        background-color: rgb(var(--color-current-rgb) / 5%);
+        background-color: rgb(var(--color-body-current-rgb) / 5%);
       }
     }
   }

package/src/ui/text.css

@@ -3,8 +3,7 @@
   --ui-text-size-line: 0.75rem;
   --ui-text-weight: var(--font-normal);
   --ui-text-weight-bold: var(--font-semibold);
-  --ui-text-content-my: 1.5rem;
-  --ui-text-content-my-sm: 1rem;
+  --ui-text-content-my: 1rem;
   --ui-text-content-my-lg: 2rem;
 
   font-weight: var(--ui-text-weight);
@@ -13,6 +12,7 @@
 
   &:where(.lg) {
     --ui-text-size: 1.125rem;
+    --ui-text-size-line: 1rem;
   }
 
   & :where(a) {
@@ -59,7 +59,7 @@
     line-height: inherit;
 
     &:not(:only-child) {
-      margin: var(--ui-text-content-my-sm) 0;
+      margin: var(--ui-text-content-my) 0;
     }
 
     &:last-child {
@@ -67,7 +67,7 @@
     }
 
     &:empty {
-      line-height: var(--ui-text-content-my-sm);
+      line-height: var(--ui-text-content-my);
       margin: 0;
     }
 
@@ -87,7 +87,7 @@
     font-family: var(--font-secondary);
     font-size: var(--ui-text-heading-size, 1rem);
     line-height: calc(var(--ui-text-heading-size) + 0.5rem);
-    margin: var(--ui-text-content-my) 0 var(--ui-text-content-my-sm);
+    margin: var(--ui-text-content-my-lg) 0 var(--ui-text-content-my);
 
     &:first-child {
       margin-top: 0;
@@ -117,12 +117,12 @@
 
     & :where(thead) {
       font-weight: var(--ui-text-weight-bold);
-      border-bottom: 1px solid color-mix(in sRGB, var(--color-current) 7.5%, transparent);
+      border-bottom: 1px solid color-mix(in sRGB, var(--color-body-current) 7.5%, transparent);
     }
 
     & :where(tbody tr) {
       &:nth-of-type(even) {
-        background-color: color-mix(in sRGB, var(--color-current) 5%, transparent);
+        background-color: color-mix(in sRGB, var(--color-body-current) 5%, transparent);
       }
     }
   }
@@ -145,7 +145,7 @@
 
   & :where(code) {
     margin: 0 0.25rem;
-    border-radius: var(--rounded-xs);
+    border-radius: var(--rounded-sm);
     padding: 0.25rem 0.375rem;
     font-size: 0.85em;
     color: var(--color-accent);

package/tailwind.config.cjs

@@ -6,5 +6,5 @@ module.exports = {
   ],
   plugins: [
     require('./utils/tailwind.cjs')()
-  ],
+  ]
 }

package/utils/tailwind.cjs

@@ -3,21 +3,57 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 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 twColors = require('tailwindcss/colors');
 var lodash = require('lodash');
 
+function withAlphaVariable ({ color: color$1, property, variable }) {
+    const properties = [].concat(property);
+    if (typeof color$1 === 'function') {
+        return {
+            ...Object.fromEntries(
+                properties.map((p) => {
+                    return [p, color$1({ opacityVariable: variable, opacityValue: `var(${variable}, 1)` })]
+                })
+            )
+        }
+    }
+
+    const parsed = color.parseColor(color$1);
+
+    if (parsed === null) {
+        return Object.fromEntries(properties.map((p) => [p, color$1]))
+    }
+
+    if (parsed.alpha !== undefined) {
+        // Has an alpha value, return color as-is
+        return Object.fromEntries(properties.map((p) => [p, color$1]))
+    }
+
+    return {
+        ...Object.fromEntries(
+            properties.map((p) => {
+                return [p, color.formatColor({ ...parsed, alpha: `var(${variable}, 1)` })]
+            })
+        )
+    }
+}
+
 const defaultConfig = {
     colors: [
-        'light', 'dark', 'primary',
-        'warning', 'error', 'info', 'success', 'accent', 'current',
-        'base', 'base-primary', 'base-secondary', 'base-tertiary',
+        'primary', 'accent',
+        'warning', 'error', 'info', 'success', 'light', 'dark',
+        'main', 'main-primary', 'main-secondary', 'main-tertiary',
         'body', 'body-primary', 'body-secondary', 'body-tertiary'
     ],
     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'],
+    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'],
     screens: {
         xs: '22.5em',
@@ -30,6 +66,9 @@ const defaultConfig = {
         '4xl': '100em',
         xxl: '126em',
         '2xxl': '158em'
+    },
+    settings: {
+        rgbFallback: true
     }
 };
 
@@ -59,12 +98,11 @@ const getTailwindColors = (twColors) => {
 
 const tailwindColors = (colors = []) => {
     colors.forEach(name => {
-        colors[name] = ({ opacityValue }) => {
-            if (opacityValue === undefined) {
-                return `rgb(var(--color-${name}-rgb))`
-            }
-            return `rgb(var(--color-${name}-rgb) / ${opacityValue})`
-        };
+        if (defaultConfig.settings.rgbFallback) {
+            colors[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`;
+        }
+
+        colors[name] = `color-mix(in sRGB, var(--color-${name}) calc(<alpha-value> * 100%), transparent)`;
     });
 
     return colors
@@ -77,46 +115,42 @@ const tailwindColorsAccent = (colors = []) => {
         if (Array.isArray(color)) {
             const rgb = hexToRgb(color[1]);
 
-            result[`.accent-${color[0]}`] = {
-                '--color-accent-rgb': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
+            result[`.accent-${color[0]}`] = Object.assign(defaultConfig.settings.rgbFallback
+                ? {
+                    '--color-accent-rgb': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
+                    '--color-accent-current-rgb': `var(--color-${color}-current-rgb, var(--color-light-rgb))`
+                }
+                : {}, {
                 '--color-accent': `rgb(${rgb[0]} ${rgb[1]} ${rgb[2]})`,
                 '--color-accent-current': `var(--color-${color}-current, var(--color-light))`
-            };
+            });
         } else {
-            result[`.accent-${color}`] = {
-                '--color-accent-rgb': `var(--color-${color}-rgb)`,
+            result[`.accent-${color}`] = Object.assign(defaultConfig.settings.rgbFallback
+                ? {
+                    '--color-accent-rgb': `var(--color-${color}-rgb)`,
+                    '--color-accent-current-rgb': `var(--color-${color}-current-rgb, var(--color-light-rgb))`
+                }
+                : {}, {
                 '--color-accent': `var(--color-${color})`,
                 '--color-accent-current': `var(--color-${color}-current, var(--color-light))`
-            };
+            });
         }
     });
 
     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]}`
-            };
-        } else {
-            result[`.text-${color}`] = {
-                '--color-current': `var(--color-${color})`
-            };
-        }
+const tailwindVariables = (type, variables = [], values = {}) => {
+    variables.forEach(name => {
+        values[name] = `var(--${type}-${name})`;
     });
 
-    return result
+    return values
 };
 
-const tailwindVariables = (type, variables = [], values = {}) => {
+const tailwindVariablesFont = (type, variables = [], values = {}) => {
     variables.forEach(name => {
-        values[name] = `var(--${type}-${name})`;
+        values[name] = [`var(--${type}-${name})`, `calc(var(--${type}-${name}) + 0.5rem)`];
     });
 
     return values
@@ -137,17 +171,48 @@ const tailwindAnimations = (values) => {
 const createPlugin = (userConfig = {}) => {
     userConfig = lodash.merge(defaultConfig, userConfig);
 
-    return plugin(({ addUtilities, theme, variants, e }) => {
+    return plugin(({ addUtilities, matchUtilities, theme, variants, e, corePlugins }) => {
         addUtilities(Object.assign(tailwindColorsAccent(getTailwindColors(twColors)), tailwindColorsAccent(userConfig.colors)));
-        addUtilities(Object.assign(tailwindColorsCurrent(getTailwindColors(twColors)), tailwindColorsCurrent(userConfig.colors)));
+        matchUtilities(
+            {
+                text: (value, extra) => {
+                    const matchValue = toColorValue(value).match(/var\((.*?)\)/);
+                    const fallbackRgb = matchValue && matchValue[0].includes('-rgb');
+
+                    const colorProperties = {};
+
+                    if (fallbackRgb) {
+                        colorProperties['--color-body-current-rgb'] = matchValue[0];
+                    }
+
+                    if (!corePlugins('textOpacity')) {
+                        return {
+                            ...colorProperties,
+                            '--color-body-current': toColorValue(value),
+                            color: toColorValue(value)
+                        }
+                    }
+
+                    return {
+                        ...colorProperties,
+                        '--color-body-current': toColorValue(value),
+                        ...withAlphaVariable({
+                            color: value,
+                            property: 'color',
+                            variable: '--tw-text-opacity'
+                        })
+                    }
+                }
+            },
+            { values: flattenColorPalette(theme('textColor')), type: ['color', 'any'] }
+        );
         addUtilities(tailwindAnimations(userConfig.animations));
         addUtilities([
             Object.entries(theme('spacing')).map(([key, value]) => {
                 return {
                     [`.${e(`sq-${key}`)}`]: {
-                        '--sq': `${value}`,
-                        width: 'var(--sq)',
-                        height: 'var(--sq)'
+                        width: value,
+                        height: value
                     }
                 }
             })
@@ -155,11 +220,13 @@ const createPlugin = (userConfig = {}) => {
     }, {
         corePlugins: {
             preflight: false,
-            container: false
+            container: false,
+            textColor: false
         },
         theme: {
             extend: {
                 colors: tailwindColors(userConfig.colors),
+                fontSize: tailwindVariablesFont('text', userConfig.fontSize),
                 fontFamily: tailwindVariables('font', userConfig.fontFamily),
                 fontWeight: tailwindVariables('font', userConfig.fontWeight),
                 zIndex: tailwindVariables('z', userConfig.zIndex, {
@@ -184,5 +251,5 @@ exports.hexToRgb = hexToRgb;
 exports.tailwindAnimations = tailwindAnimations;
 exports.tailwindColors = tailwindColors;
 exports.tailwindColorsAccent = tailwindColorsAccent;
-exports.tailwindColorsCurrent = tailwindColorsCurrent;
 exports.tailwindVariables = tailwindVariables;
+exports.tailwindVariablesFont = tailwindVariablesFont;