mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
(Colors) Improved the color generators
This commit is contained in:
Sercan Yemen
parent
a6c91dd744
commit
59d53ba0b9
|
|
@ -14,7 +14,7 @@ i {
|
|||
}
|
||||
|
||||
// Material colors map
|
||||
$matColorsMap: (
|
||||
$matPalettes: (
|
||||
primary: $primary,
|
||||
accent: $accent,
|
||||
warn: $warn,
|
||||
|
|
@ -43,13 +43,16 @@ $matColorsMap: (
|
|||
);
|
||||
|
||||
// Material color hues list
|
||||
$matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
|
||||
$matHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
|
||||
|
||||
// Text color levels generator mixin
|
||||
@mixin generateTextColorLevels($baseTextColor) {
|
||||
@mixin generateTextColorLevels($classes, $contrast) {
|
||||
|
||||
// If the base text color is black...
|
||||
@if (rgba(black, 1) == rgba($baseTextColor, 1)) {
|
||||
// If the contrast is dark...
|
||||
@if ($contrast == 'dark') {
|
||||
|
||||
// Put down the color classes
|
||||
#{$classes} {
|
||||
|
||||
i,
|
||||
.icon {
|
||||
|
|
@ -76,11 +79,15 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
|||
.mat-ripple-element {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
// If the base text color is white...
|
||||
@else {
|
||||
|
||||
// Put down the color classes
|
||||
#{$classes} {
|
||||
|
||||
i,
|
||||
.icon {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
|
|
@ -108,10 +115,11 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin generateMaterialElementColors($contrastColor) {
|
||||
@mixin generateMaterialElementColors($classes, $contrast) {
|
||||
|
||||
// If the contrast color is white...
|
||||
// If the contrast color is light...
|
||||
$fuseForeground: (
|
||||
base: white,
|
||||
text: white,
|
||||
|
|
@ -119,8 +127,8 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
|||
divider: rgba(white, 0.12),
|
||||
);
|
||||
|
||||
// If the contrast color is black...
|
||||
@if (rgba(black, 1) == rgba($contrastColor, 1)) {
|
||||
// If the contrast color is dark...
|
||||
@if ($contrast == 'dark') {
|
||||
|
||||
$fuseForeground: (
|
||||
base: black,
|
||||
|
|
@ -129,6 +137,9 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
|||
);
|
||||
}
|
||||
|
||||
// Put down the color classes
|
||||
#{$classes} {
|
||||
|
||||
// Native Input
|
||||
input[type="text"] {
|
||||
color: map_get($fuseForeground, base);
|
||||
|
|
@ -168,6 +179,7 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
|||
color: map_get($fuseForeground, text);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Color classes generator mixin
|
||||
@mixin generateColorClasses($colorName, $color, $contrastColor, $hue) {
|
||||
|
|
@ -180,14 +192,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
|||
background-color: $color !important;
|
||||
color: $contrastColor !important;
|
||||
|
||||
// Generate text color levels
|
||||
// based on current contrast color
|
||||
@include generateTextColorLevels($contrastColor);
|
||||
|
||||
// Generate material element colors
|
||||
// based on current contrast color
|
||||
@include generateMaterialElementColors($contrastColor);
|
||||
|
||||
&[disabled] {
|
||||
background-color: rgba($color, .12) !important;
|
||||
color: rgba($contrastColor, .26) !important;
|
||||
|
|
@ -196,14 +200,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
|||
|
||||
.#{$colorName}#{$hue}-fg {
|
||||
color: $color !important;
|
||||
|
||||
// Generate text color levels
|
||||
// based on current contrast color
|
||||
@include generateTextColorLevels($color);
|
||||
|
||||
// Generate material element colors
|
||||
// based on current contrast color
|
||||
@include generateMaterialElementColors($color);
|
||||
}
|
||||
|
||||
.#{$colorName}#{$hue}-border {
|
||||
|
|
@ -229,49 +225,126 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
|||
|
||||
@mixin generateFuseColorClasses($primary, $accent, $warn) {
|
||||
|
||||
$colorMap: (
|
||||
$palettes: (
|
||||
primary: $primary,
|
||||
accent: $accent,
|
||||
warn: $warn
|
||||
);
|
||||
|
||||
// Define contrast lists
|
||||
$light-contrasting-classes: ();
|
||||
$dark-contrasting-classes: ();
|
||||
|
||||
// Generate the color classes...
|
||||
@each $name, $map in $colorMap {
|
||||
@each $paletteName, $palette in $palettes {
|
||||
|
||||
@each $hue in $matColorHues {
|
||||
// Get the contrasts map
|
||||
$contrasts: map-get($palette, 'contrast');
|
||||
|
||||
$color: map-get($map, $hue);
|
||||
$contrastColor: map-get(map-get($map, 'contrast'), $hue);
|
||||
@each $hue in $matHues {
|
||||
|
||||
@if ($color != null and $contrastColor != null) {
|
||||
// Get the color and the contrasting color
|
||||
$color: map-get($palette, $hue);
|
||||
$contrast: map-get($contrasts, $hue);
|
||||
|
||||
@include generateColorClasses($name, $color, $contrastColor, '-#{$hue}');
|
||||
@if ($color != null and $contrast != null) {
|
||||
|
||||
// Generate color classes
|
||||
@include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
|
||||
|
||||
// If the contrast color is dark
|
||||
@if (rgba(black, 1) == rgba($contrast, 1)) {
|
||||
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
|
||||
}
|
||||
// if the contrast color is light
|
||||
@else {
|
||||
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
|
||||
}
|
||||
|
||||
// Run the generator one more time for default values (500)
|
||||
@if ($hue == 500) {
|
||||
@include generateColorClasses($name, $color, $contrastColor, '');
|
||||
|
||||
// Generate color classes
|
||||
@include generateColorClasses($paletteName, $color, $contrast, '');
|
||||
|
||||
// Add color to the correct list depending on the contrasting color
|
||||
|
||||
// If the contrast color is dark
|
||||
@if (rgba(black, 1) == rgba($contrast, 1)) {
|
||||
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
|
||||
}
|
||||
// if the contrast color is light
|
||||
@else {
|
||||
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate contrasting colors
|
||||
@include generateTextColorLevels($dark-contrasting-classes, 'dark');
|
||||
@include generateTextColorLevels($light-contrasting-classes, 'light');
|
||||
@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
|
||||
@include generateMaterialElementColors($light-contrasting-classes, 'light');
|
||||
}
|
||||
|
||||
// Generate the color classes...
|
||||
@each $colorName, $colorMap in $matColorsMap {
|
||||
|
||||
@each $hue in $matColorHues {
|
||||
// Define contrast lists
|
||||
$light-contrasting-classes: ();
|
||||
$dark-contrasting-classes: ();
|
||||
|
||||
$color: map-get($colorMap, $hue);
|
||||
$contrastColor: map-get(map-get($colorMap, 'contrast'), $hue);
|
||||
@each $paletteName, $palette in $matPalettes {
|
||||
|
||||
@if ($color != null and $contrastColor != null) {
|
||||
// Get the contrasts map
|
||||
$contrasts: map-get($palette, 'contrast');
|
||||
|
||||
@include generateColorClasses($colorName, $color, $contrastColor, '-#{$hue}');
|
||||
@each $hue in $matHues {
|
||||
|
||||
// Get the color and the contrasting color
|
||||
$color: map-get($palette, $hue);
|
||||
$contrast: map-get($contrasts, $hue);
|
||||
|
||||
@if ($color != null and $contrast != null) {
|
||||
|
||||
// Generate color classes
|
||||
@include generateColorClasses($paletteName, $color, $contrast, '-#{$hue}');
|
||||
|
||||
// Add color to the correct list depending on the contrasting color
|
||||
|
||||
// If the contrast color is dark
|
||||
@if (rgba(black, 1) == rgba($contrast, 1)) {
|
||||
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
|
||||
}
|
||||
// if the contrast color is light
|
||||
@else {
|
||||
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-#{$hue}-bg'), 'comma');
|
||||
}
|
||||
|
||||
// Run the generator one more time for default values (500)
|
||||
@if ($hue == 500) {
|
||||
@include generateColorClasses($colorName, $color, $contrastColor, '');
|
||||
|
||||
// Generate color classes
|
||||
@include generateColorClasses($paletteName, $color, $contrast, '');
|
||||
|
||||
// Add color to the correct list depending on the contrasting color
|
||||
|
||||
// If the contrast color is dark
|
||||
@if (rgba(black, 1) == rgba($contrast, 1)) {
|
||||
$dark-contrasting-classes: append($dark-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
|
||||
}
|
||||
// if the contrast color is light
|
||||
@else {
|
||||
$light-contrasting-classes: append($light-contrasting-classes, unquote('.mat-#{$paletteName}-bg'), 'comma');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate contrasting colors
|
||||
@include generateTextColorLevels($dark-contrasting-classes, 'dark');
|
||||
@include generateTextColorLevels($light-contrasting-classes, 'light');
|
||||
@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
|
||||
@include generateMaterialElementColors($light-contrasting-classes, 'light');
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user