Colores

@salix/app/src/app.js

@@ -5,5 +5,6 @@ import * as routes from './configroutes';
 import padding from './styles/layout.css'
 import margin from './styles/margin.scss'
 import layout from './styles/padding.scss'
+import background from './styles/background.scss'
 
 bootstrap();

@salix/app/src/styles/background.scss

@@ -0,0 +1,27 @@
+@import "colors";
+
+$bg-main: $color-green;
+$bg-minor: $color-orange;
+$bg-content: $color-light-grey;
+$bg-panel: $color-white;
+$bg-dark-bar: $color-black;
+$bg-dark-menu: $color-dark-grey;
+
+html [bg-main], .bg-main {
+  background-color: $bg-main;
+}
+html [bg-minor], .bg-minor {
+  background-color: $bg-minor;
+}
+html [bg-content], .bg-content {
+  background-color: $bg-content;
+}
+html [bg-panel], .bg-panel {
+  background-color: $bg-panel;
+}
+html [bg-dark-bar], .bg-dark-bar {
+   background-color: $bg-dark-bar;
+}
+html [bg-dark-menu], .bg-dark-menu {
+  background-color: darken($bg-dark-menu, 35%);
+}

@salix/app/src/styles/colors.scss

@@ -0,0 +1,7 @@
+
+$color-green: rgb(139,195,74);
+$color-orange: rgb(255,171,64);
+$color-dark-grey: #424242;
+$color-light-grey: gray;
+$color-white: white;
+$color-black: black;

@salix/app/src/styles/font-family.css

@@ -0,0 +1,24 @@
+@font-face {
+    font-family: roboto-italic;
+    src: url(./fonts/Roboto-Italic.ttf);
+}
+@font-face {
+    font-family: roboto-thin;
+    src: url(./fonts/Roboto-Thin.ttf);
+}
+@font-face {
+    font-family: roboto-regular;
+    src: url(./fonts/Roboto-Regular.ttf);
+}
+@font-face {
+    font-family: roboto-condensed-italic;
+    src: url(./fonts/Roboto-CondensedItalic.ttf);
+}
+@font-face {
+    font-family: roboto-bold;
+    src: url(./fonts/Roboto-Bold.ttf);
+}
+@font-face {
+    font-family: roboto-bold-condensed;
+    src: url(./fonts/Roboto-BoldCondensed.ttf);
+}