From 8b7decf57b8ebd0b4f8700a091a6be28b1d0ad5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 13 Apr 2020 09:58:40 +0200 Subject: [PATCH] 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 --- packages/grafana-data/src/types/theme.ts | 5 +-- .../src/components/Button/Button.tsx | 1 - .../ButtonCascader/ButtonCascader.tsx | 17 ++++--- .../CallToActionCard/CallToActionCard.tsx | 3 +- .../CallToActionCard.test.tsx.snap | 6 +-- .../components/DataLinks/DataLinkInput.tsx | 2 +- .../Forms/Legacy/Select/_Select.scss | 2 +- .../Forms/RadioButtonGroup/RadioButton.tsx | 6 --- .../src/components/IconButton/IconButton.tsx | 6 +-- .../src/components/Modal/getModalStyles.ts | 3 +- .../src/components/Select/SelectBase.tsx | 2 +- .../TimePickerContent.test.tsx.snap | 12 ++--- .../TimePicker/TimePickerContent/colors.ts | 10 +---- .../TimeRangePicker.test.tsx.snap | 10 ++--- .../OrganizeFieldsTransformerEditor.tsx | 3 +- .../src/themes/_variables.dark.scss.tmpl.ts | 31 +++++++------ .../src/themes/_variables.light.scss.tmpl.ts | 15 ++++--- .../src/themes/_variables.scss.tmpl.ts | 8 +--- packages/grafana-ui/src/themes/dark.ts | 3 +- packages/grafana-ui/src/themes/default.ts | 2 +- packages/grafana-ui/src/themes/light.ts | 5 +-- .../QueryOperationRow/QueryOperationRow.tsx | 44 ++++++++----------- .../core/components/Select/FolderPicker.tsx | 2 - .../__snapshots__/FolderPicker.test.tsx.snap | 1 - .../panel_editor/QueryEditorRowTitle.tsx | 2 +- .../prometheus/components/PromQueryEditor.tsx | 6 +-- .../PromQueryEditor.test.tsx.snap | 42 +----------------- .../testdata/partials/query.editor.html | 6 +-- public/sass/_variables.dark.generated.scss | 29 ++++++------ public/sass/_variables.generated.scss | 8 +--- public/sass/_variables.light.generated.scss | 15 ++++--- public/sass/components/_code_editor.scss | 2 +- public/sass/components/_dropdown.scss | 2 - public/sass/components/_gf-form.scss | 26 +++++------ public/sass/components/_navbar.scss | 1 - public/sass/components/_query_editor.scss | 2 +- public/sass/components/_sidemenu.scss | 7 +-- public/sass/components/_slate_editor.scss | 2 +- public/sass/components/_switch.scss | 2 +- 39 files changed, 133 insertions(+), 218 deletions(-) diff --git a/packages/grafana-data/src/types/theme.ts b/packages/grafana-data/src/types/theme.ts index 05f3b77a6e5..67e91f38e2f 100644 --- a/packages/grafana-data/src/types/theme.ts +++ b/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; diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx index f5f6c748668..2b856ef5c27 100644 --- a/packages/grafana-ui/src/components/Button/Button.tsx +++ b/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}; diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx index 76282e1e0b4..8b8959888e2 100644 --- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx +++ b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx @@ -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 = props => { - const { onChange, loadData, ...rest } = props; + const { onChange, className, loadData, ...rest } = props; + const styles = getStyles(); + return ( - ); diff --git a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx index 97468bbad95..59df03d3d53 100644 --- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx +++ b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx @@ -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; diff --git a/packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap b/packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap index 8fd8b22340c..d90d5019b86 100644 --- a/packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap +++ b/packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap @@ -2,7 +2,7 @@ exports[`CallToActionCard rendering when message and footer provided 1`] = `
({ color: ${theme.palette.queryGreen}; } .token.variable { - color: ${theme.palette.queryKeyword}; + color: ${theme.colors.textBlue}; } `, })); diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss b/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss index 73acd2297a4..62028ed1dd4 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss +++ b/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; } diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx index b81cd975c47..7a7fb9eedf0 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx +++ b/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; diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.tsx index 9ac595ac0cd..0529814e078 100644 --- a/packages/grafana-ui/src/components/IconButton/IconButton.tsx +++ b/packages/grafana-ui/src/components/IconButton/IconButton.tsx @@ -46,11 +46,11 @@ export const IconButton = React.forwardRef( 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; } } diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts index a8758cf22da..30683cc96d5 100644 --- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts +++ b/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; diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx index b5e5038e591..10685c0306a 100644 --- a/packages/grafana-ui/src/components/Select/SelectBase.tsx +++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx @@ -277,7 +277,7 @@ export function SelectBase({ width: inputSizesPixels(size), }), }} - className={widthClass} + className={cx('select-container', widthClass)} {...commonSelectProps} {...creatableProps} {...asyncSelectProps} diff --git a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap index a00ff160919..ee7506ace10 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap +++ b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap @@ -2,10 +2,10 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
{ 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( { diff --git a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap index e065a54528a..5138ceff494 100644 --- a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap +++ b/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", diff --git a/packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx b/packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx index cacb6630ac7..6546226eccc 100644 --- a/packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx +++ b/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%; diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index 5ef90c8e15e..e1ede7f1c0a 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/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; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 53598c4e1e4..6bca9da160a 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/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 diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 9f590f6c2e9..9bab7cb165b 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/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; diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index cd4ca41132e..ab5cdf2e591 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/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, diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index 6c35ab5b396..467cde1ceef 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/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 diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts index f71f16f7d8e..b6f42e3b1f3 100644 --- a/packages/grafana-ui/src/themes/light.ts +++ b/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, diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx index c79f862077a..d1af17841ee 100644 --- a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx +++ b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx @@ -1,5 +1,5 @@ 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,19 +54,17 @@ export const QueryOperationRow: React.FC = ({ return (
- -
{ - setIsContentVisible(!isContentVisible); - }} - aria-label="Query operation row title" - > - - {title && {titleElement}} -
- {actions &&
{actionsElement}
} - +
{ + setIsContentVisible(!isContentVisible); + }} + aria-label="Query operation row title" + > + + {title && {titleElement}} +
+ {actions && actionsElement}
{isContentVisible &&
{children}
}
@@ -74,8 +72,6 @@ export const QueryOperationRow: React.FC = ({ }; 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}; `, }; }); diff --git a/public/app/core/components/Select/FolderPicker.tsx b/public/app/core/components/Select/FolderPicker.tsx index 27961aa4ad5..b59cde93b1c 100644 --- a/public/app/core/components/Select/FolderPicker.tsx +++ b/public/app/core/components/Select/FolderPicker.tsx @@ -159,7 +159,6 @@ export class FolderPicker extends PureComponent { loadOptions={this.debouncedSearch} onChange={this.onFolderChange} onCreateOption={this.createNewFolder} - size="sm" menuPosition="fixed" /> )} @@ -176,7 +175,6 @@ export class FolderPicker extends PureComponent { loadOptions={this.debouncedSearch} onChange={this.onFolderChange} onCreateOption={this.createNewFolder} - size="sm" />
diff --git a/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap index ceb4b2402ac..6f6b40b3eb5 100644 --- a/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap +++ b/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 {}} />
diff --git a/public/app/features/dashboard/panel_editor/QueryEditorRowTitle.tsx b/public/app/features/dashboard/panel_editor/QueryEditorRowTitle.tsx index 11a11c6b3ba..9bf21f6ab58 100644 --- a/public/app/features/dashboard/panel_editor/QueryEditorRowTitle.tsx +++ b/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; diff --git a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx index 9dc9d911076..b71cb9af9e8 100644 --- a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx +++ b/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 {
-
Format
+
Format
Format
li > a { display: flex; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 3de420aa5be..3e5ef757f3b 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -1,12 +1,12 @@ $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; diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 6b2cfa7ebda..e66f6b06e89 100644 --- a/public/sass/components/_navbar.scss +++ b/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; diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss index 61daf2a82cf..6dfa5ced9d6 100644 --- a/public/sass/components/_query_editor.scss +++ b/public/sass/components/_query_editor.scss @@ -1,6 +1,6 @@ .query-keyword { font-weight: $font-weight-semi-bold; - color: $blue; + color: $text-blue; } .query-segment-operator { diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 1860a8a3024..b3a55be86ef 100644 --- a/public/sass/components/_sidemenu.scss +++ b/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; } diff --git a/public/sass/components/_slate_editor.scss b/public/sass/components/_slate_editor.scss index 7067a447244..944c72b5f56 100644 --- a/public/sass/components/_slate_editor.scss +++ b/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, diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss index d85303feca3..c2bc4fd14c3 100644 --- a/public/sass/components/_switch.scss +++ b/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;