IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15859 from grafana/font-use-rem-and-variables

Browse Source 
Styling update to fonts
This commit is contained in:
Torkel Ödegaard
2019-03-11 13:09:49 +01:00
committed by GitHub
parent a853e2c36e 00ce556bd0
commit 4a70d4ef61
7 changed files with 67 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss
View File

@@ -53,7 +53,7 @@
}
.panel-options-group__title {
font-size: 1.1rem;
font-size: 16px;
position: relative;
top: 1px;
}

80
packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
View File

@@ -17,7 +17,7 @@ $enable-hover-media-query: false !default;
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
$spacer: 1rem !default;
$spacer: ${theme.spacing.m} !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
@@ -46,7 +46,7 @@ $spacers: (
),
),
) !default;
$border-width: 1px !default;
$border-width: ${theme.border.width.s} !default;
// Grid breakpoints
//
@@ -54,11 +54,11 @@ $border-width: 1px !default;
// adapting to different screen sizes, for use in media queries.
$grid-breakpoints: (
xs: 0,
sm: 544px,
md: 768px,
lg: 992px,
xl: 1200px,
xs: ${theme.breakpoints.xs},
sm: ${theme.breakpoints.s},
md: ${theme.breakpoints.m},
lg: ${theme.breakpoints.l},
xl: ${theme.breakpoints.xl},
) !default;
// Grid containers
@@ -84,46 +84,32 @@ $enable-flex: true;
// Typography
// -------------------------
$font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, 'Times New Roman', Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
$font-family-sans-serif: ${theme.typography.fontFamily.sansSerif};
$font-family-monospace: ${theme.typography.fontFamily.monospace};
$font-family-base: $font-family-sans-serif !default;
$font-size-root: 14px !default;
$font-size-base: 13px !default;
$font-size-root: ${theme.typography.size.root} !default;
$font-size-base: ${theme.typography.size.base} !default;
$font-size-lg: 18px !default;
$font-size-md: 14px !default;
$font-size-sm: 12px !default;
$font-size-xs: 10px !default;
$font-size-lg: ${theme.typography.size.l} !default;
$font-size-md: ${theme.typography.size.m} !default;
$font-size-sm: ${theme.typography.size.s} !default;
$font-size-xs: ${theme.typography.size.xs} !default;
$line-height-base: 1.5 !default;
$font-weight-semi-bold: 500;
$line-height-base: ${theme.typography.lineHeight.l} !default;
$font-weight-semi-bold: ${theme.typography.weight.semibold};
$font-size-h1: 2rem !default;
$font-size-h2: 1.75rem !default;
$font-size-h3: 1.5rem !default;
$font-size-h4: 1.3rem !default;
$font-size-h5: 1.2rem !default;
$font-size-h6: 1rem !default;
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
$display1-weight: 400 !default;
$display2-weight: 400 !default;
$display3-weight: 400 !default;
$display4-weight: 400 !default;
$lead-font-size: 1.25rem !default;
$lead-font-weight: 300 !default;
$font-size-h1: ${theme.typography.heading.h1} !default;
$font-size-h2: ${theme.typography.heading.h2} !default;
$font-size-h3: ${theme.typography.heading.h3} !default;
$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-margin-bottom: ($spacer / 2) !default;
$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$headings-font-weight: 400 !default;
$headings-line-height: 1.1 !default;
$headings-font-weight: ${theme.typography.weight.normal} !default;
$headings-line-height: ${theme.typography.lineHeight.s} !default;
$hr-border-width: $border-width !default;
$dt-font-weight: bold !default;
@@ -141,8 +127,8 @@ $border-radius-sm: 2px !default;
// Page
$page-sidebar-width: 11rem;
$page-sidebar-margin: 4rem;
$page-sidebar-width: 154px;
$page-sidebar-margin: 56px;
// Links
// -------------------------
@@ -174,7 +160,7 @@ $input-padding-y-lg: 10px !default;
$input-height: 35px !default;
$gf-form-margin: 0.2rem;
$gf-form-margin: 3px;
$gf-form-input-height: 35px;
$cursor-disabled: not-allowed !default;
@@ -199,13 +185,13 @@ $zindex-typeahead: 1060;
// Buttons
//
$btn-padding-x: 1rem !default;
$btn-padding-y: 0.7rem !default;
$btn-padding-x: 14px !default;
$btn-padding-y: 10px !default;
$btn-line-height: 1 !default;
$btn-font-weight: 500 !default;
$btn-font-weight: ${theme.typography.weight.semibold} !default;
$btn-padding-x-sm: 0.5rem !default;
$btn-padding-y-sm: 0.25rem !default;
$btn-padding-x-sm: 7px !default;
$btn-padding-y-sm: 4px !default;
$btn-padding-x-lg: 21px !default;
$btn-padding-y-lg: 11px !default;

25
packages/grafana-ui/src/themes/default.ts
View File

@@ -5,10 +5,10 @@ const theme: GrafanaThemeCommons = {
typography: {
fontFamily: {
sansSerif: "'Roboto', Helvetica, Arial, sans-serif",
serif: "Georgia, 'Times New Roman', Times, serif",
monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace",
},
size: {
root: '14px',
base: '13px',
xs: '10px',
s: '12px',
@@ -16,12 +16,12 @@ const theme: GrafanaThemeCommons = {
l: '18px',
},
heading: {
h1: '2rem',
h2: '1.75rem',
h3: '1.5rem',
h4: '1.3rem',
h5: '1.2rem',
h6: '1rem',
h1: '28px',
h2: '24px',
h3: '21px',
h4: '18px',
h5: '16px',
h6: '14px',
},
weight: {
light: 300,
@@ -35,7 +35,7 @@ const theme: GrafanaThemeCommons = {
l: 1.5,
},
},
brakpoints: {
breakpoints: {
xs: '0',
s: '544px',
m: '768px',
@@ -44,9 +44,9 @@ const theme: GrafanaThemeCommons = {
},
spacing: {
xs: '0',
s: '0.2rem',
m: '1rem',
l: '1.5rem',
s: '3px',
m: '14px',
l: '21px',
gutter: '30px',
},
border: {
@@ -55,6 +55,9 @@ const theme: GrafanaThemeCommons = {
s: '3px',
m: '5px',
},
width: {
s: '1px',
},
},
};

7
packages/grafana-ui/src/types/theme.ts
View File

@@ -6,7 +6,7 @@ export enum GrafanaThemeType {
export interface GrafanaThemeCommons {
name: string;
// TODO: not sure if should be a part of theme
brakpoints: {
breakpoints: {
xs: string;
s: string;
m: string;
@@ -16,10 +16,10 @@ export interface GrafanaThemeCommons {
typography: {
fontFamily: {
sansSerif: string;
serif: string;
monospace: string;
};
size: {
root: string;
base: string;
xs: string;
s: string;
@@ -60,6 +60,9 @@ export interface GrafanaThemeCommons {
s: string;
m: string;
};
width: {
s: string;
};
};
}

42
public/sass/_variables.generated.scss
View File

@@ -20,7 +20,7 @@ $enable-hover-media-query: false !default;
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
$spacer: 1rem !default;
$spacer: 14px !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
@@ -88,7 +88,6 @@ $enable-flex: true;
// -------------------------
$font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif;
$font-family-serif: Georgia, 'Times New Roman', Times, serif;
$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
$font-family-base: $font-family-sans-serif !default;
@@ -103,25 +102,12 @@ $font-size-xs: 10px !default;
$line-height-base: 1.5 !default;
$font-weight-semi-bold: 500;
$font-size-h1: 2rem !default;
$font-size-h2: 1.75rem !default;
$font-size-h3: 1.5rem !default;
$font-size-h4: 1.3rem !default;
$font-size-h5: 1.2rem !default;
$font-size-h6: 1rem !default;
$display1-size: 6rem !default;
$display2-size: 5.5rem !default;
$display3-size: 4.5rem !default;
$display4-size: 3.5rem !default;
$display1-weight: 400 !default;
$display2-weight: 400 !default;
$display3-weight: 400 !default;
$display4-weight: 400 !default;
$lead-font-size: 1.25rem !default;
$lead-font-weight: 300 !default;
$font-size-h1: 28px !default;
$font-size-h2: 24px !default;
$font-size-h3: 21px !default;
$font-size-h4: 18px !default;
$font-size-h5: 16px !default;
$font-size-h6: 14px !default;
$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -144,8 +130,8 @@ $border-radius-sm: 2px !default;
// Page
$page-sidebar-width: 11rem;
$page-sidebar-margin: 4rem;
$page-sidebar-width: 154px;
$page-sidebar-margin: 56px;
// Links
// -------------------------
@@ -177,7 +163,7 @@ $input-padding-y-lg: 10px !default;
$input-height: 35px !default;
$gf-form-margin: 0.2rem;
$gf-form-margin: 3px;
$gf-form-input-height: 35px;
$cursor-disabled: not-allowed !default;
@@ -202,13 +188,13 @@ $zindex-typeahead: 1060;
// Buttons
//
$btn-padding-x: 1rem !default;
$btn-padding-y: 0.7rem !default;
$btn-padding-x: 14px !default;
$btn-padding-y: 10px !default;
$btn-line-height: 1 !default;
$btn-font-weight: 500 !default;
$btn-padding-x-sm: 0.5rem !default;
$btn-padding-y-sm: 0.25rem !default;
$btn-padding-x-sm: 7px !default;
$btn-padding-y-sm: 4px !default;
$btn-padding-x-lg: 21px !default;
$btn-padding-y-lg: 11px !default;

23
public/sass/base/_type.scss
View File

@@ -141,29 +141,6 @@ h6,
font-size: $font-size-h6;
}
.lead {
font-size: $lead-font-size;
font-weight: $lead-font-weight;
}
// Type display classes
.display-1 {
font-size: $display1-size;
font-weight: $display1-weight;
}
.display-2 {
font-size: $display2-size;
font-weight: $display2-weight;
}
.display-3 {
font-size: $display3-size;
font-weight: $display3-weight;
}
.display-4 {
font-size: $display4-size;
font-weight: $display4-weight;
}
//
// Horizontal rules
//

9
public/sass/mixins/_mixins.scss
View File

@@ -79,10 +79,6 @@
// FONTS
// --------------------------------------------------
@mixin font-family-serif() {
font-family: $font-family-serif;
}
@mixin font-family-sans-serif() {
font-family: $font-family-sans-serif;
}
@@ -97,11 +93,6 @@
line-height: $lineHeight;
}
@mixin font-serif($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) {
@include font-family-serif();
@include font-shorthand($size, $weight, $lineHeight);
}
@mixin font-sans-serif($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) {
@include font-family-sans-serif();
@include font-shorthand($size, $weight, $lineHeight);