Theme: Expose Drawer padding as part of theme.components (#104273)

* expose drawer padding as part of theme.components

* add default

packages/grafana-data/src/themes/createComponents.ts

@@ -36,6 +36,9 @@ export interface ThemeComponents {
     background: string;
     padding: number;
   };
+  drawer: {
+    padding: number;
+  };
   textHighlight: {
     background: string;
     text: string;
@@ -87,6 +90,9 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
       background: colors.background.canvas,
       padding: 1,
     },
+    drawer: {
+      padding: 2,
+    },
     overlay: {
       background: colors.mode === 'dark' ? 'rgba(63, 62, 62, 0.5)' : 'rgba(208, 209, 211, 0.5)',
     },

packages/grafana-ui/src/components/Drawer/Drawer.tsx

@@ -334,7 +334,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       paddingTop: theme.spacing(1),
     }),
     content: css({
-      padding: theme.spacing(2),
+      padding: theme.spacing(theme.components.drawer?.padding ?? 2),
       height: '100%',
       flexGrow: 1,
       minHeight: 0,