Skip to content

N
nexpie-grafana-theme
Commit 7be18e1a by ijin08
Options

changed some more color variables to use variables

parent 72e269c8
Showing with 101 additions and 89 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.bodyColor};
$text-color: $gray-4; $text-color: ${theme.colors.textColor};
$text-color-strong: $white; $text-color-strong: ${theme.colors.textColorStrong};
$text-color-weak: $gray-2; $text-color-weak: ${theme.colors.textColorWeak};
$text-color-faint: $dark-10; $text-color-faint: ${theme.colors.textColorFaint};
$text-color-emphasis: $gray-5; $text-color-emphasis: ${theme.colors.textColorEmphasis};
$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.linkColor};
$link-color-disabled: darken($link-color, 30%); $link-color-disabled: ${theme.colors.linkColorDisabled};
$link-hover-color: $white; $link-hover-color: ${theme.colors.linkColorHover};
$external-link-color: $blue-light; $external-link-color: ${theme.colors.linkColorExternal};
// 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.bodyColor};
$text-color: $gray-1; $text-color: ${theme.colors.textColor};
$text-color-strong: $dark-1; $text-color-strong: ${theme.colors.textColorStrong};
$text-color-weak: $gray-2; $text-color-weak: ${theme.colors.textColorWeak};
$text-color-faint: $gray-4; $text-color-faint: ${theme.colors.textColorFaint};
$text-color-emphasis: $dark-2; $text-color-emphasis: ${theme.colors.textColorEmphasis};
$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.linkColor};
$link-color-disabled: lighten($link-color, 30%); $link-color-disabled: ${theme.colors.linkColorDisabled};
$link-hover-color: darken($link-color, 20%); $link-hover-color: ${theme.colors.linkColorHover};
$external-link-color: $blue-shade; $external-link-color: ${theme.colors.linkColorExternal};
// 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',
......
packages/grafana-ui/src/themes/light.ts
...@@ -47,10 +47,14 @@ const lightTheme: GrafanaTheme = { ...@@ -47,10 +47,14 @@ 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',
......
packages/grafana-ui/src/types/theme.ts
...@@ -113,6 +113,10 @@ export interface GrafanaTheme extends GrafanaThemeCommons { ...@@ -113,6 +113,10 @@ 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;
......
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