vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Add material buttons

pull/6493/head
Cagatay Civici 2024-09-28 13:16:30 +03:00
parent 880e8d1789
commit 06f898b6ec
2 changed files with 76 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/themes/src/presets/material/base/index.js
View File

@ -146,8 +146,8 @@ export default {
primary: { primary: {
color: '{primary.500}', color: '{primary.500}',
contrastColor: '#ffffff', contrastColor: '#ffffff',
hoverColor: 'color-mix(in srgb, {primary.color}, transparent 8%)', hoverColor: '{primary.400}',
activeColor: 'color-mix(in srgb, {primary.color}, transparent 32%)' activeColor: '{primary.300}'
}, },
highlight: { highlight: {
background: 'color-mix(in srgb, {primary.color}, transparent 88%)', background: 'color-mix(in srgb, {primary.color}, transparent 88%)',

119
packages/themes/src/presets/material/button/index.js
View File

@ -3,23 +3,23 @@ export default {
borderRadius: '{form.field.border.radius}', borderRadius: '{form.field.border.radius}',
roundedBorderRadius: '2rem', roundedBorderRadius: '2rem',
gap: '0.5rem', gap: '0.5rem',
paddingX: '{form.field.padding.x}', paddingX: '1rem',
paddingY: '{form.field.padding.y}', paddingY: '{form.field.padding.y}',
iconOnlyWidth: '2.5rem', iconOnlyWidth: '3rem',
sm: { sm: {
fontSize: '0.875rem', fontSize: '0.875rem',
paddingX: '0.625rem', paddingX: '0.875rem',
paddingY: '0.375rem' paddingY: '0.625rem'
}, },
lg: { lg: {
fontSize: '1.125rem', fontSize: '1.125rem',
paddingX: '0.875rem', paddingX: '1.25rem',
paddingY: '0.625rem' paddingY: '1rem'
}, },
label: { label: {
fontWeight: '500' fontWeight: '500'
}, },
raisedShadow: '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)', raisedShadow: '0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)',
focusRing: { focusRing: {
width: '{focus.ring.width}', width: '{focus.ring.width}',
style: '{focus.ring.style}', style: '{focus.ring.style}',
@ -63,11 +63,11 @@ export default {
}, },
info: { info: {
background: '{sky.500}', background: '{sky.500}',
hoverBackground: '{sky.600}', hoverBackground: '{sky.400}',
activeBackground: '{sky.700}', activeBackground: '{sky.300}',
borderColor: '{sky.500}', borderColor: '{sky.500}',
hoverBorderColor: '{sky.600}', hoverBorderColor: '{sky.400}',
activeBorderColor: '{sky.700}', activeBorderColor: '{sky.300}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff', activeColor: '#ffffff',
@ -78,11 +78,11 @@ export default {
}, },
success: { success: {
background: '{green.500}', background: '{green.500}',
hoverBackground: '{green.600}', hoverBackground: '{green.400}',
activeBackground: '{green.700}', activeBackground: '{green.300}',
borderColor: '{green.500}', borderColor: '{green.500}',
hoverBorderColor: '{green.600}', hoverBorderColor: '{green.400}',
activeBorderColor: '{green.700}', activeBorderColor: '{green.300}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff', activeColor: '#ffffff',
@ -93,11 +93,11 @@ export default {
}, },
warn: { warn: {
background: '{orange.500}', background: '{orange.500}',
hoverBackground: '{orange.600}', hoverBackground: '{orange.400}',
activeBackground: '{orange.700}', activeBackground: '{orange.300}',
borderColor: '{orange.500}', borderColor: '{orange.500}',
hoverBorderColor: '{orange.600}', hoverBorderColor: '{orange.400}',
activeBorderColor: '{orange.700}', activeBorderColor: '{orange.300}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff', activeColor: '#ffffff',
@ -108,11 +108,11 @@ export default {
}, },
help: { help: {
background: '{purple.500}', background: '{purple.500}',
hoverBackground: '{purple.600}', hoverBackground: '{purple.400}',
activeBackground: '{purple.700}', activeBackground: '{purple.300}',
borderColor: '{purple.500}', borderColor: '{purple.500}',
hoverBorderColor: '{purple.600}', hoverBorderColor: '{purple.400}',
activeBorderColor: '{purple.700}', activeBorderColor: '{purple.300}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff', activeColor: '#ffffff',
@ -123,11 +123,11 @@ export default {
}, },
danger: { danger: {
background: '{red.500}', background: '{red.500}',
hoverBackground: '{red.600}', hoverBackground: '{red.400}',
activeBackground: '{red.700}', activeBackground: '{red.300}',
borderColor: '{red.500}', borderColor: '{red.500}',
hoverBorderColor: '{red.600}', hoverBorderColor: '{red.400}',
activeBorderColor: '{red.700}', activeBorderColor: '{red.300}',
color: '#ffffff', color: '#ffffff',
hoverColor: '#ffffff', hoverColor: '#ffffff',
activeColor: '#ffffff', activeColor: '#ffffff',
@ -138,11 +138,11 @@ export default {
}, },
contrast: { contrast: {
background: '{surface.950}', background: '{surface.950}',
hoverBackground: '{surface.900}', hoverBackground: '{surface.800}',
activeBackground: '{surface.800}', activeBackground: '{surface.700}',
borderColor: '{surface.950}', borderColor: '{surface.950}',
hoverBorderColor: '{surface.900}', hoverBorderColor: '{surface.800}',
activeBorderColor: '{surface.800}', activeBorderColor: '{surface.700}',
color: '{surface.0}', color: '{surface.0}',
hoverColor: '{surface.0}', hoverColor: '{surface.0}',
activeColor: '{surface.0}', activeColor: '{surface.0}',
@ -156,56 +156,56 @@ export default {
primary: { primary: {
hoverBackground: '{primary.50}', hoverBackground: '{primary.50}',
activeBackground: '{primary.100}', activeBackground: '{primary.100}',
borderColor: '{primary.200}', borderColor: '{primary.color}',
color: '{primary.color}' color: '{primary.color}'
}, },
secondary: { secondary: {
hoverBackground: '{surface.50}', hoverBackground: '{surface.50}',
activeBackground: '{surface.100}', activeBackground: '{surface.100}',
borderColor: '{surface.200}', borderColor: '{surface.600}',
color: '{surface.500}' color: '{surface.600}'
}, },
success: { success: {
hoverBackground: '{green.50}', hoverBackground: '{green.50}',
activeBackground: '{green.100}', activeBackground: '{green.100}',
borderColor: '{green.200}', borderColor: '{green.500}',
color: '{green.500}' color: '{green.500}'
}, },
info: { info: {
hoverBackground: '{sky.50}', hoverBackground: '{sky.50}',
activeBackground: '{sky.100}', activeBackground: '{sky.100}',
borderColor: '{sky.200}', borderColor: '{sky.500}',
color: '{sky.500}' color: '{sky.500}'
}, },
warn: { warn: {
hoverBackground: '{orange.50}', hoverBackground: '{orange.50}',
activeBackground: '{orange.100}', activeBackground: '{orange.100}',
borderColor: '{orange.200}', borderColor: '{orange.500}',
color: '{orange.500}' color: '{orange.500}'
}, },
help: { help: {
hoverBackground: '{purple.50}', hoverBackground: '{purple.50}',
activeBackground: '{purple.100}', activeBackground: '{purple.100}',
borderColor: '{purple.200}', borderColor: '{purple.500}',
color: '{purple.500}' color: '{purple.500}'
}, },
danger: { danger: {
hoverBackground: '{red.50}', hoverBackground: '{red.50}',
activeBackground: '{red.100}', activeBackground: '{red.100}',
borderColor: '{red.200}', borderColor: '{red.500}',
color: '{red.500}' color: '{red.500}'
}, },
contrast: { contrast: {
hoverBackground: '{surface.50}', hoverBackground: '{surface.50}',
activeBackground: '{surface.100}', activeBackground: '{surface.100}',
borderColor: '{surface.700}', borderColor: '{surface.950}',
color: '{surface.950}' color: '{surface.950}'
}, },
plain: { plain: {
hoverBackground: '{surface.50}', hoverBackground: '{surface.50}',
activeBackground: '{surface.100}', activeBackground: '{surface.100}',
borderColor: '{surface.200}', borderColor: '{surface.900}',
color: '{surface.700}' color: '{surface.900}'
} }
}, },
text: { text: {
@ -217,7 +217,7 @@ export default {
secondary: { secondary: {
hoverBackground: '{surface.50}', hoverBackground: '{surface.50}',
activeBackground: '{surface.100}', activeBackground: '{surface.100}',
color: '{surface.500}' color: '{surface.600}'
}, },
success: { success: {
hoverBackground: '{green.50}', hoverBackground: '{green.50}',
@ -247,7 +247,7 @@ export default {
plain: { plain: {
hoverBackground: '{surface.50}', hoverBackground: '{surface.50}',
activeBackground: '{surface.100}', activeBackground: '{surface.100}',
color: '{surface.700}' color: '{surface.900}'
} }
}, },
link: { link: {
@ -483,5 +483,34 @@ export default {
activeColor: '{primary.color}' activeColor: '{primary.color}'
} }
} }
} },
style: ({ dt }) => `
.p-button:focus-visible {
background: ${dt('button.primary.hover.background')};
}
.p-button-secondary:focus-visible {
background: ${dt('button.secondary.hover.background')};
}
.p-button-success:focus-visible {
background: ${dt('button.success.hover.background')};
}
.p-button-warn:focus-visible {
background: ${dt('button.warn.hover.background')};
}
.p-button-help:focus-visible {
background: ${dt('button.help.hover.background')};
}
.p-button-danger:focus-visible {
background: ${dt('button.danger.hover.background')};
}
.p-button-contrast:focus-visible {
background: ${dt('button.contrast.hover.background')};
}
`
}; };