Tokens for Panel

components/lib/panel/style/PanelStyle.js

@@ -3,33 +3,45 @@ import BaseStyle from 'primevue/base/style';
 const theme = ({ dt }) => `
 .p-panel {
     border: 1px solid ${dt('panel.border.color')};
-    border-radius: ${dt('border.radius.md')};
+    border-radius: ${dt('panel.border.radius')};
     background: ${dt('panel.background')};
     color: ${dt('panel.color')};
+    display: flex;
+    flex-direction: column;
+    gap: ${dt('panel.gap')};
 }
 
 .p-panel-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1.125rem;
+    padding: ${dt('panel.header.padding')};
+    background: ${dt('panel.header.background')};
+    color: ${dt('panel.header.color')};
+    border-style: solid;
+    border-width: ${dt('panel.header.border.width')};
+    border-color: ${dt('panel.header.border.color')};
 }
 
 .p-panel-toggleable .p-panel-header {
-    padding: 0.75rem 1.125rem;
+    padding: ${dt('panel.toggleable.header.padding')};
 }
 
 .p-panel-title {
     line-height: 1;
-    font-weight: 600;
+    font-weight: ${dt('panel.title.font.weight')};
 }
 
 .p-panel-content {
-    padding: 0 1.125rem 1.125rem 1.125rem;
+    padding: ${dt('panel.content.padding')};
 }
 
 .p-panel-footer {
-    padding: 0 1.125rem 1.125rem 1.125rem;
+    padding: ${dt('panel.footer.padding')};
+}
+
+.p-panel-header + .p-panel-content-container >  .p-panel-content {
+    padding-top: 0;
 }
 `;
 

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

@@ -2,6 +2,26 @@ export default {
     root: {
         background: '{content.background}',
         borderColor: '{content.border.color}',
-        color: '{content.color}'
+        color: '{content.color}',
+        borderRadius: '{content.border.radius}',
+        gap: '0'
+    },
+    header: {
+        background: 'transparent',
+        color: '{text.color}',
+        padding: '1.125rem',
+        borderWidth: '0'
+    },
+    toggleableHeader: {
+        padding: '0.375rem 1.125rem'
+    },
+    title: {
+        fontWeight: '600'
+    },
+    content: {
+        padding: '1.125rem'
+    },
+    footer: {
+        padding: '0 1.125rem 1.125rem 1.125rem'
     }
 };

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

@@ -1,7 +1,41 @@
 export default {
     root: {
-        background: 'red', // @todo - dummy test
+        background: '{content.background}',
         borderColor: '{content.border.color}',
-        color: '{content.color}'
+        color: '{content.color}',
+        borderRadius: '{content.border.radius}',
+        gap: '1.125rem'
+    },
+    header: {
+        borderWidth: '0 0 1px 0',
+        borderColor: '{content.border.color}',
+        padding: '1.125rem'
+    },
+    toggleableHeader: {
+        padding: '0.375rem 1.125rem'
+    },
+    title: {
+        fontWeight: '700'
+    },
+    content: {
+        padding: '1.125rem',
+        withHeaderPadding: '1.125rem'
+    },
+    footer: {
+        padding: '0 1.125rem 1.125rem 1.125rem'
+    },
+    colorScheme: {
+        light: {
+            header: {
+                background: '{surface.100}',
+                color: '{text.color}'
+            }
+        },
+        dark: {
+            header: {
+                background: '{surface.800}',
+                color: '{text.color}'
+            }
+        }
     }
 };