mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge pull request #15574 from grafana/more-color-variables-use-variables
Changed some more color variables to use variables
This commit is contained in:
commit
bc2a798158
@ -54,34 +54,34 @@ $orange: ${theme.colors.orange};
|
|||||||
$purple: ${theme.colors.purple};
|
$purple: ${theme.colors.purple};
|
||||||
$variable: ${theme.colors.variable};
|
$variable: ${theme.colors.variable};
|
||||||
|
|
||||||
$brand-primary: $orange;
|
$brand-primary: ${theme.colors.brandPrimary};
|
||||||
$brand-success: $green-base;
|
$brand-success: ${theme.colors.brandSuccess};
|
||||||
$brand-warning: $brand-primary;
|
$brand-warning: ${theme.colors.brandWarning};
|
||||||
$brand-danger: $red-base;
|
$brand-danger: ${theme.colors.brandDanger};
|
||||||
|
|
||||||
$query-red: $red-base;
|
$query-red: ${theme.colors.queryRed};
|
||||||
$query-green: #74e680;
|
$query-green: ${theme.colors.queryGreen};
|
||||||
$query-purple: #fe85fc;
|
$query-purple: ${theme.colors.queryPurple};
|
||||||
$query-keyword: #66d9ef;
|
$query-orange: ${theme.colors.orange};
|
||||||
$query-orange: $orange;
|
$query-keyword: ${theme.colors.queryKeyword};
|
||||||
|
|
||||||
// Status colors
|
// Status colors
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$online: $green-base;
|
$online: ${theme.colors.online};
|
||||||
$warn: #f79520;
|
$warn: ${theme.colors.warn};
|
||||||
$critical: $red-base;
|
$critical: ${theme.colors.critical};
|
||||||
|
|
||||||
// Scaffolding
|
// Scaffolding
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$body-bg: ${theme.colors.bodyBg};
|
$body-bg: ${theme.colors.bodyBg};
|
||||||
$page-bg: ${theme.colors.pageBg};
|
$page-bg: ${theme.colors.pageBg};
|
||||||
|
|
||||||
$body-color: $gray-4;
|
$body-color: ${theme.colors.body};
|
||||||
$text-color: $gray-4;
|
$text-color: ${theme.colors.text};
|
||||||
$text-color-strong: $white;
|
$text-color-strong: ${theme.colors.textStrong};
|
||||||
$text-color-weak: $gray-2;
|
$text-color-weak: ${theme.colors.textWeak};
|
||||||
$text-color-faint: $dark-10;
|
$text-color-faint: ${theme.colors.textFaint};
|
||||||
$text-color-emphasis: $gray-5;
|
$text-color-emphasis: ${theme.colors.textEmphasis};
|
||||||
|
|
||||||
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
|
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
|
||||||
$textShadow: none;
|
$textShadow: none;
|
||||||
@ -99,14 +99,14 @@ $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
|
|||||||
|
|
||||||
// Links
|
// Links
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$link-color: darken($white, 11%);
|
$link-color: ${theme.colors.link};
|
||||||
$link-color-disabled: darken($link-color, 30%);
|
$link-color-disabled: ${theme.colors.linkDisabled};
|
||||||
$link-hover-color: $white;
|
$link-hover-color: ${theme.colors.linkHover};
|
||||||
$external-link-color: $blue-light;
|
$external-link-color: ${theme.colors.linkExternal};
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$headings-color: darken($white, 11%);
|
$headings-color: ${theme.colors.headingColor};
|
||||||
$abbr-border-color: $gray-2 !default;
|
$abbr-border-color: $gray-2 !default;
|
||||||
$text-muted: $text-color-weak;
|
$text-muted: $text-color-weak;
|
||||||
|
|
||||||
|
@ -46,34 +46,34 @@ $orange: ${theme.colors.orange};
|
|||||||
$purple: ${theme.colors.purple};
|
$purple: ${theme.colors.purple};
|
||||||
$variable: ${theme.colors.variable};
|
$variable: ${theme.colors.variable};
|
||||||
|
|
||||||
$brand-primary: $orange;
|
$brand-primary: ${theme.colors.brandPrimary};
|
||||||
$brand-success: $green-base;
|
$brand-success: ${theme.colors.brandSuccess};
|
||||||
$brand-warning: $orange;
|
$brand-warning: ${theme.colors.brandWarning};
|
||||||
$brand-danger: $red-base;
|
$brand-danger: ${theme.colors.brandDanger};
|
||||||
|
|
||||||
$query-red: $red-base;
|
$query-red: ${theme.colors.queryRed};
|
||||||
$query-green: $green-base;
|
$query-green: ${theme.colors.queryGreen};
|
||||||
$query-purple: $purple;
|
$query-purple: ${theme.colors.queryPurple};
|
||||||
$query-orange: $orange;
|
$query-orange: ${theme.colors.orange};
|
||||||
$query-keyword: $blue-base;
|
$query-keyword: ${theme.colors.queryKeyword};
|
||||||
|
|
||||||
// Status colors
|
// Status colors
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$online: $green-shade;
|
$online: ${theme.colors.online};
|
||||||
$warn: #f79520;
|
$warn: ${theme.colors.warn};
|
||||||
$critical: $red-shade;
|
$critical: ${theme.colors.critical};
|
||||||
|
|
||||||
// Scaffolding
|
// Scaffolding
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$body-bg: ${theme.colors.bodyBg};
|
$body-bg: ${theme.colors.bodyBg};
|
||||||
$page-bg: ${theme.colors.pageBg};
|
$page-bg: ${theme.colors.pageBg};
|
||||||
|
|
||||||
$body-color: $gray-1;
|
$body-color: ${theme.colors.body};
|
||||||
$text-color: $gray-1;
|
$text-color: ${theme.colors.text};
|
||||||
$text-color-strong: $dark-1;
|
$text-color-strong: ${theme.colors.textStrong};
|
||||||
$text-color-weak: $gray-2;
|
$text-color-weak: ${theme.colors.textWeak};
|
||||||
$text-color-faint: $gray-4;
|
$text-color-faint: ${theme.colors.textFaint};
|
||||||
$text-color-emphasis: $dark-2;
|
$text-color-emphasis: ${theme.colors.textEmphasis};
|
||||||
|
|
||||||
$text-shadow-faint: none;
|
$text-shadow-faint: none;
|
||||||
|
|
||||||
@ -85,14 +85,14 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
|
|||||||
|
|
||||||
// Links
|
// Links
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$link-color: $gray-1;
|
$link-color: ${theme.colors.link};
|
||||||
$link-color-disabled: lighten($link-color, 30%);
|
$link-color-disabled: ${theme.colors.linkDisabled};
|
||||||
$link-hover-color: darken($link-color, 20%);
|
$link-hover-color: ${theme.colors.linkHover};
|
||||||
$external-link-color: $blue-shade;
|
$external-link-color: ${theme.colors.linkExternal};
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$headings-color: $text-color;
|
$headings-color: ${theme.colors.headingColor};
|
||||||
$abbr-border-color: $gray-2 !default;
|
$abbr-border-color: $gray-2 !default;
|
||||||
$text-muted: $text-color-weak;
|
$text-muted: $text-color-weak;
|
||||||
|
|
||||||
|
@ -46,6 +46,10 @@ const darkTheme: GrafanaTheme = {
|
|||||||
colors: {
|
colors: {
|
||||||
...basicColors,
|
...basicColors,
|
||||||
inputBlack: '#09090b',
|
inputBlack: '#09090b',
|
||||||
|
brandPrimary: basicColors.orange,
|
||||||
|
brandSuccess: basicColors.greenBase,
|
||||||
|
brandWarning: basicColors.orange,
|
||||||
|
brandDanger: basicColors.redBase,
|
||||||
queryRed: basicColors.redBase,
|
queryRed: basicColors.redBase,
|
||||||
queryGreen: '#74e680',
|
queryGreen: '#74e680',
|
||||||
queryPurple: '#fe85fc',
|
queryPurple: '#fe85fc',
|
||||||
@ -56,16 +60,16 @@ const darkTheme: GrafanaTheme = {
|
|||||||
critical: basicColors.redBase,
|
critical: basicColors.redBase,
|
||||||
bodyBg: basicColors.dark2,
|
bodyBg: basicColors.dark2,
|
||||||
pageBg: basicColors.dark2,
|
pageBg: basicColors.dark2,
|
||||||
bodyColor: basicColors.gray4,
|
body: basicColors.gray4,
|
||||||
textColor: basicColors.gray4,
|
text: basicColors.gray4,
|
||||||
textColorStrong: basicColors.white,
|
textStrong: basicColors.white,
|
||||||
textColorWeak: basicColors.gray2,
|
textWeak: basicColors.gray2,
|
||||||
textColorEmphasis: basicColors.gray5,
|
textEmphasis: basicColors.gray5,
|
||||||
textColorFaint: basicColors.dark5,
|
textFaint: basicColors.dark5,
|
||||||
linkColor: new tinycolor(basicColors.white).darken(11).toString(),
|
link: new tinycolor(basicColors.white).darken(11).toString(),
|
||||||
linkColorDisabled: new tinycolor(basicColors.white).darken(11).toString(),
|
linkDisabled: new tinycolor(basicColors.white).darken(11).toString(),
|
||||||
linkColorHover: basicColors.white,
|
linkHover: basicColors.white,
|
||||||
linkColorExternal: basicColors.blue,
|
linkExternal: basicColors.blue,
|
||||||
headingColor: new tinycolor(basicColors.white).darken(11).toString(),
|
headingColor: new tinycolor(basicColors.white).darken(11).toString(),
|
||||||
},
|
},
|
||||||
background: {
|
background: {
|
||||||
|
@ -47,26 +47,30 @@ const lightTheme: GrafanaTheme = {
|
|||||||
...basicColors,
|
...basicColors,
|
||||||
variable: basicColors.blue,
|
variable: basicColors.blue,
|
||||||
inputBlack: '#09090b',
|
inputBlack: '#09090b',
|
||||||
queryRed: basicColors.red,
|
brandPrimary: basicColors.orange,
|
||||||
|
brandSuccess: basicColors.greenBase,
|
||||||
|
brandWarning: basicColors.orange,
|
||||||
|
brandDanger: basicColors.redBase,
|
||||||
|
queryRed: basicColors.redBase,
|
||||||
queryGreen: basicColors.greenBase,
|
queryGreen: basicColors.greenBase,
|
||||||
queryPurple: basicColors.purple,
|
queryPurple: basicColors.purple,
|
||||||
queryKeyword: basicColors.blue,
|
queryKeyword: basicColors.blueBase,
|
||||||
queryOrange: basicColors.orange,
|
queryOrange: basicColors.orange,
|
||||||
online: basicColors.greenShade,
|
online: basicColors.greenShade,
|
||||||
warn: '#f79520',
|
warn: '#f79520',
|
||||||
critical: basicColors.redShade,
|
critical: basicColors.redShade,
|
||||||
bodyBg: basicColors.gray7,
|
bodyBg: basicColors.gray7,
|
||||||
pageBg: basicColors.gray7,
|
pageBg: basicColors.gray7,
|
||||||
bodyColor: basicColors.gray1,
|
body: basicColors.gray1,
|
||||||
textColor: basicColors.gray1,
|
text: basicColors.gray1,
|
||||||
textColorStrong: basicColors.dark2,
|
textStrong: basicColors.dark2,
|
||||||
textColorWeak: basicColors.gray2,
|
textWeak: basicColors.gray2,
|
||||||
textColorEmphasis: basicColors.gray5,
|
textEmphasis: basicColors.gray5,
|
||||||
textColorFaint: basicColors.dark4,
|
textFaint: basicColors.dark4,
|
||||||
linkColor: basicColors.gray1,
|
link: basicColors.gray1,
|
||||||
linkColorDisabled: new tinycolor(basicColors.gray1).lighten(30).toString(),
|
linkDisabled: new tinycolor(basicColors.gray1).lighten(30).toString(),
|
||||||
linkColorHover: new tinycolor(basicColors.gray1).darken(20).toString(),
|
linkHover: new tinycolor(basicColors.gray1).darken(20).toString(),
|
||||||
linkColorExternal: basicColors.blueLight,
|
linkExternal: basicColors.blueLight,
|
||||||
headingColor: basicColors.gray1,
|
headingColor: basicColors.gray1,
|
||||||
},
|
},
|
||||||
background: {
|
background: {
|
||||||
|
@ -113,25 +113,33 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
|
|||||||
queryPurple: string;
|
queryPurple: string;
|
||||||
queryKeyword: string;
|
queryKeyword: string;
|
||||||
queryOrange: string;
|
queryOrange: string;
|
||||||
|
brandPrimary: string;
|
||||||
|
brandSuccess: string;
|
||||||
|
brandWarning: string;
|
||||||
|
brandDanger: string;
|
||||||
|
|
||||||
// Status colors
|
// Status colors
|
||||||
online: string;
|
online: string;
|
||||||
warn: string;
|
warn: string;
|
||||||
critical: string;
|
critical: string;
|
||||||
|
|
||||||
|
// Link colors
|
||||||
|
link: string;
|
||||||
|
linkDisabled: string;
|
||||||
|
linkHover: string;
|
||||||
|
linkExternal: string;
|
||||||
|
|
||||||
|
// Text colors
|
||||||
|
body: string;
|
||||||
|
text: string;
|
||||||
|
textStrong: string;
|
||||||
|
textWeak: string;
|
||||||
|
textFaint: string;
|
||||||
|
textEmphasis: string;
|
||||||
|
|
||||||
// TODO: move to background section
|
// TODO: move to background section
|
||||||
bodyBg: string;
|
bodyBg: string;
|
||||||
pageBg: string;
|
pageBg: string;
|
||||||
bodyColor: string;
|
|
||||||
textColor: string;
|
|
||||||
textColorStrong: string;
|
|
||||||
textColorWeak: string;
|
|
||||||
textColorFaint: string;
|
|
||||||
textColorEmphasis: string;
|
|
||||||
linkColor: string;
|
|
||||||
linkColorDisabled: string;
|
|
||||||
linkColorHover: string;
|
|
||||||
linkColorExternal: string;
|
|
||||||
headingColor: string;
|
headingColor: string;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -57,34 +57,34 @@ $orange: #eb7b18;
|
|||||||
$purple: #9933cc;
|
$purple: #9933cc;
|
||||||
$variable: #32d1df;
|
$variable: #32d1df;
|
||||||
|
|
||||||
$brand-primary: $orange;
|
$brand-primary: #eb7b18;
|
||||||
$brand-success: $green-base;
|
$brand-success: #299c46;
|
||||||
$brand-warning: $brand-primary;
|
$brand-warning: #eb7b18;
|
||||||
$brand-danger: $red-base;
|
$brand-danger: #e02f44;
|
||||||
|
|
||||||
$query-red: $red-base;
|
$query-red: #e02f44;
|
||||||
$query-green: #74e680;
|
$query-green: #74e680;
|
||||||
$query-purple: #fe85fc;
|
$query-purple: #fe85fc;
|
||||||
|
$query-orange: #eb7b18;
|
||||||
$query-keyword: #66d9ef;
|
$query-keyword: #66d9ef;
|
||||||
$query-orange: $orange;
|
|
||||||
|
|
||||||
// Status colors
|
// Status colors
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$online: $green-base;
|
$online: #299c46;
|
||||||
$warn: #f79520;
|
$warn: #f79520;
|
||||||
$critical: $red-base;
|
$critical: #e02f44;
|
||||||
|
|
||||||
// Scaffolding
|
// Scaffolding
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$body-bg: #161719;
|
$body-bg: #161719;
|
||||||
$page-bg: #161719;
|
$page-bg: #161719;
|
||||||
|
|
||||||
$body-color: $gray-4;
|
$body-color: #d8d9da;
|
||||||
$text-color: $gray-4;
|
$text-color: #d8d9da;
|
||||||
$text-color-strong: $white;
|
$text-color-strong: #ffffff;
|
||||||
$text-color-weak: $gray-2;
|
$text-color-weak: #8e8e8e;
|
||||||
$text-color-faint: $dark-10;
|
$text-color-faint: #222426;
|
||||||
$text-color-emphasis: $gray-5;
|
$text-color-emphasis: #ececec;
|
||||||
|
|
||||||
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
|
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
|
||||||
$textShadow: none;
|
$textShadow: none;
|
||||||
@ -102,14 +102,14 @@ $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
|
|||||||
|
|
||||||
// Links
|
// Links
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$link-color: darken($white, 11%);
|
$link-color: #e3e3e3;
|
||||||
$link-color-disabled: darken($link-color, 30%);
|
$link-color-disabled: #e3e3e3;
|
||||||
$link-hover-color: $white;
|
$link-hover-color: #ffffff;
|
||||||
$external-link-color: $blue-light;
|
$external-link-color: #33b5e5;
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$headings-color: darken($white, 11%);
|
$headings-color: #e3e3e3;
|
||||||
$abbr-border-color: $gray-2 !default;
|
$abbr-border-color: $gray-2 !default;
|
||||||
$text-muted: $text-color-weak;
|
$text-muted: $text-color-weak;
|
||||||
|
|
||||||
|
@ -49,34 +49,34 @@ $orange: #ff7941;
|
|||||||
$purple: #9954bb;
|
$purple: #9954bb;
|
||||||
$variable: #0083b3;
|
$variable: #0083b3;
|
||||||
|
|
||||||
$brand-primary: $orange;
|
$brand-primary: #ff7941;
|
||||||
$brand-success: $green-base;
|
$brand-success: #3eb15b;
|
||||||
$brand-warning: $orange;
|
$brand-warning: #ff7941;
|
||||||
$brand-danger: $red-base;
|
$brand-danger: #e02f44;
|
||||||
|
|
||||||
$query-red: $red-base;
|
$query-red: #e02f44;
|
||||||
$query-green: $green-base;
|
$query-green: #3eb15b;
|
||||||
$query-purple: $purple;
|
$query-purple: #9954bb;
|
||||||
$query-orange: $orange;
|
$query-orange: #ff7941;
|
||||||
$query-keyword: $blue-base;
|
$query-keyword: #3274d9;
|
||||||
|
|
||||||
// Status colors
|
// Status colors
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$online: $green-shade;
|
$online: #369b4f;
|
||||||
$warn: #f79520;
|
$warn: #f79520;
|
||||||
$critical: $red-shade;
|
$critical: #c4162a;
|
||||||
|
|
||||||
// Scaffolding
|
// Scaffolding
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$body-bg: #f7f8fa;
|
$body-bg: #f7f8fa;
|
||||||
$page-bg: #f7f8fa;
|
$page-bg: #f7f8fa;
|
||||||
|
|
||||||
$body-color: $gray-1;
|
$body-color: #52545c;
|
||||||
$text-color: $gray-1;
|
$text-color: #52545c;
|
||||||
$text-color-strong: $dark-1;
|
$text-color-strong: #41444b;
|
||||||
$text-color-weak: $gray-2;
|
$text-color-weak: #767980;
|
||||||
$text-color-faint: $gray-4;
|
$text-color-faint: #35373f;
|
||||||
$text-color-emphasis: $dark-2;
|
$text-color-emphasis: #dde4ed;
|
||||||
|
|
||||||
$text-shadow-faint: none;
|
$text-shadow-faint: none;
|
||||||
|
|
||||||
@ -88,14 +88,14 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
|
|||||||
|
|
||||||
// Links
|
// Links
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$link-color: $gray-1;
|
$link-color: #52545c;
|
||||||
$link-color-disabled: lighten($link-color, 30%);
|
$link-color-disabled: #9ea0a9;
|
||||||
$link-hover-color: darken($link-color, 20%);
|
$link-hover-color: #222326;
|
||||||
$external-link-color: $blue-shade;
|
$external-link-color: #5794f2;
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
// -------------------------
|
// -------------------------
|
||||||
$headings-color: $text-color;
|
$headings-color: #52545c;
|
||||||
$abbr-border-color: $gray-2 !default;
|
$abbr-border-color: $gray-2 !default;
|
||||||
$text-muted: $text-color-weak;
|
$text-muted: $text-color-weak;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user