Skip to content

N
nexpie-grafana-theme
Commit 2106f0af by Torkel Ödegaard Committed by GitHub
Options

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
parent 09bcdc10
Showing with 74 additions and 64 deletions
packages/grafana-ui/src/components/FormField/_FormField.scss
.form-field { .form-field {
margin-bottom: $space-xxs;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
......
packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss
$select-input-height: 35px; $select-input-height: 32px;
$select-input-bg-disabled: $input-bg-disabled; $select-input-bg-disabled: $input-bg-disabled;
@mixin select-control() { @mixin select-control() {
...@@ -122,7 +122,7 @@ $select-input-bg-disabled: $input-bg-disabled; ...@@ -122,7 +122,7 @@ $select-input-bg-disabled: $input-bg-disabled;
.gf-form-select-box__value-container { .gf-form-select-box__value-container {
display: inline-block; display: inline-block;
padding: 8px 16px 8px 10px; padding: 6px 16px 6px 10px;
vertical-align: middle; vertical-align: middle;
> div { > div {
......
packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
import React from 'react'; import React from 'react';
import { useTheme, stylesFactory, selectThemeVariant as stv } from '../../../themes'; import { useTheme, stylesFactory } from '../../../themes';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme } from '@grafana/data';
import { css, cx } from 'emotion'; import { css, cx } from 'emotion';
import { getFocusCss, getPropertiesForButtonSize } from '../commonStyles'; import { getFocusCss, getPropertiesForButtonSize } from '../commonStyles';
...@@ -21,15 +21,15 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt ...@@ -21,15 +21,15 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
const horizontalPadding = theme.spacing[size] ?? theme.spacing.md; const horizontalPadding = theme.spacing[size] ?? theme.spacing.md;
const c = theme.colors; 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 border = `1px solid ${borderColor}`;
const borderActive = `1px solid ${borderColorActive}`; const borderActive = `1px solid ${borderColorActive}`;
......
packages/grafana-ui/src/components/Table/styles.ts
import { css } from 'emotion'; import { css } from 'emotion';
import { GrafanaTheme } from '@grafana/data'; import { GrafanaTheme } from '@grafana/data';
import { stylesFactory, selectThemeVariant as stv } from '../../themes'; import { stylesFactory } from '../../themes';
export interface TableStyles { export interface TableStyles {
cellHeight: number; cellHeight: number;
...@@ -18,7 +18,7 @@ export interface TableStyles { ...@@ -18,7 +18,7 @@ export interface TableStyles {
export const getTableStyles = stylesFactory( export const getTableStyles = stylesFactory(
(theme: GrafanaTheme): TableStyles => { (theme: GrafanaTheme): TableStyles => {
const colors = theme.colors; 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 padding = 6;
const lineHeight = theme.typography.lineHeight.md; const lineHeight = theme.typography.lineHeight.md;
const bodyFontSize = 14; const bodyFontSize = 14;
...@@ -50,7 +50,7 @@ export const getTableStyles = stylesFactory( ...@@ -50,7 +50,7 @@ export const getTableStyles = stylesFactory(
`, `,
row: css` row: css`
label: row; label: row;
border-bottom: 2px solid ${colors.bodyBg}; border-bottom: 1px solid ${headerBg};
`, `,
tableCell: css` tableCell: css`
padding: ${padding}px 10px; 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`] = ` ...@@ -168,7 +168,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
"red88": "#e02f44", "red88": "#e02f44",
"redBase": "#e02f44", "redBase": "#e02f44",
"redShade": "#c4162a", "redShade": "#c4162a",
"text": "#d8d9da", "text": "#c7d0d9",
"textEmphasis": "#ececec", "textEmphasis": "#ececec",
"textFaint": "#222426", "textFaint": "#222426",
"textStrong": "#ffffff", "textStrong": "#ffffff",
...@@ -478,7 +478,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` ...@@ -478,7 +478,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"red88": "#e02f44", "red88": "#e02f44",
"redBase": "#e02f44", "redBase": "#e02f44",
"redShade": "#c4162a", "redShade": "#c4162a",
"text": "#d8d9da", "text": "#c7d0d9",
"textEmphasis": "#ececec", "textEmphasis": "#ececec",
"textFaint": "#222426", "textFaint": "#222426",
"textStrong": "#ffffff", "textStrong": "#ffffff",
......
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
...@@ -204,13 +204,13 @@ $input-bg: $input-black; ...@@ -204,13 +204,13 @@ $input-bg: $input-black;
$input-bg-disabled: $dark-6; $input-bg-disabled: $dark-6;
$input-color: ${theme.colors.formInputText}; $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-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-box-shadow-focus: $blue-light !default;
$input-color-placeholder: ${theme.colors.formInputPlaceholderText}; $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; $input-color-select-arrow: $white;
// Search // 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); ...@@ -195,15 +195,15 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
$input-bg: $white; $input-bg: $white;
$input-bg-disabled: $gray-5; $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-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-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
$search-shadow: 0 1px 5px 0 $gray-5; $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; ...@@ -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: $border-radius 0 0 $border-radius !default;
$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !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; $cursor-disabled: not-allowed !default;
......
packages/grafana-ui/src/themes/dark.ts
...@@ -64,7 +64,7 @@ const darkTheme: GrafanaTheme = { ...@@ -64,7 +64,7 @@ const darkTheme: GrafanaTheme = {
bodyBg: basicColors.gray05, bodyBg: basicColors.gray05,
pageBg: basicColors.gray10, pageBg: basicColors.gray10,
body: basicColors.gray4, body: basicColors.gray4,
text: basicColors.gray4, text: basicColors.gray85,
textStrong: basicColors.white, textStrong: basicColors.white,
textWeak: basicColors.gray2, textWeak: basicColors.gray2,
textEmphasis: basicColors.gray5, textEmphasis: basicColors.gray5,
......
public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap
...@@ -100,7 +100,7 @@ exports[`ServerStats Should render table with stats 1`] = ` ...@@ -100,7 +100,7 @@ exports[`ServerStats Should render table with stats 1`] = `
className="css-payll4" className="css-payll4"
> >
<li <li
className="css-1aiaexb" className="css-1lu9djy"
onClick={[Function]} onClick={[Function]}
> >
<i <i
......
public/app/features/dashboard/components/PanelEditor/OptionsGroup.tsx
...@@ -11,7 +11,7 @@ interface Props { ...@@ -11,7 +11,7 @@ interface Props {
export const OptionsGroup: FC<Props> = ({ title, children, defaultToClosed }) => { export const OptionsGroup: FC<Props> = ({ title, children, defaultToClosed }) => {
const [isExpanded, toggleExpand] = useState(defaultToClosed ? false : true); const [isExpanded, toggleExpand] = useState(defaultToClosed ? false : true);
const theme = useTheme(); const theme = useTheme();
const styles = getStyles(theme); const styles = getStyles(theme, isExpanded);
return ( return (
<div className={styles.box}> <div className={styles.box}>
...@@ -26,7 +26,7 @@ export const OptionsGroup: FC<Props> = ({ title, children, defaultToClosed }) => ...@@ -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 { return {
box: css` box: css`
border-bottom: 1px solid ${theme.colors.pageHeaderBorder}; border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
...@@ -41,6 +41,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -41,6 +41,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: ${theme.spacing.sm} ${theme.spacing.md}; padding: ${theme.spacing.sm} ${theme.spacing.md};
color: ${isExpanded ? theme.colors.text : theme.colors.formLabel};
font-weight: ${theme.typography.weight.semibold}; font-weight: ${theme.typography.weight.semibold};
&:hover { &:hover {
......
public/app/features/variables/pickers/PickerRenderer.tsx
...@@ -19,7 +19,7 @@ export const PickerRenderer: FunctionComponent<Props> = props => { ...@@ -19,7 +19,7 @@ export const PickerRenderer: FunctionComponent<Props> = props => {
<div className="gf-form"> <div className="gf-form">
{props.variable.hide === VariableHide.dontHide && ( {props.variable.hide === VariableHide.dontHide && (
<label <label
className="gf-form-label template-variable" className="gf-form-label gf-form-label--variable"
aria-label={e2e.pages.Dashboard.SubMenu.selectors.submenuItemLabels(labelOrName)} aria-label={e2e.pages.Dashboard.SubMenu.selectors.submenuItemLabels(labelOrName)}
> >
{labelOrName} {labelOrName}
......
public/sass/_variables.dark.generated.scss
...@@ -93,7 +93,7 @@ $body-bg: #0b0c0e; ...@@ -93,7 +93,7 @@ $body-bg: #0b0c0e;
$page-bg: #141619; $page-bg: #141619;
$body-color: #d8d9da; $body-color: #d8d9da;
$text-color: #d8d9da; $text-color: #c7d0d9;
$text-color-strong: #ffffff; $text-color-strong: #ffffff;
$text-color-weak: #8e8e8e; $text-color-weak: #8e8e8e;
$text-color-faint: #222426; $text-color-faint: #222426;
...@@ -207,13 +207,13 @@ $input-bg: $input-black; ...@@ -207,13 +207,13 @@ $input-bg: $input-black;
$input-bg-disabled: $dark-6; $input-bg-disabled: $dark-6;
$input-color: #c7d0d9; $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-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-box-shadow-focus: $blue-light !default;
$input-color-placeholder: #555555; $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; $input-color-select-arrow: $white;
// Search // Search
......
public/sass/_variables.generated.scss
...@@ -152,8 +152,8 @@ $input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default; ...@@ -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: $border-radius 0 0 $border-radius !default;
$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !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; $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); ...@@ -198,15 +198,15 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
$input-bg: $white; $input-bg: $white;
$input-bg-disabled: $gray-5; $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-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-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
$search-shadow: 0 1px 5px 0 $gray-5; $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; ...@@ -102,13 +102,14 @@ $input-border: 1px solid $input-border-color;
} }
.gf-form-label { .gf-form-label {
display: flex;
align-items: center;
padding: $input-padding; padding: $input-padding;
flex-shrink: 0; flex-shrink: 0;
font-weight: $font-weight-semi-bold; font-weight: $font-weight-semi-bold;
font-size: $font-size-sm; font-size: $font-size-sm;
background-color: $input-label-bg; background-color: $input-label-bg;
display: block;
height: $input-height; height: $input-height;
border: $border-width solid $input-label-border-color; border: $border-width solid $input-label-border-color;
...@@ -130,6 +131,13 @@ $input-border: 1px solid $input-border-color; ...@@ -130,6 +131,13 @@ $input-border: 1px solid $input-border-color;
padding-left: 0px; padding-left: 0px;
} }
&--variable {
color: $variable;
background: $panel-bg;
border: $panel-border;
border-right: none;
}
&--btn { &--btn {
border-right: $border-width solid $input-label-border-color; border-right: $border-width solid $input-label-border-color;
border-radius: $border-radius; border-radius: $border-radius;
......
public/sass/components/_query_editor.scss
...@@ -30,6 +30,15 @@ ...@@ -30,6 +30,15 @@
margin-right: 2px; 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 { .gf-form + .gf-form {
margin-left: 0; margin-left: 0;
} }
...@@ -137,7 +146,7 @@ input[type='text'].tight-form-func-param { ...@@ -137,7 +146,7 @@ input[type='text'].tight-form-func-param {
padding: 4px 0px 4px 8px; padding: 4px 0px 4px 8px;
position: relative; position: relative;
height: 35px; height: 35px;
background: $page-bg; background: $input-label-bg;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
} }
......
public/sass/components/_slate_editor.scss
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
.slate-query-field__wrapper { .slate-query-field__wrapper {
position: relative; position: relative;
display: inline-block; display: inline-block;
padding: $input-padding; padding: 6px 8px;
min-height: $input-height; min-height: $input-height;
width: 100%; width: 100%;
cursor: text; cursor: text;
......
public/sass/components/_submenu.scss
...@@ -28,19 +28,18 @@ ...@@ -28,19 +28,18 @@
.fa-caret-down { .fa-caret-down {
font-size: 75%; font-size: 75%;
position: relative; padding-left: 8px;
top: -1px;
left: 1px;
} }
} }
.variable-value-link { .variable-value-link {
padding-right: 10px; padding-right: 10px;
padding: $space-sm; padding: 0 $space-sm;
background-color: $input-bg; background-color: $input-bg;
border: 1px solid $input-border-color; border: 1px solid $input-border-color;
border-radius: $input-border-radius; border-radius: $input-border-radius;
display: inline-block; display: flex;
align-items: center;
color: $text-color; color: $text-color;
height: $input-height; height: $input-height;
......
public/sass/mixins/_forms.scss
...@@ -34,8 +34,6 @@ ...@@ -34,8 +34,6 @@
&:focus { &:focus {
border-color: $input-border-focus; border-color: $input-border-focus;
outline: none; 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 @@ ...@@ -5,10 +5,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
.template-variable {
color: $variable;
}
div.flot-text { div.flot-text {
color: $text-color !important; color: $text-color !important;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment