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

Material toggle button style

pull/6501/head
Cagatay Civici 2024-09-30 11:59:26 +03:00
parent b4e3d7c16c
commit f6fc6cc435
1 changed files with 27 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
packages/themes/src/presets/material/togglebutton/index.js
View File

@ -1,70 +1,57 @@
export default {
root: {
padding: '0.5rem 1rem',
borderRadius: '{content.border.radius}',
padding: '0.75rem 1rem',
borderRadius: '{form.field.border.radius}',
gap: '0.5rem',
fontWeight: '500',
background: '{form.field.background}',
borderColor: '{form.field.border.color}',
color: '{form.field.color}',
hoverColor: '{form.field.color}',
checkedColor: '{form.field.color}',
checkedBorderColor: '{form.field.border.color}',
disabledBackground: '{form.field.disabled.background}',
disabledBorderColor: '{form.field.disabled.background}',
disabledColor: '{form.field.disabled.color}',
invalidBorderColor: '{form.field.invalid.border.color}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
width: '0',
style: 'none',
offset: '0',
color: 'unset',
shadow: 'none'
},
transitionDuration: '{form.field.transition.duration}'
},
icon: {
color: '{text.muted.color}',
hoverColor: '{text.muted.color}',
checkedColor: '{text.muted.color}',
disabledColor: '{form.field.disabled.color}'
},
content: {
left: '0.25rem',
top: '0.25rem',
checkedShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04)'
checkedBackground: 'transparent',
checkedShadow: 'none'
},
colorScheme: {
light: {
root: {
background: '{surface.100}',
checkedBackground: '{surface.100}',
hoverBackground: '{surface.100}',
borderColor: '{surface.100}',
color: '{surface.500}',
hoverColor: '{surface.700}',
checkedColor: '{surface.900}',
checkedBorderColor: '{surface.100}'
},
content: {
checkedBackground: '{surface.0}'
},
icon: {
color: '{surface.500}',
hoverColor: '{surface.700}',
checkedColor: '{surface.900}'
checkedBackground: '{surface.200}'
}
},
dark: {
root: {
background: '{surface.950}',
checkedBackground: '{surface.950}',
hoverBackground: '{surface.950}',
borderColor: '{surface.950}',
color: '{surface.400}',
hoverColor: '{surface.300}',
checkedColor: '{surface.0}',
checkedBorderColor: '{surface.950}'
},
content: {
checkedBackground: '{surface.800}'
},
icon: {
color: '{surface.400}',
hoverColor: '{surface.300}',
checkedColor: '{surface.0}'
hoverBackground: '{surface.800}',
checkedBackground: '{surface.700}'
}
}
}
},
style: ({ dt }) => `
.p-togglebutton:focus-visible {
background: ${dt('togglebutton.hover.background')};
}
`
};