new theme colors

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

@@ -90,79 +90,84 @@ export type ThemeColorsInput = DeepPartial<ThemeColorsBase<ThemeRichColor>>;
 class DarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   mode: ThemeColorsMode = 'dark';
 
-  // Used to get more white opacity colors
-  whiteBase = '209, 209, 209';
+  whiteBase = '255, 255, 255';
 
-  border = {
-    weak: `rgba(${this.whiteBase}, 0.12)`,
-    medium: `rgba(${this.whiteBase}, 0.20)`,
-    strong: `rgba(${this.whiteBase}, 0.30)`,
+  primary = {
+    main: '#F04006',
+    border: '#46404F',
+    text: '#F5F4F6',
   };
 
   text = {
-    primary: '#fff',
-    secondary: '#ffffff90',
-    disabled: '#9DA7B8',
-    link: '#F0E4B6',
-    maxContrast: '#F0E4B6',
+    primary: '#F5F4F6',
+    secondary: '#D5D3DD',
+    disabled: '#D5D3DA',
+    link: '#F04006',
+    maxContrast: palette.white,
   };
 
-  primary = {
-    main: '#ff570ae5',
-    text: '#e94900',
-    border: '#ffffff00',
+  border = {
+    weak: `rgba(${this.whiteBase}, 0.12)`,
+    medium: `rgba(${this.whiteBase}, 0.30)`,
+    strong: `rgba(${this.whiteBase}, 0.40)`,
   };
 
   secondary = {
-    main: '#F06929',
-    shade: '#F0692955',
+    main: '#F04006',
+    shade: '#9E240E',
+    contrastText: `rgba(${this.whiteBase},  1)`,
     text: this.text.primary,
-    contrastText: `rgb(${this.whiteBase})`,
-    border: `rgba(${this.whiteBase}, 0.08)`,
+    border: this.border.weak,
   };
 
-  info = this.primary;
+  info = {
+    main: '#51A2FF',
+    text: palette.blueDarkText,
+  };
 
   error = {
-    main: palette.redDarkMain,
+    main: '#FF6467',
     text: palette.redDarkText,
+    border: palette.redDarkText,
   };
 
   success = {
-    main: '#4BBF73',
-    text: '#318B50',
+    main: '#05DF72',
+    text: palette.greenDarkText,
   };
 
   warning = {
-    main: '#CF8E07',
-    text: this.text.primary,
+    main: '#FDC700',
+    text: palette.orangeDarkText,
   };
 
   background = {
-    canvas: '#161618', //palette.gray05,
-    primary: '#23242a', //palette.gray10,
-    secondary: '#5E5855', //palette.gray15,
+    primary: '#141116',
+    canvas: '#141116',
+    secondary: '#211E25',
   };
 
   action = {
-    hover: `rgba(${this.whiteBase}, 0.16)`,
-    selected: `rgba(${this.whiteBase}, 0.12)`,
+    hover: `rgba(${this.whiteBase}, 0.12)`,
+    selected: '#F04006',
     selectedBorder: palette.orangeDarkMain,
-    focus: `rgba(${this.whiteBase}, 0.16)`,
     hoverOpacity: 0.08,
-    disabledText: this.text.disabled,
+    focus: `rgba(${this.whiteBase}, 0.12)`,
     disabledBackground: `rgba(${this.whiteBase}, 0.04)`,
+    disabledText: this.text.disabled,
     disabledOpacity: 0.38,
   };
 
   gradients = {
-    brandHorizontal: 'linear-gradient(270deg, #F55F3E 0%, #FF8833 100%)',
-    brandVertical: 'linear-gradient(0.01deg, #F55F3E 0.01%, #FF8833 99.99%)',
+    brandHorizontal: 'linear-gradient(90deg, #FF570A 0%, #F04006 100%)',
+    brandVertical: 'linear-gradient(0.01deg, #FF570A -31.2%, #F04006 113.07%)',
   };
 
   contrastThreshold = 3;
+
   hoverFactor = 0.03;
-  tonalOffset = 0.15;
+
+  tonalOffset = 0.2;
 }
 
 class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
@@ -171,63 +176,63 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   blackBase = '45, 51, 62';
 
   primary = {
-    main: '#FF570AE5',
-    border: '#D7D7C7',
-    text: '#101828',
+    main: '#F04006',
+    border: '#D5D3DD',
+    text: '#141116',
   };
 
   text = {
-    primary: '#101828',
-    secondary: '#363636',
-    disabled: '#9DA7B8',
-    link: '#FF4702',
+    primary: '#141116',
+    secondary: '#3A3441',
+    disabled: '#AFACB3',
+    link: '#F04006',
     maxContrast: palette.black,
   };
 
   border = {
     weak: `rgba(${this.blackBase}, 0.12)`,
     medium: `rgba(${this.blackBase}, 0.30)`,
-    strong: `rgba(${this.blackBase}, 0.40)`,
+    strong: `rgba(${this.blackBase}, .4)`,
   };
 
   secondary = {
-    main: '#FF4702',
-    shade: '#FC9A6990',
+    main: '#F04006',
+    shade: '#FFCFA8',
     contrastText: `rgba(${this.blackBase},  1)`,
     text: this.text.primary,
     border: this.border.weak,
   };
 
   info = {
-    main: '#64B6F7',
+    main: '#51A2FF',
     text: palette.blueLightText,
   };
 
   error = {
-    main: palette.redLightMain,
+    main: '#FF6467',
     text: palette.redLightText,
     border: palette.redLightText,
   };
 
   success = {
-    main: '#83D39E',
+    main: '#05DF72',
     text: palette.greenLightText,
   };
 
   warning = {
-    main: '#F3D086',
+    main: '#FDC700',
     text: palette.orangeLightText,
   };
 
   background = {
-    primary: '#F5F5F5',
+    primary: '#FFFFFF',
     canvas: '#FFFFFF',
-    secondary: '#FFFFFF',
+    secondary: '#F5F4F6',
   };
 
   action = {
     hover: `rgba(${this.blackBase}, 0.12)`,
-    selected: `#F27A40`,
+    selected: '#F04006',
     selectedBorder: palette.orangeLightMain,
     hoverOpacity: 0.08,
     focus: `rgba(${this.blackBase}, 0.12)`,
@@ -237,12 +242,14 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   };
 
   gradients = {
-    brandHorizontal: 'linear-gradient(90deg, #FF8833 0%, #F53E4C 100%)',
-    brandVertical: 'linear-gradient(0.01deg, #F53E4C -31.2%, #FF8833 113.07%)',
+    brandHorizontal: 'linear-gradient(90deg, #FF570A 0%, #F04006 100%)',
+    brandVertical: 'linear-gradient(0.01deg, #FF570A -31.2%, #F04006 113.07%)',
   };
 
   contrastThreshold = 3;
+
   hoverFactor = 0.03;
+
   tonalOffset = 0.2;
 }
 

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -116,9 +116,7 @@ type OwnProps = {
 export type DashboardPageProps = OwnProps &
   GrafanaRouteComponentProps<DashboardPageRouteParams, DashboardPageRouteSearchParams>;
 
-export type Props = Themeable2 &
-  GrafanaRouteComponentProps<DashboardPageRouteParams, DashboardPageRouteSearchParams> &
-  ConnectedProps<typeof connector>;
+export type Props = Themeable2 & DashboardPageProps & ConnectedProps<typeof connector>;
 
 export interface State {
   editPanel: PanelModel | null;
@@ -383,9 +381,11 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
     const kioskMode = getKioskMode(this.props.queryParams);
 
     if (!dashboard) {
+      this.props?.isLoading?.(true);
       return FNDashboard ? <FnLoader /> : <DashboardLoading initPhase={this.props.initPhase} />;
     }
 
+    this.props?.isLoading?.(false);
     const inspectPanel = this.getInspectPanel();
     const showSubMenu = !editPanel && !kioskMode && !this.props.queryParams.editview;
 

public/app/features/variables/pickers/PickerRenderer.tsx

@@ -70,15 +70,17 @@ const COMMON_PICKER_LABEL_STYLE: CSSProperties = {
 function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | null {
   const labelOrName = useMemo(() => variable.label || variable.name, [variable]);
   const { FNDashboard } = useSelector<StoreState, FnGlobalState>(({ fnGlobalState }) => fnGlobalState);
-  const { colors: { mode } } = useTheme2();
+  const {
+    colors: { background, text },
+  } = useTheme2();
 
   const fnLabelStyle = useMemo(
     () => ({
       ...COMMON_PICKER_LABEL_STYLE,
-      color: mode === 'light' ? '#2D333E' : '#DBD9D7',
-      backgroundColor: mode === 'light' ? '#F6F6F1': '#23242a',
+      color: text.primary,
+      backgroundColor: background.canvas,
     }),
-    [mode]
+    [background, text]
   );
 
   if (variable.hide !== VariableHide.dontHide) {

public/app/fn-app/fn-app-provider.tsx

@@ -18,7 +18,7 @@ import app from '../fn_app';
 import { FNDashboardProps } from './types';
 
 type FnAppProviderProps = Pick<FNDashboardProps, 'fnError'> & {
-  store: Store<StoreState>
+  store: Store<StoreState>;
 };
 
 export const FnAppProvider: FC<PropsWithChildren<FnAppProviderProps>> = (props) => {

public/microfrontends/fn_dashboard/index.html

@@ -10,16 +10,16 @@
 <script nonce="">
   window.fnData = {
     themePaths: {
-      light: '../../../public/build/grafana.light.485c55b1c2950f6001af.css',
-      dark: '../../../public/build/grafana.dark.93afaa54e9b1395b4d54.css',
+      light: '../../../public/build/grafana.light.014e7717596b1ae793cd.css',
+      dark: '../../../public/build/grafana.dark.a2d738431fce3ebf70b9.css',
     }
   };
 </script>
 
 
     <script nonce="" src="../../../public/build/runtime~fn_dashboard.551314fa089c5f51c211.js" type="text/javascript"></script>
 
-    <script nonce="" src="../../../public/build/fn_dashboard.cba3a3077df2f940f692.js" type="text/javascript"></script>
+    <script nonce="" src="../../../public/build/fn_dashboard.0a5f240b55d61360ccc0.js" type="text/javascript"></script>
 
   </body>
 </html>