From d62601e664e0ac07c651fcc26c058be24e9f9e5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Sat, 17 Apr 2021 19:17:18 +0200
Subject: [PATCH] Theme: Variable name changes & progress (#33088)

* Theme variable renames

* Fixed variable issue issue

* Fixed test

* fixed story

* More tweaks

* Updated snapshot
---
 .../src/themes/createComponents.ts            | 22 +++----
 .../grafana-data/src/themes/createPalette.ts  | 57 +++++++++++--------
 .../src/themes/createTheme.test.ts            |  6 +-
 .../grafana-ui/.storybook/storybookTheme.ts   | 14 ++---
 .../grafana-ui/src/components/Alert/Alert.tsx |  4 +-
 .../src/components/Button/ToolbarButton.tsx   |  6 +-
 .../grafana-ui/src/components/Card/Card.tsx   |  4 +-
 .../Forms/RadioButtonGroup/RadioButton.tsx    |  8 ++-
 .../RadioButtonGroup/RadioButtonGroup.tsx     |  2 +-
 .../src/components/Forms/commonStyles.ts      |  8 +--
 .../IconButton/IconButton.story.tsx           | 14 ++---
 .../src/components/IconButton/IconButton.tsx  |  9 +--
 .../grafana-ui/src/components/Menu/Menu.tsx   |  4 +-
 .../src/components/Modal/getModalStyles.ts    |  3 +-
 .../src/components/PageLayout/PageToolbar.tsx |  2 +-
 .../src/components/Select/SingleValue.tsx     |  2 +-
 .../src/components/Select/getSelectStyles.ts  |  6 +-
 .../src/components/Slider/styles.ts           |  2 +-
 .../src/components/Switch/Switch.tsx          |  4 +-
 .../src/components/Tabs/TabContent.tsx        |  2 +-
 .../src/components/Tabs/TabsBar.tsx           |  4 +-
 .../src/components/ThemeDemos/ThemeDemo.tsx   | 30 +++++-----
 .../TimeRangePicker/TimePickerContent.tsx     | 12 ++--
 .../TimeRangePicker/TimePickerFooter.tsx      |  2 +-
 .../src/themes/GlobalStyles/elements.ts       |  2 +-
 .../src/themes/_variables.dark.scss.tmpl.ts   | 48 ++++++++--------
 .../src/themes/_variables.light.scss.tmpl.ts  | 44 +++++++-------
 packages/grafana-ui/src/themes/dark.ts        | 22 +++----
 packages/grafana-ui/src/themes/light.ts       | 14 ++---
 packages/grafana-ui/src/themes/mixins.ts      |  5 +-
 .../src/utils/storybook/withPaddedStory.tsx   |  2 +-
 .../core/components/PageHeader/PageHeader.tsx |  4 +-
 .../AddPanelWidget.test.tsx.snap              |  4 +-
 .../PanelEditor/OptionsPaneCategory.tsx       | 17 +++---
 .../PanelEditor/OptionsPaneOptions.tsx        |  2 +-
 .../PanelEditor/PanelEditorTabs.tsx           | 10 +---
 .../VizTypePicker/PanelTypeCard.tsx           |  4 +-
 .../query/components/QueryEditorRowTitle.tsx  |  2 +-
 public/sass/_variables.dark.generated.scss    | 12 ++--
 public/sass/_variables.light.generated.scss   | 10 ++--
 40 files changed, 219 insertions(+), 210 deletions(-)

diff --git a/packages/grafana-data/src/themes/createComponents.ts b/packages/grafana-data/src/themes/createComponents.ts
index 4b7f02d071e..40e1b19a11f 100644
--- a/packages/grafana-data/src/themes/createComponents.ts
+++ b/packages/grafana-data/src/themes/createComponents.ts
@@ -9,7 +9,7 @@ export interface ThemeComponents {
     md: number;
     lg: number;
   };
-  form: {
+  input: {
     background: string;
     border: string;
     borderHover: string;
@@ -32,8 +32,8 @@ export function createComponents(palette: ThemePalette, shadows: ThemeShadows):
   const panel = {
     padding: 1,
     headerHeight: 4,
-    background: palette.layer1,
-    border: palette.border0,
+    background: palette.background.primary,
+    border: palette.background.primary,
     boxShadow: shadows.z0,
   };
 
@@ -43,23 +43,23 @@ export function createComponents(palette: ThemePalette, shadows: ThemeShadows):
       md: 4,
       lg: 6,
     },
-    form:
+    input:
       palette.mode === 'dark'
         ? {
-            background: palette.layer0,
-            border: palette.border1,
-            borderHover: palette.border2,
+            background: palette.background.canvas,
+            border: palette.border.medium,
+            borderHover: palette.border.strong,
             text: palette.text.primary,
           }
         : {
-            background: palette.layer1,
-            border: palette.border1,
-            borderHover: palette.border2,
+            background: palette.background.primary,
+            border: palette.border.medium,
+            borderHover: palette.border.strong,
             text: palette.text.primary,
           },
     panel,
     dashboard: {
-      background: palette.layer0,
+      background: palette.background.canvas,
       padding: 1,
     },
   };
diff --git a/packages/grafana-data/src/themes/createPalette.ts b/packages/grafana-data/src/themes/createPalette.ts
index aec1c648863..d237f2ac704 100644
--- a/packages/grafana-data/src/themes/createPalette.ts
+++ b/packages/grafana-data/src/themes/createPalette.ts
@@ -26,15 +26,20 @@ export interface ThemePaletteBase<TColor> {
     maxContrast: string;
   };
 
-  layer0: string;
-  layer1: string;
-  layer2: string;
+  background: {
+    /** Dashboard and body background */
+    canvas: string;
+    /** Primary content pane background (panels etc) */
+    primary: string;
+    /** Cards and elements that need to stand out on the primary background */
+    secondary: string;
+  };
 
-  divider: string;
-
-  border0: string;
-  border1: string;
-  border2: string;
+  border: {
+    weak: string;
+    medium: string;
+    strong: string;
+  };
 
   gradients: {
     brandVertical: string;
@@ -119,15 +124,17 @@ class DarkPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
     text: colors.orangeDarkText,
   };
 
-  layer0 = colors.gray05;
-  layer1 = colors.gray10;
-  layer2 = colors.gray15;
+  background = {
+    canvas: colors.gray05,
+    primary: colors.gray10,
+    secondary: colors.gray15,
+  };
 
-  divider = `rgba(${this.whiteBase}, 0.10)`;
-
-  border0 = this.layer1;
-  border1 = `rgba(${this.whiteBase}, 0.15)`;
-  border2 = `rgba(${this.whiteBase}, 0.20)`;
+  border = {
+    weak: `rgba(${this.whiteBase}, 0.10)`,
+    medium: `rgba(${this.whiteBase}, 0.15)`,
+    strong: `rgba(${this.whiteBase}, 0.20)`,
+  };
 
   action = {
     hover: `rgba(${this.whiteBase}, 0.08)`,
@@ -195,15 +202,19 @@ class LightPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
     maxContrast: colors.black,
   };
 
-  layer0 = colors.gray90;
-  layer1 = colors.white;
-  layer2 = colors.gray100;
+  background = {
+    canvas: colors.gray90,
+    primary: colors.white,
+    secondary: colors.gray100,
+  };
 
-  divider = `rgba(${this.blackBase}, 0.12)`;
+  border = {
+    weak: `rgba(${this.blackBase}, 0.12)`,
+    medium: `rgba(${this.blackBase}, 0.30)`,
+    strong: `rgba(${this.blackBase}, 0.40)`,
+  };
 
-  border0 = this.layer1;
-  border1 = `rgba(${this.blackBase}, 0.30)`;
-  border2 = `rgba(${this.blackBase}, 0.40)`;
+  divider = this.border.weak;
 
   action = {
     hover: `rgba(${this.blackBase}, 0.04)`,
diff --git a/packages/grafana-data/src/themes/createTheme.test.ts b/packages/grafana-data/src/themes/createTheme.test.ts
index 0fbca3aa48b..8ae76b15dbe 100644
--- a/packages/grafana-data/src/themes/createTheme.test.ts
+++ b/packages/grafana-data/src/themes/createTheme.test.ts
@@ -8,13 +8,15 @@ describe('createTheme', () => {
         primary: {
           main: 'rgb(240,0,0)',
         },
-        layer0: '#123',
+        background: {
+          canvas: '#123',
+        },
       },
     });
 
     expect(custom.palette.primary.main).toBe('rgb(240,0,0)');
     expect(custom.palette.primary.shade).toBe('rgb(242, 38, 38)');
-    expect(custom.palette.layer0).toBe('#123');
+    expect(custom.palette.background.canvas).toBe('#123');
   });
 
   it('create default theme', () => {
diff --git a/packages/grafana-ui/.storybook/storybookTheme.ts b/packages/grafana-ui/.storybook/storybookTheme.ts
index 081655c9d16..f8bfb721652 100644
--- a/packages/grafana-ui/.storybook/storybookTheme.ts
+++ b/packages/grafana-ui/.storybook/storybookTheme.ts
@@ -13,9 +13,9 @@ const createTheme = (theme: GrafanaTheme) => {
     colorSecondary: theme.v2.palette.error.main,
 
     // UI
-    appBg: theme.v2.palette.layer0,
-    appContentBg: theme.v2.palette.layer1,
-    appBorderColor: theme.v2.palette.border1,
+    appBg: theme.v2.palette.background.canvas,
+    appContentBg: theme.v2.palette.background.primary,
+    appBorderColor: theme.v2.palette.border.medium,
     appBorderRadius: theme.v2.shape.borderRadius(1),
 
     // Typography
@@ -29,12 +29,12 @@ const createTheme = (theme: GrafanaTheme) => {
     // Toolbar default and active colors
     barTextColor: theme.v2.palette.text.primary,
     barSelectedColor: theme.v2.palette.emphasize(theme.v2.palette.primary.text),
-    barBg: theme.v2.palette.layer1,
+    barBg: theme.v2.palette.background.primary,
 
     // Form colors
-    inputBg: theme.v2.components.form.background,
-    inputBorder: theme.v2.components.form.border,
-    inputTextColor: theme.v2.components.form.text,
+    inputBg: theme.v2.components.input.background,
+    inputBorder: theme.v2.components.input.border,
+    inputTextColor: theme.v2.components.input.text,
     inputBorderRadius: theme.v2.shape.borderRadius(1),
 
     brandTitle: 'Grafana UI',
diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx
index c129e9ac992..474f1f884a2 100644
--- a/packages/grafana-ui/src/components/Alert/Alert.tsx
+++ b/packages/grafana-ui/src/components/Alert/Alert.tsx
@@ -79,7 +79,7 @@ const getStyles = (theme: GrafanaTheme, severity: AlertVariant, elevated?: boole
       display: flex;
       flex-direction: row;
       align-items: stretch;
-      background: ${theme.v2.palette.layer2};
+      background: ${theme.v2.palette.background.secondary};
       box-shadow: ${elevated ? theme.v2.shadows.z4 : theme.v2.shadows.z1};
 
       &:before {
@@ -89,7 +89,7 @@ const getStyles = (theme: GrafanaTheme, severity: AlertVariant, elevated?: boole
         left: 0;
         bottom: 0;
         right: 0;
-        background: ${theme.v2.palette.layer1};
+        background: ${theme.v2.palette.background.primary};
         z-index: -1;
       }
     `,
diff --git a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx b/packages/grafana-ui/src/components/Button/ToolbarButton.tsx
index 8406bd6b958..e8e1d3ad74c 100644
--- a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx
+++ b/packages/grafana-ui/src/components/Button/ToolbarButton.tsx
@@ -118,7 +118,7 @@ const getStyles = (theme: GrafanaTheme) => {
       border-radius: ${theme.v2.shape.borderRadius()};
       line-height: ${theme.v2.components.height.md * theme.v2.spacing.gridSize - 2}px;
       font-weight: ${theme.v2.typography.fontWeightMedium};
-      border: 1px solid ${theme.v2.palette.border1};
+      border: 1px solid ${theme.v2.palette.border.medium};
       white-space: nowrap;
       transition: ${theme.v2.transitions.create(['background', 'box-shadow', 'border-color', 'color'], {
         duration: theme.v2.transitions.duration.short,
@@ -154,11 +154,11 @@ const getStyles = (theme: GrafanaTheme) => {
     `,
     default: css`
       color: ${theme.v2.palette.text.secondary};
-      background-color: ${theme.v2.palette.layer1};
+      background-color: ${theme.v2.palette.background.primary};
 
       &:hover {
         color: ${theme.v2.palette.text.primary};
-        background: ${theme.v2.palette.layer2};
+        background: ${theme.v2.palette.background.secondary};
       }
     `,
     active: css`
diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx
index 1c28345fab5..56aa737ecff 100644
--- a/packages/grafana-ui/src/components/Card/Card.tsx
+++ b/packages/grafana-ui/src/components/Card/Card.tsx
@@ -140,7 +140,7 @@ const getContainerStyles = stylesFactory((theme: GrafanaTheme, disabled = false,
   return css({
     display: 'flex',
     width: '100%',
-    background: theme.v2.palette.layer2,
+    background: theme.v2.palette.background.secondary,
     borderRadius: theme.v2.shape.borderRadius(),
     position: 'relative',
     pointerEvents: disabled ? 'none' : 'auto',
@@ -151,7 +151,7 @@ const getContainerStyles = stylesFactory((theme: GrafanaTheme, disabled = false,
 
     ...(!disableHover && {
       '&:hover': {
-        background: theme.v2.palette.emphasize(theme.v2.palette.layer2, 0.03),
+        background: theme.v2.palette.emphasize(theme.v2.palette.background.secondary, 0.03),
         cursor: 'pointer',
         zIndex: 1,
       },
diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
index 83d8e0baad2..34dd635c0fb 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
@@ -57,7 +57,9 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
 
   const textColor = theme.v2.palette.text.secondary;
   const textColorHover = theme.v2.palette.text.primary;
-  const bg = theme.colors.bodyBg;
+  const bg = theme.v2.components.input.background;
+  // remove the group inner padding (set on RadioButtonGroup)
+  const labelHeight = height * theme.v2.spacing.gridSize - 4;
 
   return {
     radio: css`
@@ -91,9 +93,9 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
       display: inline-block;
       position: relative;
       font-size: ${fontSize};
-      height: ${theme.v2.spacing(height)};
+      height: ${labelHeight}px;
       // Deduct border from line-height for perfect vertical centering on windows and linux
-      line-height: ${theme.v2.spacing(height)};
+      line-height: ${labelHeight - 2}px;
       color: ${textColor};
       padding: ${theme.v2.spacing(0, padding)};
       border-radius: ${theme.v2.shape.borderRadius()};
diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
index 04677bfa467..f89d8a37c9e 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
@@ -75,7 +75,7 @@ const getStyles = (theme: GrafanaTheme) => {
       display: 'inline-flex',
       flexDirection: 'row',
       flexWrap: 'nowrap',
-      border: `1px solid ${theme.v2.components.form.border}`,
+      border: `1px solid ${theme.v2.components.input.border}`,
       borderRadius: theme.v2.shape.borderRadius(),
       padding: '2px',
     }),
diff --git a/packages/grafana-ui/src/components/Forms/commonStyles.ts b/packages/grafana-ui/src/components/Forms/commonStyles.ts
index 2fa37f0c188..6767de61b3e 100644
--- a/packages/grafana-ui/src/components/Forms/commonStyles.ts
+++ b/packages/grafana-ui/src/components/Forms/commonStyles.ts
@@ -10,10 +10,10 @@ export const getFocusStyle = (theme: GrafanaTheme) => css`
 `;
 
 export const sharedInputStyle = (theme: GrafanaTheme, invalid = false) => {
-  const borderColor = invalid ? theme.v2.palette.error.border : theme.v2.components.form.border;
-  const borderColorHover = invalid ? theme.v2.palette.error.shade : theme.v2.components.form.borderHover;
-  const background = theme.v2.components.form.background;
-  const textColor = theme.v2.components.form.text;
+  const borderColor = invalid ? theme.v2.palette.error.border : theme.v2.components.input.border;
+  const borderColorHover = invalid ? theme.v2.palette.error.shade : theme.v2.components.input.borderHover;
+  const background = theme.v2.components.input.background;
+  const textColor = theme.v2.components.input.text;
 
   return css`
     background: ${background};
diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
index 4bbb56b37f7..2d25ac8e22c 100644
--- a/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
+++ b/packages/grafana-ui/src/components/IconButton/IconButton.story.tsx
@@ -20,18 +20,18 @@ export default {
 export const Simple = () => {
   return (
     <div>
-      <RenderScenario layer="layer0" />
-      <RenderScenario layer="layer1" />
-      <RenderScenario layer="layer2" />
+      <RenderScenario background="canvas" />
+      <RenderScenario background="primary" />
+      <RenderScenario background="secondary" />
     </div>
   );
 };
 
 interface ScenarioProps {
-  layer: 'layer0' | 'layer1' | 'layer2';
+  background: 'canvas' | 'primary' | 'secondary';
 }
 
-const RenderScenario = ({ layer }: ScenarioProps) => {
+const RenderScenario = ({ background }: ScenarioProps) => {
   const theme = useTheme();
   const sizes: IconSize[] = ['sm', 'md', 'lg', 'xl', 'xxl'];
   const icons: IconName[] = ['search', 'trash-alt', 'arrow-left', 'times'];
@@ -40,7 +40,7 @@ const RenderScenario = ({ layer }: ScenarioProps) => {
     <div
       className={css`
         padding: 30px;
-        background: ${theme.v2.palette[layer]};
+        background: ${theme.v2.palette.background[background]};
         button {
           margin-right: 8px;
           margin-left: 8px;
@@ -48,7 +48,7 @@ const RenderScenario = ({ layer }: ScenarioProps) => {
         }
       `}
     >
-      <div>{layer}</div>
+      <div>{background}</div>
       {icons.map((icon) => {
         return sizes.map((size) => (
           <span key={icon + size}>
diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
index b1c2113144d..7a9eaed9e84 100644
--- a/packages/grafana-ui/src/components/IconButton/IconButton.tsx
+++ b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
@@ -54,6 +54,7 @@ IconButton.displayName = 'IconButton';
 const getStyles = stylesFactory((theme: GrafanaTheme, size: IconSize) => {
   const hoverColor = theme.v2.palette.action.hover;
   const pixelSize = getSvgSize(size);
+  const hoverSize = pixelSize / 2;
 
   return {
     button: css`
@@ -88,10 +89,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme, size: IconSize) => {
         transition-duration: 0.2s;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
         z-index: -1;
-        bottom: -8px;
-        left: -8px;
-        right: -8px;
-        top: -8px;
+        bottom: -${hoverSize}px;
+        left: -${hoverSize}px;
+        right: -${hoverSize}px;
+        top: -${hoverSize}px;
         background: none;
         border-radius: 50%;
         box-sizing: border-box;
diff --git a/packages/grafana-ui/src/components/Menu/Menu.tsx b/packages/grafana-ui/src/components/Menu/Menu.tsx
index ea9a051e855..951f59ea0b1 100644
--- a/packages/grafana-ui/src/components/Menu/Menu.tsx
+++ b/packages/grafana-ui/src/components/Menu/Menu.tsx
@@ -31,10 +31,10 @@ const getStyles = (theme: GrafanaTheme) => {
   return {
     header: css`
       padding: ${theme.v2.spacing(0.5, 0.5, 1, 0.5)};
-      border-bottom: 1px solid ${theme.v2.palette.border1};
+      border-bottom: 1px solid ${theme.v2.palette.border.medium};
     `,
     wrapper: css`
-      background: ${theme.v2.palette.layer2};
+      background: ${theme.v2.palette.background.secondary};
       box-shadow: ${theme.v2.shadows.z2};
       display: inline-block;
       border-radius: ${theme.v2.shape.borderRadius()};
diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
index b7a5bfa397c..f86c7528b59 100644
--- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts
+++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
@@ -3,6 +3,7 @@ import { GrafanaTheme } from '@grafana/data';
 import { stylesFactory } from '../../themes';
 
 export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
+  // rgba(1,4,9,0.8)
   const backdropBackground = 'rgba(0, 0, 0, 0.5)';
   const borderRadius = theme.v2.shape.borderRadius(2);
 
@@ -10,7 +11,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
     modal: css`
       position: fixed;
       z-index: ${theme.v2.zIndex.modal};
-      background: ${theme.v2.palette.layer1};
+      background: ${theme.v2.palette.background.primary};
       box-shadow: ${theme.v2.shadows.z4};
       border-radius: ${borderRadius};
       background-clip: padding-box;
diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
index 23313de3952..80e182f7fdc 100644
--- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
+++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
@@ -132,7 +132,7 @@ const getStyles = (theme: GrafanaTheme) => {
   return {
     toolbar: css`
       display: flex;
-      background: ${theme.v2.palette.layer0};
+      background: ${theme.v2.palette.background.canvas};
       justify-content: flex-end;
       flex-wrap: wrap;
       padding: ${theme.v2.spacing(0, 1, 1, 2)};
diff --git a/packages/grafana-ui/src/components/Select/SingleValue.tsx b/packages/grafana-ui/src/components/Select/SingleValue.tsx
index fa6ab342ab3..818df751e63 100644
--- a/packages/grafana-ui/src/components/Select/SingleValue.tsx
+++ b/packages/grafana-ui/src/components/Select/SingleValue.tsx
@@ -11,7 +11,7 @@ import { GrafanaTheme } from '@grafana/data';
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   const singleValue = css`
     label: singleValue;
-    color: ${theme.v2.components.form.text};
+    color: ${theme.v2.components.input.text};
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
index a62aa434a0f..c90be4f6640 100644
--- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts
+++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
@@ -6,7 +6,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
     menu: css`
       label: grafana-select-menu;
-      background: ${theme.v2.palette.layer2};
+      background: ${theme.v2.palette.background.secondary};
       box-shadow: ${theme.v2.shadows.z3};
       position: relative;
       min-width: 100%;
@@ -56,7 +56,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
     `,
     singleValue: css`
       label: grafana-select-single-value;
-      color: ${theme.v2.components.form.text};
+      color: ${theme.v2.components.input.text};
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -88,7 +88,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
       display: flex;
       align-items: center;
       line-height: 1;
-      background: ${theme.v2.palette.layer2};
+      background: ${theme.v2.palette.background.secondary};
       border-radius: ${theme.v2.shape.borderRadius()};
       margin: ${theme.v2.spacing(0, 1, 0, 0)};
       padding: ${theme.v2.spacing(0.25, 0, 0.25, 1)};
diff --git a/packages/grafana-ui/src/components/Slider/styles.ts b/packages/grafana-ui/src/components/Slider/styles.ts
index 9986ef8b556..2d45fe5b40a 100644
--- a/packages/grafana-ui/src/components/Slider/styles.ts
+++ b/packages/grafana-ui/src/components/Slider/styles.ts
@@ -12,7 +12,7 @@ export const getFocusStyle = (theme: GrafanaTheme) => css`
 
 export const getStyles = stylesFactory((theme: GrafanaTheme, isHorizontal: boolean) => {
   const { spacing } = theme;
-  const railColor = theme.v2.palette.border2;
+  const railColor = theme.v2.palette.border.strong;
   const trackColor = theme.v2.palette.primary.main;
   const handleColor = theme.v2.palette.primary.main;
   const blueOpacity = theme.v2.palette.primary.transparent;
diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx
index 4021eb462ac..735cb844555 100644
--- a/packages/grafana-ui/src/components/Switch/Switch.tsx
+++ b/packages/grafana-ui/src/components/Switch/Switch.tsx
@@ -127,8 +127,8 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme, transparent?: boolea
       height: ${theme.v2.spacing(theme.v2.components.height.md)};
       display: flex;
       align-items: center;
-      background: ${transparent ? 'transparent' : theme.v2.components.form.background};
-      border: 1px solid ${transparent ? 'transparent' : theme.v2.components.form.border};
+      background: ${transparent ? 'transparent' : theme.v2.components.input.background};
+      border: 1px solid ${transparent ? 'transparent' : theme.v2.components.input.border};
       border-radius: ${theme.v2.shape.borderRadius()};
     `,
   };
diff --git a/packages/grafana-ui/src/components/Tabs/TabContent.tsx b/packages/grafana-ui/src/components/Tabs/TabContent.tsx
index 5abe7a1dafd..2d203fc62ff 100644
--- a/packages/grafana-ui/src/components/Tabs/TabContent.tsx
+++ b/packages/grafana-ui/src/components/Tabs/TabContent.tsx
@@ -11,7 +11,7 @@ const getTabContentStyle = stylesFactory((theme: GrafanaTheme) => {
   return {
     tabContent: css`
       padding: ${theme.spacing.sm};
-      background: ${theme.v2.palette.layer1};
+      background: ${theme.v2.palette.background.primary};
     `,
   };
 });
diff --git a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
index 5809e1ea5d3..4217e9345d5 100644
--- a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
+++ b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
@@ -12,13 +12,11 @@ export interface Props {
 }
 
 const getTabsBarStyles = stylesFactory((theme: GrafanaTheme, hideBorder = false) => {
-  const colors = theme.colors;
-
   return {
     tabsWrapper:
       !hideBorder &&
       css`
-        border-bottom: 1px solid ${colors.pageHeaderBorder};
+        border-bottom: 1px solid ${theme.v2.palette.border.weak};
       `,
     tabs: css`
       position: relative;
diff --git a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
index ab23013a509..ecd8139907a 100644
--- a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
+++ b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
@@ -85,13 +85,13 @@ export const ThemeDemo = () => {
         color: ${t.palette.text.primary};
       `}
     >
-      <DemoBox bg={t.palette.layer0}>
+      <DemoBox bg={t.palette.background.canvas}>
         <CollapsableSection label="Layers" isOpen={true}>
-          <DemoText>t.palette.layer0</DemoText>
-          <DemoBox bg={t.palette.layer1} border={t.palette.border0}>
-            <DemoText>t.palette.layer1 is the main & preferred content </DemoText>
-            <DemoBox bg={t.palette.layer2} border={t.palette.border0}>
-              <DemoText>t.palette.layer2 and t.palette.border.layer1</DemoText>
+          <DemoText>t.palette.background.canvas</DemoText>
+          <DemoBox bg={t.palette.background.primary} border={t.palette.border.weak}>
+            <DemoText>t.palette.background.primary is the main & preferred content </DemoText>
+            <DemoBox bg={t.palette.background.secondary} border={t.palette.border.weak}>
+              <DemoText>t.palette.background.secondary and t.palette.border.layer1</DemoText>
             </DemoBox>
           </DemoBox>
         </CollapsableSection>
@@ -100,16 +100,16 @@ export const ThemeDemo = () => {
             <DemoBox>
               <TextColors t={t} />
             </DemoBox>
-            <DemoBox bg={t.palette.layer1}>
+            <DemoBox bg={t.palette.background.primary}>
               <TextColors t={t} />
             </DemoBox>
-            <DemoBox bg={t.palette.layer2}>
+            <DemoBox bg={t.palette.background.secondary}>
               <TextColors t={t} />
             </DemoBox>
           </HorizontalGroup>
         </CollapsableSection>
         <CollapsableSection label="Rich colors" isOpen={true}>
-          <DemoBox bg={t.palette.layer1}>
+          <DemoBox bg={t.palette.background.primary}>
             <table className={colorsTableStyle}>
               <thead>
                 <tr>
@@ -128,7 +128,7 @@ export const ThemeDemo = () => {
           </DemoBox>
         </CollapsableSection>
         <CollapsableSection label="Forms" isOpen={true}>
-          <DemoBox bg={t.palette.layer1}>
+          <DemoBox bg={t.palette.background.primary}>
             <Field label="Input label" description="Field description">
               <Input placeholder="Placeholder" />
             </Field>
@@ -166,7 +166,7 @@ export const ThemeDemo = () => {
           </DemoBox>
         </CollapsableSection>
         <CollapsableSection label="Shadows" isOpen={true}>
-          <DemoBox bg={t.palette.layer1}>
+          <DemoBox bg={t.palette.background.primary}>
             <HorizontalGroup>
               {Object.keys(t.shadows).map((key) => (
                 <ShadowDemo name={key} shadow={(t.shadows as any)[key]} key={key} />
@@ -175,7 +175,7 @@ export const ThemeDemo = () => {
           </DemoBox>
         </CollapsableSection>
         <CollapsableSection label="Buttons" isOpen={true}>
-          <DemoBox bg={t.palette.layer1}>
+          <DemoBox bg={t.palette.background.primary}>
             <VerticalGroup spacing="lg">
               <HorizontalGroup>
                 {allButtonVariants.map((variant) => (
@@ -319,7 +319,7 @@ export function ActionsDemo() {
 
   return (
     <HorizontalGroup>
-      <DemoBox bg={t.palette.layer0}>
+      <DemoBox bg={t.palette.background.canvas}>
         <VerticalGroup>
           <div className={item}>item</div>
           <div className={item}>item</div>
@@ -328,7 +328,7 @@ export function ActionsDemo() {
           <div className={cx(item, focused)}>item focused</div>
         </VerticalGroup>
       </DemoBox>
-      <DemoBox bg={t.palette.layer1}>
+      <DemoBox bg={t.palette.background.primary}>
         <VerticalGroup>
           <div className={item}>item</div>
           <div className={item}>item</div>
@@ -337,7 +337,7 @@ export function ActionsDemo() {
           <div className={cx(item, focused)}>item focused</div>
         </VerticalGroup>
       </DemoBox>
-      <DemoBox bg={t.palette.layer2}>
+      <DemoBox bg={t.palette.background.secondary}>
         <VerticalGroup>
           <div className={item}>item</div>
           <div className={item}>item</div>
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
index 484e2d6f6aa..53f5c97c6d5 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
@@ -14,14 +14,14 @@ import { TimePickerFooter } from './TimePickerFooter';
 const getStyles = stylesFactory((theme: GrafanaTheme, isReversed, hideQuickRanges, isContainerTall) => {
   return {
     container: css`
-      background: ${theme.v2.palette.layer2};
+      background: ${theme.v2.palette.background.secondary};
       box-shadow: ${theme.v2.shadows.z4};
       position: absolute;
       z-index: ${theme.zIndex.dropdown};
       width: 546px;
       top: 116%;
       border-radius: 2px;
-      border: 1px solid ${theme.v2.palette.border0};
+      border: 1px solid ${theme.v2.palette.border.weak};
       ${isReversed ? 'left' : 'right'}: 0;
 
       @media only screen and (max-width: ${theme.breakpoints.lg}) {
@@ -35,14 +35,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isReversed, hideQuickRange
     leftSide: css`
       display: flex;
       flex-direction: column;
-      border-right: ${isReversed ? 'none' : `1px solid ${theme.v2.palette.divider}`};
+      border-right: ${isReversed ? 'none' : `1px solid ${theme.v2.palette.border.weak}`};
       width: ${!hideQuickRanges ? '60%' : '100%'};
       overflow: hidden;
       order: ${isReversed ? 1 : 0};
     `,
     rightSide: css`
       width: 40% !important;
-      border-right: ${isReversed ? `1px solid ${theme.v2.palette.divider}` : 'none'};
+      border-right: ${isReversed ? `1px solid ${theme.v2.palette.border.weak}` : 'none'};
 
       @media only screen and (max-width: ${theme.breakpoints.lg}) {
         width: 100% !important;
@@ -61,11 +61,11 @@ const getNarrowScreenStyles = stylesFactory((theme: GrafanaTheme) => {
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
-      border-bottom: 1px solid ${theme.v2.palette.divider};
+      border-bottom: 1px solid ${theme.v2.palette.border.weak};
       padding: 7px 9px 7px 9px;
     `,
     body: css`
-      border-bottom: 1px solid ${theme.v2.palette.divider};
+      border-bottom: 1px solid ${theme.v2.palette.border.weak};
     `,
     form: css`
       padding: 7px 9px 7px 9px;
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx
index 5f5b9a3ab13..bcfb6e22808 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx
@@ -85,7 +85,7 @@ export const TimePickerFooter: FC<Props> = (props) => {
 const getStyle = stylesFactory((theme: GrafanaTheme) => {
   return {
     container: css`
-      border-top: 1px solid ${theme.v2.palette.divider};
+      border-top: 1px solid ${theme.v2.palette.border.weak};
       padding: 11px;
       display: flex;
       flex-direction: row;
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
index 167e9eb006d..f47d8067e4d 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
@@ -18,7 +18,7 @@ export function getElementStyles(theme: GrafanaThemeV2) {
       width: 100%;
       position: absolute;
       color: ${theme.palette.text.primary};
-      background-color: ${theme.palette.layer0};
+      background-color: ${theme.palette.background.canvas};
       ${getVariantStyles(theme.typography.body)}
     }
 
diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
index f1bc76967f2..d8f5982df8d 100644
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -55,14 +55,14 @@ $gray-6: ${theme.palette.gray6};
 $input-black: ${theme.colors.formInputBg};
 $white: ${theme.palette.white};
 
-$layer0: ${theme.v2.palette.layer0};
-$layer1: ${theme.v2.palette.layer1};
-$layer2: ${theme.v2.palette.layer2};
+$layer0: ${theme.v2.palette.background.canvas};
+$layer1: ${theme.v2.palette.background.primary};
+$layer2: ${theme.v2.palette.background.secondary};
 
-$divider: ${theme.v2.palette.divider};
+$divider: ${theme.v2.palette.border.weak};
 
-$border0: ${theme.v2.palette.border0};
-$border1: ${theme.v2.palette.border1};
+$border0: ${theme.v2.palette.border.weak};
+$border1: ${theme.v2.palette.border.medium};
 
 // Accent colors
 // -------------------------
@@ -141,16 +141,16 @@ $page-header-border-color: ${theme.colors.pageHeaderBorder};
 $divider-border-color: $gray-1;
 
 // Graphite Target Editor
-$tight-form-func-bg: ${theme.v2.palette.layer2};
-$tight-form-func-highlight-bg: ${theme.v2.palette.emphasize(theme.v2.palette.layer2, 0.03)};
+$tight-form-func-bg: ${theme.v2.palette.background.secondary};
+$tight-form-func-highlight-bg: ${theme.v2.palette.emphasize(theme.v2.palette.background.secondary, 0.03)};
 
 $modal-backdrop-bg: ${theme.colors.bg3};
 $code-tag-bg: $dark-1;
 $code-tag-border: $dark-9;
 
 // cards
-$card-background: ${theme.v2.palette.layer2};
-$card-background-hover: ${theme.v2.palette.emphasize(theme.v2.palette.layer2, 0.03)};
+$card-background: ${theme.v2.palette.background.secondary};
+$card-background-hover: ${theme.v2.palette.emphasize(theme.v2.palette.background.secondary, 0.03)};
 $card-shadow: none;
 
 // Lists
@@ -167,10 +167,10 @@ $scrollbarBorder: black;
 
 // Tables
 // -------------------------
-$table-bg-accent: ${theme.v2.palette.layer2};
-$table-border: ${theme.v2.palette.border1};
-$table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.02)};
-$table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.05)};
+$table-bg-accent: ${theme.v2.palette.background.secondary};
+$table-border: ${theme.v2.palette.border.medium};
+$table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.02)};
+$table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.05)};
 
 // Buttons
 // -------------------------
@@ -228,10 +228,10 @@ $typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground: ${theme.v2.palette.layer2};
-$dropdownBorder: ${theme.v2.palette.border0};
-$dropdownDividerTop: ${theme.v2.palette.divider};
-$dropdownDividerBottom: ${theme.v2.palette.divider};
+$dropdownBackground: ${theme.v2.palette.background.secondary};
+$dropdownBorder: ${theme.v2.palette.border.weak};
+$dropdownDividerTop: ${theme.v2.palette.border.weak};
+$dropdownDividerBottom: ${theme.v2.palette.border.weak};
 
 $dropdownLinkColor: $link-color;
 $dropdownLinkColorHover: $white;
@@ -259,7 +259,7 @@ $side-menu-header-color: ${theme.colors.text};
 
 // Menu dropdowns
 // -------------------------
-$menu-dropdown-bg: ${theme.v2.palette.layer2};
+$menu-dropdown-bg: ${theme.v2.palette.background.secondary};
 $menu-dropdown-hover-bg: ${theme.v2.palette.action.hover};
 $menu-dropdown-shadow: ${theme.v2.shadows.z3};
 
@@ -284,16 +284,16 @@ $tooltipArrowWidth: 5px;
 $tooltipLinkColor: $link-color;
 $graph-tooltip-bg: $dark-1;
 
-$tooltipBackground: ${theme.v2.palette.layer2};
+$tooltipBackground: ${theme.v2.palette.background.secondary};
 $tooltipColor: ${theme.v2.palette.text.primary};
-$tooltipArrowColor: ${theme.v2.palette.layer2};
+$tooltipArrowColor: ${theme.v2.palette.background.secondary};
 $tooltipBackgroundError: ${theme.v2.palette.error.main};
 $tooltipShadow: ${theme.v2.shadows.z2};
 
-$popover-bg: ${theme.v2.palette.layer2};
+$popover-bg: ${theme.v2.palette.background.secondary};
 $popover-color: ${theme.v2.palette.text.primary};
-$popover-border-color: ${theme.v2.palette.border1};
-$popover-header-bg: ${theme.v2.palette.layer2};
+$popover-border-color: ${theme.v2.palette.border.medium};
+$popover-header-bg: ${theme.v2.palette.background.secondary};
 $popover-shadow: ${theme.v2.shadows.z4};
 
 $popover-help-bg: $tooltipBackground;
diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
index 30e892208a6..e452206fae0 100644
--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -51,14 +51,14 @@ $gray-7: ${theme.palette.gray7};
 
 $white: ${theme.palette.white};
 
-$layer0: ${theme.v2.palette.layer0};
-$layer1: ${theme.v2.palette.layer1};
-$layer2: ${theme.v2.palette.layer2};
+$layer0: ${theme.v2.palette.background.canvas};
+$layer1: ${theme.v2.palette.background.primary};
+$layer2: ${theme.v2.palette.background.secondary};
 
-$divider: ${theme.v2.palette.divider};
+$divider: ${theme.v2.palette.border.weak};
 
-$border0: ${theme.v2.palette.border0};
-$border1: ${theme.v2.palette.border1};
+$border0: ${theme.v2.palette.border.weak};
+$border1: ${theme.v2.palette.border.medium};
 
 // Accent colors
 // -------------------------
@@ -144,8 +144,8 @@ $code-tag-bg: $gray-6;
 $code-tag-border: $gray-4;
 
 // cards
-$card-background: ${theme.v2.palette.layer2};
-$card-background-hover: ${theme.v2.palette.layer2};
+$card-background: ${theme.v2.palette.background.secondary};
+$card-background-hover: ${theme.v2.palette.background.secondary};
 $card-shadow: none;
 
 // Lists
@@ -162,10 +162,10 @@ $scrollbarBorder: $gray-7;
 
 // Tables
 // -------------------------
-$table-bg-accent: ${theme.v2.palette.layer2};
-$table-border: ${theme.v2.palette.border1};
-$table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.02)};
-$table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.05)};
+$table-bg-accent: ${theme.v2.palette.background.secondary};
+$table-border: ${theme.v2.palette.border.medium};
+$table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.02)};
+$table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.05)};
 
 // Buttons
 // -------------------------
@@ -223,10 +223,10 @@ $typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground: ${theme.v2.palette.layer2};
-$dropdownBorder: ${theme.v2.palette.border0};
-$dropdownDividerTop: ${theme.v2.palette.divider};
-$dropdownDividerBottom: ${theme.v2.palette.divider};
+$dropdownBackground: ${theme.v2.palette.background.secondary};
+$dropdownBorder: ${theme.v2.palette.border.weak};
+$dropdownDividerTop: ${theme.v2.palette.border.weak};
+$dropdownDividerBottom: ${theme.v2.palette.border.weak};
 
 $dropdownLinkColor: $dark-2;
 $dropdownLinkColorHover: $link-color;
@@ -256,7 +256,7 @@ $side-menu-header-color: ${theme.palette.gray95};
 
 // Menu dropdowns
 // -------------------------
-$menu-dropdown-bg: ${theme.v2.palette.layer2};
+$menu-dropdown-bg: ${theme.v2.palette.background.secondary};
 $menu-dropdown-hover-bg: ${theme.v2.palette.action.hover};
 $menu-dropdown-shadow: ${theme.v2.shadows.z3};
 
@@ -276,16 +276,16 @@ $alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
 $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
 
 // Tooltips and popovers
-$tooltipBackground: ${theme.v2.palette.layer2};
+$tooltipBackground: ${theme.v2.palette.background.secondary};
 $tooltipColor: ${theme.v2.palette.text.primary};
-$tooltipArrowColor: ${theme.v2.palette.layer2};
+$tooltipArrowColor: ${theme.v2.palette.background.secondary};
 $tooltipBackgroundError: ${theme.v2.palette.error.main};
 $tooltipShadow: ${theme.v2.shadows.z2};
 
-$popover-bg: ${theme.v2.palette.layer2};
+$popover-bg: ${theme.v2.palette.background.secondary};
 $popover-color: ${theme.v2.palette.text.primary};
-$popover-border-color: ${theme.v2.palette.border1};
-$popover-header-bg: ${theme.v2.palette.layer2};
+$popover-border-color: ${theme.v2.palette.border.medium};
+$popover-header-bg: ${theme.v2.palette.background.secondary};
 $popover-shadow: ${theme.v2.shadows.z4};
 
 $graph-tooltip-bg: $gray-5;
diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts
index 91f21bc5f40..da76f540f94 100644
--- a/packages/grafana-ui/src/themes/dark.ts
+++ b/packages/grafana-ui/src/themes/dark.ts
@@ -37,18 +37,18 @@ const basicColors = {
 };
 
 const backgrounds = {
-  bg1: v2.palette.layer1,
-  bg2: v2.palette.layer2,
+  bg1: v2.palette.background.primary,
+  bg2: v2.palette.background.secondary,
   bg3: v2.palette.action.hover,
-  dashboardBg: v2.palette.layer0,
+  dashboardBg: v2.palette.background.canvas,
   bgBlue1: v2.palette.primary.main,
   bgBlue2: v2.palette.primary.shade,
 };
 
 const borders = {
-  border1: v2.palette.border0,
-  border2: v2.palette.border1,
-  border3: v2.palette.border2,
+  border1: v2.palette.border.weak,
+  border2: v2.palette.border.medium,
+  border3: v2.palette.border.strong,
 };
 
 const textColors = {
@@ -114,11 +114,11 @@ const darkTheme: GrafanaTheme = {
     ...form,
     ...textColors,
 
-    bodyBg: backgrounds.bg1,
-    panelBg: backgrounds.bg1,
-    pageHeaderBg: backgrounds.bg2,
-    pageHeaderBorder: borders.border1,
-    panelBorder: borders.border1,
+    bodyBg: v2.palette.background.canvas,
+    panelBg: v2.components.panel.background,
+    panelBorder: v2.components.panel.border,
+    pageHeaderBg: v2.palette.background.canvas,
+    pageHeaderBorder: v2.palette.background.canvas,
 
     dropdownBg: form.formInputBg,
     dropdownShadow: basicColors.black,
diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts
index c89b5b47874..d162df192b9 100644
--- a/packages/grafana-ui/src/themes/light.ts
+++ b/packages/grafana-ui/src/themes/light.ts
@@ -36,18 +36,18 @@ const basicColors = {
 };
 
 const backgrounds = {
-  bg1: v2.palette.layer1,
-  bg2: v2.palette.layer2,
+  bg1: v2.palette.background.primary,
+  bg2: v2.palette.background.secondary,
   bg3: v2.palette.action.hover,
-  dashboardBg: v2.palette.layer0,
+  dashboardBg: v2.palette.background.canvas,
   bgBlue1: basicColors.blue80,
   bgBlue2: basicColors.blue77,
 };
 
 const borders = {
-  border1: v2.palette.border0,
-  border2: v2.palette.border1,
-  border3: v2.palette.border2,
+  border1: v2.palette.border.weak,
+  border2: v2.palette.border.medium,
+  border3: v2.palette.border.strong,
 };
 
 const textColors = {
@@ -113,7 +113,7 @@ const lightTheme: GrafanaTheme = {
     ...textColors,
     ...form,
 
-    bodyBg: backgrounds.bg1,
+    bodyBg: v2.palette.background.canvas,
     panelBg: backgrounds.bg1,
     pageHeaderBg: backgrounds.bg2,
     pageHeaderBorder: borders.border1,
diff --git a/packages/grafana-ui/src/themes/mixins.ts b/packages/grafana-ui/src/themes/mixins.ts
index 9c5f31f4937..5a956c1414f 100644
--- a/packages/grafana-ui/src/themes/mixins.ts
+++ b/packages/grafana-ui/src/themes/mixins.ts
@@ -49,8 +49,7 @@ export const focusCss = (theme: GrafanaTheme) => `
 export function getMouseFocusStyles(theme: GrafanaThemeV2): CSSObject {
   return {
     outline: 'none',
-    boxShadow: `${theme.shadows.z1}`,
-    transition: theme.transitions.create('box-shadow'),
+    boxShadow: `none`,
   };
 }
 
@@ -58,7 +57,7 @@ export function getFocusStyles(theme: GrafanaThemeV2): CSSObject {
   return {
     outline: '2px dotted transparent',
     outlineOffset: '2px',
-    boxShadow: `0 0 0 2px ${theme.palette.layer0}, 0 0 0px 4px ${theme.palette.primary.main}`,
+    boxShadow: `0 0 0 2px ${theme.palette.background.canvas}, 0 0 0px 4px ${theme.palette.primary.main}`,
     transition: `all 0.2s cubic-bezier(0.19, 1, 0.22, 1)`,
   };
 }
diff --git a/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx b/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx
index 8eaabf7a3d5..8e6dfc02184 100644
--- a/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx
@@ -12,7 +12,7 @@ const PaddedStory: React.FunctionComponent<{}> = ({ children }) => {
         padding: '20px',
         display: 'flex',
         minHeight: '80vh',
-        background: `${theme.v2.palette.layer1}`,
+        background: `${theme.v2.palette.background.primary}`,
       }}
     >
       <GlobalStyles />
diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx
index ef9a2f40519..cbbfcf82f1d 100644
--- a/public/app/core/components/PageHeader/PageHeader.tsx
+++ b/public/app/core/components/PageHeader/PageHeader.tsx
@@ -139,8 +139,8 @@ function renderTitle(title: string, breadcrumbs: NavModelBreadcrumb[]) {
 
 const getStyles = (theme: GrafanaTheme) => ({
   headerCanvas: css`
-    background: ${theme.v2.palette.layer0};
-    border-bottom: 1px solid ${theme.v2.palette.border0};
+    background: ${theme.v2.palette.background.canvas};
+    border-bottom: 1px solid ${theme.v2.palette.border.weak};
   `,
 });
 
diff --git a/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap b/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
index efeedfb35e2..1bf43050506 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
+++ b/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Render should render component 1`] = `
 <div
-  className="panel-container css-bopjp7"
+  className="panel-container css-ozhi9g"
 >
   <AddPanelWidgetHandle
     onCancel={[Function]}
@@ -15,7 +15,7 @@ exports[`Render should render component 1`] = `
         "libraryPanelsWrapper": "css-18m13of",
         "noMargin": "css-u023fv",
         "panelSearchInput": "css-2ug8g3",
-        "wrapper": "css-bopjp7",
+        "wrapper": "css-ozhi9g",
       }
     }
   >
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
index 0ee786a6fd6..a86989eb878 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
@@ -90,7 +90,7 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
 const getStyles = (theme: GrafanaTheme) => {
   return {
     box: css`
-      border-bottom: 1px solid ${theme.v2.palette.divider};
+      border-bottom: 1px solid ${theme.v2.palette.border.weak};
       &:last-child {
         border-bottom: none;
       }
@@ -102,7 +102,7 @@ const getStyles = (theme: GrafanaTheme) => {
       margin-bottom: ${theme.spacing.formSpacingBase * 2}px;
     `,
     toggle: css`
-      color: ${theme.colors.textWeak};
+      color: ${theme.v2.palette.text.secondary};
       margin-right: ${theme.spacing.sm};
     `,
     title: css`
@@ -113,23 +113,22 @@ const getStyles = (theme: GrafanaTheme) => {
       display: flex;
       cursor: pointer;
       align-items: baseline;
-      padding: ${theme.spacing.sm};
+      padding: ${theme.v2.spacing(1)};
       color: ${theme.v2.palette.text.primary};
-      font-weight: ${theme.typography.weight.semibold};
+      font-weight: ${theme.v2.typography.fontWeightMedium};
 
       &:hover {
-        background: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.03)};
+        background: ${theme.v2.palette.emphasize(theme.v2.palette.background.primary, 0.03)};
       }
     `,
     headerExpanded: css`
       color: ${theme.v2.palette.text.primary};
     `,
     headerNested: css`
-      padding-left: 0;
-      padding-right: 0;
+      padding: ${theme.v2.spacing(0.5, 0, 0.5, 0)};
     `,
     body: css`
-      padding: ${theme.spacing.sm} ${theme.spacing.md} ${theme.spacing.sm} ${theme.spacing.xl};
+      padding: ${theme.v2.spacing(1, 2, 1, 4)};
     `,
     bodyNested: css`
       position: relative;
@@ -141,7 +140,7 @@ const getStyles = (theme: GrafanaTheme) => {
         left: 8px;
         width: 1px;
         height: 100%;
-        background: ${theme.colors.pageHeaderBorder};
+        background: ${theme.v2.palette.border.weak};
       }
     `,
   };
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
index 92ce306faa2..ac06a22e13b 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
@@ -180,7 +180,7 @@ const getStyles = (theme: GrafanaTheme) => ({
   `,
   mainBox: css`
     background: ${theme.colors.bg1};
-    border: 1px solid ${theme.colors.border1};
+    border: 1px solid ${theme.v2.components.panel.border};
     border-top: none;
     flex-grow: 1;
   `,
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
index 0a68b828e94..be6eccabec3 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
@@ -36,7 +36,7 @@ export const PanelEditorTabs: FC<PanelEditorTabsProps> = React.memo(({ panel, da
 
   return (
     <div className={styles.wrapper}>
-      <TabsBar className={styles.tabBar}>
+      <TabsBar className={styles.tabBar} hideBorder>
         {tabs.map((tab) => {
           return (
             <Tab
@@ -91,12 +91,8 @@ const getStyles = (theme: GrafanaTheme) => {
       flex-direction: column;
       flex-grow: 1;
       min-height: 0;
-      background: ${theme.colors.panelBg};
-      border-right: 1px solid ${theme.colors.pageHeaderBorder};
-
-      .toolbar {
-        background: transparent;
-      }
+      background: ${theme.v2.palette.background.primary};
+      border-right: 1px solid ${theme.v2.components.panel.border};
     `,
   };
 };
diff --git a/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx b/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
index e600a1d5683..7380336b69c 100644
--- a/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
+++ b/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
@@ -69,7 +69,7 @@ const getStyles = (theme: GrafanaTheme) => {
       display: flex;
       flex-shrink: 0;
       cursor: pointer;
-      background: ${theme.v2.palette.layer2};
+      background: ${theme.v2.palette.background.secondary};
       border-radius: ${theme.v2.shape.borderRadius()};
       box-shadow: ${theme.v2.shadows.z0};
       align-items: center;
@@ -83,7 +83,7 @@ const getStyles = (theme: GrafanaTheme) => {
       })};
 
       &:hover {
-        background: ${styleMixins.hoverColor(theme.v2.palette.layer2, theme)};
+        background: ${styleMixins.hoverColor(theme.v2.palette.background.secondary, theme)};
       }
     `,
     itemContent: css`
diff --git a/public/app/features/query/components/QueryEditorRowTitle.tsx b/public/app/features/query/components/QueryEditorRowTitle.tsx
index 7eab004000d..dd2f136a4fe 100644
--- a/public/app/features/query/components/QueryEditorRowTitle.tsx
+++ b/public/app/features/query/components/QueryEditorRowTitle.tsx
@@ -137,7 +137,7 @@ const getQueryEditorRowTitleStyles = stylesFactory((theme: GrafanaTheme) => {
       &:hover {
         .query-name-wrapper {
           background: ${theme.v2.palette.action.hover};
-          border: 1px dashed ${theme.v2.palette.border1};
+          border: 1px dashed ${theme.v2.palette.border.medium};
         }
 
         .query-name-edit-icon {
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss
index d289cbf6ff6..2c9fb23c8e5 100644
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -64,7 +64,7 @@ $layer2: #22252b;
 
 $divider: rgba(201, 209, 217, 0.10);
 
-$border0: #181b1f;
+$border0: rgba(201, 209, 217, 0.10);
 $border1: rgba(201, 209, 217, 0.15);
 
 // Accent colors
@@ -94,8 +94,8 @@ $critical: #e02f44;
 
 // Scaffolding
 // -------------------------
-$body-bg: #181b1f;
-$page-bg: #181b1f;
+$body-bg: #111217;
+$page-bg: #111217;
 $dashboard-bg: #111217;
 
 $text-color-strong: #fff;
@@ -137,9 +137,9 @@ $panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0
 $panel-corner: $panel-bg;
 
 // page header
-$page-header-bg: #22252b;
+$page-header-bg: #111217;
 $page-header-shadow: inset 0px -4px 14px $dark-3;
-$page-header-border-color: #181b1f;
+$page-header-border-color: #111217;
 
 $divider-border-color: $gray-1;
 
@@ -232,7 +232,7 @@ $typeahead-selected-color: $yellow;
 // Dropdowns
 // -------------------------
 $dropdownBackground: #22252b;
-$dropdownBorder: #181b1f;
+$dropdownBorder: rgba(201, 209, 217, 0.10);
 $dropdownDividerTop: rgba(201, 209, 217, 0.10);
 $dropdownDividerBottom: rgba(201, 209, 217, 0.10);
 
diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss
index d7befffe0b2..1c2bd2d52f2 100644
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -59,7 +59,7 @@ $layer2: #F4F5F5;
 
 $divider: rgba(36, 41, 46, 0.12);
 
-$border0: #fff;
+$border0: rgba(36, 41, 46, 0.12);
 $border1: rgba(36, 41, 46, 0.30);
 
 // Accent colors
@@ -89,8 +89,8 @@ $critical: #c4162a;
 
 // Scaffolding
 // -------------------------
-$body-bg: #fff;
-$page-bg: #fff;
+$body-bg: #F4F5F5;
+$page-bg: #F4F5F5;
 $dashboard-bg: #F4F5F5;
 
 $text-color: rgba(36, 41, 46, 1);
@@ -133,7 +133,7 @@ $panel-corner: $panel-bg;
 // Page header
 $page-header-bg: #F4F5F5;
 $page-header-shadow: inset 0px -3px 10px $gray-6;
-$page-header-border-color: #fff;
+$page-header-border-color: rgba(36, 41, 46, 0.12);
 
 $divider-border-color: $gray-2;
 
@@ -226,7 +226,7 @@ $typeahead-selected-color: $yellow;
 // Dropdowns
 // -------------------------
 $dropdownBackground: #F4F5F5;
-$dropdownBorder: #fff;
+$dropdownBorder: rgba(36, 41, 46, 0.12);
 $dropdownDividerTop: rgba(36, 41, 46, 0.12);
 $dropdownDividerBottom: rgba(36, 41, 46, 0.12);