From f884381a680707aba8b5ab87e7254ce760224458 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Fri, 11 Jun 2021 17:33:56 +0200
Subject: [PATCH] Theme: Change white base in dark theme (#35564)

* Theme: Change white base in dark theme

* Updated

* Updated snapshots
---
 .../grafana-data/src/themes/createColors.ts   |  2 +-
 .../CustomScrollbar.test.tsx.snap             |  2 +-
 .../GraphNG/__snapshots__/utils.test.ts.snap  |  4 +-
 .../uPlot/config/UPlotConfigBuilder.test.ts   |  2 +-
 .../AddPanelWidget.test.tsx.snap              |  6 +-
 .../__snapshots__/MetaInfoText.test.tsx.snap  |  2 +-
 .../AnalyticsConfig.test.tsx.snap             | 22 ++++----
 .../barchart/__snapshots__/utils.test.ts.snap | 32 +++++------
 public/sass/_variables.dark.generated.scss    | 56 +++++++++----------
 9 files changed, 64 insertions(+), 64 deletions(-)

diff --git a/packages/grafana-data/src/themes/createColors.ts b/packages/grafana-data/src/themes/createColors.ts
index e97b369990d..9c1000a9b7e 100644
--- a/packages/grafana-data/src/themes/createColors.ts
+++ b/packages/grafana-data/src/themes/createColors.ts
@@ -85,7 +85,7 @@ class DarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
   mode: ThemeColorsMode = 'dark';
 
   // Used to get more white opacity colors
-  whiteBase = '201, 209, 217';
+  whiteBase = '204, 204, 220';
 
   border = {
     weak: `rgba(${this.whiteBase}, 0.07)`,
diff --git a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
index 1601b7b1882..6011fd4d086 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
+++ b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`CustomScrollbar renders correctly 1`] = `
 <div
-  className="css-ccjpr2"
+  className="css-12b7m5k"
   style={
     Object {
       "height": "auto",
diff --git a/packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap b/packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap
index d9798fac5a2..89c1091994c 100644
--- a/packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap
+++ b/packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap
@@ -18,7 +18,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": undefined,
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": true,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -42,7 +42,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": undefined,
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": true,
         "stroke": "rgba(240, 250, 255, 0.09)",
diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts
index 3281b7e26ed..83a8465680c 100644
--- a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts
+++ b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts
@@ -345,7 +345,7 @@ describe('UPlotConfigBuilder', () => {
             "size": [Function],
             "space": [Function],
             "splits": undefined,
-            "stroke": "rgb(201, 209, 217)",
+            "stroke": "rgb(204, 204, 220)",
             "ticks": Object {
               "show": true,
               "stroke": "rgba(240, 250, 255, 0.09)",
diff --git a/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap b/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
index 91ce4bc4298..57ca4096985 100644
--- a/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
+++ b/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`Render should render component 1`] = `
       onCancel={[Function]}
       styles={
         Object {
-          "actionsRow": "css-l02n0m",
+          "actionsRow": "css-1j3dhm4",
           "actionsWrapper": "css-gxxmom",
           "backButton": "css-1cdxa9p",
           "callToAction": "css-e4b3m6",
@@ -27,7 +27,7 @@ exports[`Render should render component 1`] = `
       className="css-gxxmom"
     >
       <div
-        className="css-l02n0m"
+        className="css-1j3dhm4"
       >
         <div
           aria-label="Add new panel"
@@ -50,7 +50,7 @@ exports[`Render should render component 1`] = `
         </div>
       </div>
       <div
-        className="css-l02n0m"
+        className="css-1j3dhm4"
       >
         <div
           onClick={[Function]}
diff --git a/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap b/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap
index 8da60de5152..07c3073f191 100644
--- a/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap
+++ b/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`MetaInfoText should render component 1`] = `
 <div
-  className="css-1g6mnuc"
+  className="css-mecrmv"
 >
   <Memo(MetaInfoItem)
     key="0-label"
diff --git a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AnalyticsConfig.test.tsx.snap b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AnalyticsConfig.test.tsx.snap
index a8784310821..5ba969e22da 100644
--- a/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AnalyticsConfig.test.tsx.snap
+++ b/public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AnalyticsConfig.test.tsx.snap
@@ -101,7 +101,7 @@ exports[`Render should disable log analytics credentials form 1`] = `
             class="max-width-30 gf-form-inline"
           >
             <button
-              class="css-17xyotq-button"
+              class="css-191ipe8-button"
               disabled=""
               type="button"
             >
@@ -164,15 +164,15 @@ exports[`Render should enable azure log analytics load workspaces button 1`] = `
         />
       </div>
       <div
-        class="css-mqq7gx"
+        class="css-zmuccj"
       >
         <div
-          class="css-19c9rx9"
+          class="css-hui7p1"
         >
           Deprecated
         </div>
         <div
-          class="css-1r38y0g"
+          class="css-1b0c7i6"
         >
           Using different credentials for Azure Monitor Logs is deprecated and will be removed in a future version.
           <br />
@@ -344,7 +344,7 @@ exports[`Render should enable azure log analytics load workspaces button 1`] = `
             class="max-width-30 gf-form-inline"
           >
             <button
-              class="css-17xyotq-button"
+              class="css-191ipe8-button"
               disabled=""
               type="button"
             >
@@ -451,7 +451,7 @@ exports[`Render should enable azure log analytics load workspaces button 1`] = `
             class="max-width-30 gf-form-inline"
           >
             <button
-              class="css-17xyotq-button"
+              class="css-191ipe8-button"
               disabled=""
               type="button"
             >
@@ -514,15 +514,15 @@ exports[`Render should render component 1`] = `
         />
       </div>
       <div
-        class="css-mqq7gx"
+        class="css-zmuccj"
       >
         <div
-          class="css-19c9rx9"
+          class="css-hui7p1"
         >
           Deprecated
         </div>
         <div
-          class="css-1r38y0g"
+          class="css-1b0c7i6"
         >
           Using different credentials for Azure Monitor Logs is deprecated and will be removed in a future version.
           <br />
@@ -694,7 +694,7 @@ exports[`Render should render component 1`] = `
             class="max-width-30 gf-form-inline"
           >
             <button
-              class="css-17xyotq-button"
+              class="css-191ipe8-button"
               disabled=""
               type="button"
             >
@@ -801,7 +801,7 @@ exports[`Render should render component 1`] = `
             class="max-width-30 gf-form-inline"
           >
             <button
-              class="css-17xyotq-button"
+              class="css-191ipe8-button"
               disabled=""
               type="button"
             >
diff --git a/public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap b/public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap
index e549b72516b..8bc753f5146 100644
--- a/public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap
+++ b/public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap
@@ -18,7 +18,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": [Function],
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": false,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -42,7 +42,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": undefined,
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": true,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -140,7 +140,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": [Function],
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": false,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -164,7 +164,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": undefined,
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": true,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -262,7 +262,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": [Function],
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": false,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -286,7 +286,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": undefined,
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": true,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -384,7 +384,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": [Function],
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": false,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -408,7 +408,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": undefined,
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": true,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -506,7 +506,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": [Function],
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": false,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -530,7 +530,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": undefined,
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": true,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -628,7 +628,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": [Function],
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": false,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -652,7 +652,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": undefined,
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": true,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -750,7 +750,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": [Function],
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": false,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -774,7 +774,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": undefined,
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": true,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -872,7 +872,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": [Function],
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": false,
         "stroke": "rgba(240, 250, 255, 0.09)",
@@ -896,7 +896,7 @@ Object {
       "size": [Function],
       "space": [Function],
       "splits": undefined,
-      "stroke": "rgb(201, 209, 217)",
+      "stroke": "rgb(204, 204, 220)",
       "ticks": Object {
         "show": true,
         "stroke": "rgba(240, 250, 255, 0.09)",
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss
index c8a6f958098..9bd131b6ee9 100644
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -61,10 +61,10 @@ $layer0: #111217;
 $layer1: #181b1f;
 $layer2: #22252b;
 
-$divider: rgba(201, 209, 217, 0.07);
+$divider: rgba(204, 204, 220, 0.07);
 
-$border0: rgba(201, 209, 217, 0.07);
-$border1: rgba(201, 209, 217, 0.15);
+$border0: rgba(204, 204, 220, 0.07);
+$border1: rgba(204, 204, 220, 0.15);
 
 // Accent colors
 // -------------------------
@@ -98,10 +98,10 @@ $page-bg: #111217;
 $dashboard-bg: #111217;
 
 $text-color-strong: #fff;
-$text-color: rgb(201, 209, 217);
-$text-color-semi-weak: rgba(201, 209, 217, 0.65);
-$text-color-weak: rgba(201, 209, 217, 0.65);
-$text-color-faint: rgba(201, 209, 217, 0.40);
+$text-color: rgb(204, 204, 220);
+$text-color-semi-weak: rgba(204, 204, 220, 0.65);
+$text-color-weak: rgba(204, 204, 220, 0.65);
+$text-color-faint: rgba(204, 204, 220, 0.40);
 $text-color-emphasis: #fff;
 $text-blue: #6E9FFF;
 
@@ -114,14 +114,14 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
 
 // Links
 // -------------------------
-$link-color: rgb(201, 209, 217);
-$link-color-disabled: rgba(201, 209, 217, 0.40);
+$link-color: rgb(204, 204, 220);
+$link-color-disabled: rgba(204, 204, 220, 0.40);
 $link-hover-color: #fff;
 $external-link-color: #6E9FFF;
 
 // Typography
 // -------------------------
-$headings-color: rgb(201, 209, 217);
+$headings-color: rgb(204, 204, 220);
 $abbr-border-color: $gray-2 !default;
 $text-muted: $text-color-weak;
 
@@ -130,8 +130,8 @@ $hr-border-color: $dark-9;
 // Panel
 // -------------------------
 $panel-bg: #181b1f;
-$panel-border: 1px solid rgba(201, 209, 217, 0.07);
-$panel-header-hover-bg: rgba(201, 209, 217, 0.08);
+$panel-border: 1px solid rgba(204, 204, 220, 0.07);
+$panel-header-hover-bg: rgba(204, 204, 220, 0.08);
 $panel-box-shadow: none;
 $panel-corner: $panel-bg;
 
@@ -146,7 +146,7 @@ $divider-border-color: $gray-1;
 $tight-form-func-bg: #22252b;
 $tight-form-func-highlight-bg: rgb(40, 43, 49);
 
-$modal-backdrop-bg: rgba(201, 209, 217, 0.08);
+$modal-backdrop-bg: rgba(204, 204, 220, 0.08);
 $code-tag-bg: $dark-1;
 $code-tag-border: $dark-9;
 
@@ -170,7 +170,7 @@ $scrollbarBorder: black;
 // Tables
 // -------------------------
 $table-bg-accent: #22252b;
-$table-border: rgba(201, 209, 217, 0.15);
+$table-border: rgba(204, 204, 220, 0.15);
 $table-bg-odd: rgb(28, 31, 35);
 $table-bg-hover: rgb(35, 38, 42);
 
@@ -209,14 +209,14 @@ $btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
 // Forms
 // -------------------------
 $input-bg: #111217;
-$input-bg-disabled: rgba(201, 209, 217, 0.07);
+$input-bg-disabled: rgba(204, 204, 220, 0.07);
 
-$input-color: rgb(201, 209, 217);
-$input-border-color: rgba(201, 209, 217, 0.15);
+$input-color: rgb(204, 204, 220);
+$input-border-color: rgba(204, 204, 220, 0.15);
 $input-box-shadow: none;
 $input-border-focus: #6E9FFF;
 $input-box-shadow-focus: #6E9FFF !default;
-$input-color-placeholder: rgba(201, 209, 217, 0.40);
+$input-color-placeholder: rgba(204, 204, 220, 0.40);
 $input-label-bg: #22252b;
 $input-color-select-arrow: $white;
 
@@ -231,9 +231,9 @@ $typeahead-selected-color: $yellow;
 // Dropdowns
 // -------------------------
 $dropdownBackground: #181b1f;
-$dropdownBorder: rgba(201, 209, 217, 0.07);
-$dropdownDividerTop: rgba(201, 209, 217, 0.07);
-$dropdownDividerBottom: rgba(201, 209, 217, 0.07);
+$dropdownBorder: rgba(204, 204, 220, 0.07);
+$dropdownDividerTop: rgba(204, 204, 220, 0.07);
+$dropdownDividerBottom: rgba(204, 204, 220, 0.07);
 $dropdownShadow: 0px 10px 20px rgb(20,20,20);
 
 $dropdownLinkColor: $link-color;
@@ -258,12 +258,12 @@ $side-menu-border: none;
 $side-menu-item-hover-bg: #22252b;
 $side-menu-shadow: 0 0 30px #111;
 $side-menu-icon-color: #9fa7b3;
-$side-menu-header-color: rgb(201, 209, 217);
+$side-menu-header-color: rgb(204, 204, 220);
 
 // Menu dropdowns
 // -------------------------
 $menu-dropdown-bg: #181b1f;
-$menu-dropdown-hover-bg: rgba(201, 209, 217, 0.08);
+$menu-dropdown-hover-bg: rgba(204, 204, 220, 0.08);
 $menu-dropdown-shadow: 0px 10px 20px rgb(20,20,20);
 
 // Tabs
@@ -288,14 +288,14 @@ $tooltipLinkColor: $link-color;
 $graph-tooltip-bg: $dark-1;
 
 $tooltipBackground: #22252b;
-$tooltipColor: rgb(201, 209, 217);
+$tooltipColor: rgb(204, 204, 220);
 $tooltipArrowColor: #22252b;
 $tooltipBackgroundError: #D10E5C;
 $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.75);
 
 $popover-bg: #181b1f;
-$popover-color: rgb(201, 209, 217);
-$popover-border-color: rgba(201, 209, 217, 0.07);
+$popover-color: rgb(204, 204, 220);
+$popover-border-color: rgba(204, 204, 220, 0.07);
 $popover-header-bg: #22252b;
 $popover-shadow: 0px 10px 20px rgb(20,20,20);
 
@@ -332,14 +332,14 @@ $json-explorer-url-color: #027bff;
 
 // Changelog and diff
 // -------------------------
-$diff-label-bg: rgba(201, 209, 217, 0.08);
+$diff-label-bg: rgba(204, 204, 220, 0.08);
 $diff-label-fg: $white;
 
 $diff-group-bg: #22252b;
 $diff-arrow-color: $white;
 
 $diff-json-bg: #22252b;
-$diff-json-fg: rgb(201, 209, 217);
+$diff-json-fg: rgb(204, 204, 220);
 
 $diff-json-added: $blue-shade;
 $diff-json-deleted: $red-shade;