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-prev-button,
.p-carousel-next-button { .p-carousel-next-button {
align-self: center; align-self: center;
flex-shrink: 0;
} }
.p-carousel-indicator-list { .p-carousel-indicator-list {

View File

@ -38,7 +38,7 @@ export default {
style: 'none', style: 'none',
color: 'unset', color: 'unset',
offset: '0', 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', disabledOpacity: '0.38',
iconSize: '1rem', iconSize: '1rem',

View File

@ -7,18 +7,18 @@ export default {
}, },
indicatorList: { indicatorList: {
padding: '1rem', padding: '1rem',
gap: '0.5rem' gap: '1rem'
}, },
indicator: { indicator: {
width: '2rem', width: '1.25rem',
height: '0.5rem', height: '1.25rem',
borderRadius: '{content.border.radius}', borderRadius: '50%',
focusRing: { focusRing: {
width: '{focus.ring.width}', width: '0',
style: '{focus.ring.style}', style: 'none',
color: '{focus.ring.color}', color: 'unset',
offset: '{focus.ring.offset}', offset: '0',
shadow: '{focus.ring.shadow}' shadow: 'none'
} }
}, },
colorScheme: { colorScheme: {
@ -36,5 +36,22 @@ export default {
activeBackground: '{primary.color}' 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: { dark: {
root: { root: {
background: '{surface.800}', background: '{surface.700}',
color: '{surface.0}' color: '{surface.0}'
}, },
icon: { icon: {

View File

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

View File

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

View File

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