From bc60f9c4033a76ebcbfcdb8fcc7a6f2534a0ec79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 14 Apr 2020 11:32:14 +0200 Subject: [PATCH] Theme: Typography variables overhaul, theme cleanup, improvents to storybook ThemeColors component (#23531) * Began text theme refactoring * Consolidating blue varaibles * Theme: Typography overhaul and theme cleanup * Theme updates, alignment and fixes * Updated snapshots * Restored template variable class * Updates * added container * Updated snapshot --- .../sources/packages_api/data/grafanatheme.md | 8 +- packages/grafana-data/src/types/theme.ts | 23 ++- .../components/AlphaNotice/AlphaNotice.tsx | 2 +- .../src/components/Button/Button.tsx | 4 +- .../src/components/Collapse/Collapse.tsx | 2 +- .../src/components/Forms/Legend.tsx | 3 +- .../Forms/RadioButtonGroup/RadioButton.tsx | 12 +- .../src/components/Legend/LegendTable.tsx | 2 +- .../src/components/Logs/LogLabelStatsRow.tsx | 5 +- .../src/components/Modal/getModalStyles.ts | 2 +- .../PanelOptionsGroup/PanelOptionsGroup.tsx | 2 +- .../components/Segment/SegmentAsync.story.tsx | 2 +- .../components/Segment/SegmentInput.story.tsx | 2 +- .../src/components/Select/getSelectStyles.ts | 2 +- .../grafana-ui/src/components/Table/styles.ts | 4 +- .../grafana-ui/src/components/Tabs/Tab.tsx | 1 - .../ThemeColors/ThemeColors.story.tsx | 71 +-------- .../components/ThemeColors/ThemeColors.tsx | 143 ++++++++++++++++++ .../TimePickerContent/TimePickerCalendar.tsx | 2 +- .../TimeRangePicker.test.tsx.snap | 100 ++++++------ .../FilterByNameTransformerEditor.tsx | 2 +- .../FilterByRefIdTransformerEditor.tsx | 2 +- .../src/themes/_variables.dark.scss.tmpl.ts | 19 ++- .../src/themes/_variables.light.scss.tmpl.ts | 19 ++- packages/grafana-ui/src/themes/dark.ts | 52 +++---- packages/grafana-ui/src/themes/default.ts | 12 +- packages/grafana-ui/src/themes/light.ts | 69 ++++----- packages/grafana-ui/src/themes/mixins.ts | 49 ++---- .../core/components/Select/FolderPicker.tsx | 1 + .../__snapshots__/FolderPicker.test.tsx.snap | 1 + .../PanelEditor/DynamicConfigValueEditor.tsx | 5 +- .../components/PanelEditor/OverrideEditor.tsx | 2 +- .../components/PanelEditor/PanelEditor.tsx | 2 +- .../TransformationEditor.tsx | 4 +- .../panel_editor/VizTypePickerPlugin.tsx | 12 +- .../app/features/explore/AdHocFilterField.tsx | 2 +- public/app/features/explore/Explore.tsx | 22 +-- public/app/features/explore/LiveLogs.tsx | 4 +- .../app/features/explore/SecondaryActions.tsx | 2 +- .../__snapshots__/MetaInfoText.test.tsx.snap | 2 +- .../app/features/panel/panellinks/module.html | 2 +- public/app/features/teams/TeamGroupSync.tsx | 2 +- .../__snapshots__/TeamGroupSync.test.tsx.snap | 2 +- .../adhoc/picker/AdHocFilterBuilder.tsx | 2 +- .../cloudwatch/components/Dimensions.test.tsx | 8 +- .../cloudwatch/components/Dimensions.tsx | 2 +- .../cloudwatch/components/Stats.tsx | 2 +- .../__snapshots__/Stats.test.tsx.snap | 2 +- .../elasticsearch/partials/bucket_agg.html | 4 +- .../elasticsearch/partials/metric_agg.html | 4 +- .../partials/pipeline_variables.html | 6 +- .../datasource/graphite/add_graphite_func.ts | 4 +- .../loki/configuration/DerivedFields.tsx | 4 +- .../opentsdb/partials/query.editor.html | 4 +- .../stackdriver/components/GroupBys.tsx | 2 +- .../stackdriver/components/LabelFilter.tsx | 2 +- .../testdata/partials/query.editor.html | 6 +- .../app/plugins/panel/graph/tab_display.html | 2 +- .../plugins/panel/graph/thresholds_form.html | 2 +- .../plugins/panel/graph/thresholds_form.ts | 4 +- .../panel/graph/time_regions_form.html | 2 +- public/app/plugins/panel/homelinks/module.tsx | 3 +- public/app/plugins/panel/news/NewsPanel.tsx | 7 +- .../plugins/panel/singlestat/mappings.html | 4 +- .../plugins/panel/table/column_options.html | 4 +- public/sass/_variables.dark.generated.scss | 31 ++-- public/sass/_variables.light.generated.scss | 49 +++--- public/sass/components/_gf-form.scss | 1 + public/sass/components/_query_editor.scss | 29 ---- public/sass/pages/_dashboard.scss | 4 + 70 files changed, 457 insertions(+), 418 deletions(-) create mode 100644 packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx diff --git a/docs/sources/packages_api/data/grafanatheme.md b/docs/sources/packages_api/data/grafanatheme.md index 55e3d6c86b5..359d799e0df 100644 --- a/docs/sources/packages_api/data/grafanatheme.md +++ b/docs/sources/packages_api/data/grafanatheme.md @@ -25,7 +25,7 @@ import { GrafanaTheme } from '@grafana/data'; | Property | Type | Description | | --- | --- | --- | | [background](#background-property) | {
dropdown: string;
scrollbar: string;
scrollbar2: string;
pageHeader: string;
} | | -| [colors](#colors-property) | {
black: string;
white: string;
dark1: string;
dark2: string;
dark3: string;
dark4: string;
dark5: string;
dark6: string;
dark7: string;
dark8: string;
dark9: string;
dark10: string;
gray1: string;
gray2: string;
gray3: string;
gray4: string;
gray5: string;
gray6: string;
gray7: string;
gray98: string;
gray95: string;
gray85: string;
gray70: string;
gray33: string;
gray25: string;
gray15: string;
gray10: string;
gray05: string;
blue95: string;
blue85: string;
blue77: string;
red88: string;
grayBlue: string;
inputBlack: string;
blue: string;
blueBase: string;
blueShade: string;
blueLight: string;
blueFaint: string;
redBase: string;
redShade: string;
greenBase: string;
greenShade: string;
red: string;
yellow: string;
purple: string;
variable: string;
orange: string;
orangeDark: string;
queryRed: string;
queryGreen: string;
queryPurple: string;
queryKeyword: string;
queryOrange: string;
brandPrimary: string;
brandSuccess: string;
brandWarning: string;
brandDanger: string;
online: string;
warn: string;
critical: string;
link: string;
linkDisabled: string;
linkHover: string;
linkExternal: string;
body: string;
text: string;
textStrong: string;
textWeak: string;
textFaint: string;
textEmphasis: string;
panelBg: string;
bodyBg: string;
pageBg: string;
headingColor: string;
pageHeaderBorder: string;
formLabel: string;
formDescription: string;
formLegend: string;
formInputBg: string;
formInputBgDisabled: string;
formInputBorder: string;
formInputBorderHover: string;
formInputBorderActive: string;
formInputBorderInvalid: string;
formFocusOutline: string;
formInputText: string;
formInputDisabledText: string;
formInputTextStrong: string;
formInputTextWhite: string;
formValidationMessageText: string;
formValidationMessageBg: string;
formSwitchBg: string;
formSwitchBgActive: string;
formSwitchBgActiveHover: string;
formSwitchBgHover: string;
formSwitchBgDisabled: string;
formSwitchDot: string;
formCheckboxBg: string;
formCheckboxBgChecked: string;
formCheckboxBgCheckedHover: string;
formCheckboxCheckmark: string;
} | | +| [colors](#colors-property) | {
black: string;
white: string;
dark1: string;
dark2: string;
dark3: string;
dark4: string;
dark5: string;
dark6: string;
dark7: string;
dark8: string;
dark9: string;
dark10: string;
gray1: string;
gray2: string;
gray3: string;
gray4: string;
gray5: string;
gray6: string;
gray7: string;
gray98: string;
gray95: string;
gray85: string;
gray70: string;
gray33: string;
gray25: string;
gray15: string;
gray10: string;
gray05: string;
blue95: string;
blue85: string;
blue77: string;
red88: string;
grayBlue: string;
inputBlack: string;
blue: string;
blue80: string;
blue77: string;
blue95: string;
blueFaint: string;
redBase: string;
redShade: string;
greenBase: string;
greenShade: string;
red: string;
yellow: string;
purple: string;
variable: string;
orange: string;
orangeDark: string;
queryRed: string;
queryGreen: string;
queryPurple: string;
queryKeyword: string;
queryOrange: string;
brandPrimary: string;
brandSuccess: string;
brandWarning: string;
brandDanger: string;
online: string;
warn: string;
critical: string;
link: string;
linkDisabled: string;
linkHover: string;
linkExternal: string;
body: string;
text: string;
textStrong: string;
textWeak: string;
textFaint: string;
textEmphasis: string;
panelBg: string;
bodyBg: string;
pageBg: string;
headingColor: string;
pageHeaderBorder: string;
formLabel: string;
formDescription: string;
formLegend: string;
formInputBg: string;
formInputBgDisabled: string;
formInputBorder: string;
formInputBorderHover: string;
formInputBorderActive: string;
formInputBorderInvalid: string;
formFocusOutline: string;
formInputText: string;
formInputDisabledText: string;
formInputTextStrong: string;
formInputTextWhite: string;
formValidationMessageText: string;
formValidationMessageBg: string;
formSwitchBg: string;
formSwitchBgActive: string;
formSwitchBgActiveHover: string;
formSwitchBgHover: string;
formSwitchBgDisabled: string;
formSwitchDot: string;
formCheckboxBg: string;
formCheckboxBgChecked: string;
formCheckboxBgCheckedHover: string;
formCheckboxCheckmark: string;
} | | | [isDark](#isdark-property) | boolean | | | [isLight](#islight-property) | boolean | | | [shadow](#shadow-property) | {
pageHeader: string;
} | | @@ -85,9 +85,9 @@ colors: { grayBlue: string; inputBlack: string; blue: string; - blueBase: string; - blueShade: string; - blueLight: string; + blue80: string; + blue77: string; + blue95: string; blueFaint: string; redBase: string; redShade: string; diff --git a/packages/grafana-data/src/types/theme.ts b/packages/grafana-data/src/types/theme.ts index 67e91f38e2f..d0d9ff772f8 100644 --- a/packages/grafana-data/src/types/theme.ts +++ b/packages/grafana-data/src/types/theme.ts @@ -67,7 +67,6 @@ export interface GrafanaThemeCommons { formSpacingBase: number; formMargin: string; formFieldsetMargin: string; - formLegendMargin: string; formInputHeight: string; formButtonHeight: number; formInputPaddingHorizontal: string; @@ -148,17 +147,13 @@ export interface GrafanaTheme extends GrafanaThemeCommons { // New blues palette used by next-gen form elements blue95: string; blue85: string; + blue80: string; blue77: string; // New reds palette used by next-gen form elements red88: string; // Accent colors - blue: string; - blueBase: string; - blueShade: string; - blueLight: string; - blueFaint: string; redBase: string; redShade: string; greenBase: string; @@ -188,6 +183,10 @@ export interface GrafanaTheme extends GrafanaThemeCommons { bg3: string; border1: string; border2: string; + border3: string; + + bgBlue1: string; + bgBlue2: string; dashboardBg: string; bodyBg: string; @@ -207,18 +206,17 @@ export interface GrafanaTheme extends GrafanaThemeCommons { linkExternal: string; // Text colors - text: string; textStrong: string; + textHeading: string; + text: string; + textSemiWeak: string; textWeak: string; textFaint: string; - textEmphasis: string; - headingColor: string; textBlue: string; // Next-gen forms functional colors formLabel: string; formDescription: string; - formLegend: string; formInputBg: string; formInputBgDisabled: string; formInputBorder: string; @@ -229,8 +227,6 @@ export interface GrafanaTheme extends GrafanaThemeCommons { formInputText: string; formInputDisabledText: string; formInputPlaceholderText: string; - formInputTextStrong: string; - formInputTextWhite: string; formValidationMessageText: string; formValidationMessageBg: string; formSwitchBg: string; @@ -244,4 +240,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons { formCheckboxBgCheckedHover: string; formCheckboxCheckmark: string; }; + shadows: { + listItem: string; + }; } diff --git a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx index 3a712eb66ee..1b2fb38c8d5 100644 --- a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx +++ b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx @@ -17,7 +17,7 @@ export const AlphaNotice: FC = ({ state, text, className }) => { const styles = cx( className, css` - background: linear-gradient(to bottom, ${theme.palette.blueBase}, ${theme.palette.blueShade}); + background: linear-gradient(to bottom, ${theme.palette.blue85}, ${theme.palette.blue77}); color: ${theme.palette.gray7}; white-space: nowrap; border-radius: 3px; diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx index 2b856ef5c27..9d0da1bd4a0 100644 --- a/packages/grafana-ui/src/components/Button/Button.tsx +++ b/packages/grafana-ui/src/components/Button/Button.tsx @@ -58,8 +58,8 @@ const getPropertiesForVariant = (theme: GrafanaTheme, variant: ButtonVariant) => case 'primary': default: return { - borderColor: theme.palette.blueShade, - background: buttonVariantStyles(theme.palette.blueBase, theme.palette.blueShade, theme.palette.white), + borderColor: theme.colors.bgBlue1, + background: buttonVariantStyles(theme.colors.bgBlue1, theme.colors.bgBlue2, theme.palette.white), }; } }; diff --git a/packages/grafana-ui/src/components/Collapse/Collapse.tsx b/packages/grafana-ui/src/components/Collapse/Collapse.tsx index f62a7492405..01d363769ce 100644 --- a/packages/grafana-ui/src/components/Collapse/Collapse.tsx +++ b/packages/grafana-ui/src/components/Collapse/Collapse.tsx @@ -36,7 +36,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({ animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) 500ms; animation-iteration-count: 100; left: -25%; - background: ${theme.palette.blue}; + background: ${theme.palette.blue85}; } @keyframes loader { from { diff --git a/packages/grafana-ui/src/components/Forms/Legend.tsx b/packages/grafana-ui/src/components/Forms/Legend.tsx index 89077a523a7..774af2c4a4d 100644 --- a/packages/grafana-ui/src/components/Forms/Legend.tsx +++ b/packages/grafana-ui/src/components/Forms/Legend.tsx @@ -13,8 +13,7 @@ export const getLegendStyles = stylesFactory((theme: GrafanaTheme) => { legend: css` font-size: ${theme.typography.heading.h3}; font-weight: ${theme.typography.weight.regular}; - margin: ${theme.spacing.formLegendMargin}; - color: ${theme.colors.formLegend}; + margin: 0 0 ${theme.spacing.md} 0; `, }; }); diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx index 7a7fb9eedf0..546deae1c54 100644 --- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx +++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx @@ -21,12 +21,12 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt const horizontalPadding = theme.spacing[size] ?? theme.spacing.md; const c = theme.palette; - 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 textColor = theme.colors.textSemiWeak; + const textColorHover = theme.colors.text; + const textColorActive = theme.isLight ? c.blue77 : c.blue95; + const borderColor = theme.colors.border2; + const borderColorHover = theme.colors.border3; + const borderColorActive = theme.isLight ? c.blue77 : c.blue95; const bg = theme.colors.bodyBg; const bgDisabled = theme.isLight ? c.gray95 : c.gray15; const bgActive = theme.isLight ? c.white : c.gray05; diff --git a/packages/grafana-ui/src/components/Legend/LegendTable.tsx b/packages/grafana-ui/src/components/Legend/LegendTable.tsx index b3046a8884c..da627811b3f 100644 --- a/packages/grafana-ui/src/components/Legend/LegendTable.tsx +++ b/packages/grafana-ui/src/components/Legend/LegendTable.tsx @@ -41,7 +41,7 @@ export const LegendTable: React.FunctionComponent = ({ ({ `, logsStatsRowActive: css` label: logs-stats-row--active; - color: ${theme.palette.blue}; + color: ${theme.colors.textBlue}; position: relative; `, logsStatsRowLabel: css` @@ -46,8 +46,7 @@ const getStyles = (theme: GrafanaTheme) => ({ label: logs-stats-row__innerbar; height: 4px; overflow: hidden; - background: ${theme.colors.textFaint}; - background: ${theme.palette.blue}; + background: ${theme.colors.bgBlue1}; `, }); diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts index 30683cc96d5..d13c6452e46 100644 --- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts +++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts @@ -32,7 +32,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => { opacity: 0.7; `, modalHeader: css` - background: ${theme.colors.bg1}; + background: ${theme.colors.bg2}; border-bottom: 1px solid ${theme.colors.pageHeaderBorder}; display: flex; height: 42px; diff --git a/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx b/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx index 36ed296cb91..4a361a4a67a 100644 --- a/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx +++ b/packages/grafana-ui/src/components/PanelOptionsGroup/PanelOptionsGroup.tsx @@ -16,7 +16,7 @@ export const PanelOptionsGroup: FunctionComponent = props => {
diff --git a/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx b/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx index 0d25f0e648b..d3620296e74 100644 --- a/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx +++ b/packages/grafana-ui/src/components/Segment/SegmentAsync.story.tsx @@ -6,7 +6,7 @@ import { Icon } from '../Icon/Icon'; const AddButton = ( - + ); diff --git a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx index 04c77081476..5e3fb4ce202 100644 --- a/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx +++ b/packages/grafana-ui/src/components/Segment/SegmentInput.story.tsx @@ -78,7 +78,7 @@ export const InputWithAutoFocus = () => { setInputComponents([...inputComponents, InputComponent]); }} > - + ); diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts index 6fc0e98a746..38ca6a795d5 100644 --- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts +++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts @@ -6,7 +6,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme) => { const bgColor = theme.colors.formInputBg; const menuShadowColor = theme.colors.dropdownShadow; const optionBgHover = theme.colors.dropdownOptionHoverBg; - const multiValueContainerBg = theme.colors.bg3; + const multiValueContainerBg = theme.colors.bg2; const multiValueColor = theme.colors.text; return { diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts index d79bad32082..edc6f312316 100644 --- a/packages/grafana-ui/src/components/Table/styles.ts +++ b/packages/grafana-ui/src/components/Table/styles.ts @@ -19,7 +19,7 @@ export interface TableStyles { export const getTableStyles = stylesFactory( (theme: GrafanaTheme): TableStyles => { - const palette = theme.palette; + const { palette, colors } = theme; const headerBg = theme.colors.panelBorder; const headerBorderColor = theme.isLight ? palette.gray70 : palette.gray05; const resizerColor = theme.isLight ? palette.blue77 : palette.blue95; @@ -51,7 +51,7 @@ export const getTableStyles = stylesFactory( padding: ${padding}px 10px; cursor: pointer; white-space: nowrap; - color: ${palette.blue}; + color: ${colors.textBlue}; border-right: 1px solid ${headerBorderColor}; &:last-child { diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx index 6f04e728338..b4a09ce52e1 100644 --- a/packages/grafana-ui/src/components/Tabs/Tab.tsx +++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx @@ -42,7 +42,6 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => { background: ${colors.bodyBg}; color: ${colors.link}; overflow: hidden; - cursor: not-allowed; &::before { display: block; diff --git a/packages/grafana-ui/src/components/ThemeColors/ThemeColors.story.tsx b/packages/grafana-ui/src/components/ThemeColors/ThemeColors.story.tsx index 58ab8595985..a40be2ac7cc 100644 --- a/packages/grafana-ui/src/components/ThemeColors/ThemeColors.story.tsx +++ b/packages/grafana-ui/src/components/ThemeColors/ThemeColors.story.tsx @@ -1,76 +1,15 @@ import React from 'react'; -import { css, cx } from 'emotion'; -import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; -import { useTheme } from '../../themes/ThemeContext'; +import { ThemeColors } from './ThemeColors'; export default { title: 'General/ThemeColors', - component: () => {}, - decorators: [withCenteredStory], + component: ThemeColors, + decorators: [], parameters: { docs: {}, }, }; -interface DemoElement { - name: string; - bg: string; - border?: string; - textColor?: string; - child?: DemoElement; -} - -function renderElement(el: DemoElement) { - const style = cx( - css` - padding: 36px; - background: ${el.bg}; - `, - el.border - ? css` - border: 1px solid ${el.border}; - ` - : null - ); - - return ( -
-
- {el.name} -
- {el.child && renderElement(el.child)} -
- ); -} - -export const BackgroundsAndBorders = () => { - const theme = useTheme(); - - const lvl1 = { - name: 'dashbord background', - bg: theme.colors.dashboardBg, - child: { - name: 'colors.bg1', - bg: theme.colors.bg1, - border: theme.colors.border1, - child: { - name: - 'colors.bg2 background used for elements placed on colors.bg1. Using colors.border1 should be used on elements placed ontop of bg1', - bg: theme.colors.bg2, - border: theme.colors.border2, - child: { - name: - 'colors.bg3 background used for elements placed on colors.bg2 with colors.border2 used for elements placed on bg2', - bg: theme.colors.bg3, - border: theme.colors.border2, - }, - }, - }, - }; - - return
{renderElement(lvl1)}
; +export const ThemeColorsDemo = () => { + return ; }; diff --git a/packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx b/packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx new file mode 100644 index 00000000000..cc83210374a --- /dev/null +++ b/packages/grafana-ui/src/components/ThemeColors/ThemeColors.tsx @@ -0,0 +1,143 @@ +import React, { FC } from 'react'; +import { css, cx } from 'emotion'; +import { useTheme } from '../../themes/ThemeContext'; +import { Icon } from '../Icon/Icon'; +import { HorizontalGroup } from '../Layout/Layout'; + +interface DemoBoxProps { + bg: string; + border?: string; + textColor?: string; +} + +const DemoBox: FC = ({ bg, border, children }) => { + const style = cx( + css` + padding: 16px 32px; + background: ${bg}; + width: 100%; + `, + border + ? css` + border: 1px solid ${border}; + ` + : null + ); + + return ( +
+
+ {name} +
+ {children} +
+ ); +}; + +const DemoText: FC<{ color?: string; bold?: boolean; size?: number }> = ({ color, bold, size, children }) => { + const style = css` + padding: 4px; + color: ${color ?? 'inherit'}; + font-weight: ${bold ? 500 : 400}; + font-size: ${size ?? 14}px; + `; + + return
{children}
; +}; + +export const ThemeColors = () => { + const theme = useTheme(); + + return ( +
+ + theme.colors.dashboardBg + + + theme.colors.bg1 is the main & preferred content background for text and elements This box is using border1 + + + + colors.bg2 background used for elements placed on colors.bg1. Using colors.border1 should be used on + elements placed ontop of bg1. Ths box is using border2. + + + colors.bg3 background used for elements placed on colors.bg2. + + + + + + + + <> + Text on main body background (bg1) + + textHeading Usually a bit bigger text + + + text + + + textSemiWeak + + + textWeak + + + textFaint + + + textStrong + + + formInputText + + + formLabel is also bold + + + formDescription + + + textBlue usually bold + + link + linkHover + linkDisabled + linkExternal + + + + This is inside form input bg (same as dashboard bg) + formInputText + formInputDisabledText + formInputPlaceholderText + + + Inside bg2 + + text + + + textWeak + + + textFaint + + + textStrong + + + +
+ ); +}; diff --git a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx index 4b8495c48dc..90485723947 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx +++ b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx @@ -110,7 +110,7 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => { .react-calendar__month-view__weekdays { background-color: inherit; text-align: center; - color: ${theme.palette.blueShade}; + color: ${theme.palette.blue77}; abbr { border: 0; diff --git a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap index 5138ceff494..a8bdb634d89 100644 --- a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap +++ b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap @@ -70,10 +70,13 @@ exports[`TimePicker renders buttons correctly 1`] = ` "colors": Object { "bg1": "#141619", "bg2": "#202226", - "bg3": "#343b40", + "bg3": "#2c3235", + "bgBlue1": "#3274d9", + "bgBlue2": "#1f60c4", "bodyBg": "#141619", "border1": "#202226", - "border2": "#343b40", + "border2": "#2c3235", + "border3": "#464c54", "dashboardBg": "#0b0c0e", "dropdownBg": "#0b0c0e", "dropdownOptionHoverBg": "#202226", @@ -81,45 +84,42 @@ exports[`TimePicker renders buttons correctly 1`] = ` "formCheckboxBg": "#222426", "formCheckboxBgChecked": "#5794f2", "formCheckboxBgCheckedHover": "#3274d9", - "formCheckboxCheckmark": "#343b40", + "formCheckboxCheckmark": "#2c3235", "formDescription": "#7b8087", "formFocusOutline": "#1f60c4", "formInputBg": "#0b0c0e", "formInputBgDisabled": "#141619", - "formInputBorder": "#343b40", + "formInputBorder": "#2c3235", "formInputBorderActive": "#5794f2", "formInputBorderHover": "#464c54", "formInputBorderInvalid": "#e02f44", "formInputDisabledText": "#9fa7b3", - "formInputPlaceholderText": "#555555", + "formInputPlaceholderText": "#464c54", "formInputText": "#c7d0d9", - "formInputTextStrong": "#c7d0d9", - "formInputTextWhite": "#ffffff", "formLabel": "#9fa7b3", - "formLegend": "#c7d0d9", - "formSwitchBg": "#343b40", + "formSwitchBg": "#2c3235", "formSwitchBgActive": "#5794f2", "formSwitchBgActiveHover": "#3274d9", - "formSwitchBgDisabled": "#343b40", + "formSwitchBgDisabled": "#2c3235", "formSwitchBgHover": "#464c54", "formSwitchDot": "#202226", "formValidationMessageBg": "#e02f44", "formValidationMessageText": "#ffffff", - "headingColor": "#d8d9da", "link": "#d8d9da", "linkDisabled": "#8e8e8e", - "linkExternal": "#33b5e5", + "linkExternal": "#33a2e5", "linkHover": "#ffffff", "pageHeaderBg": "#202226", "pageHeaderBorder": "#202226", "panelBg": "#141619", "panelBorder": "#202226", "text": "#c7d0d9", - "textBlue": "#339ae5", - "textEmphasis": "#ececec", - "textFaint": "#222426", - "textStrong": "#ffffff", - "textWeak": "#8e8e8e", + "textBlue": "#33a2e5", + "textFaint": "#464c54", + "textHeading": "#d8d9da", + "textSemiWeak": "#9fa7b3", + "textStrong": "#f7f8fa", + "textWeak": "#7b8087", }, "height": Object { "lg": "48px", @@ -131,14 +131,10 @@ exports[`TimePicker renders buttons correctly 1`] = ` "name": "Grafana Dark", "palette": Object { "black": "#000000", - "blue": "#33b5e5", "blue77": "#1f60c4", - "blue85": "#339ae5", + "blue80": "#3274d9", + "blue85": "#33a2e5", "blue95": "#5794f2", - "blueBase": "#3274d9", - "blueFaint": "#041126", - "blueLight": "#5794f2", - "blueShade": "#1f60c4", "brandDanger": "#e02f44", "brandPrimary": "#eb7b18", "brandSuccess": "#299c46", @@ -159,7 +155,7 @@ exports[`TimePicker renders buttons correctly 1`] = ` "gray10": "#141619", "gray15": "#202226", "gray2": "#8e8e8e", - "gray25": "#343b40", + "gray25": "#2c3235", "gray3": "#b3b3b3", "gray33": "#464c54", "gray4": "#d8d9da", @@ -169,7 +165,9 @@ exports[`TimePicker renders buttons correctly 1`] = ` "gray7": "#fbfbfb", "gray70": "#9fa7b3", "gray85": "#c7d0d9", + "gray90": "#dce1e6", "gray95": "#e9edf2", + "gray97": "#f1f5f9", "gray98": "#f7f8fa", "greenBase": "#299c46", "greenShade": "#23843b", @@ -192,6 +190,9 @@ exports[`TimePicker renders buttons correctly 1`] = ` }, "panelHeaderHeight": 28, "panelPadding": 8, + "shadows": Object { + "listItem": "-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)", + }, "spacing": Object { "d": "14px", "formButtonHeight": 32, @@ -202,7 +203,6 @@ exports[`TimePicker renders buttons correctly 1`] = ` "formInputPaddingHorizontal": "8px", "formLabelMargin": "0 0 4px 0", "formLabelPadding": "0 0 0 2px", - "formLegendMargin": "0 0 16px 0", "formMargin": "32px", "formSpacingBase": 8, "formValidationMessageMargin": "4px 0 0 0", @@ -384,10 +384,13 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "colors": Object { "bg1": "#141619", "bg2": "#202226", - "bg3": "#343b40", + "bg3": "#2c3235", + "bgBlue1": "#3274d9", + "bgBlue2": "#1f60c4", "bodyBg": "#141619", "border1": "#202226", - "border2": "#343b40", + "border2": "#2c3235", + "border3": "#464c54", "dashboardBg": "#0b0c0e", "dropdownBg": "#0b0c0e", "dropdownOptionHoverBg": "#202226", @@ -395,45 +398,42 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "formCheckboxBg": "#222426", "formCheckboxBgChecked": "#5794f2", "formCheckboxBgCheckedHover": "#3274d9", - "formCheckboxCheckmark": "#343b40", + "formCheckboxCheckmark": "#2c3235", "formDescription": "#7b8087", "formFocusOutline": "#1f60c4", "formInputBg": "#0b0c0e", "formInputBgDisabled": "#141619", - "formInputBorder": "#343b40", + "formInputBorder": "#2c3235", "formInputBorderActive": "#5794f2", "formInputBorderHover": "#464c54", "formInputBorderInvalid": "#e02f44", "formInputDisabledText": "#9fa7b3", - "formInputPlaceholderText": "#555555", + "formInputPlaceholderText": "#464c54", "formInputText": "#c7d0d9", - "formInputTextStrong": "#c7d0d9", - "formInputTextWhite": "#ffffff", "formLabel": "#9fa7b3", - "formLegend": "#c7d0d9", - "formSwitchBg": "#343b40", + "formSwitchBg": "#2c3235", "formSwitchBgActive": "#5794f2", "formSwitchBgActiveHover": "#3274d9", - "formSwitchBgDisabled": "#343b40", + "formSwitchBgDisabled": "#2c3235", "formSwitchBgHover": "#464c54", "formSwitchDot": "#202226", "formValidationMessageBg": "#e02f44", "formValidationMessageText": "#ffffff", - "headingColor": "#d8d9da", "link": "#d8d9da", "linkDisabled": "#8e8e8e", - "linkExternal": "#33b5e5", + "linkExternal": "#33a2e5", "linkHover": "#ffffff", "pageHeaderBg": "#202226", "pageHeaderBorder": "#202226", "panelBg": "#141619", "panelBorder": "#202226", "text": "#c7d0d9", - "textBlue": "#339ae5", - "textEmphasis": "#ececec", - "textFaint": "#222426", - "textStrong": "#ffffff", - "textWeak": "#8e8e8e", + "textBlue": "#33a2e5", + "textFaint": "#464c54", + "textHeading": "#d8d9da", + "textSemiWeak": "#9fa7b3", + "textStrong": "#f7f8fa", + "textWeak": "#7b8087", }, "height": Object { "lg": "48px", @@ -445,14 +445,10 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "name": "Grafana Dark", "palette": Object { "black": "#000000", - "blue": "#33b5e5", "blue77": "#1f60c4", - "blue85": "#339ae5", + "blue80": "#3274d9", + "blue85": "#33a2e5", "blue95": "#5794f2", - "blueBase": "#3274d9", - "blueFaint": "#041126", - "blueLight": "#5794f2", - "blueShade": "#1f60c4", "brandDanger": "#e02f44", "brandPrimary": "#eb7b18", "brandSuccess": "#299c46", @@ -473,7 +469,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "gray10": "#141619", "gray15": "#202226", "gray2": "#8e8e8e", - "gray25": "#343b40", + "gray25": "#2c3235", "gray3": "#b3b3b3", "gray33": "#464c54", "gray4": "#d8d9da", @@ -483,7 +479,9 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "gray7": "#fbfbfb", "gray70": "#9fa7b3", "gray85": "#c7d0d9", + "gray90": "#dce1e6", "gray95": "#e9edf2", + "gray97": "#f1f5f9", "gray98": "#f7f8fa", "greenBase": "#299c46", "greenShade": "#23843b", @@ -506,6 +504,9 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` }, "panelHeaderHeight": 28, "panelPadding": 8, + "shadows": Object { + "listItem": "-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)", + }, "spacing": Object { "d": "14px", "formButtonHeight": 32, @@ -516,7 +517,6 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "formInputPaddingHorizontal": "8px", "formLabelMargin": "0 0 4px 0", "formLabelPadding": "0 0 0 2px", - "formLegendMargin": "0 0 16px 0", "formMargin": "32px", "formSpacingBase": 8, "formValidationMessageMargin": "4px 0 0 0", diff --git a/packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx b/packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx index 201de526839..e08fa6b8937 100644 --- a/packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx +++ b/packages/grafana-ui/src/components/TransformersUI/FilterByNameTransformerEditor.tsx @@ -139,7 +139,7 @@ const FilterPill: React.FC = ({ label, selected, onClick }) => className={css` padding: ${theme.spacing.xxs} ${theme.spacing.sm}; color: white; - background: ${selected ? theme.palette.blueLight : theme.palette.blueShade}; + background: ${selected ? theme.palette.blue95 : theme.palette.blue77}; border-radius: 16px; display: inline-block; cursor: pointer; diff --git a/packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx b/packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx index f6933fc805a..a3056288e1e 100644 --- a/packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx +++ b/packages/grafana-ui/src/components/TransformersUI/FilterByRefIdTransformerEditor.tsx @@ -139,7 +139,7 @@ const FilterPill: React.FC = ({ label, selected, onClick }) => className={css` padding: ${theme.spacing.xxs} ${theme.spacing.sm}; color: white; - background: ${selected ? theme.palette.blueLight : theme.palette.blueShade}; + background: ${selected ? theme.palette.blue95 : theme.palette.blue77}; border-radius: 16px; display: inline-block; cursor: pointer; diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index e1ede7f1c0a..4245557fd2e 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -12,10 +12,9 @@ $theme-name: dark; // New Colors // ------------------------- -$blue-faint: ${theme.palette.blueFaint}; -$blue-light: ${theme.palette.blueLight}; -$blue-base: ${theme.palette.blueBase}; -$blue-shade: ${theme.palette.blueShade}; +$blue-light: ${theme.palette.blue95}; +$blue-base: ${theme.palette.blue80}; +$blue-shade: ${theme.palette.blue77}; $red-base: ${theme.palette.redBase}; $red-shade: ${theme.palette.redShade}; $green-base: ${theme.palette.greenBase}; @@ -59,7 +58,7 @@ $white: ${theme.palette.white}; // Accent colors // ------------------------- -$blue: ${theme.palette.blue}; +$blue: ${theme.palette.blue85}; $red: $red-base; $yellow: ${theme.palette.yellow}; $orange: ${theme.palette.orange}; @@ -92,7 +91,7 @@ $text-color: ${theme.colors.text}; $text-color-strong: ${theme.colors.textStrong}; $text-color-weak: ${theme.colors.textWeak}; $text-color-faint: ${theme.colors.textFaint}; -$text-color-emphasis: ${theme.colors.textEmphasis}; +$text-color-emphasis: ${theme.colors.textStrong}; $text-blue: ${theme.colors.textBlue}; $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); @@ -111,7 +110,7 @@ $external-link-color: ${theme.colors.linkExternal}; // Typography // ------------------------- -$headings-color: ${theme.colors.headingColor}; +$headings-color: ${theme.colors.textHeading}; $abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; @@ -353,7 +352,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover; $switch-bg: $input-bg; $switch-slider-color: $dark-3; $switch-slider-off-bg: $gray-1; -$switch-slider-on-bg: ${theme.palette.blueLight}; +$switch-slider-on-bg: ${theme.palette.blue77}; $switch-slider-shadow: 0 0 3px black; //Checkbox @@ -379,8 +378,8 @@ $panel-editor-viz-item-bg-hover: darken($blue-base, 46%); $panel-options-group-border: none; $panel-options-group-header-bg: ${theme.colors.bg2}; -$panel-grid-placeholder-bg: $blue-faint; -$panel-grid-placeholder-shadow: 0 0 4px $blue-shade; +$panel-grid-placeholder-bg: darken(${theme.palette.blue77}, 30%); +$panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue80}; // logs $logs-color-unkown: $gray-2; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 6bca9da160a..eeb8a0932d4 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -12,10 +12,9 @@ $theme-name: light; // New Colors // ------------------------- -$blue-faint: ${theme.palette.blueFaint}; -$blue-light: ${theme.palette.blueLight}; -$blue-base: ${theme.palette.blueBase}; -$blue-shade: ${theme.palette.blueShade}; +$blue-light: ${theme.palette.blue95}; +$blue-base: ${theme.palette.blue80}; +$blue-shade: ${theme.palette.blue77}; $red-base: ${theme.palette.redBase}; $red-shade: ${theme.palette.redShade}; $green-base: ${theme.palette.greenBase}; @@ -53,7 +52,7 @@ $white: ${theme.palette.white}; // Accent colors // ------------------------- -$blue: ${theme.palette.blue}; +$blue: ${theme.colors.textBlue}; $red: $red-base; $yellow: ${theme.palette.yellow}; $orange: ${theme.palette.orange}; @@ -86,7 +85,7 @@ $text-color: ${theme.colors.text}; $text-color-strong: ${theme.colors.textStrong}; $text-color-weak: ${theme.colors.textWeak}; $text-color-faint: ${theme.colors.textFaint}; -$text-color-emphasis: ${theme.colors.textEmphasis}; +$text-color-emphasis: ${theme.colors.textStrong}; $text-blue: ${theme.colors.textBlue}; $text-shadow-faint: none; @@ -104,7 +103,7 @@ $external-link-color: ${theme.colors.linkExternal}; // Typography // ------------------------- -$headings-color: ${theme.colors.headingColor}; +$headings-color: ${theme.colors.textHeading}; $abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; @@ -346,7 +345,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover; $switch-bg: $white; $switch-slider-color: $gray-7; $switch-slider-off-bg: $gray-5; -$switch-slider-on-bg: ${theme.palette.blueShade}; +$switch-slider-on-bg: ${theme.palette.blue77}; $switch-slider-shadow: 0 0 3px $dark-2; //Checkbox @@ -372,8 +371,8 @@ $panel-editor-viz-item-bg-hover: lighten($blue-base, 45%); $panel-options-group-border: none; $panel-options-group-header-bg: $gray-5; -$panel-grid-placeholder-bg: $blue-faint; -$panel-grid-placeholder-shadow: 0 0 4px $blue-light; +$panel-grid-placeholder-bg: lighten(${theme.palette.blue95}, 30%); +$panel-grid-placeholder-shadow: 0 0 4px ${theme.palette.blue95}; // logs $logs-color-unkown: $gray-5; diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index ab5cdf2e591..b0467d3ce59 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -22,15 +22,10 @@ const basicColors = { gray5: '#ececec', gray6: '#f4f5f8', // not used in dark theme gray7: '#fbfbfb', // not used in dark theme - blueBase: '#3274d9', - blueShade: '#1f60c4', - blueLight: '#5794f2', - blueFaint: '#041126', redBase: '#e02f44', redShade: '#c4162a', greenBase: '#299c46', greenShade: '#23843b', - blue: '#33b5e5', red: '#d44a3a', yellow: '#ecbb13', purple: '#9933cc', @@ -44,41 +39,51 @@ const backgrounds = { bg2: basicColors.gray15, bg3: basicColors.gray25, dashboardBg: basicColors.gray05, + bgBlue1: basicColors.blue80, + bgBlue2: basicColors.blue77, }; const borders = { border1: basicColors.gray15, border2: basicColors.gray25, + border3: basicColors.gray33, +}; + +const textColors = { + textStrong: basicColors.gray98, + textHeading: basicColors.gray4, + text: basicColors.gray85, + textSemiWeak: basicColors.gray70, + textWeak: basicColors.gray60, + textFaint: basicColors.gray33, + textBlue: basicColors.blue85, }; const form = { // Next-gen forms functional colors - formLabel: basicColors.gray70, + formLabel: textColors.textSemiWeak, formDescription: basicColors.gray60, - formLegend: basicColors.gray85, formInputBg: basicColors.gray05, formInputBgDisabled: basicColors.gray10, - formInputBorder: basicColors.gray25, + formInputBorder: borders.border2, formInputBorderHover: basicColors.gray33, formInputBorderActive: basicColors.blue95, formInputBorderInvalid: basicColors.red88, - formInputPlaceholderText: basicColors.gray1, + formInputPlaceholderText: textColors.textFaint, formInputText: basicColors.gray85, formInputDisabledText: basicColors.gray70, - formInputTextStrong: basicColors.gray85, - formInputTextWhite: basicColors.white, - formFocusOutline: basicColors.blueShade, + formFocusOutline: basicColors.blue77, formValidationMessageText: basicColors.white, formValidationMessageBg: basicColors.red88, formSwitchBg: basicColors.gray25, - formSwitchBgActive: basicColors.blueLight, + formSwitchBgActive: basicColors.blue95, formSwitchBgHover: basicColors.gray33, - formSwitchBgActiveHover: basicColors.blueBase, + formSwitchBgActiveHover: basicColors.blue80, formSwitchBgDisabled: basicColors.gray25, formSwitchDot: basicColors.gray15, formCheckboxBg: basicColors.dark5, - formCheckboxBgChecked: basicColors.blueLight, - formCheckboxBgCheckedHover: basicColors.blueBase, + formCheckboxBgChecked: basicColors.blue95, + formCheckboxBgCheckedHover: basicColors.blue80, formCheckboxCheckmark: basicColors.gray25, }; @@ -106,6 +111,7 @@ const darkTheme: GrafanaTheme = { ...backgrounds, ...borders, ...form, + ...textColors, bodyBg: backgrounds.bg1, panelBg: backgrounds.bg1, @@ -117,19 +123,13 @@ const darkTheme: GrafanaTheme = { dropdownShadow: basicColors.black, dropdownOptionHoverBg: backgrounds.bg2, - // text - headingColor: basicColors.gray4, - text: basicColors.gray85, - textStrong: basicColors.white, - textWeak: basicColors.gray2, - textEmphasis: basicColors.gray5, - textFaint: basicColors.dark5, - textBlue: basicColors.blue85, - link: basicColors.gray4, linkDisabled: basicColors.gray2, linkHover: basicColors.white, - linkExternal: basicColors.blue, + linkExternal: basicColors.blue85, + }, + shadows: { + listItem: '-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3)', }, }; diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index 467cde1ceef..1e60b00adde 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -3,20 +3,23 @@ import { GrafanaThemeCommons } from '@grafana/data'; export const commonColorsPalette = { // New greys palette used by next-gen form elements gray98: '#f7f8fa', + gray97: '#f1f5f9', gray95: '#e9edf2', + gray90: '#dce1e6', gray85: '#c7d0d9', gray70: '#9fa7b3', gray60: '#7b8087', gray33: '#464c54', - gray25: '#343b40', + gray25: '#2c3235', gray15: '#202226', gray10: '#141619', gray05: '#0b0c0e', // New blues palette used by next-gen form elements - blue95: '#5794f2', - blue85: '#339ae5', - blue77: '#1f60c4', + blue95: '#5794f2', // blue95 + blue85: '#33a2e5', // blueText + blue80: '#3274d9', // blue80 + blue77: '#1f60c4', // blue77 // New reds palette used by next-gen form elements red88: '#e02f44', @@ -86,7 +89,6 @@ const theme: GrafanaThemeCommons = { formSpacingBase: SPACING_BASE, formMargin: `${SPACING_BASE * 4}px`, formFieldsetMargin: `${SPACING_BASE * 2}px`, - formLegendMargin: `0 0 ${SPACING_BASE * 2}px 0`, formInputHeight: `${SPACING_BASE * 4}px`, formButtonHeight: SPACING_BASE * 4, formInputPaddingHorizontal: `${SPACING_BASE}px`, diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts index b6f42e3b1f3..b56f9be86fb 100644 --- a/packages/grafana-ui/src/themes/light.ts +++ b/packages/grafana-ui/src/themes/light.ts @@ -22,15 +22,10 @@ const basicColors = { gray5: '#dde4ed', gray6: '#e9edf2', // same as gray95 gray7: '#f7f8fa', // same as gray98 - blueBase: '#3274d9', - blueShade: '#1f60c4', - blueLight: '#5794f2', - blueFaint: '#f5f9ff', redBase: '#e02f44', redShade: '#c4162a', greenBase: '#3eb15b', greenShade: '#369b4f', - blue: '#0083b3', red: '#d44939', yellow: '#ff851b', purple: '#9954bb', @@ -40,19 +35,32 @@ const basicColors = { const backgrounds = { bg1: basicColors.white, - bg2: basicColors.gray98, + bg2: basicColors.gray97, bg3: basicColors.gray95, dashboardBg: basicColors.gray98, + bgBlue1: basicColors.blue80, + bgBlue2: basicColors.blue77, }; const borders = { - border1: basicColors.gray95, + border1: basicColors.gray90, border2: basicColors.gray85, + border3: basicColors.gray70, +}; + +const textColors = { + // Text colors + textStrong: basicColors.gray15, + text: basicColors.gray33, + textSemiWeak: basicColors.gray33, + textWeak: basicColors.gray60, + textFaint: basicColors.gray70, + textBlue: basicColors.blue85, }; const form = { - formLabel: basicColors.gray33, - formDescription: basicColors.gray33, + formLabel: textColors.text, + formDescription: textColors.textWeak, formLegend: basicColors.gray25, formInputBg: basicColors.white, formInputBgDisabled: basicColors.gray95, @@ -60,23 +68,21 @@ const form = { formInputBorderHover: basicColors.gray70, formInputBorderActive: basicColors.blue77, formInputBorderInvalid: basicColors.red88, - formInputText: basicColors.gray25, - formInputPlaceholderText: basicColors.gray70, - formInputDisabledText: basicColors.gray33, - formInputTextStrong: basicColors.gray25, - formInputTextWhite: basicColors.white, - formFocusOutline: basicColors.blueLight, + formInputText: textColors.text, + formInputPlaceholderText: textColors.textFaint, + formInputDisabledText: textColors.textWeak, + formFocusOutline: basicColors.blue95, formValidationMessageText: basicColors.white, formValidationMessageBg: basicColors.red88, formSwitchBg: basicColors.gray85, - formSwitchBgActive: basicColors.blueShade, + formSwitchBgActive: basicColors.blue77, formSwitchBgHover: basicColors.gray3, - formSwitchBgActiveHover: basicColors.blueBase, + formSwitchBgActiveHover: basicColors.blue80, formSwitchBgDisabled: basicColors.gray4, formSwitchDot: basicColors.white, formCheckboxBg: basicColors.white, - formCheckboxBgChecked: basicColors.blueShade, - formCheckboxBgCheckedHover: basicColors.blueBase, + formCheckboxBgChecked: basicColors.blue77, + formCheckboxBgCheckedHover: basicColors.blue80, formCheckboxCheckmark: basicColors.white, }; @@ -103,6 +109,8 @@ const lightTheme: GrafanaTheme = { colors: { ...backgrounds, ...borders, + ...textColors, + ...form, bodyBg: backgrounds.bg1, panelBg: backgrounds.bg1, @@ -114,22 +122,15 @@ const lightTheme: GrafanaTheme = { dropdownShadow: basicColors.gray3, dropdownOptionHoverBg: backgrounds.bg2, - // Text colors - text: basicColors.gray1, - textStrong: basicColors.dark2, - textWeak: basicColors.gray2, - textEmphasis: basicColors.dark5, - textFaint: basicColors.dark4, - textBlue: basicColors.blue85, - // Link colors - link: basicColors.gray1, - linkDisabled: basicColors.gray3, - linkHover: basicColors.dark1, - linkExternal: basicColors.blueLight, - headingColor: basicColors.gray1, - - ...form, + link: textColors.text, + linkDisabled: textColors.textWeak, + linkHover: textColors.textStrong, + linkExternal: basicColors.blue85, + textHeading: basicColors.gray25, + }, + shadows: { + listItem: '-1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1)', }, }; diff --git a/packages/grafana-ui/src/themes/mixins.ts b/packages/grafana-ui/src/themes/mixins.ts index 540fd79e9b9..469c307320f 100644 --- a/packages/grafana-ui/src/themes/mixins.ts +++ b/packages/grafana-ui/src/themes/mixins.ts @@ -2,54 +2,37 @@ import { GrafanaTheme } from '@grafana/data'; import { selectThemeVariant } from './selectThemeVariant'; import { css } from 'emotion'; import { stylesFactory } from './stylesFactory'; +import tinycolor from 'tinycolor2'; export function cardChrome(theme: GrafanaTheme): string { - if (theme.isDark) { - return ` - background: linear-gradient(135deg, ${theme.palette.dark8}, ${theme.palette.dark6}); - &:hover { - background: linear-gradient(135deg, ${theme.palette.dark9}, ${theme.palette.dark6}); - } - box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); - border-radius: ${theme.border.radius.md}; - `; - } - return ` - background: linear-gradient(135deg, ${theme.palette.gray6}, ${theme.palette.gray7}); + background: ${theme.colors.bg2}; &:hover { - background: linear-gradient(135deg, ${theme.palette.gray7}, ${theme.palette.gray6}); + background: ${hoverColor(theme.colors.bg2, theme)}; } - box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); + box-shadow: ${theme.shadows.listItem}; border-radius: ${theme.border.radius.md}; `; } -export function listItem(theme: GrafanaTheme): string { - if (theme.isDark) { - return ` - background: ${theme.palette.dark7}; - &:hover { - background: ${theme.palette.dark9}; - } - box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); - border-radius: ${theme.border.radius.md}; - `; - } +export function hoverColor(color: string, theme: GrafanaTheme) { + return theme.isDark ? tinycolor(color).brighten(2) : tinycolor(color).darken(2); +} +export function listItem(theme: GrafanaTheme): string { return ` - background: ${theme.palette.gray7}; - &:hover { - background: ${theme.palette.gray6}; - } - box-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.1); - border-radius: ${theme.border.radius.md}; - `; + background: ${theme.colors.bg2}; + &:hover { + background: ${hoverColor(theme.colors.bg2, theme)}; + } + box-shadow: ${theme.shadows.listItem}; + border-radius: ${theme.border.radius.md}; +`; } export function listItemSelected(theme: GrafanaTheme): string { return ` - background: ${theme.isLight ? theme.palette.gray6 : theme.palette.dark9}; + background: ${hoverColor(theme.colors.bg2, theme)}; color: ${theme.colors.textStrong}; `; } diff --git a/public/app/core/components/Select/FolderPicker.tsx b/public/app/core/components/Select/FolderPicker.tsx index b59cde93b1c..fe783fb0c40 100644 --- a/public/app/core/components/Select/FolderPicker.tsx +++ b/public/app/core/components/Select/FolderPicker.tsx @@ -171,6 +171,7 @@ export class FolderPicker extends PureComponent { defaultOptions defaultValue={folder} value={folder} + className={'width-20'} allowCustomValue={enableCreateNew} loadOptions={this.debouncedSearch} onChange={this.onFolderChange} diff --git a/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap b/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap index 6f6b40b3eb5..b2b3a899396 100644 --- a/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap +++ b/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap @@ -15,6 +15,7 @@ exports[`FolderPicker should render 1`] = ` { const highlightColor = selectThemeVariant( { - light: theme.palette.blueLight, - dark: theme.palette.blueShade, + light: theme.palette.blue95, + dark: theme.palette.blue77, }, theme.type ); + return { wrapper: css` border-top: 1px dashed ${borderColor}; diff --git a/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx b/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx index bf1f78902a3..7b7da95dc81 100644 --- a/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OverrideEditor.tsx @@ -111,7 +111,7 @@ export const OverrideEditor: React.FC = ({ data, override,
{ diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx index 4d95b1877f0..4af9c631087 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx @@ -347,7 +347,7 @@ enum Pane { */ const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => { const { uiState } = props; - const handleColor = theme.palette.blueLight; + const handleColor = theme.palette.blue95; const paneSpaceing = theme.spacing.md; const resizer = css` diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx index 77ebac3742a..f21d53ca53a 100644 --- a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx +++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx @@ -71,7 +71,7 @@ const getStyles = (theme: GrafanaTheme) => ({ `, name: css` font-weight: ${theme.typography.weight.semibold}; - color: ${theme.palette.blue}; + color: ${theme.colors.textBlue}; `, iconRow: css` display: flex; @@ -107,7 +107,7 @@ const getStyles = (theme: GrafanaTheme) => ({ text-align: center; font-family: ${theme.typography.fontFamily.monospace}; font-size: ${theme.typography.size.sm}; - color: ${theme.palette.blueBase}; + color: ${theme.palette.blue80}; border-bottom: 1px dashed ${theme.palette.gray15}; flex-grow: 0; flex-shrink: 1; diff --git a/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx b/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx index 11a68a55b0a..11679db91f9 100644 --- a/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx +++ b/public/app/features/dashboard/panel_editor/VizTypePickerPlugin.tsx @@ -28,12 +28,10 @@ const VizTypePickerPlugin: React.FC = ({ isCurrent, plugin, onClick, disa }; const getStyles = stylesFactory((theme: GrafanaTheme) => { - const itemBorder = `1px solid ${theme.isLight ? theme.palette.gray85 : theme.palette.gray25}`; - return { item: css` - background: ${theme.isLight ? theme.palette.gray98 : theme.palette.gray15}; - border: ${itemBorder}; + background: ${theme.colors.bg2}; + border: 1px solid ${theme.colors.border2}; border-radius: 3px; height: 100px; width: 100%; @@ -49,8 +47,8 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { padding-bottom: 6px; &:hover { - box-shadow: 0 0 4px ${theme.palette.blueLight}; - border: 1px solid ${theme.palette.blueLight}; + box-shadow: 0 0 4px ${theme.palette.blue95}; + border: 1px solid ${theme.palette.blue95}; } `, current: css` @@ -63,7 +61,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { cursor: default; &:hover { box-shadow: none; - border: ${itemBorder}; + border: 1px solid ${theme.colors.border2}; } `, name: css` diff --git a/public/app/features/explore/AdHocFilterField.tsx b/public/app/features/explore/AdHocFilterField.tsx index 08be7671b28..b36330da5a5 100644 --- a/public/app/features/explore/AdHocFilterField.tsx +++ b/public/app/features/explore/AdHocFilterField.tsx @@ -7,7 +7,7 @@ export const DEFAULT_REMOVE_FILTER_VALUE = '-- remove filter --'; const addFilterButton = (onAddFilter: (event: React.MouseEvent) => void) => ( ); diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index 664a5eafe3d..2f0637ee87e 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -308,15 +308,19 @@ export class Explore extends React.PureComponent { {datasourceMissing ? this.renderEmptyState() : null} {datasourceInstance && (
- - +
+
+ + +
+
{({ width }) => { diff --git a/public/app/features/explore/LiveLogs.tsx b/public/app/features/explore/LiveLogs.tsx index 9ee405ad776..745d81e9a82 100644 --- a/public/app/features/explore/LiveLogs.tsx +++ b/public/app/features/explore/LiveLogs.tsx @@ -23,13 +23,13 @@ const getStyles = (theme: GrafanaTheme) => ({ logsRowFade: css` label: logs-row-fresh; color: ${theme.colors.text}; - background-color: ${tinycolor(theme.palette.blueLight) + background-color: ${tinycolor(theme.palette.blue95) .setAlpha(0.25) .toString()}; animation: fade 1s ease-out 1s 1 normal forwards; @keyframes fade { from { - background-color: ${tinycolor(theme.palette.blueLight) + background-color: ${tinycolor(theme.palette.blue95) .setAlpha(0.25) .toString()}; } diff --git a/public/app/features/explore/SecondaryActions.tsx b/public/app/features/explore/SecondaryActions.tsx index 0ebf41f3997..74e72ec11c4 100644 --- a/public/app/features/explore/SecondaryActions.tsx +++ b/public/app/features/explore/SecondaryActions.tsx @@ -28,7 +28,7 @@ export function SecondaryActions(props: Props) { onClick={props.onClickAddQueryRowButton} disabled={props.addQueryRowButtonDisabled} > - + {'\xA0' + 'Add query'} )} diff --git a/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap b/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap index 795292f9bb1..17ef39ea361 100644 --- a/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap +++ b/public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap @@ -2,7 +2,7 @@ exports[`MetaInfoText should render component 1`] = `
- +
diff --git a/public/app/features/teams/TeamGroupSync.tsx b/public/app/features/teams/TeamGroupSync.tsx index fcfe0979250..e64fec6206b 100644 --- a/public/app/features/teams/TeamGroupSync.tsx +++ b/public/app/features/teams/TeamGroupSync.tsx @@ -87,7 +87,7 @@ export class TeamGroupSync extends PureComponent {
{groups.length > 0 && ( )}
diff --git a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap index 3305b077f7f..6b758e51c08 100644 --- a/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap +++ b/public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap @@ -109,7 +109,7 @@ exports[`Render should render groups table 1`] = ` onClick={[Function]} > Add group diff --git a/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx b/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx index da12e4f6627..80236252ba6 100644 --- a/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx +++ b/public/app/features/variables/adhoc/picker/AdHocFilterBuilder.tsx @@ -71,7 +71,7 @@ function filterAddButton(key: string | null): ReactElement | undefined { return ( - + ); } diff --git a/public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx b/public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx index 51e822b4431..a5e58209a00 100644 --- a/public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/Dimensions.test.tsx @@ -26,9 +26,7 @@ describe('Dimensions', () => { /> ); - expect(wrapper.html()).toEqual( - `
` - ); + expect(wrapper.html()).toEqual(expect.stringContaining(`gf-form`)); }); }); @@ -42,9 +40,7 @@ describe('Dimensions', () => { loadValues={() => Promise.resolve([])} /> ); - expect(wrapper.html()).toEqual( - `
somekey
somevalue
` - ); + expect(wrapper.html()).toEqual(expect.stringContaining(`gf-form`)); }); }); }); diff --git a/public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx b/public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx index e6f02bb854b..f2f05891567 100644 --- a/public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/Dimensions.tsx @@ -69,7 +69,7 @@ export const Dimensions: FunctionComponent = ({ dimensions, loadValues, l allowCustomValue Component={ - + } loadOptions={() => loadKeys().then(excludeUsedKeys)} diff --git a/public/app/plugins/datasource/cloudwatch/components/Stats.tsx b/public/app/plugins/datasource/cloudwatch/components/Stats.tsx index 8f49dcb75a4..d3267380e8c 100644 --- a/public/app/plugins/datasource/cloudwatch/components/Stats.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/Stats.tsx @@ -34,7 +34,7 @@ export const Stats: FunctionComponent = ({ stats, values, onChange, varia - + } allowCustomValue diff --git a/public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap b/public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap index 9791a45a95d..066a5c22e50 100644 --- a/public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap +++ b/public/app/plugins/datasource/cloudwatch/components/__snapshots__/Stats.test.tsx.snap @@ -41,7 +41,7 @@ Array [ xmlns="http://www.w3.org/2000/svg" >
diff --git a/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html b/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html index a9fbcee4a2b..908c872cfd7 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html +++ b/public/app/plugins/datasource/elasticsearch/partials/bucket_agg.html @@ -214,10 +214,10 @@
diff --git a/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html b/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html index ef803f7afb7..4863ed163d4 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html +++ b/public/app/plugins/datasource/elasticsearch/partials/metric_agg.html @@ -38,10 +38,10 @@
diff --git a/public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html b/public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html index fdee5f00a97..42d008cb102 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html +++ b/public/app/plugins/datasource/elasticsearch/partials/pipeline_variables.html @@ -17,10 +17,10 @@ css-class="width-12" >
@@ -40,7 +40,7 @@ css-class="width-12" >
diff --git a/public/app/plugins/datasource/graphite/add_graphite_func.ts b/public/app/plugins/datasource/graphite/add_graphite_func.ts index 51dd5c26a2b..699f7badb8e 100644 --- a/public/app/plugins/datasource/graphite/add_graphite_func.ts +++ b/public/app/plugins/datasource/graphite/add_graphite_func.ts @@ -11,9 +11,9 @@ export function graphiteAddFunc($compile: any) { ''; const buttonTemplate = - '' + - ''; + ''; return { link: function($scope: any, elem: JQuery) { diff --git a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx index fcb080a70a4..1505d13a9af 100644 --- a/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx +++ b/public/app/plugins/datasource/loki/configuration/DerivedFields.tsx @@ -66,11 +66,11 @@ export const DerivedFields = (props: Props) => { })}
@@ -190,7 +190,7 @@
diff --git a/public/app/plugins/datasource/stackdriver/components/GroupBys.tsx b/public/app/plugins/datasource/stackdriver/components/GroupBys.tsx index d4076b3c84d..038d48cb4a0 100644 --- a/public/app/plugins/datasource/stackdriver/components/GroupBys.tsx +++ b/public/app/plugins/datasource/stackdriver/components/GroupBys.tsx @@ -39,7 +39,7 @@ export const GroupBys: FunctionComponent = ({ groupBys = [], values = [], - + } allowCustomValue diff --git a/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx b/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx index 104e075298a..5db1f88a1ce 100644 --- a/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx +++ b/public/app/plugins/datasource/stackdriver/components/LabelFilter.tsx @@ -76,7 +76,7 @@ export const LabelFilter: FunctionComponent = ({ allowCustomValue Component={ - + } options={[variableOptionGroup, ...labelsToGroupedOptions(Object.keys(labels))]} diff --git a/public/app/plugins/datasource/testdata/partials/query.editor.html b/public/app/plugins/datasource/testdata/partials/query.editor.html index e6f2ceba188..545eaa7c3fb 100644 --- a/public/app/plugins/datasource/testdata/partials/query.editor.html +++ b/public/app/plugins/datasource/testdata/partials/query.editor.html @@ -11,11 +11,11 @@
- +
-
diff --git a/public/app/plugins/panel/graph/thresholds_form.ts b/public/app/plugins/panel/graph/thresholds_form.ts index cc894930fb3..ac8a3c6006e 100644 --- a/public/app/plugins/panel/graph/thresholds_form.ts +++ b/public/app/plugins/panel/graph/thresholds_form.ts @@ -61,10 +61,10 @@ export class ThresholdFormCtrl { onThresholdTypeChange(index: number) { // Because of the ng-model binding, threshold's color mode is already set here if (this.panel.thresholds[index].colorMode === 'custom') { - this.panel.thresholds[index].fillColor = tinycolor(config.theme.palette.blueBase) + this.panel.thresholds[index].fillColor = tinycolor(config.theme.palette.blue85) .setAlpha(0.2) .toRgbString(); - this.panel.thresholds[index].lineColor = tinycolor(config.theme.palette.blueShade) + this.panel.thresholds[index].lineColor = tinycolor(config.theme.palette.blue77) .setAlpha(0.6) .toRgbString(); } diff --git a/public/app/plugins/panel/graph/time_regions_form.html b/public/app/plugins/panel/graph/time_regions_form.html index 634d5c1dece..3ed3bafc465 100644 --- a/public/app/plugins/panel/graph/time_regions_form.html +++ b/public/app/plugins/panel/graph/time_regions_form.html @@ -83,7 +83,7 @@
diff --git a/public/app/plugins/panel/homelinks/module.tsx b/public/app/plugins/panel/homelinks/module.tsx index 2826b27bbef..e6b437077f3 100755 --- a/public/app/plugins/panel/homelinks/module.tsx +++ b/public/app/plugins/panel/homelinks/module.tsx @@ -92,7 +92,8 @@ export const getStyles = stylesFactory(() => { margin-right: ${theme.spacing.sm}; `, footer: css` - ${styleMixins.listItem(theme)} + background: ${theme.colors.bg2}; + font-size: ${theme.typography.size.sm}; position: absolute; bottom: 0; width: 100%; diff --git a/public/app/plugins/panel/news/NewsPanel.tsx b/public/app/plugins/panel/news/NewsPanel.tsx index 4b75b9de6f4..0d9c1bb08b9 100755 --- a/public/app/plugins/panel/news/NewsPanel.tsx +++ b/public/app/plugins/panel/news/NewsPanel.tsx @@ -4,7 +4,7 @@ import { css } from 'emotion'; // Utils & Services import { GrafanaTheme } from '@grafana/data'; -import { stylesFactory, CustomScrollbar, styleMixins } from '@grafana/ui'; +import { stylesFactory, CustomScrollbar } from '@grafana/ui'; import config from 'app/core/config'; import { feedToDataFrame } from './utils'; import { sanitize } from 'app/core/utils/text'; @@ -82,8 +82,8 @@ export class NewsPanel extends PureComponent {
{item.title}
{dateTime(item.date).format('MMM DD')}
-
+
); })} @@ -98,11 +98,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({ height: 100%; `, item: css` - ${styleMixins.listItem(theme)} padding: ${theme.spacing.sm}; position: relative; margin-bottom: 4px; margin-right: ${theme.spacing.sm}; + border-bottom: 2px solid ${theme.colors.border1}; `, title: css` color: ${theme.colors.linkExternal}; @@ -113,6 +113,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({ content: css` p { margin-bottom: 4px; + color: ${theme.colors.text}; } `, date: css` diff --git a/public/app/plugins/panel/singlestat/mappings.html b/public/app/plugins/panel/singlestat/mappings.html index 5e5889eb9ec..ac99879f1a7 100644 --- a/public/app/plugins/panel/singlestat/mappings.html +++ b/public/app/plugins/panel/singlestat/mappings.html @@ -43,7 +43,7 @@
@@ -66,7 +66,7 @@
diff --git a/public/app/plugins/panel/table/column_options.html b/public/app/plugins/panel/table/column_options.html index 6be030d6dee..2fb9a636161 100644 --- a/public/app/plugins/panel/table/column_options.html +++ b/public/app/plugins/panel/table/column_options.html @@ -164,7 +164,7 @@
@@ -302,6 +302,6 @@
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 3639cde7ff9..647dda5d980 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -15,7 +15,6 @@ $theme-name: dark; // New Colors // ------------------------- -$blue-faint: #041126; $blue-light: #5794f2; $blue-base: #3274d9; $blue-shade: #1f60c4; @@ -31,7 +30,7 @@ $gray85: #c7d0d9; $gray70: #9fa7b3; $gray60: #7b8087; $gray33: #464c54; -$gray25: #343b40; +$gray25: #2c3235; $gray15: #202226; $gray10: #141619; $gray05: #0b0c0e; @@ -62,12 +61,12 @@ $white: #ffffff; // Accent colors // ------------------------- -$blue: #33b5e5; +$blue: #33a2e5; $red: $red-base; $yellow: #ecbb13; $orange: #eb7b18; $purple: #9933cc; -$variable: #339ae5; +$variable: #33a2e5; $brand-primary: #eb7b18; $brand-success: #299c46; @@ -92,11 +91,11 @@ $page-bg: #141619; $dashboard-bg: #0b0c0e; $text-color: #c7d0d9; -$text-color-strong: #ffffff; -$text-color-weak: #8e8e8e; -$text-color-faint: #222426; -$text-color-emphasis: #ececec; -$text-blue: #339ae5; +$text-color-strong: #f7f8fa; +$text-color-weak: #7b8087; +$text-color-faint: #464c54; +$text-color-emphasis: #f7f8fa; +$text-blue: #33a2e5; $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); $textShadow: none; @@ -110,7 +109,7 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%); $link-color: #d8d9da; $link-color-disabled: #8e8e8e; $link-hover-color: #ffffff; -$external-link-color: #33b5e5; +$external-link-color: #33a2e5; // Typography // ------------------------- @@ -205,11 +204,11 @@ $input-bg: $input-black; $input-bg-disabled: $dark-6; $input-color: #c7d0d9; -$input-border-color: #343b40; +$input-border-color: #2c3235; $input-box-shadow: none; $input-border-focus: #5794f2; $input-box-shadow-focus: $blue-light !default; -$input-color-placeholder: #555555; +$input-color-placeholder: #464c54; $input-label-bg: #202226; $input-color-select-arrow: $white; @@ -226,7 +225,7 @@ $typeahead-selected-color: $yellow; $dropdownBackground: $panel-bg; $dropdownBorder: #202226; $dropdownDividerTop: transparent; -$dropdownDividerBottom: #343b40; +$dropdownDividerBottom: #2c3235; $dropdownLinkColor: $link-color; $dropdownLinkColorHover: $white; @@ -356,7 +355,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover; $switch-bg: $input-bg; $switch-slider-color: $dark-3; $switch-slider-off-bg: $gray-1; -$switch-slider-on-bg: #5794f2; +$switch-slider-on-bg: #1f60c4; $switch-slider-shadow: 0 0 3px black; //Checkbox @@ -382,8 +381,8 @@ $panel-editor-viz-item-bg-hover: darken($blue-base, 46%); $panel-options-group-border: none; $panel-options-group-header-bg: #202226; -$panel-grid-placeholder-bg: $blue-faint; -$panel-grid-placeholder-shadow: 0 0 4px $blue-shade; +$panel-grid-placeholder-bg: darken(#1f60c4, 30%); +$panel-grid-placeholder-shadow: 0 0 4px #3274d9; // logs $logs-color-unkown: $gray-2; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index a49dca17881..53f499255f6 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -15,7 +15,6 @@ $theme-name: light; // New Colors // ------------------------- -$blue-faint: #f5f9ff; $blue-light: #5794f2; $blue-base: #3274d9; $blue-shade: #1f60c4; @@ -31,7 +30,7 @@ $gray85: #c7d0d9; $gray70: #9fa7b3; $gray60: #7b8087; $gray33: #464c54; -$gray25: #343b40; +$gray25: #2c3235; $gray15: #202226; $gray10: #141619; $gray05: #0b0c0e; @@ -56,12 +55,12 @@ $white: #ffffff; // Accent colors // ------------------------- -$blue: #0083b3; +$blue: #33a2e5; $red: $red-base; $yellow: #ff851b; $orange: #ff7941; $purple: #9954bb; -$variable: #339ae5; +$variable: #33a2e5; $brand-primary: #ff7941; $brand-success: #3eb15b; @@ -85,12 +84,12 @@ $body-bg: #ffffff; $page-bg: #ffffff; $dashboard-bg: #f7f8fa; -$text-color: #52545c; -$text-color-strong: #41444b; -$text-color-weak: #767980; -$text-color-faint: #35373f; -$text-color-emphasis: #41444b; -$text-blue: #339ae5; +$text-color: #464c54; +$text-color-strong: #202226; +$text-color-weak: #7b8087; +$text-color-faint: #9fa7b3; +$text-color-emphasis: #202226; +$text-blue: #33a2e5; $text-shadow-faint: none; @@ -100,14 +99,14 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%); // Links // ------------------------- -$link-color: #52545c; -$link-color-disabled: #acb6bf; -$link-hover-color: #1e2028; -$external-link-color: #5794f2; +$link-color: #464c54; +$link-color-disabled: #7b8087; +$link-hover-color: #202226; +$external-link-color: #33a2e5; // Typography // ------------------------- -$headings-color: #52545c; +$headings-color: #2c3235; $abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; @@ -116,14 +115,14 @@ $hr-border-color: $gray-4 !default; // Panel // ------------------------- $panel-bg: #ffffff; -$panel-border: 1px solid #e9edf2; -$panel-header-hover-bg: #f7f8fa; +$panel-border: 1px solid #dce1e6; +$panel-header-hover-bg: #f1f5f9; $panel-corner: $gray-4; // Page header -$page-header-bg: #f7f8fa; +$page-header-bg: #f1f5f9; $page-header-shadow: inset 0px -3px 10px $gray-6; -$page-header-border-color: #e9edf2; +$page-header-border-color: #dce1e6; $divider-border-color: $gray-2; @@ -197,13 +196,13 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6); $input-bg: $white; $input-bg-disabled: $gray-5; -$input-color: #343b40; +$input-color: #464c54; $input-border-color: #c7d0d9; $input-box-shadow: none; $input-border-focus: #5794f2; $input-box-shadow-focus: #5794f2; $input-color-placeholder: #9fa7b3; -$input-label-bg: #f7f8fa; +$input-label-bg: #f1f5f9; $input-color-select-arrow: #7b8087; // search @@ -242,9 +241,9 @@ $navbar-button-border: $gray-4; // Sidemenu // ------------------------- $side-menu-bg: #202226; -$side-menu-border: 1px solid #343b40; +$side-menu-border: 1px solid #2c3235; $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6; -$side-menu-item-hover-bg: #343b40; +$side-menu-item-hover-bg: #2c3235; $side-menu-shadow: 5px 0px 10px -5px $gray-1; $side-menu-link-color: $gray-4; $side-menu-icon-color: #9fa7b3; @@ -375,8 +374,8 @@ $panel-editor-viz-item-bg-hover: lighten($blue-base, 45%); $panel-options-group-border: none; $panel-options-group-header-bg: $gray-5; -$panel-grid-placeholder-bg: $blue-faint; -$panel-grid-placeholder-shadow: 0 0 4px $blue-light; +$panel-grid-placeholder-bg: lighten(#5794f2, 30%); +$panel-grid-placeholder-shadow: 0 0 4px #5794f2; // logs $logs-color-unkown: $gray-5; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 3e5ef757f3b..61dec6c23a1 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -112,6 +112,7 @@ $input-border: 1px solid $input-border-color; margin-right: $space-xs; border-radius: $input-border-radius; justify-content: space-between; + border: none; &--grow { flex-grow: 1; diff --git a/public/sass/components/_query_editor.scss b/public/sass/components/_query_editor.scss index 6dfa5ced9d6..1ee15d90746 100644 --- a/public/sass/components/_query_editor.scss +++ b/public/sass/components/_query_editor.scss @@ -15,35 +15,6 @@ margin: 20px 0; } -.gf-form-query { - .gf-form, - .gf-form-filler { - margin-bottom: 2px; - } - - .gf-form-switch, - .gf-form-switch label, - .gf-form-input, - .gf-form-select-wrapper, - .gf-form-filler, - .gf-form-label { - 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; - } -} - .tight-form-func { background: $tight-form-func-bg; diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 32660716c97..c7e45dbca43 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -20,6 +20,10 @@ div.flot-text { } } +.template-variable { + color: $variable; +} + .panel-solo { position: fixed; bottom: 0;