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

Theming API: Refactor on internal CSS variables

pull/5507/head
mertsincan 2024-03-28 14:26:59 +00:00
parent c61840859f
commit b94d91e677
10 changed files with 49 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/base/style/BaseStyle.js
View File

@ -1,4 +1,4 @@
import Theme from 'primevue/themes';
import Theme, { $dt } from 'primevue/themes';
import { useStyle } from 'primevue/usestyle';
import { ObjectUtils } from 'primevue/utils';
@ -21,7 +21,7 @@ const css = `
.p-overflow-hidden {
overflow: hidden;
padding-right: var(--scrollbar-width);
padding-right: ${$dt('scrollbar.width')};
}
`;

3
components/lib/confirmpopup/ConfirmPopup.vue
View File

@ -63,6 +63,7 @@ import ConfirmationEventBus from 'primevue/confirmationeventbus';
import FocusTrap from 'primevue/focustrap';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import { $dtp } from 'primevue/themes';
import { ConnectedOverlayScrollHandler, DomHandler, ZIndexUtils } from 'primevue/utils';
import BaseConfirmPopup from './BaseConfirmPopup.vue';
@ -203,7 +204,7 @@ export default {
arrowLeft = targetOffset.left - containerOffset.left;
}
this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
this.container.style.setProperty($dtp('overlay.arrow.left').name, `${arrowLeft}px`);
if (containerOffset.top < targetOffset.top) {
this.container.setAttribute('data-p-confirm-popup-flipped', 'true');

7
components/lib/knob/BaseKnob.vue
View File

@ -1,6 +1,7 @@
<script>
import BaseComponent from 'primevue/basecomponent';
import KnobStyle from 'primevue/knob/style';
import { $dt } from 'primevue/themes';
export default {
name: 'BaseKnob',
@ -36,15 +37,15 @@ export default {
},
valueColor: {
type: String,
default: 'var(--primary-color, Black)'
default: $dt('primary.color', 'Black')
},
rangeColor: {
type: String,
default: 'var(--surface-border, LightGray)'
default: $dt('surface.border', 'LightGray')
},
textColor: {
type: String,
default: 'var(--text-color-secondary, Black)'
default: $dt('text.color.secondary', 'Black')
},
strokeWidth: {
type: Number,

6
components/lib/knob/Knob.d.ts vendored
View File

@ -151,17 +151,17 @@ export interface KnobProps {
max?: number | undefined;
/**
* Background of the value.
* @defaultValue var(--primary-color, Black)
* @defaultValue var(--<prefix>primary-color, Black)
*/
valueColor?: string | undefined;
/**
* Background color of the range.
* @defaultValue var(--surface-border, LightGray)
* @defaultValue var(--<prefix>surface-border, LightGray)
*/
rangeColor?: string | undefined;
/**
* Color of the value text.
* @defaultValue var(--text-color-secondary, Black)
* @defaultValue var(--<prefix>text-color-secondary, Black)
*/
textColor?: string | undefined;
/**

3
components/lib/overlaypanel/OverlayPanel.vue
View File

@ -18,6 +18,7 @@ import FocusTrap from 'primevue/focustrap';
import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal';
import Ripple from 'primevue/ripple';
import { $dtp } from 'primevue/themes';
import { ConnectedOverlayScrollHandler, DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
import BaseOverlayPanel from './BaseOverlayPanel.vue';
@ -154,7 +155,7 @@ export default {
arrowLeft = targetOffset.left - containerOffset.left;
}
this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
this.container.style.setProperty($dtp('overlay.arrow.left').name, `${arrowLeft}px`);
if (containerOffset.top < targetOffset.top) {
this.container.setAttribute('data-p-overlaypanel-flipped', 'true');

17
components/lib/speeddial/SpeedDial.vue
View File

@ -57,6 +57,7 @@
import Button from 'primevue/button';
import PlusIcon from 'primevue/icons/plus';
import Ripple from 'primevue/ripple';
import { $dt, $dtp } from 'primevue/themes';
import Tooltip from 'primevue/tooltip';
import { DomHandler, UniqueComponentId } from 'primevue/utils';
import BaseSpeedDial from './BaseSpeedDial.vue';
@ -97,8 +98,8 @@ export default {
const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
const hDiff = Math.abs(button.offsetHeight - firstItem.offsetHeight);
this.list.style.setProperty('--item-diff-x', `${wDiff / 2}px`);
this.list.style.setProperty('--item-diff-y', `${hDiff / 2}px`);
this.list.style.setProperty($dtp('item.diff.x').name, `${wDiff / 2}px`);
this.list.style.setProperty($dtp('item.diff.y').name, `${hDiff / 2}px`);
}
}
@ -365,14 +366,14 @@ export default {
const step = (2 * Math.PI) / length;
return {
left: `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`,
top: `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`
left: `calc(${radius * Math.cos(step * index)}px + ${$dt('item.diff.x', '0px')})`,
top: `calc(${radius * Math.sin(step * index)}px + ${$dt('item.diff.y', '0px')})`
};
} else if (type === 'semi-circle') {
const direction = this.direction;
const step = Math.PI / (length - 1);
const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
const x = `calc(${radius * Math.cos(step * index)}px + ${$dt('item.diff.x', '0px')})`;
const y = `calc(${radius * Math.sin(step * index)}px + ${$dt('item.diff.y', '0px')})`;
if (direction === 'up') {
return { left: x, bottom: y };
@ -386,8 +387,8 @@ export default {
} else if (type === 'quarter-circle') {
const direction = this.direction;
const step = Math.PI / (2 * (length - 1));
const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
const x = `calc(${radius * Math.cos(step * index)}px + ${$dt('item.diff.x', '0px')})`;
const y = `calc(${radius * Math.sin(step * index)}px + ${$dt('item.diff.y', '0px')})`;
if (direction === 'up-left') {
return { right: x, bottom: y };

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;

10
components/lib/utils/DomHandler.js
View File

@ -1,3 +1,5 @@
import { $dt, $dtp } from 'primevue/themes';
export default {
innerWidth(el) {
if (el) {
@ -326,7 +328,7 @@ export default {
element.style.top = top + 'px';
element.style.left = left + 'px';
element.style.transformOrigin = origin;
gutter && (element.style.marginTop = origin === 'bottom' ? 'calc(var(--p-anchor-gutter) * -1)' : 'calc(var(--p-anchor-gutter))');
gutter && (element.style.marginTop = origin === 'bottom' ? $dt('{anchor.gutter} * -1') : $dt('anchor.gutter'));
}
},
@ -365,7 +367,7 @@ export default {
element.style.top = top + 'px';
element.style.left = left + 'px';
element.style.transformOrigin = origin;
gutter && (element.style.marginTop = origin === 'bottom' ? 'calc(var(--p-anchor-gutter) * -1)' : 'calc(var(--p-anchor-gutter))');
gutter && (element.style.marginTop = origin === 'bottom' ? $dt('{anchor.gutter} * -1') : $dt('anchor.gutter'));
}
},
@ -849,12 +851,12 @@ export default {
},
blockBodyScroll(className = 'p-overflow-hidden') {
document.body.style.setProperty('--scrollbar-width', this.calculateBodyScrollbarWidth() + 'px');
document.body.style.setProperty($dtp('scrollbar.width').name, this.calculateBodyScrollbarWidth() + 'px');
this.addClass(document.body, className);
},
unblockBodyScroll(className = 'p-overflow-hidden') {
document.body.style.removeProperty('--scrollbar-width');
document.body.style.removeProperty($dtp('scrollbar.width').name);
this.removeClass(document.body, className);
}
};