From 31f465c702f8d591f1df3993302371f339c13272 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Sun, 11 Feb 2024 09:37:25 +0000
Subject: [PATCH] Theme: Update on BaseComponent structure

---
 .../lib/basecomponent/BaseComponent.vue       | 30 ++++++++++++-------
 components/lib/theme/utils/toVariables.js     |  2 +-
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index d8cf2e3b1..8b3c49a37 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -41,16 +41,14 @@ export default {
             handler(newValue) {
                 if (newValue) {
                     const { variables, css } = this.$globalTheme;
-                    /* variables */
-                    //const { dark, ...rest } = variables || {};
+                    const { colorScheme, ...vRest } = variables || {};
+                    const { dark, ...csRest } = colorScheme || {};
+                    const vRest_css = ObjectUtils.isNotEmpty(vRest) ? toVariables({ [this.$style.name]: vRest }).css : '';
+                    const csRest_css = ObjectUtils.isNotEmpty(csRest) ? toVariables({ [this.$style.name]: csRest }).css : '';
+                    const dark_css = ObjectUtils.isNotEmpty(dark) ? toVariables({ [this.$style.name]: dark }, { selector: '.p-dark' }).css : '';
+                    const variables_css = `${vRest_css}${csRest_css}${dark_css}`;
 
-                    // 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 });
+                    this.$style?.loadTheme(`${variables_css}${css}`, { useStyleOptions: this.$styleOptions });
                 }
             }
         }
@@ -124,7 +122,16 @@ export default {
             BaseComponentStyle.loadGlobalTheme(this.$presetTheme?.components?.global?.css, { nonce: this.$config?.csp?.nonce });
         },
         _loadThemeVariables() {
-            const { primitive, semantic } = this.$presetTheme;
+            const { variables } = this.$presetTheme;
+            const { colorScheme, ...vRest } = variables || {};
+            const { dark, ...csRest } = colorScheme || {};
+            const vRest_css = ObjectUtils.isNotEmpty(vRest) ? toVariables({ light: vRest }).css : '';
+            const csRest_css = ObjectUtils.isNotEmpty(csRest) ? toVariables({ light: csRest }).css : '';
+            const dark_css = ObjectUtils.isNotEmpty(dark) ? toVariables({ dark }, { selector: '.p-dark' }).css : '';
+            const variables_css = `${vRest_css}${csRest_css}${dark_css}`;
+
+            BaseStyle.loadTheme(variables_css, { name: 'theme-variables', nonce: this.$config?.csp?.nonce });
+            /*const { primitive, semantic } = this.$presetTheme;
             const { colorScheme, ...sRest } = semantic || {};
             const { dark, ...csRest } = colorScheme || {};
 
@@ -140,7 +147,8 @@ export default {
                 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;
diff --git a/components/lib/theme/utils/toVariables.js b/components/lib/theme/utils/toVariables.js
index 945b8b53e..1a1ca66f5 100644
--- a/components/lib/theme/utils/toVariables.js
+++ b/components/lib/theme/utils/toVariables.js
@@ -3,7 +3,7 @@ import SharedUtils from './sharedUtils';
 const VARIABLE = {
     PREFIX: 'p',
     SELECTOR: ':root',
-    EXCLUDED_KEY_REGEX: /^(primitive|semantic|colorscheme|light|common|root|states)$/gi
+    EXCLUDED_KEY_REGEX: /^(primitive|semantic|variables|colorscheme|light|dark|common|colors|root|states)$/gi
 };
 
 export default function (theme, options = {}) {