IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-02 12:17:01 -06:00
Code Issues Packages Projects Releases Wiki Activity

changed root font to 100%(default 16px), changed font-size from px to rem, updated rem sizes in template and default.ts files, removed display classes and variables since not used, removed lead class and variables since not usedremoved serif font since not used and probably never should be used

Browse Source
This commit is contained in:
ijin08 2019-03-07 15:37:17 +01:00
parent 56682cb1eb
commit c5f4239703
6 changed files with 58 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
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: .875rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
@ -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: 9.625rem;
$page-sidebar-margin: 3.5rem;
// Links
// -------------------------
@ -174,7 +160,7 @@ $input-padding-y-lg: 10px !default;
$input-height: 35px !default;
$gf-form-margin: 0.2rem;
$gf-form-margin: 0.175rem;
$gf-form-input-height: 35px;
$cursor-disabled: not-allowed !default;
@ -199,12 +185,12 @@ $zindex-typeahead: 1060;
// Buttons
//
$btn-padding-x: 1rem !default;
$btn-padding-y: 0.7rem !default;
$btn-padding-x: .875rem !default;
$btn-padding-y: 0.6125rem !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-x-sm: 0.4375rem !default;
$btn-padding-y-sm: 0.25rem !default;
$btn-padding-x-lg: 21px !default;

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

@ -5,23 +5,23 @@ 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: {
base: '13px',
xs: '10px',
s: '12px',
m: '14px',
l: '18px',
root: '100%',
base: '.8125rem',
xs: '.625rem',
s: '.75rem',
m: '.875rem',
l: '1.125rem',
},
heading: {
h1: '2rem',
h2: '1.75rem',
h3: '1.5rem',
h4: '1.3rem',
h5: '1.2rem',
h6: '1rem',
h1: '1.75rem',
h2: '1.5rem',
h3: '1.3125rem',
h4: '1.125rem',
h5: '1rem',
h6: '.875rem',
},
weight: {
light: 300,

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

@ -16,10 +16,10 @@ export interface GrafanaThemeCommons {
typography: {
fontFamily: {
sansSerif: string;
serif: string;
monospace: string;
};
size: {
root: string;
base: string;
xs: string;
s: string;

52
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: 0.875rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
@ -88,40 +88,26 @@ $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;
$font-size-root: 14px !default;
$font-size-base: 13px !default;
$font-size-root: 100% !default;
$font-size-base: 0.8125rem !default;
$font-size-lg: 18px !default;
$font-size-md: 14px !default;
$font-size-sm: 12px !default;
$font-size-xs: 10px !default;
$font-size-lg: 1.125rem !default;
$font-size-md: 0.875rem !default;
$font-size-sm: 0.75rem !default;
$font-size-xs: 0.625rem !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: 1.75rem !default;
$font-size-h2: 1.5rem !default;
$font-size-h3: 1.3125rem !default;
$font-size-h4: 1.125rem !default;
$font-size-h5: 1rem !default;
$font-size-h6: 0.875rem !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: 9.625rem;
$page-sidebar-margin: 3.5rem;
// Links
// -------------------------
@ -177,7 +163,7 @@ $input-padding-y-lg: 10px !default;
$input-height: 35px !default;
$gf-form-margin: 0.2rem;
$gf-form-margin: 0.175rem;
$gf-form-input-height: 35px;
$cursor-disabled: not-allowed !default;
@ -202,12 +188,12 @@ $zindex-typeahead: 1060;
// Buttons
//
$btn-padding-x: 1rem !default;
$btn-padding-y: 0.7rem !default;
$btn-padding-x: 0.875rem !default;
$btn-padding-y: 0.6125rem !default;
$btn-line-height: 1 !default;
$btn-font-weight: 500 !default;
$btn-padding-x-sm: 0.5rem !default;
$btn-padding-x-sm: 0.4375rem !default;
$btn-padding-y-sm: 0.25rem !default;
$btn-padding-x-lg: 21px !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);