public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UX: Update new form styles to dark inputs (#22701)

Browse Source 
* UX: Update new form styles to dark inputs

* Aligning styles a bit

* Updated snapshot
This commit is contained in:
Torkel Ödegaard
2020-03-11 09:20:28 +01:00
committed by GitHub
parent ec18b00e2d
commit 9824219a58
15 changed files with 36 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-data/src/types/theme.ts
+1
View File
@@ -229,6 +229,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
formFocusOutline: string;
formInputText: string;
formInputDisabledText: string;
formInputPlaceholderText: string;
formInputTextStrong: string;
formInputTextWhite: string;
formValidationMessageText: string;
packages/grafana-ui/src/components/ButtonCascader/_ButtonCascader.scss
+1 -1
View File
@@ -4,7 +4,7 @@
&-menus {
font-size: 12px;
overflow: hidden;
background: $panel-bg;
background: $page-bg;
position: absolute;
border: $panel-border;
border-radius: $border-radius;
packages/grafana-ui/src/components/Forms/Input/Input.tsx
+5
View File
@@ -47,6 +47,11 @@ export const getInputStyles = stylesFactory(({ theme, invalid = false }: StyleDe
height: 100%;
/* Min width specified for prefix/suffix classes used outside React component*/
min-width: ${prefixSuffixStaticWidth};
// Hack to fix font awesome icons
> .fa {
position: relative;
top: 2px;
}
`;
return {
packages/grafana-ui/src/components/Forms/Label.tsx
+1 -1
View File
@@ -20,7 +20,7 @@ export const getLabelStyles = stylesFactory((theme: GrafanaTheme) => {
max-width: 480px;
`,
description: css`
color: ${theme.colors.formLabel};
color: ${theme.colors.formDescription};
font-size: ${theme.typography.size.sm};
font-weight: ${theme.typography.weight.regular};
display: block;
packages/grafana-ui/src/components/Forms/Select/IndicatorsContainer.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ export const IndicatorsContainer = React.forwardRef<HTMLDivElement, React.PropsW
styles.suffix,
css`
position: relative;
top: auto;
top: 1px;
`
)}
ref={ref}
packages/grafana-ui/src/components/Forms/Select/SelectBase.tsx
+1 -1
View File
@@ -212,7 +212,7 @@ export function SelectBase<T>({
css(props.getStyles('placeholder', props)),
css`
display: inline-block;
color: hsl(0, 0%, 50%);
color: ${theme.colors.formInputPlaceholderText};
position: absolute;
top: 50%;
transform: translateY(-50%);
packages/grafana-ui/src/components/Forms/Select/SelectMenu.tsx
+1
View File
@@ -5,6 +5,7 @@ import { cx } from 'emotion';
import { SelectableValue } from '@grafana/data';
import { Icon } from '../../Icon/Icon';
import { CustomScrollbar } from '../../CustomScrollbar/CustomScrollbar';
interface SelectMenuProps {
maxHeight: number;
innerRef: React.Ref<any>;
packages/grafana-ui/src/components/Forms/Select/getSelectStyles.ts
+1 -1
View File
@@ -4,7 +4,7 @@ import { css } from 'emotion';
import { GrafanaTheme } from '@grafana/data';
export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => {
const bgColor = stv({ light: theme.colors.white, dark: theme.colors.gray15 }, theme.type);
const bgColor = stv({ light: theme.colors.white, dark: theme.colors.formInputBg }, theme.type);
const menuShadowColor = stv({ light: theme.colors.gray4, dark: theme.colors.black }, theme.type);
const optionBgHover = stv({ light: theme.colors.gray7, dark: theme.colors.gray10 }, theme.type);
const multiValueContainerBg = stv({ light: theme.colors.gray6, dark: theme.colors.gray05 }, theme.type);
packages/grafana-ui/src/components/Forms/commonStyles.ts
+5
View File
@@ -51,6 +51,11 @@ export const sharedInputStyle = (theme: GrafanaTheme, invalid = false) => {
background-color: ${colors.formInputBgDisabled};
color: ${colors.formInputDisabledText};
}
&::placeholder {
color: ${colors.formInputPlaceholderText};
opacity: 1;
}
`;
};
packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap
+8 -4
View File
@@ -102,15 +102,16 @@ exports[`TimePicker renders buttons correctly 1`] = `
"formCheckboxBgChecked": "#5794f2",
"formCheckboxBgCheckedHover": "#3274d9",
"formCheckboxCheckmark": "#343b40",
"formDescription": "#9fa7b3",
"formDescription": "#7B8087",
"formFocusOutline": "#1f60c4",
"formInputBg": "#202226",
"formInputBg": "#0b0c0e",
"formInputBgDisabled": "#141619",
"formInputBorder": "#343b40",
"formInputBorderActive": "#5794f2",
"formInputBorderHover": "#464c54",
"formInputBorderInvalid": "#e02f44",
"formInputDisabledText": "#9fa7b3",
"formInputPlaceholderText": "#464c54",
"formInputText": "#c7d0d9",
"formInputTextStrong": "#c7d0d9",
"formInputTextWhite": "#ffffff",
@@ -135,6 +136,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
"gray4": "#d8d9da",
"gray5": "#ececec",
"gray6": "#f4f5f8",
"gray60": "#7B8087",
"gray7": "#fbfbfb",
"gray70": "#9fa7b3",
"gray85": "#c7d0d9",
@@ -409,15 +411,16 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"formCheckboxBgChecked": "#5794f2",
"formCheckboxBgCheckedHover": "#3274d9",
"formCheckboxCheckmark": "#343b40",
"formDescription": "#9fa7b3",
"formDescription": "#7B8087",
"formFocusOutline": "#1f60c4",
"formInputBg": "#202226",
"formInputBg": "#0b0c0e",
"formInputBgDisabled": "#141619",
"formInputBorder": "#343b40",
"formInputBorderActive": "#5794f2",
"formInputBorderHover": "#464c54",
"formInputBorderInvalid": "#e02f44",
"formInputDisabledText": "#9fa7b3",
"formInputPlaceholderText": "#464c54",
"formInputText": "#c7d0d9",
"formInputTextStrong": "#c7d0d9",
"formInputTextWhite": "#ffffff",
@@ -442,6 +445,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
"gray4": "#d8d9da",
"gray5": "#ececec",
"gray6": "#f4f5f8",
"gray60": "#7B8087",
"gray7": "#fbfbfb",
"gray70": "#9fa7b3",
"gray85": "#c7d0d9",
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+3 -3
View File
@@ -43,7 +43,7 @@ $gray-5: ${theme.colors.gray5};
$gray-6: ${theme.colors.gray6};
$gray-blue: ${theme.colors.grayBlue};
$input-black: #09090b;
$input-black: ${theme.colors.formInputBg};
$white: ${theme.colors.white};
@@ -194,12 +194,12 @@ $btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
$input-bg: $input-black;
$input-bg-disabled: $dark-6;
$input-color: $gray-4;
$input-color: ${theme.colors.formInputText};
$input-border-color: $dark-6;
$input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
$input-border-focus: $dark-6 !default;
$input-box-shadow-focus: $blue-light !default;
$input-color-placeholder: $gray-1 !default;
$input-color-placeholder: ${theme.colors.formInputPlaceholderText};
$input-label-bg: $gray-blue;
$input-label-border-color: $dark-6;
$input-color-select-arrow: $white;
packages/grafana-ui/src/themes/dark.ts
+3 -2
View File
@@ -79,14 +79,15 @@ const darkTheme: GrafanaTheme = {
// Next-gen forms functional colors
formLabel: basicColors.gray70,
formDescription: basicColors.gray70,
formDescription: basicColors.gray60,
formLegend: basicColors.gray85,
formInputBg: basicColors.gray15,
formInputBg: basicColors.gray05,
formInputBgDisabled: basicColors.gray10,
formInputBorder: basicColors.gray25,
formInputBorderHover: basicColors.gray33,
formInputBorderActive: basicColors.blue95,
formInputBorderInvalid: basicColors.red88,
formInputPlaceholderText: basicColors.gray33,
formInputText: basicColors.gray85,
formInputDisabledText: basicColors.gray70,
formInputTextStrong: basicColors.gray85,
packages/grafana-ui/src/themes/default.ts
+1
View File
@@ -6,6 +6,7 @@ export const commonColorsPalette = {
gray95: '#e9edf2',
gray85: '#c7d0d9',
gray70: '#9fa7b3',
gray60: '#7B8087',
gray33: '#464c54',
gray25: '#343b40',
gray15: '#202226',
packages/grafana-ui/src/themes/light.ts
+1
View File
@@ -95,6 +95,7 @@ const lightTheme: GrafanaTheme = {
formInputBorderActive: basicColors.blue77,
formInputBorderInvalid: basicColors.red88,
formInputText: basicColors.gray25,
formInputPlaceholderText: basicColors.gray70,
formInputDisabledText: basicColors.gray33,
formInputTextStrong: basicColors.gray25,
formInputTextWhite: basicColors.white,
public/sass/_variables.dark.generated.scss
+3 -3
View File
@@ -46,7 +46,7 @@ $gray-5: #ececec;
$gray-6: #f4f5f8;
$gray-blue: #212327;
$input-black: #09090b;
$input-black: #0b0c0e;
$white: #ffffff;
@@ -197,12 +197,12 @@ $btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
$input-bg: $input-black;
$input-bg-disabled: $dark-6;
$input-color: $gray-4;
$input-color: #c7d0d9;
$input-border-color: $dark-6;
$input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
$input-border-focus: $dark-6 !default;
$input-box-shadow-focus: $blue-light !default;
$input-color-placeholder: $gray-1 !default;
$input-color-placeholder: #464c54;
$input-label-bg: $gray-blue;
$input-label-border-color: $dark-6;
$input-color-select-arrow: $white;