Tokens for Image
Cagatay Civici
parent
fdfed1d9ac
commit
0f6f5736d6
|
|
@ -186,18 +186,18 @@ const theme = ({ dt }) => `
|
|||
|
||||
@keyframes p-component-overlay-enter-animation {
|
||||
from {
|
||||
background-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
to {
|
||||
background-color: ${dt('mask.background')};
|
||||
background: ${dt('mask.background')};
|
||||
}
|
||||
}
|
||||
@keyframes p-component-overlay-leave-animation {
|
||||
from {
|
||||
background-color: ${dt('mask.background')};
|
||||
background: ${dt('mask.background')};
|
||||
}
|
||||
to {
|
||||
background-color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ const theme = ({ dt }) => `
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
--p-mask-background: ${dt('image.mask.background')};
|
||||
}
|
||||
|
||||
.p-image-preview {
|
||||
|
|
@ -30,7 +29,7 @@ const theme = ({ dt }) => `
|
|||
cursor: pointer;
|
||||
background: transparent;
|
||||
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 {
|
||||
|
|
@ -40,18 +39,27 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-image-preview-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
font-size: ${dt('image.preview.icon.size')};
|
||||
width: ${dt('image.preview.icon.size')};
|
||||
height: ${dt('image.preview.icon.size')};
|
||||
}
|
||||
|
||||
.p-image-toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
top: ${dt('image.toolbar.position.top')};
|
||||
right: ${dt('image.toolbar.position.right')};
|
||||
left: ${dt('image.toolbar.position.left')};
|
||||
bottom: ${dt('image.toolbar.position.bottom')};
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
padding: 1rem;
|
||||
gap: 0.5rem;
|
||||
padding: ${dt('image.toolbar.padding')};
|
||||
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 {
|
||||
|
|
@ -60,16 +68,16 @@ const theme = ({ dt }) => `
|
|||
align-items: center;
|
||||
color: ${dt('image.action.color')};
|
||||
background: transparent;
|
||||
width: 3rem;
|
||||
width: ${dt('image.action.size')};
|
||||
height: ${dt('image.action.size')};
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
border-radius: ${dt('image.action.border.radius')};
|
||||
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 {
|
||||
|
|
@ -78,14 +86,15 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-image-action:focus-visible {
|
||||
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
|
||||
outline-offset: ${dt('focus.ring.offset')};
|
||||
box-shadow: ${dt('toolbar.action.focus.ring.shadow')};
|
||||
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 {
|
||||
font-size: 1.5rem;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
font-size: ${dt('image.action.icon.size')};
|
||||
width: ${dt('image.action.icon.size')};
|
||||
height: ${dt('image.action.icon.size')};
|
||||
}
|
||||
|
||||
.p-image-action.p-disabled {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,41 @@
|
|||
export default {
|
||||
previewMask: {
|
||||
background: '{mask.background}',
|
||||
color: '{surface.200}'
|
||||
preview: {
|
||||
icon: {
|
||||
size: '1.5rem'
|
||||
},
|
||||
mask: {
|
||||
background: '{mask.background}',
|
||||
color: '{mask.color}'
|
||||
}
|
||||
},
|
||||
mask: {
|
||||
background: 'rgba(0,0,0,0.9)'
|
||||
toolbar: {
|
||||
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: {
|
||||
hoverBackground: 'rgba(255,255,255,0.1)',
|
||||
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}'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -236,7 +236,10 @@ export default {
|
|||
color: '{primary.700}',
|
||||
focusColor: '{primary.800}'
|
||||
},
|
||||
maskBackground: 'rgba(0,0,0,0.4)',
|
||||
mask: {
|
||||
background: 'rgba(0,0,0,0.4)',
|
||||
color: '{surface.200}'
|
||||
},
|
||||
formField: {
|
||||
background: '{surface.0}',
|
||||
disabledBackground: '{surface.200}',
|
||||
|
|
@ -355,7 +358,10 @@ export default {
|
|||
color: '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: {
|
||||
background: '{surface.950}',
|
||||
disabledBackground: '{surface.700}',
|
||||
|
|
|
|||
|
|
@ -1,14 +1,41 @@
|
|||
export default {
|
||||
previewMask: {
|
||||
background: '{mask.background}',
|
||||
color: '{surface.200}'
|
||||
preview: {
|
||||
icon: {
|
||||
size: '1.5rem'
|
||||
},
|
||||
mask: {
|
||||
background: '{mask.background}',
|
||||
color: '{mask.color}'
|
||||
}
|
||||
},
|
||||
mask: {
|
||||
background: 'rgba(0,0,0,0.9)'
|
||||
toolbar: {
|
||||
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: {
|
||||
hoverBackground: 'rgba(255,255,255,0.1)',
|
||||
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}'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -238,7 +238,10 @@ export default {
|
|||
focusRing: {
|
||||
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: {
|
||||
background: '{surface.0}',
|
||||
disabledBackground: '{surface.200}',
|
||||
|
|
@ -360,7 +363,10 @@ export default {
|
|||
focusRing: {
|
||||
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: {
|
||||
background: '{surface.950}',
|
||||
disabledBackground: '{surface.700}',
|
||||
|
|
|
|||
Loading…
Reference in New Issue