Skip to content

N
nexpie-grafana-theme
Commit a9c5fe5b by ijin08
Options

updated colors in light, dark and theme files, in template file basic colors… 

updated colors in light, dark and theme files, in template file basic colors uses variables from dark/light files, also changed  to -basic in some files
parent 5f4f559d
Showing with 261 additions and 242 deletions
packages/grafana-ui/src/components/ValueMappingsEditor/_ValueMappingsEditor.scss
......@@ -17,7 +17,7 @@
align-items: center;
justify-content: center;
width: 36px;
background-color: $green;
background-color: $green-base;
}
.add-mapping-row-label {
......
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
......@@ -12,36 +12,35 @@ $theme-name: dark;
// New Colors
// -------------------------
$sapphire-faint: #041126;
$sapphire-light: #5794f2;
$sapphire-base: #3274d9;
$sapphire-shade: #1f60c4;
$lobster-base: #e02f44;
$lobster-shade: #c4162a;
$forest-light: #96d98d;
$green-base: #299c46;
$green-shade: #23843b;
$blue-faint: ${theme.colors.blueFaint};
$blue-light: ${theme.colors.blueLight};
$blue-base: ${theme.colors.blueBase};
$blue-shade: ${theme.colors.blueShade};
$red-base: ${theme.colors.redBase};
$red-shade: ${theme.colors.redShade};
$green-base: ${theme.colors.greenBase};
$green-shade: ${theme.colors.greenShade};
// Grays
// -------------------------
$black: #000;
$dark-1: #141414;
$dark-2: #161719;
$dark-3: #1f1f20;
$dark-4: #212124;
$dark-5: #222426;
$dark-6: #262628;
$dark-7: #292a2d;
$dark-8: #2f2f32;
$dark-9: #343436;
$dark-10: #424345;
$gray-1: #555555;
$gray-2: #8e8e8e;
$gray-3: #b3b3b3;
$gray-4: #d8d9da;
$gray-5: #ececec;
$gray-blue: #212327;
$black: ${theme.colors.black};
$dark-1: ${theme.colors.dark1};
$dark-2: ${theme.colors.dark2};
$dark-3: ${theme.colors.dark3};
$dark-4: ${theme.colors.dark4};
$dark-5: ${theme.colors.dark5};
$dark-6: ${theme.colors.dark6};
$dark-7: ${theme.colors.dark7};
$dark-8: ${theme.colors.dark8};
$dark-9:${theme.colors.dark9};
$dark-10: ${theme.colors.dark10};
$gray-1: ${theme.colors.gray1};
$gray-2: ${theme.colors.gray2};
$gray-3: ${theme.colors.gray3};
$gray-4: ${theme.colors.gray4};
$gray-5: ${theme.colors.gray5};
$gray-blue: ${theme.colors.grayBlue};
$input-black: #09090b;
$white: ${theme.colors.white};
......@@ -49,20 +48,19 @@ $white: ${theme.colors.white};
// Accent colors
// -------------------------
$blue: ${theme.colors.blue};
$green: #299c46;
$red: $lobster-base;
$yellow: #ecbb13;
$purple: #9933cc;
$variable: #32d1df;
$orange: #eb7b18;
$red: $red-base;
$yellow: ${theme.colors.yellow};
$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: $lobster-base;
$brand-danger: $red-base;
$query-red: $lobster-base;
$query-green: $forest-light;
$query-red: $red-base;
$query-green: #74e680;
$query-purple: #fe85fc;
$query-keyword: #66d9ef;
$query-orange: $orange;
......@@ -71,7 +69,7 @@ $query-orange: $orange;
// -------------------------
$online: $green-base;
$warn: #f79520;
$critical: $lobster-base;
$critical: $red-base;
// Scaffolding
// -------------------------
......@@ -104,7 +102,7 @@ $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
$link-color: darken($white, 11%);
$link-color-disabled: darken($link-color, 30%);
$link-hover-color: $white;
$external-link-color: $sapphire-light;
$external-link-color: $blue-light;
// Typography
// -------------------------
......@@ -164,8 +162,8 @@ $table-bg-hover: $dark-6;
// Buttons
// -------------------------
$btn-secondary-bg: $sapphire-base;
$btn-secondary-bg-hl: $sapphire-shade;
$btn-secondary-bg: $blue-base;
$btn-secondary-bg-hl: $blue-shade;
$btn-primary-bg: $green-base;
$btn-primary-bg-hl: $green-shade;
......@@ -173,8 +171,8 @@ $btn-primary-bg-hl: $green-shade;
$btn-success-bg: $green-base;
$btn-success-bg-hl: $green-shade;
$btn-danger-bg: $lobster-base;
$btn-danger-bg-hl: $lobster-shade;
$btn-danger-bg: $red-base;
$btn-danger-bg-hl: $red-shade;
$btn-inverse-bg: $dark-6;
$btn-inverse-bg-hl: lighten($dark-6, 4%);
......@@ -199,7 +197,7 @@ $input-color: $gray-4;
$input-border-color: $dark-6;
$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1);
$input-border-focus: $dark-6 !default;
$input-box-shadow-focus: $sapphire-light !default;
$input-box-shadow-focus: $blue-light !default;
$input-color-placeholder: $gray-1 !default;
$input-label-bg: $gray-blue;
$input-label-border-color: $dark-6;
......@@ -271,12 +269,12 @@ $toolbar-bg: $input-black;
// -------------------------
$warning-text-color: $warn;
$error-text-color: #e84d4d;
$success-text-color: $forest-light;
$success-text-color: #12d95a;
$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade);
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// popover
$popover-bg: $dark-2;
......@@ -305,7 +303,7 @@ $tooltipBackgroundError: $brand-danger;
$checkboxImageUrl: '../img/checkbox.png';
// info box
$info-box-border-color: $sapphire-base;
$info-box-border-color: $blue-base;
// footer
$footer-link-color: $gray-2;
......@@ -336,8 +334,8 @@ $diff-arrow-color: $white;
$diff-json-bg: $dark-9;
$diff-json-fg: $gray-5;
$diff-json-added: $sapphire-shade;
$diff-json-deleted: $lobster-shade;
$diff-json-added: $blue-shade;
$diff-json-deleted: $red-shade;
$diff-json-old: #a04338;
$diff-json-new: #457740;
......@@ -371,18 +369,18 @@ $panel-editor-shadow: 0 0 20px black;
$panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
$panel-editor-viz-item-shadow: 0 0 8px $dark-10;
$panel-editor-viz-item-border: 1px solid $dark-10;
$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
$panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
$panel-editor-viz-item-border-hover: 1px solid $blue-light;
$panel-editor-viz-item-bg: $input-black;
$panel-editor-tabs-line-color: #e3e3e3;
$panel-editor-viz-item-bg-hover: darken($sapphire-base, 46%);
$panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
$panel-options-group-border: none;
$panel-options-group-header-bg: $gray-blue;
$panel-grid-placeholder-bg: $sapphire-faint;
$panel-grid-placeholder-shadow: 0 0 4px $sapphire-shade;
$panel-grid-placeholder-bg: $blue-faint;
$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
// logs
$logs-color-unkown: $gray-2;
......
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
......@@ -12,58 +12,56 @@ $theme-name: light;
// New Colors
// -------------------------
$sapphire-faint: #f5f9ff;
$sapphire-light: #5794f2;
$sapphire-base: #3274d9;
$sapphire-shade: #1f60c4;
$lobster-base: #e02f44;
$lobster-shade: #c4162a;
$green-base: #3eb15b;
$green-shade: #369b4f;
$purple-shade: #8f3bb8;
$yellow-base: #f2cc0c;
$blue-faint: ${theme.colors.blueFaint};
$blue-light: ${theme.colors.blueLight};
$blue-base: ${theme.colors.blueBase};
$blue-shade: ${theme.colors.blueShade};
$red-base: ${theme.colors.redBase};
$red-shade: ${theme.colors.redShade};
$green-base: ${theme.colors.greenBase};
$green-shade: ${theme.colors.greenShade};
// Grays
// -------------------------
$black: #000;
$dark-2: #1e2028;
$dark-5: #41444b;
$gray-1: #52545c;
$gray-2: #767980;
$gray-3: #acb6bf;
$gray-4: #c7d0d9;
$gray-5: #dde4ed;
$gray-6: #e9edf2;
$gray-7: #f7f8fa;
$black: ${theme.colors.black};
$dark-1: ${theme.colors.dark1};
$dark-2: ${theme.colors.dark2};
$gray-1: ${theme.colors.gray1};
$gray-2: ${theme.colors.gray2};
$gray-3: ${theme.colors.gray3};
$gray-4: ${theme.colors.gray4};
$gray-5: ${theme.colors.gray5};
$gray-6: ${theme.colors.gray6};
$gray-7: ${theme.colors.gray7};
$white: ${theme.colors.white};
// Accent colors
// -------------------------
$blue: ${theme.colors.blue};
$green: #3aa655;
$red: $lobster-base;
$yellow: #ff851b;
$orange: #ff7941;
$purple: #9954bb;
$variable: $purple-shade;
$red: $red-base;
$yellow: ${theme.colors.yellow};
$orange: ${theme.colors.orange};
$purple: ${theme.colors.purple};
$variable: ${theme.colors.variable};
$brand-primary: $orange;
$brand-success: $green;
$brand-success: $green-base;
$brand-warning: $orange;
$brand-danger: $lobster-base;
$brand-danger: $red-base;
$query-red: $lobster-base;
$query-green: $green;
$query-red: $red-base;
$query-green: $green-base;
$query-purple: $purple;
$query-orange: $orange;
$query-keyword: $sapphire-base;
$query-keyword: $blue-base;
// Status colors
// -------------------------
$online: $green-shade;
$warn: #f79520;
$critical: $lobster-shade;
$critical: $red-shade;
// Scaffolding
// -------------------------
......@@ -72,10 +70,10 @@ $page-bg: $gray-7;
$body-color: $gray-1;
$text-color: $gray-1;
$text-color-strong: $dark-2;
$text-color-strong: $dark-1;
$text-color-weak: $gray-2;
$text-color-faint: $gray-4;
$text-color-emphasis: $dark-5;
$text-color-emphasis: $dark-2;
$text-shadow-faint: none;
......@@ -90,7 +88,7 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
$link-color: $gray-1;
$link-color-disabled: lighten($link-color, 30%);
$link-hover-color: darken($link-color, 20%);
$external-link-color: $sapphire-shade;
$external-link-color: $blue-shade;
// Typography
// -------------------------
......@@ -153,14 +151,14 @@ $table-bg-hover: $gray-5;
$btn-primary-bg: $green-base;
$btn-primary-bg-hl: $green-shade;
$btn-secondary-bg: $sapphire-base;
$btn-secondary-bg-hl: $sapphire-shade;
$btn-secondary-bg: $blue-base;
$btn-secondary-bg-hl: $blue-shade;
$btn-success-bg: $green-base;
$btn-success-bg-hl: $green-shade;
$btn-danger-bg: $lobster-base;
$btn-danger-bg-hl: $lobster-shade;
$btn-danger-bg: $red-base;
$btn-danger-bg-hl: $red-shade;
$btn-inverse-bg: $gray-5;
$btn-inverse-bg-hl: darken($gray-5, 5%);
......@@ -182,11 +180,11 @@ $btn-drag-image: '../img/grab_light.svg';
$input-bg: $white;
$input-bg-disabled: $gray-5;
$input-color: $dark-5;
$input-color: $dark-2;
$input-border-color: $gray-5;
$input-box-shadow: none;
$input-border-focus: $gray-5 !default;
$input-box-shadow-focus: $sapphire-light !default;
$input-box-shadow-focus: $blue-light !default;
$input-color-placeholder: $gray-4 !default;
$input-label-bg: $gray-5;
$input-label-border-color: $gray-5;
......@@ -211,7 +209,7 @@ $dropdownBorder: $gray-4;
$dropdownDividerTop: $gray-6;
$dropdownDividerBottom: $white;
$dropdownLinkColor: $dark-5;
$dropdownLinkColor: $dark-2;
$dropdownLinkColorHover: $link-color;
$dropdownLinkColorActive: $link-color;
......@@ -235,7 +233,7 @@ $navbar-button-border: $gray-4;
// Sidemenu
// -------------------------
$side-menu-bg: $dark-2;
$side-menu-bg: $dark-1;
$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
$side-menu-item-hover-bg: $gray-1;
$side-menu-shadow: 5px 0px 10px -5px $gray-1;
......@@ -257,13 +255,13 @@ $toolbar-bg: white;
// Form states and alerts
// -------------------------
$warning-text-color: lighten($orange, 10%);
$error-text-color: $lobster-shade;
$success-text-color: lighten($green, 10%);
$error-text-color: $red-shade;
$success-text-color: lighten($green-base, 10%);
$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade);
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// popover
$popover-bg: $page-bg;
......@@ -292,39 +290,39 @@ $tooltipBackgroundError: $brand-danger;
$checkboxImageUrl: '../img/checkbox_white.png';
// info box
$info-box-border-color: $sapphire-base;
$info-box-border-color: $blue-base;
// footer
$footer-link-color: $gray-3;
$footer-link-hover: $dark-5;
$footer-link-hover: $dark-2;
// json explorer
$json-explorer-default-color: black;
$json-explorer-string-color: green;
$json-explorer-number-color: $sapphire-base;
$json-explorer-boolean-color: $lobster-base;
$json-explorer-number-color: $blue-base;
$json-explorer-boolean-color: $red-base;
$json-explorer-null-color: #855a00;
$json-explorer-undefined-color: rgb(202, 11, 105);
$json-explorer-function-color: #ff20ed;
$json-explorer-rotate-time: 100ms;
$json-explorer-toggler-opacity: 0.6;
$json-explorer-bracket-color: $sapphire-base;
$json-explorer-bracket-color: $blue-base;
$json-explorer-key-color: #00008b;
$json-explorer-url-color: $sapphire-base;
$json-explorer-url-color: $blue-base;
// Changelog and diff
// -------------------------
$diff-label-bg: $gray-7;
$diff-label-fg: $gray-2;
$diff-arrow-color: $dark-5;
$diff-arrow-color: $dark-2;
$diff-group-bg: $gray-6;
$diff-json-bg: $gray-6;
$diff-json-fg: $gray-1;
$diff-json-added: $sapphire-shade;
$diff-json-deleted: $lobster-shade;
$diff-json-added: $blue-shade;
$diff-json-deleted: $red-shade;
$diff-json-old: #5a372a;
$diff-json-new: #664e33;
......@@ -343,7 +341,7 @@ $switch-bg: $white;
$switch-slider-color: $gray-7;
$switch-slider-off-bg: $gray-5;
$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400);
$switch-slider-shadow: 0 0 3px $dark-5;
$switch-slider-shadow: 0 0 3px $dark-2;
//Checkbox
// -------------------------
......@@ -358,18 +356,18 @@ $panel-editor-shadow: 0px 0px 8px $gray-3;
$panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
$panel-editor-viz-item-shadow: 0 0 4px $gray-3;
$panel-editor-viz-item-border: 1px solid $gray-3;
$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
$panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
$panel-editor-viz-item-border-hover: 1px solid $blue-light;
$panel-editor-viz-item-bg: $white;
$panel-editor-tabs-line-color: $dark-5;
$panel-editor-tabs-line-color: $dark-2;
$panel-editor-viz-item-bg-hover: lighten($sapphire-base, 45%);
$panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
$panel-options-group-border: none;
$panel-options-group-header-bg: $gray-5;
$panel-grid-placeholder-bg: $sapphire-faint;
$panel-grid-placeholder-shadow: 0 0 4px $sapphire-light;
$panel-grid-placeholder-bg: $blue-faint;
$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
// logs
$logs-color-unkown: $gray-5;
......
packages/grafana-ui/src/themes/dark.ts
......@@ -6,25 +6,34 @@ const basicColors = {
black: '#000000',
white: '#ffffff',
dark1: '#141414',
dark2: '#1f1f20',
dark3: '#262628',
dark4: '#333333',
dark5: '#444444',
dark2: '#161719',
dark3: '#1f1f20',
dark4: '#212124',
dark5: '#222426',
dark6: '#262628',
dark7: '#292a2d',
dark8: '#2f2f32',
dark9: '#343436',
dark10: '#424345',
gray1: '#555555',
gray2: '#8e8e8e',
gray3: '#b3b3b3',
gray4: '#d8d9da',
gray5: '#ececec',
gray6: '#f4f5f8',
gray7: '#fbfbfb',
gray6: '#f4f5f8', // not used in dark theme
gray7: '#fbfbfb', // not used in dark theme
grayBlue: '#212327',
blueBase: '#3274d9',
blueShade: '#1f60c4',
blueLight: '#5794f2',
blueFaint: '#041126',
redBase: '#e02f44',
redShade: '#c4162a',
greenBase: '#299c46',
greenShade: '#23843b',
blue: '#33b5e5',
blueDark: '#005f81',
blueLight: '#00a8e6', // not used in dark theme
green: '#299c46',
red: '#d44a3a',
yellow: '#ecbb13',
pink: '#ff4444',
purple: '#9933cc',
variable: '#32d1df',
orange: '#eb7b18',
......@@ -37,14 +46,14 @@ const darkTheme: GrafanaTheme = {
colors: {
...basicColors,
inputBlack: '#09090b',
queryRed: '#e24d42',
queryRed: basicColors.redBase,
queryGreen: '#74e680',
queryPurple: '#fe85fc',
queryKeyword: '#66d9ef',
queryOrange: 'eb7b18',
online: '#10a345',
queryOrange: basicColors.orange,
online: basicColors.greenBase,
warn: '#f79520',
critical: '#ed2e18',
critical: basicColors.redBase,
bodyBg: '#171819',
pageBg: '#161719',
bodyColor: basicColors.gray4,
......@@ -61,8 +70,8 @@ const darkTheme: GrafanaTheme = {
},
background: {
dropdown: basicColors.dark3,
scrollbar: '#aeb5df',
scrollbar2: '#3a3a3a',
scrollbar: basicColors.dark9,
scrollbar2: basicColors.dark9,
},
};
......
packages/grafana-ui/src/themes/light.ts
......@@ -5,11 +5,16 @@ import { GrafanaTheme, GrafanaThemeType } from '../types/theme';
const basicColors = {
black: '#000000',
white: '#ffffff',
dark1: '#13161d',
dark2: '#1e2028',
dark3: '#303133',
dark4: '#35373f',
dark5: '#41444b',
dark1: '#1e2028',
dark2: '#41444b',
dark3: '#303133', // not used in light theme
dark4: '#35373f', // not used in light theme
dark5: '#41444b', // not used in light theme
dark6: '#41444b', // not used in light theme
dark7: '#41444b', // not used in light theme
dark8: '#2f2f32', // not used in light theme
dark9: '#343436', // not used in light theme
dark10: '#424345', // not used in light theme
gray1: '#52545c',
gray2: '#767980',
gray3: '#acb6bf',
......@@ -18,15 +23,19 @@ const basicColors = {
gray6: '#e9edf2',
gray7: '#f7f8fa',
grayBlue: '#212327', // not used in light theme
blueBase: '#3274d9',
blueShade: '#1f60c4',
blueLight: '#5794f2',
blueFaint: '#f5f9ff',
redBase: '#e02f44',
redShade: '#c4162a',
greenBase: '#3eb15b',
greenShade: '#369b4f',
blue: '#0083b3',
blueDark: '#005f81',
blueLight: '#00a8e6',
green: '#3aa655',
red: '#d44939',
yellow: '#ff851b',
pink: '#e671b8',
purple: '#9954bb',
variable: '#0083b3',
variable: '#007580',
orange: '#ff7941',
};
......@@ -39,13 +48,13 @@ const lightTheme: GrafanaTheme = {
variable: basicColors.blue,
inputBlack: '#09090b',
queryRed: basicColors.red,
queryGreen: basicColors.green,
queryGreen: basicColors.greenBase,
queryPurple: basicColors.purple,
queryKeyword: basicColors.blue,
queryOrange: basicColors.orange,
online: '#01a64f',
online: basicColors.greenShade,
warn: '#f79520',
critical: '#ec2128',
critical: basicColors.redShade,
bodyBg: basicColors.gray7,
pageBg: basicColors.gray7,
bodyColor: basicColors.gray1,
......
packages/grafana-ui/src/types/theme.ts
......@@ -78,6 +78,11 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
dark3: string;
dark4: string;
dark5: string;
dark6: string;
dark7: string;
dark8: string;
dark9: string;
dark10: string;
gray1: string;
gray2: string;
gray3: string;
......@@ -90,12 +95,16 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
// Accent colors
blue: string;
blueBase: string;
blueShade: string;
blueLight: string;
blueDark: string;
green: string;
blueFaint: string;
redBase: string;
redShade: string;
greenBase: string;
greenShade: string;
red: string;
yellow: string;
pink: string;
purple: string;
variable: string;
orange: string;
......
public/sass/_variables.dark.generated.scss
......@@ -15,19 +15,18 @@ $theme-name: dark;
// New Colors
// -------------------------
$sapphire-faint: #041126;
$sapphire-light: #5794f2;
$sapphire-base: #3274d9;
$sapphire-shade: #1f60c4;
$lobster-base: #e02f44;
$lobster-shade: #c4162a;
$forest-light: #96d98d;
$blue-faint: #041126;
$blue-light: #5794f2;
$blue-base: #3274d9;
$blue-shade: #1f60c4;
$red-base: #e02f44;
$red-shade: #c4162a;
$green-base: #299c46;
$green-shade: #23843b;
// Grays
// -------------------------
$black: #000;
$black: #000000;
$dark-1: #141414;
$dark-2: #161719;
$dark-3: #1f1f20;
......@@ -52,20 +51,19 @@ $white: #ffffff;
// Accent colors
// -------------------------
$blue: #33b5e5;
$green: #299c46;
$red: $lobster-base;
$red: $red-base;
$yellow: #ecbb13;
$orange: #eb7b18;
$purple: #9933cc;
$variable: #32d1df;
$orange: #eb7b18;
$brand-primary: $orange;
$brand-success: $green-base;
$brand-warning: $brand-primary;
$brand-danger: $lobster-base;
$brand-danger: $red-base;
$query-red: $lobster-base;
$query-green: $forest-light;
$query-red: $red-base;
$query-green: #74e680;
$query-purple: #fe85fc;
$query-keyword: #66d9ef;
$query-orange: $orange;
......@@ -74,7 +72,7 @@ $query-orange: $orange;
// -------------------------
$online: $green-base;
$warn: #f79520;
$critical: $lobster-base;
$critical: $red-base;
// Scaffolding
// -------------------------
......@@ -107,7 +105,7 @@ $edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
$link-color: darken($white, 11%);
$link-color-disabled: darken($link-color, 30%);
$link-hover-color: $white;
$external-link-color: $sapphire-light;
$external-link-color: $blue-light;
// Typography
// -------------------------
......@@ -167,8 +165,8 @@ $table-bg-hover: $dark-6;
// Buttons
// -------------------------
$btn-secondary-bg: $sapphire-base;
$btn-secondary-bg-hl: $sapphire-shade;
$btn-secondary-bg: $blue-base;
$btn-secondary-bg-hl: $blue-shade;
$btn-primary-bg: $green-base;
$btn-primary-bg-hl: $green-shade;
......@@ -176,8 +174,8 @@ $btn-primary-bg-hl: $green-shade;
$btn-success-bg: $green-base;
$btn-success-bg-hl: $green-shade;
$btn-danger-bg: $lobster-base;
$btn-danger-bg-hl: $lobster-shade;
$btn-danger-bg: $red-base;
$btn-danger-bg-hl: $red-shade;
$btn-inverse-bg: $dark-6;
$btn-inverse-bg-hl: lighten($dark-6, 4%);
......@@ -202,7 +200,7 @@ $input-color: $gray-4;
$input-border-color: $dark-6;
$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1);
$input-border-focus: $dark-6 !default;
$input-box-shadow-focus: $sapphire-light !default;
$input-box-shadow-focus: $blue-light !default;
$input-color-placeholder: $gray-1 !default;
$input-label-bg: $gray-blue;
$input-label-border-color: $dark-6;
......@@ -274,12 +272,12 @@ $toolbar-bg: $input-black;
// -------------------------
$warning-text-color: $warn;
$error-text-color: #e84d4d;
$success-text-color: $forest-light;
$success-text-color: #12d95a;
$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade);
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// popover
$popover-bg: $dark-2;
......@@ -308,7 +306,7 @@ $tooltipBackgroundError: $brand-danger;
$checkboxImageUrl: '../img/checkbox.png';
// info box
$info-box-border-color: $sapphire-base;
$info-box-border-color: $blue-base;
// footer
$footer-link-color: $gray-2;
......@@ -339,8 +337,8 @@ $diff-arrow-color: $white;
$diff-json-bg: $dark-9;
$diff-json-fg: $gray-5;
$diff-json-added: $sapphire-shade;
$diff-json-deleted: $lobster-shade;
$diff-json-added: $blue-shade;
$diff-json-deleted: $red-shade;
$diff-json-old: #a04338;
$diff-json-new: #457740;
......@@ -374,18 +372,18 @@ $panel-editor-shadow: 0 0 20px black;
$panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
$panel-editor-viz-item-shadow: 0 0 8px $dark-10;
$panel-editor-viz-item-border: 1px solid $dark-10;
$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
$panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
$panel-editor-viz-item-border-hover: 1px solid $blue-light;
$panel-editor-viz-item-bg: $input-black;
$panel-editor-tabs-line-color: #e3e3e3;
$panel-editor-viz-item-bg-hover: darken($sapphire-base, 46%);
$panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
$panel-options-group-border: none;
$panel-options-group-header-bg: $gray-blue;
$panel-grid-placeholder-bg: $sapphire-faint;
$panel-grid-placeholder-shadow: 0 0 4px $sapphire-shade;
$panel-grid-placeholder-bg: $blue-faint;
$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
// logs
$logs-color-unkown: $gray-2;
......
public/sass/_variables.light.generated.scss
......@@ -15,22 +15,21 @@ $theme-name: light;
// New Colors
// -------------------------
$sapphire-faint: #f5f9ff;
$sapphire-light: #5794f2;
$sapphire-base: #3274d9;
$sapphire-shade: #1f60c4;
$lobster-base: #e02f44;
$lobster-shade: #c4162a;
$blue-faint: #f5f9ff;
$blue-light: #5794f2;
$blue-base: #3274d9;
$blue-shade: #1f60c4;
$red-base: #e02f44;
$red-shade: #c4162a;
$green-base: #3eb15b;
$green-shade: #369b4f;
$purple-shade: #8f3bb8;
$yellow-base: #f2cc0c;
// Grays
// -------------------------
$black: #000;
$dark-2: #1e2028;
$dark-5: #41444b;
$black: #000000;
$dark-1: #1e2028;
$dark-2: #41444b;
$gray-1: #52545c;
$gray-2: #767980;
$gray-3: #acb6bf;
......@@ -44,29 +43,28 @@ $white: #ffffff;
// Accent colors
// -------------------------
$blue: #0083b3;
$green: #3aa655;
$red: $lobster-base;
$red: $red-base;
$yellow: #ff851b;
$orange: #ff7941;
$purple: #9954bb;
$variable: $purple-shade;
$variable: #0083b3;
$brand-primary: $orange;
$brand-success: $green;
$brand-success: $green-base;
$brand-warning: $orange;
$brand-danger: $lobster-base;
$brand-danger: $red-base;
$query-red: $lobster-base;
$query-green: $green;
$query-red: $red-base;
$query-green: $green-base;
$query-purple: $purple;
$query-orange: $orange;
$query-keyword: $sapphire-base;
$query-keyword: $blue-base;
// Status colors
// -------------------------
$online: $green-shade;
$warn: #f79520;
$critical: $lobster-shade;
$critical: $red-shade;
// Scaffolding
// -------------------------
......@@ -75,10 +73,10 @@ $page-bg: $gray-7;
$body-color: $gray-1;
$text-color: $gray-1;
$text-color-strong: $dark-2;
$text-color-strong: $dark-1;
$text-color-weak: $gray-2;
$text-color-faint: $gray-4;
$text-color-emphasis: $dark-5;
$text-color-emphasis: $dark-2;
$text-shadow-faint: none;
......@@ -93,7 +91,7 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
$link-color: $gray-1;
$link-color-disabled: lighten($link-color, 30%);
$link-hover-color: darken($link-color, 20%);
$external-link-color: $sapphire-shade;
$external-link-color: $blue-shade;
// Typography
// -------------------------
......@@ -156,14 +154,14 @@ $table-bg-hover: $gray-5;
$btn-primary-bg: $green-base;
$btn-primary-bg-hl: $green-shade;
$btn-secondary-bg: $sapphire-base;
$btn-secondary-bg-hl: $sapphire-shade;
$btn-secondary-bg: $blue-base;
$btn-secondary-bg-hl: $blue-shade;
$btn-success-bg: $green-base;
$btn-success-bg-hl: $green-shade;
$btn-danger-bg: $lobster-base;
$btn-danger-bg-hl: $lobster-shade;
$btn-danger-bg: $red-base;
$btn-danger-bg-hl: $red-shade;
$btn-inverse-bg: $gray-5;
$btn-inverse-bg-hl: darken($gray-5, 5%);
......@@ -185,11 +183,11 @@ $btn-drag-image: '../img/grab_light.svg';
$input-bg: $white;
$input-bg-disabled: $gray-5;
$input-color: $dark-5;
$input-color: $dark-2;
$input-border-color: $gray-5;
$input-box-shadow: none;
$input-border-focus: $gray-5 !default;
$input-box-shadow-focus: $sapphire-light !default;
$input-box-shadow-focus: $blue-light !default;
$input-color-placeholder: $gray-4 !default;
$input-label-bg: $gray-5;
$input-label-border-color: $gray-5;
......@@ -214,7 +212,7 @@ $dropdownBorder: $gray-4;
$dropdownDividerTop: $gray-6;
$dropdownDividerBottom: $white;
$dropdownLinkColor: $dark-5;
$dropdownLinkColor: $dark-2;
$dropdownLinkColorHover: $link-color;
$dropdownLinkColorActive: $link-color;
......@@ -238,7 +236,7 @@ $navbar-button-border: $gray-4;
// Sidemenu
// -------------------------
$side-menu-bg: $dark-2;
$side-menu-bg: $dark-1;
$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
$side-menu-item-hover-bg: $gray-1;
$side-menu-shadow: 5px 0px 10px -5px $gray-1;
......@@ -260,13 +258,13 @@ $toolbar-bg: white;
// Form states and alerts
// -------------------------
$warning-text-color: lighten($orange, 10%);
$error-text-color: $lobster-shade;
$success-text-color: lighten($green, 10%);
$error-text-color: $red-shade;
$success-text-color: lighten($green-base, 10%);
$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
$alert-error-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade);
$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade);
$alert-info-bg: linear-gradient(100deg, $sapphire-base, $sapphire-shade);
$alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
// popover
$popover-bg: $page-bg;
......@@ -295,39 +293,39 @@ $tooltipBackgroundError: $brand-danger;
$checkboxImageUrl: '../img/checkbox_white.png';
// info box
$info-box-border-color: $sapphire-base;
$info-box-border-color: $blue-base;
// footer
$footer-link-color: $gray-3;
$footer-link-hover: $dark-5;
$footer-link-hover: $dark-2;
// json explorer
$json-explorer-default-color: black;
$json-explorer-string-color: green;
$json-explorer-number-color: $sapphire-base;
$json-explorer-boolean-color: $lobster-base;
$json-explorer-number-color: $blue-base;
$json-explorer-boolean-color: $red-base;
$json-explorer-null-color: #855a00;
$json-explorer-undefined-color: rgb(202, 11, 105);
$json-explorer-function-color: #ff20ed;
$json-explorer-rotate-time: 100ms;
$json-explorer-toggler-opacity: 0.6;
$json-explorer-bracket-color: $sapphire-base;
$json-explorer-bracket-color: $blue-base;
$json-explorer-key-color: #00008b;
$json-explorer-url-color: $sapphire-base;
$json-explorer-url-color: $blue-base;
// Changelog and diff
// -------------------------
$diff-label-bg: $gray-7;
$diff-label-fg: $gray-2;
$diff-arrow-color: $dark-5;
$diff-arrow-color: $dark-2;
$diff-group-bg: $gray-6;
$diff-json-bg: $gray-6;
$diff-json-fg: $gray-1;
$diff-json-added: $sapphire-shade;
$diff-json-deleted: $lobster-shade;
$diff-json-added: $blue-shade;
$diff-json-deleted: $red-shade;
$diff-json-old: #5a372a;
$diff-json-new: #664e33;
......@@ -346,7 +344,7 @@ $switch-bg: $white;
$switch-slider-color: $gray-7;
$switch-slider-off-bg: $gray-5;
$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400);
$switch-slider-shadow: 0 0 3px $dark-5;
$switch-slider-shadow: 0 0 3px $dark-2;
//Checkbox
// -------------------------
......@@ -361,18 +359,18 @@ $panel-editor-shadow: 0px 0px 8px $gray-3;
$panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
$panel-editor-viz-item-shadow: 0 0 4px $gray-3;
$panel-editor-viz-item-border: 1px solid $gray-3;
$panel-editor-viz-item-shadow-hover: 0 0 4px $sapphire-light;
$panel-editor-viz-item-border-hover: 1px solid $sapphire-light;
$panel-editor-viz-item-shadow-hover: 0 0 4px $blue-light;
$panel-editor-viz-item-border-hover: 1px solid $blue-light;
$panel-editor-viz-item-bg: $white;
$panel-editor-tabs-line-color: $dark-5;
$panel-editor-tabs-line-color: $dark-2;
$panel-editor-viz-item-bg-hover: lighten($sapphire-base, 45%);
$panel-editor-viz-item-bg-hover: lighten($blue-base, 45%);
$panel-options-group-border: none;
$panel-options-group-header-bg: $gray-5;
$panel-grid-placeholder-bg: $sapphire-faint;
$panel-grid-placeholder-shadow: 0 0 4px $sapphire-light;
$panel-grid-placeholder-bg: $blue-faint;
$panel-grid-placeholder-shadow: 0 0 4px $blue-light;
// logs
$logs-color-unkown: $gray-5;
......
public/sass/components/_gf-form.scss
......@@ -415,7 +415,7 @@ select.gf-form-input ~ .gf-form-help-icon {
padding: 1.5rem;
background-color: $empty-list-cta-bg;
margin-bottom: 2rem;
border-top: 3px solid $green;
border-top: 3px solid $green-base;
}
.cta-form__close {
......
public/sass/components/_modals.scss
......@@ -98,7 +98,7 @@
.confirm-modal-icon {
padding-top: 41px;
font-size: 280%;
color: $green;
color: $green-base;
padding-bottom: 20px;
}
......
public/sass/components/_search.scss
......@@ -83,7 +83,7 @@
}
.search-filter-box__header {
border-bottom: 1px solid $dark-5;
border-bottom: 1px solid $hr-border-color;
margin-bottom: $spacer * 1.5;
}
......
public/sass/pages/_login.scss
......@@ -196,7 +196,7 @@ select:-webkit-autofill:focus {
white-space: nowrap;
padding-top: 3px;
color: darken($text-color, 20%);
border-top: 3px solid $red;
border-top: 3px solid $red-base;
&.password-strength-ok {
width: 40%;
......@@ -205,7 +205,7 @@ select:-webkit-autofill:focus {
&.password-strength-good {
width: 100%;
border-top: 3px solid lighten($green, 10%);
border-top: 3px solid lighten($green-base, 10%);
}
}
......
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