renamed default variables: s -> sm, m -> md, l -> lg

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

@@ -18,9 +18,9 @@ $enable-hover-media-query: false !default;
 // variables. Mostly focused on spacing.
 
 $space-xs: ${theme.spacing.xs} !default;
-$space-sm: ${theme.spacing.s} !default;
-$space-md: ${theme.spacing.m} !default;
-$space-lg: ${theme.spacing.l} !default;
+$space-sm: ${theme.spacing.sm} !default;
+$space-md: ${theme.spacing.md} !default;
+$space-lg: ${theme.spacing.lg} !default;
 $space-xl: ${theme.spacing.xl} !default;
 $spacer: ${theme.spacing.d} !default;
 $spacer-x: $spacer !default;
@@ -51,7 +51,7 @@ $spacers: (
     ),
   ),
 ) !default;
-$border-width: ${theme.border.width.s} !default;
+$border-width: ${theme.border.width.sm} !default;
 
 // Grid breakpoints
 //
@@ -60,9 +60,9 @@ $border-width: ${theme.border.width.s} !default;
 
 $grid-breakpoints: (
   xs: ${theme.breakpoints.xs},
-  sm: ${theme.breakpoints.s},
-  md: ${theme.breakpoints.m},
-  lg: ${theme.breakpoints.l},
+  sm: ${theme.breakpoints.sm},
+  md: ${theme.breakpoints.md},
+  lg: ${theme.breakpoints.lg},
   xl: ${theme.breakpoints.xl},
 ) !default;
 
@@ -96,12 +96,12 @@ $font-family-base: $font-family-sans-serif !default;
 $font-size-root: ${theme.typography.size.root} !default;
 $font-size-base: ${theme.typography.size.base} !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-lg: ${theme.typography.size.lg} !default;
+$font-size-md: ${theme.typography.size.md} !default;
+$font-size-sm: ${theme.typography.size.sm} !default;
 $font-size-xs: ${theme.typography.size.xs} !default;
 
-$line-height-base: ${theme.typography.lineHeight.l} !default;
+$line-height-base: ${theme.typography.lineHeight.lg} !default;
 $font-weight-semi-bold: ${theme.typography.weight.semibold};
 
 $font-size-h1: ${theme.typography.heading.h1} !default;
@@ -114,7 +114,7 @@ $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: ${theme.typography.weight.normal} !default;
-$headings-line-height: ${theme.typography.lineHeight.s} !default;
+$headings-line-height: ${theme.typography.lineHeight.sm} !default;
 
 $hr-border-width: $border-width !default;
 $dt-font-weight: bold !default;

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

@@ -11,9 +11,9 @@ const theme: GrafanaThemeCommons = {
       root: '14px',
       base: '13px',
       xs: '10px',
-      s: '12px',
-      m: '14px',
-      l: '18px',
+      sm: '12px',
+      md: '14px',
+      lg: '18px',
     },
     heading: {
       h1: '28px',
@@ -30,35 +30,35 @@ const theme: GrafanaThemeCommons = {
     },
     lineHeight: {
       xs: 1,
-      s: 1.1,
-      m: 4 / 3,
-      l: 1.5,
+      sm: 1.1,
+      md: 4 / 3,
+      lg: 1.5,
     },
   },
   breakpoints: {
     xs: '0',
-    s: '544px',
-    m: '768px',
-    l: '992px',
+    sm: '544px',
+    md: '768px',
+    lg: '992px',
     xl: '1200px',
   },
   spacing: {
     d: '14px',
     xs: '4px',
-    s: '8px',
-    m: '16px',
-    l: '24px',
+    sm: '8px',
+    md: '16px',
+    lg: '24px',
     xl: '32px',
     gutter: '30px',
   },
   border: {
     radius: {
       xs: '2px',
-      s: '3px',
-      m: '5px',
+      sm: '3px',
+      md: '5px',
     },
     width: {
-      s: '1px',
+      sm: '1px',
     },
   },
 };

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

@@ -8,9 +8,9 @@ export interface GrafanaThemeCommons {
   // TODO: not sure if should be a part of theme
   breakpoints: {
     xs: string;
-    s: string;
-    m: string;
-    l: string;
+    sm: string;
+    md: string;
+    lg: string;
     xl: string;
   };
   typography: {
@@ -22,9 +22,9 @@ export interface GrafanaThemeCommons {
       root: string;
       base: string;
       xs: string;
-      s: string;
-      m: string;
-      l: string;
+      sm: string;
+      md: string;
+      lg: string;
     };
     weight: {
       light: number;
@@ -33,9 +33,9 @@ export interface GrafanaThemeCommons {
     };
     lineHeight: {
       xs: number; //1
-      s: number; //1.1
-      m: number; // 4/3
-      l: number; // 1.5
+      sm: number; //1.1
+      md: number; // 4/3
+      lg: number; // 1.5
     };
     // TODO: Refactor to use size instead of custom defs
     heading: {
@@ -50,20 +50,20 @@ export interface GrafanaThemeCommons {
   spacing: {
     d: string;
     xs: string;
-    s: string;
-    m: string;
-    l: string;
+    sm: string;
+    md: string;
+    lg: string;
     xl: string;
     gutter: string;
   };
   border: {
     radius: {
       xs: string;
-      s: string;
-      m: string;
+      sm: string;
+      md: string;
     };
     width: {
-      s: string;
+      sm: string;
     };
   };
 }