mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge branch 'master' into bar-gauge-poc
This commit is contained in:
Peter Holmberg
commit
362829d7ad
@ -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.*
|
||||
|
||||
@ -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
|
||||
|
||||
13
package.json
13
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,7 +38,9 @@
|
||||
"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",
|
||||
"enzyme": "^3.6.0",
|
||||
"enzyme-adapter-react-16": "^1.5.0",
|
||||
@ -96,6 +100,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",
|
||||
@ -112,8 +117,10 @@
|
||||
},
|
||||
"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",
|
||||
"watch": "webpack --progress --colors --watch --mode development --config scripts/webpack/webpack.dev.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": "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",
|
||||
@ -121,6 +128,7 @@
|
||||
"jest": "jest --notify --watch",
|
||||
"api-tests": "jest --notify --watch --config=tests/api/jest.js",
|
||||
"storybook": "cd packages/grafana-ui && yarn storybook",
|
||||
"themes:generate": "ts-node --project ./scripts/cli/tsconfig.json ./scripts/cli/generateSassVariableFiles.ts",
|
||||
"prettier:check": "prettier --list-different \"**/*.{ts,tsx,scss}\""
|
||||
},
|
||||
"husky": {
|
||||
@ -168,6 +176,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",
|
||||
|
||||
@ -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<Props> {
|
||||
static defaultProps: Partial<Props> = {
|
||||
customClassName: 'custom-scrollbars',
|
||||
autoHide: false,
|
||||
autoHideTimeout: 200,
|
||||
autoHideDuration: 200,
|
||||
@ -60,7 +60,7 @@ export class CustomScrollbar extends PureComponent<Props> {
|
||||
|
||||
render() {
|
||||
const {
|
||||
customClassName,
|
||||
className,
|
||||
children,
|
||||
autoHeightMax,
|
||||
autoHeightMin,
|
||||
@ -75,7 +75,7 @@ export class CustomScrollbar extends PureComponent<Props> {
|
||||
return (
|
||||
<Scrollbars
|
||||
ref={this.ref}
|
||||
className={customClassName}
|
||||
className={classNames('custom-scrollbar', className)}
|
||||
onScroll={setScrollTop}
|
||||
autoHeight={true}
|
||||
autoHide={autoHide}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.custom-scrollbars {
|
||||
.custom-scrollbar {
|
||||
// Fix for Firefox. For some reason sometimes .view container gets a height of its content, but in order to
|
||||
// make scroll working it should fit outer container size (scroll appears only when inner container size is
|
||||
// greater than outer one).
|
||||
@ -37,4 +37,11 @@
|
||||
@include gradient-horizontal($scrollbarBackground, $scrollbarBackground2);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
// page scrollbar should stick to left side to aid hitting it
|
||||
&--page {
|
||||
.track-vertical {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
exports[`CustomScrollbar renders correctly 1`] = `
|
||||
<div
|
||||
className="custom-scrollbars"
|
||||
className="custom-scrollbar"
|
||||
style={
|
||||
Object {
|
||||
"height": "auto",
|
||||
|
||||
@ -104,9 +104,9 @@ export class Gauge extends PureComponent<Props> {
|
||||
|
||||
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() {
|
||||
|
||||
@ -55,7 +55,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
|
||||
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(
|
||||
{
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
background-color: $green;
|
||||
background-color: $green-base;
|
||||
}
|
||||
|
||||
.add-mapping-row-label {
|
||||
|
||||
396
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
Normal file
396
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
Normal file
@ -0,0 +1,396 @@
|
||||
/* tslint:disable:max-line-length */
|
||||
|
||||
import { GrafanaTheme } from '../types';
|
||||
import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
|
||||
|
||||
export const darkThemeVarsTemplate = (theme: GrafanaTheme) =>
|
||||
`${renderGeneratedFileBanner('grafana-ui/src/themes/dark.ts', 'grafana-ui/src/themes/_variables.dark.scss.tmpl.ts')}
|
||||
// Global values
|
||||
// --------------------------------------------------
|
||||
|
||||
$theme-name: dark;
|
||||
|
||||
// New Colors
|
||||
// -------------------------
|
||||
$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: ${theme.colors.black};
|
||||
$dark-1: ${theme.colors.dark1};
|
||||
$dark-2: ${theme.colors.dark2};
|
||||
$dark-3: ${theme.colors.dark3};
|
||||
$dark-4: ${theme.colors.dark4};
|
||||
$dark-5: ${theme.colors.dark5};
|
||||
$dark-6: ${theme.colors.dark6};
|
||||
$dark-7: ${theme.colors.dark7};
|
||||
$dark-8: ${theme.colors.dark8};
|
||||
$dark-9: ${theme.colors.dark9};
|
||||
$dark-10: ${theme.colors.dark10};
|
||||
$gray-1: ${theme.colors.gray1};
|
||||
$gray-2: ${theme.colors.gray2};
|
||||
$gray-3: ${theme.colors.gray3};
|
||||
$gray-4: ${theme.colors.gray4};
|
||||
$gray-5: ${theme.colors.gray5};
|
||||
|
||||
$gray-blue: ${theme.colors.grayBlue};
|
||||
$input-black: #09090b;
|
||||
|
||||
$white: ${theme.colors.white};
|
||||
|
||||
// Accent colors
|
||||
// -------------------------
|
||||
$blue: ${theme.colors.blue};
|
||||
$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: $red-base;
|
||||
|
||||
$query-red: $red-base;
|
||||
$query-green: #74e680;
|
||||
$query-purple: #fe85fc;
|
||||
$query-keyword: #66d9ef;
|
||||
$query-orange: $orange;
|
||||
|
||||
// Status colors
|
||||
// -------------------------
|
||||
$online: $green-base;
|
||||
$warn: #f79520;
|
||||
$critical: $red-base;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
$body-bg: ${theme.colors.bodyBg};
|
||||
$page-bg: ${theme.colors.pageBg};
|
||||
|
||||
$body-color: $gray-4;
|
||||
$text-color: $gray-4;
|
||||
$text-color-strong: $white;
|
||||
$text-color-weak: $gray-2;
|
||||
$text-color-faint: $dark-10;
|
||||
$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, $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-light;
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
$headings-color: darken($white, 11%);
|
||||
$abbr-border-color: $gray-2 !default;
|
||||
$text-muted: $text-color-weak;
|
||||
|
||||
$hr-border-color: $dark-9;
|
||||
|
||||
// Panel
|
||||
// -------------------------
|
||||
$panel-bg: $dark-4;
|
||||
$panel-border: solid 1px $dark-1;
|
||||
$panel-header-hover-bg: $dark-9;
|
||||
$panel-corner: $panel-bg;
|
||||
|
||||
// page header
|
||||
$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-func-bg: $dark-9;
|
||||
$tight-form-func-highlight-bg: $dark-10;
|
||||
|
||||
$modal-backdrop-bg: #353c42;
|
||||
$code-tag-bg: $dark-1;
|
||||
$code-tag-border: $dark-9;
|
||||
|
||||
// cards
|
||||
$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: $card-background-hover;
|
||||
$list-item-link-color: $text-color;
|
||||
$list-item-shadow: $card-shadow;
|
||||
|
||||
$empty-list-cta-bg: $gray-blue;
|
||||
|
||||
// Scrollbars
|
||||
$scrollbarBackground: #404357;
|
||||
$scrollbarBackground2: $dark-10;
|
||||
$scrollbarBorder: black;
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
$table-bg-accent: $dark-6; // for striping
|
||||
$table-border: $dark-6; // table and cell border
|
||||
|
||||
$table-bg-odd: $dark-3;
|
||||
$table-bg-hover: $dark-6;
|
||||
|
||||
// Buttons
|
||||
// -------------------------
|
||||
$btn-secondary-bg: $blue-base;
|
||||
$btn-secondary-bg-hl: $blue-shade;
|
||||
|
||||
$btn-primary-bg: $green-base;
|
||||
$btn-primary-bg-hl: $green-shade;
|
||||
|
||||
$btn-success-bg: $green-base;
|
||||
$btn-success-bg-hl: $green-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%);
|
||||
$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-9;
|
||||
$btn-divider-right: $dark-3;
|
||||
|
||||
$btn-drag-image: '../img/grab_dark.svg';
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
$input-bg: $input-black;
|
||||
$input-bg-disabled: $dark-6;
|
||||
|
||||
$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: $blue-light !default;
|
||||
$input-color-placeholder: $gray-1 !default;
|
||||
$input-label-bg: $gray-blue;
|
||||
$input-label-border-color: $dark-6;
|
||||
$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-9;
|
||||
$typeahead-selected-color: $yellow;
|
||||
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
$dropdownBackground: $dark-6;
|
||||
$dropdownBorder: rgba(0, 0, 0, 0.2);
|
||||
$dropdownDividerTop: transparent;
|
||||
$dropdownDividerBottom: #444;
|
||||
|
||||
$dropdownLinkColor: $text-color;
|
||||
$dropdownLinkColorHover: $white;
|
||||
$dropdownLinkColorActive: $white;
|
||||
|
||||
$dropdownLinkBackgroundHover: $dark-9;
|
||||
|
||||
// Horizontal forms & lists
|
||||
// -------------------------
|
||||
$horizontalComponentOffset: 180px;
|
||||
|
||||
// Navbar
|
||||
// -------------------------
|
||||
$navbarHeight: 55px;
|
||||
|
||||
$navbarBackground: $panel-bg;
|
||||
$navbarBorder: 1px solid $dark-6;
|
||||
|
||||
$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-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-3;
|
||||
$menu-dropdown-shadow: 5px 5px 20px -5px $black;
|
||||
|
||||
// Tabs
|
||||
// -------------------------
|
||||
$tab-border-color: $dark-9;
|
||||
|
||||
// Toolbar
|
||||
$toolbar-bg: $input-black;
|
||||
|
||||
// Form states and alerts
|
||||
// -------------------------
|
||||
$warning-text-color: $warn;
|
||||
$error-text-color: #e84d4d;
|
||||
$success-text-color: #12d95a;
|
||||
|
||||
$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, $red-base, $red-shade);
|
||||
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
|
||||
|
||||
// popover
|
||||
$popover-bg: $dark-2;
|
||||
$popover-color: $text-color;
|
||||
$popover-border-color: $dark-9;
|
||||
$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: $blue-base;
|
||||
|
||||
// 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-3;
|
||||
$diff-label-fg: $white;
|
||||
|
||||
$diff-group-bg: $dark-9;
|
||||
$diff-arrow-color: $white;
|
||||
|
||||
$diff-json-bg: $dark-9;
|
||||
$diff-json-fg: $gray-5;
|
||||
|
||||
$diff-json-added: $blue-shade;
|
||||
$diff-json-deleted: $red-shade;
|
||||
|
||||
$diff-json-old: #a04338;
|
||||
$diff-json-new: #457740;
|
||||
|
||||
$diff-json-changed-fg: $gray-5;
|
||||
$diff-json-changed-num: $text-color;
|
||||
|
||||
$diff-json-icon: $gray-5;
|
||||
|
||||
//Submenu
|
||||
$variable-option-bg: $dropdownLinkBackgroundHover;
|
||||
|
||||
//Switch Slider
|
||||
// -------------------------
|
||||
$switch-bg: $input-bg;
|
||||
$switch-slider-color: $dark-3;
|
||||
$switch-slider-off-bg: $gray-1;
|
||||
$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, #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-10;
|
||||
$panel-editor-viz-item-border: 1px solid $dark-10;
|
||||
$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($blue-base, 46%);
|
||||
|
||||
$panel-options-group-border: none;
|
||||
$panel-options-group-header-bg: $gray-blue;
|
||||
|
||||
$panel-grid-placeholder-bg: $blue-faint;
|
||||
$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
|
||||
|
||||
// logs
|
||||
$logs-color-unkown: $gray-2;
|
||||
|
||||
// toggle-group
|
||||
$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 $dark-2;
|
||||
|
||||
$vertical-resize-handle-bg: $dark-10;
|
||||
$vertical-resize-handle-dots: $gray-1;
|
||||
$vertical-resize-handle-dots-hover: $gray-2;
|
||||
`;
|
||||
383
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
Normal file
383
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
Normal file
@ -0,0 +1,383 @@
|
||||
/* tslint:disable:max-line-length */
|
||||
|
||||
import { GrafanaTheme } from '../types';
|
||||
import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
|
||||
|
||||
export const lightThemeVarsTemplate = (theme: GrafanaTheme) =>
|
||||
`${renderGeneratedFileBanner('grafana-ui/src/themes/light.ts', 'grafana-ui/src/themes/_variable.light.scss.tmpl.ts')}
|
||||
// Global values
|
||||
// --------------------------------------------------
|
||||
|
||||
$theme-name: light;
|
||||
|
||||
// New Colors
|
||||
// -------------------------
|
||||
$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: ${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};
|
||||
$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: $orange;
|
||||
$brand-danger: $red-base;
|
||||
|
||||
$query-red: $red-base;
|
||||
$query-green: $green-base;
|
||||
$query-purple: $purple;
|
||||
$query-orange: $orange;
|
||||
$query-keyword: $blue-base;
|
||||
|
||||
// Status colors
|
||||
// -------------------------
|
||||
$online: $green-shade;
|
||||
$warn: #f79520;
|
||||
$critical: $red-shade;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
$body-bg: ${theme.colors.bodyBg};
|
||||
$page-bg: ${theme.colors.pageBg};
|
||||
|
||||
$body-color: $gray-1;
|
||||
$text-color: $gray-1;
|
||||
$text-color-strong: $dark-1;
|
||||
$text-color-weak: $gray-2;
|
||||
$text-color-faint: $gray-4;
|
||||
$text-color-emphasis: $dark-2;
|
||||
|
||||
$text-shadow-faint: 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-shade;
|
||||
|
||||
// Typography
|
||||
// -------------------------
|
||||
$headings-color: $text-color;
|
||||
$abbr-border-color: $gray-2 !default;
|
||||
$text-muted: $text-color-weak;
|
||||
|
||||
$hr-border-color: $gray-4 !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-func-bg: $gray-5;
|
||||
$tight-form-func-highlight-bg: $gray-6;
|
||||
|
||||
$modal-backdrop-bg: $body-bg;
|
||||
$code-tag-bg: $gray-6;
|
||||
$code-tag-border: $gray-4;
|
||||
|
||||
// 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-4;
|
||||
$scrollbarBackground2: $gray-4;
|
||||
$scrollbarBorder: $gray-7;
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
$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: $green-base;
|
||||
$btn-primary-bg-hl: $green-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: $red-base;
|
||||
$btn-danger-bg-hl: $red-shade;
|
||||
|
||||
$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);
|
||||
|
||||
$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-2;
|
||||
$input-border-color: $gray-5;
|
||||
$input-box-shadow: none;
|
||||
$input-border-focus: $gray-5 !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;
|
||||
$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-2;
|
||||
$dropdownLinkColorHover: $link-color;
|
||||
$dropdownLinkColorActive: $link-color;
|
||||
|
||||
$dropdownLinkBackgroundHover: $gray-6;
|
||||
|
||||
// Horizontal forms & lists
|
||||
// -------------------------
|
||||
$horizontalComponentOffset: 180px;
|
||||
|
||||
// Navbar
|
||||
// -------------------------
|
||||
$navbarHeight: 52px;
|
||||
|
||||
$navbarBackground: $white;
|
||||
$navbarBorder: 1px solid $gray-5;
|
||||
|
||||
$navbarButtonBackground: lighten($navbarBackground, 3%);
|
||||
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
|
||||
|
||||
$navbar-button-border: $gray-4;
|
||||
|
||||
// Sidemenu
|
||||
// -------------------------
|
||||
$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;
|
||||
$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: $red-shade;
|
||||
$success-text-color: lighten($green-base, 10%);
|
||||
|
||||
$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, $red-base, $red-shade);
|
||||
$alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
|
||||
|
||||
// popover
|
||||
$popover-bg: $page-bg;
|
||||
$popover-color: $text-color;
|
||||
$popover-border-color: $gray-5;
|
||||
$popover-shadow: 0 0 20px $white;
|
||||
|
||||
$popover-help-bg: $btn-secondary-bg;
|
||||
$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: $blue-base;
|
||||
|
||||
// footer
|
||||
$footer-link-color: $gray-3;
|
||||
$footer-link-hover: $dark-2;
|
||||
|
||||
// json explorer
|
||||
$json-explorer-default-color: black;
|
||||
$json-explorer-string-color: green;
|
||||
$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: $blue-base;
|
||||
$json-explorer-key-color: #00008b;
|
||||
$json-explorer-url-color: $blue-base;
|
||||
|
||||
// Changelog and diff
|
||||
// -------------------------
|
||||
$diff-label-bg: $gray-7;
|
||||
$diff-label-fg: $gray-2;
|
||||
|
||||
$diff-arrow-color: $dark-2;
|
||||
$diff-group-bg: $gray-6;
|
||||
|
||||
$diff-json-bg: $gray-6;
|
||||
$diff-json-fg: $gray-1;
|
||||
|
||||
$diff-json-added: $blue-shade;
|
||||
$diff-json-deleted: $red-shade;
|
||||
|
||||
$diff-json-old: #5a372a;
|
||||
$diff-json-new: #664e33;
|
||||
|
||||
$diff-json-changed-fg: $gray-7;
|
||||
$diff-json-changed-num: $gray-4;
|
||||
|
||||
$diff-json-icon: $gray-4;
|
||||
|
||||
//Submenu
|
||||
$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, #ff9830, #e55400);
|
||||
$switch-slider-shadow: 0 0 3px $dark-2;
|
||||
|
||||
//Checkbox
|
||||
// -------------------------
|
||||
$checkbox-bg: $gray-6;
|
||||
$checkbox-border: 1px solid $gray-3;
|
||||
$checkbox-checked-bg: linear-gradient(0deg, #ff9830, #e55400);
|
||||
$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-2;
|
||||
|
||||
$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: $blue-faint;
|
||||
$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;
|
||||
`;
|
||||
265
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
Normal file
265
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
Normal file
@ -0,0 +1,265 @@
|
||||
/* tslint:disable:max-line-length */
|
||||
|
||||
import { GrafanaThemeCommons } from '../types';
|
||||
import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
|
||||
|
||||
export const commonThemeVarsTemplate = (theme: GrafanaThemeCommons) =>
|
||||
`${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.
|
||||
|
||||
$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: 'Roboto', Helvetica, Arial, sans-serif;
|
||||
$font-family-serif: Georgia, 'Times New Roman', Times, serif;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', 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;
|
||||
}
|
||||
`;
|
||||
@ -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,16 +46,16 @@ 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',
|
||||
bodyBg: '#171819',
|
||||
pageBg: '#161719',
|
||||
critical: basicColors.redBase,
|
||||
bodyBg: basicColors.dark2,
|
||||
pageBg: basicColors.dark2,
|
||||
bodyColor: basicColors.gray4,
|
||||
textColor: basicColors.gray4,
|
||||
textColorStrong: basicColors.white,
|
||||
@ -61,8 +70,8 @@ const darkTheme: GrafanaTheme = {
|
||||
},
|
||||
background: {
|
||||
dropdown: basicColors.dark3,
|
||||
scrollbar: '#aeb5df',
|
||||
scrollbar2: '#3a3a3a',
|
||||
scrollbar: basicColors.dark9,
|
||||
scrollbar2: basicColors.dark9,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
const theme = {
|
||||
import { GrafanaThemeCommons } from '../types/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;",
|
||||
sansSerif: "'Roboto', Helvetica, Arial, sans-serif",
|
||||
serif: "Georgia, 'Times New Roman', Times, serif",
|
||||
monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace",
|
||||
},
|
||||
size: {
|
||||
base: '13px',
|
||||
@ -45,7 +47,6 @@ const theme = {
|
||||
s: '0.2rem',
|
||||
m: '1rem',
|
||||
l: '1.5rem',
|
||||
xl: '3rem',
|
||||
gutter: '30px',
|
||||
},
|
||||
border: {
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
@ -75,6 +78,11 @@ export interface GrafanaTheme {
|
||||
dark3: string;
|
||||
dark4: string;
|
||||
dark5: string;
|
||||
dark6: string;
|
||||
dark7: string;
|
||||
dark8: string;
|
||||
dark9: string;
|
||||
dark10: string;
|
||||
gray1: string;
|
||||
gray2: string;
|
||||
gray3: string;
|
||||
@ -87,12 +95,16 @@ export interface GrafanaTheme {
|
||||
|
||||
// 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;
|
||||
|
||||
10
packages/grafana-ui/src/utils/generatedFileBanner.ts
Normal file
10
packages/grafana-ui/src/utils/generatedFileBanner.ts
Normal file
@ -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 !!!
|
||||
*/
|
||||
`;
|
||||
@ -48,7 +48,7 @@ class Page extends Component<Props> {
|
||||
const { buildInfo } = config;
|
||||
return (
|
||||
<div className="page-scrollbar-wrapper">
|
||||
<CustomScrollbar autoHeightMin={'100%'}>
|
||||
<CustomScrollbar autoHeightMin={'100%'} className="custom-scrollbar--page">
|
||||
<div className="page-scrollbar-content">
|
||||
<PageHeader model={navModel} />
|
||||
{this.props.children}
|
||||
|
||||
@ -4,7 +4,7 @@ import appEvents from 'app/core/app_events';
|
||||
|
||||
jest.mock('app/core/app_events', () => {
|
||||
return {
|
||||
emit: jest.fn<any>(),
|
||||
emit: jest.fn(),
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -5,7 +5,7 @@ exports[`ServerStats Should render table with stats 1`] = `
|
||||
className="page-scrollbar-wrapper"
|
||||
>
|
||||
<div
|
||||
className="custom-scrollbars"
|
||||
className="custom-scrollbar custom-scrollbar--page"
|
||||
style={
|
||||
Object {
|
||||
"height": "auto",
|
||||
|
||||
@ -6,7 +6,7 @@ import { cleanUpDashboard } from '../state/actions';
|
||||
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,
|
||||
}));
|
||||
|
||||
@ -109,7 +109,6 @@ exports[`DashboardPage Dashboard init completed Should render dashboard grid 1`
|
||||
autoHide={false}
|
||||
autoHideDuration={200}
|
||||
autoHideTimeout={200}
|
||||
customClassName="custom-scrollbars"
|
||||
hideTracksWhenNotNeeded={false}
|
||||
scrollTop={0}
|
||||
setScrollTop={[Function]}
|
||||
@ -345,7 +344,6 @@ exports[`DashboardPage When dashboard has editview url state should render setti
|
||||
autoHide={false}
|
||||
autoHideDuration={200}
|
||||
autoHideTimeout={200}
|
||||
customClassName="custom-scrollbars"
|
||||
hideTracksWhenNotNeeded={false}
|
||||
scrollTop={0}
|
||||
setScrollTop={[Function]}
|
||||
|
||||
@ -20,7 +20,7 @@ import { DashboardModel, PanelModel } from '../state';
|
||||
import { PanelPlugin } from 'app/types';
|
||||
import { DataQueryResponse, TimeRange, LoadingState, PanelData, DataQueryError } from '@grafana/ui';
|
||||
|
||||
import variables from 'sass/_variables.scss';
|
||||
import variables from 'sass/_variables.generated.scss';
|
||||
import templateSrv from 'app/features/templating/template_srv';
|
||||
|
||||
const DEFAULT_PLUGIN_ERROR = 'Error in plugin';
|
||||
|
||||
@ -53,7 +53,7 @@ export class Wrapper extends Component<WrapperProps> {
|
||||
|
||||
return (
|
||||
<div className="page-scrollbar-wrapper">
|
||||
<CustomScrollbar autoHeightMin={'100%'}>
|
||||
<CustomScrollbar autoHeightMin={'100%'} className="custom-scrollbar--page">
|
||||
<div className="explore-wrapper">
|
||||
<ErrorBoundary>
|
||||
<Explore exploreId={ExploreId.left} urlState={leftState} />
|
||||
|
||||
@ -2,7 +2,7 @@ import { PlaylistSrv } from '../playlist_srv';
|
||||
|
||||
const dashboards = [{ url: 'dash1' }, { url: 'dash2' }];
|
||||
|
||||
const createPlaylistSrv = (): [PlaylistSrv, { url: jest.MockInstance<any> }] => {
|
||||
const createPlaylistSrv = (): [PlaylistSrv, { url: jest.MockInstance<any, any> }] => {
|
||||
const mockBackendSrv = {
|
||||
get: jest.fn(url => {
|
||||
switch (url) {
|
||||
@ -27,7 +27,7 @@ const createPlaylistSrv = (): [PlaylistSrv, { url: jest.MockInstance<any> }] =>
|
||||
return [new PlaylistSrv(mockLocation, mockTimeout, mockBackendSrv), mockLocation];
|
||||
};
|
||||
|
||||
const mockWindowLocation = (): [jest.MockInstance<any>, () => void] => {
|
||||
const mockWindowLocation = (): [jest.MockInstance<any, any>, () => void] => {
|
||||
const oldLocation = window.location;
|
||||
const hrefMock = jest.fn();
|
||||
|
||||
@ -50,7 +50,7 @@ const mockWindowLocation = (): [jest.MockInstance<any>, () => void] => {
|
||||
|
||||
describe('PlaylistSrv', () => {
|
||||
let srv: PlaylistSrv;
|
||||
let hrefMock: jest.MockInstance<any>;
|
||||
let hrefMock: jest.MockInstance<any, any>;
|
||||
let unmockLocation: () => void;
|
||||
const initialUrl = 'http://localhost/playlist';
|
||||
|
||||
|
||||
@ -52,7 +52,7 @@ export default class MysqlQuery {
|
||||
}
|
||||
|
||||
escapeLiteral(value) {
|
||||
return value.replace(/'/g, "''");
|
||||
return String(value).replace(/'/g, "''");
|
||||
}
|
||||
|
||||
hasTimeGroup() {
|
||||
|
||||
@ -1,3 +1,13 @@
|
||||
/***
|
||||
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
|
||||
*
|
||||
* 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
|
||||
*
|
||||
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
|
||||
*/
|
||||
|
||||
// Global values
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -5,20 +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;
|
||||
@ -35,28 +43,27 @@ $gray-3: #b3b3b3;
|
||||
$gray-4: #d8d9da;
|
||||
$gray-5: #ececec;
|
||||
|
||||
$input-black: #09090b;
|
||||
$gray-blue: #212327;
|
||||
$input-black: #09090b;
|
||||
|
||||
$white: #fff;
|
||||
$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;
|
||||
@ -65,12 +72,12 @@ $query-orange: $orange;
|
||||
// -------------------------
|
||||
$online: $green-base;
|
||||
$warn: #f79520;
|
||||
$critical: $lobster-base;
|
||||
$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;
|
||||
@ -98,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
|
||||
// -------------------------
|
||||
@ -144,9 +151,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
|
||||
// -------------------------
|
||||
@ -158,9 +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;
|
||||
@ -168,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%);
|
||||
@ -194,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;
|
||||
@ -266,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;
|
||||
@ -300,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;
|
||||
@ -331,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;
|
||||
@ -366,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;
|
||||
@ -1,3 +1,13 @@
|
||||
/***
|
||||
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
|
||||
*
|
||||
* 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
|
||||
*
|
||||
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
|
||||
*/
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
@ -1,3 +1,13 @@
|
||||
/***
|
||||
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
|
||||
*
|
||||
* 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
|
||||
*
|
||||
* !!! THIS FILE WAS GENERATED AUTOMATICALLY !!!
|
||||
*/
|
||||
|
||||
// Global values
|
||||
// --------------------------------------------------
|
||||
|
||||
@ -5,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;
|
||||
@ -29,46 +38,45 @@ $gray-5: #dde4ed;
|
||||
$gray-6: #e9edf2;
|
||||
$gray-7: #f7f8fa;
|
||||
|
||||
$white: #fff;
|
||||
$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
|
||||
// -------------------------
|
||||
$body-bg: $gray-7;
|
||||
$page-bg: $gray-7;
|
||||
$body-bg: #f7f8fa;
|
||||
$page-bg: #f7f8fa;
|
||||
|
||||
$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;
|
||||
|
||||
@ -83,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
|
||||
// -------------------------
|
||||
@ -131,7 +139,7 @@ $empty-list-cta-bg: $gray-6;
|
||||
// Scrollbars
|
||||
$scrollbarBackground: $gray-4;
|
||||
$scrollbarBackground2: $gray-4;
|
||||
$scrollbarBorder: $gray-3;
|
||||
$scrollbarBorder: $gray-7;
|
||||
|
||||
// Tables
|
||||
// -------------------------
|
||||
@ -146,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%);
|
||||
@ -175,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;
|
||||
@ -204,7 +212,7 @@ $dropdownBorder: $gray-4;
|
||||
$dropdownDividerTop: $gray-6;
|
||||
$dropdownDividerBottom: $white;
|
||||
|
||||
$dropdownLinkColor: $dark-5;
|
||||
$dropdownLinkColor: $dark-2;
|
||||
$dropdownLinkColorHover: $link-color;
|
||||
$dropdownLinkColorActive: $link-color;
|
||||
|
||||
@ -228,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;
|
||||
@ -250,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;
|
||||
@ -285,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;
|
||||
@ -336,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
|
||||
// -------------------------
|
||||
@ -351,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;
|
||||
@ -42,7 +42,7 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.is-react .custom-scrollbars .footer {
|
||||
.is-react .custom-scrollbar .footer {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -98,7 +98,7 @@
|
||||
.confirm-modal-icon {
|
||||
padding-top: 41px;
|
||||
font-size: 280%;
|
||||
color: $green;
|
||||
color: $green-base;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
@import 'variables';
|
||||
@import 'variables.dark';
|
||||
@import 'variables.generated';
|
||||
@import 'variables.dark.generated';
|
||||
@import 'grafana';
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
@import 'variables';
|
||||
@import 'variables.light';
|
||||
@import 'variables.generated';
|
||||
@import 'variables.light.generated';
|
||||
@import 'grafana';
|
||||
|
||||
@ -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%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
39
scripts/cli/generateSassVariableFiles.ts
Normal file
39
scripts/cli/generateSassVariableFiles.ts
Normal file
@ -0,0 +1,39 @@
|
||||
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.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) => {
|
||||
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)),
|
||||
writeVariablesFile(defaultThemeVariablesPath, commonThemeVarsTemplate(defaultTheme)),
|
||||
]);
|
||||
console.log('\nSASS variable files generated');
|
||||
} catch (error) {
|
||||
console.error('\nWriting SASS variable files failed', error);
|
||||
process.exit(1);
|
||||
}
|
||||
};
|
||||
|
||||
generateSassVariableFiles();
|
||||
22
scripts/cli/index.ts
Normal file
22
scripts/cli/index.ts
Normal file
@ -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 <scripts>', '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,
|
||||
});
|
||||
32
scripts/cli/start.ts
Normal file
32
scripts/cli/start.ts
Normal file
@ -0,0 +1,32 @@
|
||||
import concurrently from '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);
|
||||
}
|
||||
};
|
||||
6
scripts/cli/tsconfig.json
Normal file
6
scripts/cli/tsconfig.json
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"module": "commonjs"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user