winduum 0.2.2 → 0.2.3-next.2

package/utils/tailwind.js

@@ -1,19 +1,54 @@
 import plugin from 'tailwindcss/plugin'
-import twColors from 'tailwindcss/colors'
+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)
+    if (typeof color === 'function') {
+        return {
+            ...Object.fromEntries(
+                properties.map((p) => {
+                    return [p, color({ opacityVariable: variable, opacityValue: `var(${variable}, 1)` })]
+                })
+            )
+        }
+    }
+
+    const parsed = parseColor(color)
+
+    if (parsed === null) {
+        return Object.fromEntries(properties.map((p) => [p, color]))
+    }
+
+    if (parsed.alpha !== undefined) {
+        // Has an alpha value, return color as-is
+        return Object.fromEntries(properties.map((p) => [p, color]))
+    }
+
+    return {
+        ...Object.fromEntries(
+            properties.map((p) => {
+                return [p, formatColor({ ...parsed, alpha: `var(${variable}, 1)` })]
+            })
+        )
+    }
+}
+
 export 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',
@@ -26,101 +61,35 @@ export const defaultConfig = {
         '4xl': '100em',
         xxl: '126em',
         '2xxl': '158em'
+    },
+    settings: {
+        rgb: true
     }
 }
 
-export 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))
-
-export 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
-}
-
 export 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})`
+        if (defaultConfig.settings.rgb) {
+            colors[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`
         }
 
-        colors[name] = ({ opacityValue }) => {
-            if (opacityValue === undefined) {
-                return `var(--color-${name})`
-            }
-
-            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
 }
 
-export 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
-}
-
-export 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})`
-            }
-        }
+export const tailwindVariables = (type, variables = [], values = {}) => {
+    variables.forEach(name => {
+        values[name] = `var(--${type}-${name})`
     })
 
-    return result
+    return values
 }
 
-export const tailwindVariables = (type, variables = [], values = {}) => {
+export 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
@@ -141,9 +110,104 @@ export const tailwindAnimations = (values) => {
 export 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]) => {
@@ -158,11 +222,15 @@ export 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, {