mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 12:35:07 +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
|
// Material colors map
|
||||||
$matColorsMap: (
|
$matPalettes: (
|
||||||
primary: $primary,
|
primary: $primary,
|
||||||
accent: $accent,
|
accent: $accent,
|
||||||
warn: $warn,
|
warn: $warn,
|
||||||
|
|
@ -43,75 +43,83 @@ $matColorsMap: (
|
||||||
);
|
);
|
||||||
|
|
||||||
// Material color hues list
|
// 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
|
// Text color levels generator mixin
|
||||||
@mixin generateTextColorLevels($baseTextColor) {
|
@mixin generateTextColorLevels($classes, $contrast) {
|
||||||
|
|
||||||
// If the base text color is black...
|
// If the contrast is dark...
|
||||||
@if (rgba(black, 1) == rgba($baseTextColor, 1)) {
|
@if ($contrast == 'dark') {
|
||||||
|
|
||||||
i,
|
// Put down the color classes
|
||||||
.icon {
|
#{$classes} {
|
||||||
color: rgba(0, 0, 0, 0.54);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.secondary-text,
|
i,
|
||||||
.secondary-text {
|
.icon {
|
||||||
color: rgba(0, 0, 0, 0.54) !important;
|
color: rgba(0, 0, 0, 0.54);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.hint-text,
|
&.secondary-text,
|
||||||
.hint-text,
|
.secondary-text {
|
||||||
&.disabled-text,
|
color: rgba(0, 0, 0, 0.54) !important;
|
||||||
.disabled-text {
|
}
|
||||||
color: rgba(0, 0, 0, 0.38) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.divider,
|
&.hint-text,
|
||||||
.divider {
|
.hint-text,
|
||||||
color: rgba(0, 0, 0, 0.12) !important;
|
&.disabled-text,
|
||||||
}
|
.disabled-text {
|
||||||
|
color: rgba(0, 0, 0, 0.38) !important;
|
||||||
|
}
|
||||||
|
|
||||||
.mat-ripple-element {
|
&.divider,
|
||||||
background: rgba(0, 0, 0, 0.1);
|
.divider {
|
||||||
|
color: rgba(0, 0, 0, 0.12) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-ripple-element {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
// If the base text color is white...
|
// If the base text color is white...
|
||||||
@else {
|
@else {
|
||||||
|
|
||||||
i,
|
// Put down the color classes
|
||||||
.icon {
|
#{$classes} {
|
||||||
color: rgba(255, 255, 255, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.secondary-text,
|
i,
|
||||||
.secondary-text {
|
.icon {
|
||||||
color: rgba(255, 255, 255, 0.70) !important;
|
color: rgba(255, 255, 255, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.hint-text,
|
&.secondary-text,
|
||||||
.hint-text,
|
.secondary-text {
|
||||||
&.disabled-text,
|
color: rgba(255, 255, 255, 0.70) !important;
|
||||||
.disabled-text {
|
}
|
||||||
color: rgba(255, 255, 255, 0.50) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.divider,
|
&.hint-text,
|
||||||
.divider {
|
.hint-text,
|
||||||
color: rgba(255, 255, 255, 0.12) !important;
|
&.disabled-text,
|
||||||
}
|
.disabled-text {
|
||||||
|
color: rgba(255, 255, 255, 0.50) !important;
|
||||||
|
}
|
||||||
|
|
||||||
.mat-ripple-element {
|
&.divider,
|
||||||
background: rgba(255, 255, 255, 0.1);
|
.divider {
|
||||||
|
color: rgba(255, 255, 255, 0.12) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-ripple-element {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin generateMaterialElementColors($contrastColor) {
|
@mixin generateMaterialElementColors($classes, $contrast) {
|
||||||
|
|
||||||
// If the contrast color is white...
|
// If the contrast color is light...
|
||||||
$fuseForeground: (
|
$fuseForeground: (
|
||||||
base: white,
|
base: white,
|
||||||
text: 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),
|
divider: rgba(white, 0.12),
|
||||||
);
|
);
|
||||||
|
|
||||||
// If the contrast color is black...
|
// If the contrast color is dark...
|
||||||
@if (rgba(black, 1) == rgba($contrastColor, 1)) {
|
@if ($contrast == 'dark') {
|
||||||
|
|
||||||
$fuseForeground: (
|
$fuseForeground: (
|
||||||
base: black,
|
base: black,
|
||||||
|
|
@ -129,43 +137,47 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Native Input
|
// Put down the color classes
|
||||||
input[type="text"] {
|
#{$classes} {
|
||||||
color: map_get($fuseForeground, base);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Input
|
// Native Input
|
||||||
.mat-form-field-label {
|
input[type="text"] {
|
||||||
color: map_get($fuseForeground, hint-text);
|
color: map_get($fuseForeground, base);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-form-field-underline {
|
// Input
|
||||||
background-color: map_get($fuseForeground, divider);
|
.mat-form-field-label {
|
||||||
}
|
color: map_get($fuseForeground, hint-text);
|
||||||
|
}
|
||||||
|
|
||||||
// Select
|
.mat-form-field-underline {
|
||||||
.mat-select-trigger,
|
background-color: map_get($fuseForeground, divider);
|
||||||
.mat-select-arrow {
|
}
|
||||||
color: map_get($fuseForeground, hint-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-select-underline {
|
// Select
|
||||||
background-color: map_get($fuseForeground, divider);
|
.mat-select-trigger,
|
||||||
}
|
.mat-select-arrow {
|
||||||
|
color: map_get($fuseForeground, hint-text);
|
||||||
|
}
|
||||||
|
|
||||||
.mat-select-disabled .mat-select-value,
|
.mat-select-underline {
|
||||||
.mat-select-arrow,
|
background-color: map_get($fuseForeground, divider);
|
||||||
.mat-select-trigger {
|
}
|
||||||
color: map_get($fuseForeground, hint-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-select-content,
|
.mat-select-disabled .mat-select-value,
|
||||||
.mat-select-panel-done-animating {
|
.mat-select-arrow,
|
||||||
background: map_get($background, card);
|
.mat-select-trigger {
|
||||||
}
|
color: map_get($fuseForeground, hint-text);
|
||||||
|
}
|
||||||
|
|
||||||
.mat-select-value {
|
.mat-select-content,
|
||||||
color: map_get($fuseForeground, text);
|
.mat-select-panel-done-animating {
|
||||||
|
background: map_get($background, card);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-select-value {
|
||||||
|
color: map_get($fuseForeground, text);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -180,14 +192,6 @@ $matColorHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400
|
||||||
background-color: $color !important;
|
background-color: $color !important;
|
||||||
color: $contrastColor !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] {
|
&[disabled] {
|
||||||
background-color: rgba($color, .12) !important;
|
background-color: rgba($color, .12) !important;
|
||||||
color: rgba($contrastColor, .26) !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 {
|
.#{$colorName}#{$hue}-fg {
|
||||||
color: $color !important;
|
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 {
|
.#{$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) {
|
@mixin generateFuseColorClasses($primary, $accent, $warn) {
|
||||||
|
|
||||||
$colorMap: (
|
$palettes: (
|
||||||
primary: $primary,
|
primary: $primary,
|
||||||
accent: $accent,
|
accent: $accent,
|
||||||
warn: $warn
|
warn: $warn
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Define contrast lists
|
||||||
|
$light-contrasting-classes: ();
|
||||||
|
$dark-contrasting-classes: ();
|
||||||
|
|
||||||
// Generate the color 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);
|
@each $hue in $matHues {
|
||||||
$contrastColor: map-get(map-get($map, 'contrast'), $hue);
|
|
||||||
|
|
||||||
@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)
|
// Run the generator one more time for default values (500)
|
||||||
@if ($hue == 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...
|
||||||
|
|
||||||
|
// Define contrast lists
|
||||||
|
$light-contrasting-classes: ();
|
||||||
|
$dark-contrasting-classes: ();
|
||||||
|
|
||||||
|
@each $paletteName, $palette in $matPalettes {
|
||||||
|
|
||||||
|
// Get the contrasts map
|
||||||
|
$contrasts: map-get($palette, 'contrast');
|
||||||
|
|
||||||
|
@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) {
|
||||||
|
|
||||||
|
// 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 the color classes...
|
// Generate contrasting colors
|
||||||
@each $colorName, $colorMap in $matColorsMap {
|
@include generateTextColorLevels($dark-contrasting-classes, 'dark');
|
||||||
|
@include generateTextColorLevels($light-contrasting-classes, 'light');
|
||||||
@each $hue in $matColorHues {
|
@include generateMaterialElementColors($dark-contrasting-classes, 'dark');
|
||||||
|
@include generateMaterialElementColors($light-contrasting-classes, 'light');
|
||||||
$color: map-get($colorMap, $hue);
|
|
||||||
$contrastColor: map-get(map-get($colorMap, 'contrast'), $hue);
|
|
||||||
|
|
||||||
@if ($color != null and $contrastColor != null) {
|
|
||||||
|
|
||||||
@include generateColorClasses($colorName, $color, $contrastColor, '-#{$hue}');
|
|
||||||
|
|
||||||
// Run the generator one more time for default values (500)
|
|
||||||
@if ($hue == 500) {
|
|
||||||
@include generateColorClasses($colorName, $color, $contrastColor, '');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user