Add Sass version of SOGo's palettes, mixin to generate theme-class and a getter function for convenient access to colours trough any scss
iRouge
Francis Lachapelle
parent
33e70cd3f3
commit
daaa4284cb
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
||||
})();
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
Loading…
Reference in New Issue