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 {
margin-bottom: $space-xxs;
display: flex;
flex-direction: row;
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;
@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
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}`;
......
packages/grafana-ui/src/components/Table/styles.ts
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-border-color: $dark-6;
$input-label-bg: ${theme.colors.gray15};
$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-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;
......
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;
......
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-border-color: $dark-6;
$input-label-bg: #202226;
$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-height: 35px !default;
$input-padding: 0 8px;
$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-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;
......
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;
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;
......
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;
}
......
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