diff --git a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap index 4ff2ee30ee7..939f26b4dd8 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap +++ b/packages/grafana-ui/src/components/ThresholdsEditor/__snapshots__/ThresholdsEditor.test.tsx.snap @@ -195,7 +195,7 @@ exports[`Render should render with base threshold 1`] = ` "typography": Object { "fontFamily": Object { "monospace": "Menlo, Monaco, Consolas, 'Courier New', monospace", - "sansSerif": "'Roboto', Helvetica, Arial, sans-serif", + "sansSerif": "'Roboto', 'Helvetica Neue', Arial, sans-serif", }, "heading": Object { "h1": "28px", @@ -211,6 +211,10 @@ exports[`Render should render with base threshold 1`] = ` "sm": 1.1, "xs": 1, }, + "link": Object { + "decoration": "none", + "hoverDecoration": "none", + }, "size": Object { "base": "13px", "lg": "18px", @@ -225,6 +229,15 @@ exports[`Render should render with base threshold 1`] = ` "semibold": 500, }, }, + "zIndex": Object { + "dropdown": "1000", + "modal": "1050", + "modalBackdrop": "1040", + "navbarFixed": "1020", + "sidemenu": "1025", + "tooltip": "1030", + "typeahead": "1060", + }, } } > @@ -339,7 +352,7 @@ exports[`Render should render with base threshold 1`] = ` "typography": Object { "fontFamily": Object { "monospace": "Menlo, Monaco, Consolas, 'Courier New', monospace", - "sansSerif": "'Roboto', Helvetica, Arial, sans-serif", + "sansSerif": "'Roboto', 'Helvetica Neue', Arial, sans-serif", }, "heading": Object { "h1": "28px", @@ -355,6 +368,10 @@ exports[`Render should render with base threshold 1`] = ` "sm": 1.1, "xs": 1, }, + "link": Object { + "decoration": "none", + "hoverDecoration": "none", + }, "size": Object { "base": "13px", "lg": "18px", @@ -369,6 +386,15 @@ exports[`Render should render with base threshold 1`] = ` "semibold": 500, }, }, + "zIndex": Object { + "dropdown": "1000", + "modal": "1050", + "modalBackdrop": "1040", + "navbarFixed": "1020", + "sidemenu": "1025", + "tooltip": "1030", + "typeahead": "1060", + }, } } /> diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts index 16f4a20d139..23e63655f21 100644 --- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts @@ -110,7 +110,6 @@ $font-size-h4: ${theme.typography.heading.h4} !default; $font-size-h5: ${theme.typography.heading.h5} !default; $font-size-h6: ${theme.typography.heading.h6} !default; -$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; $headings-line-height: ${theme.typography.lineHeight.sm} !default; // Components @@ -130,8 +129,8 @@ $page-sidebar-margin: 56px; // Links // ------------------------- -$link-decoration: none !default; -$link-hover-decoration: none !default; +$link-decoration: ${theme.typography.link.decoration} !default; +$link-hover-decoration: ${theme.typography.link.hoverDecoration} !default; // Tables // @@ -166,13 +165,13 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www // ------------------------- // Used for a bird's eye view of components dependent on the z-axis // Try to avoid customizing these :) -$zindex-dropdown: 1000; -$zindex-navbar-fixed: 1020; -$zindex-sidemenu: 1025; -$zindex-tooltip: 1030; -$zindex-modal-backdrop: 1040; -$zindex-modal: 1050; -$zindex-typeahead: 1060; +$zindex-dropdown: ${theme.zIndex.dropdown}; +$zindex-navbar-fixed: ${theme.zIndex.navbarFixed}; +$zindex-sidemenu: ${theme.zIndex.sidemenu}; +$zindex-tooltip: ${theme.zIndex.tooltip}; +$zindex-modal-backdrop: ${theme.zIndex.modalBackdrop}; +$zindex-modal: ${theme.zIndex.modal}; +$zindex-typeahead: ${theme.zIndex.typeahead}; // Buttons // @@ -197,10 +196,8 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; $side-menu-width: 60px; // dashboard -$dashboard-padding: 10px * 2; -$panel-horizontal-padding: 10; -$panel-vertical-padding: 5; -$panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px; +$dashboard-padding: $space-md; +$panel-padding: 0 $space-md $space-sm $space-md; // tabs $tabs-padding: 10px 15px 9px; diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index 2dc50a7a5b1..934fa7634d1 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -4,7 +4,7 @@ const theme: GrafanaThemeCommons = { name: 'Grafana Default', typography: { fontFamily: { - sansSerif: "'Roboto', Helvetica, Arial, sans-serif", + sansSerif: "'Roboto', 'Helvetica Neue', Arial, sans-serif", monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace", }, size: { @@ -34,6 +34,10 @@ const theme: GrafanaThemeCommons = { md: 4 / 3, lg: 1.5, }, + link: { + decoration: 'none', + hoverDecoration: 'none', + }, }, breakpoints: { xs: '0', @@ -66,6 +70,15 @@ const theme: GrafanaThemeCommons = { horizontal: 10, vertical: 5, }, + zIndex: { + dropdown: '1000', + navbarFixed: '1020', + sidemenu: '1025', + tooltip: '1030', + modalBackdrop: '1040', + modal: '1050', + typeahead: '1060', + }, }; export default theme; diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts index 4da0ba8218c..fcc427541e6 100644 --- a/packages/grafana-ui/src/types/theme.ts +++ b/packages/grafana-ui/src/types/theme.ts @@ -46,6 +46,10 @@ export interface GrafanaThemeCommons { h5: string; h6: string; }; + link: { + decoration: string; + hoverDecoration: string; + }; }; spacing: { d: string; @@ -71,6 +75,15 @@ export interface GrafanaThemeCommons { horizontal: number; vertical: number; }; + zIndex: { + dropdown: string; + navbarFixed: string; + sidemenu: string; + tooltip: string; + modalBackdrop: string; + modal: string; + typeahead: string; + }; } export interface GrafanaTheme extends GrafanaThemeCommons { diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss index 21fc602b8ba..fe9476f3b5f 100644 --- a/public/sass/_variables.generated.scss +++ b/public/sass/_variables.generated.scss @@ -90,7 +90,7 @@ $grid-gutter-width: 30px !default; // Typography // ------------------------- -$font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif; +$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Arial, sans-serif; $font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; $font-size-root: 14px !default; @@ -113,7 +113,6 @@ $font-size-h4: 18px !default; $font-size-h5: 16px !default; $font-size-h6: 14px !default; -$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; $headings-line-height: 1.1 !default; // Components @@ -200,10 +199,8 @@ $btn-semi-transparent: rgba(0, 0, 0, 0.2) !default; $side-menu-width: 60px; // dashboard -$dashboard-padding: 10px * 2; -$panel-horizontal-padding: 10; -$panel-vertical-padding: 5; -$panel-padding: 0px $panel-horizontal-padding + 0px $panel-vertical-padding + 0px $panel-horizontal-padding + 0px; +$dashboard-padding: $space-md; +$panel-padding: 0 $space-md $space-sm $space-md; // tabs $tabs-padding: 10px 15px 9px; diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 9efae56d5e4..479e0d6c9cd 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -110,7 +110,6 @@ h6, .h5, .h6 { margin-bottom: $space-sm; - font-family: $headings-font-family; font-weight: $font-weight-regular; line-height: $headings-line-height; color: $headings-color; diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss index 8acf98be1b2..a50ab0d072d 100644 --- a/public/sass/components/_panel_editor.scss +++ b/public/sass/components/_panel_editor.scss @@ -83,10 +83,6 @@ padding: 0 $dashboard-padding $space-sm $dashboard-padding; } - .panel-editor-container__panel { - margin: 0 $dashboard-padding; - } - .search-container { left: 0 !important; } diff --git a/public/sass/components/_panel_logs.scss b/public/sass/components/_panel_logs.scss index 22c82461e85..4e2bc86d960 100644 --- a/public/sass/components/_panel_logs.scss +++ b/public/sass/components/_panel_logs.scss @@ -3,8 +3,7 @@ $column-horizontal-spacing: 10px; .logs-panel-options { display: flex; background-color: $page-bg; - padding: $panel-padding; - padding-top: 10px; + padding: $space-sm $space-md $space-sm $space-md; border-radius: $border-radius; margin: $space-md 0 $space-sm; border: $panel-border; diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index 6abadfa465b..e58b37711d0 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -13,7 +13,7 @@ .tabbed-view-header { box-shadow: $page-header-shadow; border-bottom: 1px solid $page-header-border-color; - padding: 0 $dashboard-padding; + padding: 0 $space-md; @include clearfix(); } diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index c02c9227d29..df3a34e1d06 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -260,7 +260,6 @@ div.flot-text { } .dashboard-header { - font-family: $headings-font-family; font-size: $font-size-h3; text-align: center; overflow: hidden; @@ -273,10 +272,6 @@ div.flot-text { } } -.panel-full-edit { - padding-top: $dashboard-padding; -} - .dashboard-loading { height: 60vh; display: flex; diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 60c1a600014..9784f8c89e4 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -176,12 +176,10 @@ } .explore-panel__header { - padding: $panel-padding; - padding-top: 5px; - padding-bottom: 0; + padding: $space-sm $space-md 0 $space-md; display: flex; cursor: pointer; - margin-bottom: 5px; + margin-bottom: $space-sm; transition: all 0.1s linear; }