Theming API: new `$t` helper

components/lib/themes/actions/definePreset.js

@@ -1,9 +1,3 @@
-import Theme, { SharedUtils } from 'primevue/themes';
+import { SharedUtils } from 'primevue/themes';
 
-export default (preset1, preset2) => {
+export default (...presets) => SharedUtils.object.mergeKeys(...presets);
-    const newPreset = SharedUtils.object.mergeKeys(preset1, preset2);
-
-    Theme.setPreset(newPreset);
-
-    return newPreset;
-};

components/lib/themes/actions/updatePreset.js

@@ -1,7 +1,7 @@
 import Theme, { SharedUtils } from 'primevue/themes';
 
-export default (preset) => {
+export default (...presets) => {
-    const newPreset = SharedUtils.object.mergeKeys(Theme.getPreset(), preset);
+    const newPreset = SharedUtils.object.mergeKeys(Theme.getPreset(), ...presets);
 
     Theme.setPreset(newPreset);
 

components/lib/themes/actions/updatePrimaryPalette.js

@@ -1,15 +1,3 @@
-import Theme from 'primevue/themes';
+import { $t } from 'primevue/themes';
 
-export default (primary) => {
+export default (primary) => $t().primaryPalette(primary).update().preset;
-    const { primitive, semantic, components, directives } = Theme.getPreset();
-    const newPreset = {
-        primitive,
-        semantic: { ...semantic, primary },
-        components,
-        directives
-    };
-
-    Theme.setPreset(newPreset);
-
-    return newPreset;
-};

components/lib/themes/actions/updateSurfacePalette.js

@@ -1,22 +1,3 @@
-import Theme from 'primevue/themes';
+import { $t } from 'primevue/themes';
 
-export default (surface) => {
+export default (surface) => $t().surfacePalette(surface).update().preset;
-    const { primitive, semantic, components, directives } = Theme.getPreset();
-    const hasLightDark = surface?.hasOwnProperty('light') || surface?.hasOwnProperty('dark');
-    const newColorScheme = {
-        colorScheme: {
-            light: { ...semantic?.colorScheme?.light, ...{ surface: hasLightDark ? surface?.light : surface } },
-            dark: { ...semantic?.colorScheme?.dark, ...{ surface: hasLightDark ? surface?.dark : surface } }
-        }
-    };
-    const newPreset = {
-        primitive,
-        semantic: { ...semantic, ...newColorScheme },
-        components,
-        directives
-    };
-
-    Theme.setPreset(newPreset);
-
-    return newPreset;
-};

components/lib/themes/actions/usePreset.js

@@ -1,7 +1,9 @@
 import Theme from 'primevue/themes';
 
-export default (preset) => {
+export default (...presets) => {
-    Theme.setPreset(preset);
+    const newPreset = SharedUtils.object.mergeKeys(...presets);
 
-    return preset;
+    Theme.setPreset(newPreset);
+
+    return newPreset;
 };

components/lib/themes/actions/useTheme.js

@@ -1,13 +1,3 @@
-import Theme from 'primevue/themes';
+import { $t } from 'primevue/themes';
 
-export default (theme) => {
+export default (theme) => $t(theme).update({ mergePresets: false });
-    const [{ options: o1 }, { options: o2 }] = [Theme.getTheme(), theme];
-    const newTheme = {
-        ...theme,
-        options: { ...o1, ...o2 }
-    };
-
-    Theme.setTheme(newTheme);
-
-    return newTheme;
-};

components/lib/themes/config/index.js

@@ -63,6 +63,16 @@ export default {
         ThemeService.emit('preset:change', newValue);
         ThemeService.emit('theme:change', this.theme);
     },
+    getOptions() {
+        return this.options;
+    },
+    setOptions(newValue) {
+        this._theme = { ...this.theme, options: newValue };
+
+        this.clearLoadedStyleNames();
+        ThemeService.emit('options:change', newValue);
+        ThemeService.emit('theme:change', this.theme);
+    },
     getLayerNames() {
         return [...this._layerNames];
     },

components/lib/themes/helpers/index.js

@@ -1,4 +1,5 @@
 export * from './color/index.js';
 export * from './css';
 export * from './dt';
+export * from './t';
 export { default as toVariables } from './toVariables';

components/lib/themes/helpers/t.js

@@ -0,0 +1,66 @@
+import { SharedUtils } from 'primevue/themes';
+import Theme from 'primevue/themes/config';
+
+export const $t = (theme = {}) => {
+    let { preset: _preset, options: _options } = theme;
+
+    return {
+        preset(value) {
+            _preset = _preset ? SharedUtils.object.mergeKeys(_preset, value) : value;
+
+            return this;
+        },
+        options(value) {
+            _options = _options ? { ..._options, ...value } : value;
+
+            return this;
+        },
+        // features
+        primaryPalette(primary) {
+            const { semantic } = _preset || {};
+
+            _preset = { ..._preset, semantic: { ...semantic, primary } };
+
+            return this;
+        },
+        surfacePalette(surface) {
+            const { semantic } = _preset || {};
+            const lightSurface = surface?.hasOwnProperty('light') ? surface?.light : surface;
+            const darkSurface = surface?.hasOwnProperty('dark') ? surface?.dark : surface;
+            const newColorScheme = {
+                colorScheme: {
+                    light: { ...semantic?.colorScheme?.light, ...(!!lightSurface && { surface: lightSurface }) },
+                    dark: { ...semantic?.colorScheme?.dark, ...(!!darkSurface && { surface: darkSurface }) }
+                }
+            };
+
+            _preset = { ..._preset, semantic: { ...semantic, ...newColorScheme } };
+
+            return this;
+        },
+        // actions
+        define({ useDefaultPreset = false, useDefaultOptions = false } = {}) {
+            return {
+                preset: useDefaultPreset ? Theme.getPreset() : _preset,
+                options: useDefaultOptions ? Theme.getOptions() : _options
+            };
+        },
+        update({ mergePresets = true, mergeOptions = true } = {}) {
+            const newTheme = {
+                preset: mergePresets ? SharedUtils.object.mergeKeys(Theme.getPreset(), _preset) : _preset,
+                options: mergeOptions ? { ...Theme.getOptions(), ..._options } : _options
+            };
+
+            Theme.setTheme(newTheme);
+
+            return newTheme;
+        },
+        use(options) {
+            const newTheme = this.define(options);
+
+            Theme.setTheme(newTheme);
+
+            return newTheme;
+        }
+    };
+};

components/lib/themes/utils/sharedUtils.js

@@ -61,18 +61,22 @@ export default {
 
             return mergedObj;
         },
-        mergeKeys(target = {}, source = {}) {
+        mergeKeys(...args) {
-            const mergedObj = { ...target };
+            const _mergeKeys = (target = {}, source = {}) => {
+                const mergedObj = { ...target };
 
-            Object.keys(source).forEach((key) => {
+                Object.keys(source).forEach((key) => {
-                if (this.isObject(source[key]) && key in target && this.isObject(target[key])) {
+                    if (this.isObject(source[key]) && key in target && this.isObject(target[key])) {
-                    mergedObj[key] = this.mergeKeys(target[key], source[key]);
+                        mergedObj[key] = _mergeKeys(target[key], source[key]);
-                } else {
+                    } else {
-                    mergedObj[key] = source[key];
+                        mergedObj[key] = source[key];
-                }
+                    }
-            });
+                });
 
-            return mergedObj;
+                return mergedObj;
+            };
+
+            return args.reduce((acc, obj, i) => (i === 0 ? obj : _mergeKeys(acc, obj)), {});
         },
         getItemValue(obj, ...params) {
             return this.isFunction(obj) ? obj(...params) : obj;