/// _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');