changed all rems to pixels in defaults and template, changed back root font size

packages/grafana-ui/src/components/PanelOptionsGroup/_PanelOptionsGroup.scss

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

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

@@ -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: .875rem !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
@@ -127,8 +127,8 @@ $border-radius-sm: 2px !default;
 
 // Page
 
-$page-sidebar-width: 9.625rem;
-$page-sidebar-margin: 3.5rem;
+$page-sidebar-width: 154px;
+$page-sidebar-margin: 56px;
 
 // Links
 // -------------------------
@@ -160,7 +160,7 @@ $input-padding-y-lg: 10px !default;
 
 $input-height: 35px !default;
 
-$gf-form-margin: 0.175rem;
+$gf-form-margin: 3px;
 $gf-form-input-height: 35px;
 
 $cursor-disabled: not-allowed !default;
@@ -185,13 +185,13 @@ $zindex-typeahead: 1060;
 // Buttons
 //
 
-$btn-padding-x: .875rem !default;
-$btn-padding-y: 0.6125rem !default;
+$btn-padding-x: 14px !default;
+$btn-padding-y: 10px !default;
 $btn-line-height: 1 !default;
 $btn-font-weight: ${theme.typography.weight.semibold} !default;
 
-$btn-padding-x-sm: 0.4375rem !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;

packages/grafana-ui/src/themes/default.ts

@@ -8,20 +8,20 @@ const theme: GrafanaThemeCommons = {
       monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace",
     },
     size: {
-      root: '100%',
-      base: '.8125rem',
-      xs: '.625rem',
-      s: '.75rem',
-      m: '.875rem',
-      l: '1.125rem',
+      root: '14px',
+      base: '13px',
+      xs: '10px',
+      s: '12px',
+      m: '14px',
+      l: '18px',
     },
     heading: {
-      h1: '1.75rem',
-      h2: '1.5rem',
-      h3: '1.3125rem',
-      h4: '1.125rem',
-      h5: '1rem',
-      h6: '.875rem',
+      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',
+    },
   },
 };
 

packages/grafana-ui/src/types/theme.ts

@@ -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;
@@ -60,6 +60,9 @@ export interface GrafanaThemeCommons {
       s: string;
       m: string;
     };
+    width: {
+      s: string;
+    };
   };
 }
 

public/sass/_variables.generated.scss

@@ -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: 0.875rem !default;
+$spacer: 14px !default;
 $spacer-x: $spacer !default;
 $spacer-y: $spacer !default;
 $spacers: (
@@ -91,23 +91,23 @@ $font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif;
 $font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
 $font-family-base: $font-family-sans-serif !default;
 
-$font-size-root: 100% !default;
-$font-size-base: 0.8125rem !default;
+$font-size-root: 14px !default;
+$font-size-base: 13px !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;
+$font-size-lg: 18px !default;
+$font-size-md: 14px !default;
+$font-size-sm: 12px !default;
+$font-size-xs: 10px !default;
 
 $line-height-base: 1.5 !default;
 $font-weight-semi-bold: 500;
 
-$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;
+$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;
@@ -130,8 +130,8 @@ $border-radius-sm: 2px !default;
 
 // Page
 
-$page-sidebar-width: 9.625rem;
-$page-sidebar-margin: 3.5rem;
+$page-sidebar-width: 154px;
+$page-sidebar-margin: 56px;
 
 // Links
 // -------------------------
@@ -163,7 +163,7 @@ $input-padding-y-lg: 10px !default;
 
 $input-height: 35px !default;
 
-$gf-form-margin: 0.175rem;
+$gf-form-margin: 3px;
 $gf-form-input-height: 35px;
 
 $cursor-disabled: not-allowed !default;
@@ -188,13 +188,13 @@ $zindex-typeahead: 1060;
 // Buttons
 //
 
-$btn-padding-x: 0.875rem !default;
-$btn-padding-y: 0.6125rem !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.4375rem !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;