@viewdo/dxp-story-player-assets
Version:
## Installation
316 lines (249 loc) • 12.5 kB
text/less
.color-palette-mixins(){
/*Story Player Defaults*/
@black: #000;
@white: #FFFFFF;
/* Standard SP Palletes */
.setBlackWhiteClasses(@black, @white);
.genMonocramaticClasses(@grey, grey, grey, background);
/*Material Defaults*/
@red: #F44336;
@pink: #E91E63;
@purple: #9C27B0;
@deepPurple: #673AB7;
@indigo: #3F51B5;
@blue: #2196F3;
@lightBlue: #03A9F4;
@cyan: #00BCD4;
@teal: #009688;
@green: #4CAF50;
@lightGreen: #8BC34A;
@lime: #CDDC39;
@yellow: #FFEB3B;
@amber: #FFC106;
@orange: #FF9800;
@deepOrange: #FF5722;
@brown: #795548;
@grey: #9E9E9E;
@blueGrey: #607D8B;
.setBlackWhiteClasses(@black, @white){
.ivx-color-black, .ivx-color-inverted{
background-color:@black;
}
.ivx-color-white{
background-color:@white;
}
.ivx-color-black-color{
color:@black;
}
.ivx-color-white-color{
color:@white;
}
}
@levelNames: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
.genMonocramaticClasses (@color, @colorName, @category, @colorProperty, @index : 1) when (@index <= length(@levelNames)) and not (@category = standard) {
.genMonocramaticClasses(@color, @colorName, @category, @colorProperty, @index + 1);
.getHSLValues(@category);
@hue : hue(@color);
@saturation : saturation(@color);
@lightness : lightness(@color);
@hsl-value: extract(@hsl-values, @index);
@hue-offset: extract(@hsl-value, 1) - extract(@default-hsl-value, 1);
@sat-offset: extract(@hsl-value, 2) - extract(@default-hsl-value, 2);
@light-offset: extract(@hsl-value, 3) - extract(@default-hsl-value, 3);
@bgValue: hsl(@hue + @hue-offset, @saturation + @sat-offset, @lightness+ @light-offset);
.setColorProperty(@colorName, @bgValue, @colorProperty, @index);
}
.genMonocramaticClasses (@color, @colorName, @category, @colorProperty, @index : 1) when (@index <= length(@levelNames)) and (@category = standard) {
.genMonocramaticClasses(@color, @colorName, @category, @colorProperty, @index + 1);
.getStandardColors(@color);
@bgValue: extract(@standard-colors, @index);
.setColorProperty(@colorName, @bgValue, @colorProperty, @index);
}
.setColorProperty(@colorName, @bgValue, @colorProperty, @index){
@level: extract(@levelNames, @index);
.setStandardColorClasses(@level, @colorName, @bgValue, @colorProperty);
.ivx-color-@{colorName}-@{level} when (@colorProperty = background){
background-color: @bgValue;
color: contrast(@bgValue);
}
.ivx-color-@{colorName}-@{level}-@{colorProperty} when not (@colorProperty = background){
@{colorProperty}:@bgValue;
}
}
.getStandardColors(@color){
@multiplyColor: multiply(@color, @color);
@standard-colors:
mix(@color, @white, 12%),
mix(@color, @white, 30%),
mix(@color, @white, 50%),
mix(@color, @white, 70%),
mix(@color, @white, 85%),
@color,
mix(@color, @multiplyColor, 87%),
mix(@color, @multiplyColor, 70%),
mix(@color, @multiplyColor, 54%),
mix(@color, @multiplyColor, 25%),
mix(@color, @white, 30%),
mix(@color ,@white, 70%),
mix(@color, @multiplyColor, 87%),
mix(@color, @multiplyColor, 54%);
}
.setStandardColorClasses(@level, @colorName, @bgValue, @colorProperty){
.setDefaultClass(@colorName, @colorProperty) when (@level = 500){
.ivx-color-@{colorName} when (@colorProperty = background){
background-color: @bgValue;
color: contrast(@bgValue);
}
.ivx-color-@{colorName}-@{colorProperty} when not (@colorProperty = background){
@{colorProperty} : @bgValue;
}
}
.setLightClass(@colorName, @colorProperty) when (@level = 50){
.ivx-color-@{colorName}-light when (@colorProperty = background){
background-color: @bgValue;
color: contrast(@bgValue);
}
.ivx-color-@{colorName}-light-@{colorProperty} when not (@colorProperty = background){
@{colorProperty} : @bgValue;
}
}
.setLightClass(@colorName, @colorProperty) when (@level = 900){
.ivx-color-@{colorName}-dark when (@colorProperty = background){
background-color: @bgValue;
color: contrast(@bgValue);
}
.ivx-color-@{colorName}-dark-@{colorProperty} when not (@colorProperty = background){
@{colorProperty} : @bgValue;
}
}
.setDefaultClass(@colorName, @colorProperty);
.setLightClass(@colorName, @colorProperty);
}
.genPalleteClasses (@colorName, @customColors, @colorProperty, @index : 1) when (@index <= length(@levelNames)){
.genPalleteClasses (@colorName, @customColors, @colorProperty, @index + 1);
@lightTextBreak: 50;
@bgValue: extract(@customColors, @index);
@level: extract(@levelNames, @index);
@lightnessLevel: lightness(@bgValue);
.setStandardColorClasses(@level, @colorName, @bgValue, @lightnessLevel, @lightTextBreak, @colorProperty);
.ivx-color-@{colorName}-@{level} when ((@lightnessLevel < @lightTextBreak) and (@colorProperty = background)){
@{colorProperty}: @bgValue;
/* color:white; */
}
.ivx-color-@{colorName}-@{level} when ((@lightnessLevel >= @lightTextBreak) and (@colorProperty = background)){
@{colorProperty}: @bgValue;
/* color:black; */
}
.ivx-color-@{colorName}-@{level}-@{colorProperty} when not (@colorProperty = background){
@{colorProperty}:@bgValue;
}
}
.getHSLValues(@category) when not (@category = custom) {
.isRed (@category) when (@category = red) {
@colors:#FFEBEE,#FFCDD2, #EF9A9A, #E57373, #EF5350, #F44336, #E53935, #D32F2F, #C62828, #B71C1C, #FF8A80,#FF5252,#FF1744,#D50000;
}
.isPink (@category) when (@category = pink) {
@colors:#FCE4EC,#F8BBD0, #F48FB1, #F06292, #EC407A, #E91E63, #D81B60, #C2185B, #AD1457, #880E4F, #FF80AB,#FF4081,#F50057,#C51162;
}
.isPurple (@category) when (@category = purple) {
@colors:#F3E5F5,#E1BEE7, #CE93D8, #BA68C8, #AB47BC, #9C27B0, #8E24AA, #7B1FA2, #6A1B9A, #4A148C, #EA80FC, #E040FB, #D500F9, #AA00FF;
}
.isDeepPurple (@category) when (@category = deepPurple) {
@colors:#EDE7F6,#D1C4E9, #B39DDB, #9575CD, #7E57C2, #673AB7, #5E35B1, #512DA8, #4527A0, #311B92, #B388FF, #7C4DFF, #651FFF, #6200EA;
}
.isIndigo (@category) when (@category = indigo) {
@colors:#E8EAF6, #C5CAE9, #9FA8DA, #7986CB, #5C6BC0, #3F51B5, #3949AB, #303F9F, #283593, #1A237E, #8C9EFF, #536DFE, #3D5AFE, #304FFE;
}
.isBlue (@category) when (@category = blue) {
@colors: #E3F2FD, #BBDEFB, #90CAF9, #64B5F6, #42A5F5, #2196F3, #1E88E5, #1976D2, #1565C0, #0D47A1, #82B1FF, #448AFF, #2979FF, #2962FF;
}
.isLightBlue (@category) when (@category = lightBlue) {
@colors:#E1F5FE, #B3E5FC, #81D4FA, #4FC3F7, #29B6F6, #03A9F4, #039BE5, #0288D1, #0277BD, #01579B, #80D8FF, #40C4FF, #00B0FF, #0091EA;
}
.isCyan (@category) when (@category = cyan) {
@colors:#E0F7FA, #B2EBF2, #80DEEA, #4DD0E1, #26C6DA, #00BCD4, #00ACC1, #0097A7, #00838F, #006064, #84FFFF, #18FFFF, #00E5FF, #00B8D4;
}
.isTeal (@category) when (@category = teal) {
@colors:#E0F2F1, #B2DFDB, #80CBC4, #4DB6AC, #26A69A, #009688, #00897B, #00796B, #00695C, #004D40, #A7FFEB, #64FFDA, #1DE9B6, #00BFA5;
}
.isGreen (@category) when (@category = green) {
@colors:#E8F5E9, #C8E6C9, #A5D6A7, #81C784, #66BB6A, #4CAF50, #43A047, #388E3C, #2E7D32, #1B5E20, #B9F6CA, #69F0AE, #00E676, #00C853;
}
.isLightGreen (@category) when (@category = lightGreen) {
@colors:#F1F8E9,#DCEDC8,#C5E1A5, #AED581, #9CCC65,#8BC34A, #7CB342, #689F38, #558B2F, #33691E, #CCFF90, #B2FF59, #76FF03, #64DD17;
}
.isLime (@category) when (@category = lime) {
@colors:#F9FBE7,#F0F4C3,#E6EE9C, #DCE775, #D4E157,#CDDC39, #C0CA33, #AFB42B, #9E9D24, #827717, #F4FF81, #EEFF41, #C6FF00, #AEEA00;
}
.isYellow (@category) when (@category = yellow) {
@colors: #FFFDE7, #FFF9C4, #FFF59D, #FFF176, #FFEE58, #FFEB3B, #FDD835, #FBC02D, #F9A825, #F57F17, #FFFF8D, #FFFF00, #FFEA00, #FFD600;
}
.isAmber (@category) when (@category = amber) {
@colors:#FFF8E1,#FFECB3,#FFE082, #FFD54F, #FFCA28,#FFC107, #FFB300, #FFA000, #FF8F00, #FF6F00, #FFE57F, #FFD740, #FFC400, #FFAB00;
}
.isOrange (@category) when (@category = orange) {
@colors:#FFF3E0,#FFE0B2,#FFCC80, #FFB74D, #FFA726,#FF9800, #FB8C00, #F57C00, #EF6C00, #E65100, #FFD180, #FFAB40, #FF9100, #FF6D00;
}
.isDeepOrange (@category) when (@category = deepOrange) {
@colors:#FBE9E7,#FFCCBC,#FFAB91, #FF8A65, #FF7043,#FF5722, #F4511E, #E64A19, #D84315, #BF360C, #FF9E80, #FF6E40, #FF3D00, #DD2C00;
}
.isBrown(@category) when (@category = brown) {
@colors:#EFEBE9,#D7CCC8,#BCAAA4, #A1887F, #8D6E63,#795548, #6D4C41, #5D4037, #4E342E, #3E2723, #D7CCC8, #A1887F, #795548, #5D4037;
}
.isGrey (@category) when (@category = grey) {
@colors:#FAFAFA,#F5F5F5,#EEEEEE, #E0E0E0, #BDBDBD,#9E9E9E, #757575, #616161, #424242, #212121, #EEEEEE, #9E9E9E, #424242, #212121;
}
.isBlueGrey (@category) when (@category = blueGrey) {
@colors:#ECEFF1,#CFD8DC,#B0BEC5, #90A4AE, #78909C,#607D8B, #546E7A, #455A64, #37474F, #263238, #B0BEC5, #78909C, #546E7A, #37474F;
}
.isRed(@category);
.isPink(@category);
.isPurple(@category);
.isDeepPurple(@category);
.isIndigo(@category);
.isBlue(@category);
.isLightBlue(@category);
.isCyan(@category);
.isTeal(@category);
.isGreen(@category);
.isLightGreen(@category);
.isLime(@category);
.isYellow(@category);
.isAmber(@category);
.isOrange(@category);
.isDeepOrange(@category);
.isBrown(@category);
.isGrey(@category);
.isBlueGrey (@category);
@color-50: extract(@colors, 1);
@color-100: extract(@colors, 2);
@color-200: extract(@colors, 3);
@color-300: extract(@colors, 4);
@color-400: extract(@colors, 5);
@color-500: extract(@colors, 6);
@color-600: extract(@colors, 7);
@color-700: extract(@colors, 8);
@color-800: extract(@colors, 9);
@color-900: extract(@colors, 10);
@color-A100: extract(@colors, 11);
@color-A200: extract(@colors, 12);
@color-A400: extract(@colors, 13);
@color-A700: extract(@colors, 14);
@default-hsl-value: hue(@color-500) saturation( @color-500) lightness( @color-500);
@hsl-values:
hue(@color-50) saturation(@color-50) lightness(@color-50),
hue(@color-100) saturation( @color-100) lightness(@color-100),
hue(@color-200) saturation(@color-200) lightness(@color-200),
hue(@color-300) saturation(@color-300) lightness(@color-300),
hue(@color-400) saturation(@color-400) lightness(@color-400),
hue(@color-500) saturation(@color-500) lightness(@color-500),
hue(@color-600) saturation(@color-600) lightness(@color-600),
hue(@color-700) saturation(@color-700) lightness(@color-700),
hue(@color-800) saturation(@color-800) lightness(@color-800),
hue(@color-900) saturation(@color-900) lightness(@color-900),
hue(@color-A100) saturation(@color-A100) lightness(@color-A100),
hue(@color-A200) saturation(@color-A200) lightness(@color-A200),
hue(@color-A400) saturation(@color-A400) lightness(@color-A400),
hue(@color-A700) saturation(@color-A700) lightness(@color-A700);
}
}