Tokens for Toolbar

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

@@ -2,6 +2,9 @@ export default {
     root: {
         background: '{content.background}',
         borderColor: '{content.border.color}',
-        color: '{content.color}'
+        borderRadius: '{content.border.radius}',
+        color: '{content.color}',
+        gap: '0.5rem',
+        padding: '0.75rem'
     }
 };

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

@@ -2,6 +2,23 @@ export default {
     root: {
         background: '{content.background}',
         borderColor: '{content.border.color}',
-        color: '{content.color}'
+        borderRadius: '{content.border.radius}',
+        color: '{content.color}',
+        gap: '0.5rem',
+        padding: '0.75rem'
+    },
+    colorScheme: {
+        light: {
+            root: {
+                background: '{surface.100}',
+                color: '{content.color}'
+            }
+        },
+        dark: {
+            root: {
+                background: '{surface.800}',
+                color: '{content.color}'
+            }
+        }
     }
 };

components/lib/toolbar/style/ToolbarStyle.js

@@ -6,12 +6,12 @@ const theme = ({ dt }) => `
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
-    padding: 0.75rem;
+    padding: ${dt('toolbar.padding')};
     background: ${dt('toolbar.background')};
     border: 1px solid ${dt('toolbar.border.color')};
     color: ${dt('toolbar.color')};
-    border-radius: ${dt('border.radius.md')};
+    border-radius: ${dt('toolbar.border.radius')};
-    gap: 0.5rem;
+    gap: ${dt('toolbar.gap')};
 }
 
 .p-toolbar-start,