winduum 0.2.2 → 0.2.3-next.2

package/src/ui/control/default.css

@@ -7,7 +7,7 @@
   --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;
@@ -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-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/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/link/default.css

@@ -5,7 +5,7 @@
   --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 +27,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/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;
@@ -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,56 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var plugin = require('tailwindcss/plugin');
-var twColors = require('tailwindcss/colors');
+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);
+    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', 'current',
+        '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,101 +65,35 @@ const defaultConfig = {
         '4xl': '100em',
         xxl: '126em',
         '2xxl': '158em'
+    },
+    settings: {
+        rgb: true
     }
 };
 
-const hexToRgb = hex => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
-    .substring(1).match(/.{2}/g)
-    .map(x => parseInt(x, 16));
-
-const getTailwindColors = (twColors) => {
-    const accentColors = [];
-
-    Object.keys(twColors).forEach(color => {
-        if (color.match(/(lightBlue|warmGray|trueGray|coolGray|blueGray)/)) {
-            return
-        }
-
-        if (typeof twColors[color] === 'object') {
-            Object.keys(twColors[color]).forEach(variant => {
-                accentColors.push([`${color.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}-${variant}`, twColors[color][variant]]);
-            });
-        } else {
-            accentColors.push([color, twColors[color]]);
-        }
-    });
-
-    return accentColors
-};
-
 const tailwindColors = (colors = []) => {
     colors.forEach(name => {
-        colors[name + '-rgb'] = ({ opacityValue }) => {
-            if (opacityValue === undefined) {
-                return `rgb(var(--color-${name}-rgb))`
-            }
-            return `rgb(var(--color-${name}-rgb) / ${opacityValue})`
-        };
-
-        colors[name] = ({ opacityValue }) => {
-            if (opacityValue === undefined) {
-                return `var(--color-${name})`
-            }
+        if (defaultConfig.settings.rgb) {
+            colors[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`;
+        }
 
-            return `color-mix(in sRGB, var(--color-${name}) calc(${opacityValue} * 100%), transparent)`
-        };
+        colors[name] = `color-mix(in sRGB, var(--color-${name}) calc(<alpha-value> * 100%), transparent)`;
     });
 
     return colors
 };
 
-const tailwindColorsAccent = (colors = []) => {
-    const result = {};
-
-    colors.forEach(color => {
-        if (Array.isArray(color)) {
-            const rgb = hexToRgb(color[1]);
-
-            result[`.accent-${color[0]}`] = {
-                '--color-accent-rgb': `${rgb[0]} ${rgb[1]} ${rgb[2]}`,
-                '--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)`,
-                '--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
@@ -145,9 +114,104 @@ const tailwindAnimations = (values) => {
 const createPlugin = (userConfig = {}) => {
     userConfig = lodash.merge(defaultConfig, userConfig);
 
-    return plugin(({ addUtilities, theme, variants, e }) => {
-        addUtilities(Object.assign(tailwindColorsAccent(getTailwindColors(twColors)), tailwindColorsAccent(userConfig.colors)));
-        addUtilities(Object.assign(tailwindColorsCurrent(getTailwindColors(twColors)), tailwindColorsCurrent(userConfig.colors)));
+    return plugin(({ addUtilities, matchUtilities, theme, variants, e, corePlugins }) => {
+        matchUtilities(
+            {
+                accent: (value) => {
+                    const matchValue = toColorValue(value).match(/var\((.*?)\)/);
+                    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-fg-rgb'] = `var(${matchValue[1].replace('-rgb', '-fg-rgb')})`;
+                        }
+
+                        if (toColorValue(value).includes('calc(1 * 100%)') || toColorValue(value).includes(' / 1')) {
+                            return {
+                                ...colorProperties,
+                                '--color-accent': fallbackRgb ? toColorValue(value) : matchValue[0],
+                                '--color-accent-fg': fallbackRgb ? `rgb(var(${matchValue[1].replace('-rgb', '-fg-rgb')}, var(--color-light-rgb)))` : `var(${matchValue[1]}-fg, var(--color-light))`,
+                                'accent-color': 'var(--color-accent)'
+                            }
+                        } else {
+                            return {
+                                ...colorProperties,
+                                '--color-accent': toColorValue(value),
+                                '--color-accent-fg': fallbackRgb ? `rgb(var(${matchValue[1].replace('-rgb', '-fg-rgb')}, var(--color-light-rgb)))` : `var(${matchValue[1]}-fg, var(--color-light))`,
+                                'accent-color': 'var(--color-accent)'
+                            }
+                        }
+                    }
+
+                    return {
+                        '--color-accent': toColorValue(value),
+                        'accent-color': toColorValue(value)
+                    }
+                }
+            },
+            { 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 = matchValue
+                        ? { color: 'var(--color-current)' }
+                        : {
+                            ...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
+                    }
+                }
+            },
+            { values: flattenColorPalette(theme('textColor')), type: ['color', 'any'] }
+        );
         addUtilities(tailwindAnimations(userConfig.animations));
         addUtilities([
             Object.entries(theme('spacing')).map(([key, value]) => {
@@ -162,11 +226,15 @@ const createPlugin = (userConfig = {}) => {
     }, {
         corePlugins: {
             preflight: false,
-            container: false
+            container: false,
+            textColor: false,
+            accentColor: false
         },
         theme: {
+            accentOpacity: ({ theme }) => theme('opacity'),
             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, {
@@ -186,10 +254,7 @@ const createPlugin = (userConfig = {}) => {
 exports.createPlugin = createPlugin;
 exports.default = createPlugin;
 exports.defaultConfig = defaultConfig;
-exports.getTailwindColors = getTailwindColors;
-exports.hexToRgb = hexToRgb;
 exports.tailwindAnimations = tailwindAnimations;
 exports.tailwindColors = tailwindColors;
-exports.tailwindColorsAccent = tailwindColorsAccent;
-exports.tailwindColorsCurrent = tailwindColorsCurrent;
 exports.tailwindVariables = tailwindVariables;
+exports.tailwindVariablesFont = tailwindVariablesFont;