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

Tokens for Image

pull/5756/head
Cagatay Civici 2024-05-13 12:10:09 +03:00
parent fdfed1d9ac
commit 0f6f5736d6
6 changed files with 112 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -186,18 +186,18 @@ const theme = ({ dt }) => `
@keyframes p-component-overlay-enter-animation { @keyframes p-component-overlay-enter-animation {
from { from {
background-color: transparent; background: transparent;
} }
to { to {
background-color: ${dt('mask.background')}; background: ${dt('mask.background')};
} }
} }
@keyframes p-component-overlay-leave-animation { @keyframes p-component-overlay-leave-animation {
from { from {
background-color: ${dt('mask.background')}; background: ${dt('mask.background')};
} }
to { to {
background-color: transparent; background: transparent;
} }
} }
`; `;

43
components/lib/image/style/ImageStyle.js
View File

@ -5,7 +5,6 @@ const theme = ({ dt }) => `
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
--p-mask-background: ${dt('image.mask.background')};
} }
.p-image-preview { .p-image-preview {
@ -30,7 +29,7 @@ const theme = ({ dt }) => `
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
color: ${dt('image.preview.mask.color')}; color: ${dt('image.preview.mask.color')};
transition: background-color ${dt('transition.duration')}; transition: background ${dt('transition.duration')};
} }
.p-image-preview:hover > .p-image-preview-mask { .p-image-preview:hover > .p-image-preview-mask {
@ -40,18 +39,27 @@ const theme = ({ dt }) => `
} }
.p-image-preview-icon { .p-image-preview-icon {
width: 1.5rem; font-size: ${dt('image.preview.icon.size')};
height: 1.5rem; width: ${dt('image.preview.icon.size')};
height: ${dt('image.preview.icon.size')};
} }
.p-image-toolbar { .p-image-toolbar {
position: absolute; position: absolute;
top: 0; top: ${dt('image.toolbar.position.top')};
right: 0; right: ${dt('image.toolbar.position.right')};
left: ${dt('image.toolbar.position.left')};
bottom: ${dt('image.toolbar.position.bottom')};
display: flex; display: flex;
z-index: 1; z-index: 1;
padding: 1rem; padding: ${dt('image.toolbar.padding')};
gap: 0.5rem; background: ${dt('image.toolbar.background')};
backdrop-filter: blur(${dt('image.toolbar.blur')});
border-color: ${dt('image.toolbar.border.color')};
border-style: solid;
border-width: ${dt('image.toolbar.border.width')};
border-radius: ${dt('image.toolbar.border.radius')};
gap: ${dt('image.toolbar.gap')};
} }
.p-image-action { .p-image-action {
@ -60,16 +68,16 @@ const theme = ({ dt }) => `
align-items: center; align-items: center;
color: ${dt('image.action.color')}; color: ${dt('image.action.color')};
background: transparent; background: transparent;
width: 3rem; width: ${dt('image.action.size')};
height: ${dt('image.action.size')};
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0 none; border: 0 none;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
height: 3rem; border-radius: ${dt('image.action.border.radius')};
border-radius: 50%;
outline-color: transparent; outline-color: transparent;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
} }
.p-image-action:hover { .p-image-action:hover {
@ -78,14 +86,15 @@ const theme = ({ dt }) => `
} }
.p-image-action:focus-visible { .p-image-action:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; box-shadow: ${dt('toolbar.action.focus.ring.shadow')};
outline-offset: ${dt('focus.ring.offset')}; outline: ${dt('toolbar.action.focus.ring.width')} ${dt('toolbar.action.focus.ring.style')} ${dt('toolbar.action.focus.ring.color')};
outline-offset: ${dt('toolbar.action.focus.ring.offset')};
} }
.p-image-action .p-icon { .p-image-action .p-icon {
font-size: 1.5rem; font-size: ${dt('image.action.icon.size')};
width: 1.5rem; width: ${dt('image.action.icon.size')};
height: 1.5rem; height: ${dt('image.action.icon.size')};
} }
.p-image-action.p-disabled { .p-image-action.p-disabled {

39
components/lib/themes/aura/image/index.js
View File

@ -1,14 +1,41 @@
export default { export default {
previewMask: { preview: {
background: '{mask.background}', icon: {
color: '{surface.200}' size: '1.5rem'
},
mask: {
background: '{mask.background}',
color: '{mask.color}'
}
}, },
mask: { toolbar: {
background: 'rgba(0,0,0,0.9)' position: {
left: 'auto',
right: '1rem',
top: '1rem',
bottom: 'auto'
},
blur: '8px',
background: 'rgba(255,255,255,0.1)',
borderColor: 'rgba(255,255,255,0.2)',
borderWidth: '1px',
borderRadius: '{30px}',
padding: '.5rem',
gap: '0.5rem'
}, },
action: { action: {
hoverBackground: 'rgba(255,255,255,0.1)', hoverBackground: 'rgba(255,255,255,0.1)',
color: '{surface.50}', color: '{surface.50}',
hoverColor: '{surface.0}' hoverColor: '{surface.0}',
size: '3rem',
iconSize: '1.5rem',
borderRadius: '50%',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
} }
}; };

10
components/lib/themes/aura/index.js
View File

@ -236,7 +236,10 @@ export default {
color: '{primary.700}', color: '{primary.700}',
focusColor: '{primary.800}' focusColor: '{primary.800}'
}, },
maskBackground: 'rgba(0,0,0,0.4)', mask: {
background: 'rgba(0,0,0,0.4)',
color: '{surface.200}'
},
formField: { formField: {
background: '{surface.0}', background: '{surface.0}',
disabledBackground: '{surface.200}', disabledBackground: '{surface.200}',
@ -355,7 +358,10 @@ export default {
color: 'rgba(255,255,255,.87)', color: 'rgba(255,255,255,.87)',
focusColor: 'rgba(255,255,255,.87)' focusColor: 'rgba(255,255,255,.87)'
}, },
maskBackground: 'rgba(0,0,0,0.4)', mask: {
background: 'rgba(0,0,0,0.4)',
color: '{surface.200}'
},
formField: { formField: {
background: '{surface.950}', background: '{surface.950}',
disabledBackground: '{surface.700}', disabledBackground: '{surface.700}',

39
components/lib/themes/lara/image/index.js
View File

@ -1,14 +1,41 @@
export default { export default {
previewMask: { preview: {
background: '{mask.background}', icon: {
color: '{surface.200}' size: '1.5rem'
},
mask: {
background: '{mask.background}',
color: '{mask.color}'
}
}, },
mask: { toolbar: {
background: 'rgba(0,0,0,0.9)' position: {
left: 'auto',
right: '1rem',
top: '1rem',
bottom: 'auto'
},
blur: '8px',
background: 'rgba(255,255,255,0.1)',
borderColor: 'rgba(255,255,255,0.2)',
borderWidth: '1px',
borderRadius: '{content.border.radius}',
padding: '.5rem',
gap: '0.5rem'
}, },
action: { action: {
hoverBackground: 'rgba(255,255,255,0.1)', hoverBackground: 'rgba(255,255,255,0.1)',
color: '{surface.50}', color: '{surface.50}',
hoverColor: '{surface.0}' hoverColor: '{surface.0}',
size: '3rem',
iconSize: '1.5rem',
borderRadius: '{content.border.radius}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
} }
}; };

10
components/lib/themes/lara/index.js
View File

@ -238,7 +238,10 @@ export default {
focusRing: { focusRing: {
shadow: '0 0 0 0.2rem {primary.200}' shadow: '0 0 0 0.2rem {primary.200}'
}, },
maskBackground: 'rgba(0,0,0,0.4)', mask: {
background: 'rgba(0,0,0,0.4)',
color: '{surface.200}'
},
formField: { formField: {
background: '{surface.0}', background: '{surface.0}',
disabledBackground: '{surface.200}', disabledBackground: '{surface.200}',
@ -360,7 +363,10 @@ export default {
focusRing: { focusRing: {
shadow: '0 0 0 0.2rem color-mix(in srgb, {primary.color}, transparent 80%)' shadow: '0 0 0 0.2rem color-mix(in srgb, {primary.color}, transparent 80%)'
}, },
maskBackground: 'rgba(0,0,0,0.4)', mask: {
background: 'rgba(0,0,0,0.4)',
color: '{surface.200}'
},
formField: { formField: {
background: '{surface.950}', background: '{surface.950}',
disabledBackground: '{surface.700}', disabledBackground: '{surface.700}',