Skip to content

N
nexpie-grafana-theme
Commit bc2a7981 by Torkel Ödegaard Committed by GitHub
Options

Merge pull request #15574 from grafana/more-color-variables-use-variables 

Changed some more color variables to use variables
parents 1ab548f4 05d5e796
Showing with 135 additions and 119 deletions
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
...@@ -54,34 +54,34 @@ $orange: ${theme.colors.orange}; ...@@ -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); ...@@ -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;
......
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
...@@ -46,34 +46,34 @@ $orange: ${theme.colors.orange}; ...@@ -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%); ...@@ -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;
......
packages/grafana-ui/src/themes/dark.ts
...@@ -46,6 +46,10 @@ const darkTheme: GrafanaTheme = { ...@@ -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 = { ...@@ -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: {
......
packages/grafana-ui/src/themes/light.ts
...@@ -47,26 +47,30 @@ const lightTheme: GrafanaTheme = { ...@@ -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: {
......
packages/grafana-ui/src/types/theme.ts
...@@ -113,25 +113,33 @@ export interface GrafanaTheme extends GrafanaThemeCommons { ...@@ -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;
}; };
} }
......
public/sass/_variables.dark.generated.scss
...@@ -57,34 +57,34 @@ $orange: #eb7b18; ...@@ -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); ...@@ -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;
......
public/sass/_variables.light.generated.scss
...@@ -49,34 +49,34 @@ $orange: #ff7941; ...@@ -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%); ...@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment