work on typography

modules/ui/styles/global/dialog.less

@@ -0,0 +1,19 @@
+.dialog {
+
+}
+
+.dialog-content {
+
+}
+
+.dialog-buttons {
+
+}
+
+.dialog-ok {
+
+}
+
+.dialog-cancel {
+
+}

modules/ui/styles/global/documentation.less

@@ -1,6 +1,6 @@
 .documentation-content {
   background: #323444;
-  font-size: 13px;
+  font-size: 16px;
   padding: 10px;
 }
 

modules/ui/styles/global/headers.less

@@ -0,0 +1,24 @@
+h1, .h1 {
+  font-size: 2em;
+  font-weight: bold;
+}
+h2, .h2 {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+h3, .h3 {
+  font-size: 1.17em;
+  font-weight: bold;
+}
+h4, .h4 {
+  font-size: 1em;
+  font-weight: bold;
+}
+h5, .h5 {
+  font-size: .83em;
+  font-weight: bold;
+}
+h6, .h6 {
+  font-size: .67em;
+  font-weight: bold;
+}

modules/ui/styles/global/icons.less

@@ -0,0 +1,46 @@
+.icon-16 svg {
+  width: 16px;
+  height: 16px
+}
+
+.icon-32 svg {
+  width: 32px;
+  height: 32px
+}
+
+.icon-48 svg {
+  width: 48px;
+  height: 48px
+}
+
+.icon-64 svg {
+  width: 64px;
+  height: 64px
+}
+
+.icon-spin {
+  -webkit-animation: icon-spin 2s infinite linear;
+  animation: icon-spin 2s infinite linear;
+}
+
+@-webkit-keyframes icon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+@keyframes icon-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}

modules/ui/styles/global/index.less

@@ -1,4 +1,6 @@
 @import "./minireset.less";
+@import "./typography.less";
+@import "./headers";
 @import "../theme.less";
 @import "../mixins.less";
 @import "./main.less";
@@ -8,4 +10,6 @@
 @import "./svg.less";
 @import "./icons.less";
 @import "./scroll";
+@import "./tree";
 @import "./documentation";
+@import "./dialog.less";

modules/ui/styles/global/main.less

@@ -1,24 +1,22 @@
 html, pre {
-  font: @font-size 'Lucida Grande', sans-serif;
+  .regular-typography;
+  font-family:  'Roboto', 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, sans-serif;
 }
 
 body {
   background-color: @bg-color;
   color: @font-color;
-  font-family:  'Roboto', 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, sans-serif;
 }
 
 iframe {
   border: 0;
 }
 
+
 .disable-selection {
   .no-selection();
 }
 
-.compact-font, .condensed {
-  font-family:  'Roboto Condensed', 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, sans-serif;
-}
 
 pre {
   line-height: 1.5;
@@ -26,4 +24,8 @@ pre {
 
 .hover:hover {
   background-color: @color-highlight;
-}
+}
+
+path {
+  stroke: currentColor;
+}

modules/ui/styles/global/tables.less

@@ -1,5 +1,5 @@
 table {
-  font-size: @font-size;
+  .mid-typography;
 }
 
 table.striped {

modules/ui/styles/global/typography.less

@@ -0,0 +1,38 @@
+.svgSize(@size) {
+  svg {
+    width: @size;
+    height: @size;
+  }
+}
+
+.small-typography {
+  font-size: 12px;
+  line-height: 1.3;
+  .svgSize(16px);
+}
+
+.mid-typography {
+  font-size: 13px;
+  line-height: 1.35;
+  .svgSize(16px);
+}
+
+.regular-typography {
+  font-size: 14px;
+  line-height: 1.4;
+  .svgSize(17px);
+}
+
+.comfort-typography {
+  font-size: 16px;
+  line-height: 1.5;
+  .svgSize(18px)
+}
+
+.condensed {
+  font-family:  'Roboto Condensed', 'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, sans-serif;
+}
+
+.padded {
+ padding: 0.5em;
+}

modules/ui/styles/init/icons.less

@@ -1,19 +0,0 @@
-.icon-16 svg {
-  width: 16px;
-  height: 16px
-}
-
-.icon-32 svg {
-  width: 32px;
-  height: 32px
-}
-
-.icon-48 svg {
-  width: 48px;
-  height: 48px
-}
-
-.icon-64 svg {
-  width: 64px;
-  height: 64px
-}

modules/ui/styles/theme.less

@@ -26,7 +26,6 @@
 
 @color-text-highlight: #9cdaf7;
 
-@font-size: 11px;
 
 //@work-area-toolbar-bg-color: ;
 //@work-area-toolbar-font-color: ;