diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index 2a879ef17c8..bb7d66acbe2 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -246,9 +246,4 @@ $external-services: (
     icon: '',
   ),
 ) !default;
-
-:export {
-  panelhorizontalpadding: $panel-horizontal-padding;
-  panelverticalpadding: $panel-vertical-padding;
-}
 `;
diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts
index f400889e665..fb32175820d 100644
--- a/packages/grafana-ui/src/themes/default.ts
+++ b/packages/grafana-ui/src/themes/default.ts
@@ -62,6 +62,10 @@ const theme: GrafanaThemeCommons = {
       sm: '1px',
     },
   },
+  panelPadding: {
+    horizontal: 10,
+    vertical: 5,
+  },
 };
 
 export default theme;
diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts
index cd90a40e780..667a0684827 100644
--- a/packages/grafana-ui/src/types/theme.ts
+++ b/packages/grafana-ui/src/types/theme.ts
@@ -67,6 +67,10 @@ export interface GrafanaThemeCommons {
       sm: string;
     };
   };
+  panelPadding: {
+    horizontal: number;
+    vertical: number;
+  };
 }
 
 export interface GrafanaTheme extends GrafanaThemeCommons {
diff --git a/public/app/features/dashboard/containers/DashboardPage.test.tsx b/public/app/features/dashboard/containers/DashboardPage.test.tsx
index 1095effcfa2..e3b9e1ca77a 100644
--- a/public/app/features/dashboard/containers/DashboardPage.test.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.test.tsx
@@ -6,11 +6,6 @@ import { cleanUpDashboard } from '../state/actions';
 import { getNoPayloadActionCreatorMock, NoPayloadActionCreatorMock } from 'app/core/redux';
 import { DashboardRouteInfo, DashboardInitPhase } from 'app/types';
 
-jest.mock('sass/_variables.generated.scss', () => ({
-  panelhorizontalpadding: 10,
-  panelVerticalPadding: 10,
-}));
-
 jest.mock('app/features/dashboard/components/DashboardSettings/SettingsCtrl', () => ({}));
 
 interface ScenarioContext {
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx
index 7136a14a907..52bbd494f9a 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.test.tsx
@@ -1,10 +1,5 @@
 import { PanelChrome } from './PanelChrome';
 
-jest.mock('sass/_variables.generated.scss', () => ({
-  panelhorizontalpadding: 10,
-  panelVerticalPadding: 10,
-}));
-
 describe('PanelChrome', () => {
   let chrome: PanelChrome;
 
diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
index 0a9d1d44ceb..deb14f130ec 100644
--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx
@@ -14,6 +14,7 @@ import ErrorBoundary from '../../../core/components/ErrorBoundary/ErrorBoundary'
 import { applyPanelTimeOverrides, snapshotDataToPanelData } from 'app/features/dashboard/utils/panel';
 import { PANEL_HEADER_HEIGHT } from 'app/core/constants';
 import { profiler } from 'app/core/profiler';
+import config from 'app/core/config';
 
 // Types
 import { DashboardModel, PanelModel } from '../state';
@@ -21,7 +22,6 @@ import { PanelPlugin } from 'app/types';
 import { DataQueryResponse, TimeRange, LoadingState, PanelData, DataQueryError } from '@grafana/ui';
 import { ScopedVars } from '@grafana/ui';
 
-import variables from 'sass/_variables.generated.scss';
 import templateSrv from 'app/features/templating/template_srv';
 
 const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
@@ -160,8 +160,8 @@ export class PanelChrome extends PureComponent<Props, State> {
           panelData={panelData}
           timeRange={timeRange}
           options={panel.getOptions(plugin.exports.reactPanel.defaults)}
-          width={width - 2 * variables.panelhorizontalpadding}
-          height={height - PANEL_HEADER_HEIGHT - variables.panelverticalpadding}
+          width={width - 2 * config.theme.panelPadding.horizontal}
+          height={height - PANEL_HEADER_HEIGHT - config.theme.panelPadding.vertical}
           renderCounter={renderCounter}
           replaceVariables={this.replaceVariables}
         />
diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss
index 75d033fcf87..ddb94f804d4 100644
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -249,8 +249,3 @@ $external-services: (
     icon: '',
   ),
 ) !default;
-
-:export {
-  panelhorizontalpadding: $panel-horizontal-padding;
-  panelverticalpadding: $panel-vertical-padding;
-}
diff --git a/public/sass/_variables.generated.scss.d.ts b/public/sass/_variables.generated.scss.d.ts
deleted file mode 100644
index 992dbb7bddf..00000000000
--- a/public/sass/_variables.generated.scss.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface GrafanaVariables {
-  panelhorizontalpadding: number;
-  panelverticalpadding: number;
-}
-
-declare const variables: GrafanaVariables;
-
-export default variables;