Updated tokens for Toast and Message
parent
e239e64505
commit
a8c70f981d
|
@ -12,7 +12,7 @@ export default {
|
||||||
fontWeight: '500'
|
fontWeight: '500'
|
||||||
},
|
},
|
||||||
icon: {
|
icon: {
|
||||||
size: '1rem'
|
size: '1.125rem'
|
||||||
},
|
},
|
||||||
closeButton: {
|
closeButton: {
|
||||||
width: '1.75rem',
|
width: '1.75rem',
|
||||||
|
@ -33,7 +33,7 @@ export default {
|
||||||
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
|
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
|
||||||
borderColor: '{blue.200}',
|
borderColor: '{blue.200}',
|
||||||
color: '{blue.600}',
|
color: '{blue.600}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{blue.100}',
|
hoverBackground: '{blue.100}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -46,7 +46,7 @@ export default {
|
||||||
background: 'color-mix(in srgb, {green.50}, transparent 5%)',
|
background: 'color-mix(in srgb, {green.50}, transparent 5%)',
|
||||||
borderColor: '{green.200}',
|
borderColor: '{green.200}',
|
||||||
color: '{green.600}',
|
color: '{green.600}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{green.100}',
|
hoverBackground: '{green.100}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -59,7 +59,7 @@ export default {
|
||||||
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
|
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
|
||||||
borderColor: '{yellow.200}',
|
borderColor: '{yellow.200}',
|
||||||
color: '{yellow.600}',
|
color: '{yellow.600}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{yellow.100}',
|
hoverBackground: '{yellow.100}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -72,7 +72,7 @@ export default {
|
||||||
background: 'color-mix(in srgb, {red.50}, transparent 5%)',
|
background: 'color-mix(in srgb, {red.50}, transparent 5%)',
|
||||||
borderColor: '{red.200}',
|
borderColor: '{red.200}',
|
||||||
color: '{red.600}',
|
color: '{red.600}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{red.100}',
|
hoverBackground: '{red.100}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -85,7 +85,7 @@ export default {
|
||||||
background: '{surface.100}',
|
background: '{surface.100}',
|
||||||
borderColor: '{surface.200}',
|
borderColor: '{surface.200}',
|
||||||
color: '{surface.600}',
|
color: '{surface.600}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.200}',
|
hoverBackground: '{surface.200}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -98,7 +98,7 @@ export default {
|
||||||
background: '{surface.900}',
|
background: '{surface.900}',
|
||||||
borderColor: '{surface.950}',
|
borderColor: '{surface.950}',
|
||||||
color: '{surface.50}',
|
color: '{surface.50}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.800}',
|
hoverBackground: '{surface.800}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -113,7 +113,7 @@ export default {
|
||||||
background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
|
background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
|
||||||
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
|
||||||
color: '{blue.500}',
|
color: '{blue.500}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -126,7 +126,7 @@ export default {
|
||||||
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
|
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
|
||||||
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
|
||||||
color: '{green.500}',
|
color: '{green.500}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -139,7 +139,7 @@ export default {
|
||||||
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
|
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
|
||||||
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
|
||||||
color: '{yellow.500}',
|
color: '{yellow.500}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -152,7 +152,7 @@ export default {
|
||||||
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
|
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
|
||||||
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
|
||||||
color: '{red.500}',
|
color: '{red.500}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -165,7 +165,7 @@ export default {
|
||||||
background: '{surface.800}',
|
background: '{surface.800}',
|
||||||
borderColor: '{surface.700}',
|
borderColor: '{surface.700}',
|
||||||
color: '{surface.300}',
|
color: '{surface.300}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.700}',
|
hoverBackground: '{surface.700}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -178,11 +178,11 @@ export default {
|
||||||
background: '{surface.0}',
|
background: '{surface.0}',
|
||||||
borderColor: '{surface.100}',
|
borderColor: '{surface.100}',
|
||||||
color: '{surface.950}',
|
color: '{surface.950}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.100}',
|
hoverBackground: '{surface.100}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
color: '{blue.950}',
|
color: '{surface.950}',
|
||||||
shadow: 'none'
|
shadow: 'none'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,39 @@
|
||||||
export default {
|
export default {
|
||||||
|
root: {
|
||||||
|
width: '25rem',
|
||||||
|
borderRadius: '{content.border.radius}'
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
size: '1.125rem'
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
padding: '{overlay.popover.padding}',
|
||||||
|
gap: '0.5rem'
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
gap: '0.5rem'
|
||||||
|
},
|
||||||
|
summary: {
|
||||||
|
fontWeight: '500',
|
||||||
|
fontSize: '1rem'
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
fontWeight: '500',
|
||||||
|
fontSize: '0.875rem'
|
||||||
|
},
|
||||||
|
closeButton: {
|
||||||
|
width: '1.75rem',
|
||||||
|
height: '1.75rem',
|
||||||
|
borderRadius: '50%',
|
||||||
|
focusRing: {
|
||||||
|
width: '{focus.ring.width}',
|
||||||
|
style: '{focus.ring.style}',
|
||||||
|
offset: '{focus.ring.offset}'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
closeIcon: {
|
||||||
|
size: '1rem'
|
||||||
|
},
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
blur: '1.5px',
|
blur: '1.5px',
|
||||||
|
@ -7,9 +42,13 @@ export default {
|
||||||
borderColor: '{blue.200}',
|
borderColor: '{blue.200}',
|
||||||
color: '{blue.600}',
|
color: '{blue.600}',
|
||||||
detailColor: '{surface.700}',
|
detailColor: '{surface.700}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{blue.100}'
|
hoverBackground: '{blue.100}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{blue.600}',
|
||||||
|
shadow: 'none'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
success: {
|
success: {
|
||||||
|
@ -17,9 +56,13 @@ export default {
|
||||||
borderColor: '{green.200}',
|
borderColor: '{green.200}',
|
||||||
color: '{green.600}',
|
color: '{green.600}',
|
||||||
detailColor: '{surface.700}',
|
detailColor: '{surface.700}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{green.100}'
|
hoverBackground: '{green.100}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{green.600}',
|
||||||
|
shadow: 'none'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
warn: {
|
warn: {
|
||||||
|
@ -27,9 +70,13 @@ export default {
|
||||||
borderColor: '{yellow.200}',
|
borderColor: '{yellow.200}',
|
||||||
color: '{yellow.600}',
|
color: '{yellow.600}',
|
||||||
detailColor: '{surface.700}',
|
detailColor: '{surface.700}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{yellow.100}'
|
hoverBackground: '{yellow.100}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{yellow.600}',
|
||||||
|
shadow: 'none'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
|
@ -37,9 +84,13 @@ export default {
|
||||||
borderColor: '{red.200}',
|
borderColor: '{red.200}',
|
||||||
color: '{red.600}',
|
color: '{red.600}',
|
||||||
detailColor: '{surface.700}',
|
detailColor: '{surface.700}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{red.100}'
|
hoverBackground: '{red.100}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{red.600}',
|
||||||
|
shadow: 'none'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
|
@ -47,9 +98,13 @@ export default {
|
||||||
borderColor: '{surface.200}',
|
borderColor: '{surface.200}',
|
||||||
color: '{surface.600}',
|
color: '{surface.600}',
|
||||||
detailColor: '{surface.700}',
|
detailColor: '{surface.700}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.200}'
|
hoverBackground: '{surface.200}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{surface.600}',
|
||||||
|
shadow: 'none'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
contrast: {
|
contrast: {
|
||||||
|
@ -57,9 +112,13 @@ export default {
|
||||||
borderColor: '{surface.950}',
|
borderColor: '{surface.950}',
|
||||||
color: '{surface.50}',
|
color: '{surface.50}',
|
||||||
detailColor: '{surface.0}',
|
detailColor: '{surface.0}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.800}'
|
hoverBackground: '{surface.800}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{surface.50}',
|
||||||
|
shadow: 'none'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -70,9 +129,13 @@ export default {
|
||||||
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
|
||||||
color: '{blue.500}',
|
color: '{blue.500}',
|
||||||
detailColor: '{surface.0}',
|
detailColor: '{surface.0}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)'
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
|
focusRing: {
|
||||||
|
color: '{blue.500}',
|
||||||
|
shadow: 'none'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
success: {
|
success: {
|
||||||
|
@ -80,9 +143,13 @@ export default {
|
||||||
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
|
||||||
color: '{green.500}',
|
color: '{green.500}',
|
||||||
detailColor: '{surface.0}',
|
detailColor: '{surface.0}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)'
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
|
focusRing: {
|
||||||
|
color: '{green.500}',
|
||||||
|
shadow: 'none'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
warn: {
|
warn: {
|
||||||
|
@ -90,9 +157,13 @@ export default {
|
||||||
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
|
||||||
color: '{yellow.500}',
|
color: '{yellow.500}',
|
||||||
detailColor: '{surface.0}',
|
detailColor: '{surface.0}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)'
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
|
focusRing: {
|
||||||
|
color: '{yellow.500}',
|
||||||
|
shadow: 'none'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
|
@ -100,9 +171,13 @@ export default {
|
||||||
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
|
||||||
color: '{red.500}',
|
color: '{red.500}',
|
||||||
detailColor: '{surface.0}',
|
detailColor: '{surface.0}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)'
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
|
focusRing: {
|
||||||
|
color: '{red.500}',
|
||||||
|
shadow: 'none'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
|
@ -110,9 +185,13 @@ export default {
|
||||||
borderColor: '{surface.700}',
|
borderColor: '{surface.700}',
|
||||||
color: '{surface.300}',
|
color: '{surface.300}',
|
||||||
detailColor: '{surface.0}',
|
detailColor: '{surface.0}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.700}'
|
hoverBackground: '{surface.700}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{surface.300}',
|
||||||
|
shadow: 'none'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
contrast: {
|
contrast: {
|
||||||
|
@ -120,9 +199,13 @@ export default {
|
||||||
borderColor: '{surface.100}',
|
borderColor: '{surface.100}',
|
||||||
color: '{surface.950}',
|
color: '{surface.950}',
|
||||||
detailColor: '{surface.950}',
|
detailColor: '{surface.950}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.100}'
|
hoverBackground: '{surface.100}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{surface.950}',
|
||||||
|
shadow: 'none'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -33,7 +33,7 @@ export default {
|
||||||
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
|
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
|
||||||
borderColor: '{blue.200}',
|
borderColor: '{blue.200}',
|
||||||
color: '{blue.600}',
|
color: '{blue.600}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{blue.100}',
|
hoverBackground: '{blue.100}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -46,7 +46,7 @@ export default {
|
||||||
background: 'color-mix(in srgb, {green.50}, transparent 5%)',
|
background: 'color-mix(in srgb, {green.50}, transparent 5%)',
|
||||||
borderColor: '{green.200}',
|
borderColor: '{green.200}',
|
||||||
color: '{green.600}',
|
color: '{green.600}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{green.100}',
|
hoverBackground: '{green.100}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -59,7 +59,7 @@ export default {
|
||||||
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
|
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
|
||||||
borderColor: '{yellow.200}',
|
borderColor: '{yellow.200}',
|
||||||
color: '{yellow.600}',
|
color: '{yellow.600}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{yellow.100}',
|
hoverBackground: '{yellow.100}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -72,7 +72,7 @@ export default {
|
||||||
background: 'color-mix(in srgb, {red.50}, transparent 5%)',
|
background: 'color-mix(in srgb, {red.50}, transparent 5%)',
|
||||||
borderColor: '{red.200}',
|
borderColor: '{red.200}',
|
||||||
color: '{red.600}',
|
color: '{red.600}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{red.100}',
|
hoverBackground: '{red.100}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -85,7 +85,7 @@ export default {
|
||||||
background: '{surface.100}',
|
background: '{surface.100}',
|
||||||
borderColor: '{surface.200}',
|
borderColor: '{surface.200}',
|
||||||
color: '{surface.600}',
|
color: '{surface.600}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.200}',
|
hoverBackground: '{surface.200}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -98,7 +98,7 @@ export default {
|
||||||
background: '{surface.900}',
|
background: '{surface.900}',
|
||||||
borderColor: '{surface.950}',
|
borderColor: '{surface.950}',
|
||||||
color: '{surface.50}',
|
color: '{surface.50}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.800}',
|
hoverBackground: '{surface.800}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -113,7 +113,7 @@ export default {
|
||||||
background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
|
background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
|
||||||
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
|
||||||
color: '{blue.500}',
|
color: '{blue.500}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -126,7 +126,7 @@ export default {
|
||||||
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
|
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
|
||||||
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
|
||||||
color: '{green.500}',
|
color: '{green.500}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -139,7 +139,7 @@ export default {
|
||||||
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
|
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
|
||||||
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
|
||||||
color: '{yellow.500}',
|
color: '{yellow.500}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -152,7 +152,7 @@ export default {
|
||||||
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
|
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
|
||||||
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
|
||||||
color: '{red.500}',
|
color: '{red.500}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -165,7 +165,7 @@ export default {
|
||||||
background: '{surface.800}',
|
background: '{surface.800}',
|
||||||
borderColor: '{surface.700}',
|
borderColor: '{surface.700}',
|
||||||
color: '{surface.300}',
|
color: '{surface.300}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.700}',
|
hoverBackground: '{surface.700}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
@ -178,7 +178,7 @@ export default {
|
||||||
background: '{surface.0}',
|
background: '{surface.0}',
|
||||||
borderColor: '{surface.100}',
|
borderColor: '{surface.100}',
|
||||||
color: '{surface.950}',
|
color: '{surface.950}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.100}',
|
hoverBackground: '{surface.100}',
|
||||||
focusRing: {
|
focusRing: {
|
||||||
|
|
|
@ -1,4 +1,39 @@
|
||||||
export default {
|
export default {
|
||||||
|
root: {
|
||||||
|
width: '25rem',
|
||||||
|
borderRadius: '{content.border.radius}'
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
size: '1.25rem'
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
padding: '{overlay.popover.padding}',
|
||||||
|
gap: '0.5rem'
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
gap: '0.5rem'
|
||||||
|
},
|
||||||
|
summary: {
|
||||||
|
fontWeight: '500',
|
||||||
|
fontSize: '1rem'
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
fontWeight: '500',
|
||||||
|
fontSize: '0.875rem'
|
||||||
|
},
|
||||||
|
closeButton: {
|
||||||
|
width: '2rem',
|
||||||
|
height: '2rem',
|
||||||
|
borderRadius: '50%',
|
||||||
|
focusRing: {
|
||||||
|
width: '{focus.ring.width}',
|
||||||
|
style: '{focus.ring.style}',
|
||||||
|
offset: '{focus.ring.offset}'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
closeIcon: {
|
||||||
|
size: '1rem'
|
||||||
|
},
|
||||||
colorScheme: {
|
colorScheme: {
|
||||||
light: {
|
light: {
|
||||||
blur: '1.5px',
|
blur: '1.5px',
|
||||||
|
@ -7,9 +42,13 @@ export default {
|
||||||
borderColor: '{blue.200}',
|
borderColor: '{blue.200}',
|
||||||
color: '{blue.600}',
|
color: '{blue.600}',
|
||||||
detailColor: '{surface.700}',
|
detailColor: '{surface.700}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{blue.100}'
|
hoverBackground: '{blue.100}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{focus.ring.color}',
|
||||||
|
shadow: '0 0 0 0.2rem {blue.200}'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
success: {
|
success: {
|
||||||
|
@ -17,9 +56,13 @@ export default {
|
||||||
borderColor: '{green.200}',
|
borderColor: '{green.200}',
|
||||||
color: '{green.600}',
|
color: '{green.600}',
|
||||||
detailColor: '{surface.700}',
|
detailColor: '{surface.700}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{green.100}'
|
hoverBackground: '{green.100}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{focus.ring.color}',
|
||||||
|
shadow: '0 0 0 0.2rem {green.200}'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
warn: {
|
warn: {
|
||||||
|
@ -27,9 +70,13 @@ export default {
|
||||||
borderColor: '{yellow.200}',
|
borderColor: '{yellow.200}',
|
||||||
color: '{yellow.600}',
|
color: '{yellow.600}',
|
||||||
detailColor: '{surface.700}',
|
detailColor: '{surface.700}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{yellow.100}'
|
hoverBackground: '{yellow.100}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{focus.ring.color}',
|
||||||
|
shadow: '0 0 0 0.2rem {yellow.200}'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
|
@ -37,9 +84,13 @@ export default {
|
||||||
borderColor: '{red.200}',
|
borderColor: '{red.200}',
|
||||||
color: '{red.600}',
|
color: '{red.600}',
|
||||||
detailColor: '{surface.700}',
|
detailColor: '{surface.700}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{red.100}'
|
hoverBackground: '{red.100}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{focus.ring.color}',
|
||||||
|
shadow: '0 0 0 0.2rem {red.200}'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
|
@ -47,9 +98,13 @@ export default {
|
||||||
borderColor: '{surface.200}',
|
borderColor: '{surface.200}',
|
||||||
color: '{surface.600}',
|
color: '{surface.600}',
|
||||||
detailColor: '{surface.700}',
|
detailColor: '{surface.700}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.200}'
|
hoverBackground: '{surface.200}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{focus.ring.color}',
|
||||||
|
shadow: '0 0 0 0.2rem {surface.200}'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
contrast: {
|
contrast: {
|
||||||
|
@ -57,9 +112,13 @@ export default {
|
||||||
borderColor: '{surface.950}',
|
borderColor: '{surface.950}',
|
||||||
color: '{surface.50}',
|
color: '{surface.50}',
|
||||||
detailColor: '{surface.0}',
|
detailColor: '{surface.0}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.800}'
|
hoverBackground: '{surface.800}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{focus.ring.color}',
|
||||||
|
shadow: '0 0 0 0.2rem {surface.400}'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -70,9 +129,13 @@ export default {
|
||||||
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
|
||||||
color: '{blue.500}',
|
color: '{blue.500}',
|
||||||
detailColor: '{surface.0}',
|
detailColor: '{surface.0}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)'
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
|
focusRing: {
|
||||||
|
color: '{focus.ring.color}',
|
||||||
|
shadow: '0 0 0 0.2rem color-mix(in srgb, {blue.500}, transparent 80%)'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
success: {
|
success: {
|
||||||
|
@ -80,9 +143,13 @@ export default {
|
||||||
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
|
||||||
color: '{green.500}',
|
color: '{green.500}',
|
||||||
detailColor: '{surface.0}',
|
detailColor: '{surface.0}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)'
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
|
focusRing: {
|
||||||
|
color: '{focus.ring.color}',
|
||||||
|
shadow: '0 0 0 0.2rem color-mix(in srgb, {green.500}, transparent 80%)'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
warn: {
|
warn: {
|
||||||
|
@ -90,9 +157,13 @@ export default {
|
||||||
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
|
||||||
color: '{yellow.500}',
|
color: '{yellow.500}',
|
||||||
detailColor: '{surface.0}',
|
detailColor: '{surface.0}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)'
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
|
focusRing: {
|
||||||
|
color: '{focus.ring.color}',
|
||||||
|
shadow: '0 0 0 0.2rem color-mix(in srgb, {yellow.500}, transparent 80%)'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
error: {
|
error: {
|
||||||
|
@ -100,9 +171,13 @@ export default {
|
||||||
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
|
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
|
||||||
color: '{red.500}',
|
color: '{red.500}',
|
||||||
detailColor: '{surface.0}',
|
detailColor: '{surface.0}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: 'rgba(255, 255, 255, 0.05)'
|
hoverBackground: 'rgba(255, 255, 255, 0.05)',
|
||||||
|
focusRing: {
|
||||||
|
color: '{focus.ring.color}',
|
||||||
|
shadow: '0 0 0 0.2rem color-mix(in srgb, {red.500}, transparent 80%)'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
|
@ -110,9 +185,13 @@ export default {
|
||||||
borderColor: '{surface.700}',
|
borderColor: '{surface.700}',
|
||||||
color: '{surface.300}',
|
color: '{surface.300}',
|
||||||
detailColor: '{surface.0}',
|
detailColor: '{surface.0}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.700}'
|
hoverBackground: '{surface.700}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{focus.ring.color}',
|
||||||
|
shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.300}, transparent 80%)'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
contrast: {
|
contrast: {
|
||||||
|
@ -120,9 +199,13 @@ export default {
|
||||||
borderColor: '{surface.100}',
|
borderColor: '{surface.100}',
|
||||||
color: '{surface.950}',
|
color: '{surface.950}',
|
||||||
detailColor: '{surface.950}',
|
detailColor: '{surface.950}',
|
||||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
||||||
closeButton: {
|
closeButton: {
|
||||||
hoverBackground: '{surface.100}'
|
hoverBackground: '{surface.100}',
|
||||||
|
focusRing: {
|
||||||
|
color: '{focus.ring.color}',
|
||||||
|
shadow: '0 0 0 0.2rem color-mix(in srgb, {surface.950}, transparent 80%)'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@ import BaseStyle from 'primevue/base/style';
|
||||||
|
|
||||||
const theme = ({ dt }) => `
|
const theme = ({ dt }) => `
|
||||||
.p-toast {
|
.p-toast {
|
||||||
width: 25rem;
|
width: ${dt('toast.width')};
|
||||||
white-space: pre-line;
|
white-space: pre-line;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
|
@ -10,33 +10,38 @@ const theme = ({ dt }) => `
|
||||||
.p-toast-message {
|
.p-toast-message {
|
||||||
backdrop-filter: blur(${dt('toast.blur')});
|
backdrop-filter: blur(${dt('toast.blur')});
|
||||||
margin: 0 0 1rem 0;
|
margin: 0 0 1rem 0;
|
||||||
border-radius: ${dt('border.radius.md')};
|
border-radius: ${dt('toast.border.radius')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-message-icon {
|
.p-toast-message-icon {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
font-size: 1.125rem;
|
font-size: ${dt('toast.icon.size')};
|
||||||
width: 1.125rem;
|
width: ${dt('toast.icon.size')};
|
||||||
height: 1.125rem;
|
height: ${dt('toast.icon.size')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-message-content {
|
.p-toast-message-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
padding: 0.75rem;
|
padding: ${dt('toast.content.padding')};
|
||||||
gap: 0.5rem;
|
gap: ${dt('toast.content.gap')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-message-text {
|
.p-toast-message-text {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: ${dt('toast.text.gap')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-summary {
|
.p-toast-summary
|
||||||
font-weight: 500;
|
font-weight: ${dt('toast.summary.font.weight')};
|
||||||
|
font-size: ${dt('toast.summary.font.size')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-detail {
|
.p-toast-detail {
|
||||||
margin-top: 0.5rem;
|
font-weight: ${dt('toast.detail.font.weight')};
|
||||||
font-size: 0.875rem;
|
font-size: ${dt('toast.detail.font.size')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-close-button {
|
.p-toast-close-button {
|
||||||
|
@ -45,14 +50,14 @@ const theme = ({ dt }) => `
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 50%;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: transparent;
|
background: 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')};
|
||||||
outline-color: transparent;
|
outline-color: transparent;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
width: 1.75rem;
|
width: ${dt('toast.close.button.width')};
|
||||||
height: 1.75rem;
|
height: ${dt('toast.close.button.height')};
|
||||||
|
border-radius: ${dt('toast.close.button.border.radius')};
|
||||||
margin: -25% 0 0 0;
|
margin: -25% 0 0 0;
|
||||||
right: -25%;
|
right: -25%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -60,6 +65,12 @@ const theme = ({ dt }) => `
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.p-toast-close-icon {
|
||||||
|
font-size: ${dt('toast.close.icon.size')};
|
||||||
|
width: ${dt('toast.close.icon.size')};
|
||||||
|
height: ${dt('toast.close.icon.size')};
|
||||||
|
}
|
||||||
|
|
||||||
.p-toast-close-button:focus-visible {
|
.p-toast-close-button:focus-visible {
|
||||||
outline-width: ${dt('focus.ring.width')};
|
outline-width: ${dt('focus.ring.width')};
|
||||||
outline-style: ${dt('focus.ring.style')};
|
outline-style: ${dt('focus.ring.style')};
|
||||||
|
@ -78,7 +89,8 @@ const theme = ({ dt }) => `
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-message-info .p-toast-close-button:focus-visible {
|
.p-toast-message-info .p-toast-close-button:focus-visible {
|
||||||
color: ${dt('toast.info.color')};
|
outline-color: ${dt('toast.info.close.button.focus.ring.color')};
|
||||||
|
box-shadow: ${dt('toast.info.close.button.focus.ring.shadow')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-message-info .p-toast-close-button:hover {
|
.p-toast-message-info .p-toast-close-button:hover {
|
||||||
|
@ -97,7 +109,8 @@ const theme = ({ dt }) => `
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-message-success .p-toast-close-button:focus-visible {
|
.p-toast-message-success .p-toast-close-button:focus-visible {
|
||||||
color: ${dt('toast.success.color')};
|
outline-color: ${dt('toast.success.close.button.focus.ring.color')};
|
||||||
|
box-shadow: ${dt('toast.success.close.button.focus.ring.shadow')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-message-success .p-toast-close-button:hover {
|
.p-toast-message-success .p-toast-close-button:hover {
|
||||||
|
@ -116,7 +129,8 @@ const theme = ({ dt }) => `
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-message-warn .p-toast-close-button:focus-visible {
|
.p-toast-message-warn .p-toast-close-button:focus-visible {
|
||||||
color: ${dt('toast.warn.color')};
|
outline-color: ${dt('toast.warn.close.button.focus.ring.color')};
|
||||||
|
box-shadow: ${dt('toast.warn.close.button.focus.ring.shadow')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-message-warn .p-toast-close-button:hover {
|
.p-toast-message-warn .p-toast-close-button:hover {
|
||||||
|
@ -135,7 +149,8 @@ const theme = ({ dt }) => `
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-message-error .p-toast-close-button:focus-visible {
|
.p-toast-message-error .p-toast-close-button:focus-visible {
|
||||||
color: ${dt('toast.error.color')};
|
outline-color: ${dt('toast.error.close.button.focus.ring.color')};
|
||||||
|
box-shadow: ${dt('toast.error.close.button.focus.ring.shadow')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-message-error .p-toast-close-button:hover {
|
.p-toast-message-error .p-toast-close-button:hover {
|
||||||
|
@ -154,7 +169,8 @@ const theme = ({ dt }) => `
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-message-secondary .p-toast-close-button:focus-visible {
|
.p-toast-message-secondary .p-toast-close-button:focus-visible {
|
||||||
color: ${dt('toast.secondary.color')};
|
outline-color: ${dt('toast.secondary.close.button.focus.ring.color')};
|
||||||
|
box-shadow: ${dt('toast.secondary.close.button.focus.ring.shadow')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-message-secondary .p-toast-close-button:hover {
|
.p-toast-message-secondary .p-toast-close-button:hover {
|
||||||
|
@ -173,7 +189,8 @@ const theme = ({ dt }) => `
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-message-contrast .p-toast-close-button:focus-visible {
|
.p-toast-message-contrast .p-toast-close-button:focus-visible {
|
||||||
color: ${dt('toast.contrast.color')};
|
outline-color: ${dt('toast.contrast.close.button.focus.ring.color')};
|
||||||
|
box-shadow: ${dt('toast.contrast.close.button.focus.ring.shadow')};
|
||||||
}
|
}
|
||||||
|
|
||||||
.p-toast-message-contrast .p-toast-close-button:hover {
|
.p-toast-message-contrast .p-toast-close-button:hover {
|
||||||
|
|
Loading…
Reference in New Issue