Tokens for DataView

components/lib/dataview/style/DataViewStyle.js

@@ -1,35 +1,54 @@
 import BaseStyle from 'primevue/base/style';
 
 const theme = ({ dt }) => `
+.p-dataview {
+    border-color: ${dt('dataview.border.color')};
+    border-width: ${dt('dataview.border.width')};
+    border-style: solid;
+    border-radius: ${dt('dataview.border.radius')};
+    padding: ${dt('dataview.padding')};
+}
+
 .p-dataview-header {
     background: ${dt('dataview.header.background')};
     color: ${dt('dataview.header.color')};
-    border: 1px solid ${dt('dataview.header.border.color')};
+    border-color: ${dt('dataview.header.border.color')};
-    border-width: 0 0 1px 0;
+    border-width: ${dt('dataview.header.border.width')};
-    padding: 0.75rem 1rem;
+    border-style: solid;
+    padding: ${dt('dataview.header.padding')};
+    border-radius: ${dt('dataview.header.border.radius')};
 }
 
 .p-dataview-content {
     background: ${dt('dataview.content.background')};
+    border-color: ${dt('dataview.content.border.color')};
+    border-width: ${dt('dataview.content.border.width')};
+    border-style: solid;
     color: ${dt('dataview.content.color')};
+    padding: ${dt('dataview.content.padding')};
+    border-radius: ${dt('dataview.content.border.radius')};
 }
 
 .p-dataview-footer {
     background: ${dt('dataview.footer.background')};
     color: ${dt('dataview.footer.color')};
-    border: 1px solid ${dt('dataview.footer.border.color')};
+    border-color: ${dt('dataview.footer.border.color')};
-    border-width: 1px 0 0 0;
+    border-width: ${dt('dataview.footer.border.width')};
-    padding: 0.75rem 1rem;
+    border-style: solid;
+    padding: ${dt('dataview.footer.padding')};
+    border-radius: ${dt('dataview.footer.border.radius')};
 }
 
 .p-dataview-paginator-top {
-    border: solid ${dt('dataview.header.border.color')};
+    border-width: ${dt('dataview.paginator.top.border.width')};
-    border-width: 0 0 1px 0;
+    border-color: ${dt('dataview.paginator.top.border.color')};
+    border-style: solid;
 }
 
 .p-dataview-paginator-bottom {
-    border: solid ${dt('dataview.footer.border.color')};
+    border-width: ${dt('dataview.paginator.bottom.border.width')};
-    border-width: 1px 0 0 0;
+    border-color: ${dt('dataview.paginator.bottom.border.color')};
+    border-style: solid;
 }
 `;
 

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

@@ -1,16 +1,40 @@
 export default {
+    root: {
+        borderColor: 'transparent',
+        borderWidth: '0',
+        borderRadius: '0',
+        padding: '0'
+    },
     header: {
         background: '{content.background}',
+        color: '{content.color}',
         borderColor: '{content.border.color}',
-        color: '{content.color}'
+        borderWidth: '0 0 1px 0',
+        padding: '0.75rem 1rem',
+        borderRadius: '0'
     },
     content: {
         background: '{content.background}',
-        color: '{content.color}'
+        color: '{content.color}',
+        borderColor: 'transparent',
+        borderWidth: '0',
+        padding: '0',
+        borderRadius: '0'
     },
     footer: {
         background: '{content.background}',
+        color: '{content.color}',
         borderColor: '{content.border.color}',
-        color: '{content.color}'
+        borderWidth: '1px 0 0 0',
+        padding: '0.75rem 1rem',
+        borderRadius: '0'
+    },
+    paginatorTop: {
+        borderColor: '{content.border.color}',
+        borderWidth: '0 0 1px 0'
+    },
+    paginatorBottom: {
+        borderColor: '{content.border.color}',
+        borderWidth: '1px 0 0 0'
     }
 };

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

@@ -1,16 +1,52 @@
 export default {
-    header: {
+    root: {
-        background: '{content.background}',
         borderColor: '{content.border.color}',
-        color: '{content.color}'
+        borderWidth: '1px',
+        borderRadius: '4px',
+        padding: '0'
+    },
+    header: {
+        borderColor: '{content.border.color}',
+        borderWidth: '0 0 1px 0',
+        padding: '0.875rem 1.125rem',
+        borderRadius: '3px 3px 0 0'
     },
     content: {
         background: '{content.background}',
-        color: '{content.color}'
+        color: '{content.color}',
+        borderColor: 'transparent',
+        borderWidth: '0',
+        padding: '0',
+        borderRadius: '3px'
     },
     footer: {
         background: '{content.background}',
+        color: '{content.color}',
         borderColor: '{content.border.color}',
-        color: '{content.color}'
+        borderWidth: '1px 0 0 0',
+        padding: '0.875rem 1.125rem',
+        borderRadius: '0 0 3px 3px'
+    },
+    paginatorTop: {
+        borderColor: '{content.border.color}',
+        borderWidth: '0 0 1px 0'
+    },
+    paginatorBottom: {
+        borderColor: '{content.border.color}',
+        borderWidth: '1px 0 0 0'
+    },
+    colorScheme: {
+        light: {
+            header: {
+                background: '{surface.100}',
+                color: '{text.color}'
+            }
+        },
+        dark: {
+            header: {
+                background: '{surface.800}',
+                color: '{text.color}'
+            }
+        }
     }
 };