Merge branch 'master' into piechart-react
This commit is contained in:
corpglory-dev
@@ -0,0 +1,6 @@
|
||||
# 6.0.0-alpha.0 (2019-02-22)
|
||||
Version update to 6.0.0 to keep @grafana/ui version in sync with [Grafana](https://github.com/grafana/grafana)
|
||||
|
||||
# 1.0.0-alpha.0 (2019-02-21)
|
||||
First public release
|
||||
|
||||
@@ -1,3 +1,17 @@
|
||||
# Grafana (WIP) shared component library
|
||||
# Grafana UI components library
|
||||
|
||||
Used by internal & external plugins.
|
||||
@grafana/ui is a collection of components used by [Grafana](https://github.com/grafana/grafana)
|
||||
|
||||
Our goal is to deliver Grafana's common UI elements for plugins developers and contributors.
|
||||
|
||||
See [package source](https://github.com/grafana/grafana/tree/master/packages/grafana-ui) for more details.
|
||||
|
||||
## Installation
|
||||
|
||||
`yarn add @grafana/ui`
|
||||
|
||||
`npm install @grafana/ui`
|
||||
|
||||
## Versioning
|
||||
To limit the confusion related to @grafana/ui and Grafana versioning we decided to keep the major version in sync between those two.
|
||||
This means, that first version of @grafana/ui is taged with 6.0.0-alpha.0 to keep version in sync with Grafana 6.0 release.
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
'use strict'
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
module.exports = require('./index.production.js');
|
||||
} else {
|
||||
module.exports = require('./index.development.js');
|
||||
}
|
||||
@@ -1,12 +1,19 @@
|
||||
{
|
||||
"name": "@grafana/ui",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"version": "6.0.1-alpha.0",
|
||||
"description": "Grafana Components Library",
|
||||
"keywords": [
|
||||
"typescript",
|
||||
"react",
|
||||
"react-component"
|
||||
],
|
||||
"main": "src/index.ts",
|
||||
"scripts": {
|
||||
"tslint": "tslint -c tslint.json --project tsconfig.json",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"storybook": "start-storybook -p 9001 -c .storybook -s ../../public"
|
||||
"storybook": "start-storybook -p 9001 -c .storybook -s ../../public",
|
||||
"clean": "rimraf ./dist ./compiled",
|
||||
"build": "rollup -c rollup.config.ts"
|
||||
},
|
||||
"author": "Grafana Labs",
|
||||
"license": "Apache-2.0",
|
||||
@@ -53,6 +60,13 @@
|
||||
"react-docgen-typescript-loader": "^3.0.0",
|
||||
"react-docgen-typescript-webpack-plugin": "^1.1.0",
|
||||
"react-test-renderer": "^16.7.0",
|
||||
"rollup": "^1.1.2",
|
||||
"rollup-plugin-commonjs": "^9.2.0",
|
||||
"rollup-plugin-node-resolve": "^4.0.0",
|
||||
"rollup-plugin-sourcemaps": "^0.4.2",
|
||||
"rollup-plugin-terser": "^4.0.4",
|
||||
"rollup-plugin-typescript2": "^0.19.2",
|
||||
"rollup-plugin-visualizer": "^0.9.2",
|
||||
"typescript": "^3.2.2"
|
||||
},
|
||||
"resolutions": {
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
import resolve from 'rollup-plugin-node-resolve';
|
||||
import commonjs from 'rollup-plugin-commonjs';
|
||||
import sourceMaps from 'rollup-plugin-sourcemaps';
|
||||
import { terser } from 'rollup-plugin-terser';
|
||||
|
||||
const pkg = require('./package.json');
|
||||
|
||||
const libraryName = pkg.name;
|
||||
|
||||
const buildCjsPackage = ({ env }) => {
|
||||
return {
|
||||
input: `compiled/index.js`,
|
||||
output: [
|
||||
{
|
||||
file: `dist/index.${env}.js`,
|
||||
name: libraryName,
|
||||
format: 'cjs',
|
||||
sourcemap: true,
|
||||
exports: 'named',
|
||||
globals: {
|
||||
react: 'React',
|
||||
'prop-types': 'PropTypes',
|
||||
},
|
||||
},
|
||||
],
|
||||
external: ['react', 'react-dom'],
|
||||
plugins: [
|
||||
commonjs({
|
||||
include: /node_modules/,
|
||||
namedExports: {
|
||||
'../../node_modules/lodash/lodash.js': [
|
||||
'flatten',
|
||||
'find',
|
||||
'upperFirst',
|
||||
'debounce',
|
||||
'isNil',
|
||||
'isNumber',
|
||||
'flattenDeep',
|
||||
'map',
|
||||
'chunk',
|
||||
'sortBy',
|
||||
'uniqueId',
|
||||
'zip',
|
||||
],
|
||||
'../../node_modules/react-color/lib/components/common': ['Saturation', 'Hue', 'Alpha'],
|
||||
},
|
||||
}),
|
||||
resolve(),
|
||||
sourceMaps(),
|
||||
env === 'production' && terser(),
|
||||
],
|
||||
};
|
||||
};
|
||||
export default [buildCjsPackage({ env: 'development' }), buildCjsPackage({ env: 'production' })];
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { ColorPickerProps } from './ColorPicker';
|
||||
import { ColorPickerProps } from './ColorPickerPopover';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { debounce } from 'lodash';
|
||||
import debounce from 'lodash/debounce';
|
||||
|
||||
interface ColorInputState {
|
||||
previousColor: string;
|
||||
|
||||
@@ -1,32 +1,11 @@
|
||||
import React, { Component, createRef } from 'react';
|
||||
import { PopperController } from '../Tooltip/PopperController';
|
||||
import { Popper } from '../Tooltip/Popper';
|
||||
import { ColorPickerPopover } from './ColorPickerPopover';
|
||||
import { Themeable } from '../../types';
|
||||
import { ColorPickerPopover, ColorPickerProps, ColorPickerChangeHandler } from './ColorPickerPopover';
|
||||
import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
|
||||
import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
|
||||
import propDeprecationWarning from '../../utils/propDeprecationWarning';
|
||||
|
||||
import { withTheme } from '../../themes/ThemeContext';
|
||||
type ColorPickerChangeHandler = (color: string) => void;
|
||||
|
||||
export interface ColorPickerProps extends Themeable {
|
||||
color: string;
|
||||
onChange: ColorPickerChangeHandler;
|
||||
|
||||
/**
|
||||
* @deprecated Use onChange instead
|
||||
*/
|
||||
onColorChange?: ColorPickerChangeHandler;
|
||||
enableNamedColors?: boolean;
|
||||
children?: JSX.Element;
|
||||
}
|
||||
|
||||
export const warnAboutColorPickerPropsDeprecation = (componentName: string, props: ColorPickerProps) => {
|
||||
const { onColorChange } = props;
|
||||
if (onColorChange) {
|
||||
propDeprecationWarning(componentName, 'onColorChange', 'onChange');
|
||||
}
|
||||
};
|
||||
|
||||
export const colorPickerFactory = <T extends ColorPickerProps>(
|
||||
popover: React.ComponentType<T>,
|
||||
|
||||
@@ -3,7 +3,7 @@ import { mount, ReactWrapper } from 'enzyme';
|
||||
import { ColorPickerPopover } from './ColorPickerPopover';
|
||||
import { getColorDefinitionByName, getNamedColorPalette } from '../../utils/namedColorsPalette';
|
||||
import { ColorSwatch } from './NamedColorsGroup';
|
||||
import { flatten } from 'lodash';
|
||||
import flatten from 'lodash/flatten';
|
||||
import { GrafanaThemeType } from '../../types';
|
||||
import { getTheme } from '../../themes';
|
||||
|
||||
|
||||
@@ -1,23 +1,37 @@
|
||||
import React from 'react';
|
||||
import { NamedColorsPalette } from './NamedColorsPalette';
|
||||
import { getColorName, getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
|
||||
import { ColorPickerProps, warnAboutColorPickerPropsDeprecation } from './ColorPicker';
|
||||
import { PopperContentProps } from '../Tooltip/PopperController';
|
||||
import SpectrumPalette from './SpectrumPalette';
|
||||
import { GrafanaThemeType } from '../../types/theme';
|
||||
import { GrafanaThemeType, Themeable } from '../../types/theme';
|
||||
import { warnAboutColorPickerPropsDeprecation } from './warnAboutColorPickerPropsDeprecation';
|
||||
|
||||
export type ColorPickerChangeHandler = (color: string) => void;
|
||||
|
||||
export interface ColorPickerProps extends Themeable {
|
||||
color: string;
|
||||
onChange: ColorPickerChangeHandler;
|
||||
|
||||
/**
|
||||
* @deprecated Use onChange instead
|
||||
*/
|
||||
onColorChange?: ColorPickerChangeHandler;
|
||||
enableNamedColors?: boolean;
|
||||
children?: JSX.Element;
|
||||
}
|
||||
export interface Props<T> extends ColorPickerProps, PopperContentProps {
|
||||
customPickers?: T;
|
||||
}
|
||||
|
||||
type PickerType = 'palette' | 'spectrum';
|
||||
|
||||
interface CustomPickersDescriptor {
|
||||
export interface CustomPickersDescriptor {
|
||||
[key: string]: {
|
||||
tabComponent: React.ComponentType<ColorPickerProps>;
|
||||
name: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface State<T> {
|
||||
activePicker: PickerType | keyof T;
|
||||
}
|
||||
|
||||
@@ -2,7 +2,8 @@ import React, { FunctionComponent } from 'react';
|
||||
import { Themeable } from '../../types';
|
||||
import { ColorDefinition, getColorForTheme } from '../../utils/namedColorsPalette';
|
||||
import { Color } from 'csstype';
|
||||
import { find, upperFirst } from 'lodash';
|
||||
import upperFirst from 'lodash/upperFirst';
|
||||
import find from 'lodash/find';
|
||||
import { selectThemeVariant } from '../../themes/selectThemeVariant';
|
||||
|
||||
type ColorChangeHandler = (color: ColorDefinition) => void;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React, { FunctionComponent } from 'react';
|
||||
|
||||
import { ColorPickerPopover } from './ColorPickerPopover';
|
||||
import { ColorPickerProps } from './ColorPicker';
|
||||
import { ColorPickerPopover, ColorPickerProps } from './ColorPickerPopover';
|
||||
import { PopperContentProps } from '../Tooltip/PopperController';
|
||||
import { Switch } from '../Switch/Switch';
|
||||
import { withTheme } from '../../themes/ThemeContext';
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import propDeprecationWarning from '../../utils/propDeprecationWarning';
|
||||
import { ColorPickerProps } from './ColorPickerPopover';
|
||||
|
||||
export const warnAboutColorPickerPropsDeprecation = (componentName: string, props: ColorPickerProps) => {
|
||||
const { onColorChange } = props;
|
||||
if (onColorChange) {
|
||||
propDeprecationWarning(componentName, 'onColorChange', 'onChange');
|
||||
}
|
||||
};
|
||||
@@ -1,9 +1,10 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import _ from 'lodash';
|
||||
import isNil from 'lodash/isNil';
|
||||
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,
|
||||
@@ -41,7 +41,7 @@ export class CustomScrollbar extends PureComponent<Props> {
|
||||
updateScroll() {
|
||||
const ref = this.ref.current;
|
||||
|
||||
if (ref && !_.isNil(this.props.scrollTop)) {
|
||||
if (ref && !isNil(this.props.scrollTop)) {
|
||||
if (this.props.scrollTop > 10000) {
|
||||
ref.scrollToBottom();
|
||||
} else {
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
|
||||
exports[`CustomScrollbar renders correctly 1`] = `
|
||||
<div
|
||||
className="custom-scrollbars"
|
||||
className="custom-scrollbar"
|
||||
style={
|
||||
Object {
|
||||
"height": "auto",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { InputHTMLAttributes, FunctionComponent } from 'react';
|
||||
import { FormLabel } from '..';
|
||||
import { FormLabel } from '../FormLabel/FormLabel';
|
||||
|
||||
export interface Props extends InputHTMLAttributes<HTMLInputElement> {
|
||||
label: string;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import $ from 'jquery';
|
||||
|
||||
import { ValueMapping, Threshold, BasicGaugeColor, GrafanaThemeType } from '../../types';
|
||||
import { getMappedValue } from '../../utils/valueMappings';
|
||||
import { getColorFromHexRgbOrName, getValueFormat } from '../../utils';
|
||||
import { Themeable } from '../../index';
|
||||
import { getColorFromHexRgbOrName } from '../../utils/namedColorsPalette';
|
||||
import { Themeable, GrafanaThemeType } from '../../types/theme';
|
||||
import { ValueMapping, Threshold, BasicGaugeColor } from '../../types/panel';
|
||||
import { getValueFormat } from '../../utils/valueFormats/valueFormats';
|
||||
|
||||
type TimeSeriesValue = string | number | null;
|
||||
|
||||
@@ -115,9 +115,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() {
|
||||
|
||||
@@ -16,7 +16,7 @@ import SelectOptionGroup from './SelectOptionGroup';
|
||||
import IndicatorsContainer from './IndicatorsContainer';
|
||||
import NoOptionsMessage from './NoOptionsMessage';
|
||||
import resetSelectStyles from './resetSelectStyles';
|
||||
import { CustomScrollbar } from '..';
|
||||
import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
|
||||
|
||||
export interface SelectOptionItem {
|
||||
label?: string;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import _ from 'lodash';
|
||||
import uniqueId from 'lodash/uniqueId';
|
||||
|
||||
export interface Props {
|
||||
label: string;
|
||||
@@ -17,7 +17,7 @@ export interface State {
|
||||
|
||||
export class Switch extends PureComponent<Props, State> {
|
||||
state = {
|
||||
id: _.uniqueId('check-'),
|
||||
id: uniqueId(),
|
||||
};
|
||||
|
||||
internalOnChange = (event: React.FormEvent<HTMLInputElement>) => {
|
||||
|
||||
@@ -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(
|
||||
{
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import React, { ChangeEvent, PureComponent } from 'react';
|
||||
|
||||
import { MappingType, ValueMapping } from '../../types';
|
||||
import { FormField, FormLabel, Select } from '..';
|
||||
import { Select } from '../Select/Select';
|
||||
import { FormField } from '../FormField/FormField';
|
||||
import { FormLabel } from '../FormLabel/FormLabel';
|
||||
|
||||
export interface Props {
|
||||
valueMapping: ValueMapping;
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { PureComponent } from 'react';
|
||||
|
||||
import MappingRow from './MappingRow';
|
||||
import { MappingType, ValueMapping } from '../../types';
|
||||
import { PanelOptionsGroup } from '..';
|
||||
import { PanelOptionsGroup } from '../PanelOptionsGroup/PanelOptionsGroup';
|
||||
|
||||
export interface Props {
|
||||
valueMappings: ValueMapping[];
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
background-color: $green;
|
||||
background-color: $green-base;
|
||||
}
|
||||
|
||||
.add-mapping-row-label {
|
||||
|
||||
@@ -2,4 +2,3 @@ export * from './components';
|
||||
export * from './types';
|
||||
export * from './utils';
|
||||
export * from './themes';
|
||||
export * from './themes/ThemeContext';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { GrafanaThemeType, Themeable } from '../types';
|
||||
import { getTheme } from './index';
|
||||
import { getTheme } from './getTheme';
|
||||
import { GrafanaThemeType, Themeable } from '../types/theme';
|
||||
|
||||
type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
|
||||
type Subtract<T, K> = Omit<T, keyof K>;
|
||||
|
||||
@@ -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;
|
||||
`;
|
||||
@@ -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;
|
||||
`;
|
||||
@@ -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: {
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import darkTheme from './dark';
|
||||
import lightTheme from './light';
|
||||
import { GrafanaTheme } from '../types/theme';
|
||||
|
||||
let themeMock: ((name?: string) => GrafanaTheme) | null;
|
||||
|
||||
export const getTheme = (name?: string) =>
|
||||
(themeMock && themeMock(name)) || (name === 'light' ? lightTheme : darkTheme);
|
||||
|
||||
export const mockTheme = (mock: (name?: string) => GrafanaTheme) => {
|
||||
themeMock = mock;
|
||||
return () => {
|
||||
themeMock = null;
|
||||
};
|
||||
};
|
||||
@@ -1,14 +1,4 @@
|
||||
import darkTheme from './dark';
|
||||
import lightTheme from './light';
|
||||
import { GrafanaTheme } from '../types/theme';
|
||||
import { ThemeContext, withTheme } from './ThemeContext';
|
||||
import { getTheme, mockTheme } from './getTheme';
|
||||
|
||||
let themeMock: ((name?: string) => GrafanaTheme) | null;
|
||||
|
||||
export let getTheme = (name?: string) => (themeMock && themeMock(name)) || (name === 'light' ? lightTheme : darkTheme);
|
||||
|
||||
export const mockTheme = (mock: (name?: string) => GrafanaTheme) => {
|
||||
themeMock = mock;
|
||||
return () => {
|
||||
themeMock = null;
|
||||
};
|
||||
};
|
||||
export { ThemeContext, withTheme, mockTheme, getTheme };
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1,4 +1,8 @@
|
||||
import _ from 'lodash';
|
||||
import map from 'lodash/map';
|
||||
import sortBy from 'lodash/sortBy';
|
||||
import flattenDeep from 'lodash/flattenDeep';
|
||||
import chunk from 'lodash/chunk';
|
||||
import zip from 'lodash/zip';
|
||||
import tinycolor from 'tinycolor2';
|
||||
|
||||
export const PALETTE_ROWS = 4;
|
||||
@@ -69,16 +73,16 @@ export const colors = [
|
||||
];
|
||||
|
||||
function sortColorsByHue(hexColors: string[]) {
|
||||
const hslColors = _.map(hexColors, hexToHsl);
|
||||
const hslColors = map(hexColors, hexToHsl);
|
||||
|
||||
const sortedHSLColors = _.sortBy(hslColors, ['h']);
|
||||
const chunkedHSLColors = _.chunk(sortedHSLColors, PALETTE_ROWS);
|
||||
const sortedChunkedHSLColors = _.map(chunkedHSLColors, chunk => {
|
||||
return _.sortBy(chunk, 'l');
|
||||
const sortedHSLColors = sortBy(hslColors, ['h']);
|
||||
const chunkedHSLColors = chunk(sortedHSLColors, PALETTE_ROWS);
|
||||
const sortedChunkedHSLColors = map(chunkedHSLColors, chunk => {
|
||||
return sortBy(chunk, 'l');
|
||||
});
|
||||
const flattenedZippedSortedChunkedHSLColors = _.flattenDeep(_.zip(...sortedChunkedHSLColors));
|
||||
const flattenedZippedSortedChunkedHSLColors = flattenDeep(zip(...sortedChunkedHSLColors));
|
||||
|
||||
return _.map(flattenedZippedSortedChunkedHSLColors, hslToHex);
|
||||
return map(flattenedZippedSortedChunkedHSLColors, hslToHex);
|
||||
}
|
||||
|
||||
function hexToHsl(color: string) {
|
||||
|
||||
@@ -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 !!!
|
||||
*/
|
||||
`;
|
||||
@@ -2,3 +2,4 @@ export * from './processTimeSeries';
|
||||
export * from './valueFormats/valueFormats';
|
||||
export * from './colors';
|
||||
export * from './namedColorsPalette';
|
||||
export { getMappedValue } from './valueMappings';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { flatten } from 'lodash';
|
||||
import { GrafanaThemeType } from '../types';
|
||||
import flatten from 'lodash/flatten';
|
||||
import { GrafanaThemeType } from '../types/theme';
|
||||
import tinycolor from 'tinycolor2';
|
||||
|
||||
type Hue = 'green' | 'yellow' | 'red' | 'blue' | 'orange' | 'purple';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// Libraries
|
||||
import _ from 'lodash';
|
||||
import isNumber from 'lodash/isNumber';
|
||||
|
||||
import { colors } from './colors';
|
||||
|
||||
@@ -75,7 +75,7 @@ export function processTimeSeries({ timeSeries, nullValueMode }: Options): TimeS
|
||||
}
|
||||
|
||||
if (currentValue !== null) {
|
||||
if (_.isNumber(currentValue)) {
|
||||
if (isNumber(currentValue)) {
|
||||
total += currentValue;
|
||||
allIsNull = false;
|
||||
nonNulls++;
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import { RenderFunction } from '@storybook/react';
|
||||
import { ThemeContext } from '../../themes/ThemeContext';
|
||||
import { select } from '@storybook/addon-knobs';
|
||||
import { getTheme } from '../../themes';
|
||||
import { getTheme } from '../../themes/index';
|
||||
import { GrafanaThemeType } from '../../types';
|
||||
|
||||
const ThemableStory: React.FunctionComponent<{}> = ({ children }) => {
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
{
|
||||
"extends": "./tsconfig.json",
|
||||
"exclude": [
|
||||
"dist",
|
||||
"node_modules",
|
||||
"src/utils/storybook",
|
||||
"**/*.test.ts",
|
||||
"**/*.test.tsx",
|
||||
"**/*.story.tsx",
|
||||
"**/*.tmpl.ts"
|
||||
]
|
||||
}
|
||||
@@ -5,13 +5,15 @@
|
||||
"compilerOptions": {
|
||||
"rootDirs": [".", "stories"],
|
||||
"module": "esnext",
|
||||
"outDir": "dist",
|
||||
"outDir": "compiled",
|
||||
"declaration": true,
|
||||
"declarationDir": "dist",
|
||||
"strict": true,
|
||||
"alwaysStrict": true,
|
||||
"noImplicitAny": true,
|
||||
"strictNullChecks": true,
|
||||
"typeRoots": ["./node_modules/@types", "types"],
|
||||
"skipLibCheck": true // Temp workaround for Duplicate identifier tsc errors
|
||||
"skipLibCheck": true, // Temp workaround for Duplicate identifier tsc errors,
|
||||
"removeComments": false
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user