IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Theme: Change white base in dark theme (#35564)

Browse Source 
* Theme: Change white base in dark theme

* Updated

* Updated snapshots
This commit is contained in:
Torkel Ödegaard 2021-06-11 17:33:56 +02:00 committed by GitHub
parent 60f79a3548
commit f884381a68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 64 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-data/src/themes/createColors.ts
View File

@ -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)`,

2
packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`CustomScrollbar renders correctly 1`] = `
<div
className="css-ccjpr2"
className="css-12b7m5k"
style={
Object {
"height": "auto",

4
packages/grafana-ui/src/components/GraphNG/__snapshots__/utils.test.ts.snap
View File

@ -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)",

2
packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts
View File

@ -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)",

6
public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap
View File

@ -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]}

2
public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap
View File

@ -2,7 +2,7 @@
exports[`MetaInfoText should render component 1`] = `
<div
className="css-1g6mnuc"
className="css-mecrmv"
>
<Memo(MetaInfoItem)
key="0-label"

22
public/app/plugins/datasource/grafana-azure-monitor-datasource/components/__snapshots__/AnalyticsConfig.test.tsx.snap
View File

@ -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"
>

32
public/app/plugins/panel/barchart/__snapshots__/utils.test.ts.snap
View File

@ -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)",

56
public/sass/_variables.dark.generated.scss
View File

@ -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;