Theme: Renames theme.palette to theme.colors (#33214)

* Theme: Rename theme.palette to theme.colors

* renaming files

packages/grafana-data/src/themes/createColors.test.ts

@@ -1,13 +1,13 @@
-import { createPalette } from './createPalette';
+import { createColors } from './createColors';
 
 describe('createColors', () => {
   it('Should enrich colors', () => {
-    const palette = createPalette({});
+    const palette = createColors({});
     expect(palette.primary.name).toBe('primary');
   });
 
   it('Should allow overrides', () => {
-    const palette = createPalette({
+    const palette = createColors({
       primary: {
         main: '#FF0000',
       },

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

@@ -1,14 +1,14 @@
 import { merge } from 'lodash';
 import { alpha, darken, emphasize, getContrastRatio, lighten } from './colorManipulator';
-import { colors } from './colors';
+import { palette } from './palette';
-import { DeepPartial, ThemePaletteColor } from './types';
+import { DeepPartial, ThemeRichColor } from './types';
 
 /** @internal */
-export type ThemePaletteMode = 'light' | 'dark';
+export type ThemeColorsMode = 'light' | 'dark';
 
 /** @internal */
-export interface ThemePaletteBase<TColor> {
+export interface ThemeColorsBase<TColor> {
-  mode: ThemePaletteMode;
+  mode: ThemeColorsMode;
 
   primary: TColor;
   secondary: TColor;
@@ -71,7 +71,7 @@ export interface ThemePaletteBase<TColor> {
 export interface ThemeHoverStrengh {}
 
 /** @beta */
-export interface ThemePalette extends ThemePaletteBase<ThemePaletteColor> {
+export interface ThemeColors extends ThemeColorsBase<ThemeRichColor> {
   /** Returns a text color for the background */
   getContrastText(background: string): string;
   /* Brighten or darken a color by specified factor (0-1) */
@@ -79,10 +79,10 @@ export interface ThemePalette extends ThemePaletteBase<ThemePaletteColor> {
 }
 
 /** @internal */
-export type ThemePaletteInput = DeepPartial<ThemePaletteBase<ThemePaletteColor>>;
+export type ThemeColorsInput = DeepPartial<ThemeColorsBase<ThemeRichColor>>;
 
-class DarkPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
+class DarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
-  mode: ThemePaletteMode = 'dark';
+  mode: ThemeColorsMode = 'dark';
 
   whiteBase = '201, 209, 217';
 
@@ -90,14 +90,14 @@ class DarkPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
     primary: `rgb(${this.whiteBase})`,
     secondary: `rgba(${this.whiteBase}, 0.65)`,
     disabled: `rgba(${this.whiteBase}, 0.40)`,
-    link: colors.blueDarkText,
+    link: palette.blueDarkText,
-    maxContrast: colors.white,
+    maxContrast: palette.white,
   };
 
   primary = {
-    main: colors.blueDarkMain,
+    main: palette.blueDarkMain,
-    text: colors.blueDarkText,
+    text: palette.blueDarkText,
-    border: colors.blueDarkText,
+    border: palette.blueDarkText,
   };
 
   secondary = {
@@ -110,24 +110,24 @@ class DarkPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
   info = this.primary;
 
   error = {
-    main: colors.redDarkMain,
+    main: palette.redDarkMain,
-    text: colors.redDarkText,
+    text: palette.redDarkText,
   };
 
   success = {
-    main: colors.greenDarkMain,
+    main: palette.greenDarkMain,
-    text: colors.greenDarkText,
+    text: palette.greenDarkText,
   };
 
   warning = {
-    main: colors.orangeDarkMain,
+    main: palette.orangeDarkMain,
-    text: colors.orangeDarkText,
+    text: palette.orangeDarkText,
   };
 
   background = {
-    canvas: colors.gray05,
+    canvas: palette.gray05,
-    primary: colors.gray10,
+    primary: palette.gray10,
-    secondary: colors.gray15,
+    secondary: palette.gray15,
   };
 
   border = {
@@ -156,15 +156,15 @@ class DarkPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
   tonalOffset = 0.15;
 }
 
-class LightPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
+class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
-  mode: ThemePaletteMode = 'light';
+  mode: ThemeColorsMode = 'light';
 
   blackBase = '36, 41, 46';
 
   primary = {
-    main: colors.blueLightMain,
+    main: palette.blueLightMain,
-    border: colors.blueLightText,
+    border: palette.blueLightText,
-    text: colors.blueLightText,
+    text: palette.blueLightText,
   };
 
   secondary = {
@@ -174,24 +174,24 @@ class LightPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
   };
 
   info = {
-    main: colors.blueLightMain,
+    main: palette.blueLightMain,
-    text: colors.blueLightText,
+    text: palette.blueLightText,
   };
 
   error = {
-    main: colors.redLightMain,
+    main: palette.redLightMain,
-    text: colors.redLightText,
+    text: palette.redLightText,
-    border: colors.redLightText,
+    border: palette.redLightText,
   };
 
   success = {
-    main: colors.greenLightMain,
+    main: palette.greenLightMain,
-    text: colors.greenLightText,
+    text: palette.greenLightText,
   };
 
   warning = {
-    main: colors.orangeLightMain,
+    main: palette.orangeLightMain,
-    text: colors.orangeLightText,
+    text: palette.orangeLightText,
   };
 
   text = {
@@ -199,13 +199,13 @@ class LightPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
     secondary: `rgba(${this.blackBase}, 0.75)`,
     disabled: `rgba(${this.blackBase}, 0.50)`,
     link: this.primary.text,
-    maxContrast: colors.black,
+    maxContrast: palette.black,
   };
 
   background = {
-    canvas: colors.gray90,
+    canvas: palette.gray90,
-    primary: colors.white,
+    primary: palette.white,
-    secondary: colors.gray100,
+    secondary: palette.gray100,
   };
 
   border = {
@@ -236,10 +236,10 @@ class LightPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
   tonalOffset = 0.2;
 }
 
-export function createPalette(palette: ThemePaletteInput): ThemePalette {
+export function createColors(colors: ThemeColorsInput): ThemeColors {
-  const dark = new DarkPalette();
+  const dark = new DarkColors();
-  const light = new LightPalette();
+  const light = new LightColors();
-  const base = (palette.mode ?? 'dark') === 'dark' ? dark : light;
+  const base = (colors.mode ?? 'dark') === 'dark' ? dark : light;
   const {
     primary = base.primary,
     secondary = base.secondary,
@@ -251,7 +251,7 @@ export function createPalette(palette: ThemePaletteInput): ThemePalette {
     hoverFactor = base.hoverFactor,
     contrastThreshold = base.contrastThreshold,
     ...other
-  } = palette;
+  } = colors;
 
   function getContrastText(background: string) {
     const contrastText =
@@ -262,7 +262,7 @@ export function createPalette(palette: ThemePaletteInput): ThemePalette {
     return contrastText;
   }
 
-  const getRichColor = ({ color, name }: GetRichColorProps): ThemePaletteColor => {
+  const getRichColor = ({ color, name }: GetRichColorProps): ThemeRichColor => {
     color = { ...color, name };
     if (!color.main) {
       throw new Error(`Missing main color for ${name}`);
@@ -282,7 +282,7 @@ export function createPalette(palette: ThemePaletteInput): ThemePalette {
     if (!color.contrastText) {
       color.contrastText = getContrastText(color.main);
     }
-    return color as ThemePaletteColor;
+    return color as ThemeRichColor;
   };
 
   return merge(
@@ -304,6 +304,6 @@ export function createPalette(palette: ThemePaletteInput): ThemePalette {
 }
 
 interface GetRichColorProps {
-  color: Partial<ThemePaletteColor>;
+  color: Partial<ThemeRichColor>;
   name: string;
 }

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

@@ -1,4 +1,4 @@
-import { ThemePalette } from './createPalette';
+import { ThemeColors } from './createColors';
 import { ThemeShadows } from './createShadows';
 
 /** @beta */
@@ -32,12 +32,12 @@ export interface ThemeComponents {
   };
 }
 
-export function createComponents(palette: ThemePalette, shadows: ThemeShadows): ThemeComponents {
+export function createComponents(colors: ThemeColors, shadows: ThemeShadows): ThemeComponents {
   const panel = {
     padding: 1,
     headerHeight: 4,
-    background: palette.background.primary,
+    background: colors.background.primary,
-    border: palette.background.primary,
+    border: colors.background.primary,
     boxShadow: shadows.z0,
   };
 
@@ -48,26 +48,26 @@ export function createComponents(palette: ThemePalette, shadows: ThemeShadows):
       lg: 6,
     },
     input:
-      palette.mode === 'dark'
+      colors.mode === 'dark'
         ? {
-            background: palette.background.canvas,
+            background: colors.background.canvas,
-            border: palette.border.medium,
+            border: colors.border.medium,
-            borderHover: palette.border.strong,
+            borderHover: colors.border.strong,
-            text: palette.text.primary,
+            text: colors.text.primary,
           }
         : {
-            background: palette.background.primary,
+            background: colors.background.primary,
-            border: palette.border.medium,
+            border: colors.border.medium,
-            borderHover: palette.border.strong,
+            borderHover: colors.border.strong,
-            text: palette.text.primary,
+            text: colors.text.primary,
           },
     panel,
     tooltip: {
-      background: palette.background.secondary,
+      background: colors.background.secondary,
-      text: palette.text.primary,
+      text: colors.text.primary,
     },
     dashboard: {
-      background: palette.background.canvas,
+      background: colors.background.canvas,
       padding: 1,
     },
   };

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

@@ -1,4 +1,4 @@
-import { ThemePalette } from './createPalette';
+import { ThemeColors } from './createColors';
 
 /** @beta */
 export interface ThemeShadows {
@@ -34,8 +34,8 @@ function createLightShadow(...px: number[]) {
 }
 
 /** @alpha */
-export function createShadows(palette: ThemePalette): ThemeShadows {
+export function createShadows(colors: ThemeColors): ThemeShadows {
-  if (palette.mode === 'dark') {
+  if (colors.mode === 'dark') {
     return {
       z0: createDarkShadow(0, 1, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0),
       z1: createDarkShadow(0, 1, 1, -1, 0, 1, 2, 0, 0, 1, 3, 0),

packages/grafana-data/src/themes/createTheme.test.ts

@@ -3,7 +3,7 @@ import { createTheme } from './createTheme';
 describe('createTheme', () => {
   it('create custom theme', () => {
     const custom = createTheme({
-      palette: {
+      colors: {
         mode: 'dark',
         primary: {
           main: 'rgb(240,0,0)',
@@ -14,13 +14,13 @@ describe('createTheme', () => {
       },
     });
 
-    expect(custom.palette.primary.main).toBe('rgb(240,0,0)');
+    expect(custom.colors.primary.main).toBe('rgb(240,0,0)');
-    expect(custom.palette.primary.shade).toBe('rgb(242, 38, 38)');
+    expect(custom.colors.primary.shade).toBe('rgb(242, 38, 38)');
-    expect(custom.palette.background.canvas).toBe('#123');
+    expect(custom.colors.background.canvas).toBe('#123');
   });
 
   it('create default theme', () => {
     const theme = createTheme();
-    expect(theme.palette.mode).toBe('dark');
+    expect(theme.colors.mode).toBe('dark');
   });
 });

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

@@ -1,6 +1,6 @@
 import { createBreakpoints } from './breakpoints';
 import { createComponents } from './createComponents';
-import { createPalette, ThemePaletteInput } from './createPalette';
+import { createColors, ThemeColorsInput } from './createColors';
 import { createShadows } from './createShadows';
 import { createShape, ThemeShapeInput } from './createShape';
 import { createSpacing, ThemeSpacingOptions } from './createSpacing';
@@ -13,7 +13,7 @@ import { zIndex } from './zIndex';
 /** @internal */
 export interface NewThemeOptions {
   name?: string;
-  palette?: ThemePaletteInput;
+  colors?: ThemeColorsInput;
   spacing?: ThemeSpacingOptions;
   shape?: ThemeShapeInput;
   typography?: ThemeTypographyInput;
@@ -23,26 +23,26 @@ export interface NewThemeOptions {
 export function createTheme(options: NewThemeOptions = {}): GrafanaThemeV2 {
   const {
     name = 'Dark',
-    palette: paletteInput = {},
+    colors: colorsInput = {},
     spacing: spacingInput = {},
     shape: shapeInput = {},
     typography: typographyInput = {},
   } = options;
 
-  const palette = createPalette(paletteInput);
+  const colors = createColors(colorsInput);
   const breakpoints = createBreakpoints();
   const spacing = createSpacing(spacingInput);
   const shape = createShape(shapeInput);
-  const typography = createTypography(palette, typographyInput);
+  const typography = createTypography(colors, typographyInput);
-  const shadows = createShadows(palette);
+  const shadows = createShadows(colors);
   const transitions = createTransitions();
-  const components = createComponents(palette, shadows);
+  const components = createComponents(colors, shadows);
 
   const theme = {
     name,
-    isDark: palette.mode === 'dark',
+    isDark: colors.mode === 'dark',
-    isLight: palette.mode === 'light',
+    isLight: colors.mode === 'light',
-    palette,
+    colors,
     breakpoints,
     spacing,
     shape,

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

@@ -2,7 +2,7 @@
 // The MIT License (MIT)
 // Copyright (c) 2014 Call-Em-All
 
-import { ThemePalette } from './createPalette';
+import { ThemeColors } from './createColors';
 
 /** @beta */
 export interface ThemeTypography {
@@ -66,7 +66,7 @@ export interface ThemeTypographyInput {
 const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
 const defaultFontFamilyMonospace = "'Roboto Mono', monospace";
 
-export function createTypography(palette: ThemePalette, typographyInput: ThemeTypographyInput = {}): ThemeTypography {
+export function createTypography(colors: ThemeColors, typographyInput: ThemeTypographyInput = {}): ThemeTypography {
   const {
     fontFamily = defaultFontFamily,
     fontFamilyMonospace = defaultFontFamilyMonospace,

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

@@ -143,34 +143,34 @@ export function createV1Theme(theme: Omit<GrafanaThemeV2, 'v1'>): GrafanaTheme {
   };
 
   const backgrounds = {
-    bg1: theme.palette.background.primary,
+    bg1: theme.colors.background.primary,
-    bg2: theme.palette.background.secondary,
+    bg2: theme.colors.background.secondary,
-    bg3: theme.palette.action.hover,
+    bg3: theme.colors.action.hover,
-    dashboardBg: theme.palette.background.canvas,
+    dashboardBg: theme.colors.background.canvas,
-    bgBlue1: theme.palette.primary.main,
+    bgBlue1: theme.colors.primary.main,
-    bgBlue2: theme.palette.primary.shade,
+    bgBlue2: theme.colors.primary.shade,
   };
 
   const borders = {
-    border1: theme.palette.border.weak,
+    border1: theme.colors.border.weak,
-    border2: theme.palette.border.medium,
+    border2: theme.colors.border.medium,
-    border3: theme.palette.border.strong,
+    border3: theme.colors.border.strong,
   };
 
   const textColors = {
-    textStrong: theme.palette.text.maxContrast,
+    textStrong: theme.colors.text.maxContrast,
-    textHeading: theme.palette.text.primary,
+    textHeading: theme.colors.text.primary,
-    text: theme.palette.text.primary,
+    text: theme.colors.text.primary,
-    textSemiWeak: theme.palette.text.secondary,
+    textSemiWeak: theme.colors.text.secondary,
-    textWeak: theme.palette.text.secondary,
+    textWeak: theme.colors.text.secondary,
-    textFaint: theme.palette.text.disabled,
+    textFaint: theme.colors.text.disabled,
-    textBlue: theme.palette.primary.text,
+    textBlue: theme.colors.primary.text,
   };
 
   const form = {
     // Next-gen forms functional colors
-    formLabel: theme.palette.text.primary,
+    formLabel: theme.colors.text.primary,
-    formDescription: theme.palette.text.secondary,
+    formDescription: theme.colors.text.secondary,
     formInputBg: basicColors.gray05,
     formInputBgDisabled: basicColors.gray10,
     formInputBorder: borders.border2,
@@ -196,7 +196,7 @@ export function createV1Theme(theme: Omit<GrafanaThemeV2, 'v1'>): GrafanaTheme {
 
   return {
     ...oldCommon,
-    type: theme.palette.mode === 'dark' ? GrafanaThemeType.Dark : GrafanaThemeType.Light,
+    type: theme.colors.mode === 'dark' ? GrafanaThemeType.Dark : GrafanaThemeType.Light,
     isDark: theme.isDark,
     isLight: theme.isLight,
     name: theme.name,
@@ -220,20 +220,20 @@ export function createV1Theme(theme: Omit<GrafanaThemeV2, 'v1'>): GrafanaTheme {
       ...form,
       ...textColors,
 
-      bodyBg: theme.palette.background.canvas,
+      bodyBg: theme.colors.background.canvas,
       panelBg: theme.components.panel.background,
       panelBorder: theme.components.panel.border,
-      pageHeaderBg: theme.palette.background.canvas,
+      pageHeaderBg: theme.colors.background.canvas,
-      pageHeaderBorder: theme.palette.background.canvas,
+      pageHeaderBorder: theme.colors.background.canvas,
 
       dropdownBg: form.formInputBg,
       dropdownShadow: basicColors.black,
       dropdownOptionHoverBg: backgrounds.bg2,
 
-      link: theme.palette.text.primary,
+      link: theme.colors.text.primary,
-      linkDisabled: theme.palette.text.disabled,
+      linkDisabled: theme.colors.text.disabled,
-      linkHover: theme.palette.text.maxContrast,
+      linkHover: theme.colors.text.maxContrast,
-      linkExternal: theme.palette.text.link,
+      linkExternal: theme.colors.text.link,
     },
     shadows: {
       listItem: 'none',

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

@@ -1,6 +1,6 @@
 export { createTheme } from './createTheme';
-export { ThemePaletteColor, GrafanaThemeV2 } from './types';
+export { ThemeRichColor, GrafanaThemeV2 } from './types';
-export { ThemePalette } from './createPalette';
+export { ThemeColors } from './createColors';
 export { ThemeBreakpoints } from './breakpoints';
 export { ThemeShadows } from './createShadows';
 export { ThemeShape } from './createShape';

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

@@ -1,16 +1,7 @@
-export const colors = {
+export const palette = {
   white: '#fff',
   black: '#000',
 
-  // old
-  gray98: '#f7f8fa',
-  gray97: '#f1f5f9',
-  gray95: '#e9edf2',
-  //gray90: '#dce1e6',
-  gray85: '#c7d0d9',
-  gray70: '#9fa7b3',
-  gray60: '#7b8087',
-  gray33: '#464c54',
   gray25: '#2c3235',
   gray15: '#22252b', //'#202226',
   gray10: '#181b1f', // old '#141619',

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

@@ -1,7 +1,7 @@
 import { GrafanaTheme } from '../types/theme';
 import { ThemeBreakpoints } from './breakpoints';
 import { ThemeComponents } from './createComponents';
-import { ThemePalette } from './createPalette';
+import { ThemeColors } from './createColors';
 import { ThemeShadows } from './createShadows';
 import { ThemeShape } from './createShape';
 import { ThemeSpacing } from './createSpacing';
@@ -14,7 +14,7 @@ export interface GrafanaThemeV2 {
   name: string;
   isDark: boolean;
   isLight: boolean;
-  palette: ThemePalette;
+  colors: ThemeColors;
   breakpoints: ThemeBreakpoints;
   spacing: ThemeSpacing;
   shape: ThemeShape;
@@ -27,7 +27,7 @@ export interface GrafanaThemeV2 {
 }
 
 /** @alpha */
-export interface ThemePaletteColor {
+export interface ThemeRichColor {
   /** color intent (primary, secondary, info, error, etc) */
   name: string;
   /** Main color */

packages/grafana-ui/.storybook/storybookTheme.ts

@@ -7,13 +7,13 @@ const createStorybookTheme = (theme: GrafanaThemeV2) => {
   return create({
     base: theme.name.includes('Light') ? 'light' : 'dark',
 
-    colorPrimary: theme.palette.primary.main,
+    colorPrimary: theme.colors.primary.main,
-    colorSecondary: theme.palette.error.main,
+    colorSecondary: theme.colors.error.main,
 
     // UI
-    appBg: theme.palette.background.canvas,
+    appBg: theme.colors.background.canvas,
-    appContentBg: theme.palette.background.primary,
+    appContentBg: theme.colors.background.primary,
-    appBorderColor: theme.palette.border.medium,
+    appBorderColor: theme.colors.border.medium,
     appBorderRadius: theme.shape.borderRadius(1),
 
     // Typography
@@ -21,13 +21,13 @@ const createStorybookTheme = (theme: GrafanaThemeV2) => {
     fontCode: theme.typography.fontFamilyMonospace,
 
     // Text colors
-    textColor: theme.palette.primary.text,
+    textColor: theme.colors.primary.text,
-    textInverseColor: theme.palette.primary.contrastText,
+    textInverseColor: theme.colors.primary.contrastText,
 
     // Toolbar default and active colors
-    barTextColor: theme.palette.text.primary,
+    barTextColor: theme.colors.text.primary,
-    barSelectedColor: theme.palette.emphasize(theme.palette.primary.text),
+    barSelectedColor: theme.colors.emphasize(theme.colors.primary.text),
-    barBg: theme.palette.background.primary,
+    barBg: theme.colors.background.primary,
 
     // Form colors
     inputBg: theme.components.input.background,
@@ -41,7 +41,7 @@ const createStorybookTheme = (theme: GrafanaThemeV2) => {
   });
 };
 
-const GrafanaLight = createStorybookTheme(createTheme({ palette: { mode: 'light' } }));
+const GrafanaLight = createStorybookTheme(createTheme({ colors: { mode: 'light' } }));
-const GrafanaDark = createStorybookTheme(createTheme({ palette: { mode: 'dark' } }));
+const GrafanaDark = createStorybookTheme(createTheme({ colors: { mode: 'dark' } }));
 
 export { GrafanaLight, GrafanaDark };

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

@@ -69,7 +69,7 @@ export const Alert: FC<Props> = React.forwardRef<HTMLDivElement, Props>(
 Alert.displayName = 'Alert';
 
 const getStyles = (theme: GrafanaThemeV2, severity: AlertVariant, elevated?: boolean) => {
-  const color = theme.palette[severity];
+  const color = theme.colors[severity];
 
   return {
     alert: css`
@@ -79,7 +79,7 @@ const getStyles = (theme: GrafanaThemeV2, severity: AlertVariant, elevated?: boo
       display: flex;
       flex-direction: row;
       align-items: stretch;
-      background: ${theme.palette.background.secondary};
+      background: ${theme.colors.background.secondary};
       box-shadow: ${elevated ? theme.shadows.z4 : theme.shadows.z1};
 
       &:before {
@@ -89,7 +89,7 @@ const getStyles = (theme: GrafanaThemeV2, severity: AlertVariant, elevated?: boo
         left: 0;
         bottom: 0;
         right: 0;
-        background: ${theme.palette.background.primary};
+        background: ${theme.colors.background.primary};
         z-index: -1;
       }
     `,
@@ -103,10 +103,10 @@ const getStyles = (theme: GrafanaThemeV2, severity: AlertVariant, elevated?: boo
     `,
     title: css`
       font-weight: ${theme.typography.fontWeightMedium};
-      color: ${theme.palette.text.primary};
+      color: ${theme.colors.text.primary};
     `,
     body: css`
-      color: ${theme.palette.text.secondary};
+      color: ${theme.colors.text.secondary};
       padding: ${theme.spacing(2)};
       flex-grow: 1;
       display: flex;

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

@@ -17,8 +17,8 @@ export const AlphaNotice: FC<Props> = ({ state, text, className }) => {
   const styles = cx(
     className,
     css`
-      background: ${theme.palette.primary.transparent};
+      background: ${theme.colors.primary.transparent};
-      color: ${theme.palette.text.secondary};
+      color: ${theme.colors.text.secondary};
       white-space: nowrap;
       border-radius: 3px;
       text-shadow: none;

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

@@ -3,7 +3,7 @@ import { css, CSSObject, cx } from '@emotion/css';
 import { useTheme2 } from '../../themes';
 import { IconName } from '../../types/icon';
 import { getPropertiesForButtonSize } from '../Forms/commonStyles';
-import { colorManipulator, GrafanaThemeV2, ThemePaletteColor } from '@grafana/data';
+import { colorManipulator, GrafanaThemeV2, ThemeRichColor } from '@grafana/data';
 import { ComponentSize } from '../../types/size';
 import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
 import { Icon } from '../Icon/Icon';
@@ -101,14 +101,14 @@ export const getButtonStyles = (props: StyleProps) => {
   const disabledStyles: CSSObject = {
     cursor: 'not-allowed',
     boxShadow: 'none',
-    background: theme.palette.action.disabledBackground,
+    background: theme.colors.action.disabledBackground,
     border: `1px solid transparent`,
-    color: theme.palette.text.disabled,
+    color: theme.colors.text.disabled,
     pointerEvents: 'none',
 
     '&:hover': {
-      background: theme.palette.action.disabledBackground,
+      background: theme.colors.action.disabledBackground,
-      color: theme.palette.text.disabled,
+      color: theme.colors.text.disabled,
       boxShadow: 'none',
     },
   };
@@ -160,7 +160,7 @@ export const getButtonStyles = (props: StyleProps) => {
   };
 };
 
-function getButtonVariantStyles(theme: GrafanaThemeV2, color: ThemePaletteColor): CSSObject {
+function getButtonVariantStyles(theme: GrafanaThemeV2, color: ThemeRichColor): CSSObject {
   return {
     background: color.main,
     color: color.contrastText,
@@ -180,15 +180,15 @@ function getButtonVariantStyles(theme: GrafanaThemeV2, color: ThemePaletteColor)
 export function getPropertiesForVariant(theme: GrafanaThemeV2, variant: ButtonVariant) {
   switch (variant) {
     case 'secondary':
-      return getButtonVariantStyles(theme, theme.palette.secondary);
+      return getButtonVariantStyles(theme, theme.colors.secondary);
 
     case 'destructive':
-      return getButtonVariantStyles(theme, theme.palette.error);
+      return getButtonVariantStyles(theme, theme.colors.error);
 
     case 'link':
       return {
         background: 'transparent',
-        color: theme.palette.text.link,
+        color: theme.colors.text.link,
         border: '1px solid transparent',
         '&:focus': {
           outline: 'none',
@@ -196,13 +196,13 @@ export function getPropertiesForVariant(theme: GrafanaThemeV2, variant: ButtonVa
         },
 
         '&:hover': {
-          background: colorManipulator.alpha(theme.palette.text.link, theme.palette.action.hoverOpacity),
+          background: colorManipulator.alpha(theme.colors.text.link, theme.colors.action.hoverOpacity),
           textDecoration: 'underline',
         },
       };
 
     case 'primary':
     default:
-      return getButtonVariantStyles(theme, theme.palette.primary);
+      return getButtonVariantStyles(theme, theme.colors.primary);
   }
 }

packages/grafana-ui/src/components/Button/ToolbarButton.tsx

@@ -118,7 +118,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
       border-radius: ${theme.shape.borderRadius()};
       line-height: ${theme.components.height.md * theme.spacing.gridSize - 2}px;
       font-weight: ${theme.typography.fontWeightMedium};
-      border: 1px solid ${theme.palette.border.medium};
+      border: 1px solid ${theme.colors.border.medium};
       white-space: nowrap;
       transition: ${theme.transitions.create(['background', 'box-shadow', 'border-color', 'color'], {
         duration: theme.transitions.duration.short,
@@ -141,24 +141,24 @@ const getStyles = (theme: GrafanaThemeV2) => {
       &[disabled],
       &:disabled {
         cursor: not-allowed;
-        opacity: ${theme.palette.action.disabledOpacity};
+        opacity: ${theme.colors.action.disabledOpacity};
-        background: ${theme.palette.action.disabledBackground};
+        background: ${theme.colors.action.disabledBackground};
         box-shadow: none;
 
         &:hover {
-          color: ${theme.palette.text.disabled};
+          color: ${theme.colors.text.disabled};
-          background: ${theme.palette.action.disabledBackground};
+          background: ${theme.colors.action.disabledBackground};
           box-shadow: none;
         }
       }
     `,
     default: css`
-      color: ${theme.palette.text.secondary};
+      color: ${theme.colors.text.secondary};
-      background-color: ${theme.palette.background.primary};
+      background-color: ${theme.colors.background.primary};
 
       &:hover {
-        color: ${theme.palette.text.primary};
+        color: ${theme.colors.text.primary};
-        background: ${theme.palette.background.secondary};
+        background: ${theme.colors.background.secondary};
       }
     `,
     active: css`
@@ -167,8 +167,8 @@ const getStyles = (theme: GrafanaThemeV2) => {
       background-color: transparent;
 
       &:hover {
-        color: ${theme.palette.text.primary};
+        color: ${theme.colors.text.primary};
-        background: ${theme.palette.emphasize(theme.palette.background.canvas, 0.03)};
+        background: ${theme.colors.emphasize(theme.colors.background.canvas, 0.03)};
       }
     `,
     primary: css(primaryVariant),

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

@@ -140,7 +140,7 @@ const getContainerStyles = stylesFactory((theme: GrafanaThemeV2, disabled = fals
   return css({
     display: 'flex',
     width: '100%',
-    background: theme.palette.background.secondary,
+    background: theme.colors.background.secondary,
     borderRadius: theme.shape.borderRadius(),
     position: 'relative',
     pointerEvents: disabled ? 'none' : 'auto',
@@ -151,7 +151,7 @@ const getContainerStyles = stylesFactory((theme: GrafanaThemeV2, disabled = fals
 
     ...(!disableHover && {
       '&:hover': {
-        background: theme.palette.emphasize(theme.palette.background.secondary, 0.03),
+        background: theme.colors.emphasize(theme.colors.background.secondary, 0.03),
         cursor: 'pointer',
         zIndex: 1,
       },
@@ -180,7 +180,7 @@ export const getCardStyles = stylesFactory((theme: GrafanaThemeV2) => {
       margin-bottom: 0;
       font-size: ${theme.typography.size.md};
       line-height: ${theme.typography.body.lineHeight};
-      color: ${theme.palette.text.primary};
+      color: ${theme.colors.text.primary};
       font-weight: ${theme.typography.fontWeightMedium};
     `,
     info: css`
@@ -195,14 +195,14 @@ export const getCardStyles = stylesFactory((theme: GrafanaThemeV2) => {
       align-items: center;
       width: 100%;
       font-size: ${theme.typography.size.sm};
-      color: ${theme.palette.text.secondary};
+      color: ${theme.colors.text.secondary};
       margin: ${theme.spacing(0.5, 0, 0)};
       line-height: ${theme.typography.bodySmall.lineHeight};
     `,
     description: css`
       width: 100%;
       margin: ${theme.spacing(1, 0, 0)};
-      color: ${theme.palette.text.secondary};
+      color: ${theme.colors.text.secondary};
       line-height: ${theme.typography.body.lineHeight};
     `,
     media: css`
@@ -234,7 +234,7 @@ export const getCardStyles = stylesFactory((theme: GrafanaThemeV2) => {
     secondaryActions: css`
       display: flex;
       align-items: center;
-      color: ${theme.palette.text.secondary};
+      color: ${theme.colors.text.secondary};
       // align to the right
       margin-left: auto;
       & > * {

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

@@ -101,7 +101,7 @@ const getStyles = (theme: GrafanaThemeV2) => ({
   `,
   modalText: css({
     fontSize: theme.typography.h4.fontSize,
-    color: theme.palette.text.primary,
+    color: theme.colors.text.primary,
     marginBottom: `calc(${theme.spacing(2)}*2)`,
     paddingTop: theme.spacing(2),
   }),

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

@@ -155,12 +155,12 @@ const getStyles = (theme: GrafanaThemeV2) => {
         left: ${theme.spacing(0.25)};
       }
       .thumb-vertical {
-        background: ${theme.palette.action.focus};
+        background: ${theme.colors.action.focus};
         border-radius: ${theme.shape.borderRadius(2)};
         opacity: 0;
       }
       .thumb-horizontal {
-        background: ${theme.palette.action.focus};
+        background: ${theme.colors.action.focus};
         border-radius: ${theme.shape.borderRadius(2)};
         opacity: 0;
       }

packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx

@@ -48,10 +48,10 @@ const getStyles = (theme: GrafanaThemeV2) => ({
   input: getInputStyles({ theme, invalid: false }).input,
   editor: css`
     .token.builtInVariable {
-      color: ${theme.palette.success.text};
+      color: ${theme.colors.success.text};
     }
     .token.variable {
-      color: ${theme.palette.primary.text};
+      color: ${theme.colors.primary.text};
     }
   `,
   // Wrapper with child selector needed.

packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx

@@ -55,8 +55,8 @@ RadioButton.displayName = 'RadioButton';
 const getRadioButtonStyles = stylesFactory((theme: GrafanaThemeV2, size: RadioButtonSize, fullWidth?: boolean) => {
   const { fontSize, height, padding } = getPropertiesForButtonSize(size, theme);
 
-  const textColor = theme.palette.text.secondary;
+  const textColor = theme.colors.text.secondary;
-  const textColorHover = theme.palette.text.primary;
+  const textColorHover = theme.colors.text.primary;
   const bg = theme.components.input.background;
   // remove the group inner padding (set on RadioButtonGroup)
   const labelHeight = height * theme.spacing.gridSize - 4 - 2;
@@ -68,9 +68,9 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaThemeV2, size: RadioBu
       z-index: -1000;
 
       &:checked + label {
-        color: ${theme.palette.text.primary};
+        color: ${theme.colors.text.primary};
         font-weight: ${theme.typography.fontWeightMedium};
-        background: ${theme.palette.action.selected};
+        background: ${theme.colors.action.selected};
         z-index: 3;
       }
 
@@ -85,7 +85,7 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaThemeV2, size: RadioBu
 
       &:disabled + label {
         cursor: default;
-        color: ${theme.palette.text.disabled};
+        color: ${theme.colors.text.disabled};
         cursor: not-allowed;
       }
     `,

packages/grafana-ui/src/components/Forms/commonStyles.ts

@@ -10,8 +10,8 @@ export const getFocusStyle = (theme: GrafanaTheme) => css`
 `;
 
 export const sharedInputStyle = (theme: GrafanaThemeV2, invalid = false) => {
-  const borderColor = invalid ? theme.palette.error.border : theme.components.input.border;
+  const borderColor = invalid ? theme.colors.error.border : theme.components.input.border;
-  const borderColorHover = invalid ? theme.palette.error.shade : theme.components.input.borderHover;
+  const borderColorHover = invalid ? theme.colors.error.shade : theme.components.input.borderHover;
   const background = theme.components.input.background;
   const textColor = theme.components.input.text;
 
@@ -32,7 +32,7 @@ export const sharedInputStyle = (theme: GrafanaThemeV2, invalid = false) => {
 
     &:-webkit-autofill:focus {
       /* Welcome to 2005. This is a HACK to get rid od Chromes default autofill styling */
-      box-shadow: 0 0 0 2px ${theme.palette.background.primary}, 0 0 0px 4px ${theme.palette.primary.main},
+      box-shadow: 0 0 0 2px ${theme.colors.background.primary}, 0 0 0px 4px ${theme.colors.primary.main},
         inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px ${background}!important;
       -webkit-text-fill-color: ${textColor} !important;
     }
@@ -46,9 +46,9 @@ export const sharedInputStyle = (theme: GrafanaThemeV2, invalid = false) => {
     }
 
     &:disabled {
-      background-color: ${theme.palette.action.disabledBackground};
+      background-color: ${theme.colors.action.disabledBackground};
-      color: ${theme.palette.action.disabledText};
+      color: ${theme.colors.action.disabledText};
-      border: 1px solid ${theme.palette.action.disabledBackground};
+      border: 1px solid ${theme.colors.action.disabledBackground};
 
       &:hover {
         border-color: ${borderColor};
@@ -56,7 +56,7 @@ export const sharedInputStyle = (theme: GrafanaThemeV2, invalid = false) => {
     }
 
     &::placeholder {
-      color: ${theme.palette.text.disabled};
+      color: ${theme.colors.text.disabled};
       opacity: 1;
     }
   `;

packages/grafana-ui/src/components/IconButton/IconButton.story.tsx

@@ -40,7 +40,7 @@ const RenderScenario = ({ background }: ScenarioProps) => {
     <div
       className={css`
         padding: 30px;
-        background: ${theme.palette.background[background]};
+        background: ${theme.colors.background[background]};
         button {
           margin-right: 8px;
           margin-left: 8px;

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

@@ -52,7 +52,7 @@ export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
 IconButton.displayName = 'IconButton';
 
 const getStyles = stylesFactory((theme: GrafanaThemeV2, size: IconSize) => {
-  const hoverColor = theme.palette.action.hover;
+  const hoverColor = theme.colors.action.hover;
   const pixelSize = getSvgSize(size);
   const hoverSize = pixelSize / 2;
 
@@ -110,7 +110,7 @@ const getStyles = stylesFactory((theme: GrafanaThemeV2, size: IconSize) => {
       }
 
       &:hover {
-        color: ${theme.palette.text.primary};
+        color: ${theme.colors.text.primary};
 
         &:before {
           background-color: ${hoverColor};

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

@@ -57,7 +57,7 @@ export const InfoBox = React.memo(
 InfoBox.displayName = 'InfoBox';
 
 const getInfoBoxStyles = stylesFactory((theme: GrafanaThemeV2, severity: AlertVariant) => {
-  const color = theme.palette[severity];
+  const color = theme.colors[severity];
 
   return {
     wrapper: css`

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

@@ -44,7 +44,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false, width }:
     height: 100%;
     /* Min width specified for prefix/suffix classes used outside React component*/
     min-width: ${prefixSuffixStaticWidth};
-    color: ${theme.palette.text.secondary};
+    color: ${theme.colors.text.secondary};
   `;
 
   return {
@@ -60,7 +60,7 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false, width }:
           > .prefix,
           .suffix,
           .input {
-            border-color: ${invalid ? theme.palette.error.border : theme.palette.primary.border};
+            border-color: ${invalid ? theme.colors.error.border : theme.colors.primary.border};
           }
 
           // only show number buttons on hover
@@ -143,8 +143,8 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false, width }:
       `
     ),
     inputDisabled: css`
-      background-color: ${theme.palette.action.disabledBackground};
+      background-color: ${theme.colors.action.disabledBackground};
-      color: ${theme.palette.action.disabledText};
+      color: ${theme.colors.action.disabledText};
     `,
     addon: css`
       label: input-addon;

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

@@ -31,10 +31,10 @@ const getStyles = (theme: GrafanaThemeV2) => {
   return {
     header: css`
       padding: ${theme.spacing(0.5, 0.5, 1, 0.5)};
-      border-bottom: 1px solid ${theme.palette.border.medium};
+      border-bottom: 1px solid ${theme.colors.border.medium};
     `,
     wrapper: css`
-      background: ${theme.palette.background.secondary};
+      background: ${theme.colors.background.secondary};
       box-shadow: ${theme.shadows.z2};
       display: inline-block;
       border-radius: ${theme.shape.borderRadius()};

packages/grafana-ui/src/components/Menu/MenuGroup.tsx

@@ -40,7 +40,7 @@ MenuGroup.displayName = 'MenuGroup';
 const getStyles = (theme: GrafanaThemeV2) => {
   return {
     groupLabel: css`
-      color: ${theme.palette.text.secondary};
+      color: ${theme.colors.text.secondary};
       font-size: ${theme.typography.size.sm};
       padding: ${theme.spacing(0.5, 1)};
     `,

packages/grafana-ui/src/components/Menu/MenuItem.tsx

@@ -58,13 +58,13 @@ MenuItem.displayName = 'MenuItem';
 const getStyles = (theme: GrafanaThemeV2) => {
   return {
     link: css`
-      color: ${theme.palette.text.primary};
+      color: ${theme.colors.text.primary};
       display: flex;
       cursor: pointer;
       padding: 5px 12px 5px 10px;
 
       &:hover {
-        color: ${theme.palette.text.primary};
+        color: ${theme.colors.text.primary};
         text-decoration: none;
       }
     `,
@@ -74,16 +74,16 @@ const getStyles = (theme: GrafanaThemeV2) => {
       white-space: nowrap;
 
       &:hover {
-        background: ${theme.palette.action.hover};
+        background: ${theme.colors.action.hover};
       }
     `,
     activeItem: css`
-      background: ${theme.palette.action.selected};
+      background: ${theme.colors.action.selected};
     `,
     icon: css`
       opacity: 0.7;
       margin-right: 10px;
-      color: ${theme.palette.text.secondary};
+      color: ${theme.colors.text.secondary};
     `,
   };
 };

packages/grafana-ui/src/components/Modal/getModalStyles.ts

@@ -11,7 +11,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => {
     modal: css`
       position: fixed;
       z-index: ${theme.zIndex.modal};
-      background: ${theme.palette.background.primary};
+      background: ${theme.colors.background.primary};
       box-shadow: ${theme.shadows.z4};
       border-radius: ${borderRadius};
       background-clip: padding-box;
@@ -35,8 +35,8 @@ export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => {
     `,
     modalHeader: css`
       label: modalHeader;
-      background: ${theme.palette.background.secondary};
+      background: ${theme.colors.background.secondary};
-      border-bottom: 1px solid ${theme.palette.border.weak};
+      border-bottom: 1px solid ${theme.colors.border.weak};
       border-radius: ${borderRadius} ${borderRadius} 0 0;
       display: flex;
       height: 42px;

packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx

@@ -132,7 +132,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
   return {
     toolbar: css`
       display: flex;
-      background: ${theme.palette.background.canvas};
+      background: ${theme.colors.background.canvas};
       justify-content: flex-end;
       flex-wrap: wrap;
       padding: ${theme.spacing(0, 1, 1, 2)};

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -245,7 +245,7 @@ export function SelectBase<T>({
                   css(props.getStyles('placeholder', props)),
                   css`
                     display: inline-block;
-                    color: ${theme.palette.text.disabled};
+                    color: ${theme.colors.text.disabled};
                     position: absolute;
                     top: 50%;
                     transform: translateY(-50%);

packages/grafana-ui/src/components/Select/getSelectStyles.ts

@@ -6,7 +6,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaThemeV2) => {
   return {
     menu: css`
       label: grafana-select-menu;
-      background: ${theme.palette.background.secondary};
+      background: ${theme.colors.background.secondary};
       box-shadow: ${theme.shadows.z3};
       position: relative;
       min-width: 100%;
@@ -24,7 +24,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaThemeV2) => {
       border-left: 2px solid transparent;
 
       &:hover {
-        background: ${theme.palette.action.hover};
+        background: ${theme.colors.action.hover};
       }
     `,
     optionImage: css`
@@ -36,7 +36,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaThemeV2) => {
       label: grafana-select-option-description;
       font-weight: normal;
       font-size: ${theme.typography.size.sm};
-      color: ${theme.palette.text.secondary};
+      color: ${theme.colors.text.secondary};
       white-space: normal;
       line-height: ${theme.typography.body.lineHeight};
     `,
@@ -49,10 +49,10 @@ export const getSelectStyles = stylesFactory((theme: GrafanaThemeV2) => {
     `,
     optionFocused: css`
       label: grafana-select-option-focused;
-      background: ${theme.palette.action.focus};
+      background: ${theme.colors.action.focus};
     `,
     optionSelected: css`
-      background: ${theme.palette.action.selected};
+      background: ${theme.colors.action.selected};
     `,
     singleValue: css`
       label: grafana-select-single-value;
@@ -88,11 +88,11 @@ export const getSelectStyles = stylesFactory((theme: GrafanaThemeV2) => {
       display: flex;
       align-items: center;
       line-height: 1;
-      background: ${theme.palette.background.secondary};
+      background: ${theme.colors.background.secondary};
       border-radius: ${theme.shape.borderRadius()};
       margin: ${theme.spacing(0, 1, 0, 0)};
       padding: ${theme.spacing(0.25, 0, 0.25, 1)};
-      color: ${theme.palette.text.primary};
+      color: ${theme.colors.text.primary};
       font-size: ${theme.typography.size.sm};
     `,
     multiValueRemove: css`

packages/grafana-ui/src/components/Slider/styles.ts

@@ -5,10 +5,10 @@ import { css } from '@emotion/css';
 
 export const getStyles = stylesFactory((theme: GrafanaThemeV2, isHorizontal: boolean) => {
   const { spacing } = theme;
-  const railColor = theme.palette.border.strong;
+  const railColor = theme.colors.border.strong;
-  const trackColor = theme.palette.primary.main;
+  const trackColor = theme.colors.primary.main;
-  const handleColor = theme.palette.primary.main;
+  const handleColor = theme.colors.primary.main;
-  const blueOpacity = theme.palette.primary.transparent;
+  const blueOpacity = theme.colors.primary.transparent;
   const hoverSyle = `box-shadow: 0px 0px 0px 6px ${blueOpacity}`;
 
   return {
@@ -59,7 +59,7 @@ export const getStyles = stylesFactory((theme: GrafanaThemeV2, isHorizontal: boo
         }
 
         .rc-slider-tooltip-inner {
-          color: ${theme.palette.text.primary};
+          color: ${theme.colors.text.primary};
           background-color: transparent !important;
           border-radius: 0;
           box-shadow: none;

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

@@ -69,21 +69,21 @@ const getSwitchStyles = stylesFactory((theme: GrafanaThemeV2, transparent?: bool
         position: absolute;
 
         &:disabled + label {
-          background: ${theme.palette.action.disabledBackground};
+          background: ${theme.colors.action.disabledBackground};
           cursor: not-allowed;
         }
 
         &:checked + label {
-          background: ${theme.palette.primary.main};
+          background: ${theme.colors.primary.main};
-          border-color: ${theme.palette.primary.main};
+          border-color: ${theme.colors.primary.main};
 
           &:hover {
-            background: ${theme.palette.primary.shade};
+            background: ${theme.colors.primary.shade};
           }
 
           &::after {
             transform: translate3d(18px, -50%, 0);
-            background: ${theme.palette.primary.contrastText};
+            background: ${theme.colors.primary.contrastText};
           }
         }
 
@@ -118,7 +118,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaThemeV2, transparent?: bool
           width: 12px;
           height: 12px;
           border-radius: 6px;
-          background: ${theme.palette.text.secondary};
+          background: ${theme.colors.text.secondary};
           box-shadow: ${theme.shadows.z1};
           top: 50%;
           transform: translate3d(2px, -50%, 0);

packages/grafana-ui/src/components/Table/FilterList.tsx

@@ -91,7 +91,7 @@ const getStyles = stylesFactory((theme: GrafanaThemeV2) => ({
     padding: ${theme.spacing(0.5)};
 
     :hover {
-      background-color: ${theme.palette.action.hover};
+      background-color: ${theme.colors.action.hover};
     }
   `,
   filterListInput: css`

packages/grafana-ui/src/components/Tabs/Counter.tsx

@@ -9,9 +9,9 @@ const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
       label: counter;
       margin-left: ${theme.spacing(1)};
       border-radius: ${theme.spacing(3)};
-      background-color: ${theme.palette.action.hover};
+      background-color: ${theme.colors.action.hover};
       padding: ${theme.spacing(0.25, 1)};
-      color: ${theme.palette.text.secondary};
+      color: ${theme.colors.text.secondary};
       font-weight: ${theme.typography.fontWeightMedium};
       font-size: ${theme.typography.size.sm};
     `,

packages/grafana-ui/src/components/Tabs/Tab.tsx

@@ -60,7 +60,7 @@ const getTabStyles = stylesFactory((theme: GrafanaThemeV2) => {
       display: flex;
     `,
     link: css`
-      color: ${theme.palette.text.secondary};
+      color: ${theme.colors.text.secondary};
       padding: ${theme.spacing(1.5, 2, 1)};
 
       svg {
@@ -70,14 +70,14 @@ const getTabStyles = stylesFactory((theme: GrafanaThemeV2) => {
       a {
         display: block;
         height: 100%;
-        color: ${theme.palette.text.secondary};
+        color: ${theme.colors.text.secondary};
       }
     `,
     notActive: css`
       a:hover,
       &:hover,
       &:focus {
-        color: ${theme.palette.text.primary};
+        color: ${theme.colors.text.primary};
 
         &::before {
           display: block;
@@ -88,18 +88,18 @@ const getTabStyles = stylesFactory((theme: GrafanaThemeV2) => {
           height: 4px;
           border-radius: 2px;
           bottom: 0px;
-          background: ${theme.palette.action.hover};
+          background: ${theme.colors.action.hover};
         }
       }
     `,
     activeStyle: css`
       label: activeTabStyle;
-      color: ${theme.palette.text.primary};
+      color: ${theme.colors.text.primary};
       overflow: hidden;
       font-weight: ${theme.typography.fontWeightMedium};
 
       a {
-        color: ${theme.palette.text.primary};
+        color: ${theme.colors.text.primary};
       }
 
       &::before {
@@ -111,7 +111,7 @@ const getTabStyles = stylesFactory((theme: GrafanaThemeV2) => {
         height: 4px;
         border-radius: 2px;
         bottom: 0px;
-        background-image: ${theme.palette.gradients.brandHorizontal} !important;
+        background-image: ${theme.colors.gradients.brandHorizontal} !important;
       }
     `,
   };

packages/grafana-ui/src/components/Tabs/TabContent.tsx

@@ -11,7 +11,7 @@ const getTabContentStyle = stylesFactory((theme: GrafanaThemeV2) => {
   return {
     tabContent: css`
       padding: ${theme.spacing(1)};
-      background: ${theme.palette.background.primary};
+      background: ${theme.colors.background.primary};
     `,
   };
 });

packages/grafana-ui/src/components/Tabs/TabsBar.tsx

@@ -16,7 +16,7 @@ const getTabsBarStyles = stylesFactory((theme: GrafanaThemeV2, hideBorder = fals
     tabsWrapper:
       !hideBorder &&
       css`
-        border-bottom: 1px solid ${theme.palette.border.weak};
+        border-bottom: 1px solid ${theme.colors.border.weak};
       `,
     tabs: css`
       position: relative;

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

@@ -25,7 +25,7 @@ const getTextAreaStyle = stylesFactory((theme: GrafanaThemeV2, invalid = false)
         border-radius: ${theme.shape.borderRadius()};
         padding: ${theme.spacing.gridSize / 4}px ${theme.spacing.gridSize}px;
         width: 100%;
-        border-color: ${invalid ? theme.palette.error.border : theme.components.input.border};
+        border-color: ${invalid ? theme.colors.error.border : theme.components.input.border};
       `
     ),
   };

packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx

@@ -179,7 +179,7 @@ function getStylesObjectMain(theme: GrafanaThemeV2): any {
     padding: theme.spacing(1),
     shadow: theme.shadows.z1,
     ':hover': {
-      background: theme.palette.background.primary,
+      background: theme.colors.background.primary,
     },
   };
 }

packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx

@@ -3,7 +3,7 @@ import { css, cx } from '@emotion/css';
 import { useTheme2 } from '../../themes/ThemeContext';
 import { Icon } from '../Icon/Icon';
 import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
-import { GrafanaThemeV2, ThemePaletteColor } from '@grafana/data';
+import { GrafanaThemeV2, ThemeRichColor } from '@grafana/data';
 import { CollapsableSection } from '../Collapse/CollapsableSection';
 import { Field } from '../Forms/Field';
 import { Input } from '../Input/Input';
@@ -56,12 +56,12 @@ export const ThemeDemo = () => {
   const t = useTheme2();
 
   const richColors = [
-    t.palette.primary,
+    t.colors.primary,
-    t.palette.secondary,
+    t.colors.secondary,
-    t.palette.success,
+    t.colors.success,
-    t.palette.error,
+    t.colors.error,
-    t.palette.warning,
+    t.colors.warning,
-    t.palette.info,
+    t.colors.info,
   ];
 
   const selectOptions = [
@@ -80,16 +80,16 @@ export const ThemeDemo = () => {
     <div
       className={css`
         width: 100%;
-        color: ${t.palette.text.primary};
+        color: ${t.colors.text.primary};
       `}
     >
-      <DemoBox bg={t.palette.background.canvas}>
+      <DemoBox bg={t.colors.background.canvas}>
         <CollapsableSection label="Layers" isOpen={true}>
-          <DemoText>t.palette.background.canvas</DemoText>
+          <DemoText>t.colors.background.canvas</DemoText>
-          <DemoBox bg={t.palette.background.primary} border={t.palette.border.weak}>
+          <DemoBox bg={t.colors.background.primary} border={t.colors.border.weak}>
-            <DemoText>t.palette.background.primary is the main & preferred content </DemoText>
+            <DemoText>t.colors.background.primary is the main & preferred content </DemoText>
-            <DemoBox bg={t.palette.background.secondary} border={t.palette.border.weak}>
+            <DemoBox bg={t.colors.background.secondary} border={t.colors.border.weak}>
-              <DemoText>t.palette.background.secondary and t.palette.border.layer1</DemoText>
+              <DemoText>t.colors.background.secondary and t.colors.border.layer1</DemoText>
             </DemoBox>
           </DemoBox>
         </CollapsableSection>
@@ -98,16 +98,16 @@ export const ThemeDemo = () => {
             <DemoBox>
               <TextColors t={t} />
             </DemoBox>
-            <DemoBox bg={t.palette.background.primary}>
+            <DemoBox bg={t.colors.background.primary}>
               <TextColors t={t} />
             </DemoBox>
-            <DemoBox bg={t.palette.background.secondary}>
+            <DemoBox bg={t.colors.background.secondary}>
               <TextColors t={t} />
             </DemoBox>
           </HorizontalGroup>
         </CollapsableSection>
         <CollapsableSection label="Rich colors" isOpen={true}>
-          <DemoBox bg={t.palette.background.primary}>
+          <DemoBox bg={t.colors.background.primary}>
             <table className={colorsTableStyle}>
               <thead>
                 <tr>
@@ -126,7 +126,7 @@ export const ThemeDemo = () => {
           </DemoBox>
         </CollapsableSection>
         <CollapsableSection label="Forms" isOpen={true}>
-          <DemoBox bg={t.palette.background.primary}>
+          <DemoBox bg={t.colors.background.primary}>
             <Field label="Input label" description="Field description">
               <Input placeholder="Placeholder" />
             </Field>
@@ -164,7 +164,7 @@ export const ThemeDemo = () => {
           </DemoBox>
         </CollapsableSection>
         <CollapsableSection label="Shadows" isOpen={true}>
-          <DemoBox bg={t.palette.background.primary}>
+          <DemoBox bg={t.colors.background.primary}>
             <HorizontalGroup>
               {Object.keys(t.shadows).map((key) => (
                 <ShadowDemo name={key} shadow={(t.shadows as any)[key]} key={key} />
@@ -173,7 +173,7 @@ export const ThemeDemo = () => {
           </DemoBox>
         </CollapsableSection>
         <CollapsableSection label="Buttons" isOpen={true}>
-          <DemoBox bg={t.palette.background.primary}>
+          <DemoBox bg={t.colors.background.primary}>
             <VerticalGroup spacing="lg">
               <HorizontalGroup>
                 {allButtonVariants.map((variant) => (
@@ -212,7 +212,7 @@ export const ThemeDemo = () => {
 
 interface RichColorDemoProps {
   theme: GrafanaThemeV2;
-  color: ThemePaletteColor;
+  color: ThemeRichColor;
 }
 
 export function RichColorDemo({ theme, color }: RichColorDemoProps) {
@@ -272,16 +272,16 @@ const colorsTableStyle = css`
 export function TextColors({ t }: { t: GrafanaThemeV2 }) {
   return (
     <>
-      <DemoText color={t.palette.text.primary}>
+      <DemoText color={t.colors.text.primary}>
         text.primary <Icon name="trash-alt" />
       </DemoText>
-      <DemoText color={t.palette.text.secondary}>
+      <DemoText color={t.colors.text.secondary}>
         text.secondary <Icon name="trash-alt" />
       </DemoText>
-      <DemoText color={t.palette.text.disabled}>
+      <DemoText color={t.colors.text.disabled}>
         text.disabled <Icon name="trash-alt" />
       </DemoText>
-      <DemoText color={t.palette.primary.text}>
+      <DemoText color={t.colors.primary.text}>
         primary.text <Icon name="trash-alt" />
       </DemoText>
     </>
@@ -302,22 +302,22 @@ export function ActionsDemo() {
   const item = css({
     padding: '8px',
     ':hover': {
-      background: t.palette.action.hover,
+      background: t.colors.action.hover,
     },
   });
   const hover = css({
-    background: t.palette.action.hover,
+    background: t.colors.action.hover,
   });
   const selected = css({
-    background: t.palette.action.selected,
+    background: t.colors.action.selected,
   });
   const focused = css({
-    background: t.palette.action.focus,
+    background: t.colors.action.focus,
   });
 
   return (
     <HorizontalGroup>
-      <DemoBox bg={t.palette.background.canvas}>
+      <DemoBox bg={t.colors.background.canvas}>
         <VerticalGroup>
           <div className={item}>item</div>
           <div className={item}>item</div>
@@ -326,7 +326,7 @@ export function ActionsDemo() {
           <div className={cx(item, focused)}>item focused</div>
         </VerticalGroup>
       </DemoBox>
-      <DemoBox bg={t.palette.background.primary}>
+      <DemoBox bg={t.colors.background.primary}>
         <VerticalGroup>
           <div className={item}>item</div>
           <div className={item}>item</div>
@@ -335,7 +335,7 @@ export function ActionsDemo() {
           <div className={cx(item, focused)}>item focused</div>
         </VerticalGroup>
       </DemoBox>
-      <DemoBox bg={t.palette.background.secondary}>
+      <DemoBox bg={t.colors.background.secondary}>
         <VerticalGroup>
           <div className={item}>item</div>
           <div className={item}>item</div>

packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx

@@ -14,14 +14,14 @@ import { TimePickerFooter } from './TimePickerFooter';
 const getStyles = stylesFactory((theme: GrafanaThemeV2, isReversed, hideQuickRanges, isContainerTall) => {
   return {
     container: css`
-      background: ${theme.palette.background.secondary};
+      background: ${theme.colors.background.secondary};
       box-shadow: ${theme.shadows.z4};
       position: absolute;
       z-index: ${theme.zIndex.dropdown};
       width: 546px;
       top: 116%;
       border-radius: 2px;
-      border: 1px solid ${theme.palette.border.weak};
+      border: 1px solid ${theme.colors.border.weak};
       ${isReversed ? 'left' : 'right'}: 0;
 
       @media only screen and (max-width: ${theme.breakpoints.values.lg}px) {
@@ -35,14 +35,14 @@ const getStyles = stylesFactory((theme: GrafanaThemeV2, isReversed, hideQuickRan
     leftSide: css`
       display: flex;
       flex-direction: column;
-      border-right: ${isReversed ? 'none' : `1px solid ${theme.palette.border.weak}`};
+      border-right: ${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`};
       width: ${!hideQuickRanges ? '60%' : '100%'};
       overflow: hidden;
       order: ${isReversed ? 1 : 0};
     `,
     rightSide: css`
       width: 40% !important;
-      border-right: ${isReversed ? `1px solid ${theme.palette.border.weak}` : 'none'};
+      border-right: ${isReversed ? `1px solid ${theme.colors.border.weak}` : 'none'};
 
       @media only screen and (max-width: ${theme.breakpoints.values.lg}px) {
         width: 100% !important;
@@ -61,11 +61,11 @@ const getNarrowScreenStyles = stylesFactory((theme: GrafanaThemeV2) => {
       flex-direction: row;
       justify-content: space-between;
       align-items: center;
-      border-bottom: 1px solid ${theme.palette.border.weak};
+      border-bottom: 1px solid ${theme.colors.border.weak};
       padding: 7px 9px 7px 9px;
     `,
     body: css`
-      border-bottom: 1px solid ${theme.palette.border.weak};
+      border-bottom: 1px solid ${theme.colors.border.weak};
     `,
     form: css`
       padding: 7px 9px 7px 9px;
@@ -105,7 +105,7 @@ const getEmptyListStyles = stylesFactory((theme: GrafanaThemeV2) => {
       }
     `,
     link: css`
-      color: ${theme.palette.text.link};
+      color: ${theme.colors.text.link};
     `,
   };
 });

packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx

@@ -85,7 +85,7 @@ export const TimePickerFooter: FC<Props> = (props) => {
 const getStyle = stylesFactory((theme: GrafanaThemeV2) => {
   return {
     container: css`
-      border-top: 1px solid ${theme.palette.border.weak};
+      border-top: 1px solid ${theme.colors.border.weak};
       padding: 11px;
       display: flex;
       flex-direction: row;

packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx

@@ -12,12 +12,12 @@ const getStyles = (theme: GrafanaThemeV2) => {
       padding: 7px 9px 7px 9px;
 
       &:hover {
-        background: ${theme.palette.action.hover};
+        background: ${theme.colors.action.hover};
         cursor: pointer;
       }
     `,
     selected: css`    
-      background: ${theme.palette.action.selected};    
+      background: ${theme.colors.action.selected};    
     }
   `,
   };

packages/grafana-ui/src/themes/GlobalStyles/elements.ts

@@ -17,8 +17,8 @@ export function getElementStyles(theme: GrafanaThemeV2) {
       height: 100%;
       width: 100%;
       position: absolute;
-      color: ${theme.palette.text.primary};
+      color: ${theme.colors.text.primary};
-      background-color: ${theme.palette.background.canvas};
+      background-color: ${theme.colors.background.canvas};
       ${getVariantStyles(theme.typography.body)}
     }
 
@@ -67,7 +67,7 @@ export function getElementStyles(theme: GrafanaThemeV2) {
 
     em {
       font-style: italic;
-      color: ${theme.palette.text.primary};
+      color: ${theme.colors.text.primary};
     }
 
     cite {
@@ -76,29 +76,29 @@ export function getElementStyles(theme: GrafanaThemeV2) {
 
     // Utility classes
     .muted {
-      color: ${theme.palette.text.secondary};
+      color: ${theme.colors.text.secondary};
     }
 
     a.muted:hover,
     a.muted:focus {
-      color: ${theme.palette.text.primary};
+      color: ${theme.colors.text.primary};
     }
 
     .text-warning {
-      color: ${theme.palette.warning.text};
+      color: ${theme.colors.warning.text};
 
       &:hover,
       &:focus {
-        color: ${theme.palette.emphasize(theme.palette.warning.text, 0.15)};
+        color: ${theme.colors.emphasize(theme.colors.warning.text, 0.15)};
       }
     }
 
     .text-error {
-      color: ${theme.palette.error.text};
+      color: ${theme.colors.error.text};
 
       &:hover,
       &:focus {
-        color: ${theme.palette.emphasize(theme.palette.error.text, 0.15)};
+        color: ${theme.colors.emphasize(theme.colors.error.text, 0.15)};
       }
     }
 
@@ -107,13 +107,13 @@ export function getElementStyles(theme: GrafanaThemeV2) {
 
       &:hover,
       &:focus {
-        color: ${theme.palette.emphasize(theme.palette.success.text, 0.15)};
+        color: ${theme.colors.emphasize(theme.colors.success.text, 0.15)};
       }
     }
 
     a {
       cursor: pointer;
-      color: ${theme.palette.text.primary};
+      color: ${theme.colors.text.primary};
       text-decoration: none;
 
       &:focus {

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -12,13 +12,13 @@ $theme-name: dark;
 
 // New Colors
 // -------------------------
-$blue-light: ${theme.palette.primary.text};
+$blue-light: ${theme.colors.primary.text};
-$blue-base: ${theme.palette.primary.main};
+$blue-base: ${theme.colors.primary.main};
-$blue-shade: ${theme.palette.primary.shade};
+$blue-shade: ${theme.colors.primary.shade};
-$red-base: ${theme.palette.error.main};
+$red-base: ${theme.colors.error.main};
-$red-shade: ${theme.palette.error.shade};
+$red-shade: ${theme.colors.error.shade};
-$green-base: ${theme.palette.success.main};
+$green-base: ${theme.colors.success.main};
-$green-shade: ${theme.palette.success.shade};
+$green-shade: ${theme.colors.success.shade};
 $orange-dark: ${theme.v1.palette.orangeDark};
 
 $gray98: ${theme.v1.palette.gray98};
@@ -55,14 +55,14 @@ $gray-6: ${theme.v1.palette.gray6};
 $input-black: ${theme.v1.colors.formInputBg};
 $white: ${theme.v1.palette.white};
 
-$layer0: ${theme.palette.background.canvas};
+$layer0: ${theme.colors.background.canvas};
-$layer1: ${theme.palette.background.primary};
+$layer1: ${theme.colors.background.primary};
-$layer2: ${theme.palette.background.secondary};
+$layer2: ${theme.colors.background.secondary};
 
-$divider: ${theme.palette.border.weak};
+$divider: ${theme.colors.border.weak};
 
-$border0: ${theme.palette.border.weak};
+$border0: ${theme.colors.border.weak};
-$border1: ${theme.palette.border.medium};
+$border1: ${theme.colors.border.medium};
 
 // Accent colors
 // -------------------------
@@ -129,7 +129,7 @@ $hr-border-color: $dark-9;
 // -------------------------
 $panel-bg: ${theme.components.panel.background};
 $panel-border: ${theme.components.panel.border};
-$panel-header-hover-bg: ${theme.palette.action.hover};
+$panel-header-hover-bg: ${theme.colors.action.hover};
 $panel-box-shadow: ${theme.components.panel.boxShadow};
 $panel-corner: $panel-bg;
 
@@ -141,16 +141,16 @@ $page-header-border-color: ${theme.v1.colors.pageHeaderBorder};
 $divider-border-color: $gray-1;
 
 // Graphite Target Editor
-$tight-form-func-bg: ${theme.palette.background.secondary};
+$tight-form-func-bg: ${theme.colors.background.secondary};
-$tight-form-func-highlight-bg: ${theme.palette.emphasize(theme.palette.background.secondary, 0.03)};
+$tight-form-func-highlight-bg: ${theme.colors.emphasize(theme.colors.background.secondary, 0.03)};
 
 $modal-backdrop-bg: ${theme.v1.colors.bg3};
 $code-tag-bg: $dark-1;
 $code-tag-border: $dark-9;
 
 // cards
-$card-background: ${theme.palette.background.secondary};
+$card-background: ${theme.colors.background.secondary};
-$card-background-hover: ${theme.palette.emphasize(theme.palette.background.secondary, 0.03)};
+$card-background-hover: ${theme.colors.emphasize(theme.colors.background.secondary, 0.03)};
 $card-shadow: none;
 
 // Lists
@@ -167,10 +167,10 @@ $scrollbarBorder: black;
 
 // Tables
 // -------------------------
-$table-bg-accent: ${theme.palette.background.secondary};
+$table-bg-accent: ${theme.colors.background.secondary};
-$table-border: ${theme.palette.border.medium};
+$table-border: ${theme.colors.border.medium};
-$table-bg-odd: ${theme.palette.emphasize(theme.palette.background.primary, 0.02)};
+$table-bg-odd: ${theme.colors.emphasize(theme.colors.background.primary, 0.02)};
-$table-bg-hover: ${theme.palette.emphasize(theme.palette.background.primary, 0.05)};
+$table-bg-hover: ${theme.colors.emphasize(theme.colors.background.primary, 0.05)};
 
 // Buttons
 // -------------------------
@@ -228,10 +228,10 @@ $typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground: ${theme.palette.background.secondary};
+$dropdownBackground: ${theme.colors.background.secondary};
-$dropdownBorder: ${theme.palette.border.weak};
+$dropdownBorder: ${theme.colors.border.weak};
-$dropdownDividerTop: ${theme.palette.border.weak};
+$dropdownDividerTop: ${theme.colors.border.weak};
-$dropdownDividerBottom: ${theme.palette.border.weak};
+$dropdownDividerBottom: ${theme.colors.border.weak};
 
 $dropdownLinkColor: $link-color;
 $dropdownLinkColorHover: $white;
@@ -259,8 +259,8 @@ $side-menu-header-color: ${theme.v1.colors.text};
 
 // Menu dropdowns
 // -------------------------
-$menu-dropdown-bg: ${theme.palette.background.secondary};
+$menu-dropdown-bg: ${theme.colors.background.secondary};
-$menu-dropdown-hover-bg: ${theme.palette.action.hover};
+$menu-dropdown-hover-bg: ${theme.colors.action.hover};
 $menu-dropdown-shadow: ${theme.shadows.z3};
 
 // Tabs
@@ -284,16 +284,16 @@ $tooltipArrowWidth: 5px;
 $tooltipLinkColor: $link-color;
 $graph-tooltip-bg: $dark-1;
 
-$tooltipBackground: ${theme.palette.background.secondary};
+$tooltipBackground: ${theme.colors.background.secondary};
-$tooltipColor: ${theme.palette.text.primary};
+$tooltipColor: ${theme.colors.text.primary};
-$tooltipArrowColor: ${theme.palette.background.secondary};
+$tooltipArrowColor: ${theme.colors.background.secondary};
-$tooltipBackgroundError: ${theme.palette.error.main};
+$tooltipBackgroundError: ${theme.colors.error.main};
 $tooltipShadow: ${theme.shadows.z2};
 
-$popover-bg: ${theme.palette.background.secondary};
+$popover-bg: ${theme.colors.background.secondary};
-$popover-color: ${theme.palette.text.primary};
+$popover-color: ${theme.colors.text.primary};
-$popover-border-color: ${theme.palette.border.medium};
+$popover-border-color: ${theme.colors.border.medium};
-$popover-header-bg: ${theme.palette.background.secondary};
+$popover-header-bg: ${theme.colors.background.secondary};
 $popover-shadow: ${theme.shadows.z4};
 
 $popover-help-bg: $tooltipBackground;

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -13,13 +13,13 @@ $theme-name: light;
 
 // New Colors
 // -------------------------
-$blue-light: ${theme.palette.primary.text};
+$blue-light: ${theme.colors.primary.text};
-$blue-base: ${theme.palette.primary.main};
+$blue-base: ${theme.colors.primary.main};
-$blue-shade: ${theme.palette.primary.shade};
+$blue-shade: ${theme.colors.primary.shade};
-$red-base: ${theme.palette.error.main};
+$red-base: ${theme.colors.error.main};
-$red-shade: ${theme.palette.error.shade};
+$red-shade: ${theme.colors.error.shade};
-$green-base: ${theme.palette.success.main};
+$green-base: ${theme.colors.success.main};
-$green-shade: ${theme.palette.success.shade};
+$green-shade: ${theme.colors.success.shade};
 $orange-dark: ${theme.v1.palette.orangeDark};
 
 $gray98: ${theme.v1.palette.gray98};
@@ -51,14 +51,14 @@ $gray-7: ${theme.v1.palette.gray7};
 
 $white: ${theme.v1.palette.white};
 
-$layer0: ${theme.palette.background.canvas};
+$layer0: ${theme.colors.background.canvas};
-$layer1: ${theme.palette.background.primary};
+$layer1: ${theme.colors.background.primary};
-$layer2: ${theme.palette.background.secondary};
+$layer2: ${theme.colors.background.secondary};
 
-$divider: ${theme.palette.border.weak};
+$divider: ${theme.colors.border.weak};
 
-$border0: ${theme.palette.border.weak};
+$border0: ${theme.colors.border.weak};
-$border1: ${theme.palette.border.medium};
+$border1: ${theme.colors.border.medium};
 
 // Accent colors
 // -------------------------
@@ -124,7 +124,7 @@ $hr-border-color: $gray-4 !default;
 // -------------------------
 $panel-bg: ${theme.components.panel.background};
 $panel-border: ${theme.components.panel.border};
-$panel-header-hover-bg: ${theme.palette.action.hover};
+$panel-header-hover-bg: ${theme.colors.action.hover};
 $panel-box-shadow: ${theme.components.panel.boxShadow};
 $panel-corner: $panel-bg;
 
@@ -144,8 +144,8 @@ $code-tag-bg: $gray-6;
 $code-tag-border: $gray-4;
 
 // cards
-$card-background: ${theme.palette.background.secondary};
+$card-background: ${theme.colors.background.secondary};
-$card-background-hover: ${theme.palette.background.secondary};
+$card-background-hover: ${theme.colors.background.secondary};
 $card-shadow: none;
 
 // Lists
@@ -162,10 +162,10 @@ $scrollbarBorder: $gray-7;
 
 // Tables
 // -------------------------
-$table-bg-accent: ${theme.palette.background.secondary};
+$table-bg-accent: ${theme.colors.background.secondary};
-$table-border: ${theme.palette.border.medium};
+$table-border: ${theme.colors.border.medium};
-$table-bg-odd: ${theme.palette.emphasize(theme.palette.background.primary, 0.02)};
+$table-bg-odd: ${theme.colors.emphasize(theme.colors.background.primary, 0.02)};
-$table-bg-hover: ${theme.palette.emphasize(theme.palette.background.primary, 0.05)};
+$table-bg-hover: ${theme.colors.emphasize(theme.colors.background.primary, 0.05)};
 
 // Buttons
 // -------------------------
@@ -223,10 +223,10 @@ $typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground: ${theme.palette.background.secondary};
+$dropdownBackground: ${theme.colors.background.secondary};
-$dropdownBorder: ${theme.palette.border.weak};
+$dropdownBorder: ${theme.colors.border.weak};
-$dropdownDividerTop: ${theme.palette.border.weak};
+$dropdownDividerTop: ${theme.colors.border.weak};
-$dropdownDividerBottom: ${theme.palette.border.weak};
+$dropdownDividerBottom: ${theme.colors.border.weak};
 
 $dropdownLinkColor: $dark-2;
 $dropdownLinkColorHover: $link-color;
@@ -256,8 +256,8 @@ $side-menu-header-color: ${theme.v1.palette.gray95};
 
 // Menu dropdowns
 // -------------------------
-$menu-dropdown-bg: ${theme.palette.background.secondary};
+$menu-dropdown-bg: ${theme.colors.background.secondary};
-$menu-dropdown-hover-bg: ${theme.palette.action.hover};
+$menu-dropdown-hover-bg: ${theme.colors.action.hover};
 $menu-dropdown-shadow: ${theme.shadows.z3};
 
 // Tabs
@@ -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.palette.background.secondary};
+$tooltipBackground: ${theme.colors.background.secondary};
-$tooltipColor: ${theme.palette.text.primary};
+$tooltipColor: ${theme.colors.text.primary};
-$tooltipArrowColor: ${theme.palette.background.secondary};
+$tooltipArrowColor: ${theme.colors.background.secondary};
-$tooltipBackgroundError: ${theme.palette.error.main};
+$tooltipBackgroundError: ${theme.colors.error.main};
 $tooltipShadow: ${theme.shadows.z2};
 
-$popover-bg: ${theme.palette.background.secondary};
+$popover-bg: ${theme.colors.background.secondary};
-$popover-color: ${theme.palette.text.primary};
+$popover-color: ${theme.colors.text.primary};
-$popover-border-color: ${theme.palette.border.medium};
+$popover-border-color: ${theme.colors.border.medium};
-$popover-header-bg: ${theme.palette.background.secondary};
+$popover-header-bg: ${theme.colors.background.secondary};
 $popover-shadow: ${theme.shadows.z4};
 
 $graph-tooltip-bg: $gray-5;

packages/grafana-ui/src/themes/getTheme.ts

@@ -7,7 +7,7 @@ export const getTheme = (mode: 'dark' | 'light' = 'dark') => {
     return themeMock(mode);
   }
 
-  return createTheme({ palette: { mode } }).v1;
+  return createTheme({ colors: { mode } }).v1;
 };
 
 export const mockTheme = (mock: (name?: string) => GrafanaTheme) => {

packages/grafana-ui/src/themes/mixins.ts

@@ -57,7 +57,7 @@ export function getFocusStyles(theme: GrafanaThemeV2): CSSObject {
   return {
     outline: '2px dotted transparent',
     outlineOffset: '2px',
-    boxShadow: `0 0 0 2px ${theme.palette.background.canvas}, 0 0 0px 4px ${theme.palette.primary.main}`,
+    boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,
     transition: `all 0.2s cubic-bezier(0.19, 1, 0.22, 1)`,
   };
 }

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.palette.background.primary}`,
+        background: `${theme.colors.background.primary}`,
       }}
     >
       <GlobalStyles />

packages/grafana-ui/src/utils/storybook/withTheme.tsx

@@ -10,7 +10,7 @@ const ThemeableStory: React.FunctionComponent<{ handleSassThemeChange: SassTheme
   children,
   handleSassThemeChange,
 }) => {
-  const theme = createTheme({ palette: { mode: useDarkMode() ? 'dark' : 'light' } });
+  const theme = createTheme({ colors: { mode: useDarkMode() ? 'dark' : 'light' } });
 
   handleSassThemeChange(theme);
 
@@ -22,7 +22,7 @@ const ThemeableStory: React.FunctionComponent<{ handleSassThemeChange: SassTheme
           padding: '20px',
           display: 'flex',
           minHeight: '80vh',
-          background: `${theme.palette.background.primary}`,
+          background: `${theme.colors.background.primary}`,
         }}
       >
         <GlobalStyles />

public/app/core/components/PageHeader/PageHeader.tsx

@@ -139,8 +139,8 @@ function renderTitle(title: string, breadcrumbs: NavModelBreadcrumb[]) {
 
 const getStyles = (theme: GrafanaThemeV2) => ({
   headerCanvas: css`
-    background: ${theme.palette.background.canvas};
+    background: ${theme.colors.background.canvas};
-    border-bottom: 1px solid ${theme.palette.border.weak};
+    border-bottom: 1px solid ${theme.colors.border.weak};
   `,
 });
 

public/app/core/services/toggleTheme.ts

@@ -8,7 +8,7 @@ import { createTheme } from '@grafana/data';
 export async function toggleTheme(runtimeOnly: boolean) {
   const currentTheme = config.theme;
   const newTheme = createTheme({
-    palette: {
+    colors: {
       mode: currentTheme.isDark ? 'light' : 'dark',
     },
   });
@@ -22,7 +22,7 @@ export async function toggleTheme(runtimeOnly: boolean) {
   // Add css file for new theme
   const newCssLink = document.createElement('link');
   newCssLink.rel = 'stylesheet';
-  newCssLink.href = config.bootData.themePaths[newTheme.palette.mode];
+  newCssLink.href = config.bootData.themePaths[newTheme.colors.mode];
   document.body.appendChild(newCssLink);
 
   // Remove old css file
@@ -48,6 +48,6 @@ export async function toggleTheme(runtimeOnly: boolean) {
 
   await service.update({
     ...currentPref,
-    theme: newTheme.palette.mode,
+    theme: newTheme.colors.mode,
   });
 }

public/app/core/utils/ConfigProvider.tsx

@@ -32,7 +32,7 @@ export const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
 
 function getCurrentUserTheme() {
   return createTheme({
-    palette: {
+    colors: {
       mode: config.bootData.user.lightTheme ? 'light' : 'dark',
     },
   });

public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx

@@ -89,7 +89,7 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
 const getStyles = (theme: GrafanaThemeV2) => {
   return {
     box: css`
-      border-bottom: 1px solid ${theme.palette.border.weak};
+      border-bottom: 1px solid ${theme.colors.border.weak};
       &:last-child {
         border-bottom: none;
       }
@@ -101,7 +101,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
       margin-bottom: ${theme.spacing(2)};
     `,
     toggle: css`
-      color: ${theme.palette.text.secondary};
+      color: ${theme.colors.text.secondary};
       margin-right: ${theme.spacing(1)};
     `,
     title: css`
@@ -113,15 +113,15 @@ const getStyles = (theme: GrafanaThemeV2) => {
       cursor: pointer;
       align-items: baseline;
       padding: ${theme.spacing(1)};
-      color: ${theme.palette.text.primary};
+      color: ${theme.colors.text.primary};
       font-weight: ${theme.typography.fontWeightMedium};
 
       &:hover {
-        background: ${theme.palette.emphasize(theme.palette.background.primary, 0.03)};
+        background: ${theme.colors.emphasize(theme.colors.background.primary, 0.03)};
       }
     `,
     headerExpanded: css`
-      color: ${theme.palette.text.primary};
+      color: ${theme.colors.text.primary};
     `,
     headerNested: css`
       padding: ${theme.spacing(0.5, 0, 0.5, 0)};
@@ -139,7 +139,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
         left: 8px;
         width: 1px;
         height: 100%;
-        background: ${theme.palette.border.weak};
+        background: ${theme.colors.border.weak};
       }
     `,
   };

public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx

@@ -160,7 +160,7 @@ const getStyles = (theme: GrafanaThemeV2) => ({
   `,
   formBox: css`
     padding: ${theme.spacing(1)};
-    background: ${theme.palette.background.primary};
+    background: ${theme.colors.background.primary};
     border: 1px solid ${theme.components.panel.border};
     border-bottom: none;
   `,
@@ -176,12 +176,12 @@ const getStyles = (theme: GrafanaThemeV2) => ({
   `,
   searchNotice: css`
     font-size: ${theme.typography.size.sm};
-    color: ${theme.palette.text.secondary};
+    color: ${theme.colors.text.secondary};
     padding: ${theme.spacing(1)};
     text-align: center;
   `,
   mainBox: css`
-    background: ${theme.palette.background.primary};
+    background: ${theme.colors.background.primary};
     border: 1px solid ${theme.components.panel.border};
     border-top: none;
     flex-grow: 1;

public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx

@@ -91,7 +91,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
       flex-direction: column;
       flex-grow: 1;
       min-height: 0;
-      background: ${theme.palette.background.primary};
+      background: ${theme.colors.background.primary};
       border-right: 1px solid ${theme.components.panel.border};
     `,
   };

public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx

@@ -368,7 +368,7 @@ const TransformationCard: React.FC<CardProps> = (props) => {
 const getStyles = (theme: GrafanaThemeV2) => {
   return {
     card: css`
-      background: ${theme.palette.background.secondary};
+      background: ${theme.colors.background.secondary};
       width: 100%;
       border: none;
       padding: ${theme.spacing(1)};
@@ -379,7 +379,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
       }
 
       &:hover {
-        background: ${theme.palette.action.hover};
+        background: ${theme.colors.action.hover};
         box-shadow: none;
         border: none;
       }

public/app/features/dashboard/components/VersionHistory/DiffValues.tsx

@@ -25,9 +25,9 @@ export const DiffValues: React.FC<DiffProps> = ({ diff }) => {
 };
 
 const getStyles = (theme: GrafanaThemeV2) => css`
-  background-color: ${theme.palette.action.hover};
+  background-color: ${theme.colors.action.hover};
   border-radius: ${theme.shape.borderRadius()};
-  color: ${theme.palette.text.primary};
+  color: ${theme.colors.text.primary};
   font-size: ${theme.typography.body.fontSize};
   margin: 0 ${theme.spacing(0.5)};
   padding: ${theme.spacing(0.5, 1)};

public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx

@@ -69,7 +69,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
       display: flex;
       flex-shrink: 0;
       cursor: pointer;
-      background: ${theme.palette.background.secondary};
+      background: ${theme.colors.background.secondary};
       border-radius: ${theme.shape.borderRadius()};
       box-shadow: ${theme.shadows.z0};
       align-items: center;
@@ -83,7 +83,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
       })};
 
       &:hover {
-        background: ${theme.palette.emphasize(theme.palette.background.secondary, 0.03)};
+        background: ${theme.colors.emphasize(theme.colors.background.secondary, 0.03)};
       }
     `,
     itemContent: css`
@@ -92,7 +92,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
     `,
     current: css`
       label: currentVisualizationItem;
-      border-color: ${theme.palette.primary.border};
+      border-color: ${theme.colors.primary.border};
     `,
     disabled: css`
       opacity: 0.2;
@@ -116,7 +116,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
       align-items: center;
     `,
     badge: css`
-      background: ${theme.palette.background.primary};
+      background: ${theme.colors.background.primary};
     `,
   };
 };

public/app/features/users/TokenRevokedModal.tsx

@@ -59,7 +59,7 @@ const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
       margin: ${theme.spacing(1, 0, 2)};
     `,
     backdrop: css`
-      background-color: ${theme.palette.background.canvas};
+      background-color: ${theme.colors.background.canvas};
       opacity: 0.8;
     `,
   };

scripts/cli/generateSassVariableFiles.ts

@@ -22,7 +22,7 @@ const writeVariablesFile = async (path: string, data: string) => {
 
 const generateSassVariableFiles = async () => {
   const darkTheme = createTheme();
-  const lightTheme = createTheme({ palette: { mode: 'light' } });
+  const lightTheme = createTheme({ colors: { mode: 'light' } });
 
   try {
     await Promise.all([