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

Theming API: Refactor on internal CSS variables

Browse source
This commit is contained in:
mertsincan 2024-03-28 14:26:59 +00:00
parent c61840859f
commit b94d91e677
10 changed files with 49 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

22
components/lib/themes/helpers/dt.js
View file

@ -1,12 +1,14 @@
import Theme, { SharedUtils } from 'primevue/themes';
export const $dt = (tokenPath, type) => {
const types = ['value', 'variable'];
export const $dt = (tokenPath, param1, param2) => {
const config = Theme.getPConfig();
return dt(config?.theme, tokenPath, undefined, type);
return types.includes(param1) ? dt(config?.theme, tokenPath, undefined, param2) : dt(config?.theme, tokenPath, param1, param2);
};
export const dt = (theme = {}, tokenPath, fallback, type) => {
export const dt = (theme = {}, tokenPath, fallback, type = 'variable') => {
if (tokenPath) {
const VARIABLE = Theme.defaults.variable;
const { prefix, transform } = theme?.options || {};
@ -19,3 +21,17 @@ export const dt = (theme = {}, tokenPath, fallback, type) => {
return '';
};
export const $dtp = (tokenPath) => {
const config = Theme.getPConfig();
const variable = dt(config?.theme, tokenPath, undefined, 'variable');
const name = variable.match(/--[\w-]+/g)?.[0];
const value = dt(config?.theme, tokenPath, undefined, 'value');
return {
variable,
name,
value
};
};

2
components/lib/themes/primeone/base/confirmpopup/index.js
View file

@ -68,7 +68,7 @@ export default {
.p-confirm-popup:after,
.p-confirm-popup:before {
bottom: 100%;
left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
left: ${dt('{overlay.arrow.left} + 1.25rem', 0)};
content: " ";
height: 0;
width: 0;

2
components/lib/themes/primeone/base/overlaypanel/index.js
View file

@ -66,7 +66,7 @@ export default {
.p-overlaypanel:after,
.p-overlaypanel:before {
bottom: 100%;
left: calc(var(--overlayArrowLeft, 0) + 1.25rem);
left: ${dt('{overlay.arrow.left} + 1.25rem', 0)};
content: " ";
height: 0;
width: 0;