theme fix

Author: GurinderRawala

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

@@ -220,8 +220,8 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   };
 
   background = {
-    primary: '#FFFFFF',
-    canvas: '#F5F5F5',
+    primary: '#F5F5F5',
+    canvas: '#FFFFFF',
     secondary: '#FFFFFF',
   };
 

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

@@ -42,7 +42,7 @@ export function getDashboardGridStyles(theme: GrafanaTheme2) {
     },
 
     '.react-grid-item.react-grid-placeholder': {
-      boxShadow: `0 8px 24px ${theme.colors.primary.border} !important`,
+      boxShadow: `0 0 4px ${theme.colors.primary.border} !important`,
       background: `${theme.colors.primary.transparent} !important`,
       zIndex: '-1 !important',
       opacity: 'unset !important',
@@ -54,7 +54,7 @@ export function getDashboardGridStyles(theme: GrafanaTheme2) {
     },
 
     '.react-grid-item > div:first-of-type': {
-      boxShadow: `0 8px 24px ${theme.colors.primary.border} !important`,
+      boxShadow: `0 0 4px ${theme.colors.primary.border} !important`,
       borderRadius: theme.shape.borderRadius(2),
     },
 

public/microfrontends/fn_dashboard/index.html

@@ -10,16 +10,16 @@
 <script nonce="">
   window.fnData = {
     themePaths: {
-      light: '../../../public/build/grafana.light.1225898111a2fd093893.css',
+      light: '../../../public/build/grafana.light.485c55b1c2950f6001af.css',
       dark: '../../../public/build/grafana.dark.cd0ed8a9f2cb3824f581.css',
     }
   };
 </script>
 
 
-    <script nonce="" src="../../../public/build/runtime~fn_dashboard.c72758889b72f840d29c.js" type="text/javascript"></script>
+    <script nonce="" src="../../../public/build/runtime~fn_dashboard.0e2d0029bf0a7d58dfe0.js" type="text/javascript"></script>
 
-    <script nonce="" src="../../../public/build/fn_dashboard.5bf65485c5298da38ca6.js" type="text/javascript"></script>
+    <script nonce="" src="../../../public/build/fn_dashboard.02910b9c7256ab6aa51d.js" type="text/javascript"></script>
 
   </body>
 </html>

public/sass/_variables.light.generated.scss

@@ -57,8 +57,8 @@ $gray-7: #fbfbfb;
 
 $white: #ffffff;
 
-$layer0: #F5F5F5;
-$layer1: #FFFFFF;
+$layer0: #FFFFFF;
+$layer1: #F5F5F5;
 $layer2: #FFFFFF;
 
 $divider: rgba(45, 51, 62, 0.12);
@@ -93,9 +93,9 @@ $critical: #CF0E5B;
 
 // Scaffolding
 // -------------------------
-$body-bg: #F5F5F5;
-$page-bg: #F5F5F5;
-$dashboard-bg: #F5F5F5;
+$body-bg: #FFFFFF;
+$page-bg: #FFFFFF;
+$dashboard-bg: #FFFFFF;
 
 $text-color: #101828;
 $text-color-strong: #000000;
@@ -128,24 +128,24 @@ $hr-border-color: $gray-4 !default;
 
 // Panel
 // -------------------------
-$panel-bg: #FFFFFF;
+$panel-bg: #F5F5F5;
 $panel-border: 1px solid rgba(45, 51, 62, 0.12);
 $panel-header-hover-bg: rgba(45, 51, 62, 0.12);
 $panel-box-shadow: none;
 $panel-corner: $panel-bg;
 
 // Page header
-$page-header-bg: #F5F5F5;
+$page-header-bg: #FFFFFF;
 $page-header-shadow: inset 0px -3px 10px $gray-6;
-$page-header-border-color: #F5F5F5;
+$page-header-border-color: #FFFFFF;
 
 $divider-border-color: $gray-2;
 
 // Graphite Target Editor
 $tight-form-func-bg: #FFFFFF;
 $tight-form-func-highlight-bg: #fafafa;
 
-$modal-backdrop-bg: #FFFFFF;
+$modal-backdrop-bg: #F5F5F5;
 $code-tag-bg: $gray-6;
 $code-tag-border: $gray-4;
 
@@ -170,8 +170,8 @@ $scrollbarBorder: $gray-7;
 // -------------------------
 $table-bg-accent: #FFFFFF;
 $table-border: rgba(45, 51, 62, 0.30);
-$table-bg-odd: rgb(249, 249, 249);
-$table-bg-hover: rgb(242, 242, 242);
+$table-bg-odd: rgb(240, 240, 240);
+$table-bg-hover: rgb(232, 232, 232);
 
 // Buttons
 // -------------------------
@@ -207,7 +207,7 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
 
 // Forms
 // -------------------------
-$input-bg: #FFFFFF;
+$input-bg: #F5F5F5;
 $input-bg-disabled: rgba(45, 51, 62, 0.04);
 
 $input-color: #101828;
@@ -229,7 +229,7 @@ $typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground: #FFFFFF;
+$dropdownBackground: #F5F5F5;
 $dropdownBorder: rgba(45, 51, 62, 0.12);
 $dropdownDividerTop: rgba(45, 51, 62, 0.12);
 $dropdownDividerBottom: rgba(45, 51, 62, 0.12);
@@ -263,7 +263,7 @@ $side-menu-header-color: #e9edf2;
 
 // Menu dropdowns
 // -------------------------
-$menu-dropdown-bg: #FFFFFF;
+$menu-dropdown-bg: #F5F5F5;
 $menu-dropdown-hover-bg: rgba(45, 51, 62, 0.12);
 $menu-dropdown-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);
 
@@ -289,7 +289,7 @@ $tooltipArrowColor: #FFFFFF;
 $tooltipBackgroundError: #E0226E;
 $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2);
 
-$popover-bg: #FFFFFF;
+$popover-bg: #F5F5F5;
 $popover-color: #101828;
 $popover-border-color: rgba(45, 51, 62, 0.12);
 $popover-header-bg: #FFFFFF;
@@ -305,7 +305,7 @@ $popover-error-bg: $btn-danger-bg;
 $popover-help-bg: $tooltipBackground;
 $popover-help-color: $tooltipColor;
 
-$popover-code-bg: #FFFFFF;
+$popover-code-bg: #F5F5F5;
 $popover-code-boxshadow: 0 0 5px $gray60;
 
 // images