Updated tokens for Toast and Message

pull/5756/head
Cagatay Civici 2024-05-09 18:22:29 +03:00
parent e239e64505
commit a8c70f981d
5 changed files with 278 additions and 95 deletions

View File

@ -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'
} }
} }

View File

@ -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'
}
} }
} }
} }

View File

@ -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: {

View File

@ -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%)'
}
} }
} }
} }

View File

@ -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 {