Tokens for Drawer

components/lib/drawer/style/DrawerStyle.js

@@ -11,13 +11,13 @@ const theme = ({ dt }) => `
     background: ${dt('drawer.background')};
     color: ${dt('drawer.color')};
     border: 1px solid ${dt('drawer.border.color')};
-    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+    box-shadow: ${dt('drawer.shadow')};
 }
 
 .p-drawer-content {
     overflow-y: auto;
     flex-grow: 1;
-    padding: 0 1.125rem 1.125rem 1.125rem;
+    padding: ${dt('drawer.content.padding')};
 }
 
 .p-drawer-header {
@@ -25,12 +25,12 @@ const theme = ({ dt }) => `
     align-items: center;
     justify-content: space-between;
     flex-shrink: 0;
-    padding: 1.125rem;
+    padding: ${dt('drawer.header.padding')};
 }
 
 .p-drawer-title {
-    font-weight: 600;
+    font-weight: ${dt('drawer.title.font.weight')};
-    font-size: 1.25rem;
+    font-size: ${dt('drawer.title.font.size')};
 }
 
 .p-drawer-full .p-drawer {

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

@@ -1,7 +1,19 @@
 export default {
     root: {
-        background: '{content.background}',
+        background: '{overlay.modal.background}',
-        borderColor: '{content.border.color}',
+        borderColor: '{overlay.modal.border.color}',
-        color: '{content.color}'
+        color: '{overlay.modal.color}',
+        borderRadius: '{overlay.modal.border.radius}',
+        shadow: '{overlay.modal.shadow}'
+    },
+    header: {
+        padding: '{overlay.modal.padding}'
+    },
+    title: {
+        fontSize: '1.25rem',
+        fontWeight: '600'
+    },
+    content: {
+        padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}'
     }
 };

components/lib/themes/aura/index.js

@@ -180,6 +180,11 @@ export default {
                 borderRadius: '{border.radius.md}',
                 padding: '0.75rem',
                 shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
+            },
+            modal: {
+                borderRadius: '{border.radius.sm}',
+                padding: '1.125rem',
+                shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
             }
         },
         colorScheme: {
@@ -252,6 +257,11 @@ export default {
                         background: '{surface.0}',
                         borderColor: '{surface.200}',
                         color: '{text.color}'
+                    },
+                    modal: {
+                        background: '{surface.0}',
+                        borderColor: '{surface.200}',
+                        color: '{text.color}'
                     }
                 },
                 list: {
@@ -357,6 +367,11 @@ export default {
                         background: '{surface.900}',
                         borderColor: '{surface.700}',
                         color: '{text.color}'
+                    },
+                    modal: {
+                        background: '{surface.900}',
+                        borderColor: '{surface.700}',
+                        color: '{text.color}'
                     }
                 },
                 list: {

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

@@ -1,7 +1,19 @@
 export default {
     root: {
-        background: '{content.background}',
+        background: '{overlay.modal.background}',
-        borderColor: '{content.border.color}',
+        borderColor: '{overlay.modal.border.color}',
-        color: '{content.color}'
+        color: '{overlay.modal.color}',
+        borderRadius: '{overlay.modal.border.radius}',
+        shadow: '{overlay.modal.shadow}'
+    },
+    header: {
+        padding: '{overlay.modal.padding}'
+    },
+    title: {
+        fontSize: '1.25rem',
+        fontWeight: '600'
+    },
+    content: {
+        padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}'
     }
 };

components/lib/themes/lara/index.js

@@ -178,7 +178,12 @@ export default {
             popover: {
                 borderRadius: '{border.radius.sm}',
                 padding: '1rem',
-                shadow: '0 2px 12px 0 rgba(0, 0, 0, 0.1)'
+                shadow: '0 1px 3px rgba(0, 0, 0, 0.3)'
+            },
+            modal: {
+                borderRadius: '{border.radius.sm}',
+                padding: '1.25rem',
+                shadow: '0 1px 3px rgba(0, 0, 0, 0.3)'
             }
         },
         colorScheme: {
@@ -254,6 +259,11 @@ export default {
                         background: '{surface.0}',
                         borderColor: '{surface.200}',
                         color: '{text.color}'
+                    },
+                    modal: {
+                        background: '{surface.0}',
+                        borderColor: '{surface.200}',
+                        color: '{text.color}'
                     }
                 },
                 list: {
@@ -362,6 +372,11 @@ export default {
                         background: '{surface.900}',
                         borderColor: '{surface.700}',
                         color: '{text.color}'
+                    },
+                    modal: {
+                        background: '{surface.900}',
+                        borderColor: '{surface.700}',
+                        color: '{text.color}'
                     }
                 },
                 list: {