From 7b3908908a5c266d0afb6a29b7573d4d81fbb9ef Mon Sep 17 00:00:00 2001 From: mertsincan Date: Wed, 6 Mar 2024 11:13:19 +0000 Subject: [PATCH] Update BaseThemeStyle.js --- .../lib/basetheme/style/BaseThemeStyle.js | 23 +++++++++++-------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/components/lib/basetheme/style/BaseThemeStyle.js b/components/lib/basetheme/style/BaseThemeStyle.js index 0491558ee..70337d4a3 100644 --- a/components/lib/basetheme/style/BaseThemeStyle.js +++ b/components/lib/basetheme/style/BaseThemeStyle.js @@ -6,14 +6,17 @@ export default { let primitive_css, semantic_css, global_css; if (ObjectUtils.isNotEmpty(preset)) { - const { options } = theme; + const { options, extend } = theme; const { primitive, semantic } = preset; const { colorScheme, ...sRest } = semantic || {}; const { dark, ...csRest } = colorScheme || {}; - const prim_css = ObjectUtils.isNotEmpty(primitive) ? this._toVariables({ primitive }, options).declarations : ''; - const sRest_css = ObjectUtils.isNotEmpty(sRest) ? this._toVariables({ semantic: sRest }, options).declarations : ''; - const csRest_css = ObjectUtils.isNotEmpty(csRest) ? this._toVariables({ light: csRest }, options).declarations : ''; - const dark_css = ObjectUtils.isNotEmpty(dark) ? this._toVariables({ dark }, options).declarations : ''; + const { primitive: primitiveExt, semantic: semanticExt } = extend || {}; + const { colorScheme: colorSchemeExt, ...sRestExt } = semanticExt || {}; + const { dark: darkExt, ...csRestExt } = colorSchemeExt || {}; + const prim_css = ObjectUtils.isNotEmpty(primitive) ? this._toVariables({ primitive: { ...primitive, ...primitiveExt } }, options).declarations : ''; + const sRest_css = ObjectUtils.isNotEmpty(sRest) ? this._toVariables({ semantic: { ...sRest, ...sRestExt } }, options).declarations : ''; + const csRest_css = ObjectUtils.isNotEmpty(csRest) ? this._toVariables({ light: { ...csRest, ...csRestExt } }, options).declarations : ''; + const dark_css = ObjectUtils.isNotEmpty(dark) ? this._toVariables({ dark: { ...dark, ...darkExt } }, options).declarations : ''; primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options); semantic_css = `${this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options)}${this._transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options)}`; @@ -28,12 +31,14 @@ export default { }; }, getPresetC(name, presetCTheme = {}, theme) { - const { options } = theme; + const { options, extend } = theme; const { colorScheme, ...vRest } = presetCTheme; const { dark, ...csRest } = colorScheme || {}; - const vRest_css = ObjectUtils.isNotEmpty(vRest) ? this._toVariables({ [name]: vRest }, options).declarations : ''; - const csRest_css = ObjectUtils.isNotEmpty(csRest) ? this._toVariables({ [name]: csRest }, options).declarations : ''; - const dark_css = ObjectUtils.isNotEmpty(dark) ? this._toVariables({ [name]: dark }, options).declarations : ''; + const { colorScheme: colorSchemeExt, ...vRestExt } = extend?.components?.[name] || {}; + const { dark: darkExt, ...csRestExt } = colorSchemeExt || {}; + const vRest_css = ObjectUtils.isNotEmpty(vRest) ? this._toVariables({ [name]: { ...vRest, ...vRestExt } }, options).declarations : ''; + const csRest_css = ObjectUtils.isNotEmpty(csRest) ? this._toVariables({ [name]: { ...csRest, ...csRestExt } }, options).declarations : ''; + const dark_css = ObjectUtils.isNotEmpty(dark) ? this._toVariables({ [name]: { ...dark, ...darkExt } }, options).declarations : ''; return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options)}${this._transformCSS(name, dark_css, 'dark', 'variable', options)}`; },