Skip to content

N
nexpie-grafana-theme
Commit 8b7decf5 by Torkel Ödegaard Committed by GitHub
Options

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

* 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
parent d4516439
Showing with 123 additions and 208 deletions
packages/grafana-data/src/types/theme.ts
......@@ -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
......@@ -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
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
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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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
......@@ -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,
......
public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
import React, { useState } from 'react';
import { renderOrCallToRender, HorizontalGroup, Icon, stylesFactory, useTheme } from '@grafana/ui';
import { renderOrCallToRender, Icon, stylesFactory, useTheme } from '@grafana/ui';
import { GrafanaTheme } from '@grafana/data';
import { css } from 'emotion';
import { useUpdateEffect } from 'react-use';
......@@ -54,7 +54,6 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
return (
<div className={styles.wrapper}>
<div className={styles.header}>
<HorizontalGroup justify="space-between">
<div
className={styles.titleWrapper}
onClick={() => {
......@@ -65,8 +64,7 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
<Icon name={isContentVisible ? 'angle-down' : 'angle-right'} className={styles.collapseIcon} />
{title && <span className={styles.title}>{titleElement}</span>}
</div>
{actions && <div>{actionsElement}</div>}
</HorizontalGroup>
{actions && actionsElement}
</div>
{isContentVisible && <div className={styles.content}>{children}</div>}
</div>
......@@ -74,8 +72,6 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
};
const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
const borderColor = theme.colors.border2;
return {
wrapper: css`
margin-bottom: ${theme.spacing.formSpacingBase * 2}px;
......@@ -83,8 +79,11 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
header: css`
padding: ${theme.spacing.sm};
border-radius: ${theme.border.radius.sm};
border: 1px solid ${borderColor};
background: ${theme.colors.bodyBg};
background: ${theme.colors.bg2};
height: ${theme.spacing.formInputHeight};
display: flex;
align-items: center;
justify-content: space-between;
`,
collapseIcon: css`
color: ${theme.colors.textWeak};
......@@ -97,17 +96,12 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
title: css`
font-weight: ${theme.typography.weight.semibold};
color: ${theme.palette.blue95};
color: ${theme.colors.textBlue};
margin-left: ${theme.spacing.sm};
`,
content: css`
border: 1px solid ${borderColor};
margin-top: -1px;
background: ${theme.colors.bodyBg};
margin-top: ${theme.spacing.xs};
margin-left: ${theme.spacing.xl};
border-top: 1px solid ${theme.colors.bodyBg};
border-radis: 0 ${theme.border.radius.sm};
padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.lg};
`,
};
});
......
public/app/core/components/Select/FolderPicker.tsx
......@@ -159,7 +159,6 @@ export class FolderPicker extends PureComponent<Props, State> {
loadOptions={this.debouncedSearch}
onChange={this.onFolderChange}
onCreateOption={this.createNewFolder}
size="sm"
menuPosition="fixed"
/>
)}
......@@ -176,7 +175,6 @@ export class FolderPicker extends PureComponent<Props, State> {
loadOptions={this.debouncedSearch}
onChange={this.onFolderChange}
onCreateOption={this.createNewFolder}
size="sm"
/>
</div>
</div>
......
public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
......@@ -21,7 +21,6 @@ exports[`FolderPicker should render 1`] = `
loadingMessage="Loading folders..."
onChange={[Function]}
onCreateOption={[Function]}
size="sm"
value={Object {}}
/>
</div>
......
public/app/features/dashboard/panel_editor/QueryEditorRowTitle.tsx
......@@ -42,7 +42,7 @@ const getQueryEditorRowTitleStyles = stylesFactory((theme: GrafanaTheme) => {
return {
refId: css`
font-weight: ${theme.typography.weight.semibold};
color: ${theme.palette.blue95};
color: ${theme.colors.textBlue};
cursor: pointer;
display: flex;
align-items: center;
......
public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
......@@ -2,10 +2,10 @@ import _ from 'lodash';
import React, { PureComponent } from 'react';
// Types
import { FormLabel, LegacyForms } from '@grafana/ui';
import { FormLabel, LegacyForms, Select } from '@grafana/ui';
import { SelectableValue, QueryEditorProps } from '@grafana/data';
const { Select, Switch } = LegacyForms;
const { Switch } = LegacyForms;
import { PrometheusDatasource } from '../datasource';
import { PromQuery, PromOptions } from '../types';
......@@ -162,7 +162,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
</div>
<div className="gf-form">
<div className="gf-form-label">Format</div>
<div className="gf-form-label width-7">Format</div>
<Select isSearchable={false} options={FORMAT_OPTIONS} onChange={this.onFormatChange} value={formatOption} />
<Switch label="Instant" checked={instant} onChange={this.onInstantChange} />
......
public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
......@@ -77,27 +77,8 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
Resolution
</div>
<Select
allowCustomValue={false}
autoFocus={false}
backspaceRemovesValue={true}
className=""
components={
Object {
"Group": [Function],
"IndicatorsContainer": [Function],
"MenuList": [Function],
"Option": [Function],
"SingleValue": [Function],
}
}
isClearable={false}
isDisabled={false}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
......@@ -126,7 +107,6 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
},
]
}
tabSelectsValue={true}
value={
Object {
"label": "1/1",
......@@ -139,32 +119,13 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
className="gf-form"
>
<div
className="gf-form-label"
className="gf-form-label width-7"
>
Format
</div>
<Select
allowCustomValue={false}
autoFocus={false}
backspaceRemovesValue={true}
className=""
components={
Object {
"Group": [Function],
"IndicatorsContainer": [Function],
"MenuList": [Function],
"Option": [Function],
"SingleValue": [Function],
}
}
isClearable={false}
isDisabled={false}
isLoading={false}
isMulti={false}
isSearchable={false}
maxMenuHeight={300}
onChange={[Function]}
openMenuOnFocus={false}
options={
Array [
Object {
......@@ -181,7 +142,6 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
},
]
}
tabSelectsValue={true}
value={
Object {
"label": "Time series",
......
public/app/plugins/datasource/testdata/partials/query.editor.html
......@@ -52,7 +52,7 @@
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Series count</label>
<input type="number"
class="gf-form-input width-7"
class="gf-form-input width-15"
placeholder="1"
ng-model="ctrl.target.seriesCount"
min="1"
......@@ -91,7 +91,7 @@
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Min</label>
<input type="number"
class="gf-form-input width-6"
class="gf-form-input width-15"
placeholder="none"
ng-model="ctrl.target.min"
step="0.1"
......@@ -100,7 +100,7 @@
<div class="gf-form">
<label class="gf-form-label query-keyword width-7">Max</label>
<input type="number"
class="gf-form-input width-6"
class="gf-form-input width-15"
placeholder="none"
ng-model="ctrl.target.max"
step="0.1"
......
public/sass/_variables.dark.generated.scss
......@@ -56,7 +56,6 @@ $gray-4: #d8d9da;
$gray-5: #ececec;
$gray-6: #f4f5f8;
$gray-blue: #212327;
$input-black: #0b0c0e;
$white: #ffffff;
......@@ -68,7 +67,7 @@ $red: $red-base;
$yellow: #ecbb13;
$orange: #eb7b18;
$purple: #9933cc;
$variable: #32d1df;
$variable: #339ae5;
$brand-primary: #eb7b18;
$brand-success: #299c46;
......@@ -79,10 +78,9 @@ $query-red: #e02f44;
$query-green: #74e680;
$query-purple: #fe85fc;
$query-orange: #eb7b18;
$query-keyword: #66d9ef;
// Status colors
// -------------------------
// -------------------------¨
$online: #299c46;
$warn: #f79520;
$critical: #e02f44;
......@@ -98,6 +96,7 @@ $text-color-strong: #ffffff;
$text-color-weak: #8e8e8e;
$text-color-faint: #222426;
$text-color-emphasis: #ececec;
$text-blue: #339ae5;
$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
$textShadow: none;
......@@ -125,7 +124,7 @@ $hr-border-color: $dark-9;
// -------------------------
$panel-bg: #141619;
$panel-border: 1px solid #202226;
$panel-header-hover-bg: #343b40;
$panel-header-hover-bg: #202226;
$panel-corner: $panel-bg;
// page header
......@@ -153,7 +152,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: #202226;
// Scrollbars
$scrollbarBackground: #404357;
......@@ -206,13 +205,12 @@ $input-bg: $input-black;
$input-bg-disabled: $dark-6;
$input-color: #c7d0d9;
$input-border-color: #202226;
$input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
$input-border-color: #343b40;
$input-box-shadow: none;
$input-border-focus: #5794f2;
$input-box-shadow-focus: $blue-light !default;
$input-color-placeholder: #555555;
$input-label-bg: #202226;
$input-label-border-color: #202226;
$input-color-select-arrow: $white;
// Search
......@@ -252,14 +250,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: #202226;
$side-menu-shadow: 0 0 20px black;
$side-menu-link-color: #9fa7b3;
$side-menu-icon-color: #9fa7b3;
$side-menu-header-color: #c7d0d9;
// Menu dropdowns
// -------------------------
$menu-dropdown-bg: $panel-bg;
$menu-dropdown-hover-bg: $dark-3;
$menu-dropdown-bg: #141619;
$menu-dropdown-hover-bg: #202226;
$menu-dropdown-shadow: 5px 5px 20px -5px $black;
// Tabs
......@@ -357,7 +356,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: #5794f2;
$switch-slider-shadow: 0 0 3px black;
//Checkbox
......@@ -381,7 +380,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: #202226;
$panel-grid-placeholder-bg: $blue-faint;
$panel-grid-placeholder-shadow: 0 0 4px $blue-shade;
......
public/sass/_variables.generated.scss
......@@ -145,13 +145,7 @@ $link-hover-decoration: none !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 8px;
$input-height: 32px !default;
......
public/sass/_variables.light.generated.scss
......@@ -61,7 +61,7 @@ $red: $red-base;
$yellow: #ff851b;
$orange: #ff7941;
$purple: #9954bb;
$variable: #0083b3;
$variable: #339ae5;
$brand-primary: #ff7941;
$brand-success: #3eb15b;
......@@ -72,7 +72,6 @@ $query-red: #e02f44;
$query-green: #3eb15b;
$query-purple: #9954bb;
$query-orange: #ff7941;
$query-keyword: #3274d9;
// Status colors
// -------------------------
......@@ -91,6 +90,7 @@ $text-color-strong: #41444b;
$text-color-weak: #767980;
$text-color-faint: #35373f;
$text-color-emphasis: #41444b;
$text-blue: #339ae5;
$text-shadow-faint: none;
......@@ -117,7 +117,7 @@ $hr-border-color: $gray-4 !default;
// -------------------------
$panel-bg: #ffffff;
$panel-border: 1px solid #e9edf2;
$panel-header-hover-bg: $gray-6;
$panel-header-hover-bg: #f7f8fa;
$panel-corner: $gray-4;
// Page header
......@@ -198,13 +198,12 @@ $input-bg: $white;
$input-bg-disabled: $gray-5;
$input-color: #343b40;
$input-border-color: #e9edf2;
$input-border-color: #c7d0d9;
$input-box-shadow: none;
$input-border-focus: #5794f2;
$input-box-shadow-focus: #5794f2;
$input-color-placeholder: #9fa7b3;
$input-label-bg: #e9edf2;
$input-label-border-color: #e9edf2;
$input-label-bg: #f7f8fa;
$input-color-select-arrow: #7b8087;
// search
......@@ -248,6 +247,8 @@ $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
$side-menu-item-hover-bg: #343b40;
$side-menu-shadow: 5px 0px 10px -5px $gray-1;
$side-menu-link-color: $gray-4;
$side-menu-icon-color: #9fa7b3;
$side-menu-header-color: #e9edf2;
// Menu dropdowns
// -------------------------
......@@ -348,7 +349,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: #1f60c4;
$switch-slider-shadow: 0 0 3px $dark-2;
//Checkbox
......
public/sass/components/_code_editor.scss
......@@ -9,7 +9,7 @@
font-size: $font-size-md;
min-height: 50px; // Include space for horizontal scrollbar
@include border-radius($input-border-radius-sm);
@include border-radius($input-border-radius);
border: $border-width solid $input-border-color;
}
......
public/sass/components/_dropdown.scss
......@@ -55,7 +55,6 @@
margin: 2px 0 0; // override default ul
list-style: none;
background-color: $dropdownBackground;
border: 1px solid #ccc; // Fallback for IE7-8
border: 1px solid $dropdownBorder;
text-align: left;
......@@ -111,7 +110,6 @@
background: $menu-dropdown-bg;
box-shadow: $menu-dropdown-shadow;
margin-top: 0px;
border: none;
> li > a {
display: flex;
......
public/sass/components/_gf-form.scss
$input-border: 1px solid $input-border-color;
.gf-form {
margin-bottom: $space-xxs;
display: flex;
flex-direction: row;
align-items: flex-start;
text-align: left;
position: relative;
margin-bottom: $space-xs;
&--offset-1 {
margin-left: $spacer;
......@@ -83,13 +83,13 @@ $input-border: 1px solid $input-border-color;
flex-wrap: wrap;
align-content: flex-start;
.gf-form + .gf-form {
margin-left: $space-xs;
}
&--nowrap {
flex-wrap: nowrap;
}
.select-container {
margin-right: $space-xs;
}
}
.gf-form-button-row {
......@@ -107,13 +107,11 @@ $input-border: 1px solid $input-border-color;
flex-shrink: 0;
font-weight: $font-weight-semi-bold;
font-size: $font-size-sm;
background-color: $input-label-bg;
height: $input-height;
border: $border-width solid $input-label-border-color;
border-right: none;
border-radius: $label-border-radius;
margin-right: $space-xs;
border-radius: $input-border-radius;
justify-content: space-between;
&--grow {
flex-grow: 1;
......@@ -134,11 +132,10 @@ $input-border: 1px solid $input-border-color;
color: $variable;
background: $panel-bg;
border: $panel-border;
border-right: none;
}
&--btn {
border-right: $border-width solid $input-label-border-color;
border: none;
border-radius: $border-radius;
&:hover {
......@@ -167,7 +164,7 @@ $input-border: 1px solid $input-border-color;
margin-right: $space-xs;
border: $border-width solid transparent;
border-left: none;
@include border-radius($label-border-radius-sm);
@include border-radius($input-border-radius);
}
.gf-form-textarea {
......@@ -187,7 +184,7 @@ $input-border: 1px solid $input-border-color;
background-clip: padding-box;
border: $input-border;
border-radius: $input-border-radius;
@include box-shadow($input-box-shadow);
margin-right: $space-xs;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
......@@ -274,6 +271,7 @@ $input-border: 1px solid $input-border-color;
.gf-form-select-wrapper {
position: relative;
background-color: $input-bg;
margin-right: $space-xs;
.gf-form-select-icon {
position: absolute;
......
public/sass/components/_navbar.scss
......@@ -124,7 +124,6 @@ i.navbar-page-btn__search {
align-items: center;
font-weight: $btn-font-weight;
padding: 0 $space-sm;
line-height: 32px;
height: 32px;
color: $text-muted;
border: 1px solid $navbar-button-border;
......
public/sass/components/_query_editor.scss
.query-keyword {
font-weight: $font-weight-semi-bold;
color: $blue;
color: $text-blue;
}
.query-segment-operator {
......
public/sass/components/_sidemenu.scss
......@@ -65,6 +65,7 @@ $mobile-menu-breakpoint: md;
@include left-brand-border-gradient();
.dropdown-menu {
border: none;
margin: 0;
display: block;
opacity: 0;
......@@ -84,7 +85,7 @@ $mobile-menu-breakpoint: md;
}
.sidemenu-link {
color: $side-menu-link-color !important;
color: $side-menu-icon-color !important;
line-height: 42px;
padding: 0px 10px 0px 10px;
display: block;
......@@ -128,11 +129,11 @@ $mobile-menu-breakpoint: md;
white-space: nowrap;
background-color: $side-menu-item-hover-bg;
font-size: 17px;
color: $side-menu-link-color;
color: $side-menu-header-color;
}
.side-menu-header-link {
color: $side-menu-link-color !important;
color: $side-menu-header-color !important;
border: none !important;
padding: 0 !important;
}
......
public/sass/components/_slate_editor.scss
......@@ -130,7 +130,7 @@
.token.atrule,
.token.keyword,
.token.class-name {
color: $query-keyword;
color: $text-blue;
}
.token.punctuation,
......
public/sass/components/_switch.scss
......@@ -21,6 +21,7 @@ gf-form-switch[disabled] {
.gf-form-switch-container {
display: flex;
cursor: pointer;
margin-right: $space-xs;
}
.gf-form-switch {
......@@ -30,7 +31,6 @@ gf-form-switch[disabled] {
height: $input-height;
background: $switch-bg;
border: 1px solid $input-border-color;
border-left: none;
border-radius: $input-border-radius;
align-items: center;
justify-content: center;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment