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

Material radio buttons, update on checkbox colors

pull/6493/head
Cagatay Civici 2024-09-28 14:42:22 +03:00
parent b628ed8cb8
commit f633057563
2 changed files with 51 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/themes/src/presets/material/checkbox/index.js
View File

@ -8,9 +8,6 @@ export default {
checkedHoverBackground: '{primary.color}',
disabledBackground: '{form.field.disabled.background}',
filledBackground: '{form.field.filled.background}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.hover.border.color}',
focusBorderColor: '{form.field.hover.border.color}',
checkedBorderColor: '{primary.color}',
checkedHoverBorderColor: '{primary.color}',
checkedFocusBorderColor: '{primary.color}',
@ -33,6 +30,14 @@ export default {
checkedHoverColor: '{primary.contrast.color}',
disabledColor: '{form.field.disabled.color}'
},
colorScheme: {
light: {
borderColor: '{surface.600}',
hoverBorderColor: '{surface.900}',
focusBorderColor: '{surface.900}'
},
dark: {}
},
style: ({ dt }) => `
.p-checkbox {
border-radius: 50%;

55
packages/themes/src/presets/material/radiobutton/index.js
View File

@ -1,17 +1,14 @@
export default {
root: {
width: '1.25rem',
height: '1.25rem',
width: '20px',
height: '20px',
background: '{form.field.background}',
checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.hover.color}',
checkedBackground: '{primary.contrast.color}',
checkedHoverBackground: '{primary.contrast.color}',
disabledBackground: '{form.field.disabled.background}',
filledBackground: '{form.field.filled.background}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.hover.border.color}',
focusBorderColor: '{form.field.border.color}',
checkedBorderColor: '{primary.color}',
checkedHoverBorderColor: '{primary.hover.color}',
checkedHoverBorderColor: '{primary.color}',
checkedFocusBorderColor: '{primary.color}',
checkedDisabledBorderColor: '{form.field.border.color}',
invalidBorderColor: '{form.field.invalid.border.color}',
@ -26,9 +23,43 @@ export default {
transitionDuration: '{form.field.transition.duration}'
},
icon: {
size: '0.75rem',
checkedColor: '{primary.contrast.color}',
checkedHoverColor: '{primary.contrast.color}',
size: '10px',
checkedColor: '{primary.color}',
checkedHoverColor: '{primary.color}',
disabledColor: '{form.field.disabled.color}'
}
},
colorScheme: {
light: {
borderColor: '{surface.600}',
hoverBorderColor: '{surface.900}',
focusBorderColor: '{surface.900}'
},
dark: {}
},
style: ({ dt }) => `
.p-radiobutton {
border-radius: 50%;
transition: box-shadow ${dt('radiobutton.transition.duration')};
}
.p-radiobutton-box {
border-width: 2px;
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:hover) {
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%);
}
.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:hover) {
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('radiobutton.checked.border.color')}, transparent 92%);
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 88%);
}
.p-radiobutton-checked:not(.p-disabled):has(.p-radiobutton-input:focus-visible) {
box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('radiobutton.checked.border.color')}, transparent 84%);
}
`
};