Docs: extension styling and theming (#1267)

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/app.scss

@@ -11,6 +11,18 @@
 }
 
 :root {
+  --unit: 8px;
+  --padding: var(--unit);
+  --margin: var(--unit);
+  --border-radius: 3px;
+  --font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  --font-monospace: Lucida Console, Monaco, Consolas, monospace;
+  --font-size-small: calc(1.5 * var(--unit));
+  --font-size: calc(1.75 * var(--unit));
+  --font-size-big: calc(2 * var(--unit));
+  --font-weight-thin: 300;
+  --font-weight-normal: 400;
+  --font-weight-bold: 500;
   --mainBackground: #1e2124;
   --main-layout-header: 40px;
   --drag-region-height: 22px
@@ -122,7 +134,7 @@ code {
   vertical-align: middle;
   border-radius: $radius;
   font-family: $font-monospace;
-  font-size: $font-size * .9;
+  font-size: calc($font-size * .9);
   color: #b4b5b4;
 
   &.block {

src/renderer/components/radio/radio.scss

@@ -97,7 +97,7 @@
 
   .tick {
     color: $tickColor;
-    font: $font-size * 1.3 "Material Icons";
+    font: calc($font-size * 1.3) "Material Icons";
 
     &:after {
       content: "radio_button_unchecked";

src/renderer/components/vars.scss

@@ -5,17 +5,17 @@
 $unit: 8px;
 $padding: $unit;
 $margin: $unit;
-$radius: ceil($unit * .3);
+$radius: var(--border-radius);
 
 // Fonts
-$font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
-$font-monospace: Lucida Console, Monaco, Consolas, monospace;
-$font-size-small: floor(1.5 * $unit);
-$font-size: floor(1.75 * $unit);
-$font-size-big: floor(2 * $unit);
-$font-weight-thin: 300;
-$font-weight-normal: 400;
-$font-weight-bold: 500;
+$font-main: var(--font-main);
+$font-monospace: var(--font-monospace);
+$font-size-small: var(--font-size-small);
+$font-size: var(--font-size);
+$font-size-big: var(--font-size-big);
+$font-weight-thin: var(--font-weight-thin);
+$font-weight-normal: var(--font-weight-normal);
+$font-weight-bold: var(--font-weight-bold);
 
 // Z-index correlations
 $zIndex-sidebar-hover: 500;