From 44cf2f8efe41b5a119eefc6c60dde26b114b5cd2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 22 Apr 2021 09:18:32 +0200 Subject: [PATCH] Theme: Update theme layering (#33217) * Theme: Update theme layering * More updates * Updates to shadows and dropdowns * Moved panel option group to emotion global styles * more minor fixes --- .../src/themes/createComponents.ts | 37 ++++++++-------- .../grafana-data/src/themes/createShadows.ts | 42 +++---------------- .../grafana-data/src/themes/createV1Theme.ts | 2 +- .../grafana-ui/.storybook/storybookTheme.ts | 2 +- .../grafana-ui/src/components/Alert/Alert.tsx | 2 +- .../src/components/Button/Button.tsx | 2 +- .../src/components/Drawer/Drawer.tsx | 2 +- .../RadioButtonGroup/RadioButtonGroup.tsx | 2 +- .../src/components/Forms/commonStyles.ts | 2 +- .../grafana-ui/src/components/Menu/Menu.tsx | 6 +-- .../src/components/Modal/getModalStyles.ts | 11 +++-- .../src/components/Select/getSelectStyles.ts | 2 +- .../src/components/Switch/Switch.tsx | 4 +- .../src/components/TextArea/TextArea.tsx | 2 +- .../TimeRangePicker/TimePickerContent.tsx | 4 +- .../src/themes/GlobalStyles/GlobalStyles.tsx | 5 +-- .../themes/GlobalStyles/angularPanelStyles.ts | 37 ++++++++++++++++ .../themes/GlobalStyles/{card.tsx => card.ts} | 1 + .../src/themes/_variables.dark.scss.tmpl.ts | 10 ++--- .../src/themes/_variables.light.scss.tmpl.ts | 10 ++--- .../PanelEditor/OptionsPaneOptions.tsx | 4 +- .../PanelEditor/PanelEditorTabs.tsx | 2 +- .../VizTypePicker/PanelTypeCard.tsx | 2 +- public/img/icons/mono/reusable-panel.svg | 2 +- public/sass/_variables.dark.generated.scss | 16 +++---- public/sass/_variables.light.generated.scss | 16 +++---- public/sass/components/_panel_editor.scss | 36 ---------------- public/sass/components/_panel_graph.scss | 6 +-- 28 files changed, 120 insertions(+), 149 deletions(-) create mode 100644 packages/grafana-ui/src/themes/GlobalStyles/angularPanelStyles.ts rename packages/grafana-ui/src/themes/GlobalStyles/{card.tsx => card.ts} (99%) diff --git a/packages/grafana-data/src/themes/createComponents.ts b/packages/grafana-data/src/themes/createComponents.ts index 6024258bf33..892616ba97a 100644 --- a/packages/grafana-data/src/themes/createComponents.ts +++ b/packages/grafana-data/src/themes/createComponents.ts @@ -11,10 +11,11 @@ export interface ThemeComponents { }; input: { background: string; - border: string; + borderColor: string; borderHover: string; text: string; }; + tooltip: { text: string; background: string; @@ -22,10 +23,13 @@ export interface ThemeComponents { panel: { padding: number; headerHeight: number; - border: string; + borderColor: string; boxShadow: string; background: string; }; + dropdown: { + background: string; + }; dashboard: { background: string; padding: number; @@ -37,8 +41,15 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th padding: 1, headerHeight: 4, background: colors.background.primary, - border: colors.background.primary, - boxShadow: shadows.z0, + borderColor: colors.background.primary, + boxShadow: shadows.z1, + }; + + const input = { + borderColor: colors.border.medium, + borderHover: colors.border.strong, + text: colors.text.primary, + background: colors.mode === 'dark' ? colors.background.canvas : colors.background.primary, }; return { @@ -47,21 +58,11 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th md: 4, lg: 6, }, - input: - colors.mode === 'dark' - ? { - background: colors.background.canvas, - border: colors.border.medium, - borderHover: colors.border.strong, - text: colors.text.primary, - } - : { - background: colors.background.primary, - border: colors.border.medium, - borderHover: colors.border.strong, - text: colors.text.primary, - }, + input, panel, + dropdown: { + background: input.background, + }, tooltip: { background: colors.background.secondary, text: colors.text.primary, diff --git a/packages/grafana-data/src/themes/createShadows.ts b/packages/grafana-data/src/themes/createShadows.ts index 33379a5238b..08f0649177d 100644 --- a/packages/grafana-data/src/themes/createShadows.ts +++ b/packages/grafana-data/src/themes/createShadows.ts @@ -2,54 +2,24 @@ import { ThemeColors } from './createColors'; /** @beta */ export interface ThemeShadows { - z0: string; z1: string; z2: string; z3: string; - z4: string; -} - -function createDarkShadow(...px: number[]) { - const shadowKeyUmbraOpacity = 0.2; - const shadowKeyPenumbraOpacity = 0.15; - const shadowAmbientShadowOpacity = 0.1; - - return [ - `${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, - `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`, - `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,${shadowAmbientShadowOpacity})`, - ].join(','); -} - -function createLightShadow(...px: number[]) { - const shadowKeyUmbraOpacity = 0.15; - const shadowKeyPenumbraOpacity = 0.1; - const shadowAmbientShadowOpacity = 0.1; - - return [ - `${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, - `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`, - `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,${shadowAmbientShadowOpacity})`, - ].join(','); } /** @alpha */ export function createShadows(colors: ThemeColors): ThemeShadows { if (colors.mode === 'dark') { return { - z0: createDarkShadow(0, 1, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), - z1: createDarkShadow(0, 1, 1, -1, 0, 1, 2, 0, 0, 1, 3, 0), - z2: createDarkShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), - z3: createDarkShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), - z4: createDarkShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), + z1: '0px 1px 2px rgba(24, 26, 27, 0.75)', + z2: '0px 4px 8px rgba(24, 26, 27, 0.75)', + z3: '0px 10px 20px #181A1B', }; } return { - z0: createLightShadow(0, 1, 1, -1, 0, 0, 0, 0, 0, 1, 3, 0), - z1: createLightShadow(0, 1, 1, -1, 0, 1, 2, 0, 0, 1, 3, 0), - z2: createLightShadow(0, 2, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), - z3: createLightShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), - z4: createLightShadow(0, 5, 5, -5, 0, 8, 10, 1, 0, 3, 14, 2), + z1: '0px 1px 2px rgba(24, 26, 27, 0.2)', + z2: '0px 4px 8px rgba(24, 26, 27, 0.2)', + z3: '0px 13px 20px 1px rgba(24, 26, 27, 0.18)', }; } diff --git a/packages/grafana-data/src/themes/createV1Theme.ts b/packages/grafana-data/src/themes/createV1Theme.ts index 77389d2fdfc..18c69e4bb04 100644 --- a/packages/grafana-data/src/themes/createV1Theme.ts +++ b/packages/grafana-data/src/themes/createV1Theme.ts @@ -222,7 +222,7 @@ export function createV1Theme(theme: Omit): GrafanaTheme { bodyBg: theme.colors.background.canvas, panelBg: theme.components.panel.background, - panelBorder: theme.components.panel.border, + panelBorder: theme.components.panel.borderColor, pageHeaderBg: theme.colors.background.canvas, pageHeaderBorder: theme.colors.background.canvas, diff --git a/packages/grafana-ui/.storybook/storybookTheme.ts b/packages/grafana-ui/.storybook/storybookTheme.ts index 3a95fb5df06..5cfadef84d1 100644 --- a/packages/grafana-ui/.storybook/storybookTheme.ts +++ b/packages/grafana-ui/.storybook/storybookTheme.ts @@ -31,7 +31,7 @@ const createStorybookTheme = (theme: GrafanaThemeV2) => { // Form colors inputBg: theme.components.input.background, - inputBorder: theme.components.input.border, + inputBorder: theme.components.input.borderColor, inputTextColor: theme.components.input.text, inputBorderRadius: theme.shape.borderRadius(1), diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx index 3b0e41b9722..2bd795ed4a7 100644 --- a/packages/grafana-ui/src/components/Alert/Alert.tsx +++ b/packages/grafana-ui/src/components/Alert/Alert.tsx @@ -80,7 +80,7 @@ const getStyles = (theme: GrafanaThemeV2, severity: AlertVariant, elevated?: boo flex-direction: row; align-items: stretch; background: ${theme.colors.background.secondary}; - box-shadow: ${elevated ? theme.shadows.z4 : theme.shadows.z1}; + box-shadow: ${elevated ? theme.shadows.z3 : theme.shadows.z1}; &:before { content: ''; diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx index bb23d2cbe63..efd5881da8b 100644 --- a/packages/grafana-ui/src/components/Button/Button.tsx +++ b/packages/grafana-ui/src/components/Button/Button.tsx @@ -172,7 +172,7 @@ function getButtonVariantStyles(theme: GrafanaThemeV2, color: ThemeRichColor): C '&:hover': { background: color.shade, color: color.contrastText, - boxShadow: theme.shadows.z2, + boxShadow: theme.shadows.z1, }, }; } diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx index 19feb619740..f9625404bef 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx @@ -34,7 +34,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, scrollableContent: boolean return { drawer: css` .drawer-content { - background-color: ${theme.colors.bodyBg}; + background-color: ${theme.colors.bg1}; display: flex; flex-direction: column; overflow: hidden; diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx index b5c37e8173f..8c170185ebe 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx @@ -75,7 +75,7 @@ const getStyles = (theme: GrafanaThemeV2) => { display: 'inline-flex', flexDirection: 'row', flexWrap: 'nowrap', - border: `1px solid ${theme.components.input.border}`, + border: `1px solid ${theme.components.input.borderColor}`, borderRadius: theme.shape.borderRadius(), padding: '2px', }), diff --git a/packages/grafana-ui/src/components/Forms/commonStyles.ts b/packages/grafana-ui/src/components/Forms/commonStyles.ts index 9dfadefbdd8..3fbe74bc5fb 100644 --- a/packages/grafana-ui/src/components/Forms/commonStyles.ts +++ b/packages/grafana-ui/src/components/Forms/commonStyles.ts @@ -10,7 +10,7 @@ export const getFocusStyle = (theme: GrafanaTheme) => css` `; export const sharedInputStyle = (theme: GrafanaThemeV2, invalid = false) => { - const borderColor = invalid ? theme.colors.error.border : theme.components.input.border; + const borderColor = invalid ? theme.colors.error.border : theme.components.input.borderColor; const borderColorHover = invalid ? theme.colors.error.shade : theme.components.input.borderHover; const background = theme.components.input.background; const textColor = theme.components.input.text; diff --git a/packages/grafana-ui/src/components/Menu/Menu.tsx b/packages/grafana-ui/src/components/Menu/Menu.tsx index cc249d9773f..333502506c7 100644 --- a/packages/grafana-ui/src/components/Menu/Menu.tsx +++ b/packages/grafana-ui/src/components/Menu/Menu.tsx @@ -31,11 +31,11 @@ const getStyles = (theme: GrafanaThemeV2) => { return { header: css` padding: ${theme.spacing(0.5, 0.5, 1, 0.5)}; - border-bottom: 1px solid ${theme.colors.border.medium}; + border-bottom: 1px solid ${theme.colors.border.weak}; `, wrapper: css` - background: ${theme.colors.background.secondary}; - box-shadow: ${theme.shadows.z2}; + background: ${theme.colors.background.primary}; + box-shadow: ${theme.shadows.z3}; display: inline-block; border-radius: ${theme.shape.borderRadius()}; `, diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts index ed545d11d1a..39431594dd5 100644 --- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts +++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts @@ -3,8 +3,7 @@ import { GrafanaThemeV2 } from '@grafana/data'; import { stylesFactory } from '../../themes'; export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => { - // rgba(1,4,9,0.8) - const backdropBackground = 'rgba(0, 0, 0, 0.5)'; + const backdropBackground = theme.isDark ? 'rgba(0, 0, 0, 0.27)' : 'rgba(208, 209, 211, 0.24)'; const borderRadius = theme.shape.borderRadius(2); return { @@ -12,7 +11,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => { position: fixed; z-index: ${theme.zIndex.modal}; background: ${theme.colors.background.primary}; - box-shadow: ${theme.shadows.z4}; + box-shadow: ${theme.shadows.z3}; border-radius: ${borderRadius}; background-clip: padding-box; outline: none; @@ -32,11 +31,11 @@ export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => { left: 0; z-index: ${theme.zIndex.modalBackdrop}; background-color: ${backdropBackground}; + backdrop-filter: blur(2px); `, modalHeader: css` label: modalHeader; background: ${theme.colors.background.secondary}; - border-bottom: 1px solid ${theme.colors.border.weak}; border-radius: ${borderRadius} ${borderRadius} 0 0; display: flex; height: 42px; @@ -64,10 +63,10 @@ export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => { padding-right: ${theme.spacing(1)}; `, modalContent: css` - padding: calc(${theme.spacing.gridSize} * 2); + padding: ${theme.spacing(2)}; overflow: auto; width: 100%; - max-height: calc(90vh - ${theme.spacing.gridSize} * 2); + max-height: calc(90vh - ${theme.spacing(2)}); `, }; }); diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts index 453a51a7348..b413b8b445c 100644 --- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts +++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts @@ -6,7 +6,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaThemeV2) => { return { menu: css` label: grafana-select-menu; - background: ${theme.colors.background.secondary}; + background: ${theme.components.dropdown.background}; box-shadow: ${theme.shadows.z3}; position: relative; min-width: 100%; diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx index 4ffe6497562..023031ba0fe 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.tsx @@ -104,7 +104,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaThemeV2, transparent?: bool border: none; border-radius: 50px; background: ${theme.components.input.background}; - border: 1px solid ${theme.components.input.border}; + border: 1px solid ${theme.components.input.borderColor}; transition: all 0.3s ease; &:hover { @@ -132,7 +132,7 @@ const getSwitchStyles = stylesFactory((theme: GrafanaThemeV2, transparent?: bool display: flex; align-items: center; background: ${transparent ? 'transparent' : theme.components.input.background}; - border: 1px solid ${transparent ? 'transparent' : theme.components.input.border}; + border: 1px solid ${transparent ? 'transparent' : theme.components.input.borderColor}; border-radius: ${theme.shape.borderRadius()}; `, }; diff --git a/packages/grafana-ui/src/components/TextArea/TextArea.tsx b/packages/grafana-ui/src/components/TextArea/TextArea.tsx index 1c44368e6c2..4665dfc7565 100644 --- a/packages/grafana-ui/src/components/TextArea/TextArea.tsx +++ b/packages/grafana-ui/src/components/TextArea/TextArea.tsx @@ -25,7 +25,7 @@ const getTextAreaStyle = stylesFactory((theme: GrafanaThemeV2, invalid = false) border-radius: ${theme.shape.borderRadius()}; padding: ${theme.spacing.gridSize / 4}px ${theme.spacing.gridSize}px; width: 100%; - border-color: ${invalid ? theme.colors.error.border : theme.components.input.border}; + border-color: ${invalid ? theme.colors.error.border : theme.components.input.borderColor}; ` ), }; diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx index 1b23ef334a2..af8fd633fd8 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx +++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx @@ -14,8 +14,8 @@ import { TimePickerFooter } from './TimePickerFooter'; const getStyles = stylesFactory((theme: GrafanaThemeV2, isReversed, hideQuickRanges, isContainerTall) => { return { container: css` - background: ${theme.colors.background.secondary}; - box-shadow: ${theme.shadows.z4}; + background: ${theme.colors.background.primary}; + box-shadow: ${theme.shadows.z3}; position: absolute; z-index: ${theme.zIndex.dropdown}; width: 546px; diff --git a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx index 9a04f9fb568..3edfeec3b92 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx +++ b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx @@ -3,12 +3,11 @@ import { Global } from '@emotion/react'; import { useTheme2 } from '..'; import { getElementStyles } from './elements'; import { getCardStyles } from './card'; +import { getAgularPanelStyles } from './angularPanelStyles'; /** @internal */ export function GlobalStyles() { const theme = useTheme2(); - const types = getElementStyles(theme); - const cards = getCardStyles(theme); - return ; + return ; } diff --git a/packages/grafana-ui/src/themes/GlobalStyles/angularPanelStyles.ts b/packages/grafana-ui/src/themes/GlobalStyles/angularPanelStyles.ts new file mode 100644 index 00000000000..593d3211bf6 --- /dev/null +++ b/packages/grafana-ui/src/themes/GlobalStyles/angularPanelStyles.ts @@ -0,0 +1,37 @@ +import { css } from '@emotion/react'; +import { GrafanaThemeV2 } from '@grafana/data'; + +export function getAgularPanelStyles(theme: GrafanaThemeV2) { + return css` + .panel-options-group { + border-bottom: 1px solid ${theme.colors.border.weak}; + } + + .panel-options-group__header { + padding: ${theme.spacing(1, 2, 1, 1)}; + position: relative; + display: flex; + align-items: center; + cursor: pointer; + font-weight: 500; + color: ${theme.colors.text.primary}; + + &:hover { + background: ${theme.colors.emphasize(theme.colors.background.primary, 0.03)}; + } + } + + .panel-options-group__icon { + color: ${theme.colors.text.secondary}; + margin-right: ${theme.spacing(1)}; + } + + .panel-options-group__title { + position: relative; + } + + .panel-options-group__body { + padding: ${theme.spacing(1, 2, 1, 4)}; + } + `; +} diff --git a/packages/grafana-ui/src/themes/GlobalStyles/card.tsx b/packages/grafana-ui/src/themes/GlobalStyles/card.ts similarity index 99% rename from packages/grafana-ui/src/themes/GlobalStyles/card.tsx rename to packages/grafana-ui/src/themes/GlobalStyles/card.ts index 74ce61c1ee6..57bf1daef0b 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/card.tsx +++ b/packages/grafana-ui/src/themes/GlobalStyles/card.ts @@ -1,5 +1,6 @@ import { css } from '@emotion/react'; import { GrafanaThemeV2 } from '@grafana/data'; + export function getCardStyles(theme: GrafanaThemeV2) { return css` .card-section { 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 4face888745..cf0d33d11e2 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -128,7 +128,7 @@ $hr-border-color: $dark-9; // Panel // ------------------------- $panel-bg: ${theme.components.panel.background}; -$panel-border: ${theme.components.panel.border}; +$panel-border: 1px solid ${theme.components.panel.borderColor}; $panel-header-hover-bg: ${theme.colors.action.hover}; $panel-box-shadow: ${theme.components.panel.boxShadow}; $panel-corner: $panel-bg; @@ -259,7 +259,7 @@ $side-menu-header-color: ${theme.v1.colors.text}; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: ${theme.colors.background.secondary}; +$menu-dropdown-bg: ${theme.colors.background.primary}; $menu-dropdown-hover-bg: ${theme.colors.action.hover}; $menu-dropdown-shadow: ${theme.shadows.z3}; @@ -290,11 +290,11 @@ $tooltipArrowColor: ${theme.colors.background.secondary}; $tooltipBackgroundError: ${theme.colors.error.main}; $tooltipShadow: ${theme.shadows.z2}; -$popover-bg: ${theme.colors.background.secondary}; +$popover-bg: ${theme.colors.background.primary}; $popover-color: ${theme.colors.text.primary}; -$popover-border-color: ${theme.colors.border.medium}; +$popover-border-color: ${theme.colors.border.weak}; $popover-header-bg: ${theme.colors.background.secondary}; -$popover-shadow: ${theme.shadows.z4}; +$popover-shadow: ${theme.shadows.z3}; $popover-help-bg: $tooltipBackground; $popover-help-color: $text-color; 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 953b393d1d1..9ff08670f03 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -123,7 +123,7 @@ $hr-border-color: $gray-4 !default; // Panel // ------------------------- $panel-bg: ${theme.components.panel.background}; -$panel-border: ${theme.components.panel.border}; +$panel-border: 1px solid ${theme.components.panel.borderColor}; $panel-header-hover-bg: ${theme.colors.action.hover}; $panel-box-shadow: ${theme.components.panel.boxShadow}; $panel-corner: $panel-bg; @@ -256,7 +256,7 @@ $side-menu-header-color: ${theme.v1.palette.gray95}; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: ${theme.colors.background.secondary}; +$menu-dropdown-bg: ${theme.colors.background.primary}; $menu-dropdown-hover-bg: ${theme.colors.action.hover}; $menu-dropdown-shadow: ${theme.shadows.z3}; @@ -282,11 +282,11 @@ $tooltipArrowColor: ${theme.colors.background.secondary}; $tooltipBackgroundError: ${theme.colors.error.main}; $tooltipShadow: ${theme.shadows.z2}; -$popover-bg: ${theme.colors.background.secondary}; +$popover-bg: ${theme.colors.background.primary}; $popover-color: ${theme.colors.text.primary}; -$popover-border-color: ${theme.colors.border.medium}; +$popover-border-color: ${theme.colors.border.weak}; $popover-header-bg: ${theme.colors.background.secondary}; -$popover-shadow: ${theme.shadows.z4}; +$popover-shadow: ${theme.shadows.z3}; $graph-tooltip-bg: $gray-5; diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx index aae7da48d89..f366f085665 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx @@ -161,7 +161,7 @@ const getStyles = (theme: GrafanaThemeV2) => ({ formBox: css` padding: ${theme.spacing(1)}; background: ${theme.colors.background.primary}; - border: 1px solid ${theme.components.panel.border}; + border: 1px solid ${theme.components.panel.borderColor}; border-bottom: none; `, closeButton: css` @@ -182,7 +182,7 @@ const getStyles = (theme: GrafanaThemeV2) => ({ `, mainBox: css` background: ${theme.colors.background.primary}; - border: 1px solid ${theme.components.panel.border}; + border: 1px solid ${theme.components.panel.borderColor}; border-top: none; flex-grow: 1; `, diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx index e0871916dda..b838ac1294c 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx @@ -92,7 +92,7 @@ const getStyles = (theme: GrafanaThemeV2) => { flex-grow: 1; min-height: 0; background: ${theme.colors.background.primary}; - border-right: 1px solid ${theme.components.panel.border}; + border-right: 1px solid ${theme.components.panel.borderColor}; `, }; }; diff --git a/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx b/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx index 48f04cfe1e6..1b8ad247be0 100644 --- a/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx +++ b/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx @@ -71,7 +71,7 @@ const getStyles = (theme: GrafanaThemeV2) => { cursor: pointer; background: ${theme.colors.background.secondary}; border-radius: ${theme.shape.borderRadius()}; - box-shadow: ${theme.shadows.z0}; + box-shadow: ${theme.shadows.z1}; align-items: center; padding: 8px; width: 100%; diff --git a/public/img/icons/mono/reusable-panel.svg b/public/img/icons/mono/reusable-panel.svg index 7dbd9a2c8e9..4cd65511bc3 100644 --- a/public/img/icons/mono/reusable-panel.svg +++ b/public/img/icons/mono/reusable-panel.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index f57e4b01961..ce796ac1906 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -131,9 +131,9 @@ $hr-border-color: $dark-9; // Panel // ------------------------- $panel-bg: #181b1f; -$panel-border: #181b1f; +$panel-border: 1px solid #181b1f; $panel-header-hover-bg: rgba(201, 209, 217, 0.08); -$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.15),0px 1px 3px 0px rgba(0,0,0,0.1); +$panel-box-shadow: 0px 1px 2px rgba(24, 26, 27, 0.75); $panel-corner: $panel-bg; // page header @@ -262,9 +262,9 @@ $side-menu-header-color: rgb(201, 209, 217); // Menu dropdowns // ------------------------- -$menu-dropdown-bg: #22252b; +$menu-dropdown-bg: #181b1f; $menu-dropdown-hover-bg: rgba(201, 209, 217, 0.08); -$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.15),0px 1px 10px 0px rgba(0,0,0,0.1); +$menu-dropdown-shadow: 0px 10px 20px #181A1B; // Tabs // ------------------------- @@ -291,13 +291,13 @@ $tooltipBackground: #22252b; $tooltipColor: rgb(201, 209, 217); $tooltipArrowColor: #22252b; $tooltipBackgroundError: #D10E5C; -$tooltipShadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.15),0px 1px 5px 0px rgba(0,0,0,0.1); +$tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.75); -$popover-bg: #22252b; +$popover-bg: #181b1f; $popover-color: rgb(201, 209, 217); -$popover-border-color: rgba(201, 209, 217, 0.15); +$popover-border-color: rgba(201, 209, 217, 0.10); $popover-header-bg: #22252b; -$popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.15),0px 3px 14px 2px rgba(0,0,0,0.1); +$popover-shadow: 0px 10px 20px #181A1B; $popover-help-bg: $tooltipBackground; $popover-help-color: $text-color; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index d8942f50e8b..2b421dc0304 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -125,9 +125,9 @@ $hr-border-color: $gray-4 !default; // Panel // ------------------------- $panel-bg: #fff; -$panel-border: #fff; +$panel-border: 1px solid #fff; $panel-header-hover-bg: rgba(36, 41, 46, 0.04); -$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.15),0px 0px 0px 0px rgba(0,0,0,0.1),0px 1px 3px 0px rgba(0,0,0,0.1); +$panel-box-shadow: 0px 1px 2px rgba(24, 26, 27, 0.2); $panel-corner: $panel-bg; // Page header @@ -258,9 +258,9 @@ $side-menu-header-color: #e9edf2; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: #F4F5F5; +$menu-dropdown-bg: #fff; $menu-dropdown-hover-bg: rgba(36, 41, 46, 0.04); -$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.15),0px 4px 5px 0px rgba(0,0,0,0.1),0px 1px 10px 0px rgba(0,0,0,0.1); +$menu-dropdown-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18); // Tabs // ------------------------- @@ -282,13 +282,13 @@ $tooltipBackground: #F4F5F5; $tooltipColor: rgba(36, 41, 46, 1); $tooltipArrowColor: #F4F5F5; $tooltipBackgroundError: #E0226E; -$tooltipShadow: 0px 2px 1px -2px rgba(0,0,0,0.15),0px 2px 2px 0px rgba(0,0,0,0.1),0px 1px 5px 0px rgba(0,0,0,0.1); +$tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.2); -$popover-bg: #F4F5F5; +$popover-bg: #fff; $popover-color: rgba(36, 41, 46, 1); -$popover-border-color: rgba(36, 41, 46, 0.30); +$popover-border-color: rgba(36, 41, 46, 0.12); $popover-header-bg: #F4F5F5; -$popover-shadow: 0px 5px 5px -5px rgba(0,0,0,0.15),0px 8px 10px 1px rgba(0,0,0,0.1),0px 3px 14px 2px rgba(0,0,0,0.1); +$popover-shadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18); $graph-tooltip-bg: $gray-5; diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index b193e1ad797..3f18767fb0e 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -16,39 +16,3 @@ left: 0 !important; } } - -/* Used by old angular panels */ -.panel-options-group { - border-bottom: 1px solid $divider; -} - -.panel-options-group__header { - padding: 8px 16px 8px 8px; - position: relative; - display: flex; - align-items: center; - cursor: pointer; - font-weight: 500; - color: $text-color-semi-weak; - - &:hover { - color: $text-color; - - .panel-options-group__icon { - color: $text-color; - } - } -} - -.panel-options-group__icon { - color: $text-color-weak; - margin-right: 8px; -} - -.panel-options-group__title { - position: relative; -} - -.panel-options-group__body { - padding: 8px 16px 16px 32px; -} diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index 82f9397d5e9..2051e84080d 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -236,7 +236,7 @@ position: relative; top: -3px; padding: $space-xxs; - font-weight: bold; + font-weight: $font-weight-semi-bold; color: $text-color; } @@ -245,7 +245,7 @@ &--highlight { color: $text-color-emphasis; - font-weight: bold; + font-weight: $font-weight-semi-bold; } } @@ -259,7 +259,7 @@ .graph-tooltip-value { display: table-cell; - font-weight: bold; + font-weight: $font-weight-semi-bold; padding-left: 15px; text-align: right; }