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
2025-01-16 11:42:35 -06:00 · 2020-04-05 20:02:52 +02:00 · 2020-04-05 20:02:52 +02:00 · 2106f0afc6
commit 2106f0afc6
parent 09bcdc1020
21 changed files with 74 additions and 64 deletions
--- 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;
--- 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 {
--- 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}`;
--- 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;
--- 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",
--- 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
--- 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;
--- 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;

--- 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,
--- 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"
                  >
                    <li
-                      className="css-1aiaexb"
+                      className="css-1lu9djy"
                      onClick={[Function]}
                    >
                      <i
--- a/public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx
@ -11,7 +11,7 @@ interface Props {
 export const OptionsGroup: FC<Props> = ({ title, children, defaultToClosed }) => {
  const [isExpanded, toggleExpand] = useState(defaultToClosed ? false : true);
  const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = getStyles(theme, isExpanded);

  return (
    <div className={styles.box}>
@ -26,7 +26,7 @@ export const OptionsGroup: FC<Props> = ({ 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 {
--- 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 => {
    <div className="gf-form">
      {props.variable.hide === VariableHide.dontHide && (
        <label
-          className="gf-form-label template-variable"
+          className="gf-form-label gf-form-label--variable"
          aria-label={e2e.pages.Dashboard.SubMenu.selectors.submenuItemLabels(labelOrName)}
        >
          {labelOrName}
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@ -93,7 +93,7 @@ $body-bg: #0b0c0e;
 $page-bg: #141619;

 $body-color: #d8d9da;
-$text-color: #d8d9da;
+$text-color: #c7d0d9;
 $text-color-strong: #ffffff;
 $text-color-weak: #8e8e8e;
 $text-color-faint: #222426;
@ -207,13 +207,13 @@ $input-bg: $input-black;
 $input-bg-disabled: $dark-6;

 $input-color: #c7d0d9;
-$input-border-color: $dark-6;
+$input-border-color: #202226;
 $input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
-$input-border-focus: $dark-6 !default;
+$input-border-focus: #5794f2;
 $input-box-shadow-focus: $blue-light !default;
 $input-color-placeholder: #555555;
-$input-label-bg: $gray-blue;
-$input-label-border-color: $dark-6;
+$input-label-bg: #202226;
+$input-label-border-color: #202226;
 $input-color-select-arrow: $white;

 // Search
--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@ -152,8 +152,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: 8px;
-$input-height: 35px !default;
+$input-padding: 0 8px;
+$input-height: 32px !default;

 $cursor-disabled: not-allowed !default;

--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@ -198,15 +198,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: #343b40;
+$input-border-color: #e9edf2;
 $input-box-shadow: none;
-$input-border-focus: $gray-5 !default;
-$input-box-shadow-focus: $blue-light !default;
+$input-border-focus: #5794f2;
+$input-box-shadow-focus: #5794f2;
 $input-color-placeholder: #9fa7b3;
-$input-label-bg: $gray-5;
-$input-label-border-color: $gray-5;
-$input-color-select-arrow: $gray-1;
+$input-label-bg: #e9edf2;
+$input-label-border-color: #e9edf2;
+$input-color-select-arrow: #7b8087;

 // search
 $search-shadow: 0 1px 5px 0 $gray-5;
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@ -102,13 +102,14 @@ $input-border: 1px solid $input-border-color;
 }

 .gf-form-label {
+  display: flex;
+  align-items: center;
  padding: $input-padding;
  flex-shrink: 0;
  font-weight: $font-weight-semi-bold;
  font-size: $font-size-sm;

  background-color: $input-label-bg;
-  display: block;
  height: $input-height;

  border: $border-width solid $input-label-border-color;
@ -130,6 +131,13 @@ $input-border: 1px solid $input-border-color;
    padding-left: 0px;
  }

+  &--variable {
+    color: $variable;
+    background: $panel-bg;
+    border: $panel-border;
+    border-right: none;
+  }
+
  &--btn {
    border-right: $border-width solid $input-label-border-color;
    border-radius: $border-radius;
--- a/public/sass/components/_query_editor.scss
+++ b/public/sass/components/_query_editor.scss
@ -30,6 +30,15 @@
    margin-right: 2px;
  }

+  .gf-form-label {
+    border-right: 1px solid $input-border-color;
+    border-radius: $border-radius;
+  }
+
+  .gf-form-input {
+    border-radius: $border-radius;
+  }
+
  .gf-form + .gf-form {
    margin-left: 0;
  }
@ -137,7 +146,7 @@ input[type='text'].tight-form-func-param {
  padding: 4px 0px 4px 8px;
  position: relative;
  height: 35px;
-  background: $page-bg;
+  background: $input-label-bg;
  flex-wrap: nowrap;
  align-items: center;
 }
--- a/public/sass/components/_slate_editor.scss
+++ b/public/sass/components/_slate_editor.scss
@ -8,7 +8,7 @@
 .slate-query-field__wrapper {
  position: relative;
  display: inline-block;
-  padding: $input-padding;
+  padding: 6px 8px;
  min-height: $input-height;
  width: 100%;
  cursor: text;
--- a/public/sass/components/_submenu.scss
+++ b/public/sass/components/_submenu.scss
@ -28,19 +28,18 @@

  .fa-caret-down {
    font-size: 75%;
-    position: relative;
-    top: -1px;
-    left: 1px;
+    padding-left: 8px;
  }
 }

 .variable-value-link {
  padding-right: 10px;
-  padding: $space-sm;
+  padding: 0 $space-sm;
  background-color: $input-bg;
  border: 1px solid $input-border-color;
  border-radius: $input-border-radius;
-  display: inline-block;
+  display: flex;
+  align-items: center;
  color: $text-color;
  height: $input-height;

--- a/public/sass/mixins/_forms.scss
+++ b/public/sass/mixins/_forms.scss
@ -34,8 +34,6 @@
  &:focus {
    border-color: $input-border-focus;
    outline: none;
-    $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 5px $input-box-shadow-focus;
-    @include box-shadow($shadow);
  }
 }

--- a/public/sass/pages/_dashboard.scss
+++ b/public/sass/pages/_dashboard.scss
@ -5,10 +5,6 @@
  box-sizing: border-box;
 }

-.template-variable {
-  color: $variable;
-}
-
 div.flot-text {
  color: $text-color !important;
 }