mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
v1
This commit is contained in:
parent
89c153d44b
commit
f80c8cc06c
10
package.json
10
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": {
|
||||
|
387
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
Normal file
387
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
Normal file
@ -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;
|
||||
`;
|
@ -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',
|
||||
|
@ -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;
|
||||
|
7
scripts/cli/nodemon.json
Normal file
7
scripts/cli/nodemon.json
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
{
|
||||
"watch": ["packages/grafana-ui/src/themes"],
|
||||
"ext": "ts",
|
||||
"ignore": ["src/**/*.spec.ts"],
|
||||
"exec": "ts-node ./src/index.ts"
|
||||
}
|
6
scripts/cli/tsconfig.json
Normal file
6
scripts/cli/tsconfig.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"module": "commonjs"
|
||||
}
|
||||
}
|
24
scripts/cli/watch.ts
Normal file
24
scripts/cli/watch.ts
Normal file
@ -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);
|
||||
});
|
||||
|
||||
// });
|
92
yarn.lock
92
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"
|
||||
|
Loading…
Reference in New Issue
Block a user