Material misc and media

pull/6275/head^2
Cagatay Civici 2024-10-01 12:21:36 +03:00
parent 1506492bee
commit 21ae03bfce
7 changed files with 52 additions and 34 deletions

View File

@ -31,6 +31,7 @@ const theme = ({ dt }) => `
.p-carousel-prev-button,
.p-carousel-next-button {
align-self: center;
flex-shrink: 0;
}
.p-carousel-indicator-list {

View File

@ -38,7 +38,7 @@ export default {
style: 'none',
color: 'unset',
offset: '0',
shadow: '0 0 1px 8px color-mix(in srgb, {surface.900}, transparent 88%)'
shadow: '0 0 1px 4px color-mix(in srgb, {surface.900}, transparent 88%)'
},
disabledOpacity: '0.38',
iconSize: '1rem',

View File

@ -7,18 +7,18 @@ export default {
},
indicatorList: {
padding: '1rem',
gap: '0.5rem'
gap: '1rem'
},
indicator: {
width: '2rem',
height: '0.5rem',
borderRadius: '{content.border.radius}',
width: '1.25rem',
height: '1.25rem',
borderRadius: '50%',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
width: '0',
style: 'none',
color: 'unset',
offset: '0',
shadow: 'none'
}
},
colorScheme: {
@ -36,5 +36,22 @@ export default {
activeBackground: '{primary.color}'
}
}
},
style: ({ dt }) => `
.p-carousel-indicator-button:hover {
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%);
}
.p-carousel-indicator-button:focus-visible {
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%);
}
.p-carousel-indicator-active .p-carousel-indicator-button:hover {
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('carousel.indicator.active.background')}, transparent 92%);
}
.p-carousel-indicator-active .p-carousel-indicator-button:focus-visible {
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('carousel.indicator.active.background')}, transparent 84%);
}
`
};

View File

@ -38,7 +38,7 @@ export default {
},
dark: {
root: {
background: '{surface.800}',
background: '{surface.700}',
color: '{surface.0}'
},
icon: {

View File

@ -35,7 +35,7 @@ export default {
},
thumbnailNavButton: {
size: '2rem',
borderRadius: '{content.border.radius}',
borderRadius: '50%',
gutter: '0.5rem',
focusRing: {
width: '{focus.ring.width}',

View File

@ -2,7 +2,7 @@ export default {
root: {
background: '{content.border.color}',
borderRadius: '{content.border.radius}',
height: '1.25rem'
height: '1rem'
},
value: {
background: '{primary.color}'

View File

@ -13,28 +13,28 @@ export default {
colorScheme: {
light: {
primary: {
background: '{primary.100}',
color: '{primary.700}'
background: '{primary.color}',
color: '{primary.contrast.color}'
},
secondary: {
background: '{surface.100}',
color: '{surface.600}'
},
success: {
background: '{green.100}',
color: '{green.700}'
background: '{green.500}',
color: '{surface.0}'
},
info: {
background: '{sky.100}',
color: '{sky.700}'
background: '{sky.500}',
color: '{surface.0}'
},
warn: {
background: '{orange.100}',
color: '{orange.700}'
background: '{orange.500}',
color: '{surface.0}'
},
danger: {
background: '{red.100}',
color: '{red.700}'
background: '{red.500}',
color: '{surface.0}'
},
contrast: {
background: '{surface.950}',
@ -43,28 +43,28 @@ export default {
},
dark: {
primary: {
background: 'color-mix(in srgb, {primary.500}, transparent 84%)',
color: '{primary.300}'
background: '{primary.color}',
color: '{primary.contrast.color}'
},
secondary: {
background: '{surface.800}',
color: '{surface.300}'
},
success: {
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
color: '{green.300}'
background: '{green.400}',
color: '{green.950}'
},
info: {
background: 'color-mix(in srgb, {sky.500}, transparent 84%)',
color: '{sky.300}'
background: '{sky.400}',
color: '{sky.950}'
},
warn: {
background: 'color-mix(in srgb, {orange.500}, transparent 84%)',
color: '{orange.300}'
background: '{orange.400}',
color: '{orange.950}'
},
danger: {
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
color: '{red.300}'
background: '{red.400}',
color: '{red.950}'
},
contrast: {
background: '{surface.0}',