Apply colours to components

UI/WebServerResources/scss/core/_functions.scss

@@ -41,3 +41,18 @@
   @return $value;
 }
 
+/// Utility fonction to easily get any hue from any palette anyware
+/// More easy to remember than variable names
+@function sg-color($color, $hue) {
+  @return map-get($color, $hue);
+}
+
+/// Utility fonction to easily get font size from typographic scale
+/// More easy to remember than variable names.
+/// @usage : provide type-size from the Material design typographic scale
+/// (caption, body, button, menu, subhead, title, headline, display-1, display-2, display-3, display-4 ; ther's also shortcut aliases : d1, d2, d3, d4)
+/// @return : type size
+@function sg-size($size) {
+  @return map-get($typeSize, $size);
+}
+

UI/WebServerResources/scss/core/base_styles/_base_style.scss

@@ -10,7 +10,7 @@
  */
 
 
-body,
-.main { // see if '.main' fit the purposes
+main { 
+  background-color: sg-color($sogoPaper, 200);
   padding-bottom: $toolbar-height; // padding to compensate for the bottom bar
 }

UI/WebServerResources/scss/core/typography/typography.scss

@@ -180,6 +180,24 @@ $sg-font-size-6: nth($sg-typo-scale, 6) * 1px;
 $sg-font-size-7: nth($sg-typo-scale, 7) * 1px;
 $sg-font-size-8: nth($sg-typo-scale, 8) * 1px;
 $sg-font-size-9: nth($sg-typo-scale, 9) * 1px;
+// In a convenient map
+$typeSize: (
+  caption:  12,
+  body: 14,
+  button: 14,
+  subhead: 16,
+  title: 20,
+  headline: 24,
+  display-1: 34,
+  d1: 34,
+  display-2: 45,
+  d2: 45,
+  display-3: 56,
+  d3: 56,
+  display-4: 112,
+  d4: 112
+);
+
 
 // Basic line heights
 // ----------------------------------------------------------------------------

UI/WebServerResources/scss/core/variables.scss

@@ -7,43 +7,46 @@ $version: '3.alpha';
 // palettes import -
 // ------------------------------------------------------------------------------
 // fixme : consolidate all settings and imports in a decent 'settings' file
-@import '../themes/color-palette'; // fixme : clarify if it is deeded or assure by javascript
+//@import '../themes/color-palette'; // fixme : clarify if it is needed or assure by javascript
+@import 'components/palette';        // fixme : The maps in color-palettes are more js then scss
 
 // Font Variables
 $font-family: 'Fira sans', 'Helvetica Neue', sans-serif !default;
-//$dark-theme: false !default;
-//$foreground-color-palette: $color-grey !default;
-$primary-color: map-get($color-vintage-blue, 'A700') !default;
-//$foreground-primary-color: rgba($foreground-base-color, 0.73) !default;
 
+$primary-color: sg-color($sogoBlue, 300) !default;
+//$foreground-primary-color: rgba($foreground-base-color, 0.73) !default;
 $foreground-primary-color: rgba($primary-color, 0.87);//override
-//$foreground-secondary-color: rgba($foreground-base-color, 0.54) !default;
-//$foreground-tertiary-color: rgba($foreground-base-color, 0.26) !default;
-//$foreground-quarternary-color: rgba($foreground-base-color, 0.12) !default;
-//$foreground-text-shadow: none !default;
+
 $bottombar-color: #212121;
 
-//$input-border-color: $foreground-secondary-color !default;
-//$input-disabled-border-color: $foreground-tertiary-color !default;
-//
-//$background-color-palette: $color-paper !default;
-//$background-color-base: map-get($background-color-palette, '200') !default;
-//
-//$primary-color-palette: $color-light-blue !default;
-//$warn-color-palette: $color-red !default;
-//$primary-color-palette-contrast-color: white !default;
-//todo ; create grey map$bottombar-color: #121212;
+
 
 // Layout
 // ------------------------------
 
 $baseline-grid:            8px !default;
+// shortcut aliases for $baseline-grid
+$bl: $baseline-grid;
+$line: $baseline-grid;
 $sg-md-grid-pitch: 8 * $baseline-grid;
+// shortcut alias for $sg-md-grid-pitch
+$pitch: $sg-md-grid-pitch;
+// Google specifies dimensions in grid pitch
+// This is a small utility function
+// Return dimension in px
+@function grid-step($nb) {
+  @return ($pitch * $nb)
+}
+
+// Margins
+$layout-gutter-width:      ($baseline-grid * 2) !default;
+$md-base-margin: $layout-gutter-width;
+// alias
+$mg: $layout-gutter-width;
+
 $layout-breakpoint-sm:     600px !default;
 $layout-breakpoint-md:     960px !default;
 $layout-breakpoint-lg:     1200px !default;
-$layout-gutter-width:      ($baseline-grid * 2) !default;
-
 
 // App bar variables
 $app-bar-height: 64px;
@@ -65,7 +68,6 @@ $whiteframe-shadow-z5: 0px 27px 24px 0 rgba(0,0,0,0.2) !default;
 $whiteframe-zindex-z5: 5 !default;
 
 
-
 // Z-indexes
 //--------------------------------------------