From 2106f0afc631769cff5641c8791dfb262a25c1ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 5 Apr 2020 20:02:52 +0200 Subject: [PATCH] Theme: Updates gf-form & form-field to better match new form styles (#23345) * Theme: Updates old gf-form-styles * Removed margin buttom * updated * updated * This will take some time * More style tweaks to both light and dark theme * Minor change * Tweaked table styles --- .../src/components/FormField/_FormField.scss | 1 - .../Forms/Legacy/Select/_Select.scss | 4 ++-- .../Forms/RadioButtonGroup/RadioButton.tsx | 20 +++++++++---------- .../grafana-ui/src/components/Table/styles.ts | 6 +++--- .../__snapshots__/TimePicker.test.tsx.snap | 4 ++-- .../src/themes/_variables.dark.scss.tmpl.ts | 8 ++++---- .../src/themes/_variables.light.scss.tmpl.ts | 14 ++++++------- .../src/themes/_variables.scss.tmpl.ts | 4 ++-- packages/grafana-ui/src/themes/dark.ts | 2 +- .../__snapshots__/ServerStats.test.tsx.snap | 2 +- .../components/PanelEditor/OptionsGroup.tsx | 5 +++-- .../variables/pickers/PickerRenderer.tsx | 2 +- public/sass/_variables.dark.generated.scss | 10 +++++----- public/sass/_variables.generated.scss | 4 ++-- public/sass/_variables.light.generated.scss | 14 ++++++------- public/sass/components/_gf-form.scss | 10 +++++++++- public/sass/components/_query_editor.scss | 11 +++++++++- public/sass/components/_slate_editor.scss | 2 +- public/sass/components/_submenu.scss | 9 ++++----- public/sass/mixins/_forms.scss | 2 -- public/sass/pages/_dashboard.scss | 4 ---- 21 files changed, 74 insertions(+), 64 deletions(-) diff --git a/packages/grafana-ui/src/components/FormField/_FormField.scss b/packages/grafana-ui/src/components/FormField/_FormField.scss index 4d6d18a6ccd..9c9b3deef9c 100644 --- a/packages/grafana-ui/src/components/FormField/_FormField.scss +++ b/packages/grafana-ui/src/components/FormField/_FormField.scss @@ -1,5 +1,4 @@ .form-field { - margin-bottom: $space-xxs; display: flex; flex-direction: row; align-items: flex-start; 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 671d80841a8..a78e134f744 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss +++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss @@ -1,4 +1,4 @@ -$select-input-height: 35px; +$select-input-height: 32px; $select-input-bg-disabled: $input-bg-disabled; @mixin select-control() { @@ -122,7 +122,7 @@ $select-input-bg-disabled: $input-bg-disabled; .gf-form-select-box__value-container { display: inline-block; - padding: 8px 16px 8px 10px; + padding: 6px 16px 6px 10px; vertical-align: middle; > div { diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx index 3fd8be33805..eda06533019 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { useTheme, stylesFactory, selectThemeVariant as stv } from '../../../themes'; +import { useTheme, stylesFactory } from '../../../themes'; import { GrafanaTheme } from '@grafana/data'; import { css, cx } from 'emotion'; import { getFocusCss, getPropertiesForButtonSize } from '../commonStyles'; @@ -21,15 +21,15 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt const horizontalPadding = theme.spacing[size] ?? theme.spacing.md; const c = theme.colors; - const textColor = stv({ light: c.gray33, dark: c.gray70 }, theme.type); - const textColorHover = stv({ light: c.blueShade, dark: c.blueLight }, theme.type); - const textColorActive = stv({ light: c.blueShade, dark: c.blueLight }, theme.type); - const borderColor = stv({ light: c.gray4, dark: c.gray25 }, theme.type); - const borderColorHover = stv({ light: c.gray70, dark: c.gray33 }, theme.type); - const borderColorActive = stv({ light: c.blueShade, dark: c.blueLight }, theme.type); - const bg = stv({ light: c.gray98, dark: c.gray10 }, theme.type); - const bgDisabled = stv({ light: c.gray95, dark: c.gray15 }, theme.type); - const bgActive = stv({ light: c.white, dark: c.gray05 }, theme.type); + const textColor = theme.isLight ? c.gray33 : c.gray70; + const textColorHover = theme.isLight ? c.blueShade : c.blueLight; + const textColorActive = theme.isLight ? c.blueShade : c.blueLight; + const borderColor = theme.isLight ? c.gray4 : c.gray25; + const borderColorHover = theme.isLight ? c.gray70 : c.gray33; + const borderColorActive = theme.isLight ? c.blueShade : c.blueLight; + const bg = c.pageBg; + const bgDisabled = theme.isLight ? c.gray95 : c.gray15; + const bgActive = theme.isLight ? c.white : c.gray05; const border = `1px solid ${borderColor}`; const borderActive = `1px solid ${borderColorActive}`; diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts index 25c7587a67b..2e98877434d 100644 --- a/packages/grafana-ui/src/components/Table/styles.ts +++ b/packages/grafana-ui/src/components/Table/styles.ts @@ -1,6 +1,6 @@ import { css } from 'emotion'; import { GrafanaTheme } from '@grafana/data'; -import { stylesFactory, selectThemeVariant as stv } from '../../themes'; +import { stylesFactory } from '../../themes'; export interface TableStyles { cellHeight: number; @@ -18,7 +18,7 @@ export interface TableStyles { export const getTableStyles = stylesFactory( (theme: GrafanaTheme): TableStyles => { const colors = theme.colors; - const headerBg = stv({ light: colors.gray6, dark: colors.dark7 }, theme.type); + const headerBg = theme.isLight ? colors.gray98 : colors.gray15; const padding = 6; const lineHeight = theme.typography.lineHeight.md; const bodyFontSize = 14; @@ -50,7 +50,7 @@ export const getTableStyles = stylesFactory( `, row: css` label: row; - border-bottom: 2px solid ${colors.bodyBg}; + border-bottom: 1px solid ${headerBg}; `, tableCell: css` padding: ${padding}px 10px; diff --git a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap index 6fe2d63d5db..a3ed1fd8fda 100644 --- a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap +++ b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap @@ -168,7 +168,7 @@ exports[`TimePicker renders buttons correctly 1`] = ` "red88": "#e02f44", "redBase": "#e02f44", "redShade": "#c4162a", - "text": "#d8d9da", + "text": "#c7d0d9", "textEmphasis": "#ececec", "textFaint": "#222426", "textStrong": "#ffffff", @@ -478,7 +478,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "red88": "#e02f44", "redBase": "#e02f44", "redShade": "#c4162a", - "text": "#d8d9da", + "text": "#c7d0d9", "textEmphasis": "#ececec", "textFaint": "#222426", "textStrong": "#ffffff", 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 67c8b7f1be8..cbaf7740d40 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -204,13 +204,13 @@ $input-bg: $input-black; $input-bg-disabled: $dark-6; $input-color: ${theme.colors.formInputText}; -$input-border-color: $dark-6; +$input-border-color: ${theme.colors.gray15}; $input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1); -$input-border-focus: $dark-6 !default; +$input-border-focus: ${theme.colors.blue95}; $input-box-shadow-focus: $blue-light !default; $input-color-placeholder: ${theme.colors.formInputPlaceholderText}; -$input-label-bg: $gray-blue; -$input-label-border-color: $dark-6; +$input-label-bg: ${theme.colors.gray15}; +$input-label-border-color: ${theme.colors.gray15}; $input-color-select-arrow: $white; // Search 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 9e0d0be289e..351a518dee9 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -195,15 +195,15 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6); $input-bg: $white; $input-bg-disabled: $gray-5; -$input-color: $dark-2; -$input-border-color: $gray-5; +$input-color: ${theme.colors.formInputText}; +$input-border-color: ${theme.colors.gray95}; $input-box-shadow: none; -$input-border-focus: $gray-5 !default; -$input-box-shadow-focus: $blue-light !default; +$input-border-focus: ${theme.colors.blue95}; +$input-box-shadow-focus: ${theme.colors.blue95}; $input-color-placeholder: ${theme.colors.formInputPlaceholderText}; -$input-label-bg: $gray-5; -$input-label-border-color: $gray-5; -$input-color-select-arrow: $gray-1; +$input-label-bg: ${theme.colors.gray95}; +$input-label-border-color: ${theme.colors.gray95}; +$input-color-select-arrow: ${theme.colors.gray60}; // search $search-shadow: 0 1px 5px 0 $gray-5; diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 392336aaf66..9f590f6c2e9 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -149,8 +149,8 @@ $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default; $label-border-radius: $border-radius 0 0 $border-radius !default; $label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default; -$input-padding: ${theme.spacing.sm}; -$input-height: 35px !default; +$input-padding: 0 ${theme.spacing.sm}; +$input-height: 32px !default; $cursor-disabled: not-allowed !default; diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index c0ca4864c73..1a637d80745 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -64,7 +64,7 @@ const darkTheme: GrafanaTheme = { bodyBg: basicColors.gray05, pageBg: basicColors.gray10, body: basicColors.gray4, - text: basicColors.gray4, + text: basicColors.gray85, textStrong: basicColors.white, textWeak: basicColors.gray2, textEmphasis: basicColors.gray5, diff --git a/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap b/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap index 97f8e5faff0..28b04ffd653 100644 --- a/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap +++ b/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap @@ -100,7 +100,7 @@ exports[`ServerStats Should render table with stats 1`] = ` className="css-payll4" >
  • = ({ title, children, defaultToClosed }) => { const [isExpanded, toggleExpand] = useState(defaultToClosed ? false : true); const theme = useTheme(); - const styles = getStyles(theme); + const styles = getStyles(theme, isExpanded); return (
    @@ -26,7 +26,7 @@ export const OptionsGroup: FC = ({ title, children, defaultToClosed }) => ); }; -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = stylesFactory((theme: GrafanaTheme, isExpanded: boolean) => { return { box: css` border-bottom: 1px solid ${theme.colors.pageHeaderBorder}; @@ -41,6 +41,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { justify-content: space-between; align-items: center; padding: ${theme.spacing.sm} ${theme.spacing.md}; + color: ${isExpanded ? theme.colors.text : theme.colors.formLabel}; font-weight: ${theme.typography.weight.semibold}; &:hover { diff --git a/public/app/features/variables/pickers/PickerRenderer.tsx b/public/app/features/variables/pickers/PickerRenderer.tsx index aa5d78316bf..2592147ba25 100644 --- a/public/app/features/variables/pickers/PickerRenderer.tsx +++ b/public/app/features/variables/pickers/PickerRenderer.tsx @@ -19,7 +19,7 @@ export const PickerRenderer: FunctionComponent = props => {
    {props.variable.hide === VariableHide.dontHide && (