public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styles & Theme: Inline form styles polish & tweaks (#23521)

Browse Source 
* Styles: Refactoring and tweaks to inline form styles

* Minor change

* Minor fix

* Updated snapshot

* tweaks

* minor tweak

* Updated modal style

* Updated snapshot

* Updated more snapshots
This commit is contained in:
Torkel Ödegaard
2020-04-13 09:58:40 +02:00
committed by GitHub
parent d4516439ec
commit 8b7decf57b
39 changed files with 133 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-data/src/types/theme.ts
+1 -4
View File
@@ -153,8 +153,6 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
// New reds palette used by next-gen form elements
red88: string;
grayBlue: string;
// Accent colors
blue: string;
blueBase: string;
@@ -168,13 +166,11 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
red: string;
yellow: string;
purple: string;
variable: string;
orange: string;
orangeDark: string;
queryRed: string;
queryGreen: string;
queryPurple: string;
queryKeyword: string;
queryOrange: string;
brandPrimary: string;
brandSuccess: string;
@@ -217,6 +213,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
textFaint: string;
textEmphasis: string;
headingColor: string;
textBlue: string;
// Next-gen forms functional colors
formLabel: string;
packages/grafana-ui/src/components/Button/Button.tsx
-1
View File
@@ -87,7 +87,6 @@ export const getButtonStyles = stylesFactory(({ theme, size, variant, icon }: St
font-size: ${fontSize};
padding: ${padding};
height: ${height};
line-height: ${height};
vertical-align: middle;
cursor: pointer;
border: 1px solid ${borderColor};
packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
+11 -6
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { Icon } from '../Icon/Icon';
import { css } from 'emotion';
import { css, cx } from 'emotion';
// @ts-ignore
import RCCascader from 'rc-cascader';
@@ -14,10 +14,10 @@ export interface ButtonCascaderProps {
disabled?: boolean;
value?: string[];
fieldNames?: { label: string; value: string; children: string };
loadData?: (selectedOptions: CascaderOption[]) => void;
onChange?: (value: string[], selectedOptions: CascaderOption[]) => void;
onPopupVisibleChange?: (visible: boolean) => void;
className?: string;
}
const getStyles = stylesFactory(() => {
@@ -26,21 +26,26 @@ const getStyles = stylesFactory(() => {
label: popup;
z-index: 100;
`,
icon: css`
margin-left: 4px;
`,
};
});
export const ButtonCascader: React.FC<ButtonCascaderProps> = props => {
const { onChange, loadData, ...rest } = props;
const { onChange, className, loadData, ...rest } = props;
const styles = getStyles();
return (
<RCCascader
onChange={onChangeCascader(onChange)}
loadData={onLoadDataCascader(loadData)}
popupClassName={getStyles().popup}
popupClassName={styles.popup}
{...rest}
expandIcon={null}
>
<button className="gf-form-label gf-form-label--btn" disabled={props.disabled}>
{props.children} <Icon name="angle-down" style={{ marginBottom: 0, marginLeft: '4px' }} />
<button className={cx('gf-form-label', className)} disabled={props.disabled}>
{props.children} <Icon name="angle-down" className={styles.icon} />
</button>
</RCCascader>
);
packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
+1 -2
View File
@@ -1,7 +1,6 @@
import React from 'react';
import { Themeable } from '../../types/theme';
import { GrafanaTheme } from '@grafana/data';
import { selectThemeVariant } from '../../themes/selectThemeVariant';
import { css, cx } from 'emotion';
import { stylesFactory } from '../../themes';
@@ -16,7 +15,7 @@ const getCallToActionCardStyles = stylesFactory((theme: GrafanaTheme) => ({
wrapper: css`
label: call-to-action-card;
padding: ${theme.spacing.lg};
background: ${selectThemeVariant({ light: theme.palette.gray6, dark: theme.palette.grayBlue }, theme.type)};
background: ${theme.colors.bg2};
border-radius: ${theme.border.radius.md};
display: flex;
flex-direction: column;
packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap
+3 -3
View File
@@ -2,7 +2,7 @@
exports[`CallToActionCard rendering when message and footer provided 1`] = `
<div
class="css-1ud9puf-call-to-action-card"
class="css-ujo8b3-call-to-action-card"
>
<div
class="css-m2iibx"
@@ -24,7 +24,7 @@ exports[`CallToActionCard rendering when message and footer provided 1`] = `
exports[`CallToActionCard rendering when message and no footer provided 1`] = `
<div
class="css-1ud9puf-call-to-action-card"
class="css-ujo8b3-call-to-action-card"
>
<div
class="css-m2iibx"
@@ -41,7 +41,7 @@ exports[`CallToActionCard rendering when message and no footer provided 1`] = `
exports[`CallToActionCard rendering when no message and footer provided 1`] = `
<div
class="css-1ud9puf-call-to-action-card"
class="css-ujo8b3-call-to-action-card"
>
<a
href="http://dummy.link"
packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
+1 -1
View File
@@ -38,7 +38,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
color: ${theme.palette.queryGreen};
}
.token.variable {
color: ${theme.palette.queryKeyword};
color: ${theme.colors.textBlue};
}
`,
}));
packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss
+1 -1
View File
@@ -4,7 +4,7 @@ $select-input-bg-disabled: $input-bg-disabled;
@mixin select-control() {
width: 100%;
margin-right: $space-xs;
@include border-radius($input-border-radius-sm);
@include border-radius($input-border-radius);
background-color: $input-bg;
}
packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
-6
View File
@@ -34,7 +34,6 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
const border = `1px solid ${borderColor}`;
const borderActive = `1px solid ${borderColorActive}`;
const borderHover = `1px solid ${borderColorHover}`;
const fakeBold = `0 0 0.65px ${textColorHover}, 0 0 0.65px ${textColorHover}`;
return {
radio: css`
@@ -47,7 +46,6 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
&:checked + label {
border: ${borderActive};
color: ${textColorActive};
text-shadow: ${fakeBold};
background: ${bgActive};
z-index: 3;
}
@@ -62,10 +60,6 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
background: ${bgDisabled};
color: ${textColor};
}
&:enabled + label:hover {
text-shadow: ${fakeBold};
}
`,
radioLabel: css`
display: inline-block;
packages/grafana-ui/src/components/IconButton/IconButton.tsx
+3 -3
View File
@@ -46,11 +46,11 @@ export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
function getHoverColor(theme: GrafanaTheme, surface: SurfaceType): string {
switch (surface) {
case 'body':
return theme.isLight ? theme.palette.gray95 : theme.palette.gray15;
return theme.isLight ? theme.palette.gray95 : theme.palette.gray10;
case 'panel':
return theme.isLight ? theme.palette.gray6 : theme.palette.gray25;
return theme.isLight ? theme.palette.gray6 : theme.palette.gray15;
case 'header':
return theme.isLight ? theme.palette.gray85 : theme.palette.gray25;
return theme.isLight ? theme.colors.bg3 : theme.palette.gray25;
}
}
packages/grafana-ui/src/components/Modal/getModalStyles.ts
+1 -2
View File
@@ -10,7 +10,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
position: fixed;
z-index: ${theme.zIndex.modal};
background: ${theme.colors.bodyBg};
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 20px ${theme.colors.dropdownShadow};
background-clip: padding-box;
outline: none;
width: 750px;
@@ -33,7 +33,6 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
`,
modalHeader: css`
background: ${theme.colors.bg1};
box-shadow: 0 0 20px ${theme.colors.dropdownShadow};
border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
display: flex;
height: 42px;
packages/grafana-ui/src/components/Select/SelectBase.tsx
+1 -1
View File
@@ -277,7 +277,7 @@ export function SelectBase<T>({
width: inputSizesPixels(size),
}),
}}
className={widthClass}
className={cx('select-container', widthClass)}
{...commonSelectProps}
{...creatableProps}
{...asyncSelectProps}
packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap
+6 -6
View File
@@ -2,10 +2,10 @@
exports[`TimePickerContent renders correctly in full screen 1`] = `
<div
className="css-1l5oyux"
className="css-1eellmz"
>
<div
className="css-13dsoi7"
className="css-dlnzj7"
>
<FullScreenForm
historyOptions={Array []}
@@ -93,10 +93,10 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
exports[`TimePickerContent renders correctly in narrow screen 1`] = `
<div
className="css-1l5oyux"
className="css-1eellmz"
>
<div
className="css-13dsoi7"
className="css-dlnzj7"
>
<FullScreenForm
historyOptions={Array []}
@@ -184,10 +184,10 @@ exports[`TimePickerContent renders correctly in narrow screen 1`] = `
exports[`TimePickerContent renders recent absolute ranges correctly 1`] = `
<div
className="css-1l5oyux"
className="css-1eellmz"
>
<div
className="css-13dsoi7"
className="css-dlnzj7"
>
<FullScreenForm
history={
packages/grafana-ui/src/components/TimePicker/TimePickerContent/colors.ts
+2 -8
View File
@@ -3,14 +3,8 @@ import { selectThemeVariant } from '../../../themes/selectThemeVariant';
export const getThemeColors = (theme: GrafanaTheme) => {
return {
border: selectThemeVariant(
{
light: theme.palette.gray4,
dark: theme.palette.gray25,
},
theme.type
),
background: theme.colors.dropdownBg,
border: theme.colors.border1,
background: theme.colors.bodyBg,
shadow: theme.colors.dropdownShadow,
formBackground: selectThemeVariant(
{
packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
+4 -6
View File
@@ -115,6 +115,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
"panelBg": "#141619",
"panelBorder": "#202226",
"text": "#c7d0d9",
"textBlue": "#339ae5",
"textEmphasis": "#ececec",
"textFaint": "#222426",
"textStrong": "#ffffff",
@@ -132,7 +133,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
"black": "#000000",
"blue": "#33b5e5",
"blue77": "#1f60c4",
"blue85": "#3274d9",
"blue85": "#339ae5",
"blue95": "#5794f2",
"blueBase": "#3274d9",
"blueFaint": "#041126",
@@ -170,7 +171,6 @@ exports[`TimePicker renders buttons correctly 1`] = `
"gray85": "#c7d0d9",
"gray95": "#e9edf2",
"gray98": "#f7f8fa",
"grayBlue": "#212327",
"greenBase": "#299c46",
"greenShade": "#23843b",
"online": "#299c46",
@@ -178,7 +178,6 @@ exports[`TimePicker renders buttons correctly 1`] = `
"orangeDark": "#ff780a",
"purple": "#9933cc",
"queryGreen": "#74e680",
"queryKeyword": "#66d9ef",
"queryOrange": "#eb7b18",
"queryPurple": "#fe85fc",
"queryRed": "#e02f44",
@@ -430,6 +429,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"panelBg": "#141619",
"panelBorder": "#202226",
"text": "#c7d0d9",
"textBlue": "#339ae5",
"textEmphasis": "#ececec",
"textFaint": "#222426",
"textStrong": "#ffffff",
@@ -447,7 +447,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"black": "#000000",
"blue": "#33b5e5",
"blue77": "#1f60c4",
"blue85": "#3274d9",
"blue85": "#339ae5",
"blue95": "#5794f2",
"blueBase": "#3274d9",
"blueFaint": "#041126",
@@ -485,7 +485,6 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"gray85": "#c7d0d9",
"gray95": "#e9edf2",
"gray98": "#f7f8fa",
"grayBlue": "#212327",
"greenBase": "#299c46",
"greenShade": "#23843b",
"online": "#299c46",
@@ -493,7 +492,6 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"orangeDark": "#ff780a",
"purple": "#9933cc",
"queryGreen": "#74e680",
"queryKeyword": "#66d9ef",
"queryOrange": "#eb7b18",
"queryPurple": "#fe85fc",
"queryRed": "#e02f44",
packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
+1 -2
View File
@@ -159,8 +159,7 @@ const getFieldNameStyles = stylesFactory((theme: GrafanaTheme) => ({
width: 35%;
padding: 0 8px;
border-radius: 3px;
background-color: ${theme.isDark ? theme.palette.grayBlue : theme.palette.gray6};
border: 1px solid ${theme.isDark ? theme.palette.dark6 : theme.palette.gray5};
background-color: ${theme.colors.bg2};
`,
right: css`
width: 65%;
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+15 -16
View File
@@ -53,7 +53,6 @@ $gray-4: ${theme.palette.gray4};
$gray-5: ${theme.palette.gray5};
$gray-6: ${theme.palette.gray6};
$gray-blue: ${theme.palette.grayBlue};
$input-black: ${theme.colors.formInputBg};
$white: ${theme.palette.white};
@@ -65,7 +64,7 @@ $red: $red-base;
$yellow: ${theme.palette.yellow};
$orange: ${theme.palette.orange};
$purple: ${theme.palette.purple};
$variable: ${theme.palette.variable};
$variable: ${theme.colors.textBlue};
$brand-primary: ${theme.palette.brandPrimary};
$brand-success: ${theme.palette.brandSuccess};
@@ -76,10 +75,9 @@ $query-red: ${theme.palette.queryRed};
$query-green: ${theme.palette.queryGreen};
$query-purple: ${theme.palette.queryPurple};
$query-orange: ${theme.palette.orange};
$query-keyword: ${theme.palette.queryKeyword};
// Status colors
// -------------------------
// -------------------------¨
$online: ${theme.palette.online};
$warn: ${theme.palette.warn};
$critical: ${theme.palette.critical};
@@ -95,6 +93,7 @@ $text-color-strong: ${theme.colors.textStrong};
$text-color-weak: ${theme.colors.textWeak};
$text-color-faint: ${theme.colors.textFaint};
$text-color-emphasis: ${theme.colors.textEmphasis};
$text-blue: ${theme.colors.textBlue};
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
$textShadow: none;
@@ -122,7 +121,7 @@ $hr-border-color: $dark-9;
// -------------------------
$panel-bg: ${theme.colors.panelBg};
$panel-border: 1px solid ${theme.colors.panelBorder};
$panel-header-hover-bg: ${theme.colors.bg3};
$panel-header-hover-bg: ${theme.colors.bg2};
$panel-corner: $panel-bg;
// page header
@@ -150,7 +149,7 @@ $list-item-bg: $card-background;
$list-item-hover-bg: $card-background-hover;
$list-item-shadow: $card-shadow;
$empty-list-cta-bg: $gray-blue;
$empty-list-cta-bg: ${theme.colors.bg2};
// Scrollbars
$scrollbarBackground: #404357;
@@ -203,13 +202,12 @@ $input-bg: $input-black;
$input-bg-disabled: $dark-6;
$input-color: ${theme.colors.formInputText};
$input-border-color: ${theme.palette.gray15};
$input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
$input-border-color: ${theme.colors.formInputBorder};
$input-box-shadow: none;
$input-border-focus: ${theme.palette.blue95};
$input-box-shadow-focus: $blue-light !default;
$input-color-placeholder: ${theme.colors.formInputPlaceholderText};
$input-label-bg: ${theme.palette.gray15};
$input-label-border-color: ${theme.palette.gray15};
$input-label-bg: ${theme.colors.bg2};
$input-color-select-arrow: $white;
// Search
@@ -249,14 +247,15 @@ $navbar-button-border: #2f2f32;
$side-menu-bg: $panel-bg;
$side-menu-bg-mobile: $panel-bg;
$side-menu-border: none;
$side-menu-item-hover-bg: $dark-3;
$side-menu-item-hover-bg: ${theme.colors.bg2};
$side-menu-shadow: 0 0 20px black;
$side-menu-link-color: ${theme.palette.gray70};
$side-menu-icon-color: ${theme.palette.gray70};
$side-menu-header-color: ${theme.colors.text};
// Menu dropdowns
// -------------------------
$menu-dropdown-bg: $panel-bg;
$menu-dropdown-hover-bg: $dark-3;
$menu-dropdown-bg: ${theme.colors.bg1};
$menu-dropdown-hover-bg: ${theme.colors.bg2};
$menu-dropdown-shadow: 5px 5px 20px -5px $black;
// Tabs
@@ -354,7 +353,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
$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-on-bg: ${theme.palette.blueLight};
$switch-slider-shadow: 0 0 3px black;
//Checkbox
@@ -378,7 +377,7 @@ $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-options-group-header-bg: ${theme.colors.bg2};
$panel-grid-placeholder-bg: $blue-faint;
$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+8 -7
View File
@@ -58,7 +58,7 @@ $red: $red-base;
$yellow: ${theme.palette.yellow};
$orange: ${theme.palette.orange};
$purple: ${theme.palette.purple};
$variable: ${theme.palette.variable};
$variable: ${theme.colors.textBlue};
$brand-primary: ${theme.palette.brandPrimary};
$brand-success: ${theme.palette.brandSuccess};
@@ -69,7 +69,6 @@ $query-red: ${theme.palette.queryRed};
$query-green: ${theme.palette.queryGreen};
$query-purple: ${theme.palette.queryPurple};
$query-orange: ${theme.palette.orange};
$query-keyword: ${theme.palette.queryKeyword};
// Status colors
// -------------------------
@@ -88,6 +87,7 @@ $text-color-strong: ${theme.colors.textStrong};
$text-color-weak: ${theme.colors.textWeak};
$text-color-faint: ${theme.colors.textFaint};
$text-color-emphasis: ${theme.colors.textEmphasis};
$text-blue: ${theme.colors.textBlue};
$text-shadow-faint: none;
@@ -114,7 +114,7 @@ $hr-border-color: $gray-4 !default;
// -------------------------
$panel-bg: ${theme.colors.panelBg};
$panel-border: 1px solid ${theme.colors.panelBorder};
$panel-header-hover-bg: $gray-6;
$panel-header-hover-bg: ${theme.colors.bg2};
$panel-corner: $gray-4;
// Page header
@@ -195,13 +195,12 @@ $input-bg: $white;
$input-bg-disabled: $gray-5;
$input-color: ${theme.colors.formInputText};
$input-border-color: ${theme.palette.gray95};
$input-border-color: ${theme.colors.formInputBorder};
$input-box-shadow: none;
$input-border-focus: ${theme.palette.blue95};
$input-box-shadow-focus: ${theme.palette.blue95};
$input-color-placeholder: ${theme.colors.formInputPlaceholderText};
$input-label-bg: ${theme.palette.gray95};
$input-label-border-color: ${theme.palette.gray95};
$input-label-bg: ${theme.colors.bg2};
$input-color-select-arrow: ${theme.palette.gray60};
// search
@@ -245,6 +244,8 @@ $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
$side-menu-item-hover-bg: ${theme.palette.gray25};
$side-menu-shadow: 5px 0px 10px -5px $gray-1;
$side-menu-link-color: $gray-4;
$side-menu-icon-color: ${theme.palette.gray70};
$side-menu-header-color: ${theme.palette.gray95};
// Menu dropdowns
// -------------------------
@@ -345,7 +346,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
$switch-bg: $white;
$switch-slider-color: $gray-7;
$switch-slider-off-bg: $gray-5;
$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400);
$switch-slider-on-bg: ${theme.palette.blueShade};
$switch-slider-shadow: 0 0 3px $dark-2;
//Checkbox
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+1 -7
View File
@@ -142,13 +142,7 @@ $link-hover-decoration: ${theme.typography.link.hoverDecoration} !default;
// Forms
$input-line-height: 18px !default;
$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-border-radius: $border-radius;
$input-padding: 0 ${theme.spacing.sm};
$input-height: 32px !default;
packages/grafana-ui/src/themes/dark.ts
+1 -2
View File
@@ -22,7 +22,6 @@ const basicColors = {
gray5: '#ececec',
gray6: '#f4f5f8', // not used in dark theme
gray7: '#fbfbfb', // not used in dark theme
grayBlue: '#212327',
blueBase: '#3274d9',
blueShade: '#1f60c4',
blueLight: '#5794f2',
@@ -98,7 +97,6 @@ const darkTheme: GrafanaTheme = {
queryRed: basicColors.redBase,
queryGreen: '#74e680',
queryPurple: '#fe85fc',
queryKeyword: '#66d9ef',
queryOrange: basicColors.orange,
online: basicColors.greenBase,
warn: '#f79520',
@@ -126,6 +124,7 @@ const darkTheme: GrafanaTheme = {
textWeak: basicColors.gray2,
textEmphasis: basicColors.gray5,
textFaint: basicColors.dark5,
textBlue: basicColors.blue85,
link: basicColors.gray4,
linkDisabled: basicColors.gray2,
packages/grafana-ui/src/themes/default.ts
+1 -1
View File
@@ -15,7 +15,7 @@ export const commonColorsPalette = {
// New blues palette used by next-gen form elements
blue95: '#5794f2',
blue85: '#3274d9',
blue85: '#339ae5',
blue77: '#1f60c4',
// New reds palette used by next-gen form elements
packages/grafana-ui/src/themes/light.ts
+1 -4
View File
@@ -22,7 +22,6 @@ const basicColors = {
gray5: '#dde4ed',
gray6: '#e9edf2', // same as gray95
gray7: '#f7f8fa', // same as gray98
grayBlue: '#212327', // not used in light theme
blueBase: '#3274d9',
blueShade: '#1f60c4',
blueLight: '#5794f2',
@@ -35,7 +34,6 @@ const basicColors = {
red: '#d44939',
yellow: '#ff851b',
purple: '#9954bb',
variable: '#007580',
orange: '#ff7941',
orangeDark: '#ed5700',
};
@@ -90,7 +88,6 @@ const lightTheme: GrafanaTheme = {
name: 'Grafana Light',
palette: {
...basicColors,
variable: basicColors.blue,
brandPrimary: basicColors.orange,
brandSuccess: basicColors.greenBase,
brandWarning: basicColors.orange,
@@ -98,7 +95,6 @@ const lightTheme: GrafanaTheme = {
queryRed: basicColors.redBase,
queryGreen: basicColors.greenBase,
queryPurple: basicColors.purple,
queryKeyword: basicColors.blueBase,
queryOrange: basicColors.orange,
online: basicColors.greenShade,
warn: '#f79520',
@@ -124,6 +120,7 @@ const lightTheme: GrafanaTheme = {
textWeak: basicColors.gray2,
textEmphasis: basicColors.dark5,
textFaint: basicColors.dark4,
textBlue: basicColors.blue85,
// Link colors
link: basicColors.gray1,