From 7be18e1a084007d5e9b17889cd6ca47a79e2cedf Mon Sep 17 00:00:00 2001 From: ijin08 Date: Thu, 21 Feb 2019 15:05:17 +0100 Subject: [PATCH] changed some more color variables to use variables --- .../src/themes/_variables.dark.scss.tmpl.ts | 46 +++++++++---------- .../src/themes/_variables.light.scss.tmpl.ts | 46 +++++++++---------- packages/grafana-ui/src/themes/dark.ts | 4 ++ packages/grafana-ui/src/themes/light.ts | 8 +++- packages/grafana-ui/src/types/theme.ts | 4 ++ public/sass/_variables.dark.generated.scss | 38 +++++++-------- public/sass/_variables.light.generated.scss | 44 +++++++++--------- 7 files changed, 101 insertions(+), 89 deletions(-) diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index 3a2d6db458c..d6df6f51374 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -54,34 +54,34 @@ $orange: ${theme.colors.orange}; $purple: ${theme.colors.purple}; $variable: ${theme.colors.variable}; -$brand-primary: $orange; -$brand-success: $green-base; -$brand-warning: $brand-primary; -$brand-danger: $red-base; +$brand-primary: ${theme.colors.brandPrimary}; +$brand-success: ${theme.colors.brandSuccess}; +$brand-warning: ${theme.colors.brandWarning}; +$brand-danger: ${theme.colors.brandDanger}; -$query-red: $red-base; -$query-green: #74e680; -$query-purple: #fe85fc; -$query-keyword: #66d9ef; -$query-orange: $orange; +$query-red: ${theme.colors.queryRed}; +$query-green: ${theme.colors.queryGreen}; +$query-purple: ${theme.colors.queryPurple}; +$query-orange: ${theme.colors.orange}; +$query-keyword: ${theme.colors.queryKeyword}; // Status colors // ------------------------- -$online: $green-base; -$warn: #f79520; -$critical: $red-base; +$online: ${theme.colors.online}; +$warn: ${theme.colors.warn}; +$critical: ${theme.colors.critical}; // Scaffolding // ------------------------- $body-bg: ${theme.colors.bodyBg}; $page-bg: ${theme.colors.pageBg}; -$body-color: $gray-4; -$text-color: $gray-4; -$text-color-strong: $white; -$text-color-weak: $gray-2; -$text-color-faint: $dark-10; -$text-color-emphasis: $gray-5; +$body-color: ${theme.colors.bodyColor}; +$text-color: ${theme.colors.textColor}; +$text-color-strong: ${theme.colors.textColorStrong}; +$text-color-weak: ${theme.colors.textColorWeak}; +$text-color-faint: ${theme.colors.textColorFaint}; +$text-color-emphasis: ${theme.colors.textColorEmphasis}; $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); $textShadow: none; @@ -99,14 +99,14 @@ $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black); // Links // ------------------------- -$link-color: darken($white, 11%); -$link-color-disabled: darken($link-color, 30%); -$link-hover-color: $white; -$external-link-color: $blue-light; +$link-color: ${theme.colors.linkColor}; +$link-color-disabled: ${theme.colors.linkColorDisabled}; +$link-hover-color: ${theme.colors.linkColorHover}; +$external-link-color: ${theme.colors.linkColorExternal}; // Typography // ------------------------- -$headings-color: darken($white, 11%); +$headings-color: ${theme.colors.headingColor}; $abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 1b017b7eb0d..eb48ab5cc02 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -46,34 +46,34 @@ $orange: ${theme.colors.orange}; $purple: ${theme.colors.purple}; $variable: ${theme.colors.variable}; -$brand-primary: $orange; -$brand-success: $green-base; -$brand-warning: $orange; -$brand-danger: $red-base; +$brand-primary: ${theme.colors.brandPrimary}; +$brand-success: ${theme.colors.brandSuccess}; +$brand-warning: ${theme.colors.brandWarning}; +$brand-danger: ${theme.colors.brandDanger}; -$query-red: $red-base; -$query-green: $green-base; -$query-purple: $purple; -$query-orange: $orange; -$query-keyword: $blue-base; +$query-red: ${theme.colors.queryRed}; +$query-green: ${theme.colors.queryGreen}; +$query-purple: ${theme.colors.queryPurple}; +$query-orange: ${theme.colors.orange}; +$query-keyword: ${theme.colors.queryKeyword}; // Status colors // ------------------------- -$online: $green-shade; -$warn: #f79520; -$critical: $red-shade; +$online: ${theme.colors.online}; +$warn: ${theme.colors.warn}; +$critical: ${theme.colors.critical}; // Scaffolding // ------------------------- $body-bg: ${theme.colors.bodyBg}; $page-bg: ${theme.colors.pageBg}; -$body-color: $gray-1; -$text-color: $gray-1; -$text-color-strong: $dark-1; -$text-color-weak: $gray-2; -$text-color-faint: $gray-4; -$text-color-emphasis: $dark-2; +$body-color: ${theme.colors.bodyColor}; +$text-color: ${theme.colors.textColor}; +$text-color-strong: ${theme.colors.textColorStrong}; +$text-color-weak: ${theme.colors.textColorWeak}; +$text-color-faint: ${theme.colors.textColorFaint}; +$text-color-emphasis: ${theme.colors.textColorEmphasis}; $text-shadow-faint: none; @@ -85,14 +85,14 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); // Links // ------------------------- -$link-color: $gray-1; -$link-color-disabled: lighten($link-color, 30%); -$link-hover-color: darken($link-color, 20%); -$external-link-color: $blue-shade; +$link-color: ${theme.colors.linkColor}; +$link-color-disabled: ${theme.colors.linkColorDisabled}; +$link-hover-color: ${theme.colors.linkColorHover}; +$external-link-color: ${theme.colors.linkColorExternal}; // Typography // ------------------------- -$headings-color: $text-color; +$headings-color: ${theme.colors.headingColor}; $abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index 7c3e81a7d35..3e8057a4acd 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -46,6 +46,10 @@ const darkTheme: GrafanaTheme = { colors: { ...basicColors, inputBlack: '#09090b', + brandPrimary: basicColors.orange, + brandSuccess: basicColors.greenBase, + brandWarning: basicColors.orange, + brandDanger: basicColors.redBase, queryRed: basicColors.redBase, queryGreen: '#74e680', queryPurple: '#fe85fc', diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts index 7e8f6300d84..2461505d507 100644 --- a/packages/grafana-ui/src/themes/light.ts +++ b/packages/grafana-ui/src/themes/light.ts @@ -47,10 +47,14 @@ const lightTheme: GrafanaTheme = { ...basicColors, variable: basicColors.blue, inputBlack: '#09090b', - queryRed: basicColors.red, + brandPrimary: basicColors.orange, + brandSuccess: basicColors.greenBase, + brandWarning: basicColors.orange, + brandDanger: basicColors.redBase, + queryRed: basicColors.redBase, queryGreen: basicColors.greenBase, queryPurple: basicColors.purple, - queryKeyword: basicColors.blue, + queryKeyword: basicColors.blueBase, queryOrange: basicColors.orange, online: basicColors.greenShade, warn: '#f79520', diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts index 01886afe3dc..f7adbf80247 100644 --- a/packages/grafana-ui/src/types/theme.ts +++ b/packages/grafana-ui/src/types/theme.ts @@ -113,6 +113,10 @@ export interface GrafanaTheme extends GrafanaThemeCommons { queryPurple: string; queryKeyword: string; queryOrange: string; + brandPrimary: string; + brandSuccess: string; + brandWarning: string; + brandDanger: string; // Status colors online: string; diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 3f1e2e4f314..a86134cf4bd 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -57,34 +57,34 @@ $orange: #eb7b18; $purple: #9933cc; $variable: #32d1df; -$brand-primary: $orange; -$brand-success: $green-base; -$brand-warning: $brand-primary; -$brand-danger: $red-base; +$brand-primary: #eb7b18; +$brand-success: #299c46; +$brand-warning: #eb7b18; +$brand-danger: #e02f44; -$query-red: $red-base; +$query-red: #e02f44; $query-green: #74e680; $query-purple: #fe85fc; +$query-orange: #eb7b18; $query-keyword: #66d9ef; -$query-orange: $orange; // Status colors // ------------------------- -$online: $green-base; +$online: #299c46; $warn: #f79520; -$critical: $red-base; +$critical: #e02f44; // Scaffolding // ------------------------- $body-bg: #161719; $page-bg: #161719; -$body-color: $gray-4; -$text-color: $gray-4; -$text-color-strong: $white; -$text-color-weak: $gray-2; -$text-color-faint: $dark-10; -$text-color-emphasis: $gray-5; +$body-color: #d8d9da; +$text-color: #d8d9da; +$text-color-strong: #ffffff; +$text-color-weak: #8e8e8e; +$text-color-faint: #222426; +$text-color-emphasis: #ececec; $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); $textShadow: none; @@ -102,14 +102,14 @@ $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black); // Links // ------------------------- -$link-color: darken($white, 11%); -$link-color-disabled: darken($link-color, 30%); -$link-hover-color: $white; -$external-link-color: $blue-light; +$link-color: #e3e3e3; +$link-color-disabled: #e3e3e3; +$link-hover-color: #ffffff; +$external-link-color: #33b5e5; // Typography // ------------------------- -$headings-color: darken($white, 11%); +$headings-color: #e3e3e3; $abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 4aea0a4f993..4d1dd96bccf 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -49,34 +49,34 @@ $orange: #ff7941; $purple: #9954bb; $variable: #0083b3; -$brand-primary: $orange; -$brand-success: $green-base; -$brand-warning: $orange; -$brand-danger: $red-base; +$brand-primary: #ff7941; +$brand-success: #3eb15b; +$brand-warning: #ff7941; +$brand-danger: #e02f44; -$query-red: $red-base; -$query-green: $green-base; -$query-purple: $purple; -$query-orange: $orange; -$query-keyword: $blue-base; +$query-red: #e02f44; +$query-green: #3eb15b; +$query-purple: #9954bb; +$query-orange: #ff7941; +$query-keyword: #3274d9; // Status colors // ------------------------- -$online: $green-shade; +$online: #369b4f; $warn: #f79520; -$critical: $red-shade; +$critical: #c4162a; // Scaffolding // ------------------------- $body-bg: #f7f8fa; $page-bg: #f7f8fa; -$body-color: $gray-1; -$text-color: $gray-1; -$text-color-strong: $dark-1; -$text-color-weak: $gray-2; -$text-color-faint: $gray-4; -$text-color-emphasis: $dark-2; +$body-color: #52545c; +$text-color: #52545c; +$text-color-strong: #41444b; +$text-color-weak: #767980; +$text-color-faint: #35373f; +$text-color-emphasis: #dde4ed; $text-shadow-faint: none; @@ -88,14 +88,14 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); // Links // ------------------------- -$link-color: $gray-1; -$link-color-disabled: lighten($link-color, 30%); -$link-hover-color: darken($link-color, 20%); -$external-link-color: $blue-shade; +$link-color: #52545c; +$link-color-disabled: #9ea0a9; +$link-hover-color: #222326; +$external-link-color: #5794f2; // Typography // ------------------------- -$headings-color: $text-color; +$headings-color: #52545c; $abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak;