From 46661ea6588a2eefc91117ab5e970c56148111a9 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 5 Feb 2024 13:00:52 +0000
Subject: [PATCH] Refactor on variable import style

---
 .../lib/basecomponent/BaseComponent.vue       | 22 ++++++++++++++-----
 components/lib/theme/lara/index.js            |  2 +-
 components/lib/theme/lara/panel/index.js      |  2 +-
 components/lib/theme/utils/toVariables.js     |  2 +-
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index 0074d7c72..d31ac48c3 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -42,12 +42,12 @@ export default {
                 if (newValue) {
                     const { variables, css } = this.$globalTheme;
                     /* variables */
-                    const { dark, ...rest } = 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 });
+                    //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 });
+                    //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 });
@@ -124,13 +124,23 @@ export default {
             BaseComponentStyle.loadGlobalTheme(this.$presetTheme?.components?.global?.css, { nonce: this.$config?.csp?.nonce });
         },
         _loadThemeVariables() {
-            const { components, ...rest } = this.$presetTheme;
+            const { primitive, semantic } = this.$presetTheme;
+            const { colorScheme, ...sRest } = semantic || {};
+            const { dark, ...csRest } = colorScheme || {};
 
-            Object.entries(rest).forEach(([key, value]) => {
+            // primitive
+            BaseStyle.loadTheme(toVariables({ primitive }).css, { name: 'primitive-variables', nonce: this.$config?.csp?.nonce });
+
+            // semantic -> light + common
+            const light_common_css = `${toVariables({ light: { ...sRest, ...csRest } }).css}${toVariables({ dark }, { selector: '.p-dark' }).css}`;
+
+            BaseStyle.loadTheme(light_common_css, { name: 'semantic-variables', nonce: this.$config?.csp?.nonce });
+
+            /*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;
diff --git a/components/lib/theme/lara/index.js b/components/lib/theme/lara/index.js
index d70f763e0..71ecf38a5 100644
--- a/components/lib/theme/lara/index.js
+++ b/components/lib/theme/lara/index.js
@@ -147,7 +147,7 @@ export default {
                 textColor: '{dark.surface.0}',
                 textSecondaryColor: '{dark.surface.500}',
                 borderColor: '{dark.surface.700}'
-            },
+            }
         },
         common: {
             fontFamily: '"Inter var", sans-serif',
diff --git a/components/lib/theme/lara/panel/index.js b/components/lib/theme/lara/panel/index.js
index e278d7f4d..d72f50dc2 100644
--- a/components/lib/theme/lara/panel/index.js
+++ b/components/lib/theme/lara/panel/index.js
@@ -6,7 +6,7 @@ export default {
     align-items: center;
     border: var(--p-panel-header-border-width) var(--p-panel-header-border-style) var(--p-panel-header-border-color);
     padding: var(--p-panel-header-padding-y) var(--p-panel-header-padding-x);
-    background: var(--p-surface-100, --p-dark-surface-900);
+    background: var(--p-dark-surface-900, var(--p-surface-100));
     color: var(--p-panel-header-color);
     border-top-right-radius: var(--p-border-radius);
     border-top-left-radius: var(--p-border-radius);
diff --git a/components/lib/theme/utils/toVariables.js b/components/lib/theme/utils/toVariables.js
index 7a60067a4..945b8b53e 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|light|common|root|states)$/gi
+    EXCLUDED_KEY_REGEX: /^(primitive|semantic|colorscheme|light|common|root|states)$/gi
 };
 
 export default function (theme, options = {}) {