From f80c8cc06c3c127857b2716020c0490e5a590038 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 11 Feb 2019 10:32:17 +0100 Subject: [PATCH 01/25] v1 --- package.json | 10 +- .../src/themes/_variables.dark.scss.tmpl.ts | 387 +++++++++ packages/grafana-ui/src/themes/dark.ts | 2 +- public/sass/_variables.dark.scss | 765 +++++++++--------- scripts/cli/nodemon.json | 7 + scripts/cli/tsconfig.json | 6 + scripts/cli/watch.ts | 24 + yarn.lock | 92 ++- 8 files changed, 897 insertions(+), 396 deletions(-) create mode 100644 packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts create mode 100644 scripts/cli/nodemon.json create mode 100644 scripts/cli/tsconfig.json create mode 100644 scripts/cli/watch.ts diff --git a/package.json b/package.json index 5ac751ced3f..bd11bb3e431 100644 --- a/package.json +++ b/package.json @@ -17,12 +17,13 @@ "@babel/preset-react": "^7.0.0", "@babel/preset-typescript": "^7.1.0", "@rtsao/plugin-proposal-class-properties": "^7.0.1-patch.1", + "@types/chokidar": "^1.7.5", "@types/classnames": "^2.2.6", "@types/d3": "^4.10.1", "@types/enzyme": "^3.1.13", "@types/jest": "^23.3.2", "@types/jquery": "^1.10.35", - "@types/node": "^8.0.31", + "@types/node": "^10.12.24", "@types/react": "^16.7.6", "@types/react-dom": "^16.0.9", "@types/react-grid-layout": "^0.16.6", @@ -35,6 +36,7 @@ "babel-jest": "^23.6.0", "babel-loader": "^8.0.4", "babel-plugin-angularjs-annotate": "^0.9.0", + "chokidar": "^2.1.0", "clean-webpack-plugin": "^0.1.19", "css-loader": "^0.28.7", "enzyme": "^3.6.0", @@ -69,6 +71,7 @@ "jest-date-mock": "^1.0.6", "lint-staged": "^6.0.0", "load-grunt-tasks": "3.5.2", + "log-timestamp": "^0.2.1", "mini-css-extract-plugin": "^0.4.0", "mocha": "^4.0.1", "monaco-editor": "^0.15.6", @@ -95,6 +98,7 @@ "systemjs-plugin-css": "^0.1.36", "ts-jest": "^23.10.4", "ts-loader": "^5.1.0", + "ts-node": "^8.0.2", "tslib": "^1.9.3", "tslint": "^5.8.0", "tslint-loader": "^3.5.3", @@ -120,7 +124,9 @@ "jest": "jest --notify --watch", "api-tests": "jest --notify --watch --config=tests/api/jest.js", "precommit": "grunt precommit", - "storybook": "cd packages/grafana-ui && yarn storybook" + "storybook": "cd packages/grafana-ui && yarn storybook", + "tmp": "nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run tmp:exec", + "tmp:exec": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/watch.ts" }, "husky": { "hooks": { diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts new file mode 100644 index 00000000000..327b783be3c --- /dev/null +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -0,0 +1,387 @@ +import { GrafanaTheme } from '../types'; + +export const darkThemeVarsTemplate = (theme: GrafanaTheme) => ` + // Global values + // -------------------------------------------------- + + $theme-name: dark; + + // Grays + // ------------------------- + $black: #000; + $dark-1: #141414; + $dark-2: #1f1f20; + $dark-3: #262628; + $dark-4: #333333; + $dark-5: #444444; + $gray-1: #555555; + $gray-2: #8e8e8e; + $gray-3: #b3b3b3; + $gray-4: #d8d9da; + $gray-5: #ececec; + $gray-7: #fbfbfb; + + $gray-blue: #212327; + $input-black: #09090b; + + $white: #fff; + + // Accent colors + // ------------------------- + $blue: ${theme.colors.blue}; + $blue-dark: #005f81; + $green: #299c46; + $red: #d44a3a; + $yellow: #ecbb13; + $purple: #9933cc; + $variable: #32d1df; + $orange: #eb7b18; + + $brand-primary: $orange; + $brand-success: $green; + $brand-warning: $brand-primary; + $brand-danger: $red; + + $query-red: #e24d42; + $query-green: #74e680; + $query-purple: #fe85fc; + $query-keyword: #66d9ef; + $query-orange: $orange; + + // Status colors + // ------------------------- + $online: #10a345; + $warn: #f79520; + $critical: #ed2e18; + + // Scaffolding + // ------------------------- + $body-bg: rgb(23, 24, 25); + $page-bg: rgb(22, 23, 25); + + $body-color: $gray-4; + $text-color: $gray-4; + $text-color-strong: $white; + $text-color-weak: $gray-2; + $text-color-faint: $dark-5; + $text-color-emphasis: $gray-5; + + $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); + $textShadow: none; + + // gradients + $brand-gradient: linear-gradient( + to right, + rgba(255, 213, 0, 0.7) 0%, + rgba(255, 68, 0, 0.7) 99%, + rgba(255, 68, 0, 0.7) 100% + ); + + $page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); + $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); + + // Links + // ------------------------- + $link-color: darken($white, 11%); + $link-color-disabled: darken($link-color, 30%); + $link-hover-color: $white; + $external-link-color: $blue; + + // Typography + // ------------------------- + $headings-color: darken($white, 11%); + $abbr-border-color: $gray-3 !default; + $text-muted: $text-color-weak; + + $hr-border-color: $dark-4; + + // Panel + // ------------------------- + $panel-bg: #212124; + $panel-border: solid 1px $dark-1; + $panel-header-hover-bg: $dark-4; + $panel-corner: $panel-bg; + + // page header + $page-header-bg: linear-gradient(90deg, #292a2d, black); + $page-header-shadow: inset 0px -4px 14px $dark-2; + $page-header-border-color: $dark-4; + + $divider-border-color: $gray-1; + + // Graphite Target Editor + $tight-form-bg: $dark-3; + $tight-form-func-bg: $dark-4; + $tight-form-func-highlight-bg: $dark-5; + + $modal-backdrop-bg: #353c42; + $code-tag-bg: $dark-1; + $code-tag-border: $dark-4; + + // cards + $card-background: linear-gradient(135deg, #2f2f32, #262628); + $card-background-hover: linear-gradient(135deg, #343436, #262628); + $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); + + // Lists + $list-item-bg: $card-background; + $list-item-hover-bg: lighten($gray-blue, 2%); + $list-item-link-color: $text-color; + $list-item-shadow: $card-shadow; + + $empty-list-cta-bg: $gray-blue; + + // Scrollbars + $scrollbarBackground: #404357; + $scrollbarBackground2: #3a3a3a; + $scrollbarBorder: black; + + // Tables + // ------------------------- + $table-bg: transparent; // overall background-color + $table-bg-accent: $dark-3; // for striping + $table-border: $dark-3; // table and cell border + + $table-bg-odd: $dark-2; + $table-bg-hover: $dark-3; + + // Buttons + // ------------------------- + $btn-primary-bg: #ff6600; + $btn-primary-bg-hl: #bc3e06; + + $btn-secondary-bg-hl: lighten($blue-dark, 5%); + $btn-secondary-bg: $blue-dark; + + $btn-success-bg: $green; + $btn-success-bg-hl: darken($green, 6%); + + $btn-warning-bg: $brand-warning; + $btn-warning-bg-hl: lighten($brand-warning, 8%); + + $btn-danger-bg: $red; + $btn-danger-bg-hl: darken($red, 8%); + + $btn-inverse-bg: $dark-3; + $btn-inverse-bg-hl: lighten($dark-3, 4%); + $btn-inverse-text-color: $link-color; + $btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1); + + $btn-link-color: $gray-3; + + $iconContainerBackground: $black; + + $btn-divider-left: $dark-4; + $btn-divider-right: $dark-2; + + $btn-drag-image: '../img/grab_dark.svg'; + + // Forms + // ------------------------- + $input-bg: $input-black; + $input-bg-disabled: $dark-3; + + $input-color: $gray-4; + $input-border-color: $dark-3; + $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); + $input-border-focus: $input-border-color; + $input-box-shadow-focus: rgba(102, 175, 233, 0.6); + $input-color-placeholder: $gray-1 !default; + $input-label-bg: $gray-blue; + $input-label-border-color: $dark-3; + $input-color-select-arrow: $white; + + // Input placeholder text color + $placeholderText: darken($text-color, 25%); + + // Search + $search-shadow: 0 0 30px 0 $black; + $search-filter-box-bg: $gray-blue; + + // Typeahead + $typeahead-shadow: 0 5px 10px 0 $black; + $typeahead-selected-bg: $dark-4; + $typeahead-selected-color: $yellow; + + // Dropdowns + // ------------------------- + $dropdownBackground: $dark-3; + $dropdownBorder: rgba(0, 0, 0, 0.2); + $dropdownDividerTop: transparent; + $dropdownDividerBottom: #444; + + $dropdownLinkColor: $text-color; + $dropdownLinkColorHover: $white; + $dropdownLinkColorActive: $white; + + $dropdownLinkBackgroundHover: $dark-4; + + // Horizontal forms & lists + // ------------------------- + $horizontalComponentOffset: 180px; + + // Navbar + // ------------------------- + $navbarHeight: 55px; + + $navbarBackground: $panel-bg; + $navbarBorder: 1px solid $dark-3; + $navbarShadow: 0 0 20px black; + + $navbarLinkColor: $gray-4; + + $navbarButtonBackground: $navbarBackground; + $navbarButtonBackgroundHighlight: $body-bg; + + $navbar-button-border: #2f2f32; + + // Sidemenu + // ------------------------- + $side-menu-bg: $black; + $side-menu-bg-mobile: $side-menu-bg; + $side-menu-item-hover-bg: $dark-2; + $side-menu-shadow: 0 0 20px black; + $side-menu-link-color: $link-color; + + // Menu dropdowns + // ------------------------- + $menu-dropdown-bg: $body-bg; + $menu-dropdown-hover-bg: $dark-2; + $menu-dropdown-shadow: 5px 5px 20px -5px $black; + + // Tabs + // ------------------------- + $tab-border-color: $dark-4; + + // Toolbar + $toolbar-bg: $input-black; + + // Form states and alerts + // ------------------------- + $warning-text-color: $warn; + $error-text-color: #e84d4d; + $success-text-color: #12d95a; + $info-text-color: $blue-dark; + + $alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); + $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); + $alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); + $alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); + + // popover + $popover-bg: $page-bg; + $popover-color: $text-color; + $popover-border-color: $dark-4; + $popover-shadow: 0 0 20px black; + + $popover-help-bg: $btn-secondary-bg; + $popover-help-color: $text-color; + + $popover-error-bg: $btn-danger-bg; + + // Tooltips and popovers + // ------------------------- + $tooltipColor: $popover-help-color; + $tooltipArrowWidth: 5px; + $tooltipLinkColor: $link-color; + $graph-tooltip-bg: $dark-1; + + $tooltipBackground: $black; + $tooltipColor: $gray-4; + $tooltipArrowColor: $tooltipBackground; + $tooltipBackgroundError: $brand-danger; + + // images + $checkboxImageUrl: '../img/checkbox.png'; + + // info box + $info-box-border-color: darken($blue, 12%); + + // footer + $footer-link-color: $gray-2; + $footer-link-hover: $gray-4; + + // json-explorer + $json-explorer-default-color: $text-color; + $json-explorer-string-color: #23d662; + $json-explorer-number-color: $variable; + $json-explorer-boolean-color: $variable; + $json-explorer-null-color: #eec97d; + $json-explorer-undefined-color: rgb(239, 143, 190); + $json-explorer-function-color: #fd48cb; + $json-explorer-rotate-time: 100ms; + $json-explorer-toggler-opacity: 0.6; + $json-explorer-bracket-color: #9494ff; + $json-explorer-key-color: #23a0db; + $json-explorer-url-color: #027bff; + + // Changelog and diff + // ------------------------- + $diff-label-bg: $dark-2; + $diff-label-fg: $white; + + $diff-group-bg: $dark-4; + $diff-arrow-color: $white; + + $diff-json-bg: $dark-4; + $diff-json-fg: $gray-5; + + $diff-json-added: #457740; + $diff-json-deleted: #a04338; + + $diff-json-old: #a04338; + $diff-json-new: #457740; + + $diff-json-changed-fg: $gray-5; + $diff-json-changed-num: $text-color; + + $diff-json-icon: $gray-7; + + //Submenu + $variable-option-bg: $blue-dark; + + //Switch Slider + // ------------------------- + $switch-bg: $input-bg; + $switch-slider-color: $dark-2; + $switch-slider-off-bg: $gray-1; + $switch-slider-on-bg: linear-gradient(90deg, $orange, $red); + $switch-slider-shadow: 0 0 3px black; + + //Checkbox + // ------------------------- + $checkbox-bg: $dark-1; + $checkbox-border: 1px solid $gray-1; + $checkbox-checked-bg: linear-gradient(0deg, $orange, $red); + $checkbox-color: $dark-1; + + //Panel Edit + // ------------------------- + $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-5; + $panel-editor-viz-item-border: 1px solid $dark-5; + $panel-editor-viz-item-shadow-hover: 0 0 4px $blue; + $panel-editor-viz-item-border-hover: 1px solid $blue; + $panel-editor-viz-item-bg: $input-black; + $panel-editor-tabs-line-color: #e3e3e3; + $panel-editor-viz-item-bg-hover: darken($blue, 47%); + + $panel-options-group-border: none; + $panel-options-group-header-bg: $gray-blue; + + $panel-grid-placeholder-bg: darken($blue, 47%); + $panel-grid-placeholder-shadow: 0 0 4px $blue; + + // logs + $logs-color-unkown: $gray-2; + + // toggle-group + $button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); + $button-toggle-group-btn-active-shadow: inset 0 0 4px $black; + $button-toggle-group-btn-seperator-border: 1px solid $page-bg; + + $vertical-resize-handle-bg: $dark-5; + $vertical-resize-handle-dots: $gray-1; +$vertical-resize-handle-dots-hover: $gray-2; +`; diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index deae022f63a..97a0d54db18 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -18,7 +18,7 @@ const basicColors = { gray6: '#f4f5f8', gray7: '#fbfbfb', grayBlue: '#212327', - blue: '#33b5e5', + blue: '#ff0000', blueDark: '#005f81', blueLight: '#00a8e6', // not used in dark theme green: '#299c46', diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 149a1247b8e..ce5ccfdf1f9 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -1,383 +1,384 @@ -// Global values -// -------------------------------------------------- - -$theme-name: dark; - -// Grays -// ------------------------- -$black: #000; -$dark-1: #141414; -$dark-2: #1f1f20; -$dark-3: #262628; -$dark-4: #333333; -$dark-5: #444444; -$gray-1: #555555; -$gray-2: #8e8e8e; -$gray-3: #b3b3b3; -$gray-4: #d8d9da; -$gray-5: #ececec; -$gray-7: #fbfbfb; - -$gray-blue: #212327; -$input-black: #09090b; - -$white: #fff; - -// Accent colors -// ------------------------- -$blue: #33b5e5; -$blue-dark: #005f81; -$green: #299c46; -$red: #d44a3a; -$yellow: #ecbb13; -$purple: #9933cc; -$variable: #32d1df; -$orange: #eb7b18; - -$brand-primary: $orange; -$brand-success: $green; -$brand-warning: $brand-primary; -$brand-danger: $red; - -$query-red: #e24d42; -$query-green: #74e680; -$query-purple: #fe85fc; -$query-keyword: #66d9ef; -$query-orange: $orange; - -// Status colors -// ------------------------- -$online: #10a345; -$warn: #f79520; -$critical: #ed2e18; - -// Scaffolding -// ------------------------- -$body-bg: rgb(23, 24, 25); -$page-bg: rgb(22, 23, 25); - -$body-color: $gray-4; -$text-color: $gray-4; -$text-color-strong: $white; -$text-color-weak: $gray-2; -$text-color-faint: $dark-5; -$text-color-emphasis: $gray-5; - -$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); -$textShadow: none; - -// gradients -$brand-gradient: linear-gradient( - to right, - rgba(255, 213, 0, 0.7) 0%, - rgba(255, 68, 0, 0.7) 99%, - rgba(255, 68, 0, 0.7) 100% -); - -$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); -$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); - -// Links -// ------------------------- -$link-color: darken($white, 11%); -$link-color-disabled: darken($link-color, 30%); -$link-hover-color: $white; -$external-link-color: $blue; - -// Typography -// ------------------------- -$headings-color: darken($white, 11%); -$abbr-border-color: $gray-3 !default; -$text-muted: $text-color-weak; - -$hr-border-color: $dark-4; - -// Panel -// ------------------------- -$panel-bg: #212124; -$panel-border: solid 1px $dark-1; -$panel-header-hover-bg: $dark-4; -$panel-corner: $panel-bg; - -// page header -$page-header-bg: linear-gradient(90deg, #292a2d, black); -$page-header-shadow: inset 0px -4px 14px $dark-2; -$page-header-border-color: $dark-4; - -$divider-border-color: $gray-1; - -// Graphite Target Editor -$tight-form-bg: $dark-3; -$tight-form-func-bg: $dark-4; -$tight-form-func-highlight-bg: $dark-5; - -$modal-backdrop-bg: #353c42; -$code-tag-bg: $dark-1; -$code-tag-border: $dark-4; - -// cards -$card-background: linear-gradient(135deg, #2f2f32, #262628); -$card-background-hover: linear-gradient(135deg, #343436, #262628); -$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); - -// Lists -$list-item-bg: $card-background; -$list-item-hover-bg: lighten($gray-blue, 2%); -$list-item-link-color: $text-color; -$list-item-shadow: $card-shadow; - -$empty-list-cta-bg: $gray-blue; - -// Scrollbars -$scrollbarBackground: #404357; -$scrollbarBackground2: #3a3a3a; -$scrollbarBorder: black; - -// Tables -// ------------------------- -$table-bg: transparent; // overall background-color -$table-bg-accent: $dark-3; // for striping -$table-border: $dark-3; // table and cell border - -$table-bg-odd: $dark-2; -$table-bg-hover: $dark-3; - -// Buttons -// ------------------------- -$btn-primary-bg: #ff6600; -$btn-primary-bg-hl: #bc3e06; - -$btn-secondary-bg-hl: lighten($blue-dark, 5%); -$btn-secondary-bg: $blue-dark; - -$btn-success-bg: $green; -$btn-success-bg-hl: darken($green, 6%); - -$btn-warning-bg: $brand-warning; -$btn-warning-bg-hl: lighten($brand-warning, 8%); - -$btn-danger-bg: $red; -$btn-danger-bg-hl: darken($red, 8%); - -$btn-inverse-bg: $dark-3; -$btn-inverse-bg-hl: lighten($dark-3, 4%); -$btn-inverse-text-color: $link-color; -$btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1); - -$btn-link-color: $gray-3; - -$iconContainerBackground: $black; - -$btn-divider-left: $dark-4; -$btn-divider-right: $dark-2; - -$btn-drag-image: '../img/grab_dark.svg'; - -// Forms -// ------------------------- -$input-bg: $input-black; -$input-bg-disabled: $dark-3; - -$input-color: $gray-4; -$input-border-color: $dark-3; -$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); -$input-border-focus: $input-border-color; -$input-box-shadow-focus: rgba(102, 175, 233, 0.6); -$input-color-placeholder: $gray-1 !default; -$input-label-bg: $gray-blue; -$input-label-border-color: $dark-3; -$input-color-select-arrow: $white; - -// Input placeholder text color -$placeholderText: darken($text-color, 25%); - -// Search -$search-shadow: 0 0 30px 0 $black; -$search-filter-box-bg: $gray-blue; - -// Typeahead -$typeahead-shadow: 0 5px 10px 0 $black; -$typeahead-selected-bg: $dark-4; -$typeahead-selected-color: $yellow; - -// Dropdowns -// ------------------------- -$dropdownBackground: $dark-3; -$dropdownBorder: rgba(0, 0, 0, 0.2); -$dropdownDividerTop: transparent; -$dropdownDividerBottom: #444; - -$dropdownLinkColor: $text-color; -$dropdownLinkColorHover: $white; -$dropdownLinkColorActive: $white; - -$dropdownLinkBackgroundHover: $dark-4; - -// Horizontal forms & lists -// ------------------------- -$horizontalComponentOffset: 180px; - -// Navbar -// ------------------------- -$navbarHeight: 55px; - -$navbarBackground: $panel-bg; -$navbarBorder: 1px solid $dark-3; -$navbarShadow: 0 0 20px black; - -$navbarLinkColor: $gray-4; - -$navbarButtonBackground: $navbarBackground; -$navbarButtonBackgroundHighlight: $body-bg; - -$navbar-button-border: #2f2f32; - -// Sidemenu -// ------------------------- -$side-menu-bg: $black; -$side-menu-bg-mobile: $side-menu-bg; -$side-menu-item-hover-bg: $dark-2; -$side-menu-shadow: 0 0 20px black; -$side-menu-link-color: $link-color; - -// Menu dropdowns -// ------------------------- -$menu-dropdown-bg: $body-bg; -$menu-dropdown-hover-bg: $dark-2; -$menu-dropdown-shadow: 5px 5px 20px -5px $black; - -// Tabs -// ------------------------- -$tab-border-color: $dark-4; - -// Toolbar -$toolbar-bg: $input-black; - -// Form states and alerts -// ------------------------- -$warning-text-color: $warn; -$error-text-color: #e84d4d; -$success-text-color: #12d95a; -$info-text-color: $blue-dark; - -$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); -$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); - -// popover -$popover-bg: $page-bg; -$popover-color: $text-color; -$popover-border-color: $dark-4; -$popover-shadow: 0 0 20px black; - -$popover-help-bg: $btn-secondary-bg; -$popover-help-color: $text-color; - -$popover-error-bg: $btn-danger-bg; - -// Tooltips and popovers -// ------------------------- -$tooltipColor: $popover-help-color; -$tooltipArrowWidth: 5px; -$tooltipLinkColor: $link-color; -$graph-tooltip-bg: $dark-1; - -$tooltipBackground: $black; -$tooltipColor: $gray-4; -$tooltipArrowColor: $tooltipBackground; -$tooltipBackgroundError: $brand-danger; - -// images -$checkboxImageUrl: '../img/checkbox.png'; - -// info box -$info-box-border-color: darken($blue, 12%); - -// footer -$footer-link-color: $gray-2; -$footer-link-hover: $gray-4; - -// json-explorer -$json-explorer-default-color: $text-color; -$json-explorer-string-color: #23d662; -$json-explorer-number-color: $variable; -$json-explorer-boolean-color: $variable; -$json-explorer-null-color: #eec97d; -$json-explorer-undefined-color: rgb(239, 143, 190); -$json-explorer-function-color: #fd48cb; -$json-explorer-rotate-time: 100ms; -$json-explorer-toggler-opacity: 0.6; -$json-explorer-bracket-color: #9494ff; -$json-explorer-key-color: #23a0db; -$json-explorer-url-color: #027bff; - -// Changelog and diff -// ------------------------- -$diff-label-bg: $dark-2; -$diff-label-fg: $white; - -$diff-group-bg: $dark-4; -$diff-arrow-color: $white; - -$diff-json-bg: $dark-4; -$diff-json-fg: $gray-5; - -$diff-json-added: #457740; -$diff-json-deleted: #a04338; - -$diff-json-old: #a04338; -$diff-json-new: #457740; - -$diff-json-changed-fg: $gray-5; -$diff-json-changed-num: $text-color; - -$diff-json-icon: $gray-7; - -//Submenu -$variable-option-bg: $blue-dark; - -//Switch Slider -// ------------------------- -$switch-bg: $input-bg; -$switch-slider-color: $dark-2; -$switch-slider-off-bg: $gray-1; -$switch-slider-on-bg: linear-gradient(90deg, $orange, $red); -$switch-slider-shadow: 0 0 3px black; - -//Checkbox -// ------------------------- -$checkbox-bg: $dark-1; -$checkbox-border: 1px solid $gray-1; -$checkbox-checked-bg: linear-gradient(0deg, $orange, $red); -$checkbox-color: $dark-1; - -//Panel Edit -// ------------------------- -$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-5; -$panel-editor-viz-item-border: 1px solid $dark-5; -$panel-editor-viz-item-shadow-hover: 0 0 4px $blue; -$panel-editor-viz-item-border-hover: 1px solid $blue; -$panel-editor-viz-item-bg: $input-black; -$panel-editor-tabs-line-color: #e3e3e3; -$panel-editor-viz-item-bg-hover: darken($blue, 47%); - -$panel-options-group-border: none; -$panel-options-group-header-bg: $gray-blue; - -$panel-grid-placeholder-bg: darken($blue, 47%); -$panel-grid-placeholder-shadow: 0 0 4px $blue; - -// logs -$logs-color-unkown: $gray-2; - -// toggle-group -$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); -$button-toggle-group-btn-active-shadow: inset 0 0 4px $black; -$button-toggle-group-btn-seperator-border: 1px solid $page-bg; - -$vertical-resize-handle-bg: $dark-5; -$vertical-resize-handle-dots: $gray-1; + + // Global values + // -------------------------------------------------- + + $theme-name: dark; + + // Grays + // ------------------------- + $black: #000; + $dark-1: #141414; + $dark-2: #1f1f20; + $dark-3: #262628; + $dark-4: #333333; + $dark-5: #444444; + $gray-1: #555555; + $gray-2: #8e8e8e; + $gray-3: #b3b3b3; + $gray-4: #d8d9da; + $gray-5: #ececec; + $gray-7: #fbfbfb; + + $gray-blue: #212327; + $input-black: #09090b; + + $white: #fff; + + // Accent colors + // ------------------------- + $blue: #ff0000; + $blue-dark: #005f81; + $green: #299c46; + $red: #d44a3a; + $yellow: #ecbb13; + $purple: #9933cc; + $variable: #32d1df; + $orange: #eb7b18; + + $brand-primary: $orange; + $brand-success: $green; + $brand-warning: $brand-primary; + $brand-danger: $red; + + $query-red: #e24d42; + $query-green: #74e680; + $query-purple: #fe85fc; + $query-keyword: #66d9ef; + $query-orange: $orange; + + // Status colors + // ------------------------- + $online: #10a345; + $warn: #f79520; + $critical: #ed2e18; + + // Scaffolding + // ------------------------- + $body-bg: rgb(23, 24, 25); + $page-bg: rgb(22, 23, 25); + + $body-color: $gray-4; + $text-color: $gray-4; + $text-color-strong: $white; + $text-color-weak: $gray-2; + $text-color-faint: $dark-5; + $text-color-emphasis: $gray-5; + + $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); + $textShadow: none; + + // gradients + $brand-gradient: linear-gradient( + to right, + rgba(255, 213, 0, 0.7) 0%, + rgba(255, 68, 0, 0.7) 99%, + rgba(255, 68, 0, 0.7) 100% + ); + + $page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); + $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); + + // Links + // ------------------------- + $link-color: darken($white, 11%); + $link-color-disabled: darken($link-color, 30%); + $link-hover-color: $white; + $external-link-color: $blue; + + // Typography + // ------------------------- + $headings-color: darken($white, 11%); + $abbr-border-color: $gray-3 !default; + $text-muted: $text-color-weak; + + $hr-border-color: $dark-4; + + // Panel + // ------------------------- + $panel-bg: #212124; + $panel-border: solid 1px $dark-1; + $panel-header-hover-bg: $dark-4; + $panel-corner: $panel-bg; + + // page header + $page-header-bg: linear-gradient(90deg, #292a2d, black); + $page-header-shadow: inset 0px -4px 14px $dark-2; + $page-header-border-color: $dark-4; + + $divider-border-color: $gray-1; + + // Graphite Target Editor + $tight-form-bg: $dark-3; + $tight-form-func-bg: $dark-4; + $tight-form-func-highlight-bg: $dark-5; + + $modal-backdrop-bg: #353c42; + $code-tag-bg: $dark-1; + $code-tag-border: $dark-4; + + // cards + $card-background: linear-gradient(135deg, #2f2f32, #262628); + $card-background-hover: linear-gradient(135deg, #343436, #262628); + $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); + + // Lists + $list-item-bg: $card-background; + $list-item-hover-bg: lighten($gray-blue, 2%); + $list-item-link-color: $text-color; + $list-item-shadow: $card-shadow; + + $empty-list-cta-bg: $gray-blue; + + // Scrollbars + $scrollbarBackground: #404357; + $scrollbarBackground2: #3a3a3a; + $scrollbarBorder: black; + + // Tables + // ------------------------- + $table-bg: transparent; // overall background-color + $table-bg-accent: $dark-3; // for striping + $table-border: $dark-3; // table and cell border + + $table-bg-odd: $dark-2; + $table-bg-hover: $dark-3; + + // Buttons + // ------------------------- + $btn-primary-bg: #ff6600; + $btn-primary-bg-hl: #bc3e06; + + $btn-secondary-bg-hl: lighten($blue-dark, 5%); + $btn-secondary-bg: $blue-dark; + + $btn-success-bg: $green; + $btn-success-bg-hl: darken($green, 6%); + + $btn-warning-bg: $brand-warning; + $btn-warning-bg-hl: lighten($brand-warning, 8%); + + $btn-danger-bg: $red; + $btn-danger-bg-hl: darken($red, 8%); + + $btn-inverse-bg: $dark-3; + $btn-inverse-bg-hl: lighten($dark-3, 4%); + $btn-inverse-text-color: $link-color; + $btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1); + + $btn-link-color: $gray-3; + + $iconContainerBackground: $black; + + $btn-divider-left: $dark-4; + $btn-divider-right: $dark-2; + + $btn-drag-image: '../img/grab_dark.svg'; + + // Forms + // ------------------------- + $input-bg: $input-black; + $input-bg-disabled: $dark-3; + + $input-color: $gray-4; + $input-border-color: $dark-3; + $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); + $input-border-focus: $input-border-color; + $input-box-shadow-focus: rgba(102, 175, 233, 0.6); + $input-color-placeholder: $gray-1 !default; + $input-label-bg: $gray-blue; + $input-label-border-color: $dark-3; + $input-color-select-arrow: $white; + + // Input placeholder text color + $placeholderText: darken($text-color, 25%); + + // Search + $search-shadow: 0 0 30px 0 $black; + $search-filter-box-bg: $gray-blue; + + // Typeahead + $typeahead-shadow: 0 5px 10px 0 $black; + $typeahead-selected-bg: $dark-4; + $typeahead-selected-color: $yellow; + + // Dropdowns + // ------------------------- + $dropdownBackground: $dark-3; + $dropdownBorder: rgba(0, 0, 0, 0.2); + $dropdownDividerTop: transparent; + $dropdownDividerBottom: #444; + + $dropdownLinkColor: $text-color; + $dropdownLinkColorHover: $white; + $dropdownLinkColorActive: $white; + + $dropdownLinkBackgroundHover: $dark-4; + + // Horizontal forms & lists + // ------------------------- + $horizontalComponentOffset: 180px; + + // Navbar + // ------------------------- + $navbarHeight: 55px; + + $navbarBackground: $panel-bg; + $navbarBorder: 1px solid $dark-3; + $navbarShadow: 0 0 20px black; + + $navbarLinkColor: $gray-4; + + $navbarButtonBackground: $navbarBackground; + $navbarButtonBackgroundHighlight: $body-bg; + + $navbar-button-border: #2f2f32; + + // Sidemenu + // ------------------------- + $side-menu-bg: $black; + $side-menu-bg-mobile: $side-menu-bg; + $side-menu-item-hover-bg: $dark-2; + $side-menu-shadow: 0 0 20px black; + $side-menu-link-color: $link-color; + + // Menu dropdowns + // ------------------------- + $menu-dropdown-bg: $body-bg; + $menu-dropdown-hover-bg: $dark-2; + $menu-dropdown-shadow: 5px 5px 20px -5px $black; + + // Tabs + // ------------------------- + $tab-border-color: $dark-4; + + // Toolbar + $toolbar-bg: $input-black; + + // Form states and alerts + // ------------------------- + $warning-text-color: $warn; + $error-text-color: #e84d4d; + $success-text-color: #12d95a; + $info-text-color: $blue-dark; + + $alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); + $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); + $alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); + $alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); + + // popover + $popover-bg: $page-bg; + $popover-color: $text-color; + $popover-border-color: $dark-4; + $popover-shadow: 0 0 20px black; + + $popover-help-bg: $btn-secondary-bg; + $popover-help-color: $text-color; + + $popover-error-bg: $btn-danger-bg; + + // Tooltips and popovers + // ------------------------- + $tooltipColor: $popover-help-color; + $tooltipArrowWidth: 5px; + $tooltipLinkColor: $link-color; + $graph-tooltip-bg: $dark-1; + + $tooltipBackground: $black; + $tooltipColor: $gray-4; + $tooltipArrowColor: $tooltipBackground; + $tooltipBackgroundError: $brand-danger; + + // images + $checkboxImageUrl: '../img/checkbox.png'; + + // info box + $info-box-border-color: darken($blue, 12%); + + // footer + $footer-link-color: $gray-2; + $footer-link-hover: $gray-4; + + // json-explorer + $json-explorer-default-color: $text-color; + $json-explorer-string-color: #23d662; + $json-explorer-number-color: $variable; + $json-explorer-boolean-color: $variable; + $json-explorer-null-color: #eec97d; + $json-explorer-undefined-color: rgb(239, 143, 190); + $json-explorer-function-color: #fd48cb; + $json-explorer-rotate-time: 100ms; + $json-explorer-toggler-opacity: 0.6; + $json-explorer-bracket-color: #9494ff; + $json-explorer-key-color: #23a0db; + $json-explorer-url-color: #027bff; + + // Changelog and diff + // ------------------------- + $diff-label-bg: $dark-2; + $diff-label-fg: $white; + + $diff-group-bg: $dark-4; + $diff-arrow-color: $white; + + $diff-json-bg: $dark-4; + $diff-json-fg: $gray-5; + + $diff-json-added: #457740; + $diff-json-deleted: #a04338; + + $diff-json-old: #a04338; + $diff-json-new: #457740; + + $diff-json-changed-fg: $gray-5; + $diff-json-changed-num: $text-color; + + $diff-json-icon: $gray-7; + + //Submenu + $variable-option-bg: $blue-dark; + + //Switch Slider + // ------------------------- + $switch-bg: $input-bg; + $switch-slider-color: $dark-2; + $switch-slider-off-bg: $gray-1; + $switch-slider-on-bg: linear-gradient(90deg, $orange, $red); + $switch-slider-shadow: 0 0 3px black; + + //Checkbox + // ------------------------- + $checkbox-bg: $dark-1; + $checkbox-border: 1px solid $gray-1; + $checkbox-checked-bg: linear-gradient(0deg, $orange, $red); + $checkbox-color: $dark-1; + + //Panel Edit + // ------------------------- + $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-5; + $panel-editor-viz-item-border: 1px solid $dark-5; + $panel-editor-viz-item-shadow-hover: 0 0 4px $blue; + $panel-editor-viz-item-border-hover: 1px solid $blue; + $panel-editor-viz-item-bg: $input-black; + $panel-editor-tabs-line-color: #e3e3e3; + $panel-editor-viz-item-bg-hover: darken($blue, 47%); + + $panel-options-group-border: none; + $panel-options-group-header-bg: $gray-blue; + + $panel-grid-placeholder-bg: darken($blue, 47%); + $panel-grid-placeholder-shadow: 0 0 4px $blue; + + // logs + $logs-color-unkown: $gray-2; + + // toggle-group + $button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); + $button-toggle-group-btn-active-shadow: inset 0 0 4px $black; + $button-toggle-group-btn-seperator-border: 1px solid $page-bg; + + $vertical-resize-handle-bg: $dark-5; + $vertical-resize-handle-dots: $gray-1; $vertical-resize-handle-dots-hover: $gray-2; diff --git a/scripts/cli/nodemon.json b/scripts/cli/nodemon.json new file mode 100644 index 00000000000..3875f244868 --- /dev/null +++ b/scripts/cli/nodemon.json @@ -0,0 +1,7 @@ + +{ + "watch": ["packages/grafana-ui/src/themes"], + "ext": "ts", + "ignore": ["src/**/*.spec.ts"], + "exec": "ts-node ./src/index.ts" +} diff --git a/scripts/cli/tsconfig.json b/scripts/cli/tsconfig.json new file mode 100644 index 00000000000..babab880588 --- /dev/null +++ b/scripts/cli/tsconfig.json @@ -0,0 +1,6 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "module": "commonjs" + } +} diff --git a/scripts/cli/watch.ts b/scripts/cli/watch.ts new file mode 100644 index 00000000000..3592959a795 --- /dev/null +++ b/scripts/cli/watch.ts @@ -0,0 +1,24 @@ +// import chokidar from 'chokidar'; +import darkTheme from '@grafana/ui/src/themes/dark'; +import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.scss.tmpl'; +import fs from 'fs'; + +console.log(__dirname + '../../packages/grafana-ui/src/themes/dark.ts'); + +const fileToWatch = [ + __dirname + '/../../packages/grafana-ui/src/themes/dark.ts', + __dirname + '/../../packages/grafana-ui/src/themes/light.ts', +]; +// const watchService = chokidar.watch(fileToWatch); +console.log(`Watching for file changes on ${fileToWatch}`); + +// watchService.on('change', path => { + +const result = darkThemeVarsTemplate(darkTheme); +console.log(result); + +fs.writeFile(__dirname + '/../../public/sass/_variables.dark.scss', result, e => { + console.log(e); +}); + +// }); diff --git a/yarn.lock b/yarn.lock index df2e1cea37e..f14b7ae3ee1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1492,6 +1492,14 @@ resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.10.tgz#780d552467824be4a241b29510a7873a7432c4a6" integrity sha512-fOM/Jhv51iyugY7KOBZz2ThfT1gwvsGCfWxpLpZDgkGjpEO4Le9cld07OdskikLjDUQJ43dzDaVRSFwQlpdqVg== +"@types/chokidar@^1.7.5": + version "1.7.5" + resolved "https://registry.yarnpkg.com/@types/chokidar/-/chokidar-1.7.5.tgz#1fa78c8803e035bed6d98e6949e514b133b0c9b6" + integrity sha512-PDkSRY7KltW3M60hSBlerxI8SFPXsO3AL/aRVsO4Kh9IHRW74Ih75gUuTd/aE4LSSFqypb10UIX3QzOJwBQMGQ== + dependencies: + "@types/events" "*" + "@types/node" "*" + "@types/classnames@^2.2.6": version "2.2.7" resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.7.tgz#fb68cc9be8487e6ea5b13700e759bfbab7e0fefd" @@ -1712,6 +1720,11 @@ "@types/cheerio" "*" "@types/react" "*" +"@types/events@*": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7" + integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g== + "@types/geojson@*": version "7946.0.5" resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.5.tgz#9aea839ea5af4b1bc079f1d9fa977d48665e02b0" @@ -1737,10 +1750,10 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.18.tgz#1d3ca764718915584fcd9f6344621b7672665c67" integrity sha512-fh+pAqt4xRzPfqA6eh3Z2y6fyZavRIumvjhaCL753+TVkGKGhpPeyrJG2JftD0T9q4GF00KjefsQ+PQNDdWQaQ== -"@types/node@^8.0.31": - version "8.10.39" - resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.39.tgz#e7e87ad00364dd7bc485c940926345b8ec1a26ca" - integrity sha512-rE7fktr02J8ybFf6eysife+WF+L4sAHWzw09DgdCebEu+qDwMvv4zl6Bc+825ttGZP73kCKxa3dhJOoGJ8+5mA== +"@types/node@^10.12.24": + version "10.12.24" + resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.24.tgz#b13564af612a22a20b5d95ca40f1bffb3af315cf" + integrity sha512-GWWbvt+z9G5otRBW8rssOFgRY87J9N/qbhqfjMZ+gUuL6zoL+Hm6gP/8qQBG4jjimqdaNLCehcVapZ/Fs2WjCQ== "@types/prop-types@*": version "15.5.8" @@ -2610,6 +2623,11 @@ are-we-there-yet@~1.1.2: delegates "^1.0.0" readable-stream "^2.0.6" +arg@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.0.tgz#583c518199419e0037abb74062c37f8519e575f0" + integrity sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg== + argparse@^1.0.2, argparse@^1.0.7: version "1.0.10" resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911" @@ -2813,7 +2831,7 @@ astral-regex@^1.0.0: resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9" integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg== -async-each@^1.0.0: +async-each@^1.0.0, async-each@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d" integrity sha1-GdOGodntxufByF04iu28xW0zYC0= @@ -4137,7 +4155,7 @@ braces@^1.8.2: preserve "^0.2.0" repeat-element "^1.1.2" -braces@^2.3.0, braces@^2.3.1: +braces@^2.3.0, braces@^2.3.1, braces@^2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729" integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w== @@ -4686,6 +4704,25 @@ chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.4: optionalDependencies: fsevents "^1.2.2" +chokidar@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.0.tgz#5fcb70d0b28ebe0867eb0f09d5f6a08f29a1efa0" + integrity sha512-5t6G2SH8eO6lCvYOoUpaRnF5Qfd//gd7qJAkwRUw9qlGVkiQ13uwQngqbWWaurOsaAm9+kUGbITADxt6H0XFNQ== + dependencies: + anymatch "^2.0.0" + async-each "^1.0.1" + braces "^2.3.2" + glob-parent "^3.1.0" + inherits "^2.0.3" + is-binary-path "^1.0.0" + is-glob "^4.0.0" + normalize-path "^3.0.0" + path-is-absolute "^1.0.0" + readdirp "^2.2.1" + upath "^1.1.0" + optionalDependencies: + fsevents "^1.2.7" + chownr@^1.0.1, chownr@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494" @@ -6330,7 +6367,7 @@ diff@^2.0.2: resolved "https://registry.yarnpkg.com/diff/-/diff-2.2.3.tgz#60eafd0d28ee906e4e8ff0a52c1229521033bf99" integrity sha1-YOr9DSjukG5Oj/ClLBIpUhAzv5k= -diff@^3.2.0, diff@^3.5.0: +diff@^3.1.0, diff@^3.2.0, diff@^3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12" integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA== @@ -7811,7 +7848,7 @@ fs.realpath@^1.0.0: resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8= -fsevents@^1.2.2, fsevents@^1.2.3: +fsevents@^1.2.2, fsevents@^1.2.3, fsevents@^1.2.7: version "1.2.7" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.7.tgz#4851b664a3783e52003b3c66eb0eee1074933aa4" integrity sha512-Pxm6sI2MeBD7RdD12RYsqaP0nMiwx8eZBXCa6z2L+mRHm2DYrOYwihmhjpkdjUHwQhslWQjRpEgNq4XvBmaAuw== @@ -10935,6 +10972,11 @@ lodash@~4.3.0: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.3.0.tgz#efd9c4a6ec53f3b05412429915c3e4824e4d25a4" integrity sha1-79nEpuxT87BUEkKZFcPkgk5NJaQ= +log-prefix@0.1.1: + version "0.1.1" + resolved "https://registry.yarnpkg.com/log-prefix/-/log-prefix-0.1.1.tgz#3ec492138c8044c9f9732298492dca87850cac90" + integrity sha512-aP1Lst8OCdZKATqzXDN0JBissNVZuiKLyo6hOXDBxaQ1jHDsaxh2J1i5Pp0zMy6ayTKDWfUlLMXyLaQe1PJ48g== + log-symbols@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18" @@ -10949,6 +10991,13 @@ log-symbols@^2.0.0, log-symbols@^2.1.0, log-symbols@^2.2.0: dependencies: chalk "^2.0.1" +log-timestamp@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/log-timestamp/-/log-timestamp-0.2.1.tgz#02d4fd07550d6e3226d2741d89e7c693410276d6" + integrity sha512-a+hFCox7Up3gBrfREwXGjUEozdqjJrqpy82a41BUSEKlmvEZbsjR9vaYh/2PNFwydxX1r3zgfS/mAdNmRY/lKQ== + dependencies: + log-prefix "0.1.1" + log-update@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/log-update/-/log-update-1.0.2.tgz#19929f64c4093d2d2e7075a1dad8af59c296b8d1" @@ -11048,7 +11097,7 @@ make-dir@^1.0.0, make-dir@^1.1.0: dependencies: pify "^3.0.0" -make-error@1.x, make-error@^1.3.5: +make-error@1.x, make-error@^1.1.1, make-error@^1.3.5: version "1.3.5" resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.5.tgz#efe4e81f6db28cadd605c70f29c831b58ef776c8" integrity sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g== @@ -12002,6 +12051,11 @@ normalize-path@^2.0.0, normalize-path@^2.0.1, normalize-path@^2.1.1: dependencies: remove-trailing-separator "^1.0.1" +normalize-path@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" + integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== + normalize-range@^0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" @@ -14466,7 +14520,7 @@ readdir-scoped-modules@^1.0.0: graceful-fs "^4.1.2" once "^1.3.0" -readdirp@^2.0.0: +readdirp@^2.0.0, readdirp@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525" integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ== @@ -16756,6 +16810,17 @@ ts-loader@^5.1.0: micromatch "^3.1.4" semver "^5.0.1" +ts-node@^8.0.2: + version "8.0.2" + resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-8.0.2.tgz#9ecdf8d782a0ca4c80d1d641cbb236af4ac1b756" + integrity sha512-MosTrinKmaAcWgO8tqMjMJB22h+sp3Rd1i4fdoWY4mhBDekOwIAKI/bzmRi7IcbCmjquccYg2gcF6NBkLgr0Tw== + dependencies: + arg "^4.1.0" + diff "^3.1.0" + make-error "^1.1.1" + source-map-support "^0.5.6" + yn "^3.0.0" + tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: version "1.9.3" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286" @@ -17073,7 +17138,7 @@ unzip-response@^2.0.1: resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97" integrity sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c= -upath@^1.0.5: +upath@^1.0.5, upath@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd" integrity sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw== @@ -18075,6 +18140,11 @@ yeoman-generator@^2.0.5: through2 "^2.0.0" yeoman-environment "^2.0.5" +yn@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/yn/-/yn-3.0.0.tgz#0073c6b56e92aed652fbdfd62431f2d6b9a7a091" + integrity sha512-+Wo/p5VRfxUgBUGy2j/6KX2mj9AYJWOHuhMjMcbBFc3y54o9/4buK1ksBvuiK01C3kby8DH9lSmJdSxw+4G/2Q== + zip-stream@^1.1.0: version "1.2.0" resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-1.2.0.tgz#a8bc45f4c1b49699c6b90198baacaacdbcd4ba04" From 2542a43ec0f8c490586d50d25eb3782cb498e8a5 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Tue, 12 Feb 2019 21:54:20 +0100 Subject: [PATCH 02/25] Regenerating variabless sas on theme edit v1 --- package.json | 11 +- .../src/themes/_variables.dark.scss.tmpl.ts | 29 +- .../src/themes/_variables.light.scss.tmpl.ts | 385 ++++++++++++++++++ public/app/core/specs/search_results.test.ts | 2 +- .../playlist/specs/playlist_srv.test.ts | 6 +- public/sass/_variables.dark.scss | 7 +- public/sass/_variables.light.scss | 102 +++-- scripts/cli/generateSassVariableFiles.ts | 35 ++ scripts/cli/nodemon.json | 7 - scripts/cli/start.js | 23 ++ scripts/cli/watch.ts | 24 -- yarn.lock | 105 ++--- 12 files changed, 562 insertions(+), 174 deletions(-) create mode 100644 packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts create mode 100644 scripts/cli/generateSassVariableFiles.ts delete mode 100644 scripts/cli/nodemon.json create mode 100644 scripts/cli/start.js delete mode 100644 scripts/cli/watch.ts diff --git a/package.json b/package.json index b9a7fc691a6..7eb3c1dd1c3 100644 --- a/package.json +++ b/package.json @@ -17,13 +17,12 @@ "@babel/preset-react": "^7.0.0", "@babel/preset-typescript": "^7.1.0", "@rtsao/plugin-proposal-class-properties": "^7.0.1-patch.1", - "@types/chokidar": "^1.7.5", "@types/classnames": "^2.2.6", "@types/d3": "^4.10.1", "@types/enzyme": "^3.1.13", "@types/jest": "^23.3.2", "@types/jquery": "^1.10.35", - "@types/node": "^10.12.24", + "@types/node": "^8.0.31", "@types/react": "^16.7.6", "@types/react-dom": "^16.0.9", "@types/react-grid-layout": "^0.16.6", @@ -37,8 +36,8 @@ "babel-jest": "^23.6.0", "babel-loader": "^8.0.4", "babel-plugin-angularjs-annotate": "^0.9.0", - "chokidar": "^2.1.0", "clean-webpack-plugin": "^0.1.19", + "concurrently": "^4.1.0", "css-loader": "^0.28.7", "enzyme": "^3.6.0", "enzyme-adapter-react-16": "^1.5.0", @@ -72,7 +71,6 @@ "jest-date-mock": "^1.0.6", "lint-staged": "^8.1.3", "load-grunt-tasks": "3.5.2", - "log-timestamp": "^0.2.1", "mini-css-extract-plugin": "^0.4.0", "mocha": "^4.0.1", "monaco-editor": "^0.15.6", @@ -116,7 +114,7 @@ }, "scripts": { "dev": "webpack --progress --colors --mode development --config scripts/webpack/webpack.dev.js", - "start": "webpack-dev-server --progress --colors --mode development --config scripts/webpack/webpack.hot.js", + "start": "node ./scripts/cli/start.js", "watch": "webpack --progress --colors --watch --mode development --config scripts/webpack/webpack.dev.js", "build": "grunt build", "test": "grunt test", @@ -126,8 +124,7 @@ "api-tests": "jest --notify --watch --config=tests/api/jest.js", "precommit": "grunt precommit", "storybook": "cd packages/grafana-ui && yarn storybook", - "tmp": "nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run tmp:exec", - "tmp:exec": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/watch.ts" + "themes:generate": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/generateSassVariableFiles.ts" }, "husky": { "hooks": { 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 327b783be3c..617f9d5fd83 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -8,23 +8,24 @@ export const darkThemeVarsTemplate = (theme: GrafanaTheme) => ` // Grays // ------------------------- - $black: #000; - $dark-1: #141414; - $dark-2: #1f1f20; - $dark-3: #262628; - $dark-4: #333333; - $dark-5: #444444; - $gray-1: #555555; - $gray-2: #8e8e8e; - $gray-3: #b3b3b3; - $gray-4: #d8d9da; - $gray-5: #ececec; - $gray-7: #fbfbfb; + $black: ${theme.colors.black}; + $dark-1: ${theme.colors.dark2}; + $dark-2: ${theme.colors.dark2}; + $dark-3: ${theme.colors.dark3}; + $dark-4: ${theme.colors.dark4}; + $dark-5: ${theme.colors.dark5}; + $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}; $gray-blue: #212327; $input-black: #09090b; - $white: #fff; + $white: ${theme.colors.white}; // Accent colors // ------------------------- @@ -383,5 +384,5 @@ export const darkThemeVarsTemplate = (theme: GrafanaTheme) => ` $vertical-resize-handle-bg: $dark-5; $vertical-resize-handle-dots: $gray-1; -$vertical-resize-handle-dots-hover: $gray-2; + $vertical-resize-handle-dots-hover: $gray-2; `; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts new file mode 100644 index 00000000000..11444e76bab --- /dev/null +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -0,0 +1,385 @@ +import { GrafanaTheme } from '../types'; + +export const lightThemeVarsTemplate = (theme: GrafanaTheme) => ` + // Global values + // -------------------------------------------------- + + $theme-name: light; + + // Grays + // ------------------------- + $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}; + $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}; + $blue-light: #00a8e6; + $green: #3aa655; + $red: #d44939; + $yellow: #ff851b; + $orange: #ff7941; + $purple: #9954bb; + $variable: $blue; + + $brand-primary: $orange; + $brand-success: $green; + $brand-warning: $orange; + $brand-danger: $red; + + $query-red: $red; + $query-green: $green; + $query-purple: $purple; + $query-orange: $orange; + $query-keyword: $blue; + + // Status colors + // ------------------------- + $online: #01a64f; + $warn: #f79520; + $critical: #ec2128; + + // Scaffolding + // ------------------------- + $body-bg: $gray-7; + $page-bg: $gray-7; + + $body-color: $gray-1; + $text-color: $gray-1; + $text-color-strong: $dark-2; + $text-color-weak: $gray-2; + $text-color-faint: $gray-4; + $text-color-emphasis: $dark-5; + + $text-shadow-faint: none; + $textShadow: none; + + // gradients + $brand-gradient: linear-gradient( + to right, + rgba(255, 213, 0, 1) 0%, + rgba(255, 68, 0, 1) 99%, + rgba(255, 68, 0, 1) 100% + ); + + $page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px); + $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-light; + + // Typography + // ------------------------- + $headings-color: $text-color; + $abbr-border-color: $gray-2 !default; + $text-muted: $text-color-weak; + + $hr-border-color: $dark-3 !default; + + // Panel + // ------------------------- + $panel-bg: $white; + $panel-border: solid 1px $gray-5; + $panel-header-hover-bg: $gray-6; + $panel-corner: $gray-4; + + // Page header + $page-header-bg: linear-gradient(90deg, $white, $gray-7); + $page-header-shadow: inset 0px -3px 10px $gray-6; + $page-header-border-color: $gray-4; + + $divider-border-color: $gray-2; + + // Graphite Target Editor + $tight-form-bg: #eaebee; + $tight-form-func-bg: $gray-5; + $tight-form-func-highlight-bg: $gray-6; + + $modal-backdrop-bg: $body-bg; + $code-tag-bg: $gray-6; + $code-tag-border: darken($code-tag-bg, 3%); + + // cards + $card-background: linear-gradient(135deg, $gray-6, $gray-5); + $card-background-hover: linear-gradient(135deg, $gray-5, $gray-6); + $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); + + // Lists + $list-item-bg: linear-gradient(135deg, $gray-5, $gray-6); //$card-background; + $list-item-hover-bg: darken($gray-5, 5%); + $list-item-link-color: $text-color; + $list-item-shadow: $card-shadow; + + $empty-list-cta-bg: $gray-6; + + // Scrollbars + $scrollbarBackground: $gray-5; + $scrollbarBackground2: $gray-5; + $scrollbarBorder: $gray-4; + + // Tables + // ------------------------- + $table-bg: transparent; // overall background-color + $table-bg-accent: $gray-5; // for striping + $table-border: $gray-3; // table and cell border + + $table-bg-odd: $gray-6; + $table-bg-hover: $gray-5; + + // Buttons + // ------------------------- + $btn-primary-bg: $brand-primary; + $btn-primary-bg-hl: lighten($brand-primary, 8%); + + $btn-secondary-bg: $blue; + $btn-secondary-bg-hl: lighten($blue, 4%); + + $btn-success-bg: lighten($green, 3%); + $btn-success-bg-hl: darken($green, 3%); + + $btn-warning-bg: lighten($orange, 3%); + $btn-warning-bg-hl: darken($orange, 3%); + + $btn-danger-bg: lighten($red, 3%); + $btn-danger-bg-hl: darken($red, 3%); + + $btn-inverse-bg: $gray-6; + $btn-inverse-bg-hl: darken($gray-6, 5%); + $btn-inverse-text-color: $gray-1; + $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); + + $btn-link-color: $gray-1; + + $iconContainerBackground: $white; + + $btn-divider-left: $gray-4; + $btn-divider-right: $gray-7; + + $btn-drag-image: '../img/grab_light.svg'; + + // Forms + // ------------------------- + $input-bg: $white; + $input-bg-disabled: $gray-5; + + $input-color: $dark-3; + $input-border-color: $gray-5; + $input-box-shadow: none; + $input-border-focus: $blue !default; + $input-box-shadow-focus: $blue !default; + $input-color-placeholder: $gray-4 !default; + $input-label-bg: $gray-5; + $input-label-border-color: $gray-5; + $input-color-select-arrow: $gray-1; + + // Input placeholder text color + $placeholderText: $gray-2; + + // search + $search-shadow: 0 5px 30px 0 $gray-4; + $search-filter-box-bg: $gray-7; + + // Typeahead + $typeahead-shadow: 0 5px 10px 0 $gray-5; + $typeahead-selected-bg: $gray-6; + $typeahead-selected-color: $yellow; + + // Dropdowns + // ------------------------- + $dropdownBackground: $white; + $dropdownBorder: $gray-4; + $dropdownDividerTop: $gray-6; + $dropdownDividerBottom: $white; + + $dropdownLinkColor: $dark-3; + $dropdownLinkColorHover: $link-color; + $dropdownLinkColorActive: $link-color; + + $dropdownLinkBackgroundHover: $gray-6; + + // Horizontal forms & lists + // ------------------------- + $horizontalComponentOffset: 180px; + + // Navbar + // ------------------------- + $navbarHeight: 52px; + + $navbarBackground: $white; + $navbarBorder: 1px solid $gray-4; + $navbarShadow: 0 0 3px #c1c1c1; + + $navbarLinkColor: #444; + + $navbarButtonBackground: lighten($navbarBackground, 3%); + $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); + + $navbar-button-border: $gray-4; + + // Sidemenu + // ------------------------- + $side-menu-bg: $dark-2; + $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; + $side-menu-link-color: $gray-6; + + // Menu dropdowns + // ------------------------- + $menu-dropdown-bg: $gray-7; + $menu-dropdown-hover-bg: $gray-6; + $menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; + + // Tabs + // ------------------------- + $tab-border-color: $gray-5; + + // Toolbar + $toolbar-bg: white; + + // Form states and alerts + // ------------------------- + $warning-text-color: lighten($orange, 10%); + $error-text-color: lighten($red, 10%); + $success-text-color: lighten($green, 10%); + $info-text-color: $blue; + + $alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); + $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); + $alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); + $alert-info-bg: $blue; + + // popover + $popover-bg: $page-bg; + $popover-color: $text-color; + $popover-border-color: $gray-5; + $popover-shadow: 0 0 20px $white; + + $popover-help-bg: $blue; + $popover-help-color: $gray-6; + + $popover-error-bg: $btn-danger-bg; + + // Tooltips and popovers + // ------------------------- + $tooltipColor: $popover-help-color; + $tooltipArrowWidth: 5px; + $tooltipLinkColor: lighten($popover-help-color, 5%); + $graph-tooltip-bg: $gray-5; + + $tooltipBackground: $gray-1; + $tooltipColor: $gray-7; + $tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip + $tooltipBackgroundError: $brand-danger; + + // images + $checkboxImageUrl: '../img/checkbox_white.png'; + + // info box + $info-box-border-color: lighten($blue, 20%); + + // footer + $footer-link-color: $gray-3; + $footer-link-hover: $dark-5; + + // json explorer + $json-explorer-default-color: black; + $json-explorer-string-color: green; + $json-explorer-number-color: blue; + $json-explorer-boolean-color: red; + $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: blue; + $json-explorer-key-color: #00008b; + $json-explorer-url-color: blue; + + // Changelog and diff + // ------------------------- + $diff-label-bg: $gray-5; + $diff-label-fg: $gray-2; + + $diff-arrow-color: $dark-3; + $diff-group-bg: $gray-7; + + $diff-json-bg: $gray-5; + $diff-json-fg: $gray-2; + + $diff-json-added: lighten(desaturate($green, 30%), 10%); + $diff-json-deleted: desaturate($red, 35%); + + $diff-json-old: #5a372a; + $diff-json-new: #664e33; + + $diff-json-changed-fg: $gray-6; + $diff-json-changed-num: $gray-4; + + $diff-json-icon: $gray-4; + + //Submenu + $variable-option-bg: $blue-light; + + //Switch Slider + // ------------------------- + $switch-bg: $white; + $switch-slider-color: $gray-7; + $switch-slider-off-bg: $gray-5; + $switch-slider-on-bg: linear-gradient(90deg, $yellow, $red); + $switch-slider-shadow: 0 0 3px $dark-5; + + //Checkbox + // ------------------------- + $checkbox-bg: $gray-6; + $checkbox-border: 1px solid $gray-3; + $checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); + $checkbox-color: $gray-7; + + //Panel Edit + // ------------------------- + $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 $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-viz-item-bg-hover: lighten($blue, 62%); + + $panel-options-group-border: none; + $panel-options-group-header-bg: $gray-5; + + $panel-grid-placeholder-bg: lighten($blue, 62%); + $panel-grid-placeholder-shadow: 0 0 4px $blue-light; + + // logs + $logs-color-unkown: $gray-5; + + // toggle-group + $button-toggle-group-btn-active-bg: $brand-primary; + $button-toggle-group-btn-active-shadow: inset 0 0 4px $white; + $button-toggle-group-btn-seperator-border: 1px solid $gray-6; + + $vertical-resize-handle-bg: $gray-4; + $vertical-resize-handle-dots: $gray-3; + $vertical-resize-handle-dots-hover: $gray-2; +`; diff --git a/public/app/core/specs/search_results.test.ts b/public/app/core/specs/search_results.test.ts index 96dbc8bb963..af0b9d19873 100644 --- a/public/app/core/specs/search_results.test.ts +++ b/public/app/core/specs/search_results.test.ts @@ -4,7 +4,7 @@ import appEvents from 'app/core/app_events'; jest.mock('app/core/app_events', () => { return { - emit: jest.fn(), + emit: jest.fn(), }; }); diff --git a/public/app/features/playlist/specs/playlist_srv.test.ts b/public/app/features/playlist/specs/playlist_srv.test.ts index d2ff27e54e0..bfb1732d9c6 100644 --- a/public/app/features/playlist/specs/playlist_srv.test.ts +++ b/public/app/features/playlist/specs/playlist_srv.test.ts @@ -2,7 +2,7 @@ import { PlaylistSrv } from '../playlist_srv'; const dashboards = [{ url: 'dash1' }, { url: 'dash2' }]; -const createPlaylistSrv = (): [PlaylistSrv, { url: jest.MockInstance }] => { +const createPlaylistSrv = (): [PlaylistSrv, { url: jest.MockInstance }] => { const mockBackendSrv = { get: jest.fn(url => { switch (url) { @@ -27,7 +27,7 @@ const createPlaylistSrv = (): [PlaylistSrv, { url: jest.MockInstance }] => return [new PlaylistSrv(mockLocation, mockTimeout, mockBackendSrv), mockLocation]; }; -const mockWindowLocation = (): [jest.MockInstance, () => void] => { +const mockWindowLocation = (): [jest.MockInstance, () => void] => { const oldLocation = window.location; const hrefMock = jest.fn(); @@ -50,7 +50,7 @@ const mockWindowLocation = (): [jest.MockInstance, () => void] => { describe('PlaylistSrv', () => { let srv: PlaylistSrv; - let hrefMock: jest.MockInstance; + let hrefMock: jest.MockInstance; let unmockLocation: () => void; const initialUrl = 'http://localhost/playlist'; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 704c1cb7785..4a3f5eb97d2 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -5,8 +5,8 @@ $theme-name: dark; // Grays // ------------------------- -$black: #000; -$dark-1: #141414; +$black: #000000; +$dark-1: #1f1f20; $dark-2: #1f1f20; $dark-3: #262628; $dark-4: #333333; @@ -16,12 +16,13 @@ $gray-2: #8e8e8e; $gray-3: #b3b3b3; $gray-4: #d8d9da; $gray-5: #ececec; +$gray-6: #f4f5f8; $gray-7: #fbfbfb; $gray-blue: #212327; $input-black: #09090b; -$white: #fff; +$white: #ffffff; // Accent colors // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 57ab0d9e12a..ff9e884a39d 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -3,24 +3,10 @@ $theme-name: light; -// New Colors -// ------------------------- -$sapphire-faint: #f5f9ff; -$sapphire-light: #a8caff; -$sapphire-base: #3274d9; -$sapphire-shade: #1f60c4; -$lobster-base: #e02f44; -$lobster-shade: #c4162a; -$green-base: #37872d; -$green-shade: #19730e; -$green-base: #3eb15b; -$green-shade: #369b4f; -$purple-shade: #8f3bb8; -$yellow-base: #f2cc0c; - // Grays // ------------------------- -$black: #000; +$black: #000000; +$dark-1: #13161d; $dark-2: #1e2028; $dark-3: #303133; $dark-4: #35373f; @@ -33,35 +19,35 @@ $gray-5: #dde4ed; $gray-6: #e9edf2; $gray-7: #f7f8fa; -$white: #fff; +$white: #ffffff; // Accent colors // ------------------------- $blue: #0083b3; $blue-light: #00a8e6; $green: #3aa655; -$red: $lobster-base; +$red: #d44939; $yellow: #ff851b; $orange: #ff7941; $purple: #9954bb; -$variable: $purple-shade; +$variable: $blue; $brand-primary: $orange; $brand-success: $green; $brand-warning: $orange; -$brand-danger: $lobster-base; +$brand-danger: $red; -$query-red: $lobster-base; +$query-red: $red; $query-green: $green; $query-purple: $purple; $query-orange: $orange; -$query-keyword: $sapphire-base; +$query-keyword: $blue; // Status colors // ------------------------- -$online: $green-shade; +$online: #01a64f; $warn: #f79520; -$critical: $lobster-shade; +$critical: #ec2128; // Scaffolding // ------------------------- @@ -76,6 +62,7 @@ $text-color-faint: $gray-4; $text-color-emphasis: $dark-5; $text-shadow-faint: none; +$textShadow: none; // gradients $brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); @@ -88,7 +75,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-light; // Typography // ------------------------- @@ -150,17 +137,20 @@ $table-bg-hover: $gray-5; // Buttons // ------------------------- -$btn-primary-bg: $green-base; -$btn-primary-bg-hl: $green-shade; +$btn-primary-bg: $brand-primary; +$btn-primary-bg-hl: lighten($brand-primary, 8%); -$btn-secondary-bg: $sapphire-base; -$btn-secondary-bg-hl: $sapphire-shade; +$btn-secondary-bg: $blue; +$btn-secondary-bg-hl: lighten($blue, 4%); -$btn-success-bg: $green-base; -$btn-success-bg-hl: $green-shade; +$btn-success-bg: lighten($green, 3%); +$btn-success-bg-hl: darken($green, 3%); -$btn-danger-bg: $lobster-base; -$btn-danger-bg-hl: $lobster-shade; +$btn-warning-bg: lighten($orange, 3%); +$btn-warning-bg-hl: darken($orange, 3%); + +$btn-danger-bg: lighten($red, 3%); +$btn-danger-bg-hl: darken($red, 3%); $btn-inverse-bg: $gray-6; $btn-inverse-bg-hl: darken($gray-6, 5%); @@ -184,8 +174,8 @@ $input-bg-disabled: $gray-5; $input-color: $dark-3; $input-border-color: $gray-5; $input-box-shadow: none; -$input-border-focus: $sapphire-light !default; -$input-box-shadow-focus: $sapphire-light !default; +$input-border-focus: $blue !default; +$input-box-shadow-focus: $blue !default; $input-color-placeholder: $gray-4 !default; $input-label-bg: $gray-5; $input-label-border-color: $gray-5; @@ -259,13 +249,14 @@ $toolbar-bg: white; // Form states and alerts // ------------------------- $warning-text-color: lighten($orange, 10%); -$error-text-color: $lobster-shade; +$error-text-color: lighten($red, 10%); $success-text-color: lighten($green, 10%); +$info-text-color: $blue; -$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); -$alert-success-bg: linear-gradient(90deg, $green-base, $green-shade); -$alert-warning-bg: linear-gradient(90deg, $lobster-base, $lobster-shade); -$alert-info-bg: $sapphire-base; +$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); +$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); +$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); +$alert-info-bg: $blue; // popover $popover-bg: $page-bg; @@ -273,7 +264,7 @@ $popover-color: $text-color; $popover-border-color: $gray-5; $popover-shadow: 0 0 20px $white; -$popover-help-bg: $sapphire-base; +$popover-help-bg: $blue; $popover-help-color: $gray-6; $popover-error-bg: $btn-danger-bg; @@ -294,7 +285,7 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox_white.png'; // info box -$info-box-border-color: $sapphire-base; +$info-box-border-color: lighten($blue, 20%); // footer $footer-link-color: $gray-3; @@ -303,16 +294,16 @@ $footer-link-hover: $dark-5; // 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; +$json-explorer-boolean-color: red; $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; $json-explorer-key-color: #00008b; -$json-explorer-url-color: $sapphire-base; +$json-explorer-url-color: blue; // Changelog and diff // ------------------------- @@ -323,35 +314,35 @@ $diff-arrow-color: $dark-3; $diff-group-bg: $gray-7; $diff-json-bg: $gray-5; -$diff-json-fg: $gray-1; +$diff-json-fg: $gray-2; -$diff-json-added: $sapphire-shade; -$diff-json-deleted: $lobster-shade; +$diff-json-added: lighten(desaturate($green, 30%), 10%); +$diff-json-deleted: desaturate($red, 35%); $diff-json-old: #5a372a; $diff-json-new: #664e33; -$diff-json-changed-fg: $gray-7; +$diff-json-changed-fg: $gray-6; $diff-json-changed-num: $gray-4; $diff-json-icon: $gray-4; //Submenu -$variable-option-bg: $dropdownLinkBackgroundHover; +$variable-option-bg: $blue-light; //Switch Slider // ------------------------- $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-on-bg: linear-gradient(90deg, $yellow, $red); $switch-slider-shadow: 0 0 3px $dark-5; //Checkbox // ------------------------- $checkbox-bg: $gray-6; $checkbox-border: 1px solid $gray-3; -$checkbox-checked-bg: linear-gradient(0deg, #ff9830, #e55400); +$checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); $checkbox-color: $gray-7; //Panel Edit @@ -365,11 +356,12 @@ $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-viz-item-bg-hover: lighten($blue, 62%); + $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: lighten($blue, 62%); +$panel-grid-placeholder-shadow: 0 0 4px $blue-light; // logs $logs-color-unkown: $gray-5; diff --git a/scripts/cli/generateSassVariableFiles.ts b/scripts/cli/generateSassVariableFiles.ts new file mode 100644 index 00000000000..aaea77b200d --- /dev/null +++ b/scripts/cli/generateSassVariableFiles.ts @@ -0,0 +1,35 @@ +import fs from 'fs'; +import darkTheme from '@grafana/ui/src/themes/dark'; +import lightTheme from '@grafana/ui/src/themes/light'; +import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.scss.tmpl'; +import { lightThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.light.scss.tmpl'; + +const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.scss'; +const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.scss'; + +const writeVariablesFile = async (path: string, data: string) => { + return new Promise((resolve, reject) => { + fs.writeFile(path, data, e => { + if (e) { + reject(e); + } else { + resolve(data); + } + }); + }); +}; + +const generateSassVariableFiles = async () => { + try { + await Promise.all([ + writeVariablesFile(darkThemeVariablesPath, darkThemeVarsTemplate(darkTheme)), + writeVariablesFile(lightThemeVariablesPath, lightThemeVarsTemplate(lightTheme)), + ]); + console.log('\nSASS variable files generated'); + } catch (error) { + console.error('\nWriting SASS variable files failed', error); + process.exit(1); + } +}; + +generateSassVariableFiles(); diff --git a/scripts/cli/nodemon.json b/scripts/cli/nodemon.json deleted file mode 100644 index 3875f244868..00000000000 --- a/scripts/cli/nodemon.json +++ /dev/null @@ -1,7 +0,0 @@ - -{ - "watch": ["packages/grafana-ui/src/themes"], - "ext": "ts", - "ignore": ["src/**/*.spec.ts"], - "exec": "ts-node ./src/index.ts" -} diff --git a/scripts/cli/start.js b/scripts/cli/start.js new file mode 100644 index 00000000000..a31b04b2db2 --- /dev/null +++ b/scripts/cli/start.js @@ -0,0 +1,23 @@ +const concurrently = require('concurrently'); + +const startTask = async () => { + try { + const res = await concurrently([ + { + command: 'nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run themes:generate', + name: 'SASS variables generator', + }, + { + command: 'webpack-dev-server --progress --colors --mode development --config scripts/webpack/webpack.hot.js', + name: 'Dev server', + }, + ], { + killOthers: ['failure', 'failure'], + }); + } catch (e) { + console.error(e); + process.exit(1); + } +}; + +startTask(); diff --git a/scripts/cli/watch.ts b/scripts/cli/watch.ts deleted file mode 100644 index 3592959a795..00000000000 --- a/scripts/cli/watch.ts +++ /dev/null @@ -1,24 +0,0 @@ -// import chokidar from 'chokidar'; -import darkTheme from '@grafana/ui/src/themes/dark'; -import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.scss.tmpl'; -import fs from 'fs'; - -console.log(__dirname + '../../packages/grafana-ui/src/themes/dark.ts'); - -const fileToWatch = [ - __dirname + '/../../packages/grafana-ui/src/themes/dark.ts', - __dirname + '/../../packages/grafana-ui/src/themes/light.ts', -]; -// const watchService = chokidar.watch(fileToWatch); -console.log(`Watching for file changes on ${fileToWatch}`); - -// watchService.on('change', path => { - -const result = darkThemeVarsTemplate(darkTheme); -console.log(result); - -fs.writeFile(__dirname + '/../../public/sass/_variables.dark.scss', result, e => { - console.log(e); -}); - -// }); diff --git a/yarn.lock b/yarn.lock index cedf13bd558..24c20b33a99 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1506,14 +1506,6 @@ resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.10.tgz#780d552467824be4a241b29510a7873a7432c4a6" integrity sha512-fOM/Jhv51iyugY7KOBZz2ThfT1gwvsGCfWxpLpZDgkGjpEO4Le9cld07OdskikLjDUQJ43dzDaVRSFwQlpdqVg== -"@types/chokidar@^1.7.5": - version "1.7.5" - resolved "https://registry.yarnpkg.com/@types/chokidar/-/chokidar-1.7.5.tgz#1fa78c8803e035bed6d98e6949e514b133b0c9b6" - integrity sha512-PDkSRY7KltW3M60hSBlerxI8SFPXsO3AL/aRVsO4Kh9IHRW74Ih75gUuTd/aE4LSSFqypb10UIX3QzOJwBQMGQ== - dependencies: - "@types/events" "*" - "@types/node" "*" - "@types/classnames@^2.2.6": version "2.2.7" resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.7.tgz#fb68cc9be8487e6ea5b13700e759bfbab7e0fefd" @@ -1734,11 +1726,6 @@ "@types/cheerio" "*" "@types/react" "*" -"@types/events@*": - version "3.0.0" - resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7" - integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g== - "@types/geojson@*": version "7946.0.5" resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.5.tgz#9aea839ea5af4b1bc079f1d9fa977d48665e02b0" @@ -1764,11 +1751,16 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-11.9.0.tgz#35fea17653490dab82e1d5e69731abfdbf13160d" integrity sha512-ry4DOrC+xenhQbzk1iIPzCZGhhPGEFv7ia7Iu6XXSLVluiJIe9FfG7Iu3mObH9mpxEXCWLCMU4JWbCCR9Oy1Zg== -"@types/node@^10.12.18", "@types/node@^10.12.24": +"@types/node@^10.12.18": version "10.12.25" resolved "https://registry.yarnpkg.com/@types/node/-/node-10.12.25.tgz#0d01a7dd6127de60d861ece4a650963042abb538" integrity sha512-IcvnGLGSQFDvC07Bz2I8SX+QKErDZbUdiQq7S2u3XyzTyJfUmT0sWJMbeQkMzpTAkO7/N7sZpW/arUM2jfKsbQ== +"@types/node@^8.0.31": + version "8.10.40" + resolved "https://registry.yarnpkg.com/@types/node/-/node-8.10.40.tgz#4314888d5cd537945d73e9ce165c04cc550144a4" + integrity sha512-RRSjdwz63kS4u7edIwJUn8NqKLLQ6LyqF/X4+4jp38MBT3Vwetewi2N4dgJEshLbDwNgOJXNYoOwzVZUSSLhkQ== + "@types/prop-types@*": version "15.5.8" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.8.tgz#8ae4e0ea205fe95c3901a5a1df7f66495e3a56ce" @@ -4702,7 +4694,7 @@ child-process-promise@^2.2.1: node-version "^1.0.0" promise-polyfill "^6.0.1" -chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.4, chokidar@^2.1.0: +chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.4: version "2.1.1" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.1.tgz#adc39ad55a2adf26548bd2afa048f611091f9184" integrity sha512-gfw3p2oQV2wEt+8VuMlNsPjCxDxvvgnm/kz+uATu805mWVF8IJN7uz9DN7iBz+RMJISmiVbCOBFs9qBGMjtPfQ== @@ -5216,6 +5208,21 @@ concat-stream@1.6.2, concat-stream@^1.4.6, concat-stream@^1.5.0, concat-stream@^ readable-stream "^2.2.2" typedarray "^0.0.6" +concurrently@^4.1.0: + version "4.1.0" + resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-4.1.0.tgz#17fdf067da71210685d9ea554423ef239da30d33" + integrity sha512-pwzXCE7qtOB346LyO9eFWpkFJVO3JQZ/qU/feGeaAHiX1M3Rw3zgXKc5cZ8vSH5DGygkjzLFDzA/pwoQDkRNGg== + dependencies: + chalk "^2.4.1" + date-fns "^1.23.0" + lodash "^4.17.10" + read-pkg "^4.0.1" + rxjs "^6.3.3" + spawn-command "^0.0.2-1" + supports-color "^4.5.0" + tree-kill "^1.1.0" + yargs "^12.0.1" + config-chain@~1.1.11: version "1.1.12" resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa" @@ -6076,7 +6083,7 @@ data-urls@^1.0.0: whatwg-mimetype "^2.2.0" whatwg-url "^7.0.0" -date-fns@^1.27.2: +date-fns@^1.23.0, date-fns@^1.27.2: version "1.30.1" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c" integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw== @@ -6127,7 +6134,7 @@ debug@^4.0.1, debug@^4.1.0: dependencies: ms "^2.1.1" -debuglog@*, debuglog@^1.0.1: +debuglog@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492" integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI= @@ -9054,7 +9061,7 @@ import-local@^2.0.0: pkg-dir "^3.0.0" resolve-cwd "^2.0.0" -imurmurhash@*, imurmurhash@^0.1.4: +imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha1-khi5srkoojixPcT7a21XbyMUU+o= @@ -10764,11 +10771,6 @@ lockfile@^1.0.4: dependencies: signal-exit "^3.0.2" -lodash._baseindexof@*: - version "3.1.0" - resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c" - integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw= - lodash._baseuniq@~4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8" @@ -10777,29 +10779,12 @@ lodash._baseuniq@~4.6.0: lodash._createset "~4.0.0" lodash._root "~3.0.0" -lodash._bindcallback@*: - version "3.0.1" - resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e" - integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4= - -lodash._cacheindexof@*: - version "3.0.2" - resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92" - integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI= - -lodash._createcache@*: - version "3.1.2" - resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093" - integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM= - dependencies: - lodash._getnative "^3.0.0" - lodash._createset@~4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26" integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY= -lodash._getnative@*, lodash._getnative@^3.0.0: +lodash._getnative@^3.0.0: version "3.9.1" resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U= @@ -10893,11 +10878,6 @@ lodash.mergewith@^4.6.0: resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927" integrity sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ== -lodash.restparam@*: - version "3.6.1" - resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805" - integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU= - lodash.some@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d" @@ -10948,11 +10928,6 @@ lodash@~4.3.0: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.3.0.tgz#efd9c4a6ec53f3b05412429915c3e4824e4d25a4" integrity sha1-79nEpuxT87BUEkKZFcPkgk5NJaQ= -log-prefix@0.1.1: - version "0.1.1" - resolved "https://registry.yarnpkg.com/log-prefix/-/log-prefix-0.1.1.tgz#3ec492138c8044c9f9732298492dca87850cac90" - integrity sha512-aP1Lst8OCdZKATqzXDN0JBissNVZuiKLyo6hOXDBxaQ1jHDsaxh2J1i5Pp0zMy6ayTKDWfUlLMXyLaQe1PJ48g== - log-symbols@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18" @@ -10967,13 +10942,6 @@ log-symbols@^2.0.0, log-symbols@^2.1.0, log-symbols@^2.2.0: dependencies: chalk "^2.0.1" -log-timestamp@^0.2.1: - version "0.2.1" - resolved "https://registry.yarnpkg.com/log-timestamp/-/log-timestamp-0.2.1.tgz#02d4fd07550d6e3226d2741d89e7c693410276d6" - integrity sha512-a+hFCox7Up3gBrfREwXGjUEozdqjJrqpy82a41BUSEKlmvEZbsjR9vaYh/2PNFwydxX1r3zgfS/mAdNmRY/lKQ== - dependencies: - log-prefix "0.1.1" - log-update@^2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708" @@ -14504,7 +14472,7 @@ readable-stream@~1.1.10: isarray "0.0.1" string_decoder "~0.10.x" -readdir-scoped-modules@*, readdir-scoped-modules@^1.0.0: +readdir-scoped-modules@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.0.2.tgz#9fafa37d286be5d92cbaebdee030dc9b5f406747" integrity sha1-n6+jfShr5dksuuve4DDcm19AZ0c= @@ -15902,6 +15870,11 @@ space-separated-tokens@^1.0.0: dependencies: trim "0.0.1" +spawn-command@^0.0.2-1: + version "0.0.2-1" + resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0" + integrity sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A= + spawn-promise@^0.1.8: version "0.1.8" resolved "https://registry.yarnpkg.com/spawn-promise/-/spawn-promise-0.1.8.tgz#a5bea98814c48f52cbe02720e7fe2d6fc3b5119a" @@ -16346,6 +16319,13 @@ supports-color@^3.1.2, supports-color@^3.2.3: dependencies: has-flag "^1.0.0" +supports-color@^4.5.0: + version "4.5.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b" + integrity sha1-vnoN5ITexcXN34s9WRJQRJEvY1s= + dependencies: + has-flag "^2.0.0" + supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -16776,6 +16756,11 @@ traverse@^0.6.6: resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137" integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc= +tree-kill@^1.1.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.1.tgz#5398f374e2f292b9dcc7b2e71e30a5c3bb6c743a" + integrity sha512-4hjqbObwlh2dLyW4tcz0Ymw0ggoaVDMveUB9w8kFSQScdRLo0gxO9J7WFcUBo+W3C1TLdFIEwNOWebgZZ0RH9Q== + trim-newlines@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613" @@ -18057,7 +18042,7 @@ yargs@^11.0.0, yargs@^11.1.0: y18n "^3.2.1" yargs-parser "^9.0.2" -yargs@^12.0.5: +yargs@^12.0.1, yargs@^12.0.5: version "12.0.5" resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13" integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw== From 4903b03d246b200e92beafca5e5ab417c51d170f Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Wed, 13 Feb 2019 12:32:42 +0100 Subject: [PATCH 03/25] Remove precommit from npm scrips --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 7eb3c1dd1c3..72d3078568a 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,6 @@ "typecheck": "tsc --noEmit", "jest": "jest --notify --watch", "api-tests": "jest --notify --watch --config=tests/api/jest.js", - "precommit": "grunt precommit", "storybook": "cd packages/grafana-ui && yarn storybook", "themes:generate": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/generateSassVariableFiles.ts" }, From 06bae9aa4658cc060cac10ae3f46b0be76e9c166 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Wed, 13 Feb 2019 14:45:11 +0100 Subject: [PATCH 04/25] Added common theme variabless generation, created GrafanaThemeCommons interface --- .../src/themes/_variables.dark.scss.tmpl.ts | 2 + .../src/themes/_variables.light.scss.tmpl.ts | 2 + .../src/themes/_variables.scss.tmpl.ts | 217 ++++++++++++++++++ packages/grafana-ui/src/themes/default.ts | 19 +- packages/grafana-ui/src/types/theme.ts | 7 +- public/sass/_variables.scss | 8 +- scripts/cli/generateSassVariableFiles.ts | 4 + 7 files changed, 243 insertions(+), 16 deletions(-) create mode 100644 packages/grafana-ui/src/themes/_variables.scss.tmpl.ts 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 617f9d5fd83..578de71301a 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -1,3 +1,5 @@ +/* tslint:disable:max-line-length */ + import { GrafanaTheme } from '../types'; export const darkThemeVarsTemplate = (theme: GrafanaTheme) => ` 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 11444e76bab..80e425af0f8 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -1,3 +1,5 @@ +/* tslint:disable:max-line-length */ + import { GrafanaTheme } from '../types'; export const lightThemeVarsTemplate = (theme: GrafanaTheme) => ` diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts new file mode 100644 index 00000000000..671ab5bb631 --- /dev/null +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -0,0 +1,217 @@ +/* tslint:disable:max-line-length */ + +import { GrafanaThemeCommons } from '../types'; + +export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) => ` + // Options + // + // Quickly modify global styling by enabling or disabling optional features. + + $enable-flex: true !default; + $enable-hover-media-query: false !default; + + // Spacing + // + // Control the default styling of most Bootstrap elements by modifying these + // variables. Mostly focused on spacing. + + $spacer: 1rem !default; + $spacer-x: $spacer !default; + $spacer-y: $spacer !default; + $spacers: ( + 0: (x: 0, y: 0), + 1: (x: $spacer-x, y: $spacer-y), + 2: (x: ($spacer-x * 1.5), y: ($spacer-y * 1.5)), + 3: (x: ($spacer-x * 3), y: ($spacer-y * 3)) + ) + !default; + $border-width: 1px !default; + + // Grid breakpoints + // + // Define the minimum and maximum dimensions at which your layout will change, + // adapting to different screen sizes, for use in media queries. + + $grid-breakpoints: (xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px) !default; + + // Grid containers + // + // Define the maximum width of .container for different screen sizes. + + $container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1080px) !default; + + // Grid columns + // + // Set the number of columns and specify the width of the gutters. + + $grid-columns: 12 !default; + $grid-gutter-width: 30px !default; + + $enable-flex: true; + + // Typography + // ------------------------- + + $font-family-sans-serif: ${theme.typography.fontFamily.sansSerif}; + $font-family-serif: ${theme.typography.fontFamily.serif}; + $font-family-monospace: ${theme.typography.fontFamily.monospace}; + $font-family-base: $font-family-sans-serif !default; + + $font-size-root: 14px !default; + $font-size-base: 13px !default; + + $font-size-lg: 18px !default; + $font-size-md: 14px !default; + $font-size-sm: 12px !default; + $font-size-xs: 10px !default; + + $line-height-base: 1.5 !default; + $font-weight-semi-bold: 500; + + $font-size-h1: 2rem !default; + $font-size-h2: 1.75rem !default; + $font-size-h3: 1.5rem !default; + $font-size-h4: 1.3rem !default; + $font-size-h5: 1.2rem !default; + $font-size-h6: 1rem !default; + + $display1-size: 6rem !default; + $display2-size: 5.5rem !default; + $display3-size: 4.5rem !default; + $display4-size: 3.5rem !default; + + $display1-weight: 400 !default; + $display2-weight: 400 !default; + $display3-weight: 400 !default; + $display4-weight: 400 !default; + + $lead-font-size: 1.25rem !default; + $lead-font-weight: 300 !default; + + $headings-margin-bottom: ($spacer / 2) !default; + $headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; + $headings-font-weight: 400 !default; + $headings-line-height: 1.1 !default; + + $hr-border-width: $border-width !default; + $dt-font-weight: bold !default; + + // Components + // + // Define common padding and border radius sizes and more. + + $line-height-lg: (4 / 3) !default; + $line-height-sm: 1.5 !default; + + $border-radius: 3px !default; + $border-radius-lg: 5px !default; + $border-radius-sm: 2px!default; + + // Page + + $page-sidebar-width: 11rem; + $page-sidebar-margin: 4rem; + + // Links + // ------------------------- + $link-decoration: none !default; + $link-hover-decoration: none !default; + + // Tables + // + // Customizes the table component with basic values, each used across all table variations. + + $table-cell-padding: 4px 10px !default; + + // Forms + $input-padding-x: 10px !default; + $input-padding-y: 8px !default; + $input-line-height: 18px !default; + + $input-btn-border-width: 1px; + $input-border-radius: 0 $border-radius $border-radius 0 !default; + $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default; + + $label-border-radius: $border-radius 0 0 $border-radius !default; + $label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default; + + $input-padding-y-sm: 4px !default; + + $input-padding-x-lg: 20px !default; + $input-padding-y-lg: 10px !default; + + $input-height: 35px !default; + + $gf-form-margin: 0.2rem; + $gf-form-input-height: 35px; + + $cursor-disabled: not-allowed !default; + + // Form validation icons + $form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") + !default; + $form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") + !default; + $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") + !default; + + // Z-index master list + // ------------------------- + // Used for a bird's eye view of components dependent on the z-axis + // Try to avoid customizing these :) + $zindex-dropdown: 1000; + $zindex-navbar-fixed: 1020; + $zindex-sidemenu: 1025; + $zindex-tooltip: 1030; + $zindex-modal-backdrop: 1040; + $zindex-modal: 1050; + $zindex-typeahead: 1060; + + // Buttons + // + + $btn-padding-x: 1rem !default; + $btn-padding-y: 0.7rem !default; + $btn-line-height: 1 !default; + $btn-font-weight: 500 !default; + + $btn-padding-x-sm: 0.5rem !default; + $btn-padding-y-sm: 0.25rem !default; + + $btn-padding-x-lg: 21px !default; + $btn-padding-y-lg: 11px !default; + + $btn-padding-x-xl: 21px !default; + $btn-padding-y-xl: 11px !default; + + $btn-border-radius: 2px; + + $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; + + // sidemenu + $side-menu-width: 60px; + + // dashboard + $panel-margin: 10px; + $dashboard-padding: $panel-margin * 2; + $panel-horizontal-padding: 10; + $panel-vertical-padding: 5; + $panel-padding: 0px $panel-horizontal-padding+0px $panel-vertical-padding+0px $panel-horizontal-padding+0px; + + // tabs + $tabs-padding: 10px 15px 9px; + + $external-services: ( + github: (bgColor: #464646, borderColor: #393939, icon: ''), + gitlab: (bgColor: #fc6d26, borderColor: #e24329, icon: ''), + google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''), + grafanacom: (bgColor: #262628, borderColor: #393939, icon: ''), + oauth: (bgColor: #262628, borderColor: #393939, icon: '') + ) + !default; + + :export { + panelHorizontalPadding: $panel-horizontal-padding; + panelVerticalPadding: $panel-vertical-padding; + } +`; diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index bf318f526e7..57ee960f3d6 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -1,12 +1,12 @@ +import { GrafanaThemeCommons } from '../types/theme'; - -const theme = { +const theme: GrafanaThemeCommons = { name: 'Grafana Default', typography: { fontFamily: { sansSerif: "'Roboto', Helvetica, Arial, sans-serif;", serif: "Georgia, 'Times New Roman', Times, serif;", - monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace;" + monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace;", }, size: { base: '13px', @@ -31,23 +31,22 @@ const theme = { lineHeight: { xs: 1, s: 1.1, - m: 4/3, - l: 1.5 - } + m: 4 / 3, + l: 1.5, + }, }, brakpoints: { xs: '0', s: '544px', m: '768px', l: '992px', - xl: '1200px' + xl: '1200px', }, spacing: { xs: '0', s: '0.2rem', m: '1rem', l: '1.5rem', - xl: '3rem', gutter: '30px', }, border: { @@ -55,8 +54,8 @@ const theme = { xs: '2px', s: '3px', m: '5px', - } - } + }, + }, }; export default theme; diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts index 8a79658b423..2d281cc3d9f 100644 --- a/packages/grafana-ui/src/types/theme.ts +++ b/packages/grafana-ui/src/types/theme.ts @@ -3,8 +3,7 @@ export enum GrafanaThemeType { Dark = 'dark', } -export interface GrafanaTheme { - type: GrafanaThemeType; +export interface GrafanaThemeCommons { name: string; // TODO: not sure if should be a part of theme brakpoints: { @@ -62,6 +61,10 @@ export interface GrafanaTheme { m: string; }; }; +} + +export interface GrafanaTheme extends GrafanaThemeCommons { + type: GrafanaThemeType; background: { dropdown: string; scrollbar: string; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 4e9e69c4d2f..1fbc22337e8 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -31,7 +31,7 @@ $grid-breakpoints: (xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px) !default // Grid containers // -// Define the maximum width of `.container` for different screen sizes. +// Define the maximum width of .container for different screen sizes. $container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1080px) !default; @@ -114,7 +114,7 @@ $link-hover-decoration: none !default; // Tables // -// Customizes the `.table` component with basic values, each used across all table variations. +// Customizes the table component with basic values, each used across all table variations. $table-cell-padding: 4px 10px !default; @@ -206,6 +206,6 @@ $external-services: ( !default; :export { - panelHorizontalPadding: $panel-horizontal-padding; - panelVerticalPadding: $panel-vertical-padding; + panelhorizontalpadding: $panel-horizontal-padding; + panelverticalpadding: $panel-vertical-padding; } diff --git a/scripts/cli/generateSassVariableFiles.ts b/scripts/cli/generateSassVariableFiles.ts index aaea77b200d..5d0434f6f9d 100644 --- a/scripts/cli/generateSassVariableFiles.ts +++ b/scripts/cli/generateSassVariableFiles.ts @@ -1,11 +1,14 @@ import fs from 'fs'; import darkTheme from '@grafana/ui/src/themes/dark'; import lightTheme from '@grafana/ui/src/themes/light'; +import defaultTheme from '@grafana/ui/src/themes/default'; import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.scss.tmpl'; import { lightThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.light.scss.tmpl'; +import { commonThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.scss.tmpl'; const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.scss'; const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.scss'; +const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.scss'; const writeVariablesFile = async (path: string, data: string) => { return new Promise((resolve, reject) => { @@ -24,6 +27,7 @@ const generateSassVariableFiles = async () => { await Promise.all([ writeVariablesFile(darkThemeVariablesPath, darkThemeVarsTemplate(darkTheme)), writeVariablesFile(lightThemeVariablesPath, lightThemeVarsTemplate(lightTheme)), + writeVariablesFile(defaultThemeVariablesPath, commonThemeVarsTemplate(defaultTheme)), ]); console.log('\nSASS variable files generated'); } catch (error) { From a09250a309d51f5d7972354b01e49bece6c61a64 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Wed, 13 Feb 2019 14:47:59 +0100 Subject: [PATCH 05/25] Simple CLI for running grafana in dev env --- package.json | 7 ++++++- scripts/cli/index.ts | 22 ++++++++++++++++++++++ scripts/cli/start.js | 23 ----------------------- scripts/cli/start.ts | 32 ++++++++++++++++++++++++++++++++ yarn.lock | 34 ++++++++++++++++++++++++---------- 5 files changed, 84 insertions(+), 34 deletions(-) create mode 100644 scripts/cli/index.ts delete mode 100644 scripts/cli/start.js create mode 100644 scripts/cli/start.ts diff --git a/package.json b/package.json index 72d3078568a..cff733a84db 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,9 @@ "@babel/preset-react": "^7.0.0", "@babel/preset-typescript": "^7.1.0", "@rtsao/plugin-proposal-class-properties": "^7.0.1-patch.1", + "@types/chalk": "^2.2.0", "@types/classnames": "^2.2.6", + "@types/commander": "^2.12.2", "@types/d3": "^4.10.1", "@types/enzyme": "^3.1.13", "@types/jest": "^23.3.2", @@ -36,6 +38,7 @@ "babel-jest": "^23.6.0", "babel-loader": "^8.0.4", "babel-plugin-angularjs-annotate": "^0.9.0", + "chalk": "^2.4.2", "clean-webpack-plugin": "^0.1.19", "concurrently": "^4.1.0", "css-loader": "^0.28.7", @@ -114,7 +117,9 @@ }, "scripts": { "dev": "webpack --progress --colors --mode development --config scripts/webpack/webpack.dev.js", - "start": "node ./scripts/cli/start.js", + "start": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --theme", + "start:hot": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --hot --theme", + "start:ignoreTheme": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --hot", "watch": "webpack --progress --colors --watch --mode development --config scripts/webpack/webpack.dev.js", "build": "grunt build", "test": "grunt test", diff --git a/scripts/cli/index.ts b/scripts/cli/index.ts new file mode 100644 index 00000000000..51919f13173 --- /dev/null +++ b/scripts/cli/index.ts @@ -0,0 +1,22 @@ +import program from 'commander'; +import { startTask } from './start'; +import chalk from 'chalk'; + +program + .option('-h, --hot', 'Runs front-end with hot reload enabled') + .option('-t, --theme', 'Watches for theme changes and regenerates variables.scss files') + .option('-d, --depreciate ', 'Inform about npm script deprecation', v => v.split(',')) + .parse(process.argv); + +if (program.depreciate && program.depreciate.length === 2) { + console.log( + chalk.yellow.bold( + `[NPM script depreciation] ${program.depreciate[0]} is deprecated! Use ${program.depreciate[1]} instead!` + ) + ); +} + +startTask({ + watchThemes: !!program.theme, + hot: !!program.hot, +}); diff --git a/scripts/cli/start.js b/scripts/cli/start.js deleted file mode 100644 index a31b04b2db2..00000000000 --- a/scripts/cli/start.js +++ /dev/null @@ -1,23 +0,0 @@ -const concurrently = require('concurrently'); - -const startTask = async () => { - try { - const res = await concurrently([ - { - command: 'nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run themes:generate', - name: 'SASS variables generator', - }, - { - command: 'webpack-dev-server --progress --colors --mode development --config scripts/webpack/webpack.hot.js', - name: 'Dev server', - }, - ], { - killOthers: ['failure', 'failure'], - }); - } catch (e) { - console.error(e); - process.exit(1); - } -}; - -startTask(); diff --git a/scripts/cli/start.ts b/scripts/cli/start.ts new file mode 100644 index 00000000000..7df202387d7 --- /dev/null +++ b/scripts/cli/start.ts @@ -0,0 +1,32 @@ +const concurrently = require('concurrently'); + +export const startTask = async ({ watchThemes, hot }: { watchThemes: boolean; hot: boolean }) => { + const jobs = []; + if (watchThemes) { + jobs.push({ + command: 'nodemon -e ts -w ./packages/grafana-ui/src/themes -x yarn run themes:generate', + name: 'SASS variables generator', + }); + } + + if (!hot) { + jobs.push({ + command: 'webpack --progress --colors --watch --mode development --config scripts/webpack/webpack.dev.js', + name: 'Webpack', + }); + } else { + jobs.push({ + command: 'webpack-dev-server --progress --colors --mode development --config scripts/webpack/webpack.hot.js', + name: 'Dev server', + }); + } + + try { + await concurrently(jobs, { + killOthers: ['failure', 'failure'], + }); + } catch (e) { + console.error(e); + process.exit(1); + } +}; diff --git a/yarn.lock b/yarn.lock index 24c20b33a99..4c32912ea5c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1501,6 +1501,13 @@ react-input-autosize "^2.2.1" react-transition-group "^2.2.1" +"@types/chalk@^2.2.0": + version "2.2.0" + resolved "https://registry.yarnpkg.com/@types/chalk/-/chalk-2.2.0.tgz#b7f6e446f4511029ee8e3f43075fb5b73fbaa0ba" + integrity sha512-1zzPV9FDe1I/WHhRkf9SNgqtRJWZqrBWgu7JGveuHmmyR9CnAPCie2N/x+iHrgnpYBIcCJWHBoMRv2TRWktsvw== + dependencies: + chalk "*" + "@types/cheerio@*": version "0.22.10" resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.10.tgz#780d552467824be4a241b29510a7873a7432c4a6" @@ -1511,6 +1518,13 @@ resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.7.tgz#fb68cc9be8487e6ea5b13700e759bfbab7e0fefd" integrity sha512-rzOhiQ55WzAiFgXRtitP/ZUT8iVNyllEpylJ5zHzR4vArUvMB39GTk+Zon/uAM0JxEFAWnwsxC2gH8s+tZ3Myg== +"@types/commander@^2.12.2": + version "2.12.2" + resolved "https://registry.yarnpkg.com/@types/commander/-/commander-2.12.2.tgz#183041a23842d4281478fa5d23c5ca78e6fd08ae" + integrity sha512-0QEFiR8ljcHp9bAbWxecjVRuAMr16ivPiGOw6KFQBVrVd0RQIcM3xKdRisH2EDWgVWujiYtHwhSkSUoAAGzH7Q== + dependencies: + commander "*" + "@types/d3-array@*": version "1.2.5" resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-1.2.5.tgz#7f87eccfe53396d48700294a518c379be14c8254" @@ -4596,6 +4610,15 @@ center-align@^0.1.1: align-text "^0.1.3" lazy-cache "^1.0.3" +chalk@*, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2: + version "2.4.2" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" + integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== + dependencies: + ansi-styles "^3.2.1" + escape-string-regexp "^1.0.5" + supports-color "^5.3.0" + chalk@2.4.1: version "2.4.1" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e" @@ -4616,15 +4639,6 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3, chalk@~1.1.1: strip-ansi "^3.0.0" supports-color "^2.0.0" -chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.1, chalk@^2.3.2, chalk@^2.4.1, chalk@^2.4.2: - version "2.4.2" - resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" - integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== - dependencies: - ansi-styles "^3.2.1" - escape-string-regexp "^1.0.5" - supports-color "^5.3.0" - chalk@~0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f" @@ -5102,7 +5116,7 @@ comma-separated-tokens@^1.0.0: dependencies: trim "0.0.1" -commander@2, commander@^2.12.1, commander@^2.13.0, commander@^2.14.1, commander@^2.19.0, commander@^2.8.1, commander@^2.9.0: +commander@*, commander@2, commander@^2.12.1, commander@^2.13.0, commander@^2.14.1, commander@^2.19.0, commander@^2.8.1, commander@^2.9.0: version "2.19.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a" integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg== From 4366b1588e4f963bab6443c0ec6c57b6c3b1cbcf Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Wed, 13 Feb 2019 14:58:01 +0100 Subject: [PATCH 06/25] Added deprecation warning to npm watch script - use start script instead --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cff733a84db..dc17c344ee4 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,7 @@ "start": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --theme", "start:hot": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --hot --theme", "start:ignoreTheme": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --hot", - "watch": "webpack --progress --colors --watch --mode development --config scripts/webpack/webpack.dev.js", + "watch": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/index.ts --theme -d watch,start", "build": "grunt build", "test": "grunt test", "tslint": "tslint -c tslint.json --project tsconfig.json", From d3b90d5b78178c38489e545f2b2d7743cfc9ee17 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Wed, 13 Feb 2019 14:58:27 +0100 Subject: [PATCH 07/25] Fixed sass vars template files --- .../src/themes/_variables.dark.scss.tmpl.ts | 770 +++++++++--------- .../src/themes/_variables.light.scss.tmpl.ts | 759 +++++++++-------- .../src/themes/_variables.scss.tmpl.ts | 322 ++++---- packages/grafana-ui/src/themes/default.ts | 6 +- 4 files changed, 926 insertions(+), 931 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 578de71301a..5b5a229a7f9 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -2,389 +2,389 @@ import { GrafanaTheme } from '../types'; -export const darkThemeVarsTemplate = (theme: GrafanaTheme) => ` - // Global values - // -------------------------------------------------- - - $theme-name: dark; - - // Grays - // ------------------------- - $black: ${theme.colors.black}; - $dark-1: ${theme.colors.dark2}; - $dark-2: ${theme.colors.dark2}; - $dark-3: ${theme.colors.dark3}; - $dark-4: ${theme.colors.dark4}; - $dark-5: ${theme.colors.dark5}; - $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}; - - $gray-blue: #212327; - $input-black: #09090b; - - $white: ${theme.colors.white}; - - // Accent colors - // ------------------------- - $blue: ${theme.colors.blue}; - $blue-dark: #005f81; - $green: #299c46; - $red: #d44a3a; - $yellow: #ecbb13; - $purple: #9933cc; - $variable: #32d1df; - $orange: #eb7b18; - - $brand-primary: $orange; - $brand-success: $green; - $brand-warning: $brand-primary; - $brand-danger: $red; - - $query-red: #e24d42; - $query-green: #74e680; - $query-purple: #fe85fc; - $query-keyword: #66d9ef; - $query-orange: $orange; - - // Status colors - // ------------------------- - $online: #10a345; - $warn: #f79520; - $critical: #ed2e18; - - // Scaffolding - // ------------------------- - $body-bg: rgb(23, 24, 25); - $page-bg: rgb(22, 23, 25); - - $body-color: $gray-4; - $text-color: $gray-4; - $text-color-strong: $white; - $text-color-weak: $gray-2; - $text-color-faint: $dark-5; - $text-color-emphasis: $gray-5; - - $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); - $textShadow: none; - - // gradients - $brand-gradient: linear-gradient( - to right, - rgba(255, 213, 0, 0.7) 0%, - rgba(255, 68, 0, 0.7) 99%, - rgba(255, 68, 0, 0.7) 100% - ); - - $page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); - $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); - - // Links - // ------------------------- - $link-color: darken($white, 11%); - $link-color-disabled: darken($link-color, 30%); - $link-hover-color: $white; - $external-link-color: $blue; - - // Typography - // ------------------------- - $headings-color: darken($white, 11%); - $abbr-border-color: $gray-3 !default; - $text-muted: $text-color-weak; - - $hr-border-color: $dark-4; - - // Panel - // ------------------------- - $panel-bg: #212124; - $panel-border: solid 1px $dark-1; - $panel-header-hover-bg: $dark-4; - $panel-corner: $panel-bg; - - // page header - $page-header-bg: linear-gradient(90deg, #292a2d, black); - $page-header-shadow: inset 0px -4px 14px $dark-2; - $page-header-border-color: $dark-4; - - $divider-border-color: $gray-1; - - // Graphite Target Editor - $tight-form-bg: $dark-3; - $tight-form-func-bg: $dark-4; - $tight-form-func-highlight-bg: $dark-5; - - $modal-backdrop-bg: #353c42; - $code-tag-bg: $dark-1; - $code-tag-border: $dark-4; - - // cards - $card-background: linear-gradient(135deg, #2f2f32, #262628); - $card-background-hover: linear-gradient(135deg, #343436, #262628); - $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); - - // Lists - $list-item-bg: $card-background; - $list-item-hover-bg: lighten($gray-blue, 2%); - $list-item-link-color: $text-color; - $list-item-shadow: $card-shadow; - - $empty-list-cta-bg: $gray-blue; - - // Scrollbars - $scrollbarBackground: #404357; - $scrollbarBackground2: #3a3a3a; - $scrollbarBorder: black; - - // Tables - // ------------------------- - $table-bg: transparent; // overall background-color - $table-bg-accent: $dark-3; // for striping - $table-border: $dark-3; // table and cell border - - $table-bg-odd: $dark-2; - $table-bg-hover: $dark-3; - - // Buttons - // ------------------------- - $btn-primary-bg: #ff6600; - $btn-primary-bg-hl: #bc3e06; - - $btn-secondary-bg-hl: lighten($blue-dark, 5%); - $btn-secondary-bg: $blue-dark; - - $btn-success-bg: $green; - $btn-success-bg-hl: darken($green, 6%); - - $btn-warning-bg: $brand-warning; - $btn-warning-bg-hl: lighten($brand-warning, 8%); - - $btn-danger-bg: $red; - $btn-danger-bg-hl: darken($red, 8%); - - $btn-inverse-bg: $dark-3; - $btn-inverse-bg-hl: lighten($dark-3, 4%); - $btn-inverse-text-color: $link-color; - $btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1); - - $btn-link-color: $gray-3; - - $iconContainerBackground: $black; - - $btn-divider-left: $dark-4; - $btn-divider-right: $dark-2; - - $btn-drag-image: '../img/grab_dark.svg'; - - // Forms - // ------------------------- - $input-bg: $input-black; - $input-bg-disabled: $dark-3; - - $input-color: $gray-4; - $input-border-color: $dark-3; - $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); - $input-border-focus: $input-border-color; - $input-box-shadow-focus: rgba(102, 175, 233, 0.6); - $input-color-placeholder: $gray-1 !default; - $input-label-bg: $gray-blue; - $input-label-border-color: $dark-3; - $input-color-select-arrow: $white; - - // Input placeholder text color - $placeholderText: darken($text-color, 25%); - - // Search - $search-shadow: 0 0 30px 0 $black; - $search-filter-box-bg: $gray-blue; - - // Typeahead - $typeahead-shadow: 0 5px 10px 0 $black; - $typeahead-selected-bg: $dark-4; - $typeahead-selected-color: $yellow; - - // Dropdowns - // ------------------------- - $dropdownBackground: $dark-3; - $dropdownBorder: rgba(0, 0, 0, 0.2); - $dropdownDividerTop: transparent; - $dropdownDividerBottom: #444; - - $dropdownLinkColor: $text-color; - $dropdownLinkColorHover: $white; - $dropdownLinkColorActive: $white; - - $dropdownLinkBackgroundHover: $dark-4; - - // Horizontal forms & lists - // ------------------------- - $horizontalComponentOffset: 180px; - - // Navbar - // ------------------------- - $navbarHeight: 55px; - - $navbarBackground: $panel-bg; - $navbarBorder: 1px solid $dark-3; - $navbarShadow: 0 0 20px black; - - $navbarLinkColor: $gray-4; - - $navbarButtonBackground: $navbarBackground; - $navbarButtonBackgroundHighlight: $body-bg; - - $navbar-button-border: #2f2f32; - - // Sidemenu - // ------------------------- - $side-menu-bg: $black; - $side-menu-bg-mobile: $side-menu-bg; - $side-menu-item-hover-bg: $dark-2; - $side-menu-shadow: 0 0 20px black; - $side-menu-link-color: $link-color; - - // Menu dropdowns - // ------------------------- - $menu-dropdown-bg: $body-bg; - $menu-dropdown-hover-bg: $dark-2; - $menu-dropdown-shadow: 5px 5px 20px -5px $black; - - // Tabs - // ------------------------- - $tab-border-color: $dark-4; - - // Toolbar - $toolbar-bg: $input-black; - - // Form states and alerts - // ------------------------- - $warning-text-color: $warn; - $error-text-color: #e84d4d; - $success-text-color: #12d95a; - $info-text-color: $blue-dark; - - $alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); - $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); - $alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); - $alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); - - // popover - $popover-bg: $page-bg; - $popover-color: $text-color; - $popover-border-color: $dark-4; - $popover-shadow: 0 0 20px black; - - $popover-help-bg: $btn-secondary-bg; - $popover-help-color: $text-color; - - $popover-error-bg: $btn-danger-bg; - - // Tooltips and popovers - // ------------------------- - $tooltipColor: $popover-help-color; - $tooltipArrowWidth: 5px; - $tooltipLinkColor: $link-color; - $graph-tooltip-bg: $dark-1; - - $tooltipBackground: $black; - $tooltipColor: $gray-4; - $tooltipArrowColor: $tooltipBackground; - $tooltipBackgroundError: $brand-danger; - - // images - $checkboxImageUrl: '../img/checkbox.png'; - - // info box - $info-box-border-color: darken($blue, 12%); - - // footer - $footer-link-color: $gray-2; - $footer-link-hover: $gray-4; - - // json-explorer - $json-explorer-default-color: $text-color; - $json-explorer-string-color: #23d662; - $json-explorer-number-color: $variable; - $json-explorer-boolean-color: $variable; - $json-explorer-null-color: #eec97d; - $json-explorer-undefined-color: rgb(239, 143, 190); - $json-explorer-function-color: #fd48cb; - $json-explorer-rotate-time: 100ms; - $json-explorer-toggler-opacity: 0.6; - $json-explorer-bracket-color: #9494ff; - $json-explorer-key-color: #23a0db; - $json-explorer-url-color: #027bff; - - // Changelog and diff - // ------------------------- - $diff-label-bg: $dark-2; - $diff-label-fg: $white; - - $diff-group-bg: $dark-4; - $diff-arrow-color: $white; - - $diff-json-bg: $dark-4; - $diff-json-fg: $gray-5; - - $diff-json-added: #457740; - $diff-json-deleted: #a04338; - - $diff-json-old: #a04338; - $diff-json-new: #457740; - - $diff-json-changed-fg: $gray-5; - $diff-json-changed-num: $text-color; - - $diff-json-icon: $gray-7; - - //Submenu - $variable-option-bg: $blue-dark; - - //Switch Slider - // ------------------------- - $switch-bg: $input-bg; - $switch-slider-color: $dark-2; - $switch-slider-off-bg: $gray-1; - $switch-slider-on-bg: linear-gradient(90deg, $orange, $red); - $switch-slider-shadow: 0 0 3px black; - - //Checkbox - // ------------------------- - $checkbox-bg: $dark-1; - $checkbox-border: 1px solid $gray-1; - $checkbox-checked-bg: linear-gradient(0deg, $orange, $red); - $checkbox-color: $dark-1; - - //Panel Edit - // ------------------------- - $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-5; - $panel-editor-viz-item-border: 1px solid $dark-5; - $panel-editor-viz-item-shadow-hover: 0 0 4px $blue; - $panel-editor-viz-item-border-hover: 1px solid $blue; - $panel-editor-viz-item-bg: $input-black; - $panel-editor-tabs-line-color: #e3e3e3; - $panel-editor-viz-item-bg-hover: darken($blue, 47%); - - $panel-options-group-border: none; - $panel-options-group-header-bg: $gray-blue; - - $panel-grid-placeholder-bg: darken($blue, 47%); - $panel-grid-placeholder-shadow: 0 0 4px $blue; - - // logs - $logs-color-unkown: $gray-2; - - // toggle-group - $button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); - $button-toggle-group-btn-active-shadow: inset 0 0 4px $black; - $button-toggle-group-btn-seperator-border: 1px solid $page-bg; - - $vertical-resize-handle-bg: $dark-5; - $vertical-resize-handle-dots: $gray-1; - $vertical-resize-handle-dots-hover: $gray-2; +export const darkThemeVarsTemplate = (theme: GrafanaTheme) => + `// Global values +// -------------------------------------------------- + +$theme-name: dark; + +// Grays +// ------------------------- +$black: ${theme.colors.black}; +$dark-1: ${theme.colors.dark2}; +$dark-2: ${theme.colors.dark2}; +$dark-3: ${theme.colors.dark3}; +$dark-4: ${theme.colors.dark4}; +$dark-5: ${theme.colors.dark5}; +$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}; + +$gray-blue: #212327; +$input-black: #09090b; + +$white: ${theme.colors.white}; + +// Accent colors +// ------------------------- +$blue: ${theme.colors.blue}; +$blue-dark: #005f81; +$green: #299c46; +$red: #d44a3a; +$yellow: #ecbb13; +$purple: #9933cc; +$variable: #32d1df; +$orange: #eb7b18; + +$brand-primary: $orange; +$brand-success: $green; +$brand-warning: $brand-primary; +$brand-danger: $red; + +$query-red: #e24d42; +$query-green: #74e680; +$query-purple: #fe85fc; +$query-keyword: #66d9ef; +$query-orange: $orange; + +// Status colors +// ------------------------- +$online: #10a345; +$warn: #f79520; +$critical: #ed2e18; + +// Scaffolding +// ------------------------- +$body-bg: rgb(23, 24, 25); +$page-bg: rgb(22, 23, 25); + +$body-color: $gray-4; +$text-color: $gray-4; +$text-color-strong: $white; +$text-color-weak: $gray-2; +$text-color-faint: $dark-5; +$text-color-emphasis: $gray-5; + +$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); +$textShadow: none; + +// gradients +$brand-gradient: linear-gradient( + to right, + rgba(255, 213, 0, 0.7) 0%, + rgba(255, 68, 0, 0.7) 99%, + rgba(255, 68, 0, 0.7) 100% +); + +$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); +$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); + +// Links +// ------------------------- +$link-color: darken($white, 11%); +$link-color-disabled: darken($link-color, 30%); +$link-hover-color: $white; +$external-link-color: $blue; + +// Typography +// ------------------------- +$headings-color: darken($white, 11%); +$abbr-border-color: $gray-3 !default; +$text-muted: $text-color-weak; + +$hr-border-color: $dark-4; + +// Panel +// ------------------------- +$panel-bg: #212124; +$panel-border: solid 1px $dark-1; +$panel-header-hover-bg: $dark-4; +$panel-corner: $panel-bg; + +// page header +$page-header-bg: linear-gradient(90deg, #292a2d, black); +$page-header-shadow: inset 0px -4px 14px $dark-2; +$page-header-border-color: $dark-4; + +$divider-border-color: $gray-1; + +// Graphite Target Editor +$tight-form-bg: $dark-3; +$tight-form-func-bg: $dark-4; +$tight-form-func-highlight-bg: $dark-5; + +$modal-backdrop-bg: #353c42; +$code-tag-bg: $dark-1; +$code-tag-border: $dark-4; + +// cards +$card-background: linear-gradient(135deg, #2f2f32, #262628); +$card-background-hover: linear-gradient(135deg, #343436, #262628); +$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); + +// Lists +$list-item-bg: $card-background; +$list-item-hover-bg: lighten($gray-blue, 2%); +$list-item-link-color: $text-color; +$list-item-shadow: $card-shadow; + +$empty-list-cta-bg: $gray-blue; + +// Scrollbars +$scrollbarBackground: #404357; +$scrollbarBackground2: #3a3a3a; +$scrollbarBorder: black; + +// Tables +// ------------------------- +$table-bg: transparent; // overall background-color +$table-bg-accent: $dark-3; // for striping +$table-border: $dark-3; // table and cell border + +$table-bg-odd: $dark-2; +$table-bg-hover: $dark-3; + +// Buttons +// ------------------------- +$btn-primary-bg: #ff6600; +$btn-primary-bg-hl: #bc3e06; + +$btn-secondary-bg-hl: lighten($blue-dark, 5%); +$btn-secondary-bg: $blue-dark; + +$btn-success-bg: $green; +$btn-success-bg-hl: darken($green, 6%); + +$btn-warning-bg: $brand-warning; +$btn-warning-bg-hl: lighten($brand-warning, 8%); + +$btn-danger-bg: $red; +$btn-danger-bg-hl: darken($red, 8%); + +$btn-inverse-bg: $dark-3; +$btn-inverse-bg-hl: lighten($dark-3, 4%); +$btn-inverse-text-color: $link-color; +$btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1); + +$btn-link-color: $gray-3; + +$iconContainerBackground: $black; + +$btn-divider-left: $dark-4; +$btn-divider-right: $dark-2; + +$btn-drag-image: '../img/grab_dark.svg'; + +// Forms +// ------------------------- +$input-bg: $input-black; +$input-bg-disabled: $dark-3; + +$input-color: $gray-4; +$input-border-color: $dark-3; +$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); +$input-border-focus: $input-border-color; +$input-box-shadow-focus: rgba(102, 175, 233, 0.6); +$input-color-placeholder: $gray-1 !default; +$input-label-bg: $gray-blue; +$input-label-border-color: $dark-3; +$input-color-select-arrow: $white; + +// Input placeholder text color +$placeholderText: darken($text-color, 25%); + +// Search +$search-shadow: 0 0 30px 0 $black; +$search-filter-box-bg: $gray-blue; + +// Typeahead +$typeahead-shadow: 0 5px 10px 0 $black; +$typeahead-selected-bg: $dark-4; +$typeahead-selected-color: $yellow; + +// Dropdowns +// ------------------------- +$dropdownBackground: $dark-3; +$dropdownBorder: rgba(0, 0, 0, 0.2); +$dropdownDividerTop: transparent; +$dropdownDividerBottom: #444; + +$dropdownLinkColor: $text-color; +$dropdownLinkColorHover: $white; +$dropdownLinkColorActive: $white; + +$dropdownLinkBackgroundHover: $dark-4; + +// Horizontal forms & lists +// ------------------------- +$horizontalComponentOffset: 180px; + +// Navbar +// ------------------------- +$navbarHeight: 55px; + +$navbarBackground: $panel-bg; +$navbarBorder: 1px solid $dark-3; +$navbarShadow: 0 0 20px black; + +$navbarLinkColor: $gray-4; + +$navbarButtonBackground: $navbarBackground; +$navbarButtonBackgroundHighlight: $body-bg; + +$navbar-button-border: #2f2f32; + +// Sidemenu +// ------------------------- +$side-menu-bg: $black; +$side-menu-bg-mobile: $side-menu-bg; +$side-menu-item-hover-bg: $dark-2; +$side-menu-shadow: 0 0 20px black; +$side-menu-link-color: $link-color; + +// Menu dropdowns +// ------------------------- +$menu-dropdown-bg: $body-bg; +$menu-dropdown-hover-bg: $dark-2; +$menu-dropdown-shadow: 5px 5px 20px -5px $black; + +// Tabs +// ------------------------- +$tab-border-color: $dark-4; + +// Toolbar +$toolbar-bg: $input-black; + +// Form states and alerts +// ------------------------- +$warning-text-color: $warn; +$error-text-color: #e84d4d; +$success-text-color: #12d95a; +$info-text-color: $blue-dark; + +$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); +$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); +$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); +$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); + +// popover +$popover-bg: $page-bg; +$popover-color: $text-color; +$popover-border-color: $dark-4; +$popover-shadow: 0 0 20px black; + +$popover-help-bg: $btn-secondary-bg; +$popover-help-color: $text-color; + +$popover-error-bg: $btn-danger-bg; + +// Tooltips and popovers +// ------------------------- +$tooltipColor: $popover-help-color; +$tooltipArrowWidth: 5px; +$tooltipLinkColor: $link-color; +$graph-tooltip-bg: $dark-1; + +$tooltipBackground: $black; +$tooltipColor: $gray-4; +$tooltipArrowColor: $tooltipBackground; +$tooltipBackgroundError: $brand-danger; + +// images +$checkboxImageUrl: '../img/checkbox.png'; + +// info box +$info-box-border-color: darken($blue, 12%); + +// footer +$footer-link-color: $gray-2; +$footer-link-hover: $gray-4; + +// json-explorer +$json-explorer-default-color: $text-color; +$json-explorer-string-color: #23d662; +$json-explorer-number-color: $variable; +$json-explorer-boolean-color: $variable; +$json-explorer-null-color: #eec97d; +$json-explorer-undefined-color: rgb(239, 143, 190); +$json-explorer-function-color: #fd48cb; +$json-explorer-rotate-time: 100ms; +$json-explorer-toggler-opacity: 0.6; +$json-explorer-bracket-color: #9494ff; +$json-explorer-key-color: #23a0db; +$json-explorer-url-color: #027bff; + +// Changelog and diff +// ------------------------- +$diff-label-bg: $dark-2; +$diff-label-fg: $white; + +$diff-group-bg: $dark-4; +$diff-arrow-color: $white; + +$diff-json-bg: $dark-4; +$diff-json-fg: $gray-5; + +$diff-json-added: #457740; +$diff-json-deleted: #a04338; + +$diff-json-old: #a04338; +$diff-json-new: #457740; + +$diff-json-changed-fg: $gray-5; +$diff-json-changed-num: $text-color; + +$diff-json-icon: $gray-7; + +//Submenu +$variable-option-bg: $blue-dark; + +//Switch Slider +// ------------------------- +$switch-bg: $input-bg; +$switch-slider-color: $dark-2; +$switch-slider-off-bg: $gray-1; +$switch-slider-on-bg: linear-gradient(90deg, $orange, $red); +$switch-slider-shadow: 0 0 3px black; + +//Checkbox +// ------------------------- +$checkbox-bg: $dark-1; +$checkbox-border: 1px solid $gray-1; +$checkbox-checked-bg: linear-gradient(0deg, $orange, $red); +$checkbox-color: $dark-1; + +//Panel Edit +// ------------------------- +$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-5; +$panel-editor-viz-item-border: 1px solid $dark-5; +$panel-editor-viz-item-shadow-hover: 0 0 4px $blue; +$panel-editor-viz-item-border-hover: 1px solid $blue; +$panel-editor-viz-item-bg: $input-black; +$panel-editor-tabs-line-color: #e3e3e3; +$panel-editor-viz-item-bg-hover: darken($blue, 47%); + +$panel-options-group-border: none; +$panel-options-group-header-bg: $gray-blue; + +$panel-grid-placeholder-bg: darken($blue, 47%); +$panel-grid-placeholder-shadow: 0 0 4px $blue; + +// logs +$logs-color-unkown: $gray-2; + +// toggle-group +$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); +$button-toggle-group-btn-active-shadow: inset 0 0 4px $black; +$button-toggle-group-btn-seperator-border: 1px solid $page-bg; + +$vertical-resize-handle-bg: $dark-5; +$vertical-resize-handle-dots: $gray-1; +$vertical-resize-handle-dots-hover: $gray-2; `; 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 80e425af0f8..552de0fe62c 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -2,386 +2,381 @@ import { GrafanaTheme } from '../types'; -export const lightThemeVarsTemplate = (theme: GrafanaTheme) => ` - // Global values - // -------------------------------------------------- - - $theme-name: light; - - // Grays - // ------------------------- - $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}; - $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}; - $blue-light: #00a8e6; - $green: #3aa655; - $red: #d44939; - $yellow: #ff851b; - $orange: #ff7941; - $purple: #9954bb; - $variable: $blue; - - $brand-primary: $orange; - $brand-success: $green; - $brand-warning: $orange; - $brand-danger: $red; - - $query-red: $red; - $query-green: $green; - $query-purple: $purple; - $query-orange: $orange; - $query-keyword: $blue; - - // Status colors - // ------------------------- - $online: #01a64f; - $warn: #f79520; - $critical: #ec2128; - - // Scaffolding - // ------------------------- - $body-bg: $gray-7; - $page-bg: $gray-7; - - $body-color: $gray-1; - $text-color: $gray-1; - $text-color-strong: $dark-2; - $text-color-weak: $gray-2; - $text-color-faint: $gray-4; - $text-color-emphasis: $dark-5; - - $text-shadow-faint: none; - $textShadow: none; - - // gradients - $brand-gradient: linear-gradient( - to right, - rgba(255, 213, 0, 1) 0%, - rgba(255, 68, 0, 1) 99%, - rgba(255, 68, 0, 1) 100% - ); - - $page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px); - $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-light; - - // Typography - // ------------------------- - $headings-color: $text-color; - $abbr-border-color: $gray-2 !default; - $text-muted: $text-color-weak; - - $hr-border-color: $dark-3 !default; - - // Panel - // ------------------------- - $panel-bg: $white; - $panel-border: solid 1px $gray-5; - $panel-header-hover-bg: $gray-6; - $panel-corner: $gray-4; - - // Page header - $page-header-bg: linear-gradient(90deg, $white, $gray-7); - $page-header-shadow: inset 0px -3px 10px $gray-6; - $page-header-border-color: $gray-4; - - $divider-border-color: $gray-2; - - // Graphite Target Editor - $tight-form-bg: #eaebee; - $tight-form-func-bg: $gray-5; - $tight-form-func-highlight-bg: $gray-6; - - $modal-backdrop-bg: $body-bg; - $code-tag-bg: $gray-6; - $code-tag-border: darken($code-tag-bg, 3%); - - // cards - $card-background: linear-gradient(135deg, $gray-6, $gray-5); - $card-background-hover: linear-gradient(135deg, $gray-5, $gray-6); - $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); - - // Lists - $list-item-bg: linear-gradient(135deg, $gray-5, $gray-6); //$card-background; - $list-item-hover-bg: darken($gray-5, 5%); - $list-item-link-color: $text-color; - $list-item-shadow: $card-shadow; - - $empty-list-cta-bg: $gray-6; - - // Scrollbars - $scrollbarBackground: $gray-5; - $scrollbarBackground2: $gray-5; - $scrollbarBorder: $gray-4; - - // Tables - // ------------------------- - $table-bg: transparent; // overall background-color - $table-bg-accent: $gray-5; // for striping - $table-border: $gray-3; // table and cell border - - $table-bg-odd: $gray-6; - $table-bg-hover: $gray-5; - - // Buttons - // ------------------------- - $btn-primary-bg: $brand-primary; - $btn-primary-bg-hl: lighten($brand-primary, 8%); - - $btn-secondary-bg: $blue; - $btn-secondary-bg-hl: lighten($blue, 4%); - - $btn-success-bg: lighten($green, 3%); - $btn-success-bg-hl: darken($green, 3%); - - $btn-warning-bg: lighten($orange, 3%); - $btn-warning-bg-hl: darken($orange, 3%); - - $btn-danger-bg: lighten($red, 3%); - $btn-danger-bg-hl: darken($red, 3%); - - $btn-inverse-bg: $gray-6; - $btn-inverse-bg-hl: darken($gray-6, 5%); - $btn-inverse-text-color: $gray-1; - $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); - - $btn-link-color: $gray-1; - - $iconContainerBackground: $white; - - $btn-divider-left: $gray-4; - $btn-divider-right: $gray-7; - - $btn-drag-image: '../img/grab_light.svg'; - - // Forms - // ------------------------- - $input-bg: $white; - $input-bg-disabled: $gray-5; - - $input-color: $dark-3; - $input-border-color: $gray-5; - $input-box-shadow: none; - $input-border-focus: $blue !default; - $input-box-shadow-focus: $blue !default; - $input-color-placeholder: $gray-4 !default; - $input-label-bg: $gray-5; - $input-label-border-color: $gray-5; - $input-color-select-arrow: $gray-1; - - // Input placeholder text color - $placeholderText: $gray-2; - - // search - $search-shadow: 0 5px 30px 0 $gray-4; - $search-filter-box-bg: $gray-7; - - // Typeahead - $typeahead-shadow: 0 5px 10px 0 $gray-5; - $typeahead-selected-bg: $gray-6; - $typeahead-selected-color: $yellow; - - // Dropdowns - // ------------------------- - $dropdownBackground: $white; - $dropdownBorder: $gray-4; - $dropdownDividerTop: $gray-6; - $dropdownDividerBottom: $white; - - $dropdownLinkColor: $dark-3; - $dropdownLinkColorHover: $link-color; - $dropdownLinkColorActive: $link-color; - - $dropdownLinkBackgroundHover: $gray-6; - - // Horizontal forms & lists - // ------------------------- - $horizontalComponentOffset: 180px; - - // Navbar - // ------------------------- - $navbarHeight: 52px; - - $navbarBackground: $white; - $navbarBorder: 1px solid $gray-4; - $navbarShadow: 0 0 3px #c1c1c1; - - $navbarLinkColor: #444; - - $navbarButtonBackground: lighten($navbarBackground, 3%); - $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); - - $navbar-button-border: $gray-4; - - // Sidemenu - // ------------------------- - $side-menu-bg: $dark-2; - $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; - $side-menu-link-color: $gray-6; - - // Menu dropdowns - // ------------------------- - $menu-dropdown-bg: $gray-7; - $menu-dropdown-hover-bg: $gray-6; - $menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; - - // Tabs - // ------------------------- - $tab-border-color: $gray-5; - - // Toolbar - $toolbar-bg: white; - - // Form states and alerts - // ------------------------- - $warning-text-color: lighten($orange, 10%); - $error-text-color: lighten($red, 10%); - $success-text-color: lighten($green, 10%); - $info-text-color: $blue; - - $alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); - $alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); - $alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); - $alert-info-bg: $blue; - - // popover - $popover-bg: $page-bg; - $popover-color: $text-color; - $popover-border-color: $gray-5; - $popover-shadow: 0 0 20px $white; - - $popover-help-bg: $blue; - $popover-help-color: $gray-6; - - $popover-error-bg: $btn-danger-bg; - - // Tooltips and popovers - // ------------------------- - $tooltipColor: $popover-help-color; - $tooltipArrowWidth: 5px; - $tooltipLinkColor: lighten($popover-help-color, 5%); - $graph-tooltip-bg: $gray-5; - - $tooltipBackground: $gray-1; - $tooltipColor: $gray-7; - $tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip - $tooltipBackgroundError: $brand-danger; - - // images - $checkboxImageUrl: '../img/checkbox_white.png'; - - // info box - $info-box-border-color: lighten($blue, 20%); - - // footer - $footer-link-color: $gray-3; - $footer-link-hover: $dark-5; - - // json explorer - $json-explorer-default-color: black; - $json-explorer-string-color: green; - $json-explorer-number-color: blue; - $json-explorer-boolean-color: red; - $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: blue; - $json-explorer-key-color: #00008b; - $json-explorer-url-color: blue; - - // Changelog and diff - // ------------------------- - $diff-label-bg: $gray-5; - $diff-label-fg: $gray-2; - - $diff-arrow-color: $dark-3; - $diff-group-bg: $gray-7; - - $diff-json-bg: $gray-5; - $diff-json-fg: $gray-2; - - $diff-json-added: lighten(desaturate($green, 30%), 10%); - $diff-json-deleted: desaturate($red, 35%); - - $diff-json-old: #5a372a; - $diff-json-new: #664e33; - - $diff-json-changed-fg: $gray-6; - $diff-json-changed-num: $gray-4; - - $diff-json-icon: $gray-4; - - //Submenu - $variable-option-bg: $blue-light; - - //Switch Slider - // ------------------------- - $switch-bg: $white; - $switch-slider-color: $gray-7; - $switch-slider-off-bg: $gray-5; - $switch-slider-on-bg: linear-gradient(90deg, $yellow, $red); - $switch-slider-shadow: 0 0 3px $dark-5; - - //Checkbox - // ------------------------- - $checkbox-bg: $gray-6; - $checkbox-border: 1px solid $gray-3; - $checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); - $checkbox-color: $gray-7; - - //Panel Edit - // ------------------------- - $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 $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-viz-item-bg-hover: lighten($blue, 62%); - - $panel-options-group-border: none; - $panel-options-group-header-bg: $gray-5; - - $panel-grid-placeholder-bg: lighten($blue, 62%); - $panel-grid-placeholder-shadow: 0 0 4px $blue-light; - - // logs - $logs-color-unkown: $gray-5; - - // toggle-group - $button-toggle-group-btn-active-bg: $brand-primary; - $button-toggle-group-btn-active-shadow: inset 0 0 4px $white; - $button-toggle-group-btn-seperator-border: 1px solid $gray-6; - - $vertical-resize-handle-bg: $gray-4; - $vertical-resize-handle-dots: $gray-3; - $vertical-resize-handle-dots-hover: $gray-2; +export const lightThemeVarsTemplate = (theme: GrafanaTheme) => + `// Global values +// -------------------------------------------------- + +$theme-name: light; + +// Grays +// ------------------------- +$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}; +$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}; +$blue-light: #00a8e6; +$green: #3aa655; +$red: #d44939; +$yellow: #ff851b; +$orange: #ff7941; +$purple: #9954bb; +$variable: $blue; + +$brand-primary: $orange; +$brand-success: $green; +$brand-warning: $orange; +$brand-danger: $red; + +$query-red: $red; +$query-green: $green; +$query-purple: $purple; +$query-orange: $orange; +$query-keyword: $blue; + +// Status colors +// ------------------------- +$online: #01a64f; +$warn: #f79520; +$critical: #ec2128; + +// Scaffolding +// ------------------------- +$body-bg: $gray-7; +$page-bg: $gray-7; + +$body-color: $gray-1; +$text-color: $gray-1; +$text-color-strong: $dark-2; +$text-color-weak: $gray-2; +$text-color-faint: $gray-4; +$text-color-emphasis: $dark-5; + +$text-shadow-faint: none; +$textShadow: none; + +// gradients +$brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); + +$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px); +$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-light; + +// Typography +// ------------------------- +$headings-color: $text-color; +$abbr-border-color: $gray-2 !default; +$text-muted: $text-color-weak; + +$hr-border-color: $dark-3 !default; + +// Panel +// ------------------------- +$panel-bg: $white; +$panel-border: solid 1px $gray-5; +$panel-header-hover-bg: $gray-6; +$panel-corner: $gray-4; + +// Page header +$page-header-bg: linear-gradient(90deg, $white, $gray-7); +$page-header-shadow: inset 0px -3px 10px $gray-6; +$page-header-border-color: $gray-4; + +$divider-border-color: $gray-2; + +// Graphite Target Editor +$tight-form-bg: #eaebee; +$tight-form-func-bg: $gray-5; +$tight-form-func-highlight-bg: $gray-6; + +$modal-backdrop-bg: $body-bg; +$code-tag-bg: $gray-6; +$code-tag-border: darken($code-tag-bg, 3%); + +// cards +$card-background: linear-gradient(135deg, $gray-6, $gray-5); +$card-background-hover: linear-gradient(135deg, $gray-5, $gray-6); +$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); + +// Lists +$list-item-bg: linear-gradient(135deg, $gray-5, $gray-6); //$card-background; +$list-item-hover-bg: darken($gray-5, 5%); +$list-item-link-color: $text-color; +$list-item-shadow: $card-shadow; + +$empty-list-cta-bg: $gray-6; + +// Scrollbars +$scrollbarBackground: $gray-5; +$scrollbarBackground2: $gray-5; +$scrollbarBorder: $gray-4; + +// Tables +// ------------------------- +$table-bg: transparent; // overall background-color +$table-bg-accent: $gray-5; // for striping +$table-border: $gray-3; // table and cell border + +$table-bg-odd: $gray-6; +$table-bg-hover: $gray-5; + +// Buttons +// ------------------------- +$btn-primary-bg: $brand-primary; +$btn-primary-bg-hl: lighten($brand-primary, 8%); + +$btn-secondary-bg: $blue; +$btn-secondary-bg-hl: lighten($blue, 4%); + +$btn-success-bg: lighten($green, 3%); +$btn-success-bg-hl: darken($green, 3%); + +$btn-warning-bg: lighten($orange, 3%); +$btn-warning-bg-hl: darken($orange, 3%); + +$btn-danger-bg: lighten($red, 3%); +$btn-danger-bg-hl: darken($red, 3%); + +$btn-inverse-bg: $gray-6; +$btn-inverse-bg-hl: darken($gray-6, 5%); +$btn-inverse-text-color: $gray-1; +$btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); + +$btn-link-color: $gray-1; + +$iconContainerBackground: $white; + +$btn-divider-left: $gray-4; +$btn-divider-right: $gray-7; + +$btn-drag-image: '../img/grab_light.svg'; + +// Forms +// ------------------------- +$input-bg: $white; +$input-bg-disabled: $gray-5; + +$input-color: $dark-3; +$input-border-color: $gray-5; +$input-box-shadow: none; +$input-border-focus: $blue !default; +$input-box-shadow-focus: $blue !default; +$input-color-placeholder: $gray-4 !default; +$input-label-bg: $gray-5; +$input-label-border-color: $gray-5; +$input-color-select-arrow: $gray-1; + +// Input placeholder text color +$placeholderText: $gray-2; + +// search +$search-shadow: 0 5px 30px 0 $gray-4; +$search-filter-box-bg: $gray-7; + +// Typeahead +$typeahead-shadow: 0 5px 10px 0 $gray-5; +$typeahead-selected-bg: $gray-6; +$typeahead-selected-color: $yellow; + +// Dropdowns +// ------------------------- +$dropdownBackground: $white; +$dropdownBorder: $gray-4; +$dropdownDividerTop: $gray-6; +$dropdownDividerBottom: $white; + +$dropdownLinkColor: $dark-3; +$dropdownLinkColorHover: $link-color; +$dropdownLinkColorActive: $link-color; + +$dropdownLinkBackgroundHover: $gray-6; + +// Horizontal forms & lists +// ------------------------- +$horizontalComponentOffset: 180px; + +// Navbar +// ------------------------- +$navbarHeight: 52px; + +$navbarBackground: $white; +$navbarBorder: 1px solid $gray-4; +$navbarShadow: 0 0 3px #c1c1c1; + +$navbarLinkColor: #444; + +$navbarButtonBackground: lighten($navbarBackground, 3%); +$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); + +$navbar-button-border: $gray-4; + +// Sidemenu +// ------------------------- +$side-menu-bg: $dark-2; +$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; +$side-menu-link-color: $gray-6; + +// Menu dropdowns +// ------------------------- +$menu-dropdown-bg: $gray-7; +$menu-dropdown-hover-bg: $gray-6; +$menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; + +// Tabs +// ------------------------- +$tab-border-color: $gray-5; + +// Toolbar +$toolbar-bg: white; + +// Form states and alerts +// ------------------------- +$warning-text-color: lighten($orange, 10%); +$error-text-color: lighten($red, 10%); +$success-text-color: lighten($green, 10%); +$info-text-color: $blue; + +$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); +$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); +$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); +$alert-info-bg: $blue; + +// popover +$popover-bg: $page-bg; +$popover-color: $text-color; +$popover-border-color: $gray-5; +$popover-shadow: 0 0 20px $white; + +$popover-help-bg: $blue; +$popover-help-color: $gray-6; + +$popover-error-bg: $btn-danger-bg; + +// Tooltips and popovers +// ------------------------- +$tooltipColor: $popover-help-color; +$tooltipArrowWidth: 5px; +$tooltipLinkColor: lighten($popover-help-color, 5%); +$graph-tooltip-bg: $gray-5; + +$tooltipBackground: $gray-1; +$tooltipColor: $gray-7; +$tooltipArrowColor: $tooltipBackground; // Used by Angular tooltip +$tooltipBackgroundError: $brand-danger; + +// images +$checkboxImageUrl: '../img/checkbox_white.png'; + +// info box +$info-box-border-color: lighten($blue, 20%); + +// footer +$footer-link-color: $gray-3; +$footer-link-hover: $dark-5; + +// json explorer +$json-explorer-default-color: black; +$json-explorer-string-color: green; +$json-explorer-number-color: blue; +$json-explorer-boolean-color: red; +$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: blue; +$json-explorer-key-color: #00008b; +$json-explorer-url-color: blue; + +// Changelog and diff +// ------------------------- +$diff-label-bg: $gray-5; +$diff-label-fg: $gray-2; + +$diff-arrow-color: $dark-3; +$diff-group-bg: $gray-7; + +$diff-json-bg: $gray-5; +$diff-json-fg: $gray-2; + +$diff-json-added: lighten(desaturate($green, 30%), 10%); +$diff-json-deleted: desaturate($red, 35%); + +$diff-json-old: #5a372a; +$diff-json-new: #664e33; + +$diff-json-changed-fg: $gray-6; +$diff-json-changed-num: $gray-4; + +$diff-json-icon: $gray-4; + +//Submenu +$variable-option-bg: $blue-light; + +//Switch Slider +// ------------------------- +$switch-bg: $white; +$switch-slider-color: $gray-7; +$switch-slider-off-bg: $gray-5; +$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red); +$switch-slider-shadow: 0 0 3px $dark-5; + +//Checkbox +// ------------------------- +$checkbox-bg: $gray-6; +$checkbox-border: 1px solid $gray-3; +$checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); +$checkbox-color: $gray-7; + +//Panel Edit +// ------------------------- +$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 $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-viz-item-bg-hover: lighten($blue, 62%); + +$panel-options-group-border: none; +$panel-options-group-header-bg: $gray-5; + +$panel-grid-placeholder-bg: lighten($blue, 62%); +$panel-grid-placeholder-shadow: 0 0 4px $blue-light; + +// logs +$logs-color-unkown: $gray-5; + +// toggle-group +$button-toggle-group-btn-active-bg: $brand-primary; +$button-toggle-group-btn-active-shadow: inset 0 0 4px $white; +$button-toggle-group-btn-seperator-border: 1px solid $gray-6; + +$vertical-resize-handle-bg: $gray-4; +$vertical-resize-handle-dots: $gray-3; +$vertical-resize-handle-dots-hover: $gray-2; `; diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 671ab5bb631..0051f74b21b 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -2,216 +2,216 @@ import { GrafanaThemeCommons } from '../types'; -export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) => ` - // Options - // - // Quickly modify global styling by enabling or disabling optional features. +export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) => + `// Options +// +// Quickly modify global styling by enabling or disabling optional features. - $enable-flex: true !default; - $enable-hover-media-query: false !default; +$enable-flex: true !default; +$enable-hover-media-query: false !default; - // Spacing - // - // Control the default styling of most Bootstrap elements by modifying these - // variables. Mostly focused on spacing. +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. - $spacer: 1rem !default; - $spacer-x: $spacer !default; - $spacer-y: $spacer !default; - $spacers: ( - 0: (x: 0, y: 0), - 1: (x: $spacer-x, y: $spacer-y), - 2: (x: ($spacer-x * 1.5), y: ($spacer-y * 1.5)), - 3: (x: ($spacer-x * 3), y: ($spacer-y * 3)) - ) - !default; - $border-width: 1px !default; +$spacer: 1rem !default; +$spacer-x: $spacer !default; +$spacer-y: $spacer !default; +$spacers: ( + 0: (x: 0, y: 0), + 1: (x: $spacer-x, y: $spacer-y), + 2: (x: ($spacer-x * 1.5), y: ($spacer-y * 1.5)), + 3: (x: ($spacer-x * 3), y: ($spacer-y * 3)) + ) + !default; +$border-width: 1px !default; - // Grid breakpoints - // - // Define the minimum and maximum dimensions at which your layout will change, - // adapting to different screen sizes, for use in media queries. +// Grid breakpoints +// +// Define the minimum and maximum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries. - $grid-breakpoints: (xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px) !default; +$grid-breakpoints: (xs: 0, sm: 544px, md: 768px, lg: 992px, xl: 1200px) !default; - // Grid containers - // - // Define the maximum width of .container for different screen sizes. +// Grid containers +// +// Define the maximum width of .container for different screen sizes. - $container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1080px) !default; +$container-max-widths: (sm: 576px, md: 720px, lg: 940px, xl: 1080px) !default; - // Grid columns - // - // Set the number of columns and specify the width of the gutters. +// Grid columns +// +// Set the number of columns and specify the width of the gutters. - $grid-columns: 12 !default; - $grid-gutter-width: 30px !default; +$grid-columns: 12 !default; +$grid-gutter-width: 30px !default; - $enable-flex: true; +$enable-flex: true; - // Typography - // ------------------------- +// Typography +// ------------------------- - $font-family-sans-serif: ${theme.typography.fontFamily.sansSerif}; - $font-family-serif: ${theme.typography.fontFamily.serif}; - $font-family-monospace: ${theme.typography.fontFamily.monospace}; - $font-family-base: $font-family-sans-serif !default; +$font-family-sans-serif: ${theme.typography.fontFamily.sansSerif}; +$font-family-serif: ${theme.typography.fontFamily.serif}; +$font-family-monospace: ${theme.typography.fontFamily.monospace}; +$font-family-base: $font-family-sans-serif !default; - $font-size-root: 14px !default; - $font-size-base: 13px !default; +$font-size-root: 14px !default; +$font-size-base: 13px !default; - $font-size-lg: 18px !default; - $font-size-md: 14px !default; - $font-size-sm: 12px !default; - $font-size-xs: 10px !default; +$font-size-lg: 18px !default; +$font-size-md: 14px !default; +$font-size-sm: 12px !default; +$font-size-xs: 10px !default; - $line-height-base: 1.5 !default; - $font-weight-semi-bold: 500; +$line-height-base: 1.5 !default; +$font-weight-semi-bold: 500; - $font-size-h1: 2rem !default; - $font-size-h2: 1.75rem !default; - $font-size-h3: 1.5rem !default; - $font-size-h4: 1.3rem !default; - $font-size-h5: 1.2rem !default; - $font-size-h6: 1rem !default; +$font-size-h1: 2rem !default; +$font-size-h2: 1.75rem !default; +$font-size-h3: 1.5rem !default; +$font-size-h4: 1.3rem !default; +$font-size-h5: 1.2rem !default; +$font-size-h6: 1rem !default; - $display1-size: 6rem !default; - $display2-size: 5.5rem !default; - $display3-size: 4.5rem !default; - $display4-size: 3.5rem !default; +$display1-size: 6rem !default; +$display2-size: 5.5rem !default; +$display3-size: 4.5rem !default; +$display4-size: 3.5rem !default; - $display1-weight: 400 !default; - $display2-weight: 400 !default; - $display3-weight: 400 !default; - $display4-weight: 400 !default; +$display1-weight: 400 !default; +$display2-weight: 400 !default; +$display3-weight: 400 !default; +$display4-weight: 400 !default; - $lead-font-size: 1.25rem !default; - $lead-font-weight: 300 !default; +$lead-font-size: 1.25rem !default; +$lead-font-weight: 300 !default; - $headings-margin-bottom: ($spacer / 2) !default; - $headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; - $headings-font-weight: 400 !default; - $headings-line-height: 1.1 !default; +$headings-margin-bottom: ($spacer / 2) !default; +$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; +$headings-font-weight: 400 !default; +$headings-line-height: 1.1 !default; - $hr-border-width: $border-width !default; - $dt-font-weight: bold !default; +$hr-border-width: $border-width !default; +$dt-font-weight: bold !default; - // Components - // - // Define common padding and border radius sizes and more. +// Components +// +// Define common padding and border radius sizes and more. - $line-height-lg: (4 / 3) !default; - $line-height-sm: 1.5 !default; +$line-height-lg: (4 / 3) !default; +$line-height-sm: 1.5 !default; - $border-radius: 3px !default; - $border-radius-lg: 5px !default; - $border-radius-sm: 2px!default; +$border-radius: 3px !default; +$border-radius-lg: 5px !default; +$border-radius-sm: 2px!default; - // Page +// Page - $page-sidebar-width: 11rem; - $page-sidebar-margin: 4rem; +$page-sidebar-width: 11rem; +$page-sidebar-margin: 4rem; - // Links - // ------------------------- - $link-decoration: none !default; - $link-hover-decoration: none !default; +// Links +// ------------------------- +$link-decoration: none !default; +$link-hover-decoration: none !default; - // Tables - // - // Customizes the table component with basic values, each used across all table variations. +// Tables +// +// Customizes the table component with basic values, each used across all table variations. - $table-cell-padding: 4px 10px !default; +$table-cell-padding: 4px 10px !default; - // Forms - $input-padding-x: 10px !default; - $input-padding-y: 8px !default; - $input-line-height: 18px !default; +// Forms +$input-padding-x: 10px !default; +$input-padding-y: 8px !default; +$input-line-height: 18px !default; - $input-btn-border-width: 1px; - $input-border-radius: 0 $border-radius $border-radius 0 !default; - $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default; +$input-btn-border-width: 1px; +$input-border-radius: 0 $border-radius $border-radius 0 !default; +$input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default; - $label-border-radius: $border-radius 0 0 $border-radius !default; - $label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default; +$label-border-radius: $border-radius 0 0 $border-radius !default; +$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default; - $input-padding-y-sm: 4px !default; +$input-padding-y-sm: 4px !default; - $input-padding-x-lg: 20px !default; - $input-padding-y-lg: 10px !default; +$input-padding-x-lg: 20px !default; +$input-padding-y-lg: 10px !default; - $input-height: 35px !default; +$input-height: 35px !default; - $gf-form-margin: 0.2rem; - $gf-form-input-height: 35px; +$gf-form-margin: 0.2rem; +$gf-form-input-height: 35px; - $cursor-disabled: not-allowed !default; +$cursor-disabled: not-allowed !default; - // Form validation icons - $form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") - !default; - $form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") - !default; - $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") - !default; +// Form validation icons +$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") + !default; +$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") + !default; +$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") + !default; - // Z-index master list - // ------------------------- - // Used for a bird's eye view of components dependent on the z-axis - // Try to avoid customizing these :) - $zindex-dropdown: 1000; - $zindex-navbar-fixed: 1020; - $zindex-sidemenu: 1025; - $zindex-tooltip: 1030; - $zindex-modal-backdrop: 1040; - $zindex-modal: 1050; - $zindex-typeahead: 1060; +// Z-index master list +// ------------------------- +// Used for a bird's eye view of components dependent on the z-axis +// Try to avoid customizing these :) +$zindex-dropdown: 1000; +$zindex-navbar-fixed: 1020; +$zindex-sidemenu: 1025; +$zindex-tooltip: 1030; +$zindex-modal-backdrop: 1040; +$zindex-modal: 1050; +$zindex-typeahead: 1060; - // Buttons - // +// Buttons +// - $btn-padding-x: 1rem !default; - $btn-padding-y: 0.7rem !default; - $btn-line-height: 1 !default; - $btn-font-weight: 500 !default; +$btn-padding-x: 1rem !default; +$btn-padding-y: 0.7rem !default; +$btn-line-height: 1 !default; +$btn-font-weight: 500 !default; - $btn-padding-x-sm: 0.5rem !default; - $btn-padding-y-sm: 0.25rem !default; +$btn-padding-x-sm: 0.5rem !default; +$btn-padding-y-sm: 0.25rem !default; - $btn-padding-x-lg: 21px !default; - $btn-padding-y-lg: 11px !default; +$btn-padding-x-lg: 21px !default; +$btn-padding-y-lg: 11px !default; - $btn-padding-x-xl: 21px !default; - $btn-padding-y-xl: 11px !default; +$btn-padding-x-xl: 21px !default; +$btn-padding-y-xl: 11px !default; - $btn-border-radius: 2px; +$btn-border-radius: 2px; - $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; +$btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; - // sidemenu - $side-menu-width: 60px; +// sidemenu +$side-menu-width: 60px; - // dashboard - $panel-margin: 10px; - $dashboard-padding: $panel-margin * 2; - $panel-horizontal-padding: 10; - $panel-vertical-padding: 5; - $panel-padding: 0px $panel-horizontal-padding+0px $panel-vertical-padding+0px $panel-horizontal-padding+0px; +// dashboard +$panel-margin: 10px; +$dashboard-padding: $panel-margin * 2; +$panel-horizontal-padding: 10; +$panel-vertical-padding: 5; +$panel-padding: 0px $panel-horizontal-padding+0px $panel-vertical-padding+0px $panel-horizontal-padding+0px; - // tabs - $tabs-padding: 10px 15px 9px; +// tabs +$tabs-padding: 10px 15px 9px; - $external-services: ( - github: (bgColor: #464646, borderColor: #393939, icon: ''), - gitlab: (bgColor: #fc6d26, borderColor: #e24329, icon: ''), - google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''), - grafanacom: (bgColor: #262628, borderColor: #393939, icon: ''), - oauth: (bgColor: #262628, borderColor: #393939, icon: '') - ) - !default; +$external-services: ( + github: (bgColor: #464646, borderColor: #393939, icon: ''), + gitlab: (bgColor: #fc6d26, borderColor: #e24329, icon: ''), + google: (bgColor: #e84d3c, borderColor: #b83e31, icon: ''), + grafanacom: (bgColor: #262628, borderColor: #393939, icon: ''), + oauth: (bgColor: #262628, borderColor: #393939, icon: '') + ) + !default; - :export { - panelHorizontalPadding: $panel-horizontal-padding; - panelVerticalPadding: $panel-vertical-padding; - } +:export { + panelhorizontalpadding: $panel-horizontal-padding; + panelverticalpadding: $panel-vertical-padding; +} `; diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index 57ee960f3d6..104edced000 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -4,9 +4,9 @@ const theme: GrafanaThemeCommons = { name: 'Grafana Default', typography: { fontFamily: { - sansSerif: "'Roboto', Helvetica, Arial, sans-serif;", - serif: "Georgia, 'Times New Roman', Times, serif;", - monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace;", + sansSerif: "'Roboto', Helvetica, Arial, sans-serif", + serif: "Georgia, 'Times New Roman', Times, serif", + monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace", }, size: { base: '13px', From 3ca4adf51eaee8321919e6aec7fe47cb97653863 Mon Sep 17 00:00:00 2001 From: Johannes Schill Date: Thu, 14 Feb 2019 11:24:34 +0100 Subject: [PATCH 08/25] Add missing nodemon dependency --- package.json | 1 + yarn.lock | 44 ++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 43 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index dc17c344ee4..0076af4c0bd 100644 --- a/package.json +++ b/package.json @@ -178,6 +178,7 @@ "moment": "^2.22.2", "mousetrap": "^1.6.0", "mousetrap-global-bind": "^1.1.0", + "nodemon": "^1.18.10", "prismjs": "^1.6.0", "prop-types": "^15.6.2", "rc-cascader": "^0.14.0", diff --git a/yarn.lock b/yarn.lock index 4c32912ea5c..e9a78209fe8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4708,7 +4708,7 @@ child-process-promise@^2.2.1: node-version "^1.0.0" promise-polyfill "^6.0.1" -chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.4: +chokidar@^2.0.0, chokidar@^2.0.2, chokidar@^2.0.4, chokidar@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.1.tgz#adc39ad55a2adf26548bd2afa048f611091f9184" integrity sha512-gfw3p2oQV2wEt+8VuMlNsPjCxDxvvgnm/kz+uATu805mWVF8IJN7uz9DN7iBz+RMJISmiVbCOBFs9qBGMjtPfQ== @@ -9000,6 +9000,11 @@ iferr@^0.1.5, iferr@~0.1.5: resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501" integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE= +ignore-by-default@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09" + integrity sha1-SMptcvbGo68Aqa1K5odr44ieKwk= + ignore-walk@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.1.tgz#a83e62e7d272ac0e3b551aaa82831a19b69f82f8" @@ -11952,6 +11957,22 @@ node-version@^1.0.0: resolved "https://registry.yarnpkg.com/node-version/-/node-version-1.2.0.tgz#34fde3ffa8e1149bd323983479dda620e1b5060d" integrity sha512-ma6oU4Sk0qOoKEAymVoTvk8EdXEobdS7m/mAGhDJ8Rouugho48crHBORAmy5BoOcv8wraPM6xumapQp5hl4iIQ== +nodemon@^1.18.10: + version "1.18.10" + resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-1.18.10.tgz#3ba63f64eb4c283cf3e4f75f30817e9d4f393afe" + integrity sha512-we51yBb1TfEvZamFchRgcfLbVYgg0xlGbyXmOtbBzDwxwgewYS/YbZ5tnlnsH51+AoSTTsT3A2E/FloUbtH8cQ== + dependencies: + chokidar "^2.1.0" + debug "^3.1.0" + ignore-by-default "^1.0.1" + minimatch "^3.0.4" + pstree.remy "^1.1.6" + semver "^5.5.0" + supports-color "^5.2.0" + touch "^3.1.0" + undefsafe "^2.0.2" + update-notifier "^2.5.0" + nomnom@^1.8.1: version "1.8.1" resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.8.1.tgz#2151f722472ba79e50a76fc125bb8c8f2e4dc2a7" @@ -13733,6 +13754,11 @@ psl@^1.1.24, psl@^1.1.28: resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.31.tgz#e9aa86d0101b5b105cbe93ac6b784cd547276184" integrity sha512-/6pt4+C+T+wZUieKR620OpzN/LlnNKuWjy1iFLQ/UG35JqHlR/89MP1d96dUfkf6Dne3TuLQzOYEYshJ+Hx8mw== +pstree.remy@^1.1.6: + version "1.1.6" + resolved "https://registry.yarnpkg.com/pstree.remy/-/pstree.remy-1.1.6.tgz#73a55aad9e2d95814927131fbf4dc1b62d259f47" + integrity sha512-NdF35+QsqD7EgNEI5mkI/X+UwaxVEbQaz9f4IooEmMUv6ZPmlTQYGjBPJGgrlzNdjSvIy4MWMg6Q6vCgBO2K+w== + public-encrypt@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0" @@ -16340,7 +16366,7 @@ supports-color@^4.5.0: dependencies: has-flag "^2.0.0" -supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0: +supports-color@^5.1.0, supports-color@^5.2.0, supports-color@^5.3.0, supports-color@^5.4.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow== @@ -16733,6 +16759,13 @@ touch@^2.0.1: dependencies: nopt "~1.0.10" +touch@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/touch/-/touch-3.1.0.tgz#fe365f5f75ec9ed4e56825e0bb76d24ab74af83b" + integrity sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA== + dependencies: + nopt "~1.0.10" + tough-cookie@>=2.3.3: version "3.0.1" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2" @@ -17014,6 +17047,13 @@ umask@^1.1.0, umask@~1.1.0: resolved "https://registry.yarnpkg.com/umask/-/umask-1.1.0.tgz#f29cebf01df517912bb58ff9c4e50fde8e33320d" integrity sha1-8pzr8B31F5ErtY/5xOUP3o4zMg0= +undefsafe@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.2.tgz#225f6b9e0337663e0d8e7cfd686fc2836ccace76" + integrity sha1-Il9rngM3Zj4Njnz9aG/Cg2zKznY= + dependencies: + debug "^2.2.0" + underscore.string@~2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/underscore.string/-/underscore.string-2.4.0.tgz#8cdd8fbac4e2d2ea1e7e2e8097c42f442280f85b" From 28f42bab5bc1661a4572be7f91239ecccb602f72 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 18 Feb 2019 09:26:14 +0100 Subject: [PATCH 09/25] Replace require with import in start task --- scripts/cli/start.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/cli/start.ts b/scripts/cli/start.ts index 7df202387d7..cb68ee7f1dd 100644 --- a/scripts/cli/start.ts +++ b/scripts/cli/start.ts @@ -1,4 +1,4 @@ -const concurrently = require('concurrently'); +import concurrently from 'concurrently'; export const startTask = async ({ watchThemes, hot }: { watchThemes: boolean; hot: boolean }) => { const jobs = []; From 6da57d4c0874b7665e469fc3e0a0bb7477a9d514 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 18 Feb 2019 11:03:52 +0100 Subject: [PATCH 10/25] Make clear that variable scss files are generated from templates --- .../src/themes/_variables.dark.scss.tmpl.ts | 4 +- .../src/themes/_variables.light.scss.tmpl.ts | 4 +- .../src/themes/_variables.scss.tmpl.ts | 4 +- .../src/utils/generatedFileBanner.ts | 10 ++++ .../containers/DashboardPage.test.tsx | 60 ++++++++++--------- .../dashboard/dashgrid/PanelChrome.tsx | 2 +- ...rk.scss => _variables.dark.generated.scss} | 10 ++++ ...riables.scss => _variables.generated.scss} | 10 ++++ ...ss.d.ts => _variables.generated.scss.d.ts} | 4 +- ...t.scss => _variables.light.generated.scss} | 10 ++++ public/sass/grafana.dark.scss | 4 +- public/sass/grafana.light.scss | 4 +- scripts/cli/generateSassVariableFiles.ts | 6 +- 13 files changed, 90 insertions(+), 42 deletions(-) create mode 100644 packages/grafana-ui/src/utils/generatedFileBanner.ts rename public/sass/{_variables.dark.scss => _variables.dark.generated.scss} (97%) rename public/sass/{_variables.scss => _variables.generated.scss} (95%) rename public/sass/{_variables.scss.d.ts => _variables.generated.scss.d.ts} (60%) rename public/sass/{_variables.light.scss => _variables.light.generated.scss} (97%) 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 5b5a229a7f9..52601aecb18 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -1,9 +1,11 @@ /* tslint:disable:max-line-length */ import { GrafanaTheme } from '../types'; +import { renderGeneratedFileBanner } from '../utils/generatedFileBanner'; export const darkThemeVarsTemplate = (theme: GrafanaTheme) => - `// Global values + `${renderGeneratedFileBanner('grafana-ui/src/themes/dark.ts', 'grafana-ui/src/themes/_variables.dark.scss.tmpl.ts')} +// Global values // -------------------------------------------------- $theme-name: dark; 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 552de0fe62c..770c536fcd2 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -1,9 +1,11 @@ /* tslint:disable:max-line-length */ import { GrafanaTheme } from '../types'; +import { renderGeneratedFileBanner } from '../utils/generatedFileBanner'; export const lightThemeVarsTemplate = (theme: GrafanaTheme) => - `// Global values + `${renderGeneratedFileBanner('grafana-ui/src/themes/light.ts', 'grafana-ui/src/themes/_variable.light.scss.tmpl.ts')} +// Global values // -------------------------------------------------- $theme-name: light; diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 0051f74b21b..ce73f8e6dc8 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -1,9 +1,11 @@ /* tslint:disable:max-line-length */ import { GrafanaThemeCommons } from '../types'; +import { renderGeneratedFileBanner } from '../utils/generatedFileBanner'; export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) => - `// Options + `${renderGeneratedFileBanner('grafana-ui/src/themes/default.ts', 'grafana-ui/src/themes/_variables.scss.tmpl.ts')} +// Options // // Quickly modify global styling by enabling or disabling optional features. diff --git a/packages/grafana-ui/src/utils/generatedFileBanner.ts b/packages/grafana-ui/src/utils/generatedFileBanner.ts new file mode 100644 index 00000000000..86ee59dc1a3 --- /dev/null +++ b/packages/grafana-ui/src/utils/generatedFileBanner.ts @@ -0,0 +1,10 @@ +export const renderGeneratedFileBanner = (themeFile: string, templateFile: string) => `/*** + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + * + * Do not modify this file! + * - Edit ${themeFile} to regenerate + * - Edit ${templateFile} to update template + * + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + */ +`; diff --git a/public/app/features/dashboard/containers/DashboardPage.test.tsx b/public/app/features/dashboard/containers/DashboardPage.test.tsx index 1e6f8bd888e..30ce4005188 100644 --- a/public/app/features/dashboard/containers/DashboardPage.test.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.test.tsx @@ -3,10 +3,10 @@ import { shallow, ShallowWrapper } from 'enzyme'; import { DashboardPage, Props, State } from './DashboardPage'; import { DashboardModel } from '../state'; import { cleanUpDashboard } from '../state/actions'; -import { getNoPayloadActionCreatorMock, NoPayloadActionCreatorMock } from 'app/core/redux'; +import { getNoPayloadActionCreatorMock, NoPayloadActionCreatorMock } from 'app/core/redux'; import { DashboardRouteInfo, DashboardInitPhase } from 'app/types'; -jest.mock('sass/_variables.scss', () => ({ +jest.mock('sass/_variables.generated.scss', () => ({ panelhorizontalpadding: 10, panelVerticalPadding: 10, })); @@ -23,17 +23,20 @@ interface ScenarioContext { } function getTestDashboard(overrides?: any, metaOverrides?: any): DashboardModel { - const data = Object.assign({ - title: 'My dashboard', - panels: [ - { - id: 1, - type: 'graph', - title: 'My graph', - gridPos: { x: 0, y: 0, w: 1, h: 1 }, - }, - ], - }, overrides); + const data = Object.assign( + { + title: 'My dashboard', + panels: [ + { + id: 1, + type: 'graph', + title: 'My graph', + gridPos: { x: 0, y: 0, w: 1, h: 1 }, + }, + ], + }, + overrides + ); const meta = Object.assign({ canSave: true, canEdit: true }, metaOverrides); return new DashboardModel(data, meta); @@ -74,7 +77,7 @@ function dashboardPageScenario(description, scenarioFn: (ctx: ScenarioContext) = ctx.dashboard = props.dashboard; ctx.wrapper = shallow(); - } + }, }; beforeEach(() => { @@ -86,8 +89,7 @@ function dashboardPageScenario(description, scenarioFn: (ctx: ScenarioContext) = } describe('DashboardPage', () => { - - dashboardPageScenario("Given initial state", (ctx) => { + dashboardPageScenario('Given initial state', ctx => { ctx.setup(() => { ctx.mount(); }); @@ -97,7 +99,7 @@ describe('DashboardPage', () => { }); }); - dashboardPageScenario("Dashboard is fetching slowly", (ctx) => { + dashboardPageScenario('Dashboard is fetching slowly', ctx => { ctx.setup(() => { ctx.mount(); ctx.wrapper.setProps({ @@ -111,7 +113,7 @@ describe('DashboardPage', () => { }); }); - dashboardPageScenario("Dashboard init completed ", (ctx) => { + dashboardPageScenario('Dashboard init completed ', ctx => { ctx.setup(() => { ctx.mount(); ctx.setDashboardProp(); @@ -126,7 +128,7 @@ describe('DashboardPage', () => { }); }); - dashboardPageScenario("When user goes into panel edit", (ctx) => { + dashboardPageScenario('When user goes into panel edit', ctx => { ctx.setup(() => { ctx.mount(); ctx.setDashboardProp(); @@ -149,7 +151,7 @@ describe('DashboardPage', () => { }); }); - dashboardPageScenario("When user goes back to dashboard from panel edit", (ctx) => { + dashboardPageScenario('When user goes back to dashboard from panel edit', ctx => { ctx.setup(() => { ctx.mount(); ctx.setDashboardProp(); @@ -179,7 +181,7 @@ describe('DashboardPage', () => { }); }); - dashboardPageScenario("When dashboard has editview url state", (ctx) => { + dashboardPageScenario('When dashboard has editview url state', ctx => { ctx.setup(() => { ctx.mount(); ctx.setDashboardProp(); @@ -197,7 +199,7 @@ describe('DashboardPage', () => { }); }); - dashboardPageScenario("When adding panel", (ctx) => { + dashboardPageScenario('When adding panel', ctx => { ctx.setup(() => { ctx.mount(); ctx.setDashboardProp(); @@ -214,37 +216,37 @@ describe('DashboardPage', () => { }); }); - dashboardPageScenario("Given panel with id 0", (ctx) => { + dashboardPageScenario('Given panel with id 0', ctx => { ctx.setup(() => { ctx.mount(); ctx.setDashboardProp({ - panels: [{ id: 0, type: 'graph'}], + panels: [{ id: 0, type: 'graph' }], schemaVersion: 17, }); ctx.wrapper.setProps({ urlEdit: true, urlFullscreen: true, - urlPanelId: '0' + urlPanelId: '0', }); }); - it('Should go into edit mode' , () => { + it('Should go into edit mode', () => { expect(ctx.wrapper.state().isEditing).toBe(true); expect(ctx.wrapper.state().fullscreenPanel.id).toBe(0); }); }); - dashboardPageScenario("When dashboard unmounts", (ctx) => { + dashboardPageScenario('When dashboard unmounts', ctx => { ctx.setup(() => { ctx.mount(); ctx.setDashboardProp({ - panels: [{ id: 0, type: 'graph'}], + panels: [{ id: 0, type: 'graph' }], schemaVersion: 17, }); ctx.wrapper.unmount(); }); - it('Should call clean up action' , () => { + it('Should call clean up action', () => { expect(ctx.cleanUpDashboardMock.calls).toBe(1); }); }); diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index b29be4b389d..c66a7ff2fe8 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -19,7 +19,7 @@ import { DashboardModel, PanelModel } from '../state'; import { PanelPlugin } from 'app/types'; import { TimeRange, LoadingState } from '@grafana/ui'; -import variables from 'sass/_variables.scss'; +import variables from 'sass/_variables.generated.scss'; import templateSrv from 'app/features/templating/template_srv'; import { DataQueryResponse } from '@grafana/ui/src'; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.generated.scss similarity index 97% rename from public/sass/_variables.dark.scss rename to public/sass/_variables.dark.generated.scss index 4a3f5eb97d2..8b019805abc 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.generated.scss @@ -1,3 +1,13 @@ +/*** + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + * + * Do not modify it! + * - Edit grafana-ui/src/themes/dark.ts to regenerate + * - Edit grafana-ui/src/themes/_variables.dark.scss.tmpl.ts to update template + * + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + */ + // Global values // -------------------------------------------------- diff --git a/public/sass/_variables.scss b/public/sass/_variables.generated.scss similarity index 95% rename from public/sass/_variables.scss rename to public/sass/_variables.generated.scss index 1fbc22337e8..1d82b1a2f5c 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.generated.scss @@ -1,3 +1,13 @@ +/*** + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + * + * Do not modify it! + * - Edit grafana-ui/src/themes/default.ts to regenerate + * - Edit grafana-ui/src/themes/_variables.scss.tmpl.ts to update template + * + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + */ + // Options // // Quickly modify global styling by enabling or disabling optional features. diff --git a/public/sass/_variables.scss.d.ts b/public/sass/_variables.generated.scss.d.ts similarity index 60% rename from public/sass/_variables.scss.d.ts rename to public/sass/_variables.generated.scss.d.ts index f3de2340419..5b44580a7aa 100644 --- a/public/sass/_variables.scss.d.ts +++ b/public/sass/_variables.generated.scss.d.ts @@ -1,6 +1,6 @@ export interface GrafanaVariables { - 'panelHorizontalPadding': number; - 'panelVerticalPadding': number; + panelHorizontalPadding: number; + panelVerticalPadding: number; } declare const variables: GrafanaVariables; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.generated.scss similarity index 97% rename from public/sass/_variables.light.scss rename to public/sass/_variables.light.generated.scss index ff9e884a39d..b5ebb883d1e 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.generated.scss @@ -1,3 +1,13 @@ +/*** + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + * + * Do not modify it! + * - Edit grafana-ui/src/themes/light.ts to regenerate + * - Edit grafana-ui/src/themes/_variable.light.scss.tmpl.ts to update template + * + * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! + */ + // Global values // -------------------------------------------------- diff --git a/public/sass/grafana.dark.scss b/public/sass/grafana.dark.scss index f7f5163f36f..4c214194c33 100644 --- a/public/sass/grafana.dark.scss +++ b/public/sass/grafana.dark.scss @@ -1,3 +1,3 @@ -@import 'variables'; -@import 'variables.dark'; +@import 'variables.generated'; +@import 'variables.dark.generated'; @import 'grafana'; diff --git a/public/sass/grafana.light.scss b/public/sass/grafana.light.scss index d7824edfc5d..fad46b9a206 100644 --- a/public/sass/grafana.light.scss +++ b/public/sass/grafana.light.scss @@ -1,3 +1,3 @@ -@import 'variables'; -@import 'variables.light'; +@import 'variables.generated'; +@import 'variables.light.generated'; @import 'grafana'; diff --git a/scripts/cli/generateSassVariableFiles.ts b/scripts/cli/generateSassVariableFiles.ts index 5d0434f6f9d..43a5ff193c1 100644 --- a/scripts/cli/generateSassVariableFiles.ts +++ b/scripts/cli/generateSassVariableFiles.ts @@ -6,9 +6,9 @@ import { darkThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.dark.sc import { lightThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.light.scss.tmpl'; import { commonThemeVarsTemplate } from '@grafana/ui/src/themes/_variables.scss.tmpl'; -const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.scss'; -const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.scss'; -const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.scss'; +const darkThemeVariablesPath = __dirname + '/../../public/sass/_variables.dark.generated.scss'; +const lightThemeVariablesPath = __dirname + '/../../public/sass/_variables.light.generated.scss'; +const defaultThemeVariablesPath = __dirname + '/../../public/sass/_variables.generated.scss'; const writeVariablesFile = async (path: string, data: string) => { return new Promise((resolve, reject) => { From 4721250d199b7e00797df0cd99689bd3cfbd587b Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Mon, 18 Feb 2019 11:05:02 +0100 Subject: [PATCH 11/25] Variables regenerated --- public/sass/_variables.dark.generated.scss | 2 +- public/sass/_variables.generated.scss | 2 +- public/sass/_variables.light.generated.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 8b019805abc..0bbb3eaeb25 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -1,7 +1,7 @@ /*** * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! * - * Do not modify it! + * Do not modify this file! * - Edit grafana-ui/src/themes/dark.ts to regenerate * - Edit grafana-ui/src/themes/_variables.dark.scss.tmpl.ts to update template * diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss index 1d82b1a2f5c..d77cf9530c8 100644 --- a/public/sass/_variables.generated.scss +++ b/public/sass/_variables.generated.scss @@ -1,7 +1,7 @@ /*** * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! * - * Do not modify it! + * Do not modify this file! * - Edit grafana-ui/src/themes/default.ts to regenerate * - Edit grafana-ui/src/themes/_variables.scss.tmpl.ts to update template * diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index b5ebb883d1e..9d90f164d86 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -1,7 +1,7 @@ /*** * !!! THIS FILE WAS GENERATED AUTOMATICALLY !!! * - * Do not modify it! + * Do not modify this file! * - Edit grafana-ui/src/themes/light.ts to regenerate * - Edit grafana-ui/src/themes/_variable.light.scss.tmpl.ts to update template * From 547696af19e773c0824a569eeaa70f084b668ea1 Mon Sep 17 00:00:00 2001 From: ijin08 Date: Tue, 19 Feb 2019 13:40:43 +0100 Subject: [PATCH 12/25] updated theme template files variables to master --- .../src/themes/_variables.dark.scss.tmpl.ts | 211 ++++++++++-------- .../src/themes/_variables.light.scss.tmpl.ts | 147 ++++++------ 2 files changed, 197 insertions(+), 161 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 52601aecb18..c4009347dd0 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -10,6 +10,18 @@ export const darkThemeVarsTemplate = (theme: GrafanaTheme) => $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; + // Grays // ------------------------- $black: ${theme.colors.black}; @@ -26,6 +38,24 @@ $gray-5: ${theme.colors.gray5}; $gray-6: ${theme.colors.gray6}; $gray-7: ${theme.colors.gray7}; +$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; $input-black: #09090b; @@ -34,41 +64,40 @@ $white: ${theme.colors.white}; // Accent colors // ------------------------- $blue: ${theme.colors.blue}; -$blue-dark: #005f81; $green: #299c46; -$red: #d44a3a; +$red: $lobster-base; $yellow: #ecbb13; $purple: #9933cc; $variable: #32d1df; $orange: #eb7b18; $brand-primary: $orange; -$brand-success: $green; +$brand-success: $green-base; $brand-warning: $brand-primary; -$brand-danger: $red; +$brand-danger: $lobster-base; -$query-red: #e24d42; -$query-green: #74e680; +$query-red: $lobster-base; +$query-green: $forest-light; $query-purple: #fe85fc; $query-keyword: #66d9ef; $query-orange: $orange; // Status colors // ------------------------- -$online: #10a345; +$online: $green-base; $warn: #f79520; -$critical: #ed2e18; +$critical: $lobster-base; // Scaffolding // ------------------------- -$body-bg: rgb(23, 24, 25); -$page-bg: rgb(22, 23, 25); +$body-bg: $dark-2; +$page-bg: $dark-2; $body-color: $gray-4; $text-color: $gray-4; $text-color-strong: $white; $text-color-weak: $gray-2; -$text-color-faint: $dark-5; +$text-color-faint: $dark-10; $text-color-emphasis: $gray-5; $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); @@ -82,93 +111,88 @@ $brand-gradient: linear-gradient( rgba(255, 68, 0, 0.7) 100% ); -$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); -$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); +$page-gradient: linear-gradient(180deg, $dark-5 10px, dark-2 100px); +$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; +$external-link-color: $sapphire-light; // Typography // ------------------------- $headings-color: darken($white, 11%); -$abbr-border-color: $gray-3 !default; +$abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; -$hr-border-color: $dark-4; +$hr-border-color: $dark-9; // Panel // ------------------------- -$panel-bg: #212124; +$panel-bg: $dark-4; $panel-border: solid 1px $dark-1; -$panel-header-hover-bg: $dark-4; +$panel-header-hover-bg: $dark-9; $panel-corner: $panel-bg; // page header -$page-header-bg: linear-gradient(90deg, #292a2d, black); -$page-header-shadow: inset 0px -4px 14px $dark-2; -$page-header-border-color: $dark-4; +$page-header-bg: linear-gradient(90deg, $dark-7, $black); +$page-header-shadow: inset 0px -4px 14px $dark-3; +$page-header-border-color: $dark-9; $divider-border-color: $gray-1; // Graphite Target Editor -$tight-form-bg: $dark-3; -$tight-form-func-bg: $dark-4; -$tight-form-func-highlight-bg: $dark-5; +$tight-form-func-bg: $dark-9; +$tight-form-func-highlight-bg: $dark-10; $modal-backdrop-bg: #353c42; $code-tag-bg: $dark-1; -$code-tag-border: $dark-4; +$code-tag-border: $dark-9; // cards -$card-background: linear-gradient(135deg, #2f2f32, #262628); -$card-background-hover: linear-gradient(135deg, #343436, #262628); +$card-background: linear-gradient(135deg, $dark-8, $dark-6); +$card-background-hover: linear-gradient(135deg, $dark-9, $dark-6); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); // Lists $list-item-bg: $card-background; -$list-item-hover-bg: lighten($gray-blue, 2%); +$list-item-hover-bg: $card-background-hover; $list-item-link-color: $text-color; $list-item-shadow: $card-shadow; $empty-list-cta-bg: $gray-blue; // Scrollbars -$scrollbarBackground: #404357; -$scrollbarBackground2: #3a3a3a; -$scrollbarBorder: black; +$scrollbarBackground: $dark-9; +$scrollbarBackground2: $dark-9; +$scrollbarBorder: $dark-10; // Tables // ------------------------- -$table-bg: transparent; // overall background-color -$table-bg-accent: $dark-3; // for striping -$table-border: $dark-3; // table and cell border +$table-bg-accent: $dark-6; // for striping +$table-border: $dark-6; // table and cell border -$table-bg-odd: $dark-2; -$table-bg-hover: $dark-3; +$table-bg-odd: $dark-3; +$table-bg-hover: $dark-6; // Buttons // ------------------------- -$btn-primary-bg: #ff6600; -$btn-primary-bg-hl: #bc3e06; +$btn-secondary-bg: $sapphire-base; +$btn-secondary-bg-hl: $sapphire-shade; -$btn-secondary-bg-hl: lighten($blue-dark, 5%); -$btn-secondary-bg: $blue-dark; +$btn-primary-bg: $green-base; +$btn-primary-bg-hl: $green-shade; -$btn-success-bg: $green; -$btn-success-bg-hl: darken($green, 6%); +$btn-success-bg: $green-base; +$btn-success-bg-hl: $green-shade; -$btn-warning-bg: $brand-warning; -$btn-warning-bg-hl: lighten($brand-warning, 8%); +$btn-danger-bg: $lobster-base; +$btn-danger-bg-hl: $lobster-shade; -$btn-danger-bg: $red; -$btn-danger-bg-hl: darken($red, 8%); - -$btn-inverse-bg: $dark-3; -$btn-inverse-bg-hl: lighten($dark-3, 4%); +$btn-inverse-bg: $dark-6; +$btn-inverse-bg-hl: lighten($dark-6, 4%); $btn-inverse-text-color: $link-color; $btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1); @@ -176,24 +200,24 @@ $btn-link-color: $gray-3; $iconContainerBackground: $black; -$btn-divider-left: $dark-4; -$btn-divider-right: $dark-2; +$btn-divider-left: $dark-9; +$btn-divider-right: $dark-3; $btn-drag-image: '../img/grab_dark.svg'; // Forms // ------------------------- $input-bg: $input-black; -$input-bg-disabled: $dark-3; +$input-bg-disabled: $dark-6; $input-color: $gray-4; -$input-border-color: $dark-3; +$input-border-color: $dark-6; $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); -$input-border-focus: $input-border-color; -$input-box-shadow-focus: rgba(102, 175, 233, 0.6); +$input-border-focus: $dark-6 !default; +$input-box-shadow-focus: $sapphire-light !default; $input-color-placeholder: $gray-1 !default; $input-label-bg: $gray-blue; -$input-label-border-color: $dark-3; +$input-label-border-color: $dark-6; $input-color-select-arrow: $white; // Input placeholder text color @@ -205,12 +229,12 @@ $search-filter-box-bg: $gray-blue; // Typeahead $typeahead-shadow: 0 5px 10px 0 $black; -$typeahead-selected-bg: $dark-4; +$typeahead-selected-bg: $dark-9; $typeahead-selected-color: $yellow; // Dropdowns // ------------------------- -$dropdownBackground: $dark-3; +$dropdownBackground: $dark-6; $dropdownBorder: rgba(0, 0, 0, 0.2); $dropdownDividerTop: transparent; $dropdownDividerBottom: #444; @@ -219,7 +243,7 @@ $dropdownLinkColor: $text-color; $dropdownLinkColorHover: $white; $dropdownLinkColorActive: $white; -$dropdownLinkBackgroundHover: $dark-4; +$dropdownLinkBackgroundHover: $dark-9; // Horizontal forms & lists // ------------------------- @@ -230,10 +254,7 @@ $horizontalComponentOffset: 180px; $navbarHeight: 55px; $navbarBackground: $panel-bg; -$navbarBorder: 1px solid $dark-3; -$navbarShadow: 0 0 20px black; - -$navbarLinkColor: $gray-4; +$navbarBorder: 1px solid $dark-6; $navbarButtonBackground: $navbarBackground; $navbarButtonBackgroundHighlight: $body-bg; @@ -244,19 +265,19 @@ $navbar-button-border: #2f2f32; // ------------------------- $side-menu-bg: $black; $side-menu-bg-mobile: $side-menu-bg; -$side-menu-item-hover-bg: $dark-2; +$side-menu-item-hover-bg: $dark-3; $side-menu-shadow: 0 0 20px black; $side-menu-link-color: $link-color; // Menu dropdowns // ------------------------- $menu-dropdown-bg: $body-bg; -$menu-dropdown-hover-bg: $dark-2; +$menu-dropdown-hover-bg: $dark-3; $menu-dropdown-shadow: 5px 5px 20px -5px $black; // Tabs // ------------------------- -$tab-border-color: $dark-4; +$tab-border-color: $dark-9; // Toolbar $toolbar-bg: $input-black; @@ -265,18 +286,17 @@ $toolbar-bg: $input-black; // ------------------------- $warning-text-color: $warn; $error-text-color: #e84d4d; -$success-text-color: #12d95a; -$info-text-color: $blue-dark; +$success-text-color: $forest-light; -$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); -$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); +$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-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); // popover -$popover-bg: $page-bg; +$popover-bg: $dark-2; $popover-color: $text-color; -$popover-border-color: $dark-4; +$popover-border-color: $dark-9; $popover-shadow: 0 0 20px black; $popover-help-bg: $btn-secondary-bg; @@ -300,7 +320,7 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox.png'; // info box -$info-box-border-color: darken($blue, 12%); +$info-box-border-color: $sapphire-base; // footer $footer-link-color: $gray-2; @@ -322,17 +342,17 @@ $json-explorer-url-color: #027bff; // Changelog and diff // ------------------------- -$diff-label-bg: $dark-2; +$diff-label-bg: $dark-3; $diff-label-fg: $white; -$diff-group-bg: $dark-4; +$diff-group-bg: $dark-9; $diff-arrow-color: $white; -$diff-json-bg: $dark-4; +$diff-json-bg: $dark-9; $diff-json-fg: $gray-5; -$diff-json-added: #457740; -$diff-json-deleted: #a04338; +$diff-json-added: $sapphire-shade; +$diff-json-deleted: $lobster-shade; $diff-json-old: #a04338; $diff-json-new: #457740; @@ -340,53 +360,54 @@ $diff-json-new: #457740; $diff-json-changed-fg: $gray-5; $diff-json-changed-num: $text-color; -$diff-json-icon: $gray-7; +$diff-json-icon: $gray-5; //Submenu -$variable-option-bg: $blue-dark; +$variable-option-bg: $dropdownLinkBackgroundHover; //Switch Slider // ------------------------- $switch-bg: $input-bg; -$switch-slider-color: $dark-2; +$switch-slider-color: $dark-3; $switch-slider-off-bg: $gray-1; -$switch-slider-on-bg: linear-gradient(90deg, $orange, $red); +$switch-slider-on-bg: linear-gradient(90deg, #eb7b18, #d44a3a); $switch-slider-shadow: 0 0 3px black; //Checkbox // ------------------------- $checkbox-bg: $dark-1; $checkbox-border: 1px solid $gray-1; -$checkbox-checked-bg: linear-gradient(0deg, $orange, $red); +$checkbox-checked-bg: linear-gradient(0deg, #eb7b18, #d44a3a); $checkbox-color: $dark-1; //Panel Edit // ------------------------- $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-5; -$panel-editor-viz-item-border: 1px solid $dark-5; -$panel-editor-viz-item-shadow-hover: 0 0 4px $blue; -$panel-editor-viz-item-border-hover: 1px solid $blue; +$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-bg: $input-black; $panel-editor-tabs-line-color: #e3e3e3; -$panel-editor-viz-item-bg-hover: darken($blue, 47%); + +$panel-editor-viz-item-bg-hover: darken($sapphire-base, 46%); $panel-options-group-border: none; $panel-options-group-header-bg: $gray-blue; -$panel-grid-placeholder-bg: darken($blue, 47%); -$panel-grid-placeholder-shadow: 0 0 4px $blue; +$panel-grid-placeholder-bg: $sapphire-faint; +$panel-grid-placeholder-shadow: 0 0 4px $sapphire-shade; // logs $logs-color-unkown: $gray-2; // toggle-group -$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); +$button-toggle-group-btn-active-bg: linear-gradient(90deg, #eb7b18, #d44a3a); $button-toggle-group-btn-active-shadow: inset 0 0 4px $black; -$button-toggle-group-btn-seperator-border: 1px solid $page-bg; +$button-toggle-group-btn-seperator-border: 1px solid $dark-2; -$vertical-resize-handle-bg: $dark-5; +$vertical-resize-handle-bg: $dark-10; $vertical-resize-handle-dots: $gray-1; $vertical-resize-handle-dots-hover: $gray-2; `; 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 770c536fcd2..2a54ab9c68c 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -10,6 +10,19 @@ export const lightThemeVarsTemplate = (theme: GrafanaTheme) => $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; + // Grays // ------------------------- $black: ${theme.colors.black}; @@ -26,35 +39,45 @@ $gray-5: ${theme.colors.gray5}; $gray-6: ${theme.colors.gray6}; $gray-7: ${theme.colors.gray7}; +$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; + $white: ${theme.colors.white}; // Accent colors // ------------------------- $blue: ${theme.colors.blue}; -$blue-light: #00a8e6; $green: #3aa655; -$red: #d44939; +$red: $lobster-base; $yellow: #ff851b; $orange: #ff7941; $purple: #9954bb; -$variable: $blue; +$variable: $purple-shade; $brand-primary: $orange; $brand-success: $green; $brand-warning: $orange; -$brand-danger: $red; +$brand-danger: $lobster-base; -$query-red: $red; +$query-red: $lobster-base; $query-green: $green; $query-purple: $purple; $query-orange: $orange; -$query-keyword: $blue; +$query-keyword: $sapphire-base; // Status colors // ------------------------- -$online: #01a64f; +$online: $green-shade; $warn: #f79520; -$critical: #ec2128; +$critical: $lobster-shade; // Scaffolding // ------------------------- @@ -69,7 +92,6 @@ $text-color-faint: $gray-4; $text-color-emphasis: $dark-5; $text-shadow-faint: none; -$textShadow: none; // gradients $brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); @@ -82,7 +104,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: $blue-light; +$external-link-color: $sapphire-shade; // Typography // ------------------------- @@ -90,7 +112,7 @@ $headings-color: $text-color; $abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; -$hr-border-color: $dark-3 !default; +$hr-border-color: $gray-4 !default; // Panel // ------------------------- @@ -107,13 +129,12 @@ $page-header-border-color: $gray-4; $divider-border-color: $gray-2; // Graphite Target Editor -$tight-form-bg: #eaebee; $tight-form-func-bg: $gray-5; $tight-form-func-highlight-bg: $gray-6; $modal-backdrop-bg: $body-bg; $code-tag-bg: $gray-6; -$code-tag-border: darken($code-tag-bg, 3%); +$code-tag-border: $gray-4; // cards $card-background: linear-gradient(135deg, $gray-6, $gray-5); @@ -129,13 +150,12 @@ $list-item-shadow: $card-shadow; $empty-list-cta-bg: $gray-6; // Scrollbars -$scrollbarBackground: $gray-5; -$scrollbarBackground2: $gray-5; -$scrollbarBorder: $gray-4; +$scrollbarBackground: $gray-4; +$scrollbarBackground2: $gray-4; +$scrollbarBorder: $gray-3; // Tables // ------------------------- -$table-bg: transparent; // overall background-color $table-bg-accent: $gray-5; // for striping $table-border: $gray-3; // table and cell border @@ -144,23 +164,21 @@ $table-bg-hover: $gray-5; // Buttons // ------------------------- -$btn-primary-bg: $brand-primary; -$btn-primary-bg-hl: lighten($brand-primary, 8%); +$btn-primary-bg: $green-base; +$btn-primary-bg-hl: $green-shade; -$btn-secondary-bg: $blue; -$btn-secondary-bg-hl: lighten($blue, 4%); +$btn-secondary-bg: $sapphire-base; +$btn-secondary-bg-hl: $sapphire-shade; -$btn-success-bg: lighten($green, 3%); -$btn-success-bg-hl: darken($green, 3%); +$btn-success-bg: $green-base; +$btn-success-bg-hl: $green-shade; -$btn-warning-bg: lighten($orange, 3%); -$btn-warning-bg-hl: darken($orange, 3%); +$btn-danger-bg: $lobster-base; +$btn-danger-bg-hl: $lobster-shade; -$btn-danger-bg: lighten($red, 3%); -$btn-danger-bg-hl: darken($red, 3%); - -$btn-inverse-bg: $gray-6; -$btn-inverse-bg-hl: darken($gray-6, 5%); +$btn-inverse-bg: $gray-5; +$btn-inverse-bg-hl: darken($gray-5, 5%); +$btn-inverse-bg-hl: $gray-4; $btn-inverse-text-color: $gray-1; $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); @@ -178,11 +196,11 @@ $btn-drag-image: '../img/grab_light.svg'; $input-bg: $white; $input-bg-disabled: $gray-5; -$input-color: $dark-3; +$input-color: $dark-5; $input-border-color: $gray-5; $input-box-shadow: none; -$input-border-focus: $blue !default; -$input-box-shadow-focus: $blue !default; +$input-border-focus: $gray-5 !default; +$input-box-shadow-focus: $sapphire-light !default; $input-color-placeholder: $gray-4 !default; $input-label-bg: $gray-5; $input-label-border-color: $gray-5; @@ -207,7 +225,7 @@ $dropdownBorder: $gray-4; $dropdownDividerTop: $gray-6; $dropdownDividerBottom: $white; -$dropdownLinkColor: $dark-3; +$dropdownLinkColor: $dark-5; $dropdownLinkColorHover: $link-color; $dropdownLinkColorActive: $link-color; @@ -222,10 +240,7 @@ $horizontalComponentOffset: 180px; $navbarHeight: 52px; $navbarBackground: $white; -$navbarBorder: 1px solid $gray-4; -$navbarShadow: 0 0 3px #c1c1c1; - -$navbarLinkColor: #444; +$navbarBorder: 1px solid $gray-5; $navbarButtonBackground: lighten($navbarBackground, 3%); $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); @@ -256,14 +271,13 @@ $toolbar-bg: white; // Form states and alerts // ------------------------- $warning-text-color: lighten($orange, 10%); -$error-text-color: lighten($red, 10%); +$error-text-color: $lobster-shade; $success-text-color: lighten($green, 10%); -$info-text-color: $blue; -$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); -$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); -$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); -$alert-info-bg: $blue; +$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-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); // popover $popover-bg: $page-bg; @@ -271,7 +285,7 @@ $popover-color: $text-color; $popover-border-color: $gray-5; $popover-shadow: 0 0 20px $white; -$popover-help-bg: $blue; +$popover-help-bg: $btn-secondary-bg; $popover-help-color: $gray-6; $popover-error-bg: $btn-danger-bg; @@ -292,7 +306,7 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox_white.png'; // info box -$info-box-border-color: lighten($blue, 20%); +$info-box-border-color: $sapphire-base; // footer $footer-link-color: $gray-3; @@ -301,55 +315,55 @@ $footer-link-hover: $dark-5; // json explorer $json-explorer-default-color: black; $json-explorer-string-color: green; -$json-explorer-number-color: blue; -$json-explorer-boolean-color: red; +$json-explorer-number-color: $sapphire-base; +$json-explorer-boolean-color: $lobster-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: blue; +$json-explorer-bracket-color: $sapphire-base; $json-explorer-key-color: #00008b; -$json-explorer-url-color: blue; +$json-explorer-url-color: $sapphire-base; // Changelog and diff // ------------------------- -$diff-label-bg: $gray-5; +$diff-label-bg: $gray-7; $diff-label-fg: $gray-2; -$diff-arrow-color: $dark-3; -$diff-group-bg: $gray-7; +$diff-arrow-color: $dark-5; +$diff-group-bg: $gray-6; -$diff-json-bg: $gray-5; -$diff-json-fg: $gray-2; +$diff-json-bg: $gray-6; +$diff-json-fg: $gray-1; -$diff-json-added: lighten(desaturate($green, 30%), 10%); -$diff-json-deleted: desaturate($red, 35%); +$diff-json-added: $sapphire-shade; +$diff-json-deleted: $lobster-shade; $diff-json-old: #5a372a; $diff-json-new: #664e33; -$diff-json-changed-fg: $gray-6; +$diff-json-changed-fg: $gray-7; $diff-json-changed-num: $gray-4; $diff-json-icon: $gray-4; //Submenu -$variable-option-bg: $blue-light; +$variable-option-bg: $dropdownLinkBackgroundHover; //Switch Slider // ------------------------- $switch-bg: $white; $switch-slider-color: $gray-7; $switch-slider-off-bg: $gray-5; -$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red); +$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400); $switch-slider-shadow: 0 0 3px $dark-5; //Checkbox // ------------------------- $checkbox-bg: $gray-6; $checkbox-border: 1px solid $gray-3; -$checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); +$checkbox-checked-bg: linear-gradient(0deg, #ff9830, #e55400); $checkbox-color: $gray-7; //Panel Edit @@ -358,17 +372,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 $blue-light; -$panel-editor-viz-item-border-hover: 1px solid $blue-light; +$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-bg: $white; $panel-editor-tabs-line-color: $dark-5; -$panel-editor-viz-item-bg-hover: lighten($blue, 62%); + +$panel-editor-viz-item-bg-hover: lighten($sapphire-base, 45%); $panel-options-group-border: none; $panel-options-group-header-bg: $gray-5; -$panel-grid-placeholder-bg: lighten($blue, 62%); -$panel-grid-placeholder-shadow: 0 0 4px $blue-light; +$panel-grid-placeholder-bg: $sapphire-faint; +$panel-grid-placeholder-shadow: 0 0 4px $sapphire-light; // logs $logs-color-unkown: $gray-5; From 2372474ca888a6e91d7fde799df6ece65c7db7c2 Mon Sep 17 00:00:00 2001 From: ijin08 Date: Tue, 19 Feb 2019 13:57:56 +0100 Subject: [PATCH 13/25] updated theme variables to master --- .../src/themes/_variables.dark.scss.tmpl.ts | 2 + .../src/themes/_variables.light.scss.tmpl.ts | 2 + public/sass/_variables.dark.generated.scss | 212 ++++++++++-------- public/sass/_variables.light.generated.scss | 149 ++++++------ 4 files changed, 204 insertions(+), 161 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 c4009347dd0..32c08d449e8 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -144,6 +144,7 @@ $page-header-border-color: $dark-9; $divider-border-color: $gray-1; // Graphite Target Editor +$tight-form-bg: $dark-3; //remove after merge!!! $tight-form-func-bg: $dark-9; $tight-form-func-highlight-bg: $dark-10; @@ -171,6 +172,7 @@ $scrollbarBorder: $dark-10; // Tables // ------------------------- +$table-bg: transparent; // remove after merge!!! $table-bg-accent: $dark-6; // for striping $table-border: $dark-6; // table and cell border 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 2a54ab9c68c..2418d088979 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -129,6 +129,7 @@ $page-header-border-color: $gray-4; $divider-border-color: $gray-2; // Graphite Target Editor +$tight-form-bg: $dark-3; //remove after merge!!! $tight-form-func-bg: $gray-5; $tight-form-func-highlight-bg: $gray-6; @@ -156,6 +157,7 @@ $scrollbarBorder: $gray-3; // Tables // ------------------------- +$table-bg: transparent; // remove after merge!!! $table-bg-accent: $gray-5; // for striping $table-border: $gray-3; // table and cell border diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 0bbb3eaeb25..a31a8078a10 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -13,6 +13,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; +$green-base: #299c46; +$green-shade: #23843b; + // Grays // ------------------------- $black: #000000; @@ -29,6 +41,23 @@ $gray-5: #ececec; $gray-6: #f4f5f8; $gray-7: #fbfbfb; +$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; $input-black: #09090b; @@ -37,41 +66,40 @@ $white: #ffffff; // Accent colors // ------------------------- $blue: #ff0000; -$blue-dark: #005f81; $green: #299c46; -$red: #d44a3a; +$red: $lobster-base; $yellow: #ecbb13; $purple: #9933cc; $variable: #32d1df; $orange: #eb7b18; $brand-primary: $orange; -$brand-success: $green; +$brand-success: $green-base; $brand-warning: $brand-primary; -$brand-danger: $red; +$brand-danger: $lobster-base; -$query-red: #e24d42; -$query-green: #74e680; +$query-red: $lobster-base; +$query-green: $forest-light; $query-purple: #fe85fc; $query-keyword: #66d9ef; $query-orange: $orange; // Status colors // ------------------------- -$online: #10a345; +$online: $green-base; $warn: #f79520; -$critical: #ed2e18; +$critical: $lobster-base; // Scaffolding // ------------------------- -$body-bg: rgb(23, 24, 25); -$page-bg: rgb(22, 23, 25); +$body-bg: $dark-2; +$page-bg: $dark-2; $body-color: $gray-4; $text-color: $gray-4; $text-color-strong: $white; $text-color-weak: $gray-2; -$text-color-faint: $dark-5; +$text-color-faint: $dark-10; $text-color-emphasis: $gray-5; $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); @@ -85,93 +113,90 @@ $brand-gradient: linear-gradient( rgba(255, 68, 0, 0.7) 100% ); -$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); -$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); +$page-gradient: linear-gradient(180deg, $dark-5 10px, dark-2 100px); +$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; +$external-link-color: $sapphire-light; // Typography // ------------------------- $headings-color: darken($white, 11%); -$abbr-border-color: $gray-3 !default; +$abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; -$hr-border-color: $dark-4; +$hr-border-color: $dark-9; // Panel // ------------------------- -$panel-bg: #212124; +$panel-bg: $dark-4; $panel-border: solid 1px $dark-1; -$panel-header-hover-bg: $dark-4; +$panel-header-hover-bg: $dark-9; $panel-corner: $panel-bg; // page header -$page-header-bg: linear-gradient(90deg, #292a2d, black); -$page-header-shadow: inset 0px -4px 14px $dark-2; -$page-header-border-color: $dark-4; +$page-header-bg: linear-gradient(90deg, $dark-7, $black); +$page-header-shadow: inset 0px -4px 14px $dark-3; +$page-header-border-color: $dark-9; $divider-border-color: $gray-1; // Graphite Target Editor -$tight-form-bg: $dark-3; -$tight-form-func-bg: $dark-4; -$tight-form-func-highlight-bg: $dark-5; +$tight-form-bg: $dark-3; //remove after merge!!! +$tight-form-func-bg: $dark-9; +$tight-form-func-highlight-bg: $dark-10; $modal-backdrop-bg: #353c42; $code-tag-bg: $dark-1; -$code-tag-border: $dark-4; +$code-tag-border: $dark-9; // cards -$card-background: linear-gradient(135deg, #2f2f32, #262628); -$card-background-hover: linear-gradient(135deg, #343436, #262628); +$card-background: linear-gradient(135deg, $dark-8, $dark-6); +$card-background-hover: linear-gradient(135deg, $dark-9, $dark-6); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); // Lists $list-item-bg: $card-background; -$list-item-hover-bg: lighten($gray-blue, 2%); +$list-item-hover-bg: $card-background-hover; $list-item-link-color: $text-color; $list-item-shadow: $card-shadow; $empty-list-cta-bg: $gray-blue; // Scrollbars -$scrollbarBackground: #404357; -$scrollbarBackground2: #3a3a3a; -$scrollbarBorder: black; +$scrollbarBackground: $dark-9; +$scrollbarBackground2: $dark-9; +$scrollbarBorder: $dark-10; // Tables // ------------------------- -$table-bg: transparent; // overall background-color -$table-bg-accent: $dark-3; // for striping -$table-border: $dark-3; // table and cell border +$table-bg: transparent; // remove after merge!!! +$table-bg-accent: $dark-6; // for striping +$table-border: $dark-6; // table and cell border -$table-bg-odd: $dark-2; -$table-bg-hover: $dark-3; +$table-bg-odd: $dark-3; +$table-bg-hover: $dark-6; // Buttons // ------------------------- -$btn-primary-bg: #ff6600; -$btn-primary-bg-hl: #bc3e06; +$btn-secondary-bg: $sapphire-base; +$btn-secondary-bg-hl: $sapphire-shade; -$btn-secondary-bg-hl: lighten($blue-dark, 5%); -$btn-secondary-bg: $blue-dark; +$btn-primary-bg: $green-base; +$btn-primary-bg-hl: $green-shade; -$btn-success-bg: $green; -$btn-success-bg-hl: darken($green, 6%); +$btn-success-bg: $green-base; +$btn-success-bg-hl: $green-shade; -$btn-warning-bg: $brand-warning; -$btn-warning-bg-hl: lighten($brand-warning, 8%); +$btn-danger-bg: $lobster-base; +$btn-danger-bg-hl: $lobster-shade; -$btn-danger-bg: $red; -$btn-danger-bg-hl: darken($red, 8%); - -$btn-inverse-bg: $dark-3; -$btn-inverse-bg-hl: lighten($dark-3, 4%); +$btn-inverse-bg: $dark-6; +$btn-inverse-bg-hl: lighten($dark-6, 4%); $btn-inverse-text-color: $link-color; $btn-inverse-text-shadow: 0px 1px 0 rgba(0, 0, 0, 0.1); @@ -179,24 +204,24 @@ $btn-link-color: $gray-3; $iconContainerBackground: $black; -$btn-divider-left: $dark-4; -$btn-divider-right: $dark-2; +$btn-divider-left: $dark-9; +$btn-divider-right: $dark-3; $btn-drag-image: '../img/grab_dark.svg'; // Forms // ------------------------- $input-bg: $input-black; -$input-bg-disabled: $dark-3; +$input-bg-disabled: $dark-6; $input-color: $gray-4; -$input-border-color: $dark-3; +$input-border-color: $dark-6; $input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.1); -$input-border-focus: $input-border-color; -$input-box-shadow-focus: rgba(102, 175, 233, 0.6); +$input-border-focus: $dark-6 !default; +$input-box-shadow-focus: $sapphire-light !default; $input-color-placeholder: $gray-1 !default; $input-label-bg: $gray-blue; -$input-label-border-color: $dark-3; +$input-label-border-color: $dark-6; $input-color-select-arrow: $white; // Input placeholder text color @@ -208,12 +233,12 @@ $search-filter-box-bg: $gray-blue; // Typeahead $typeahead-shadow: 0 5px 10px 0 $black; -$typeahead-selected-bg: $dark-4; +$typeahead-selected-bg: $dark-9; $typeahead-selected-color: $yellow; // Dropdowns // ------------------------- -$dropdownBackground: $dark-3; +$dropdownBackground: $dark-6; $dropdownBorder: rgba(0, 0, 0, 0.2); $dropdownDividerTop: transparent; $dropdownDividerBottom: #444; @@ -222,7 +247,7 @@ $dropdownLinkColor: $text-color; $dropdownLinkColorHover: $white; $dropdownLinkColorActive: $white; -$dropdownLinkBackgroundHover: $dark-4; +$dropdownLinkBackgroundHover: $dark-9; // Horizontal forms & lists // ------------------------- @@ -233,10 +258,7 @@ $horizontalComponentOffset: 180px; $navbarHeight: 55px; $navbarBackground: $panel-bg; -$navbarBorder: 1px solid $dark-3; -$navbarShadow: 0 0 20px black; - -$navbarLinkColor: $gray-4; +$navbarBorder: 1px solid $dark-6; $navbarButtonBackground: $navbarBackground; $navbarButtonBackgroundHighlight: $body-bg; @@ -247,19 +269,19 @@ $navbar-button-border: #2f2f32; // ------------------------- $side-menu-bg: $black; $side-menu-bg-mobile: $side-menu-bg; -$side-menu-item-hover-bg: $dark-2; +$side-menu-item-hover-bg: $dark-3; $side-menu-shadow: 0 0 20px black; $side-menu-link-color: $link-color; // Menu dropdowns // ------------------------- $menu-dropdown-bg: $body-bg; -$menu-dropdown-hover-bg: $dark-2; +$menu-dropdown-hover-bg: $dark-3; $menu-dropdown-shadow: 5px 5px 20px -5px $black; // Tabs // ------------------------- -$tab-border-color: $dark-4; +$tab-border-color: $dark-9; // Toolbar $toolbar-bg: $input-black; @@ -268,18 +290,17 @@ $toolbar-bg: $input-black; // ------------------------- $warning-text-color: $warn; $error-text-color: #e84d4d; -$success-text-color: #12d95a; -$info-text-color: $blue-dark; +$success-text-color: $forest-light; -$alert-error-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); -$alert-warning-bg: linear-gradient(90deg, #d44939, #e0603d); -$alert-info-bg: linear-gradient(100deg, #1a4552, #00374a); +$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-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); // popover -$popover-bg: $page-bg; +$popover-bg: $dark-2; $popover-color: $text-color; -$popover-border-color: $dark-4; +$popover-border-color: $dark-9; $popover-shadow: 0 0 20px black; $popover-help-bg: $btn-secondary-bg; @@ -303,7 +324,7 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox.png'; // info box -$info-box-border-color: darken($blue, 12%); +$info-box-border-color: $sapphire-base; // footer $footer-link-color: $gray-2; @@ -325,17 +346,17 @@ $json-explorer-url-color: #027bff; // Changelog and diff // ------------------------- -$diff-label-bg: $dark-2; +$diff-label-bg: $dark-3; $diff-label-fg: $white; -$diff-group-bg: $dark-4; +$diff-group-bg: $dark-9; $diff-arrow-color: $white; -$diff-json-bg: $dark-4; +$diff-json-bg: $dark-9; $diff-json-fg: $gray-5; -$diff-json-added: #457740; -$diff-json-deleted: #a04338; +$diff-json-added: $sapphire-shade; +$diff-json-deleted: $lobster-shade; $diff-json-old: #a04338; $diff-json-new: #457740; @@ -343,52 +364,53 @@ $diff-json-new: #457740; $diff-json-changed-fg: $gray-5; $diff-json-changed-num: $text-color; -$diff-json-icon: $gray-7; +$diff-json-icon: $gray-5; //Submenu -$variable-option-bg: $blue-dark; +$variable-option-bg: $dropdownLinkBackgroundHover; //Switch Slider // ------------------------- $switch-bg: $input-bg; -$switch-slider-color: $dark-2; +$switch-slider-color: $dark-3; $switch-slider-off-bg: $gray-1; -$switch-slider-on-bg: linear-gradient(90deg, $orange, $red); +$switch-slider-on-bg: linear-gradient(90deg, #eb7b18, #d44a3a); $switch-slider-shadow: 0 0 3px black; //Checkbox // ------------------------- $checkbox-bg: $dark-1; $checkbox-border: 1px solid $gray-1; -$checkbox-checked-bg: linear-gradient(0deg, $orange, $red); +$checkbox-checked-bg: linear-gradient(0deg, #eb7b18, #d44a3a); $checkbox-color: $dark-1; //Panel Edit // ------------------------- $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-5; -$panel-editor-viz-item-border: 1px solid $dark-5; -$panel-editor-viz-item-shadow-hover: 0 0 4px $blue; -$panel-editor-viz-item-border-hover: 1px solid $blue; +$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-bg: $input-black; $panel-editor-tabs-line-color: #e3e3e3; -$panel-editor-viz-item-bg-hover: darken($blue, 47%); + +$panel-editor-viz-item-bg-hover: darken($sapphire-base, 46%); $panel-options-group-border: none; $panel-options-group-header-bg: $gray-blue; -$panel-grid-placeholder-bg: darken($blue, 47%); -$panel-grid-placeholder-shadow: 0 0 4px $blue; +$panel-grid-placeholder-bg: $sapphire-faint; +$panel-grid-placeholder-shadow: 0 0 4px $sapphire-shade; // logs $logs-color-unkown: $gray-2; // toggle-group -$button-toggle-group-btn-active-bg: linear-gradient(90deg, $orange, $red); +$button-toggle-group-btn-active-bg: linear-gradient(90deg, #eb7b18, #d44a3a); $button-toggle-group-btn-active-shadow: inset 0 0 4px $black; -$button-toggle-group-btn-seperator-border: 1px solid $page-bg; +$button-toggle-group-btn-seperator-border: 1px solid $dark-2; -$vertical-resize-handle-bg: $dark-5; +$vertical-resize-handle-bg: $dark-10; $vertical-resize-handle-dots: $gray-1; $vertical-resize-handle-dots-hover: $gray-2; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 9d90f164d86..d53f3c737e7 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -13,6 +13,19 @@ $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; + // Grays // ------------------------- $black: #000000; @@ -29,35 +42,45 @@ $gray-5: #dde4ed; $gray-6: #e9edf2; $gray-7: #f7f8fa; +$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; + $white: #ffffff; // Accent colors // ------------------------- $blue: #0083b3; -$blue-light: #00a8e6; $green: #3aa655; -$red: #d44939; +$red: $lobster-base; $yellow: #ff851b; $orange: #ff7941; $purple: #9954bb; -$variable: $blue; +$variable: $purple-shade; $brand-primary: $orange; $brand-success: $green; $brand-warning: $orange; -$brand-danger: $red; +$brand-danger: $lobster-base; -$query-red: $red; +$query-red: $lobster-base; $query-green: $green; $query-purple: $purple; $query-orange: $orange; -$query-keyword: $blue; +$query-keyword: $sapphire-base; // Status colors // ------------------------- -$online: #01a64f; +$online: $green-shade; $warn: #f79520; -$critical: #ec2128; +$critical: $lobster-shade; // Scaffolding // ------------------------- @@ -72,7 +95,6 @@ $text-color-faint: $gray-4; $text-color-emphasis: $dark-5; $text-shadow-faint: none; -$textShadow: none; // gradients $brand-gradient: linear-gradient(to right, rgba(255, 213, 0, 1) 0%, rgba(255, 68, 0, 1) 99%, rgba(255, 68, 0, 1) 100%); @@ -85,7 +107,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: $blue-light; +$external-link-color: $sapphire-shade; // Typography // ------------------------- @@ -93,7 +115,7 @@ $headings-color: $text-color; $abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; -$hr-border-color: $dark-3 !default; +$hr-border-color: $gray-4 !default; // Panel // ------------------------- @@ -110,13 +132,13 @@ $page-header-border-color: $gray-4; $divider-border-color: $gray-2; // Graphite Target Editor -$tight-form-bg: #eaebee; +$tight-form-bg: $dark-3; //remove after merge!!! $tight-form-func-bg: $gray-5; $tight-form-func-highlight-bg: $gray-6; $modal-backdrop-bg: $body-bg; $code-tag-bg: $gray-6; -$code-tag-border: darken($code-tag-bg, 3%); +$code-tag-border: $gray-4; // cards $card-background: linear-gradient(135deg, $gray-6, $gray-5); @@ -132,13 +154,13 @@ $list-item-shadow: $card-shadow; $empty-list-cta-bg: $gray-6; // Scrollbars -$scrollbarBackground: $gray-5; -$scrollbarBackground2: $gray-5; -$scrollbarBorder: $gray-4; +$scrollbarBackground: $gray-4; +$scrollbarBackground2: $gray-4; +$scrollbarBorder: $gray-3; // Tables // ------------------------- -$table-bg: transparent; // overall background-color +$table-bg: transparent; // remove after merge!!! $table-bg-accent: $gray-5; // for striping $table-border: $gray-3; // table and cell border @@ -147,23 +169,21 @@ $table-bg-hover: $gray-5; // Buttons // ------------------------- -$btn-primary-bg: $brand-primary; -$btn-primary-bg-hl: lighten($brand-primary, 8%); +$btn-primary-bg: $green-base; +$btn-primary-bg-hl: $green-shade; -$btn-secondary-bg: $blue; -$btn-secondary-bg-hl: lighten($blue, 4%); +$btn-secondary-bg: $sapphire-base; +$btn-secondary-bg-hl: $sapphire-shade; -$btn-success-bg: lighten($green, 3%); -$btn-success-bg-hl: darken($green, 3%); +$btn-success-bg: $green-base; +$btn-success-bg-hl: $green-shade; -$btn-warning-bg: lighten($orange, 3%); -$btn-warning-bg-hl: darken($orange, 3%); +$btn-danger-bg: $lobster-base; +$btn-danger-bg-hl: $lobster-shade; -$btn-danger-bg: lighten($red, 3%); -$btn-danger-bg-hl: darken($red, 3%); - -$btn-inverse-bg: $gray-6; -$btn-inverse-bg-hl: darken($gray-6, 5%); +$btn-inverse-bg: $gray-5; +$btn-inverse-bg-hl: darken($gray-5, 5%); +$btn-inverse-bg-hl: $gray-4; $btn-inverse-text-color: $gray-1; $btn-inverse-text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); @@ -181,11 +201,11 @@ $btn-drag-image: '../img/grab_light.svg'; $input-bg: $white; $input-bg-disabled: $gray-5; -$input-color: $dark-3; +$input-color: $dark-5; $input-border-color: $gray-5; $input-box-shadow: none; -$input-border-focus: $blue !default; -$input-box-shadow-focus: $blue !default; +$input-border-focus: $gray-5 !default; +$input-box-shadow-focus: $sapphire-light !default; $input-color-placeholder: $gray-4 !default; $input-label-bg: $gray-5; $input-label-border-color: $gray-5; @@ -210,7 +230,7 @@ $dropdownBorder: $gray-4; $dropdownDividerTop: $gray-6; $dropdownDividerBottom: $white; -$dropdownLinkColor: $dark-3; +$dropdownLinkColor: $dark-5; $dropdownLinkColorHover: $link-color; $dropdownLinkColorActive: $link-color; @@ -225,10 +245,7 @@ $horizontalComponentOffset: 180px; $navbarHeight: 52px; $navbarBackground: $white; -$navbarBorder: 1px solid $gray-4; -$navbarShadow: 0 0 3px #c1c1c1; - -$navbarLinkColor: #444; +$navbarBorder: 1px solid $gray-5; $navbarButtonBackground: lighten($navbarBackground, 3%); $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); @@ -259,14 +276,13 @@ $toolbar-bg: white; // Form states and alerts // ------------------------- $warning-text-color: lighten($orange, 10%); -$error-text-color: lighten($red, 10%); +$error-text-color: $lobster-shade; $success-text-color: lighten($green, 10%); -$info-text-color: $blue; -$alert-error-bg: linear-gradient(90deg, #d44939, #e04d3d); -$alert-success-bg: linear-gradient(90deg, #3aa655, #47b274); -$alert-warning-bg: linear-gradient(90deg, #d44939, #e04d3d); -$alert-info-bg: $blue; +$alert-error-bg: linear-gradient(90deg, $lobster-base, $lobster-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); // popover $popover-bg: $page-bg; @@ -274,7 +290,7 @@ $popover-color: $text-color; $popover-border-color: $gray-5; $popover-shadow: 0 0 20px $white; -$popover-help-bg: $blue; +$popover-help-bg: $btn-secondary-bg; $popover-help-color: $gray-6; $popover-error-bg: $btn-danger-bg; @@ -295,7 +311,7 @@ $tooltipBackgroundError: $brand-danger; $checkboxImageUrl: '../img/checkbox_white.png'; // info box -$info-box-border-color: lighten($blue, 20%); +$info-box-border-color: $sapphire-base; // footer $footer-link-color: $gray-3; @@ -304,55 +320,55 @@ $footer-link-hover: $dark-5; // json explorer $json-explorer-default-color: black; $json-explorer-string-color: green; -$json-explorer-number-color: blue; -$json-explorer-boolean-color: red; +$json-explorer-number-color: $sapphire-base; +$json-explorer-boolean-color: $lobster-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: blue; +$json-explorer-bracket-color: $sapphire-base; $json-explorer-key-color: #00008b; -$json-explorer-url-color: blue; +$json-explorer-url-color: $sapphire-base; // Changelog and diff // ------------------------- -$diff-label-bg: $gray-5; +$diff-label-bg: $gray-7; $diff-label-fg: $gray-2; -$diff-arrow-color: $dark-3; -$diff-group-bg: $gray-7; +$diff-arrow-color: $dark-5; +$diff-group-bg: $gray-6; -$diff-json-bg: $gray-5; -$diff-json-fg: $gray-2; +$diff-json-bg: $gray-6; +$diff-json-fg: $gray-1; -$diff-json-added: lighten(desaturate($green, 30%), 10%); -$diff-json-deleted: desaturate($red, 35%); +$diff-json-added: $sapphire-shade; +$diff-json-deleted: $lobster-shade; $diff-json-old: #5a372a; $diff-json-new: #664e33; -$diff-json-changed-fg: $gray-6; +$diff-json-changed-fg: $gray-7; $diff-json-changed-num: $gray-4; $diff-json-icon: $gray-4; //Submenu -$variable-option-bg: $blue-light; +$variable-option-bg: $dropdownLinkBackgroundHover; //Switch Slider // ------------------------- $switch-bg: $white; $switch-slider-color: $gray-7; $switch-slider-off-bg: $gray-5; -$switch-slider-on-bg: linear-gradient(90deg, $yellow, $red); +$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400); $switch-slider-shadow: 0 0 3px $dark-5; //Checkbox // ------------------------- $checkbox-bg: $gray-6; $checkbox-border: 1px solid $gray-3; -$checkbox-checked-bg: linear-gradient(0deg, $yellow, $red); +$checkbox-checked-bg: linear-gradient(0deg, #ff9830, #e55400); $checkbox-color: $gray-7; //Panel Edit @@ -361,17 +377,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 $blue-light; -$panel-editor-viz-item-border-hover: 1px solid $blue-light; +$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-bg: $white; $panel-editor-tabs-line-color: $dark-5; -$panel-editor-viz-item-bg-hover: lighten($blue, 62%); + +$panel-editor-viz-item-bg-hover: lighten($sapphire-base, 45%); $panel-options-group-border: none; $panel-options-group-header-bg: $gray-5; -$panel-grid-placeholder-bg: lighten($blue, 62%); -$panel-grid-placeholder-shadow: 0 0 4px $blue-light; +$panel-grid-placeholder-bg: $sapphire-faint; +$panel-grid-placeholder-shadow: 0 0 4px $sapphire-light; // logs $logs-color-unkown: $gray-5; From 83bb3fb8d462338d02ddfea04a9b429778e77168 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Tue, 19 Feb 2019 17:05:50 +0100 Subject: [PATCH 14/25] Remove old overwritten sass vars --- .../src/themes/_variables.dark.scss.tmpl.ts | 15 --------------- .../src/themes/_variables.light.scss.tmpl.ts | 14 -------------- public/sass/_variables.dark.generated.scss | 14 -------------- public/sass/_variables.light.generated.scss | 14 -------------- 4 files changed, 57 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 32c08d449e8..98e281f2dcc 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -24,20 +24,6 @@ $green-shade: #23843b; // Grays // ------------------------- -$black: ${theme.colors.black}; -$dark-1: ${theme.colors.dark2}; -$dark-2: ${theme.colors.dark2}; -$dark-3: ${theme.colors.dark3}; -$dark-4: ${theme.colors.dark4}; -$dark-5: ${theme.colors.dark5}; -$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}; - $black: #000; $dark-1: #141414; $dark-2: #161719; @@ -55,7 +41,6 @@ $gray-3: #b3b3b3; $gray-4: #d8d9da; $gray-5: #ececec; - $gray-blue: #212327; $input-black: #09090b; 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 2418d088979..169187221c6 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -25,20 +25,6 @@ $yellow-base: #f2cc0c; // Grays // ------------------------- -$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}; -$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}; - $black: #000; $dark-2: #1e2028; $dark-5: #41444b; diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index a31a8078a10..62c67cf5150 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -27,20 +27,6 @@ $green-shade: #23843b; // Grays // ------------------------- -$black: #000000; -$dark-1: #1f1f20; -$dark-2: #1f1f20; -$dark-3: #262628; -$dark-4: #333333; -$dark-5: #444444; -$gray-1: #555555; -$gray-2: #8e8e8e; -$gray-3: #b3b3b3; -$gray-4: #d8d9da; -$gray-5: #ececec; -$gray-6: #f4f5f8; -$gray-7: #fbfbfb; - $black: #000; $dark-1: #141414; $dark-2: #161719; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index d53f3c737e7..8c92432dc3b 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -28,20 +28,6 @@ $yellow-base: #f2cc0c; // Grays // ------------------------- -$black: #000000; -$dark-1: #13161d; -$dark-2: #1e2028; -$dark-3: #303133; -$dark-4: #35373f; -$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: #000; $dark-2: #1e2028; $dark-5: #41444b; From 56726397e3069520d1e6da6bdf09fa6e48501bba Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Tue, 19 Feb 2019 21:15:36 +0100 Subject: [PATCH 15/25] Readme update --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 2cb8bfee306..550e7facfa8 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Graphite, Elasticsearch, OpenTSDB, Prometheus and InfluxDB. ![](https://www.grafanacon.org/2019/images/grafanacon_la_nav-logo.png) -Join us Feb 25-26 in Los Angeles, California for GrafanaCon - a two-day event with talks focused on Grafana and the surrounding open source monitoring ecosystem. Get deep dives into Loki, the Explore workflow and all of the new features of Grafana 6, plus participate in hands on workshops to help you get the most out of your data. +Join us Feb 25-26 in Los Angeles, California for GrafanaCon - a two-day event with talks focused on Grafana and the surrounding open source monitoring ecosystem. Get deep dives into Loki, the Explore workflow and all of the new features of Grafana 6, plus participate in hands on workshops to help you get the most out of your data. Time is running out - grab your ticket now! http://grafanacon.org @@ -75,15 +75,15 @@ $GOPATH/bin/bra run Rebuild on file change, and serve them by Grafana's webserver (http://localhost:3000): ```bash -yarn watch +yarn start ``` Build the assets, rebuild on file change with Hot Module Replacement (HMR), and serve them by webpack-dev-server (http://localhost:3333): ```bash -yarn start +yarn start:hot # OR set a theme -env GRAFANA_THEME=light yarn start +env GRAFANA_THEME=light yarn start:hot ``` *Note: HMR for Angular is not supported. If you edit files in the Angular part of the app, the whole page will reload.* @@ -158,7 +158,7 @@ GRAFANA_TEST_DB=postgres go test ./pkg/... If you have any ideas for improvement or have found a bug, do not hesitate to open an issue. And if you have time, clone this repo and submit a pull request to help me make Grafana -the kickass metrics & devops dashboard we all dream about! +the kickass metrics & devops dashboard we all dream about! Read the [contributing](https://github.com/grafana/grafana/blob/master/CONTRIBUTING.md) guide then check the [`beginner friendly`](https://github.com/grafana/grafana/issues?q=is%3Aopen+is%3Aissue+label%3A%22beginner+friendly%22) label to find issues that are easy and that we would like help with. From 5f4f559d1991eb87e3fdf4d3538247f4bd099f5b Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Tue, 19 Feb 2019 21:23:04 +0100 Subject: [PATCH 16/25] Fix blue in dark theme --- packages/grafana-ui/src/themes/dark.ts | 2 +- public/sass/_variables.dark.generated.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index add1a6483f0..17b4ea63575 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -18,7 +18,7 @@ const basicColors = { gray6: '#f4f5f8', gray7: '#fbfbfb', grayBlue: '#212327', - blue: '#ff0000', + blue: '#33b5e5', blueDark: '#005f81', blueLight: '#00a8e6', // not used in dark theme green: '#299c46', diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index f2a624fab93..5eeb58b5828 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -51,7 +51,7 @@ $white: #ffffff; // Accent colors // ------------------------- -$blue: #ff0000; +$blue: #33b5e5; $green: #299c46; $red: $lobster-base; $yellow: #ecbb13; From a9c5fe5be140f00a68b2ff2e630809147512450a Mon Sep 17 00:00:00 2001 From: ijin08 Date: Wed, 20 Feb 2019 16:11:36 +0100 Subject: [PATCH 17/25] 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 --- .../_ValueMappingsEditor.scss | 2 +- .../src/themes/_variables.dark.scss.tmpl.ts | 106 ++++++++------- .../src/themes/_variables.light.scss.tmpl.ts | 126 +++++++++--------- packages/grafana-ui/src/themes/dark.ts | 41 +++--- packages/grafana-ui/src/themes/light.ts | 35 +++-- packages/grafana-ui/src/types/theme.ts | 15 ++- public/sass/_variables.dark.generated.scss | 64 +++++---- public/sass/_variables.light.generated.scss | 102 +++++++------- public/sass/components/_gf-form.scss | 2 +- public/sass/components/_modals.scss | 2 +- public/sass/components/_search.scss | 2 +- public/sass/pages/_login.scss | 4 +- 12 files changed, 260 insertions(+), 241 deletions(-) diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/_ValueMappingsEditor.scss b/packages/grafana-ui/src/components/ValueMappingsEditor/_ValueMappingsEditor.scss index 1d62b191763..68f05662dbc 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/_ValueMappingsEditor.scss +++ b/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 { 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 c8f389b88d6..c7d28551d4d 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/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; +$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: #212327; +$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; 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 585e705feac..41d22a2f7a1 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/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; diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index 17b4ea63575..07142742370 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/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, }, }; diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts index fd1f1d05b95..7e8f6300d84 100644 --- a/packages/grafana-ui/src/themes/light.ts +++ b/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, diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts index 2d281cc3d9f..01886afe3dc 100644 --- a/packages/grafana-ui/src/types/theme.ts +++ b/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; diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 5eeb58b5828..cd4f01e4dd6 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/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; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 2d80e111499..136388fceb5 100644 --- a/public/sass/_variables.light.generated.scss +++ b/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; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index ed2cd633795..eef341217e4 100644 --- a/public/sass/components/_gf-form.scss +++ b/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 { diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 183cea823eb..405a3cd4ade 100644 --- a/public/sass/components/_modals.scss +++ b/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; } diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 4408d8f66e6..f75a0b8abf7 100644 --- a/public/sass/components/_search.scss +++ b/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; } diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index c42fd47ba1c..32fcdd54808 100644 --- a/public/sass/pages/_login.scss +++ b/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%); } } From 7d105439f924f2923895ff7b3ca488eee092083b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Feb 2019 09:41:53 +0100 Subject: [PATCH 18/25] Fixed scrollbar issue introduced in theme changes --- .../src/components/CustomScrollbar/CustomScrollbar.tsx | 8 ++++---- .../src/components/CustomScrollbar/_CustomScrollbar.scss | 9 ++++++++- public/app/core/components/Page/Page.tsx | 2 +- public/app/features/explore/Wrapper.tsx | 2 +- public/sass/_variables.dark.scss | 6 +++--- public/sass/_variables.light.scss | 2 +- public/sass/components/_footer.scss | 2 +- 7 files changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx index 40f6c6c3c37..39bae62e28b 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx +++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx @@ -1,9 +1,10 @@ import React, { PureComponent } from 'react'; import _ from 'lodash'; +import classNames from 'classnames'; import Scrollbars from 'react-custom-scrollbars'; interface Props { - customClassName?: string; + className?: string; autoHide?: boolean; autoHideTimeout?: number; autoHideDuration?: number; @@ -21,7 +22,6 @@ interface Props { */ export class CustomScrollbar extends PureComponent { static defaultProps: Partial = { - customClassName: 'custom-scrollbars', autoHide: false, autoHideTimeout: 200, autoHideDuration: 200, @@ -60,7 +60,7 @@ export class CustomScrollbar extends PureComponent { render() { const { - customClassName, + className, children, autoHeightMax, autoHeightMin, @@ -75,7 +75,7 @@ export class CustomScrollbar extends PureComponent { return ( { const { buildInfo } = config; return (
- +
{this.props.children} diff --git a/public/app/features/explore/Wrapper.tsx b/public/app/features/explore/Wrapper.tsx index 35d09cfd9bb..add2ffed235 100644 --- a/public/app/features/explore/Wrapper.tsx +++ b/public/app/features/explore/Wrapper.tsx @@ -53,7 +53,7 @@ export class Wrapper extends Component { return (
- +
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 46b6c923f0a..e491df83ea4 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -144,9 +144,9 @@ $list-item-shadow: $card-shadow; $empty-list-cta-bg: $gray-blue; // Scrollbars -$scrollbarBackground: $dark-9; -$scrollbarBackground2: $dark-9; -$scrollbarBorder: $dark-10; +$scrollbarBackground: #404357; +$scrollbarBackground2: $dark-10; +$scrollbarBorder: black; // Tables // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 94c2134313f..ffc67a735f5 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -131,7 +131,7 @@ $empty-list-cta-bg: $gray-6; // Scrollbars $scrollbarBackground: $gray-4; $scrollbarBackground2: $gray-4; -$scrollbarBorder: $gray-3; +$scrollbarBorder: $gray-7; // Tables // ------------------------- diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss index b5617f4e387..88e5b1521f3 100644 --- a/public/sass/components/_footer.scss +++ b/public/sass/components/_footer.scss @@ -42,7 +42,7 @@ display: none; } -.is-react .custom-scrollbars .footer { +.is-react .custom-scrollbar .footer { display: block; } From d8e655bbcfed092f51b3d71b60496dd677578e31 Mon Sep 17 00:00:00 2001 From: Marcus Efraimsson Date: Wed, 20 Feb 2019 18:35:03 +0100 Subject: [PATCH 19/25] fix: mysql query using __interval_ms variable throws error fixes #14507 --- public/app/plugins/datasource/mysql/mysql_query.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/plugins/datasource/mysql/mysql_query.ts b/public/app/plugins/datasource/mysql/mysql_query.ts index e636d66e6fd..9494d867fad 100644 --- a/public/app/plugins/datasource/mysql/mysql_query.ts +++ b/public/app/plugins/datasource/mysql/mysql_query.ts @@ -52,7 +52,7 @@ export default class MysqlQuery { } escapeLiteral(value) { - return value.replace(/'/g, "''"); + return String(value).replace(/'/g, "''"); } hasTimeGroup() { From f5a520bf398e2e0d9b082f5171301e86381aab55 Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Thu, 21 Feb 2019 11:59:47 +0100 Subject: [PATCH 20/25] Synced variable template files --- packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts | 6 +++--- .../grafana-ui/src/themes/_variables.light.scss.tmpl.ts | 2 +- 2 files changed, 4 insertions(+), 4 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 c8f389b88d6..aa1297fe056 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -150,9 +150,9 @@ $list-item-shadow: $card-shadow; $empty-list-cta-bg: $gray-blue; // Scrollbars -$scrollbarBackground: $dark-9; -$scrollbarBackground2: $dark-9; -$scrollbarBorder: $dark-10; +$scrollbarBackground: #404357; +$scrollbarBackground2: $dark-10; +$scrollbarBorder: black; // Tables // ------------------------- 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 585e705feac..566e5be31f4 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -138,7 +138,7 @@ $empty-list-cta-bg: $gray-6; // Scrollbars $scrollbarBackground: $gray-4; $scrollbarBackground2: $gray-4; -$scrollbarBorder: $gray-3; +$scrollbarBorder: $gray-7; // Tables // ------------------------- From 31511ee3ccf3a068725ddd89710df70b368d784b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Feb 2019 12:10:01 +0100 Subject: [PATCH 21/25] fixed snapshots failing in master --- .../CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap | 2 +- .../app/features/admin/__snapshots__/ServerStats.test.tsx.snap | 2 +- .../containers/__snapshots__/DashboardPage.test.tsx.snap | 2 -- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap index 60b4a2e0aa5..dd3f59ad1e1 100644 --- a/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap +++ b/packages/grafana-ui/src/components/CustomScrollbar/__snapshots__/CustomScrollbar.test.tsx.snap @@ -2,7 +2,7 @@ exports[`CustomScrollbar renders correctly 1`] = `
Date: Thu, 21 Feb 2019 12:17:02 +0100 Subject: [PATCH 22/25] updated building from source docs --- docs/sources/project/building_from_source.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/sources/project/building_from_source.md b/docs/sources/project/building_from_source.md index eed05f05fa6..d4eb1a917d6 100644 --- a/docs/sources/project/building_from_source.md +++ b/docs/sources/project/building_from_source.md @@ -57,7 +57,7 @@ For this you need nodejs (v.6+). ```bash npm install -g yarn yarn install --pure-lockfile -yarn watch +yarn start ``` ## Running Grafana Locally @@ -145,4 +145,4 @@ Please contribute to the Grafana project and submit a pull request! Build new fe ## Logging in for the first time To run Grafana open your browser and go to the default port http://localhost:3000 or the port you have configured. -Then follow the instructions [here](/guides/getting_started/). \ No newline at end of file +Then follow the instructions [here](/guides/getting_started/). From 3868602581dbdac5aa80826753f0ef958ba98781 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Feb 2019 12:32:29 +0100 Subject: [PATCH 23/25] Updated body & page variables to use variables from code theme --- packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts | 4 ++-- packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts | 4 ++-- packages/grafana-ui/src/themes/dark.ts | 4 ++-- public/sass/_variables.dark.generated.scss | 4 ++-- public/sass/_variables.light.generated.scss | 4 ++-- 5 files changed, 10 insertions(+), 10 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 c7d28551d4d..a7f4162a2bd 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -73,8 +73,8 @@ $critical: $red-base; // Scaffolding // ------------------------- -$body-bg: $dark-2; -$page-bg: $dark-2; +$body-bg: ${theme.colors.bodyBg}; +$page-bg: ${theme.colors.pageBg}; $body-color: $gray-4; $text-color: $gray-4; 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 41d22a2f7a1..078ca14ece5 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -65,8 +65,8 @@ $critical: $red-shade; // Scaffolding // ------------------------- -$body-bg: $gray-7; -$page-bg: $gray-7; +$body-bg: ${theme.colors.bodyBg}; +$page-bg: ${theme.colors.pageBg}; $body-color: $gray-1; $text-color: $gray-1; diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index 07142742370..7c3e81a7d35 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -54,8 +54,8 @@ const darkTheme: GrafanaTheme = { online: basicColors.greenBase, warn: '#f79520', critical: basicColors.redBase, - bodyBg: '#171819', - pageBg: '#161719', + bodyBg: basicColors.dark2, + pageBg: basicColors.dark2, bodyColor: basicColors.gray4, textColor: basicColors.gray4, textColorStrong: basicColors.white, diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index cd4f01e4dd6..c0d5eff6521 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -76,8 +76,8 @@ $critical: $red-base; // Scaffolding // ------------------------- -$body-bg: $dark-2; -$page-bg: $dark-2; +$body-bg: #161719; +$page-bg: #161719; $body-color: $gray-4; $text-color: $gray-4; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 136388fceb5..f0e804871bb 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -68,8 +68,8 @@ $critical: $red-shade; // Scaffolding // ------------------------- -$body-bg: $gray-7; -$page-bg: $gray-7; +$body-bg: #f7f8fa; +$page-bg: #f7f8fa; $body-color: $gray-1; $text-color: $gray-1; From 745fd68571116ffa7cc04c2b6b36af18780e99af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Feb 2019 12:39:22 +0100 Subject: [PATCH 24/25] fixed issue in dark sass template --- packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 8aec41c23e1..3a2d6db458c 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -32,7 +32,7 @@ $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-9: ${theme.colors.dark9}; $dark-10: ${theme.colors.dark10}; $gray-1: ${theme.colors.gray1}; $gray-2: ${theme.colors.gray2}; From b4627ec302584ef8b1be2dc0c5b88cf8e0c6a829 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 21 Feb 2019 13:44:05 +0100 Subject: [PATCH 25/25] Minor fix/polish to gauge panel and threshold editor --- packages/grafana-ui/src/components/Gauge/Gauge.tsx | 4 ++-- .../src/components/ThresholdsEditor/ThresholdsEditor.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index 8dea01589f1..de09cb8e1f8 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -115,9 +115,9 @@ export class Gauge extends PureComponent { getFontScale(length: number): number { if (length > 12) { - return FONT_SCALE - (length * 5) / 120; + return FONT_SCALE - (length * 5) / 110; } - return FONT_SCALE - (length * 5) / 105; + return FONT_SCALE - (length * 5) / 100; } draw() { diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx index b3d82982e6c..3361e1bee46 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditor/ThresholdsEditor.tsx @@ -55,7 +55,7 @@ export class ThresholdsEditor extends PureComponent { const value = afterThresholdValue - (afterThresholdValue - beforeThresholdValue) / 2; // Set a color - const color = colors.filter(c => !newThresholds.some(t => t.color === c))[0]; + const color = colors.filter(c => !newThresholds.some(t => t.color === c))[1]; this.setState( {