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

Refactored Image component design tokens

pull/5701/head
Cagatay Civici 2024-05-04 22:36:38 +03:00
parent 4870d66609
commit 24b647d48a
5 changed files with 58 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
components/lib/galleria/style/GalleriaStyle.js
View File

@ -18,7 +18,7 @@ const theme = ({ dt }) => `
height: 100%; height: 100%;
} }
.p-galleria-navigate-button { .p-galleria-nav-button {
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -0.5rem; margin-top: -0.5rem;
@ -27,7 +27,7 @@ const theme = ({ dt }) => `
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
background: transparent; background: transparent;
color: ${dt('galleria.navigator.color')}; color: ${dt('galleria.nav.button.color')};
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
@ -39,8 +39,8 @@ const theme = ({ dt }) => `
cursor: pointer; cursor: pointer;
} }
.p-galleria-navigate-button:not(.p-disabled):hover { .p-galleria-nav-button:not(.p-disabled):hover {
background: ${dt('galleria.navigator.hover.background')}; background: ${dt('galleria.nav.button.hover.background')};
} }
.p-galleria-next-icon, .p-galleria-next-icon,
@ -66,18 +66,18 @@ const theme = ({ dt }) => `
width: 100%; width: 100%;
} }
.p-galleria-hover-navigators .p-galleria-navigate-button { .p-galleria-hover-navigators .p-galleria-nav-button {
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transition: opacity ${dt('transition.duration')} ease-in-out; transition: opacity ${dt('transition.duration')} ease-in-out;
} }
.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-navigate-button { .p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button {
pointer-events: all; pointer-events: all;
opacity: 1; opacity: 1;
} }
.p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-navigate-button.p-disabled { .p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-nav-button.p-disabled {
pointer-events: none; pointer-events: none;
} }
@ -98,8 +98,7 @@ const theme = ({ dt }) => `
flex-shrink: 0; flex-shrink: 0;
} }
.p-galleria-thumbnail-prev-button, .p-galleria-thumbnail-nav-button {
.p-galleria-thumbnail-next-button {
align-self: center; align-self: center;
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
@ -113,7 +112,7 @@ const theme = ({ dt }) => `
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
color: ${dt('galleria.thumbnail.navigator.color')}; color: ${dt('galleria.thumbnail.nav.button.color')};
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
@ -121,20 +120,17 @@ const theme = ({ dt }) => `
border-radius: 50%; border-radius: 50%;
} }
.p-galleria-thumbnail-prev-button:hover, .p-galleria-thumbnail-nav-button:hover {
.p-galleria-thumbnail-next-button:hover { background: ${dt('galleria.thumbnail.nav.button.hover.background')};
background: ${dt('galleria.thumbnail.navigator.hover.background')}; color: ${dt('galleria.thumbnail.nav.button.hover.color')};
color: ${dt('galleria.thumbnail.navigator.hover.color')};
} }
.p-galleria-thumbnail-prev-button:focus-visible, .p-galleria-thumbnail-nav-button:focus-visible {
.p-galleria-thumbnail-next-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
.p-galleria-thumbnail-prev-button span, .p-galleria-thumbnail-nav-button span {
.p-galleria-thumbnail-next-button span {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -143,7 +139,7 @@ const theme = ({ dt }) => `
.p-galleria-thumbnails-content { .p-galleria-thumbnails-content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background: ${dt('galleria.thumbnail.container.background')}; background: ${dt('galleria.thumbnails.content.background')};
padding: 1rem 0.25rem; padding: 1rem 0.25rem;
} }
@ -228,7 +224,7 @@ const theme = ({ dt }) => `
.p-galleria-indicator-button { .p-galleria-indicator-button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
background: ${dt('galleria.indicator.background')}; background: ${dt('galleria.indicator.button.background')};
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
@ -242,7 +238,7 @@ const theme = ({ dt }) => `
} }
.p-galleria-indicator-button:hover { .p-galleria-indicator-button:hover {
background: ${dt('galleria.indicator.hover.background')}; background: ${dt('galleria.indicator.button.hover.background')};
} }
.p-galleria-indicator-button:focus-visible { .p-galleria-indicator-button:focus-visible {
@ -251,7 +247,7 @@ const theme = ({ dt }) => `
} }
.p-galleria-indicator-active .p-galleria-indicator-button { .p-galleria-indicator-active .p-galleria-indicator-button {
background-color: ${dt('galleria.indicator.active.background')}; background-color: ${dt('galleria.indicator.button.active.background')};
} }
.p-galleria-indicators-left .p-galleria-items-container, .p-galleria-indicators-left .p-galleria-items-container,
@ -279,19 +275,19 @@ const theme = ({ dt }) => `
position: absolute; position: absolute;
display: flex; display: flex;
z-index: 1; z-index: 1;
background: ${dt('galleria.inset.indicators.background')}; background: ${dt('galleria.inset.indicator.list.background')};
} }
.p-galleria-inset-indicators .p-galleria-indicator-button { .p-galleria-inset-indicators .p-galleria-indicator-button {
background: ${dt('galleria.inset.indicator.background')}; background: ${dt('galleria.inset.indicator.button.background')};
} }
.p-galleria-inset-indicators .p-galleria-indicator-button:hover { .p-galleria-inset-indicators .p-galleria-indicator-button:hover {
background: ${dt('galleria.inset.indicator.hover.background')}; background: ${dt('galleria.inset.indicator.button.hover.background')};
} }
.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button { .p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button {
background: ${dt('galleria.inset.indicator.active.background')}; background: ${dt('galleria.inset.indicator.button.active.background')};
} }
.p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list { .p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicator-list {
@ -344,7 +340,7 @@ const theme = ({ dt }) => `
overflow: hidden; overflow: hidden;
margin: 0.5rem; margin: 0.5rem;
background: transparent; background: transparent;
color: ${dt('galleria.close.color')}; color: ${dt('galleria.close.button.color')};
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
padding: 0; padding: 0;
@ -363,8 +359,8 @@ const theme = ({ dt }) => `
} }
.p-galleria-close-button:hover { .p-galleria-close-button:hover {
background: ${dt('galleria.close.hover.background')}; background: ${dt('galleria.close.button.hover.background')};
color: ${dt('galleria.close.hover.color')}; color: ${dt('galleria.close.button.hover.color')};
} }
.p-galleria-close-button:focus-visible { .p-galleria-close-button:focus-visible {
@ -372,7 +368,7 @@ const theme = ({ dt }) => `
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
.p-galleria-mask .p-galleria-navigate-button { .p-galleria-mask .p-galleria-nav-button {
position: fixed; position: fixed;
top: 50%; top: 50%;
margin-top: -0.5rem; margin-top: -0.5rem;
@ -392,7 +388,7 @@ const theme = ({ dt }) => `
transform: scale(0.7); transform: scale(0.7);
} }
.p-galleria-enter-active .p-galleria-navigate-button { .p-galleria-enter-active .p-galleria-nav-button {
opacity: 0; opacity: 0;
} }
@ -435,7 +431,7 @@ const classes = {
itemsContainer: 'p-galleria-items-container', itemsContainer: 'p-galleria-items-container',
items: 'p-galleria-items', items: 'p-galleria-items',
previousItemButton: ({ instance }) => [ previousItemButton: ({ instance }) => [
'p-galleria-prev-button p-galleria-navigate-button', 'p-galleria-prev-button p-galleria-nav-button',
{ {
'p-disabled': instance.isNavBackwardDisabled() 'p-disabled': instance.isNavBackwardDisabled()
} }
@ -443,7 +439,7 @@ const classes = {
previousItemIcon: 'p-galleria-prev-icon', previousItemIcon: 'p-galleria-prev-icon',
item: 'p-galleria-item', item: 'p-galleria-item',
nextItemButton: ({ instance }) => [ nextItemButton: ({ instance }) => [
'p-galleria-next-button p-galleria-navigate-button', 'p-galleria-next-button p-galleria-nav-button',
{ {
'p-disabled': instance.isNavForwardDisabled() 'p-disabled': instance.isNavForwardDisabled()
} }
@ -461,7 +457,7 @@ const classes = {
thumbnails: 'p-galleria-thumbnails', thumbnails: 'p-galleria-thumbnails',
thumbnailContent: 'p-galleria-thumbnails-content', thumbnailContent: 'p-galleria-thumbnails-content',
previousThumbnailButton: ({ instance }) => [ previousThumbnailButton: ({ instance }) => [
'p-galleria-thumbnail-prev-button', 'p-galleria-thumbnail-prev-button p-galleria-thumbnail-nav-button',
{ {
'p-disabled': instance.isNavBackwardDisabled() 'p-disabled': instance.isNavBackwardDisabled()
} }
@ -480,7 +476,7 @@ const classes = {
], ],
thumbnail: 'p-galleria-thumbnail', thumbnail: 'p-galleria-thumbnail',
nextThumbnailButton: ({ instance }) => [ nextThumbnailButton: ({ instance }) => [
'p-galleria-thumbnail-next-button', 'p-galleria-thumbnail-next-button p-galleria-thumbnail-nav-button',
{ {
'p-disabled': instance.isNavForwardDisabled() 'p-disabled': instance.isNavForwardDisabled()
} }

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

@ -29,14 +29,14 @@ const theme = ({ dt }) => `
padding: 0; padding: 0;
cursor: pointer; cursor: pointer;
background: transparent; background: transparent;
color: ${dt('image.preview.indicator.color')}; color: ${dt('image.preview.mask.color')};
transition: background-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')};
} }
.p-image-preview:hover > .p-image-preview-mask { .p-image-preview:hover > .p-image-preview-mask {
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
background: ${dt('image.preview.indicator.background')}; background: ${dt('image.preview.mask.background')};
} }
.p-image-preview-icon { .p-image-preview-icon {

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

@ -1,11 +1,6 @@
export default { export default {
colorScheme: { colorScheme: {
light: { light: {
navigator: {
color: '{surface.500}',
hoverColor: '{surface.600}',
hoverBackground: '{surface.100}'
},
indicator: { indicator: {
background: '{surface.200}', background: '{surface.200}',
hoverBackground: '{surface.300}', hoverBackground: '{surface.300}',
@ -13,11 +8,6 @@ export default {
} }
}, },
dark: { dark: {
navigator: {
color: '{surface.400}',
hoverColor: '{surface.300}',
hoverBackground: '{surface.800}'
},
indicator: { indicator: {
background: '{surface.700}', background: '{surface.700}',
hoverBackground: '{surface.600}', hoverBackground: '{surface.600}',

28
components/lib/themes/aura/galleria/index.js
View File

@ -1,31 +1,31 @@
export default { export default {
colorScheme: { colorScheme: {
light: { light: {
navigator: { navButton: {
hoverBackground: 'rgba(255, 255, 255, 0.1)', hoverBackground: 'rgba(255, 255, 255, 0.1)',
color: '{surface.100}' color: '{surface.100}'
}, },
thumbnailNavigator: { thumbnailNavButton: {
hoverBackground: '{surface.200}', hoverBackground: '{surface.200}',
color: '{surface.600}', color: '{surface.600}',
hoverColor: '{surface.700}' hoverColor: '{surface.700}'
}, },
thumbnailContainer: { thumbnailsContent: {
background: '{surface.50}' background: '{surface.50}'
}, },
caption: { caption: {
background: 'rgba(0, 0, 0, 0.5)', background: 'rgba(0, 0, 0, 0.5)',
color: '{surface.100}' color: '{surface.100}'
}, },
indicator: { indicatorButton: {
background: '{surface.200}', background: '{surface.200}',
hoverBackground: '{surface.300}', hoverBackground: '{surface.300}',
activeBackground: '{primary.color}' activeBackground: '{primary.color}'
}, },
insetIndicators: { insetIndicatorList: {
background: 'rgba(0, 0, 0, 0.5)' background: 'rgba(0, 0, 0, 0.5)'
}, },
insetIndicator: { insetIndicatorButton: {
background: 'rgba(255, 255, 255, 0.4)', background: 'rgba(255, 255, 255, 0.4)',
hoverBackground: 'rgba(255, 255, 255, 0.6)', hoverBackground: 'rgba(255, 255, 255, 0.6)',
activeBackground: 'rgba(255, 255, 255, 0.9)' activeBackground: 'rgba(255, 255, 255, 0.9)'
@ -33,38 +33,38 @@ export default {
mask: { mask: {
background: 'rgba(0,0,0,0.9)' background: 'rgba(0,0,0,0.9)'
}, },
close: { closeButton: {
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}'
} }
}, },
dark: { dark: {
navigator: { navButton: {
hoverBackground: 'rgba(255, 255, 255, 0.1)', hoverBackground: 'rgba(255, 255, 255, 0.1)',
color: '{surface.400}' color: '{surface.400}'
}, },
thumbnailNavigator: { thumbnailNavButton: {
hoverBackground: '{surface.800}', hoverBackground: '{surface.800}',
color: '{surface.400}', color: '{surface.400}',
hoverColor: '{surface.300}' hoverColor: '{surface.300}'
}, },
thumbnailContainer: { thumbnailsContent: {
background: '{surface.950}' background: '{surface.950}'
}, },
caption: { caption: {
background: 'rgba(0, 0, 0, 0.5)', background: 'rgba(0, 0, 0, 0.5)',
color: '{surface.100}' color: '{surface.100}'
}, },
indicator: { indicatorButton: {
background: '{surface.200}', background: '{surface.200}',
hoverBackground: '{surface.300}', hoverBackground: '{surface.300}',
activeBackground: '{primary.color}' activeBackground: '{primary.color}'
}, },
insetIndicators: { insetIndicatorList: {
background: 'rgba(0, 0, 0, 0.5)' background: 'rgba(0, 0, 0, 0.5)'
}, },
insetIndicator: { insetIndicatorButton: {
background: 'rgba(255, 255, 255, 0.4)', background: 'rgba(255, 255, 255, 0.4)',
hoverBackground: 'rgba(255, 255, 255, 0.6)', hoverBackground: 'rgba(255, 255, 255, 0.6)',
activeBackground: 'rgba(255, 255, 255, 0.9)' activeBackground: 'rgba(255, 255, 255, 0.9)'
@ -72,7 +72,7 @@ export default {
mask: { mask: {
background: 'rgba(0,0,0,0.9)' background: 'rgba(0,0,0,0.9)'
}, },
close: { closeButton: {
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}'

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

@ -1,8 +1,6 @@
export default { export default {
colorScheme: { previewMask: {
light: { background: '{mask.background}',
previewIndicator: {
background: '{maskBackground}',
color: '{surface.200}' color: '{surface.200}'
}, },
mask: { mask: {
@ -13,20 +11,4 @@ export default {
color: '{surface.50}', color: '{surface.50}',
hoverColor: '{surface.0}' hoverColor: '{surface.0}'
} }
},
dark: {
previewIndicator: {
background: '{maskBackground}',
color: '{surface.200}'
},
mask: {
background: 'rgba(0,0,0,0.9)'
},
action: {
hoverBackground: 'rgba(255,255,255,0.1)',
color: '{surface.50}',
hoverColor: '{surface.0}'
}
}
}
}; };