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

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;

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 {

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 textColor = theme.isLight ? c.gray33 : c.gray70;
-  const textColorHover = stv({ light: c.blueShade, dark: c.blueLight }, theme.type);
+  const textColorHover = theme.isLight ? c.blueShade : c.blueLight;
-  const textColorActive = stv({ light: c.blueShade, dark: c.blueLight }, theme.type);
+  const textColorActive = theme.isLight ? c.blueShade : c.blueLight;
-  const borderColor = stv({ light: c.gray4, dark: c.gray25 }, theme.type);
+  const borderColor = theme.isLight ? c.gray4 : c.gray25;
-  const borderColorHover = stv({ light: c.gray70, dark: c.gray33 }, theme.type);
+  const borderColorHover = theme.isLight ? c.gray70 : c.gray33;
-  const borderColorActive = stv({ light: c.blueShade, dark: c.blueLight }, theme.type);
+  const borderColorActive = theme.isLight ? c.blueShade : c.blueLight;
-  const bg = stv({ light: c.gray98, dark: c.gray10 }, theme.type);
+  const bg = c.pageBg;
-  const bgDisabled = stv({ light: c.gray95, dark: c.gray15 }, theme.type);
+  const bgDisabled = theme.isLight ? c.gray95 : c.gray15;
-  const bgActive = stv({ light: c.white, dark: c.gray05 }, theme.type);
+  const bgActive = theme.isLight ? c.white : c.gray05;
 
   const border = `1px solid ${borderColor}`;
   const borderActive = `1px solid ${borderColorActive}`;

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;

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",

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-bg: ${theme.colors.gray15};
-$input-label-border-color: $dark-6;
+$input-label-border-color: ${theme.colors.gray15};
 $input-color-select-arrow: $white;
 
 // Search

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-color: ${theme.colors.formInputText};
-$input-border-color: $gray-5;
+$input-border-color: ${theme.colors.gray95};
 $input-box-shadow: none;
-$input-border-focus: $gray-5 !default;
+$input-border-focus: ${theme.colors.blue95};
-$input-box-shadow-focus: $blue-light !default;
+$input-box-shadow-focus: ${theme.colors.blue95};
 $input-color-placeholder: ${theme.colors.formInputPlaceholderText};
-$input-label-bg: $gray-5;
+$input-label-bg: ${theme.colors.gray95};
-$input-label-border-color: $gray-5;
+$input-label-border-color: ${theme.colors.gray95};
-$input-color-select-arrow: $gray-1;
+$input-color-select-arrow: ${theme.colors.gray60};
 
 // search
 $search-shadow: 0 1px 5px 0 $gray-5;

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-padding: 0 ${theme.spacing.sm};
-$input-height: 35px !default;
+$input-height: 32px !default;
 
 $cursor-disabled: not-allowed !default;
 

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,

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

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 {

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}

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-bg: #202226;
-$input-label-border-color: $dark-6;
+$input-label-border-color: #202226;
 $input-color-select-arrow: $white;
 
 // Search

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-padding: 0 8px;
-$input-height: 35px !default;
+$input-height: 32px !default;
 
 $cursor-disabled: not-allowed !default;
 

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-color: #343b40;
-$input-border-color: $gray-5;
+$input-border-color: #e9edf2;
 $input-box-shadow: none;
-$input-border-focus: $gray-5 !default;
+$input-border-focus: #5794f2;
-$input-box-shadow-focus: $blue-light !default;
+$input-box-shadow-focus: #5794f2;
 $input-color-placeholder: #9fa7b3;
-$input-label-bg: $gray-5;
+$input-label-bg: #e9edf2;
-$input-label-border-color: $gray-5;
+$input-label-border-color: #e9edf2;
-$input-color-select-arrow: $gray-1;
+$input-color-select-arrow: #7b8087;
 
 // search
 $search-shadow: 0 1px 5px 0 $gray-5;

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;

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;
 }

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;

public/sass/components/_submenu.scss

@@ -28,19 +28,18 @@
 
   .fa-caret-down {
     font-size: 75%;
-    position: relative;
+    padding-left: 8px;
-    top: -1px;
-    left: 1px;
   }
 }
 
 .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;
 

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);
   }
 }
 

public/sass/pages/_dashboard.scss

@@ -5,10 +5,6 @@
   box-sizing: border-box;
 }
 
-.template-variable {
-  color: $variable;
-}
-
 div.flot-text {
   color: $text-color !important;
 }