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

Tokens for Accordion

pull/5756/head
Cagatay Civici 2024-05-12 00:25:43 +03:00
parent bf1f8b1017
commit c207339127
6 changed files with 147 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
components/lib/accordion/style/AccordionStyle.js
View File

@ -4,11 +4,9 @@ const theme = ({ dt }) => `
.p-accordionpanel {
display: flex;
flex-direction: column;
border-bottom: 1px solid ${dt('accordion.panel.border.color')};
}
.p-accordionpanel:last-child {
border-bottom: 0 none;
border-style: solid;
border-width: ${dt('accordion.panel.border.width')};
border-color: ${dt('accordion.panel.border.color')};
}
.p-accordionheader {
@ -17,32 +15,78 @@ const theme = ({ dt }) => `
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.125rem 1.125rem 1.125rem 1.125rem;
padding: ${dt('accordion.header.padding')};
color: ${dt('accordion.header.color')};
background: ${dt('accordion.header.background')};
font-weight: 600;
border-radius: ${dt('border.radius.md')};
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-style: solid;
border-width: ${dt('accordion.header.border.width')};
border-color: ${dt('accordion.header.border.color')};
font-weight: ${dt('accordion.header.font.weight')};
border-radius: ${dt('accordion.header.border.radius')};
transition: background ${dt('transition.duration')}; color ${dt('transition.duration')}color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
outline-color: transparent;
}
.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: -2px;
.p-accordionpanel:first-child > .p-accordionheader {
border-width: ${dt('accordion.header.first.border.width')};
border-top-left-radius: ${dt('accordion.header.first.top.border.radius')};
border-top-right-radius: ${dt('accordion.header.first.top.border.radius')};
}
.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled):hover > .p-accordionheader {
.p-accordionpanel:last-child > .p-accordionheader {
border-bottom-left-radius: ${dt('accordion.header.last.bottom.border.radius')};
border-bottom-right-radius: ${dt('accordion.header.last.bottom.border.radius')};
}
.p-accordionpanel:last-child.p-accordionpanel-active > .p-accordionheader {
border-bottom-left-radius: ${dt('accordion.header.last.active.bottom.border.radius')};
border-bottom-right-radius:${dt('accordion.header.last.active.bottom.border.radius')};
}
.p-accordionheader-toggle-icon {
color: ${dt('accordion.header.toggle.icon.color')};
}
.p-accordionpanel:not(.p-disabled) .p-accordionheader:focus-visible {
box-shadow: ${dt('accordion.header.focus.ring.shadow')};
outline: ${dt('accordion.header.focus.ring.width')} ${dt('accordion.header.focus.ring.style')} ${dt('accordion.header.focus.ring.color')};
outline-offset: ${dt('accordion.header.focus.ring.offset')};
}
.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) > .p-accordionheader:hover {
background: ${dt('accordion.header.hover.background')};
color: ${dt('accordion.header.hover.color')}
}
.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon {
color: ${dt('accordion.header.toggle.icon.hover.color')};
}
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader {
background: ${dt('accordion.header.active.background')};
color: ${dt('accordion.header.active.color')}
}
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader .p-accordionheader-toggle-icon {
color: ${dt('accordion.header.toggle.icon.active.color')};
}
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover {
background: ${dt('accordion.header.active.hover.background')};
color: ${dt('accordion.header.active.hover.color')}
}
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active > .p-accordionheader:hover .p-accordionheader-toggle-icon {
color: ${dt('accordion.header.toggle.icon.active.hover.color')};
}
.p-accordioncontent-content {
padding: 0 1.125rem 1.125rem 1.125rem;
background: color: ${dt('accordion.content.background')}
color: ${dt('accordion.content.color')}
border-style: solid;
border-width: ${dt('accordion.content.border.width')};
border-color: ${dt('accordion.content.border.color')};
background: color: ${dt('accordion.content.background')};
color: ${dt('accordion.content.color')};
padding: ${dt('accordion.content.padding')}
}
`;

39
components/lib/themes/aura/accordion/index.js
View File

@ -1,15 +1,48 @@
export default {
panel: {
borderWidth: '0 0 1px 0',
borderColor: '{content.border.color}'
},
header: {
background: '{content.background}',
color: '{text.muted.color}',
hoverColor: '{text.color}',
activeColor: '{text.color}'
activeColor: '{text.color}',
padding: '1.125rem',
fontWeight: '600',
borderRadius: '0',
borderWidth: '0',
borderColor: '{content.border.color}',
background: '{content.background}',
hoverBackground: '{content.background}',
activeBackground: '{content.background}',
activeHoverBackground: '{content.background}',
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.color}',
activeColor: '{text.color}',
activeHoverColor: '{text.color}'
},
first: {
topBorderRadius: '{content.border.radius}',
borderWidth: '0'
},
last: {
bottomBorderRadius: '{content.border.radius}',
activeBottomBorderRadius: '0'
}
},
content: {
borderWidth: '0',
borderColor: '{content.border.color}',
background: '{content.background}',
color: '{text.color}'
color: '{text.color}',
padding: '1.125rem;'
}
};

1
components/lib/themes/aura/panelmenu/index.js
View File

@ -15,7 +15,6 @@ export default {
},
last: {
borderWidth: '1px',
borderRadius: '{content.border.radius}',
bottomBorderRadius: '{content.border.radius}'
}
},

53
components/lib/themes/lara/accordion/index.js
View File

@ -1,15 +1,62 @@
export default {
panel: {
borderWidth: '0',
borderColor: '{content.border.color}'
},
header: {
background: '{content.background}',
color: '{text.muted.color}',
hoverColor: '{text.color}',
activeColor: '{text.color}'
activeColor: '{text.color}',
padding: '1.125rem',
fontWeight: '700',
borderRadius: '0',
borderWidth: '0 1px 1px 1px',
borderColor: '{content.border.color}',
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.color}',
activeColor: '{text.color}',
activeHoverColor: '{text.color}'
},
first: {
topBorderRadius: '{content.border.radius}',
borderWidth: '1px'
},
last: {
bottomBorderRadius: '{content.border.radius}',
activeBottomBorderRadius: '0'
}
},
content: {
borderWidth: '0 1px 1px 1px',
borderColor: '{content.border.color}',
background: '{content.background}',
color: '{text.color}'
color: '{text.color}',
padding: '1.125rem;'
},
colorScheme: {
light: {
header: {
background: '{surface.100}',
hoverBackground: '{surface.200}',
activeBackground: '{surface.100}',
activeHoverBackground: '{surface.200}'
}
},
dark: {
header: {
background: '{surface.800}',
hoverBackground: '{surface.700}',
activeBackground: '{surface.800}',
activeHoverBackground: '{surface.700}'
}
}
}
};

2
components/lib/themes/lara/panel/index.js
View File

@ -27,7 +27,7 @@ export default {
colorScheme: {
light: {
header: {
background: '{surface.50}',
background: '{surface.100}',
color: '{text.color}'
}
},

1
components/lib/themes/lara/panelmenu/index.js
View File

@ -15,7 +15,6 @@ export default {
},
last: {
borderWidth: '0 1px 1px 1px',
borderRadius: '{content.border.radius}',
bottomBorderRadius: '{content.border.radius}'
}
},