Init theme structure

2024-01-02 10:18:28 +00:00 · 2024-01-02 10:18:28 +00:00 · 8e4854474d
parent f7228f16e0
commit 8e4854474d
26 changed files with 649 additions and 17 deletions
--- a/app.vue
+++ b/app.vue
@ -20,11 +20,11 @@ export default {
    created() {
        useServerHead({
            link: [
-                {
+                /*{
                    id: 'theme-link',
                    rel: 'stylesheet',
                    href: '/themes/lara-light-green/theme.css'
-                },
+                }*/
                {
                    id: 'home-table-link',
                    rel: 'stylesheet',
@ -57,12 +57,16 @@ export default {
            document.startViewTransition(() => this.applyTheme(event));
        },
        applyTheme(event) {
-            this.$primevue.changeTheme(this.$appState.theme, event.theme, 'theme-link', () => {
+            /*this.$primevue.changeTheme(this.$appState.theme, event.theme, 'theme-link', () => {
                this.$appState.theme = event.theme;
                this.$appState.darkTheme = event.dark;

                EventBus.emit('theme-change-complete', { theme: event.theme, dark: event.dark });
-            });
+            });*/
+            // @todo
+            this.$appState.theme = event.theme;
+            this.$appState.darkTheme = event.dark;
+            document.documentElement.className = this.$appState.darkTheme ? 'p-dark' : '';
        }
    }
 };
--- a/components/lib/base/style/BaseStyle.js
+++ b/components/lib/base/style/BaseStyle.js
@ -35,6 +35,9 @@ export default {
    loadStyle(options = {}) {
        return this.css ? useStyle(this.css, { name: this.name, ...options }) : {};
    },
+    loadTheme(theme, options = {}) {
+        return theme ? useStyle(theme, { name: `${this.name}-style`, ...options }) : {};
+    },
    getStyleSheet(extendedCSS = '', props = {}) {
        if (this.css) {
            const _props = Object.entries(props)
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@ -1,5 +1,6 @@
 <script>
 import BaseStyle from 'primevue/base/style';
+import { toVariables } from 'primevue/theme';
 import { ObjectUtils } from 'primevue/utils';
 import { mergeProps } from 'vue';
 import BaseComponentStyle from './style/BaseComponentStyle';
@ -34,6 +35,24 @@ export default {
                    this.$options.style && this.$style.loadStyle({ nonce: this.$config?.csp?.nonce });
                }
            }
+        },
+        $globalTheme: {
+            immediate: true,
+            handler(newValue) {
+                if (newValue) {
+                    const { variables, css } = this.$globalTheme;
+                    /* variables */
+                    const { dark, ...rest } = variables || {};
+
+                    // common + light
+                    this.$style?.loadTheme(toVariables({ [this.$style.name]: rest }).css, { name: `${this.$style.name}-variables`, nonce: this.$config?.csp?.nonce });
+                    // dark
+                    this.$style?.loadTheme(toVariables({ [this.$style.name]: dark }, { selector: '.p-dark' }).css, { name: `${this.$style.name}-dark-variables`, nonce: this.$config?.csp?.nonce });
+
+                    /* css */
+                    this.$style?.loadTheme(css, { useStyleOptions: this.$styleOptions });
+                }
+            }
        }
    },
    beforeCreate() {
@ -96,6 +115,19 @@ export default {
            const globalCSS = this._useGlobalPT(this._getOptionValue, 'global.css', this.$params);

            ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, { nonce: this.$config?.csp?.nonce });
+
+            this._loadThemeVariables();
+
+            BaseComponentStyle.loadGlobalTheme(this.$presetTheme?.components?.global?.css, { nonce: this.$config?.csp?.nonce });
+        },
+        _loadThemeVariables() {
+            const { components, ...rest } = this.$presetTheme;
+
+            Object.entries(rest).forEach(([key, value]) => {
+                const v = toVariables({ [key]: value });
+
+                BaseStyle.loadTheme(v.css, { name: `${key}-variables`, nonce: this.$config?.csp?.nonce });
+            });
        },
        _getHostInstance(instance) {
            return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
@ -201,6 +233,14 @@ export default {
        isUnstyled() {
            return this.unstyled !== undefined ? this.unstyled : this.$config?.unstyled;
        },
+        $presetTheme() {
+            const { preset, options } = this.$config?.theme || {};
+
+            return ObjectUtils.getItemValue(preset, options);
+        },
+        $globalTheme() {
+            return ObjectUtils.getItemValue(this.$presetTheme?.components?.[this.$style.name], this.$params);
+        },
        $params() {
            const parentInstance = this._getHostInstance(this) || this.$parent;

@ -222,6 +262,9 @@ export default {
        $style() {
            return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
        },
+        $styleOptions() {
+            return { nonce: this.$config?.csp?.nonce };
+        },
        $config() {
            return this.$primevue?.config;
        },
--- a/components/lib/basecomponent/style/BaseComponentStyle.js
+++ b/components/lib/basecomponent/style/BaseComponentStyle.js
@ -357,5 +357,6 @@ ${radioButtonCSS}
 export default BaseStyle.extend({
    name: 'common',
    css,
-    loadGlobalStyle: (globalCSS, options = {}) => useStyle(globalCSS, { name: 'global', ...options })
+    loadGlobalStyle: (globalCSS, options = {}) => useStyle(globalCSS, { name: 'global', ...options }),
+    loadGlobalTheme: (globalTheme, options = {}) => useStyle(globalTheme, { name: 'global-style', ...options })
 });
--- a/components/lib/config/PrimeVue.js
+++ b/components/lib/config/PrimeVue.js
@ -1,4 +1,5 @@
 import { FilterMatchMode } from 'primevue/api';
+import Lara from 'primevue/theme/lara';
 import { inject, reactive } from 'vue';

 export const defaultOptions = {
@ -133,6 +134,10 @@ export const defaultOptions = {
        menu: 1000,
        tooltip: 1100
    },
+    theme: {
+        preset: Lara,
+        options: undefined
+    },
    pt: undefined,
    ptOptions: {
        mergeSections: true,
@ -159,6 +164,8 @@ export function usePrimeVue() {
 function switchTheme(currentTheme, newTheme, linkElementId, callback) {
    if (currentTheme !== newTheme) {
        const linkElement = document.getElementById(linkElementId);
+
+        if (linkElement) {
            const cloneLinkElement = linkElement.cloneNode(true);
            const newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);

@ -175,6 +182,7 @@ function switchTheme(currentTheme, newTheme, linkElementId, callback) {
            linkElement.parentNode && linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
        }
    }
+}

 export default {
    install: (app, options) => {
--- a/components/lib/theme/index.d.ts
+++ b/components/lib/theme/index.d.ts
@ -0,0 +1,13 @@
+export interface Surface {
+    surface0?: string | undefined;
+    surface50?: string | undefined;
+    surface100?: string | undefined;
+    surface200?: string | undefined;
+    surface300?: string | undefined;
+    surface400?: string | undefined;
+    surface500?: string | undefined;
+    surface600?: string | undefined;
+    surface700?: string | undefined;
+    surface800?: string | undefined;
+    surface900?: string | undefined;
+}
--- a/components/lib/theme/index.js
+++ b/components/lib/theme/index.js
@ -0,0 +1 @@
+export * from './utils';
--- a/components/lib/theme/lara/fonts/Inter-italic.var.woff2
+++ b/components/lib/theme/lara/fonts/Inter-italic.var.woff2
--- a/components/lib/theme/lara/fonts/Inter-roman.var.woff2
+++ b/components/lib/theme/lara/fonts/Inter-roman.var.woff2
--- a/components/lib/theme/lara/global.js
+++ b/components/lib/theme/lara/global.js
@ -0,0 +1,95 @@
+export default {
+    css: `
+@font-face {
+    font-family: "Inter var";
+    font-weight: 100 900;
+    font-display: swap;
+    font-style: normal;
+    font-named-instance: "Regular";
+    src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+    font-family: "Inter var";
+    font-weight: 100 900;
+    font-display: swap;
+    font-style: italic;
+    font-named-instance: "Italic";
+    src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
+
+* {
+    box-sizing: border-box;
+}
+
+.p-component {
+    font-family: var(--p-font-family);
+    font-feature-settings: var(--p-font-feature-settings, normal);
+    font-size: var(--p-font-size);
+    font-weight: var(--p-font-weight);
+}
+
+.p-component-overlay {
+    background-color: var(--p-mask-bg);
+    transition-duration: var(--p-transition-duration);
+}
+
+.p-disabled,
+.p-component:disabled {
+    opacity: var(--p-disabled-opacity);
+}
+
+.p-error {
+    color: var(--p-error-color);
+}
+
+.p-text-secondary {
+    color: var(--p-text-secondary-color);
+}
+
+.pi {
+    font-size: var(--p-prime-icon-font-size);
+}
+
+.p-icon {
+    width: var(--p-prime-icon-font-size);
+    height: var(--p-prime-icon-font-size);
+}
+
+.p-link {
+    font-family: var(--p-font-family);
+    font-feature-settings: var(--p-font-feature-settings, normal);
+    font-size: var(--p-font-size);
+    border-radius: var(--p-border-radius);
+}
+.p-link:focus-visible {
+    outline: var(--p-focus-outline);
+    outline-offset: var(--p-focus-outline-offset);
+    box-shadow: var(--p-focus-shadow);
+}
+
+.p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+@keyframes p-component-overlay-enter-animation {
+    from {
+        background-color: transparent;
+    }
+    to {
+        background-color: var(--maskbg);
+    }
+}
+@keyframes p-component-overlay-leave-animation {
+    from {
+        background-color: var(--maskbg);
+    }
+    to {
+        background-color: transparent;
+    }
+}
+`
+};
--- a/components/lib/theme/lara/index.d.ts
+++ b/components/lib/theme/lara/index.d.ts
--- a/components/lib/theme/lara/index.js
+++ b/components/lib/theme/lara/index.js
@ -0,0 +1,33 @@
+import { palette } from 'primevue/theme';
+import global from 'primevue/theme/lara/global';
+import panel from 'primevue/theme/lara/panel';
+
+export default {
+    primitive: {
+        blue: palette('#3B82F6') /* --p-blue-[50-900] */,
+        gray: {
+            50: '#f9fafb',
+            100: '#f3f4f6',
+            200: '#e5e7eb',
+            300: '#d1d5db',
+            400: '#9ca3af',
+            500: '#6b7280',
+            600: '#4b5563',
+            700: '#374151',
+            800: '#1f2937',
+            900: '#111827'
+        }
+    },
+    semantic: {
+        primary: {
+            500: 'var(--p-blue-500)'
+        },
+        surface: {
+            200: 'var(--p-gray-200)'
+        }
+    },
+    components: {
+        global,
+        panel
+    }
+};
--- a/components/lib/theme/lara/package.json
+++ b/components/lib/theme/lara/package.json
@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}
--- a/components/lib/theme/lara/panel/index.d.ts
+++ b/components/lib/theme/lara/panel/index.d.ts
@ -0,0 +1,31 @@
+interface PanelThemeVariables {
+    panelHeaderBorder?: string | undefined;
+    panelHeaderPadding?: string | undefined;
+    panelHeaderBg?: string | undefined;
+    panelHeaderTextColor?: string | undefined;
+    panelHeaderFontWeight?: string | undefined;
+    panelHeaderIconWidth?: string | undefined;
+    panelHeaderIconHeight?: string | undefined;
+    panelHeaderIconColor?: string | undefined;
+    panelHeaderIconBorder?: string | undefined;
+    panelHeaderIconBg?: string | undefined;
+    panelHeaderIconBorderRadius?: string | undefined;
+    panelHeaderIconTransition?: string | undefined;
+    panelHeaderIconHoverColor?: string | undefined;
+    panelHeaderIconHoverBorderColor?: string | undefined;
+    panelHeaderIconHoverBg?: string | undefined;
+    panelHeaderIconFocusOutline?: string | undefined;
+    panelHeaderIconFocusOutlineOffset?: string | undefined;
+    panelHeaderIconFocusShadow?: string | undefined;
+    panelToggleableHeaderPadding?: string | undefined;
+    panelContentPadding?: string | undefined;
+    panelContentBorder?: string | undefined;
+    panelContentBg?: string | undefined;
+    panelContentTextColor?: string | undefined;
+    panelContentBorderTop?: string | undefined;
+    panelFooterPadding?: string | undefined;
+    panelFooterBorder?: string | undefined;
+    panelFooterBg?: string | undefined;
+    panelFooterTextColor?: string | undefined;
+    panelFooterBorderTop?: string | undefined;
+}
--- a/components/lib/theme/lara/panel/index.js
+++ b/components/lib/theme/lara/panel/index.js
@ -0,0 +1,89 @@
+export default {
+    variables: {
+        common: {
+            header: {
+                //border: '1px solid var(--p-panel-header-border-color)',
+                border: {
+                    width: '1px', // --p-panel-header-border-width: 1px;
+                    style: 'solid' // --p-panel-header-border-color: solid;
+                }
+            }
+        },
+        light: {
+            header: {
+                bg: '{blue.500}'
+            }
+        },
+        dark: {
+            header: {
+                bg: '{blue.200}' // --p-panel-header-bg: var(--p-blue-200);
+            }
+        }
+    },
+    css: `
+.p-panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: var(--p-panel-header-border);
+    padding: var(--p-panel-header-padding);
+    background: var(--p-panel-header-bg);
+    color: var(--p-panel-header-text-color);
+    border-top-right-radius: var(--p-border-radius);
+    border-top-left-radius: var(--p-border-radius);
+}
+.p-panel-title {
+    line-height: 1;
+    font-weight: var(--p-panel-header-font-weight);
+}
+.p-panel-header-icon {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    text-decoration: none;
+    overflow: hidden;
+    position: relative;
+    width: var(--p-action-icon-width);
+    height: var(--p-action-icon-height);
+    color: var(--p-action-icon-color);
+    border: var(--p-action-icon-border);
+    background: var(--p-action-icon-bg);
+    border-radius: var(--p-action-icon-border-radius);
+    transition: var(--p-action-icon-transition);
+}
+.p-panel-header-icon:enabled:hover {
+    color: var(--p-action-icon-hover-color);
+    border-color: var(--p-action-icon-hover-border-color);
+    background: var(--p-action-icon-hover-bg);
+}
+.p-panel-header-icon:focus-visible {
+    outline: var(--p-focus-outline);
+    outline-offset: var(--p-focus-outline-offset);
+    box-shadow: var(--p-focus-shadow);
+}
+.p-panel-toggleable .p-panel-header {
+    padding: var(--p-panel-toggleable-header-padding);
+}
+.p-panel-content {
+    padding: var(--p-panel-content-padding);
+    border: var(--p-panel-content-border);
+    background: var(--p-panel-content-bg);
+    color: var(--p-panel-content-text-color);
+    border-top: 0;
+}
+.p-panel-content:last-child {
+    border-bottom-right-radius: var(--p-border-radius);
+    border-bottom-left-radius: var(--p-border-radius);
+}
+.p-panel-footer {
+    padding: var(--p-panel-footer-padding);
+    border: var(--p-panel-footer-border);
+    background: var(--p-panel-footer-bg);
+    color: var(--p-panel-footer-text-color);
+    border-bottom-right-radius: var(--p-border-radius);
+    border-bottom-left-radius: var(--p-border-radius);
+    border-top: 0;
+}
+    `
+};
--- a/components/lib/theme/lara/panel/package.json
+++ b/components/lib/theme/lara/panel/package.json
@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}
--- a/components/lib/theme/package.json
+++ b/components/lib/theme/package.json
@ -0,0 +1,6 @@
+{
+    "main": "./index.cjs.js",
+    "module": "./index.esm.js",
+    "unpkg": "./index.min.js",
+    "types": "./index.d.ts"
+}
--- a/components/lib/theme/utils/color/index.js
+++ b/components/lib/theme/utils/color/index.js
@ -0,0 +1,4 @@
+export { default as mix } from './mix';
+export { default as palette } from './palette';
+export { default as shade } from './shade';
+export { default as tint } from './tint';
--- a/components/lib/theme/utils/color/mix.js
+++ b/components/lib/theme/utils/color/mix.js
@ -0,0 +1,39 @@
+function normalizeColor(color) {
+    if (color.length === 4) {
+        color = `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`;
+    }
+
+    return color;
+}
+
+function hexToRgb(hex) {
+    var bigint = parseInt(hex.substring(1), 16);
+    var r = (bigint >> 16) & 255;
+    var g = (bigint >> 8) & 255;
+    var b = bigint & 255;
+
+    return { r, g, b };
+}
+
+function rgbToHex(r, g, b) {
+    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+}
+
+export default (color1, color2, weight) => {
+    color1 = normalizeColor(color1);
+    color2 = normalizeColor(color2);
+
+    var p = weight / 100;
+    var w = p * 2 - 1;
+    var w1 = (w + 1) / 2.0;
+    var w2 = 1 - w1;
+
+    var rgb1 = hexToRgb(color1);
+    var rgb2 = hexToRgb(color2);
+
+    var r = Math.round(rgb1.r * w1 + rgb2.r * w2);
+    var g = Math.round(rgb1.g * w1 + rgb2.g * w2);
+    var b = Math.round(rgb1.b * w1 + rgb2.b * w2);
+
+    return rgbToHex(r, g, b);
+};
--- a/components/lib/theme/utils/color/palette.js
+++ b/components/lib/theme/utils/color/palette.js
@ -0,0 +1,11 @@
+import shade from './shade';
+import tint from './tint';
+
+export default (color) =>
+    typeof color === 'string'
+        ? Array.from({ length: 10 }).reduce((acc, _, i) => {
+              i <= 5 ? (acc[i === 0 ? '50' : `${i * 100}`] = tint(color, (5 - i) * 19)) : (acc[`${i * 100}`] = shade(color, (i - 5) * 15));
+
+              return acc;
+          }, {})
+        : color;
--- a/components/lib/theme/utils/color/shade.js
+++ b/components/lib/theme/utils/color/shade.js
@ -0,0 +1,3 @@
+import mix from './mix';
+
+export default (color, percent) => mix('#000000', color, percent);
--- a/components/lib/theme/utils/color/tint.js
+++ b/components/lib/theme/utils/color/tint.js
@ -0,0 +1,3 @@
+import mix from './mix';
+
+export default (color, percent) => mix('#ffffff', color, percent);
--- a/components/lib/theme/utils/index.js
+++ b/components/lib/theme/utils/index.js
@ -0,0 +1,3 @@
+export * from './color';
+export { default as sharedUtils } from './sharedUtils';
+export { default as toVariables } from './toVariables';
--- a/components/lib/theme/utils/sharedUtils.js
+++ b/components/lib/theme/utils/sharedUtils.js
@ -0,0 +1,112 @@
+export default {
+    object: {
+        isEmpty(value) {
+            return value === null || value === undefined || value === '' || (Array.isArray(value) && value.length === 0) || (!(value instanceof Date) && typeof value === 'object' && Object.keys(value).length === 0);
+        },
+        isNotEmpty(value) {
+            return !this.isEmpty(value);
+        },
+        isFunction(value) {
+            return !!(value && value.constructor && value.call && value.apply);
+        },
+        isObject(value, empty = true) {
+            return value instanceof Object && value.constructor === Object && (empty || Object.keys(value).length !== 0);
+        },
+        isArray(value, empty = true) {
+            return Array.isArray(value) && (empty || value.length !== 0);
+        },
+        isString(value, empty = true) {
+            return typeof value === 'string' && (empty || value !== '');
+        },
+        isNumber(value) {
+            return !isNaN(value);
+        },
+        toFlatCase(str) {
+            // convert snake, kebab, camel and pascal cases to flat case
+            return this.isString(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        },
+        toKebabCase(str) {
+            // convert snake, camel and pascal cases to kebab case
+            return this.isString(str)
+                ? str
+                      .replace(/(_)/g, '-')
+                      .replace(/[A-Z]/g, (c, i) => (i === 0 ? c : '-' + c.toLowerCase()))
+                      .toLowerCase()
+                : str;
+        },
+        merge(value1, value2) {
+            if (this.isArray(value1)) {
+                value1.push(...(value2 || []));
+            } else if (this.isObject(value1)) {
+                Object.assign(value1, value2);
+            }
+        },
+        test(regex, str) {
+            if (regex) {
+                const match = regex.test(str);
+
+                regex.lastIndex = 0;
+
+                return match;
+            }
+
+            return false;
+        },
+        toValue(value) {
+            return this.isObject(value) && value.hasOwnProperty('value') ? value.value : value;
+        },
+        toUnit(value, variable = '') {
+            const excludedProperties = ['opacity', 'z-index', 'line-height', 'font-weight', 'flex', 'flex-grow', 'flex-shrink', 'order'];
+
+            if (!excludedProperties.some((property) => variable.endsWith(property))) {
+                const val = `${value}`.trim();
+                const valArr = val.split(' ');
+
+                return valArr.map((v) => (this.isNumber(v) ? `${v}px` : v)).join(' ');
+            }
+
+            return value;
+        },
+        toNormalizePrefix(prefix) {
+            return prefix.replaceAll(/ /g, '').replace(/[^\w]/g, '-');
+        },
+        getVariableValue(value, variable = '', prefix = '', excludedKeyRegexes = []) {
+            if (this.isString(value)) {
+                const regex = /{([^}]*)}/g;
+                const val = value.trim();
+
+                if (this.test(regex, val)) {
+                    const _val = val.replaceAll(regex, (v) => {
+                        const path = v.replace(/{|}/g, '');
+                        const keys = path.split('.').filter((_v) => !excludedKeyRegexes.some((_r) => this.test(_r, _v)));
+
+                        return `var(--${prefix}-${this.toKebabCase(keys.join('-'))})`;
+                    });
+
+                    const calculationRegex = /(\d+\s+[\+\-\*\/]\s+\d+)/g;
+                    const cleanedVarRegex = /var\([^)]+\)/g;
+
+                    return this.test(calculationRegex, _val.replace(cleanedVarRegex, '0')) ? `calc(${_val})` : _val;
+                }
+
+                return this.toUnit(val, variable);
+            } else if (this.isNumber(value)) {
+                return this.toUnit(value, variable);
+            }
+
+            return undefined;
+        },
+        setProperty(properties, key, value) {
+            if (this.isString(key, false)) {
+                properties.push(`${key}:${value};`);
+            }
+        },
+        getRule(selector, properties) {
+            if (selector) {
+                return `${selector}{${properties}}`;
+            }
+
+            return '';
+        }
+    }
+};
--- a/components/lib/theme/utils/toVariables.js
+++ b/components/lib/theme/utils/toVariables.js
@ -0,0 +1,35 @@
+import SharedUtils from './sharedUtils';
+
+const VARIABLE = {
+    PREFIX: 'p',
+    SELECTOR: ':root',
+    EXCLUDED_KEY_REGEX: /^(primitive|semantic|light|common)$/gi
+};
+
+export default function (theme, options = {}) {
+    const { prefix = VARIABLE.PREFIX, selector = VARIABLE.SELECTOR, excludedKeyRegex = VARIABLE.EXCLUDED_KEY_REGEX } = options;
+
+    const _toVariables = (_theme, _prefix = '') => {
+        return Object.entries(_theme).reduce((acc, [key, value]) => {
+            const px = SharedUtils.object.toNormalizePrefix(SharedUtils.object.test(excludedKeyRegex, key) ? _prefix : `${_prefix}-${SharedUtils.object.toKebabCase(key)}`);
+            const v = SharedUtils.object.toValue(value);
+
+            if (SharedUtils.object.isObject(v)) {
+                const variables = _toVariables(v, px);
+
+                SharedUtils.object.merge(acc, variables);
+            } else {
+                SharedUtils.object.setProperty(acc, `--${px}`, SharedUtils.object.getVariableValue(v, px, prefix, [excludedKeyRegex]));
+            }
+
+            return acc;
+        }, []);
+    };
+
+    const value = _toVariables(theme, prefix);
+
+    return {
+        value,
+        css: SharedUtils.object.getRule(selector, value.join(''))
+    };
+}
--- a/nuxt-vite.config.js
+++ b/nuxt-vite.config.js
@ -155,12 +155,95 @@ const ICON_ALIAS = {
    'primevue/icons/windowminimize': path.resolve(__dirname, './components/lib/icons/windowminimize/index.vue')
 };

+const THEME_ALIAS = {
+    'primevue/theme/lara/global': path.resolve(__dirname, './components/lib/theme/lara/global.js'),
+    'primevue/theme/lara/accordion': path.resolve(__dirname, './components/lib/theme/lara/accordion/index.js'),
+    'primevue/theme/lara/autocomplete': path.resolve(__dirname, './components/lib/theme/lara/autocomplete/index.js'),
+    'primevue/theme/lara/avatar': path.resolve(__dirname, './components/lib/theme/lara/avatar/index.js'),
+    'primevue/theme/lara/badge': path.resolve(__dirname, './components/lib/theme/lara/badge/index.js'),
+    'primevue/theme/lara/blockui': path.resolve(__dirname, './components/lib/theme/lara/blockui/index.js'),
+    'primevue/theme/lara/breadcrumb': path.resolve(__dirname, './components/lib/theme/lara/breadcrumb/index.js'),
+    'primevue/theme/lara/button': path.resolve(__dirname, './components/lib/theme/lara/button/index.js'),
+    'primevue/theme/lara/calendar': path.resolve(__dirname, './components/lib/theme/lara/calendar/index.js'),
+    'primevue/theme/lara/card': path.resolve(__dirname, './components/lib/theme/lara/card/index.js'),
+    'primevue/theme/lara/carousel': path.resolve(__dirname, './components/lib/theme/lara/carousel/index.js'),
+    'primevue/theme/lara/cascadeselect': path.resolve(__dirname, './components/lib/theme/lara/cascadeselect/index.js'),
+    'primevue/theme/lara/checkbox': path.resolve(__dirname, './components/lib/theme/lara/checkbox/index.js'),
+    'primevue/theme/lara/chip': path.resolve(__dirname, './components/lib/theme/lara/chip/index.js'),
+    'primevue/theme/lara/chips': path.resolve(__dirname, './components/lib/theme/lara/chips/index.js'),
+    'primevue/theme/lara/colorpicker': path.resolve(__dirname, './components/lib/theme/lara/colorpicker/index.js'),
+    'primevue/theme/lara/confirmdialog': path.resolve(__dirname, './components/lib/theme/lara/confirmdialog/index.js'),
+    'primevue/theme/lara/confirmpopup': path.resolve(__dirname, './components/lib/theme/lara/confirmpopup/index.js'),
+    'primevue/theme/lara/contextmenu': path.resolve(__dirname, './components/lib/theme/lara/contextmenu/index.js'),
+    'primevue/theme/lara/datatable': path.resolve(__dirname, './components/lib/theme/lara/datatable/index.js'),
+    'primevue/theme/lara/dataview': path.resolve(__dirname, './components/lib/theme/lara/dataview/index.js'),
+    'primevue/theme/lara/dialog': path.resolve(__dirname, './components/lib/theme/lara/dialog/index.js'),
+    'primevue/theme/lara/divider': path.resolve(__dirname, './components/lib/theme/lara/divider/index.js'),
+    'primevue/theme/lara/dock': path.resolve(__dirname, './components/lib/theme/lara/dock/index.js'),
+    'primevue/theme/lara/dropdown': path.resolve(__dirname, './components/lib/theme/lara/dropdown/index.js'),
+    'primevue/theme/lara/editor': path.resolve(__dirname, './components/lib/theme/lara/editor/index.js'),
+    'primevue/theme/lara/fieldset': path.resolve(__dirname, './components/lib/theme/lara/fieldset/index.js'),
+    'primevue/theme/lara/fileupload': path.resolve(__dirname, './components/lib/theme/lara/fileupload/index.js'),
+    'primevue/theme/lara/galleria': path.resolve(__dirname, './components/lib/theme/lara/galleria/index.js'),
+    'primevue/theme/lara/image': path.resolve(__dirname, './components/lib/theme/lara/image/index.js'),
+    'primevue/theme/lara/inlinemessage': path.resolve(__dirname, './components/lib/theme/lara/inlinemessage/index.js'),
+    'primevue/theme/lara/inplace': path.resolve(__dirname, './components/lib/theme/lara/inplace/index.js'),
+    'primevue/theme/lara/inputgroup': path.resolve(__dirname, './components/lib/theme/lara/inputgroup/index.js'),
+    'primevue/theme/lara/inputnumber': path.resolve(__dirname, './components/lib/theme/lara/inputnumber/index.js'),
+    'primevue/theme/lara/inputswitch': path.resolve(__dirname, './components/lib/theme/lara/inputswitch/index.js'),
+    'primevue/theme/lara/inputtext': path.resolve(__dirname, './components/lib/theme/lara/inputtext/index.js'),
+    'primevue/theme/lara/listbox': path.resolve(__dirname, './components/lib/theme/lara/listbox/index.js'),
+    'primevue/theme/lara/megamenu': path.resolve(__dirname, './components/lib/theme/lara/megamenu/index.js'),
+    'primevue/theme/lara/menu': path.resolve(__dirname, './components/lib/theme/lara/menu/index.js'),
+    'primevue/theme/lara/menubar': path.resolve(__dirname, './components/lib/theme/lara/menubar/index.js'),
+    'primevue/theme/lara/message': path.resolve(__dirname, './components/lib/theme/lara/message/index.js'),
+    'primevue/theme/lara/multiselect': path.resolve(__dirname, './components/lib/theme/lara/multiselect/index.js'),
+    'primevue/theme/lara/orderlist': path.resolve(__dirname, './components/lib/theme/lara/orderlist/index.js'),
+    'primevue/theme/lara/organizationchart': path.resolve(__dirname, './components/lib/theme/lara/organizationchart/index.js'),
+    'primevue/theme/lara/overlaypanel': path.resolve(__dirname, './components/lib/theme/lara/overlaypanel/index.js'),
+    'primevue/theme/lara/paginator': path.resolve(__dirname, './components/lib/theme/lara/paginator/index.js'),
+    'primevue/theme/lara/panel': path.resolve(__dirname, './components/lib/theme/lara/panel/index.js'),
+    'primevue/theme/lara/panelmenu': path.resolve(__dirname, './components/lib/theme/lara/panelmenu/index.js'),
+    'primevue/theme/lara/password': path.resolve(__dirname, './components/lib/theme/lara/password/index.js'),
+    'primevue/theme/lara/picklist': path.resolve(__dirname, './components/lib/theme/lara/picklist/index.js'),
+    'primevue/theme/lara/progressbar': path.resolve(__dirname, './components/lib/theme/lara/progressbar/index.js'),
+    'primevue/theme/lara/progressspinner': path.resolve(__dirname, './components/lib/theme/lara/progressspinner/index.js'),
+    'primevue/theme/lara/radiobutton': path.resolve(__dirname, './components/lib/theme/lara/radiobutton/index.js'),
+    'primevue/theme/lara/rating': path.resolve(__dirname, './components/lib/theme/lara/rating/index.js'),
+    'primevue/theme/lara/scrollpanel': path.resolve(__dirname, './components/lib/theme/lara/scrollpanel/index.js'),
+    'primevue/theme/lara/scrolltop': path.resolve(__dirname, './components/lib/theme/lara/scrolltop/index.js'),
+    'primevue/theme/lara/selectbutton': path.resolve(__dirname, './components/lib/theme/lara/selectbutton/index.js'),
+    'primevue/theme/lara/sidebar': path.resolve(__dirname, './components/lib/theme/lara/sidebar/index.js'),
+    'primevue/theme/lara/skeleton': path.resolve(__dirname, './components/lib/theme/lara/skeleton/index.js'),
+    'primevue/theme/lara/slider': path.resolve(__dirname, './components/lib/theme/lara/slider/index.js'),
+    'primevue/theme/lara/speeddial': path.resolve(__dirname, './components/lib/theme/lara/speeddial/index.js'),
+    'primevue/theme/lara/splitbutton': path.resolve(__dirname, './components/lib/theme/lara/splitbutton/index.js'),
+    'primevue/theme/lara/splitter': path.resolve(__dirname, './components/lib/theme/lara/splitter/index.js'),
+    'primevue/theme/lara/steps': path.resolve(__dirname, './components/lib/theme/lara/steps/index.js'),
+    'primevue/theme/lara/tabmenu': path.resolve(__dirname, './components/lib/theme/lara/tabmenu/index.js'),
+    'primevue/theme/lara/tabview': path.resolve(__dirname, './components/lib/theme/lara/tabview/index.js'),
+    'primevue/theme/lara/tag': path.resolve(__dirname, './components/lib/theme/lara/tag/index.js'),
+    'primevue/theme/lara/terminal': path.resolve(__dirname, './components/lib/theme/lara/terminal/index.js'),
+    'primevue/theme/lara/tieredmenu': path.resolve(__dirname, './components/lib/theme/lara/tieredmenu/index.js'),
+    'primevue/theme/lara/timeline': path.resolve(__dirname, './components/lib/theme/lara/timeline/index.js'),
+    'primevue/theme/lara/toast': path.resolve(__dirname, './components/lib/theme/lara/toast/index.js'),
+    'primevue/theme/lara/togglebutton': path.resolve(__dirname, './components/lib/theme/lara/togglebutton/index.js'),
+    'primevue/theme/lara/toolbar': path.resolve(__dirname, './components/lib/theme/lara/toolbar/index.js'),
+    'primevue/theme/lara/tooltip': path.resolve(__dirname, './components/lib/theme/lara/tooltip/index.js'),
+    'primevue/theme/lara/tree': path.resolve(__dirname, './components/lib/theme/lara/tree/index.js'),
+    'primevue/theme/lara/treeselect': path.resolve(__dirname, './components/lib/theme/lara/treeselect/index.js'),
+    'primevue/theme/lara/treetable': path.resolve(__dirname, './components/lib/theme/lara/treetable/index.js'),
+    'primevue/theme/lara': path.resolve(__dirname, './components/lib/theme/lara/index.js'),
+    'primevue/theme': path.resolve(__dirname, './components/lib/theme/index.js')
+};
+
 export default {
    resolve: {
        alias: {
            'primevue/utils': path.resolve(__dirname, './components/lib/utils/Utils.js'),
            'primevue/api': path.resolve(__dirname, './components/lib/api/Api.js'),
            ...STYLE_ALIAS,
+            ...THEME_ALIAS,
            'primevue/base': path.resolve(__dirname, './components/lib/base/Base.js'),
            'primevue/basedirective': path.resolve(__dirname, './components/lib/basedirective/BaseDirective.js'),
            'primevue/ripple': path.resolve(__dirname, './components/lib/ripple/Ripple.js'),