Tokens for Accordion

components/lib/accordion/style/AccordionStyle.js

@@ -4,11 +4,9 @@ const theme = ({ dt }) => `
 .p-accordionpanel {
     display: flex;
     flex-direction: column;
-    border-bottom: 1px solid ${dt('accordion.panel.border.color')};
+    border-style: solid;
-}
+    border-width: ${dt('accordion.panel.border.width')};
-
+    border-color: ${dt('accordion.panel.border.color')};
-.p-accordionpanel:last-child {
-    border-bottom: 0 none;
 }
 
 .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-style: solid;
-    border-radius: ${dt('border.radius.md')};
+    border-width: ${dt('accordion.header.border.width')};
-    transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
+    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 {
+.p-accordionpanel:first-child > .p-accordionheader {
-    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
+    border-width: ${dt('accordion.header.first.border.width')};
-    outline-offset: -2px;
+    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;
+    border-style: solid;
-    background: color: ${dt('accordion.content.background')}
+    border-width: ${dt('accordion.content.border.width')};
-    color: ${dt('accordion.content.color')}
+    border-color: ${dt('accordion.content.border.color')};
+    background: color: ${dt('accordion.content.background')};
+    color: ${dt('accordion.content.color')};
+    padding: ${dt('accordion.content.padding')}
 }
 `;
 

components/lib/themes/aura/accordion/index.js

@@ -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;'
     }
 };

components/lib/themes/aura/panelmenu/index.js

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

components/lib/themes/lara/accordion/index.js

@@ -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}'
+            }
+        }
     }
 };

components/lib/themes/lara/panel/index.js

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

components/lib/themes/lara/panelmenu/index.js

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