Tokens for ToggleButton
Cagatay Civici
parent
89fa90f56f
commit
166b92f66f
|
|
@ -1,43 +1,68 @@
|
|||
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: {
|
||||
light: {
|
||||
root: {
|
||||
background: '{surface.100}',
|
||||
checkedBackground: '{surface.0}',
|
||||
disabledBackground: '{form.field.disabled.background}',
|
||||
checkedBackground: '{surface.100}',
|
||||
hoverBackground: '{surface.100}',
|
||||
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}'
|
||||
checkedBorderColor: '{surface.100}'
|
||||
},
|
||||
content: {
|
||||
checkedBackground: '{surface.0}'
|
||||
},
|
||||
icon: {
|
||||
color: '{surface.500}',
|
||||
hoverColor: '{surface.700}',
|
||||
checkedColor: '{surface.900}',
|
||||
disabledColor: '{form.field.disabled.color}'
|
||||
checkedColor: '{surface.900}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
root: {
|
||||
background: '{surface.950}',
|
||||
checkedBackground: '{surface.800}',
|
||||
disabledBackground: '{form.field.disabled.background}',
|
||||
checkedBackground: '{surface.950}',
|
||||
hoverBackground: '{surface.950}',
|
||||
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}'
|
||||
checkedBorderColor: '{surface.950}'
|
||||
},
|
||||
content: {
|
||||
checkedBackground: '{surface.800}'
|
||||
},
|
||||
icon: {
|
||||
color: '{surface.400}',
|
||||
hoverColor: '{surface.300}',
|
||||
checkedColor: '{surface.0}',
|
||||
disabledColor: '{form.field.disabled.color}'
|
||||
checkedColor: '{surface.0}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,49 @@
|
|||
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: {
|
||||
light: {
|
||||
root: {
|
||||
background: '{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}'
|
||||
hoverBackground: '{surface.100}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
root: {
|
||||
background: '{surface.950}',
|
||||
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}'
|
||||
hoverBackground: '{surface.800}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,13 +12,15 @@ const theme = ({ dt }) => `
|
|||
color: ${dt('togglebutton.color')};
|
||||
background: ${dt('togglebutton.background')};
|
||||
border: 1px solid ${dt('togglebutton.border.color')};
|
||||
padding: 0.5rem 1rem;
|
||||
padding: ${dt('togglebutton.padding')};
|
||||
font-size: 1rem;
|
||||
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
border-radius: ${dt('border.radius.md')};
|
||||
font-family: inherit;
|
||||
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;
|
||||
gap: 0.5rem;
|
||||
font-weight: 500;
|
||||
gap: ${dt('togglebutton.gap')};
|
||||
font-weight: ${dt('togglebutton.font.weight')};
|
||||
}
|
||||
|
||||
.p-togglebutton-label,
|
||||
|
|
@ -30,31 +32,35 @@ const theme = ({ dt }) => `
|
|||
.p-togglebutton::before {
|
||||
content: "";
|
||||
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;
|
||||
left: 0.25rem;
|
||||
top: 0.25rem;
|
||||
width: calc(100% - 0.5rem);
|
||||
height: calc(100% - 0.5rem);
|
||||
border-radius: ${dt('border.radius.sm')};
|
||||
left: ${dt('togglebutton.content.left')};
|
||||
top: ${dt('togglebutton.content.top')};
|
||||
width: calc(100% - calc(2 * ${dt('togglebutton.content.left')}));
|
||||
height: calc(100% - calc(2 * ${dt('togglebutton.content.top')}));
|
||||
border-radius: ${dt('togglebutton.border.radius')};
|
||||
}
|
||||
|
||||
.p-togglebutton.p-togglebutton-checked::before {
|
||||
background: ${dt('togglebutton.checked.background')};
|
||||
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.04);
|
||||
background: ${dt('togglebutton.content.checked.background')};
|
||||
box-shadow: ${dt('togglebutton.content.checked.shadow')};
|
||||
}
|
||||
|
||||
.p-togglebutton:not(:disabled):not(.p-togglebutton-checked):hover {
|
||||
background: ${dt('togglebutton.hover.background')};
|
||||
color: ${dt('togglebutton.hover.color')};
|
||||
}
|
||||
|
||||
.p-togglebutton.p-togglebutton-checked {
|
||||
background: ${dt('togglebutton.checked.background')};
|
||||
border-color: ${dt('togglebutton.checked.border.color')};
|
||||
color: ${dt('togglebutton.checked.color')};
|
||||
}
|
||||
|
||||
.p-togglebutton:focus-visible {
|
||||
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
|
||||
outline-offset: ${dt('focus.ring.offset')};
|
||||
box-shadow: ${dt('togglebutton.focus.ring.shadow')};
|
||||
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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue