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

Tokens for ToggleButton

pull/5756/head
Cagatay Civici 2024-05-09 02:50:16 +03:00
parent 89fa90f56f
commit 166b92f66f
3 changed files with 98 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
components/lib/themes/aura/togglebutton/index.js
View File

@ -1,43 +1,68 @@
export default { export default {
root: {
padding: '0.5rem 1rem',
borderRadius: '{content.border.radius}',
gap: '0.5rem',
fontWeight: '500',
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}'
}
},
icon: {
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)'
},
colorScheme: { colorScheme: {
light: { light: {
root: { root: {
background: '{surface.100}', background: '{surface.100}',
checkedBackground: '{surface.0}', checkedBackground: '{surface.100}',
disabledBackground: '{form.field.disabled.background}', hoverBackground: '{surface.100}',
borderColor: '{surface.100}', borderColor: '{surface.100}',
disabledBorderColor: '{form.field.disabled.background}',
invalidBorderColor: '{form.field.invalid.border.color}',
color: '{surface.500}', color: '{surface.500}',
hoverColor: '{surface.700}', hoverColor: '{surface.700}',
checkedColor: '{surface.900}', checkedColor: '{surface.900}',
disabledColor: '{form.field.disabled.color}' checkedBorderColor: '{surface.100}'
},
content: {
checkedBackground: '{surface.0}'
}, },
icon: { icon: {
color: '{surface.500}', color: '{surface.500}',
hoverColor: '{surface.700}', hoverColor: '{surface.700}',
checkedColor: '{surface.900}', checkedColor: '{surface.900}'
disabledColor: '{form.field.disabled.color}'
} }
}, },
dark: { dark: {
root: { root: {
background: '{surface.950}', background: '{surface.950}',
checkedBackground: '{surface.800}', checkedBackground: '{surface.950}',
disabledBackground: '{form.field.disabled.background}', hoverBackground: '{surface.950}',
borderColor: '{surface.950}', borderColor: '{surface.950}',
disabledBorderColor: '{form.field.disabled.background}',
invalidBorderColor: '{form.field.invalid.border.color}',
color: '{surface.400}', color: '{surface.400}',
hoverColor: '{surface.300}', hoverColor: '{surface.300}',
checkedColor: '{surface.0}', checkedColor: '{surface.0}',
disabledColor: '{form.field.disabled.color}' checkedBorderColor: '{surface.950}'
},
content: {
checkedBackground: '{surface.800}'
}, },
icon: { icon: {
color: '{surface.400}', color: '{surface.400}',
hoverColor: '{surface.300}', hoverColor: '{surface.300}',
checkedColor: '{surface.0}', checkedColor: '{surface.0}'
disabledColor: '{form.field.disabled.color}'
} }
} }
} }

70
components/lib/themes/lara/togglebutton/index.js
View File

@ -1,43 +1,49 @@
export default { export default {
root: {
padding: '0.625rem 1rem',
borderRadius: '{content.border.radius}',
gap: '0.5rem',
fontWeight: '500',
background: '{form.field.background}',
borderColor: '{form.field.border.color}',
color: '{form.field.color}',
hoverColor: '{form.field.color}',
checkedBackground: '{highlight.background}',
checkedColor: '{highlight.color}',
checkedBorderColor: '{highlight.focus.background}',
disabledBackground: '{form.field.disabled.background}',
disabledBorderColor: '{form.field.disabled.background}',
disabledColor: '{form.field.disabled.color}',
invalidBorderColor: '{form.field.invalid.border.color}',
focusRing: {
width: '{form.field.focus.ring.width}',
style: '{form.field.focus.ring.style}',
color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
}
},
icon: {
color: '{text.muted.color}',
hoverColor: '{text.muted.color}',
checkedColor: '{highlight.color}',
disabledColor: '{form.field.disabled.color}'
},
content: {
left: '0.25rem',
top: '0.25rem',
checkedBackground: 'transparent',
checkedShadow: 'none'
},
colorScheme: { colorScheme: {
light: { light: {
root: { root: {
background: '{surface.100}', hoverBackground: '{surface.100}'
checkedBackground: '{surface.0}',
disabledBackground: '{form.field.disabled.background}',
borderColor: '{surface.100}',
disabledBorderColor: '{form.field.disabled.background}',
invalidBorderColor: '{form.field.invalid.border.color}',
color: '{surface.500}',
hoverColor: '{surface.700}',
checkedColor: '{surface.900}',
disabledColor: '{form.field.disabled.color}'
},
icon: {
color: '{surface.500}',
hoverColor: '{surface.700}',
checkedColor: '{surface.900}',
disabledColor: '{form.field.disabled.color}'
} }
}, },
dark: { dark: {
root: { root: {
background: '{surface.950}', hoverBackground: '{surface.800}'
checkedBackground: '{surface.800}',
disabledBackground: '{form.field.disabled.background}',
borderColor: '{surface.950}',
disabledBorderColor: '{form.field.disabled.background}',
invalidBorderColor: '{form.field.invalid.border.color}',
color: '{surface.400}',
hoverColor: '{surface.300}',
checkedColor: '{surface.0}',
disabledColor: '{form.field.disabled.color}'
},
icon: {
color: '{surface.400}',
hoverColor: '{surface.300}',
checkedColor: '{surface.0}',
disabledColor: '{form.field.disabled.color}'
} }
} }
} }

36
components/lib/togglebutton/style/ToggleButtonStyle.js
View File

@ -12,13 +12,15 @@ const theme = ({ dt }) => `
color: ${dt('togglebutton.color')}; color: ${dt('togglebutton.color')};
background: ${dt('togglebutton.background')}; background: ${dt('togglebutton.background')};
border: 1px solid ${dt('togglebutton.border.color')}; border: 1px solid ${dt('togglebutton.border.color')};
padding: 0.5rem 1rem; padding: ${dt('togglebutton.padding')};
font-size: 1rem; font-size: 1rem;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; font-family: inherit;
border-radius: ${dt('border.radius.md')}; font-feature-settings: inherit;
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
border-radius: ${dt('togglebutton.border.radius')};
outline-color: transparent; outline-color: transparent;
gap: 0.5rem; gap: ${dt('togglebutton.gap')};
font-weight: 500; font-weight: ${dt('togglebutton.font.weight')};
} }
.p-togglebutton-label, .p-togglebutton-label,
@ -30,31 +32,35 @@ const theme = ({ dt }) => `
.p-togglebutton::before { .p-togglebutton::before {
content: ""; content: "";
background: transparent; background: transparent;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
position: absolute; position: absolute;
left: 0.25rem; left: ${dt('togglebutton.content.left')};
top: 0.25rem; top: ${dt('togglebutton.content.top')};
width: calc(100% - 0.5rem); width: calc(100% - calc(2 * ${dt('togglebutton.content.left')}));
height: calc(100% - 0.5rem); height: calc(100% - calc(2 * ${dt('togglebutton.content.top')}));
border-radius: ${dt('border.radius.sm')}; border-radius: ${dt('togglebutton.border.radius')};
} }
.p-togglebutton.p-togglebutton-checked::before { .p-togglebutton.p-togglebutton-checked::before {
background: ${dt('togglebutton.checked.background')}; background: ${dt('togglebutton.content.checked.background')};
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04); box-shadow: ${dt('togglebutton.content.checked.shadow')};
} }
.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover { .p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
background: ${dt('togglebutton.hover.background')};
color: ${dt('togglebutton.hover.color')}; color: ${dt('togglebutton.hover.color')};
} }
.p-togglebutton.p-togglebutton-checked { .p-togglebutton.p-togglebutton-checked {
background: ${dt('togglebutton.checked.background')};
border-color: ${dt('togglebutton.checked.border.color')};
color: ${dt('togglebutton.checked.color')}; color: ${dt('togglebutton.checked.color')};
} }
.p-togglebutton:focus-visible { .p-togglebutton:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; box-shadow: ${dt('togglebutton.focus.ring.shadow')};
outline-offset: ${dt('focus.ring.offset')}; outline: ${dt('togglebutton.focus.ring.width')} ${dt('togglebutton.focus.ring.style')} ${dt('togglebutton.focus.ring.color')};
outline-offset: ${dt('togglebutton.focus.ring.offset')};
} }
.p-togglebutton.p-invalid { .p-togglebutton.p-invalid {