vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 08:52:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor on variable import style

Browse source
This commit is contained in:
mertsincan 2024-02-05 13:00:52 +00:00
parent 2c7467b854
commit 46661ea658
4 changed files with 19 additions and 9 deletions
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) { if (newValue) {
const { variables, css } = this.$globalTheme; const { variables, css } = this.$globalTheme;
/* variables */ /* variables */
const { dark, ...rest } = variables || {}; //const { dark, ...rest } = variables || {};
// common + light // 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 // 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 */ /* css */
this.$style?.loadTheme(css, { useStyleOptions: this.$styleOptions }); 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 }); BaseComponentStyle.loadGlobalTheme(this.$presetTheme?.components?.global?.css, { nonce: this.$config?.csp?.nonce });
}, },
_loadThemeVariables() { _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 }); const v = toVariables({ [key]: value });
BaseStyle.loadTheme(v.css, { name: `${key}-variables`, nonce: this.$config?.csp?.nonce }); BaseStyle.loadTheme(v.css, { name: `${key}-variables`, nonce: this.$config?.csp?.nonce });
}); });*/
}, },
_getHostInstance(instance) { _getHostInstance(instance) {
return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined; 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}', textColor: '{dark.surface.0}',
textSecondaryColor: '{dark.surface.500}', textSecondaryColor: '{dark.surface.500}',
borderColor: '{dark.surface.700}' borderColor: '{dark.surface.700}'
}, }
}, },
common: { common: {
fontFamily: '"Inter var", sans-serif', fontFamily: '"Inter var", sans-serif',

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

@ -6,7 +6,7 @@ export default {
align-items: center; align-items: center;
border: var(--p-panel-header-border-width) var(--p-panel-header-border-style) var(--p-panel-header-border-color); 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); 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); color: var(--p-panel-header-color);
border-top-right-radius: var(--p-border-radius); border-top-right-radius: var(--p-border-radius);
border-top-left-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 = { const VARIABLE = {
PREFIX: 'p', PREFIX: 'p',
SELECTOR: ':root', 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 = {}) { export default function (theme, options = {}) {