From 05d5e796d76f5af73f7990f8571fe463a091acef Mon Sep 17 00:00:00 2001 From: ijin08 Date: Fri, 22 Feb 2019 08:33:07 +0100 Subject: [PATCH] removed color in color variables names --- .../src/themes/_variables.dark.scss.tmpl.ts | 20 ++++++++-------- .../src/themes/_variables.light.scss.tmpl.ts | 20 ++++++++-------- packages/grafana-ui/src/themes/dark.ts | 20 ++++++++-------- packages/grafana-ui/src/themes/light.ts | 20 ++++++++-------- packages/grafana-ui/src/types/theme.ts | 24 +++++++++++-------- 5 files changed, 54 insertions(+), 50 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 d6df6f51374..54c00f9237e 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -76,12 +76,12 @@ $critical: ${theme.colors.critical}; $body-bg: ${theme.colors.bodyBg}; $page-bg: ${theme.colors.pageBg}; -$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}; +$body-color: ${theme.colors.body}; +$text-color: ${theme.colors.text}; +$text-color-strong: ${theme.colors.textStrong}; +$text-color-weak: ${theme.colors.textWeak}; +$text-color-faint: ${theme.colors.textFaint}; +$text-color-emphasis: ${theme.colors.textEmphasis}; $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); $textShadow: none; @@ -99,10 +99,10 @@ $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black); // Links // ------------------------- -$link-color: ${theme.colors.linkColor}; -$link-color-disabled: ${theme.colors.linkColorDisabled}; -$link-hover-color: ${theme.colors.linkColorHover}; -$external-link-color: ${theme.colors.linkColorExternal}; +$link-color: ${theme.colors.link}; +$link-color-disabled: ${theme.colors.linkDisabled}; +$link-hover-color: ${theme.colors.linkHover}; +$external-link-color: ${theme.colors.linkExternal}; // Typography // ------------------------- 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 eb48ab5cc02..e90299f619c 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -68,12 +68,12 @@ $critical: ${theme.colors.critical}; $body-bg: ${theme.colors.bodyBg}; $page-bg: ${theme.colors.pageBg}; -$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}; +$body-color: ${theme.colors.body}; +$text-color: ${theme.colors.text}; +$text-color-strong: ${theme.colors.textStrong}; +$text-color-weak: ${theme.colors.textWeak}; +$text-color-faint: ${theme.colors.textFaint}; +$text-color-emphasis: ${theme.colors.textEmphasis}; $text-shadow-faint: none; @@ -85,10 +85,10 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); // Links // ------------------------- -$link-color: ${theme.colors.linkColor}; -$link-color-disabled: ${theme.colors.linkColorDisabled}; -$link-hover-color: ${theme.colors.linkColorHover}; -$external-link-color: ${theme.colors.linkColorExternal}; +$link-color: ${theme.colors.link}; +$link-color-disabled: ${theme.colors.linkDisabled}; +$link-hover-color: ${theme.colors.linkHover}; +$external-link-color: ${theme.colors.linkExternal}; // Typography // ------------------------- diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index 3e8057a4acd..1e424c97154 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -60,16 +60,16 @@ const darkTheme: GrafanaTheme = { critical: basicColors.redBase, bodyBg: basicColors.dark2, pageBg: basicColors.dark2, - bodyColor: basicColors.gray4, - textColor: basicColors.gray4, - textColorStrong: basicColors.white, - textColorWeak: basicColors.gray2, - textColorEmphasis: basicColors.gray5, - textColorFaint: basicColors.dark5, - linkColor: new tinycolor(basicColors.white).darken(11).toString(), - linkColorDisabled: new tinycolor(basicColors.white).darken(11).toString(), - linkColorHover: basicColors.white, - linkColorExternal: basicColors.blue, + body: basicColors.gray4, + text: basicColors.gray4, + textStrong: basicColors.white, + textWeak: basicColors.gray2, + textEmphasis: basicColors.gray5, + textFaint: basicColors.dark5, + link: new tinycolor(basicColors.white).darken(11).toString(), + linkDisabled: new tinycolor(basicColors.white).darken(11).toString(), + linkHover: basicColors.white, + linkExternal: basicColors.blue, headingColor: new tinycolor(basicColors.white).darken(11).toString(), }, background: { diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts index 2461505d507..a3994fc7458 100644 --- a/packages/grafana-ui/src/themes/light.ts +++ b/packages/grafana-ui/src/themes/light.ts @@ -61,16 +61,16 @@ const lightTheme: GrafanaTheme = { critical: basicColors.redShade, bodyBg: basicColors.gray7, pageBg: basicColors.gray7, - bodyColor: basicColors.gray1, - textColor: basicColors.gray1, - textColorStrong: basicColors.dark2, - textColorWeak: basicColors.gray2, - textColorEmphasis: basicColors.gray5, - textColorFaint: basicColors.dark4, - linkColor: basicColors.gray1, - linkColorDisabled: new tinycolor(basicColors.gray1).lighten(30).toString(), - linkColorHover: new tinycolor(basicColors.gray1).darken(20).toString(), - linkColorExternal: basicColors.blueLight, + body: basicColors.gray1, + text: basicColors.gray1, + textStrong: basicColors.dark2, + textWeak: basicColors.gray2, + textEmphasis: basicColors.gray5, + textFaint: basicColors.dark4, + link: basicColors.gray1, + linkDisabled: new tinycolor(basicColors.gray1).lighten(30).toString(), + linkHover: new tinycolor(basicColors.gray1).darken(20).toString(), + linkExternal: basicColors.blueLight, headingColor: basicColors.gray1, }, background: { diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts index f7adbf80247..30f1bf4685b 100644 --- a/packages/grafana-ui/src/types/theme.ts +++ b/packages/grafana-ui/src/types/theme.ts @@ -123,19 +123,23 @@ export interface GrafanaTheme extends GrafanaThemeCommons { warn: 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 bodyBg: 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; }; }