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 { export default {
root: { root: {
padding: '0.5rem 1rem', padding: '0.75rem 1rem',
borderRadius: '{content.border.radius}', borderRadius: '{form.field.border.radius}',
gap: '0.5rem', gap: '0.5rem',
fontWeight: '500', 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}', disabledBackground: '{form.field.disabled.background}',
disabledBorderColor: '{form.field.disabled.background}', disabledBorderColor: '{form.field.disabled.background}',
disabledColor: '{form.field.disabled.color}', disabledColor: '{form.field.disabled.color}',
invalidBorderColor: '{form.field.invalid.border.color}', invalidBorderColor: '{form.field.invalid.border.color}',
focusRing: { focusRing: {
width: '{focus.ring.width}', width: '0',
style: '{focus.ring.style}', style: 'none',
color: '{focus.ring.color}', offset: '0',
offset: '{focus.ring.offset}', color: 'unset',
shadow: '{focus.ring.shadow}' shadow: 'none'
}, },
transitionDuration: '{form.field.transition.duration}' transitionDuration: '{form.field.transition.duration}'
}, },
icon: { icon: {
color: '{text.muted.color}',
hoverColor: '{text.muted.color}',
checkedColor: '{text.muted.color}',
disabledColor: '{form.field.disabled.color}' disabledColor: '{form.field.disabled.color}'
}, },
content: { content: {
left: '0.25rem', left: '0.25rem',
top: '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: { colorScheme: {
light: { light: {
root: { root: {
background: '{surface.100}',
checkedBackground: '{surface.100}',
hoverBackground: '{surface.100}', hoverBackground: '{surface.100}',
borderColor: '{surface.100}', checkedBackground: '{surface.200}'
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}'
} }
}, },
dark: { dark: {
root: { root: {
background: '{surface.950}', hoverBackground: '{surface.800}',
checkedBackground: '{surface.950}', checkedBackground: '{surface.700}'
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}'
} }
} }
} },
style: ({ dt }) => `
.p-togglebutton:focus-visible {
background: ${dt('togglebutton.hover.background')};
}
`
}; };