From daaa4284cbb5be965adcd36b48c54c3fb172dbdc Mon Sep 17 00:00:00 2001
From: iRouge <bfavreault@inverse.ca>
Date: Thu, 5 Feb 2015 15:53:20 -0500
Subject: [PATCH] Add Sass version of SOGo's palettes, mixin to generate
 theme-class and a getter function for convenient access to colours trough any
 scss

---
 UI/Templates/UIxPageFrame.wox                 |   1 -
 UI/WebServerResources/js/Common/ui.js         |  24 ++-
 .../scss/components/_palette.scss             | 149 +++++++++++++-----
 UI/WebServerResources/scss/styles.scss        |   2 +-
 4 files changed, 120 insertions(+), 56 deletions(-)

diff --git a/UI/Templates/UIxPageFrame.wox b/UI/Templates/UIxPageFrame.wox
index 9d60d69e8..387b1a8b1 100644
--- a/UI/Templates/UIxPageFrame.wox
+++ b/UI/Templates/UIxPageFrame.wox
@@ -173,7 +173,6 @@
           <script type = "text/javascript" rsrc:src = "js/Common/ui.js"><!-- space --></script>
           <script type = "text/javascript" rsrc:src = "js/Common/ui-common.js"><!-- space --></script>
           <script type = "text/javascript" rsrc:src = "js/Common/ui-desktop.js"><!-- space --></script>
-          <script type = "text/javascript" rsrc:src = "md-colors/colors.js"><!-- space --></script>
 
           <var:if condition = "hasProductSpecificJavaScript">
             <script type = "text/javascript"
diff --git a/UI/WebServerResources/js/Common/ui.js b/UI/WebServerResources/js/Common/ui.js
index 7640671e6..c8c8ff156 100644
--- a/UI/WebServerResources/js/Common/ui.js
+++ b/UI/WebServerResources/js/Common/ui.js
@@ -10,7 +10,7 @@
  */
 (function () {
   'use strict';
-  angular.module('SOGo.UI', ['ngMaterial', 'mdColors'])
+  angular.module('SOGo.UI', ['ngMaterial'])
 
       .config(function ($mdThemingProvider) {
 
@@ -25,10 +25,10 @@
           '700': '388e3c',
           '800': '367d2e',
           '900': '225e1b',
-          'A100': '#b9f6ca',
-          'A200': '#69f0ae',
-          'A400': '#00e676',
-          'A700': '#00c853',
+          'A100': 'b9f6ca',
+          'A200': '69f0ae',
+          'A400': '00e676',
+          'A700': '00c853',
           'contrastDefaultColor': 'dark',
           'contrastLightColors': '500 600 700 800 900'
         });
@@ -62,11 +62,11 @@
           '700': '857545',
           '800': '524517',
           '900': '433809',
-          '1000': '#000000',
-          'A100': '#ffffff',
-          'A200': '#eeeeee',
-          'A400': '#bdbdbd',
-          'A700': '#616161',
+          '1000': '000000',
+          'A100': 'ffffff',
+          'A200': 'eeeeee',
+          'A400': 'bdbdbd',
+          'A700': '616161',
           'contrastDefaultColor': 'dark',
           'contrastLightColors': '500 600 700 800 900'
         });
@@ -119,9 +119,7 @@
                 $log.debug("close RIGHT is done");
               });
         };
-      })
-
-  .controller('ColorController', ColorController);
+      });
 
 })();
 
diff --git a/UI/WebServerResources/scss/components/_palette.scss b/UI/WebServerResources/scss/components/_palette.scss
index 5b9d4f5d9..c2021e07d 100755
--- a/UI/WebServerResources/scss/components/_palette.scss
+++ b/UI/WebServerResources/scss/components/_palette.scss
@@ -1,11 +1,12 @@
 /**
 *
-* Material design color palettes NOT TO BE USED WITH ANGULAR-MATERIAL
+* Material design color palettes
 * @see http://www.google.com/design/spec/style/color.html
 *
 **/
 
-/* ==========  Blacks  ========== */
+// Blacks for text
+// ----------------------------------------------------------------------------
 
 $colorBlack: #000;
 $colorGrayDark: rgba($colorBlack, .87);
@@ -13,64 +14,102 @@ $colorGray: rgba($colorBlack, .54);
 $colorGrayLight: rgba($colorBlack, .26);
 $colorGrayLighter: rgba($colorBlack, .12);
 
-/* ==========  Color Palettes  ========== */
+// Color Palettes
+// At this stage of developpement --eg. version AngularMaterial v0.7.1--  ngMaterial theming is incomplete
+// and does not apply every specified hues, neither provide acces to it trough it's theming API
+// As a workaround we use sass palettes and theming
 
-$paletteRed: #fde0dc #f9bdbb #f69988 #f36c60 #e84e40 #e51c23 #dd191d
-           #d01716 #c41411 #b0120a #ff7997 #ff5177 #ff2d6f #e00032;
+$paletteRed: #fde0dc #f9bdbb #f69988 #f36c60 #e84e40 #e51c23 #dd191d #d01716 #c41411 #b0120a #ff7997 #ff5177 #ff2d6f #e00032;
 
-$palettePink:   #fce4ec #f8bbd0 #f48fb1 #f06292 #ec407a #e91e63 #d81b60
-              #c2185b #ad1457 #880e4f #ff80ab #ff4081 #f50057 #c51162;
+$palettePink: #fce4ec #f8bbd0 #f48fb1 #f06292 #ec407a #e91e63 #d81b60 #c2185b #ad1457 #880e4f #ff80ab #ff4081 #f50057 #c51162;
 
-$palettePurple: #f3e5f5 #e1bee7 #ce93d8 #ba68c8 #ab47bc #9c27b0 #8e24aa
-              #7b1fa2 #6a1b9a #4a148c #ea80fc #e040fb #d500f9 #aa00ff;
+$palettePurple: #f3e5f5 #e1bee7 #ce93d8 #ba68c8 #ab47bc #9c27b0 #8e24aa #7b1fa2 #6a1b9a #4a148c #ea80fc #e040fb #d500f9 #a0f;
 
-$paletteDeepPurple: #673ab7 #ede7f6 #d1c4e9 #b39ddb #9575cd #7e57c2 #673ab7
-                  #5e35b1 #512da8 #4527a0 #311b92 #b388ff #7c4dff #651fff
-                  #6200ea;
+$paletteDeepPurple: #673ab7 #ede7f6 #d1c4e9 #b39ddb #9575cd #7e57c2 #673ab7 #5e35b1 #512da8 #4527a0 #311b92 #b388ff #7c4dff #651fff #6200ea;
 
-$paletteIndigo: #e8eaf6 #c5cae9 #9fa8da #7986cb #5c6bc0 #3f51b5 #3949ab
-              #303f9f #283593 #1a237e #8c9eff #536dfe #3d5afe #304ffe;
+$paletteIndigo: #e8eaf6 #c5cae9 #9fa8da #7986cb #5c6bc0 #3f51b5 #3949ab #303f9f #283593 #1a237e #8c9eff #536dfe #3d5afe #304ffe;
 
-$paletteBlue: #e7e9fd #d0d9ff #afbfff #91a7ff #738ffe #5677fc #4e6cef
-            #455ede #3b50ce #2a36b1 #a6baff #6889ff #4d73ff #4d69ff;
+$paletteBlue: #e7e9fd #d0d9ff #afbfff #91a7ff #738ffe #5677fc #4e6cef #455ede #3b50ce #2a36b1 #a6baff #6889ff #4d73ff #4d69ff;
 
-$paletteLightBlue: #e1f5fe #b3e5fc #81d4fa #4fc3f7 #29b6f6 #03a9f4 #039be5
-                 #0288d1 #0277bd #01579b #80d8ff #40c4ff #00b0ff #0091ea;
+$paletteLightBlue: #e1f5fe #b3e5fc #81d4fa #4fc3f7 #29b6f6 #03a9f4 #039be5 #0288d1 #0277bd #01579b #80d8ff #40c4ff #00b0ff #0091ea;
 
-$paletteCyan: #e0f7fa #b2ebf2 #80deea #4dd0e1 #26c6da #00bcd4 #00acc1
-            #0097a7 #00838f #006064 #84ffff #18ffff #00e5ff #00b8d4;
+$paletteCyan: #e0f7fa #b2ebf2 #80deea #4dd0e1 #26c6da #00bcd4 #00acc1 #0097a7 #00838f #006064 #84ffff #18ffff #00e5ff #00b8d4;
 
-$paletteTeal: #e0f2f1 #b2dfdb #80cbc4 #4db6ac #26a69a #009688 #00897b
-            #00796b #00695c #004d40 #a7ffeb #64ffda #1de9b6 #00bfa5;
+$paletteTeal: #e0f2f1 #b2dfdb #80cbc4 #4db6ac #26a69a #009688 #00897b #00796b #00695c #004d40 #a7ffeb #64ffda #1de9b6 #00bfa5;
 
-$paletteGreen: #d0f8ce #a3e9a4 #72d572 #42bd41 #2baf2b #259b24 #0a8f08
-             #0a7e07 #056f00 #0d5302 #a2f78d #5af158 #14e715 #12c700;
+$paletteGreen: #d0f8ce #a3e9a4 #72d572 #42bd41 #2baf2b #259b24 #0a8f08 #0a7e07 #056f00 #0d5302 #a2f78d #5af158 #14e715 #12c700;
 
-$paletteLightGreen: #f1f8e9 #dcedc8 #c5e1a5 #aed581 #9ccc65 #8bc34a #7cb342
-                  #689f38 #558b2f #33691e #ccff90 #b2ff59 #76ff03 #64dd17;
+$paletteLightGreen: #f1f8e9 #dcedc8 #c5e1a5 #aed581 #9ccc65 #8bc34a #7cb342 #689f38 #558b2f #33691e #ccff90 #b2ff59 #76ff03 #64dd17;
 
-$paletteLime: #f9fbe7 #f0f4c3 #e6ee9c #dce775 #d4e157 #cddc39 #c0ca33
-            #afb42b #9e9d24 #827717 #f4ff81 #eeff41 #c6ff00 #aeea00;
+$paletteLime: #f9fbe7 #f0f4c3 #e6ee9c #dce775 #d4e157 #cddc39 #c0ca33 #afb42b #9e9d24 #827717 #f4ff81 #eeff41 #c6ff00 #aeea00;
 
-$paletteYellow: #fffde7 #fff9c4 #fff59d #fff176 #ffee58 #ffeb3b #fdd835
-              #fbc02d #f9a825 #f57f17 #ffff8d #ffff00 #ffea00 #ffd600;
+$paletteYellow: #fffde7 #fff9c4 #fff59d #fff176 #ffee58 #ffeb3b #fdd835 #fbc02d #f9a825 #f57f17 #ffff8d #ff0 #ffea00 #ffd600;
 
-$paletteAmber: #fff8e1 #ffecb3 #ffe082 #ffd54f #ffca28 #ffc107 #ffb300
-             #ffa000 #ff8f00 #ff6f00 #ffe57f #ffd740 #ffc400 #ffab00;
+$paletteAmber: #fff8e1 #ffecb3 #ffe082 #ffd54f #ffca28 #ffc107 #ffb300 #ffa000 #ff8f00 #ff6f00 #ffe57f #ffd740 #ffc400 #ffab00;
 
-$paletteOrange: #fff3e0 #ffe0b2 #ffcc80 #ffb74d #ffa726 #ff9800 #fb8c00
-              #f57c00 #ef6c00 #e65100 #ffd180 #ffab40 #ff9100 #ff6d00;
+$paletteOrange: #fff3e0 #ffe0b2 #ffcc80 #ffb74d #ffa726 #ff9800 #fb8c00 #f57c00 #ef6c00 #e65100 #ffd180 #ffab40 #ff9100 #ff6d00;
 
-$paletteDeepOrange: #fbe9e7 #ffccbc #ffab91 #ff8a65 #ff7043 #ff5722 #f4511e
-                  #e64a19 #d84315 #bf360c #ff9e80 #ff6e40 #ff3d00 #dd2c00;
+$paletteDeepOrange: #fbe9e7 #ffccbc #ffab91 #ff8a65 #ff7043 #ff5722 #f4511e #e64a19 #d84315 #bf360c #ff9e80 #ff6e40 #ff3d00 #dd2c00;
 
-$paletteBrown: #efebe9 #d7ccc8 #bcaaa4 #a1887f #8d6e63
-             #795548 #6d4c41 #5d4037 #4e342e #3e2723;
+$paletteBrown: #efebe9 #d7ccc8 #bcaaa4 #a1887f #8d6e63 #795548 #6d4c41 #5d4037 #4e342e #3e2723;
 
-$paletteBlueGrey: #eceff1 #cfd8dc #b0bec5 #90a4ae #78909c
-                #607d8b #546e7a #455a64 #37474f #263238;
+$paletteBlueGrey: #eceff1 #cfd8dc #b0bec5 #90a4ae #78909c #607d8b #546e7a #455a64 #37474f #263238;
 
-/* ==========  Color definitions  ========== */
+/// SOGo custom theme palettes
+//  ---------------------------------------------------------------------------
+
+$sogoPaper: (
+  50: #fcf7f8,
+  100: #f7f1dc,
+  200: #ede5ca,
+  300: #e6d8ba,
+  400: #e2d2a3,
+  500: #d6c48d,
+  600: #baa870,
+  700: #857545,
+  800: #524517,
+  900: #433809,
+  1000: #000,
+  A100: #fff,
+  A200: #eee,
+  A400: #bdbdbd,
+  A700: #616161
+);
+$sogoGreen: (
+  50: #eaf5e9,
+  100: #cbe5c8,
+  200: #aad6a5,
+  300: #88c781,
+  400: #66b86a,
+  500: #56b04c,
+  600: #4da143,
+  700: #388e3c,
+  800: #367d2e,
+  900: #225e1b,
+  A100: #b9f6ca,
+  A200: #69f0ae,
+  A400: #00e676,
+  A700: #00c853
+);
+$vintageBlue: (
+  50: #f0faf9,
+  100:#e1f5f3,
+  200:#ceebe8,
+  300:#bfe0dd,
+  400:#b2d6d3,
+  500:#a1ccc8,
+  600:#8ebfbb,
+  700:#7db3b0,
+  800:#639997,
+  900:#4d8080,
+  A100: #d4f7fa,
+  A200: #c3f5fa,
+  A400: #53e3f0,
+  A700: #00b0c0
+);
+
+// Color definitions of Google's palette
+// ----------------------------------------------------------------------------
 
 $colorRed50:   nth($paletteRed, 1);
 $colorRed100:  nth($paletteRed, 2);
@@ -333,3 +372,31 @@ $colorBlueGrey600:  nth($paletteBlueGrey, 7);
 $colorBlueGrey700:  nth($paletteBlueGrey, 8);
 $colorBlueGrey800:  nth($paletteBlueGrey, 9);
 $colorBlueGrey900:  nth($paletteBlueGrey, 10);
+
+
+/// Provides Color definitions of SOGo's palette in classes
+/// One for 'color' attribute (fg-color), and one for the
+/// background-color attribute (bg-color)
+/// We also provide a getter function for use in class definitions
+// ----------------------------------------------------------------------------
+
+@function sg-color($color, $hue) {
+  @return map-get($color, $hue);
+}
+
+@mixin colors($palette, $name) {
+  $hues: map-keys($palette);
+  @each $hue in $hues {
+    $color: map-get($palette, $hue);
+    .fg-#{$name}-#{$hue} {
+      color: $color;
+    };
+    .bg-#{$name}-#{$hue} {
+      background-color: $color;
+    };
+  };
+}
+@include colors($vintageBlue, 'sogoBlue');
+@include colors($sogoGreen, 'sogoGreen');
+@include colors($sogoPaper, 'sogoPaper');
+
diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss
index 032f8ab35..f5a3b1333 100755
--- a/UI/WebServerResources/scss/styles.scss
+++ b/UI/WebServerResources/scss/styles.scss
@@ -61,7 +61,7 @@
 @import 'components/whiteframe/whiteframe.scss';
 
 // Theme
-//@import '../angular-material/src/components/backdrop/backdrop-theme.scss';
+@import 'components/palette';
 //@import '../angular-material/src/components/bottomSheet/bottomSheet-theme.scss';
 //@import '../angular-material/src/components/button/button-theme.scss';
 //@import '../angular-material/src/components/card/card-theme.scss';