Tokens for Fieldset
Cagatay Civici
parent
fa00aff0f0
commit
55a380c3f9
|
|
@ -82,6 +82,10 @@ export interface FieldsetPassThroughOptions {
|
|||
* Used to pass attributes to the toggle icon's DOM element.
|
||||
*/
|
||||
toggleIcon?: FieldsetPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the legend label's DOM element.
|
||||
*/
|
||||
toggleButton?: FieldsetPassThroughOptionType;
|
||||
/**
|
||||
* Used to pass attributes to the legend label's DOM element.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -11,9 +11,10 @@
|
|||
:aria-controls="id + '_content'"
|
||||
:aria-expanded="!d_collapsed"
|
||||
:aria-label="buttonAriaLabel"
|
||||
:class="cx('toggleButton')"
|
||||
@click="toggle"
|
||||
@keydown="onKeyDown"
|
||||
v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
|
||||
v-bind="{ ...toggleButtonProps, ...ptm('toggleButton') }"
|
||||
>
|
||||
<!--TODO: togglericon deprecated since v4.0-->
|
||||
<slot :name="$slots.toggleicon ? 'toggleicon' : 'togglericon'" :collapsed="d_collapsed">
|
||||
|
|
|
|||
|
|
@ -4,53 +4,55 @@ const theme = ({ dt }) => `
|
|||
.p-fieldset {
|
||||
background: ${dt('fieldset.background')};
|
||||
border: 1px solid ${dt('fieldset.border.color')};
|
||||
border-radius: ${dt('border.radius.md')};
|
||||
border-radius: ${dt('fieldset.border.radius')};
|
||||
color: ${dt('fieldset.color')};
|
||||
padding: 0 1.125rem 1.125rem 1.125rem;
|
||||
padding: ${dt('fieldset.padding')};
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.p-fieldset-legend {
|
||||
background: ${dt('fieldset.legend.background')};
|
||||
border-radius: 6px;
|
||||
border: 0 none;
|
||||
padding: 0.5rem 0.75rem;
|
||||
margin-bottom: 0.375rem;
|
||||
border-radius: ${dt('fieldset.legend.border.radius')};
|
||||
border-width: ${dt('fieldset.legend.border.width')};
|
||||
border-style: solid;
|
||||
border-color: ${dt('fieldset.legend.border.color')};
|
||||
padding: ${dt('fieldset.legend.padding')};
|
||||
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
|
||||
}
|
||||
|
||||
.p-fieldset-toggleable > .p-fieldset-legend {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.p-fieldset-toggleable > .p-fieldset-legend > button {
|
||||
.p-fieldset-toggle-button {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
gap: ${dt('fieldset.legend.gap')};
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding: ${dt('fieldset.legend.padding')};
|
||||
background: transparent;
|
||||
color: ${dt('fieldset.legend.color')};
|
||||
border: 0 none;
|
||||
border-radius: ${dt('border.radius.md')};
|
||||
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
border-radius: ${dt('fieldset.legend.border.radius')};
|
||||
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
|
||||
outline-color: transparent;
|
||||
}
|
||||
|
||||
.p-fieldset-legend-label {
|
||||
font-weight: 600;
|
||||
font-weight: ${dt('fieldset.legend.font.weight')};
|
||||
}
|
||||
|
||||
.p-fieldset-toggleable > .p-fieldset-legend > a:focus-visible {
|
||||
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
|
||||
outline-offset: ${dt('focus.ring.offset')};
|
||||
.p-fieldset-toggle-button:focus-visible {
|
||||
box-shadow: ${dt('fieldset.legend.focus.ring.shadow')};
|
||||
outline: ${dt('fieldset.legend.focus.ring.width')} ${dt('fieldset.legend.focus.ring.style')} ${dt('fieldset.legend.focus.ring.color')};
|
||||
outline-offset: ${dt('fieldset.legend.focus.ring.offset')};
|
||||
}
|
||||
|
||||
.p-fieldset-toggleable > .p-fieldset-legend > a:hover {
|
||||
.p-fieldset-toggleable > .p-fieldset-legend:hover {
|
||||
color: ${dt('fieldset.legend.hover.color')};
|
||||
background: ${dt('fieldset.legend.hover.background')};
|
||||
}
|
||||
|
|
@ -60,12 +62,12 @@ const theme = ({ dt }) => `
|
|||
transition: color ${dt('transition.duration')};
|
||||
}
|
||||
|
||||
.p-fieldset-toggleable > .p-fieldset-legend > a:hover > .p-fieldset-toggle-icon {
|
||||
.p-fieldset-toggleable > .p-fieldset-legend:hover .p-fieldset-toggle-icon {
|
||||
color: ${dt('fieldset.toggle.icon.hover.color')};
|
||||
}
|
||||
|
||||
.p-fieldset .p-fieldset-content {
|
||||
padding: 0;
|
||||
padding: ${dt('fieldset.content.padding')};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -78,6 +80,7 @@ const classes = {
|
|||
],
|
||||
legend: 'p-fieldset-legend',
|
||||
legendLabel: 'p-fieldset-legend-label',
|
||||
toggleButton: 'p-fieldset-toggle-button',
|
||||
toggleIcon: 'p-fieldset-toggle-icon',
|
||||
contentContainer: 'p-fieldset-content-container',
|
||||
content: 'p-fieldset-content'
|
||||
|
|
|
|||
|
|
@ -2,16 +2,34 @@ export default {
|
|||
root: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{content.border.color}',
|
||||
color: '{content.color}'
|
||||
borderRadius: '{content.border.radius}',
|
||||
color: '{content.color}',
|
||||
padding: '0 1.125rem 1.125rem 1.125rem'
|
||||
},
|
||||
legend: {
|
||||
background: '{content.background}',
|
||||
color: '{content.color}',
|
||||
hoverBackground: '{content.hover.background}',
|
||||
hoverColor: '{content.hover.color}'
|
||||
color: '{content.color}',
|
||||
hoverColor: '{content.hover.color}',
|
||||
borderRadius: '{content.border.radius}',
|
||||
borderWidth: '1px',
|
||||
borderColor: 'transparent',
|
||||
padding: '0.5rem 0.75rem',
|
||||
gap: '0.5rem',
|
||||
fontWeight: '700',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
toggleIcon: {
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.hover.muted.color}'
|
||||
},
|
||||
content: {
|
||||
padding: '0'
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,16 +2,48 @@ export default {
|
|||
root: {
|
||||
background: '{content.background}',
|
||||
borderColor: '{content.border.color}',
|
||||
color: '{content.color}'
|
||||
borderRadius: '{content.border.radius}',
|
||||
color: '{content.color}',
|
||||
padding: '0.75rem 1.125rem 1.125rem '
|
||||
},
|
||||
legend: {
|
||||
background: '{content.background}',
|
||||
color: '{content.color}',
|
||||
hoverBackground: '{content.hover.background}',
|
||||
hoverColor: '{content.hover.color}'
|
||||
borderRadius: '{content.border.radius}',
|
||||
borderWidth: '1px',
|
||||
borderColor: '{content.border.color}',
|
||||
padding: '0.5rem 0.75rem',
|
||||
gap: '0.5rem',
|
||||
fontWeight: '700',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
toggleIcon: {
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.hover.muted.color}'
|
||||
},
|
||||
content: {
|
||||
padding: '0'
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
legend: {
|
||||
background: '{surface.100}',
|
||||
hoverBackground: '{surface.200}',
|
||||
color: '{text.color}',
|
||||
hoverColor: '{text.hover.color}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
legend: {
|
||||
background: '{surface.800}',
|
||||
hoverBackground: '{surface.700}',
|
||||
color: '{text.color}',
|
||||
hoverColor: '{text.hover.color}'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue