vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor on variable import style

pull/5507/head
mertsincan 2024-02-05 13:00:52 +00:00
parent 2c7467b854
commit 46661ea658
4 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/lib/basecomponent/BaseComponent.vue
View File

@ -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;

2
components/lib/theme/lara/index.js
View File

@ -147,7 +147,7 @@ export default {
textColor: '{dark.surface.0}',
textSecondaryColor: '{dark.surface.500}',
borderColor: '{dark.surface.700}'
},
}
},
common: {
fontFamily: '"Inter var", sans-serif',

2
components/lib/theme/lara/panel/index.js
View File

@ -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);

2
components/lib/theme/utils/toVariables.js
View File

@ -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 = {}) {