@voicenter-team/voicenter-ui-plus 1.1.20 → 2.0.1

package/tailwind.config.js

@@ -1,190 +1,190 @@
-const schemeColors = require('./src/theme/tailwindScheme.js')
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: [ './src/**/*.{vue,js,ts,scss}', './documentation/**/*.{vue,scss}' ],
-    plugins: [
-        require('tailwindcss/plugin')(({ addUtilities }) => {
-            addUtilities({
-                '.justify-normal': {
-                    justifyContent: 'normal'
-                }
-            })
-        })
-    ],
-    theme: {
-        fontFamily: {
-            main: [ 'Inter', 'system-ui', 'sans-serif' ],
-            heebo: [ 'Heebo', 'sans-serif' ],
-            inter: [
-                'Inter',
-                'sans-serif'
-            ]
-        },
-        screens: {
-            sm: '680px',
-            md: '960px',
-            lg: '1264px',
-            xl: '1680px',
-            xxl: '1900px'
-        },
-        colors: schemeColors,
-        borderColor: schemeColors,
-        backgroundColor: schemeColors,
-        boxShadow: {
-            none: 'none',
-            card: '0px 0px 5px var(--card-shadow-color)',
-            'card-no-active': '0px 0px 5px var(--inactive-elements)',
-            'table-header': '0 1px 0 0 var(--table-shadow-color)',
-            'focus-outer': '0 0 3px var(--active-elements--pressed)',
-            'focus-outer-off': '0 0 3px var(--inactive-elements--pressed)',
-            'focus-outer-primary': '0 0 3px var(--primary-actions--pressed)',
-            'focus-outer-secondary': '0 0 3px var(--secondary-actions--pressed)',
-            'focus-outer-destructive': '0 0 3px var(--destructive-actions--pressed)',
-            'focus-outer-success': '0 0 3px var(--success-actions--pressed)',
-            'focus-outer-warning': '0 0 3px var(--warning-actions--pressed)',
-            'focus-inner': 'inset 0 0 3px var(--active-elements--pressed)',
-            focus: '0 0 3px var(--active-elements--pressed), inset 0 0px 3px var(--active-elements--pressed)',
-            hover: '0 0 3px var(--active-elements--focus), inset 0 0px 3px var(--active-elements--focus)',
-            'focus-primary': '0 0 3px var(--primary-actions--pressed), inset 0 0px 3px var(--primary-actions--pressed)',
-            'hover-primary': '0 0 3px var(--primary-actions--focus), inset 0 0px 3px var(--primary-actions--focus)',
-            'focus-secondary': '0 0 3px var(--secondary-actions--pressed), inset 0 0px 3px var(--secondary-actions--pressed)',
-            'hover-secondary': '0 0 3px var(--secondary-actions--focus), inset 0 0px 3px var(--secondary-actions--focus)',
-            'focus-destructive': '0 0 3px var(--destructive-actions--pressed), inset 0 0px 3px var(--destructive-actions--pressed)',
-            'hover-destructive': '0 0 3px var(--destructive-actions--focus), inset 0 0px 3px var(--destructive-actions--focus)',
-            'focus-success': '0 0 3px var(--success-actions--pressed), inset 0 0px 3px var(--success-actions--pressed)',
-            'hover-success': '0 0 3px var(--success-actions--focus), inset 0 0px 3px var(--success-actions--focus)',
-            'focus-warning': '0 0 3px var(--warning-actions--pressed), inset 0 0px 3px var(--warning-actions--pressed)',
-            'hover-warning': '0 0 3px var(--warning-actions--focus), inset 0 0px 3px var(--warning-actions--focus)',
-            'hover-inner': 'inset 0 0 3px var(--active-elements--focus)',
-            'hover-outer': '0 0 3px var(--active-elements--focus)',
-            'hover-outer-off': '0 0 3px var(--inactive-elements--focus)',
-            'hover-outer-active': '0 0 3px var(--active-elements--focus)',
-            'hover-outer-primary': '0 0 3px var(--primary-actions--focus)',
-            'hover-outer-primary-alternative': '0 0 3px var(--primary-alternative-actions--focus)',
-            'hover-outer-secondary': '0 0 3px var(--secondary-actions--focus)',
-            'hover-outer-destructive': '0 0 3px var(--destructive-actions--focus)',
-            'hover-outer-success': '0 0 3px var(--success-actions--focus)',
-            'hover-outer-warning': '0 0 3px var(--warning-actions--focus)',
-            'view-switcher': '0px 0px 4px var(--overlay-bg)',
-            'vertical-tab-scroll': 'inset 0 0 8px (--light-bg)',
-            'vertical-tab-item': '0 1px 6px var(--card-shadow-color)',
-            'vertical-tab-item-hover': '0 1px 6px var(--active-elements--focus)',
-            table: '0px 0px 5px var(--card-shadow-color)',
-            'table-row': '0 10px 10px -12px var(--table-shadow-color)'
-        },
-        fontSize: {
-            xxs: '0.65rem',
-            xs: '0.75rem',
-            sm: '0.875rem',
-            base: '1rem',
-            lg: '1.125rem',
-            xl: '1.25rem',
-            '2xl': '1.5rem',
-            '3xl': '2rem',
-            '4xl': '2.25rem',
-            '5xl': '2.5rem',
-            '6xl': '3rem'
-        },
-        fill: schemeColors,
-        stroke: {
-            'active-elements': 'var(--active-elements)',
-            current: 'currentColor'
-        },
-        borderRadius: {
-            none: '0',
-            xs: '0.125rem',
-            sm: '0.25rem',
-            md: '0.375rem',
-            lg: '0.5rem',
-            xl: '0.75rem',
-            xxl: '0.875rem',
-            full: '9999px',
-            tag: '2rem',
-            DEFAULT: '0.25rem',
-            'horizontal-tab-wrapper': '0px 6px 6px 6px',
-            'horizontal-tab-item': '6px 6px 0px 0px'
-        },
-        extend: {
-            inset: {
-                unset: 'unset'
-            },
-            minWidth: {
-                auto: 'auto',
-                xs: '20rem',
-                sm: '24rem',
-                md: '28rem',
-                lg: '32rem',
-                xl: '36rem',
-                '1/4': '25%',
-                '1/2': '50%',
-                '3/4': '75%',
-                screen: '100vw'
-            },
-            minHeight: {
-                2: '2rem',
-                5.5: '1.375rem',
-                6.5: '1.625rem',
-                8: '2rem',
-                screen: '100vh',
-                inherit: 'inherit'
-            },
-            maxWidth: {
-                '1/2': '50%',
-                screen: '100vw'
-            },
-            maxHeight: {
-                inherit: 'inherit'
-            },
-            height: {
-                0.5: '2px',
-                'fit-content': 'fit-content',
-                'modal-wizard': '680px'
-            },
-            spacing: {
-                15: '3.75rem',
-                unset: 'unset'
-            },
-            width: {},
-            lineHeight: {
-                '40px': '40px'
-            },
-            zIndex: {
-                1: 1,
-                5: 5
-            },
-            rotate: {
-                135: '135deg',
-                225: '225deg'
-            }
-        }
-    },
-    safelist: [
-        // Essential text sizes
-        {
-            pattern: /text-(xxs|xs|sm|base|lg|2xl|3xl|4xl|5xl|6xl)/,
-            variants: [ 'hover', 'focus' ]
-        },
-        // Essential fonts
-        {
-            pattern: /font-(main|heebo|inter)/,
-        },
-        // Essential color classes for dynamic theming
-        {
-            pattern: /text-(primary|primary-alternative|secondary|destructive|success|warning)-actions/,
-            variants: [ 'hover', 'focus' ]
-        },
-        {
-            pattern: /bg-(primary|primary-alternative|secondary|destructive|success|warning)-actions/,
-            variants: [ 'hover', 'focus' ]
-        },
-        {
-            pattern: /border-(primary|primary-alternative|secondary|destructive|success|warning)-actions/,
-            variants: [ 'hover', 'focus' ]
-        }
-    ],
-    variants: {
-        backgroundColor: [ 'responsive', 'hover', 'focus', 'active' ]
-    }
-}
-
+const schemeColors = require('./src/core/theme/tailwindScheme.js')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [ './src/**/*.{vue,js,ts,scss}', './documentation/**/*.{vue,scss}' ],
+    plugins: [
+        require('tailwindcss/plugin')(({ addUtilities }) => {
+            addUtilities({
+                '.justify-normal': {
+                    justifyContent: 'normal'
+                }
+            })
+        })
+    ],
+    theme: {
+        fontFamily: {
+            main: [ 'Inter', 'system-ui', 'sans-serif' ],
+            heebo: [ 'Heebo', 'sans-serif' ],
+            inter: [
+                'Inter',
+                'sans-serif'
+            ]
+        },
+        screens: {
+            sm: '680px',
+            md: '960px',
+            lg: '1264px',
+            xl: '1680px',
+            xxl: '1900px'
+        },
+        colors: schemeColors,
+        borderColor: schemeColors,
+        backgroundColor: schemeColors,
+        boxShadow: {
+            none: 'none',
+            card: '0px 0px 5px var(--card-shadow-color)',
+            'card-no-active': '0px 0px 5px var(--inactive-elements)',
+            'table-header': '0 1px 0 0 var(--table-shadow-color)',
+            'focus-outer': '0 0 3px var(--active-elements--pressed)',
+            'focus-outer-off': '0 0 3px var(--inactive-elements--pressed)',
+            'focus-outer-primary': '0 0 3px var(--primary-actions--pressed)',
+            'focus-outer-secondary': '0 0 3px var(--secondary-actions--pressed)',
+            'focus-outer-destructive': '0 0 3px var(--destructive-actions--pressed)',
+            'focus-outer-success': '0 0 3px var(--success-actions--pressed)',
+            'focus-outer-warning': '0 0 3px var(--warning-actions--pressed)',
+            'focus-inner': 'inset 0 0 3px var(--active-elements--pressed)',
+            focus: '0 0 3px var(--active-elements--pressed), inset 0 0px 3px var(--active-elements--pressed)',
+            hover: '0 0 3px var(--active-elements--focus), inset 0 0px 3px var(--active-elements--focus)',
+            'focus-primary': '0 0 3px var(--primary-actions--pressed), inset 0 0px 3px var(--primary-actions--pressed)',
+            'hover-primary': '0 0 3px var(--primary-actions--focus), inset 0 0px 3px var(--primary-actions--focus)',
+            'focus-secondary': '0 0 3px var(--secondary-actions--pressed), inset 0 0px 3px var(--secondary-actions--pressed)',
+            'hover-secondary': '0 0 3px var(--secondary-actions--focus), inset 0 0px 3px var(--secondary-actions--focus)',
+            'focus-destructive': '0 0 3px var(--destructive-actions--pressed), inset 0 0px 3px var(--destructive-actions--pressed)',
+            'hover-destructive': '0 0 3px var(--destructive-actions--focus), inset 0 0px 3px var(--destructive-actions--focus)',
+            'focus-success': '0 0 3px var(--success-actions--pressed), inset 0 0px 3px var(--success-actions--pressed)',
+            'hover-success': '0 0 3px var(--success-actions--focus), inset 0 0px 3px var(--success-actions--focus)',
+            'focus-warning': '0 0 3px var(--warning-actions--pressed), inset 0 0px 3px var(--warning-actions--pressed)',
+            'hover-warning': '0 0 3px var(--warning-actions--focus), inset 0 0px 3px var(--warning-actions--focus)',
+            'hover-inner': 'inset 0 0 3px var(--active-elements--focus)',
+            'hover-outer': '0 0 3px var(--active-elements--focus)',
+            'hover-outer-off': '0 0 3px var(--inactive-elements--focus)',
+            'hover-outer-active': '0 0 3px var(--active-elements--focus)',
+            'hover-outer-primary': '0 0 3px var(--primary-actions--focus)',
+            'hover-outer-primary-alternative': '0 0 3px var(--primary-alternative-actions--focus)',
+            'hover-outer-secondary': '0 0 3px var(--secondary-actions--focus)',
+            'hover-outer-destructive': '0 0 3px var(--destructive-actions--focus)',
+            'hover-outer-success': '0 0 3px var(--success-actions--focus)',
+            'hover-outer-warning': '0 0 3px var(--warning-actions--focus)',
+            'view-switcher': '0px 0px 4px var(--overlay-bg)',
+            'vertical-tab-scroll': 'inset 0 0 8px (--light-bg)',
+            'vertical-tab-item': '0 1px 6px var(--card-shadow-color)',
+            'vertical-tab-item-hover': '0 1px 6px var(--active-elements--focus)',
+            table: '0px 0px 5px var(--card-shadow-color)',
+            'table-row': '0 10px 10px -12px var(--table-shadow-color)'
+        },
+        fontSize: {
+            xxs: '0.65rem',
+            xs: '0.75rem',
+            sm: '0.875rem',
+            base: '1rem',
+            lg: '1.125rem',
+            xl: '1.25rem',
+            '2xl': '1.5rem',
+            '3xl': '2rem',
+            '4xl': '2.25rem',
+            '5xl': '2.5rem',
+            '6xl': '3rem'
+        },
+        fill: schemeColors,
+        stroke: {
+            'active-elements': 'var(--active-elements)',
+            current: 'currentColor'
+        },
+        borderRadius: {
+            none: '0',
+            xs: '0.125rem',
+            sm: '0.25rem',
+            md: '0.375rem',
+            lg: '0.5rem',
+            xl: '0.75rem',
+            xxl: '0.875rem',
+            full: '9999px',
+            tag: '2rem',
+            DEFAULT: '0.25rem',
+            'horizontal-tab-wrapper': '0px 6px 6px 6px',
+            'horizontal-tab-item': '6px 6px 0px 0px'
+        },
+        extend: {
+            inset: {
+                unset: 'unset'
+            },
+            minWidth: {
+                auto: 'auto',
+                xs: '20rem',
+                sm: '24rem',
+                md: '28rem',
+                lg: '32rem',
+                xl: '36rem',
+                '1/4': '25%',
+                '1/2': '50%',
+                '3/4': '75%',
+                screen: '100vw'
+            },
+            minHeight: {
+                2: '2rem',
+                5.5: '1.375rem',
+                6.5: '1.625rem',
+                8: '2rem',
+                screen: '100vh',
+                inherit: 'inherit'
+            },
+            maxWidth: {
+                '1/2': '50%',
+                screen: '100vw'
+            },
+            maxHeight: {
+                inherit: 'inherit'
+            },
+            height: {
+                0.5: '2px',
+                'fit-content': 'fit-content',
+                'modal-wizard': '680px'
+            },
+            spacing: {
+                15: '3.75rem',
+                unset: 'unset'
+            },
+            width: {},
+            lineHeight: {
+                '40px': '40px'
+            },
+            zIndex: {
+                1: 1,
+                5: 5
+            },
+            rotate: {
+                135: '135deg',
+                225: '225deg'
+            }
+        }
+    },
+    safelist: [
+        // Essential text sizes
+        {
+            pattern: /text-(xxs|xs|sm|base|lg|2xl|3xl|4xl|5xl|6xl)/,
+            variants: [ 'hover', 'focus' ]
+        },
+        // Essential fonts
+        {
+            pattern: /font-(main|heebo|inter)/,
+        },
+        // Essential color classes for dynamic theming
+        {
+            pattern: /text-(primary|primary-alternative|secondary|destructive|success|warning)-actions/,
+            variants: [ 'hover', 'focus' ]
+        },
+        {
+            pattern: /bg-(primary|primary-alternative|secondary|destructive|success|warning)-actions/,
+            variants: [ 'hover', 'focus' ]
+        },
+        {
+            pattern: /border-(primary|primary-alternative|secondary|destructive|success|warning)-actions/,
+            variants: [ 'hover', 'focus' ]
+        }
+    ],
+    variants: {
+        backgroundColor: [ 'responsive', 'hover', 'focus', 'active' ]
+    }
+}
+