mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 08:52:34 +00:00
Add 'Lara' theme
This commit is contained in:
parent
30fa452525
commit
06850f3ed5
177 changed files with 3386 additions and 7 deletions
116
components/lib/themes/lara/message/index.js
Normal file
116
components/lib/themes/lara/message/index.js
Normal file
|
@ -0,0 +1,116 @@
|
|||
export default {
|
||||
colorScheme: {
|
||||
light: {
|
||||
info: {
|
||||
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
|
||||
borderColor: '{blue.200}',
|
||||
color: '{blue.600}',
|
||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
||||
closeButton: {
|
||||
hoverBackground: '{blue.100}'
|
||||
}
|
||||
},
|
||||
success: {
|
||||
background: 'color-mix(in srgb, {green.50}, transparent 5%)',
|
||||
borderColor: '{green.200}',
|
||||
color: '{green.600}',
|
||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
||||
closeButton: {
|
||||
hoverBackground: '{green.100}'
|
||||
}
|
||||
},
|
||||
warn: {
|
||||
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
|
||||
borderColor: '{yellow.200}',
|
||||
color: '{yellow.600}',
|
||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
||||
closeButton: {
|
||||
hoverBackground: '{yellow.100}'
|
||||
}
|
||||
},
|
||||
error: {
|
||||
background: 'color-mix(in srgb, {red.50}, transparent 5%)',
|
||||
borderColor: '{red.200}',
|
||||
color: '{red.600}',
|
||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
||||
closeButton: {
|
||||
hoverBackground: '{red.100}'
|
||||
}
|
||||
},
|
||||
secondary: {
|
||||
background: '{surface.100}',
|
||||
borderColor: '{surface.200}',
|
||||
color: '{surface.600}',
|
||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
||||
closeButton: {
|
||||
hoverBackground: '{surface.200}'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
background: '{surface.900}',
|
||||
borderColor: '{surface.950}',
|
||||
color: '{surface.50}',
|
||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
||||
closeButton: {
|
||||
hoverBackground: '{surface.800}'
|
||||
}
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
info: {
|
||||
background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
|
||||
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
|
||||
color: '{blue.500}',
|
||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
|
||||
closeButton: {
|
||||
hoverBackground: 'rgba(255, 255, 255, 0.05)'
|
||||
}
|
||||
},
|
||||
success: {
|
||||
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
|
||||
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
|
||||
color: '{green.500}',
|
||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
|
||||
closeButton: {
|
||||
hoverBackground: 'rgba(255, 255, 255, 0.05)'
|
||||
}
|
||||
},
|
||||
warn: {
|
||||
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
|
||||
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
|
||||
color: '{yellow.500}',
|
||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
|
||||
closeButton: {
|
||||
hoverBackground: 'rgba(255, 255, 255, 0.05)'
|
||||
}
|
||||
},
|
||||
error: {
|
||||
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
|
||||
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
|
||||
color: '{red.500}',
|
||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
|
||||
closeButton: {
|
||||
hoverBackground: 'rgba(255, 255, 255, 0.05)'
|
||||
}
|
||||
},
|
||||
secondary: {
|
||||
background: '{surface.800}',
|
||||
borderColor: '{surface.700}',
|
||||
color: '{surface.300}',
|
||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
|
||||
closeButton: {
|
||||
hoverBackground: '{surface.700}'
|
||||
}
|
||||
},
|
||||
contrast: {
|
||||
background: '{surface.0}',
|
||||
borderColor: '{surface.100}',
|
||||
color: '{surface.950}',
|
||||
boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
|
||||
closeButton: {
|
||||
hoverBackground: '{surface.100}'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue