sogo/UI/WebServerResources/scss/components/_palette.scss

/// _palette.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-

/**
*
* Material design color palettes
* @see http://www.google.com/design/spec/style/color.html
*
**/

// Blacks for text
// ----------------------------------------------------------------------------

$colorBlack: #000;
$colorGrayDark: rgba($colorBlack, .87);
$colorGray: rgba($colorBlack, .54);
$colorGrayLight: rgba($colorBlack, .26);
$colorGrayLighter: rgba($colorBlack, .12);

// Whites for text
// ----------------------------------------------------------------------------
$colorWhite: #fff;


// 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;

$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 #a0f;

$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;

$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;

$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;

$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;

$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 #ff0 #ffea00 #ffd600;

$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;

$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;

$paletteBlueGrey: #eceff1 #cfd8dc #b0bec5 #90a4ae #78909c #607d8b #546e7a #455a64 #37474f #263238;

$paletteGrey: #fafafa #f5f5f5 #eeeeee #e0e0e0 #bdbdbd #9e9e9e #757575 #616161 #424242 #212121 #000000 #ffffff #eeeeee #bdbdbd #616161;

/// SOGo custom theme palettes
//  ---------------------------------------------------------------------------

$sogoPaper: (
  50: #fcfbf8,
  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: #857545
);
$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
);
$sogoBlue: (
  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);
$colorRed200:  nth($paletteRed, 3);
$colorRed300:  nth($paletteRed, 4);
$colorRed400:  nth($paletteRed, 5);
$colorRed500:  nth($paletteRed, 6);
$colorRed600:  nth($paletteRed, 7);
$colorRed700:  nth($paletteRed, 8);
$colorRed800:  nth($paletteRed, 9);
$colorRed900:  nth($paletteRed, 10);
$colorRedA100: nth($paletteRed, 11);
$colorRedA200: nth($paletteRed, 12);
$colorRedA400: nth($paletteRed, 13);
$colorRedA700: nth($paletteRed, 14);

$colorPink50:   nth($palettePink, 1);
$colorPink100:  nth($palettePink, 2);
$colorPink200:  nth($palettePink, 3);
$colorPink300:  nth($palettePink, 4);
$colorPink400:  nth($palettePink, 5);
$colorPink500:  nth($palettePink, 6);
$colorPink600:  nth($palettePink, 7);
$colorPink700:  nth($palettePink, 8);
$colorPink800:  nth($palettePink, 9);
$colorPink900:  nth($palettePink, 10);
$colorPinkA100: nth($palettePink, 11);
$colorPinkA200: nth($palettePink, 12);
$colorPinkA400: nth($palettePink, 13);
$colorPinkA700: nth($palettePink, 14);

$colorPurple50:   nth($palettePurple, 1);
$colorPurple100:  nth($palettePurple, 2);
$colorPurple200:  nth($palettePurple, 3);
$colorPurple300:  nth($palettePurple, 4);
$colorPurple400:  nth($palettePurple, 5);
$colorPurple500:  nth($palettePurple, 6);
$colorPurple600:  nth($palettePurple, 7);
$colorPurple700:  nth($palettePurple, 8);
$colorPurple800:  nth($palettePurple, 9);
$colorPurple900:  nth($palettePurple, 10);
$colorPurpleA100: nth($palettePurple, 11);
$colorPurpleA200: nth($palettePurple, 12);
$colorPurpleA400: nth($palettePurple, 13);
$colorPurpleA700: nth($palettePurple, 14);

$colorDeepPurple50:   nth($paletteDeepPurple, 1);
$colorDeepPurple100:  nth($paletteDeepPurple, 2);
$colorDeepPurple200:  nth($paletteDeepPurple, 3);
$colorDeepPurple300:  nth($paletteDeepPurple, 4);
$colorDeepPurple400:  nth($paletteDeepPurple, 5);
$colorDeepPurple500:  nth($paletteDeepPurple, 6);
$colorDeepPurple600:  nth($paletteDeepPurple, 7);
$colorDeepPurple700:  nth($paletteDeepPurple, 8);
$colorDeepPurple800:  nth($paletteDeepPurple, 9);
$colorDeepPurple900:  nth($paletteDeepPurple, 10);
$colorDeepPurpleA100: nth($paletteDeepPurple, 11);
$colorDeepPurpleA200: nth($paletteDeepPurple, 12);
$colorDeepPurpleA400: nth($paletteDeepPurple, 13);
$colorDeepPurpleA700: nth($paletteDeepPurple, 14);

$colorIndigo50:   nth($paletteIndigo, 1);
$colorIndigo100:  nth($paletteIndigo, 2);
$colorIndigo200:  nth($paletteIndigo, 3);
$colorIndigo300:  nth($paletteIndigo, 4);
$colorIndigo400:  nth($paletteIndigo, 5);
$colorIndigo500:  nth($paletteIndigo, 6);
$colorIndigo600:  nth($paletteIndigo, 7);
$colorIndigo700:  nth($paletteIndigo, 8);
$colorIndigo800:  nth($paletteIndigo, 9);
$colorIndigo900:  nth($paletteIndigo, 10);
$colorIndigoA100: nth($paletteIndigo, 11);
$colorIndigoA200: nth($paletteIndigo, 12);
$colorIndigoA400: nth($paletteIndigo, 13);
$colorIndigoA700: nth($paletteIndigo, 14);

$colorBlue50:   nth($paletteBlue, 1);
$colorBlue100:  nth($paletteBlue, 2);
$colorBlue200:  nth($paletteBlue, 3);
$colorBlue300:  nth($paletteBlue, 4);
$colorBlue400:  nth($paletteBlue, 5);
$colorBlue500:  nth($paletteBlue, 6);
$colorBlue600:  nth($paletteBlue, 7);
$colorBlue700:  nth($paletteBlue, 8);
$colorBlue800:  nth($paletteBlue, 9);
$colorBlue900:  nth($paletteBlue, 10);
$colorBlueA100: nth($paletteBlue, 11);
$colorBlueA200: nth($paletteBlue, 12);
$colorBlueA400: nth($paletteBlue, 13);
$colorBlueA700: nth($paletteBlue, 14);

$colorLightBlue50:   nth($paletteLightBlue, 1);
$colorLightBlue100:  nth($paletteLightBlue, 2);
$colorLightBlue200:  nth($paletteLightBlue, 3);
$colorLightBlue300:  nth($paletteLightBlue, 4);
$colorLightBlue400:  nth($paletteLightBlue, 5);
$colorLightBlue500:  nth($paletteLightBlue, 6);
$colorLightBlue600:  nth($paletteLightBlue, 7);
$colorLightBlue700:  nth($paletteLightBlue, 8);
$colorLightBlue800:  nth($paletteLightBlue, 9);
$colorLightBlue900:  nth($paletteLightBlue, 10);
$colorLightBlueA100: nth($paletteLightBlue, 11);
$colorLightBlueA200: nth($paletteLightBlue, 12);
$colorLightBlueA400: nth($paletteLightBlue, 13);
$colorLightBlueA700: nth($paletteLightBlue, 14);

$colorCyan50:   nth($paletteCyan, 1);
$colorCyan100:  nth($paletteCyan, 2);
$colorCyan200:  nth($paletteCyan, 3);
$colorCyan300:  nth($paletteCyan, 4);
$colorCyan400:  nth($paletteCyan, 5);
$colorCyan500:  nth($paletteCyan, 6);
$colorCyan600:  nth($paletteCyan, 7);
$colorCyan700:  nth($paletteCyan, 8);
$colorCyan800:  nth($paletteCyan, 9);
$colorCyan900:  nth($paletteCyan, 10);
$colorCyanA100: nth($paletteCyan, 11);
$colorCyanA200: nth($paletteCyan, 12);
$colorCyanA400: nth($paletteCyan, 13);
$colorCyanA700: nth($paletteCyan, 14);

$colorTeal50:   nth($paletteTeal, 1);
$colorTeal100:  nth($paletteTeal, 2);
$colorTeal200:  nth($paletteTeal, 3);
$colorTeal300:  nth($paletteTeal, 4);
$colorTeal400:  nth($paletteTeal, 5);
$colorTeal500:  nth($paletteTeal, 6);
$colorTeal600:  nth($paletteTeal, 7);
$colorTeal700:  nth($paletteTeal, 8);
$colorTeal800:  nth($paletteTeal, 9);
$colorTeal900:  nth($paletteTeal, 10);
$colorTealA100: nth($paletteTeal, 11);
$colorTealA200: nth($paletteTeal, 12);
$colorTealA400: nth($paletteTeal, 13);
$colorTealA700: nth($paletteTeal, 14);

$colorGreen50:   nth($paletteGreen, 1);
$colorGreen100:  nth($paletteGreen, 2);
$colorGreen200:  nth($paletteGreen, 3);
$colorGreen300:  nth($paletteGreen, 4);
$colorGreen400:  nth($paletteGreen, 5);
$colorGreen500:  nth($paletteGreen, 6);
$colorGreen600:  nth($paletteGreen, 7);
$colorGreen700:  nth($paletteGreen, 8);
$colorGreen800:  nth($paletteGreen, 9);
$colorGreen900:  nth($paletteGreen, 10);
$colorGreenA100: nth($paletteGreen, 11);
$colorGreenA200: nth($paletteGreen, 12);
$colorGreenA400: nth($paletteGreen, 13);
$colorGreenA700: nth($paletteGreen, 14);

$colorLightGreen50:   nth($paletteLightGreen, 1);
$colorLightGreen100:  nth($paletteLightGreen, 2);
$colorLightGreen200:  nth($paletteLightGreen, 3);
$colorLightGreen300:  nth($paletteLightGreen, 4);
$colorLightGreen400:  nth($paletteLightGreen, 5);
$colorLightGreen500:  nth($paletteLightGreen, 6);
$colorLightGreen600:  nth($paletteLightGreen, 7);
$colorLightGreen700:  nth($paletteLightGreen, 8);
$colorLightGreen800:  nth($paletteLightGreen, 9);
$colorLightGreen900:  nth($paletteLightGreen, 10);
$colorLightGreenA100: nth($paletteLightGreen, 11);
$colorLightGreenA200: nth($paletteLightGreen, 12);
$colorLightGreenA400: nth($paletteLightGreen, 13);
$colorLightGreenA700: nth($paletteLightGreen, 14);

$colorLime50:   nth($paletteLime, 1);
$colorLime100:  nth($paletteLime, 2);
$colorLime200:  nth($paletteLime, 3);
$colorLime300:  nth($paletteLime, 4);
$colorLime400:  nth($paletteLime, 5);
$colorLime500:  nth($paletteLime, 6);
$colorLime600:  nth($paletteLime, 7);
$colorLime700:  nth($paletteLime, 8);
$colorLime800:  nth($paletteLime, 9);
$colorLime900:  nth($paletteLime, 10);
$colorLimeA100: nth($paletteLime, 11);
$colorLimeA200: nth($paletteLime, 12);
$colorLimeA400: nth($paletteLime, 13);
$colorLimeA700: nth($paletteLime, 14);

$colorYellow50:   nth($paletteYellow, 1);
$colorYellow100:  nth($paletteYellow, 2);
$colorYellow200:  nth($paletteYellow, 3);
$colorYellow300:  nth($paletteYellow, 4);
$colorYellow400:  nth($paletteYellow, 5);
$colorYellow500:  nth($paletteYellow, 6);
$colorYellow600:  nth($paletteYellow, 7);
$colorYellow700:  nth($paletteYellow, 8);
$colorYellow800:  nth($paletteYellow, 9);
$colorYellow900:  nth($paletteYellow, 10);
$colorYellowA100: nth($paletteYellow, 11);
$colorYellowA200: nth($paletteYellow, 12);
$colorYellowA400: nth($paletteYellow, 13);
$colorYellowA700: nth($paletteYellow, 14);

$colorAmber50:   nth($paletteAmber, 1);
$colorAmber100:  nth($paletteAmber, 2);
$colorAmber200:  nth($paletteAmber, 3);
$colorAmber300:  nth($paletteAmber, 4);
$colorAmber400:  nth($paletteAmber, 5);
$colorAmber500:  nth($paletteAmber, 6);
$colorAmber600:  nth($paletteAmber, 7);
$colorAmber700:  nth($paletteAmber, 8);
$colorAmber800:  nth($paletteAmber, 9);
$colorAmber900:  nth($paletteAmber, 10);
$colorAmberA100: nth($paletteAmber, 11);
$colorAmberA200: nth($paletteAmber, 12);
$colorAmberA400: nth($paletteAmber, 13);
$colorAmberA700: nth($paletteAmber, 14);

$colorOrange50:   nth($paletteOrange, 1);
$colorOrange100:  nth($paletteOrange, 2);
$colorOrange200:  nth($paletteOrange, 3);
$colorOrange300:  nth($paletteOrange, 4);
$colorOrange400:  nth($paletteOrange, 5);
$colorOrange500:  nth($paletteOrange, 6);
$colorOrange600:  nth($paletteOrange, 7);
$colorOrange700:  nth($paletteOrange, 8);
$colorOrange800:  nth($paletteOrange, 9);
$colorOrange900:  nth($paletteOrange, 10);
$colorOrangeA100: nth($paletteOrange, 11);
$colorOrangeA200: nth($paletteOrange, 12);
$colorOrangeA400: nth($paletteOrange, 13);
$colorOrangeA700: nth($paletteOrange, 14);

$colorDeepOrange50:   nth($paletteDeepOrange, 1);
$colorDeepOrange100:  nth($paletteDeepOrange, 2);
$colorDeepOrange200:  nth($paletteDeepOrange, 3);
$colorDeepOrange300:  nth($paletteDeepOrange, 4);
$colorDeepOrange400:  nth($paletteDeepOrange, 5);
$colorDeepOrange500:  nth($paletteDeepOrange, 6);
$colorDeepOrange600:  nth($paletteDeepOrange, 7);
$colorDeepOrange700:  nth($paletteDeepOrange, 8);
$colorDeepOrange800:  nth($paletteDeepOrange, 9);
$colorDeepOrange900:  nth($paletteDeepOrange, 10);
$colorDeepOrangeA100: nth($paletteDeepOrange, 11);
$colorDeepOrangeA200: nth($paletteDeepOrange, 12);
$colorDeepOrangeA400: nth($paletteDeepOrange, 13);
$colorDeepOrangeA700: nth($paletteDeepOrange, 14);

$colorBrown50:   nth($paletteBrown, 1);
$colorBrown100:  nth($paletteBrown, 2);
$colorBrown200:  nth($paletteBrown, 3);
$colorBrown300:  nth($paletteBrown, 4);
$colorBrown400:  nth($paletteBrown, 5);
$colorBrown500:  nth($paletteBrown, 6);
$colorBrown600:  nth($paletteBrown, 7);
$colorBrown700:  nth($paletteBrown, 8);
$colorBrown800:  nth($paletteBrown, 9);
$colorBrown900:  nth($paletteBrown, 10);

$colorBlueGrey50:   nth($paletteBlueGrey, 1);
$colorBlueGrey100:  nth($paletteBlueGrey, 2);
$colorBlueGrey200:  nth($paletteBlueGrey, 3);
$colorBlueGrey300:  nth($paletteBlueGrey, 4);
$colorBlueGrey400:  nth($paletteBlueGrey, 5);
$colorBlueGrey500:  nth($paletteBlueGrey, 6);
$colorBlueGrey600:  nth($paletteBlueGrey, 7);
$colorBlueGrey700:  nth($paletteBlueGrey, 8);
$colorBlueGrey800:  nth($paletteBlueGrey, 9);
$colorBlueGrey900:  nth($paletteBlueGrey, 10);

$colorGrey50:   nth($paletteGrey, 1);
$colorGrey100:  nth($paletteGrey, 2);
$colorGrey200:  nth($paletteGrey, 3);
$colorGrey300:  nth($paletteGrey, 4);
$colorGrey400:  nth($paletteGrey, 5);
$colorGrey500:  nth($paletteGrey, 6);
$colorGrey600:  nth($paletteGrey, 7);
$colorGrey700:  nth($paletteGrey, 8);
$colorGrey800:  nth($paletteGrey, 9);
$colorGrey900:  nth($paletteGrey, 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);
    .md-default-theme.fg-#{$name}-#{$hue} {
      color: $color;
    };
    .md-default-theme.bg-#{$name}-#{$hue} {
      background-color: $color;
    };
  };
}
// @include colors($sogoBlue, 'sogoBlue');
// @include colors($sogoGreen, 'sogoGreen');
// @include colors($sogoPaper, 'sogoPaper');