N°3882 - Handle use of transparent colors in dynamic header dashlet

This commit is contained in:
Molkobain
2021-10-01 11:48:05 +02:00
parent c9aa693872
commit bd67bc8838
5 changed files with 27 additions and 7 deletions

View File

@@ -6,6 +6,8 @@
/**
* Adjust the lightness of $sColor to the absolute $fTargetLightness value.
* It is different than lighten() / darken() that shift the current lightness by X%
*
* @return Modified color value in HSLA format
*/
@function ibo-adjust-lightness($sColor, $fTargetLightness) {
$iHue: hue($sColor);
@@ -16,3 +18,17 @@
@return hsla($iHue, $fSaturation, $fTargetLightness, $fAlpha);
}
/**
* Adjust the alpha chanel (opacity) of $sColor to the absolute $fTargetAlpha value.
* It is different than opacify() / transparentize() that shift the current alpha value by X%
*
* @return Modified color value in HSLA format
*/
@function ibo-adjust-alpha($sColor, $fTargetAlpha) {
$iHue: hue($sColor);
$fSaturation: saturation($sColor);
$fLightness: lightness($sColor);
$fAlpha: alpha($sColor);
@return hsla($iHue, $fSaturation, $fLightness, $fTargetAlpha);
}

View File

@@ -6,4 +6,7 @@
/* Base helpers for colors */
/* - These lightness vars are used to force a certain lightness on HSLA colors */
$ibo-color-base-lightness-100: 93% !default;
$ibo-color-base-lightness-900: 15% !default;
$ibo-color-base-lightness-900: 15% !default;
$ibo-color-base-opacity-for-lightness-100: 1 !default;
$ibo-color-base-opacity-for-lightness-900: 1 !default;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -2314,8 +2314,9 @@ EOF
$sMainColorCssVariableDeclaration = "$sMainColorCssVariableName: #{{$sMainColorScssVariableName}};";
$sCssRegularClassMainColorDeclaration = "--ibo-main-color: $sMainColorScssVariableName;";
$sCssRegularClassMainColor100Declaration = "--ibo-main-color--100: ibo-adjust-lightness($sMainColorScssVariableName, \$ibo-color-base-lightness-100);";
$sCssRegularClassMainColor900Declaration = "--ibo-main-color--900: ibo-adjust-lightness($sMainColorScssVariableName, \$ibo-color-base-lightness-900);";
// Note: We have to manually force the alpha chanel in case the given color is transparent
$sCssRegularClassMainColor100Declaration = "--ibo-main-color--100: ibo-adjust-alpha(ibo-adjust-lightness($sMainColorScssVariableName, \$ibo-color-base-lightness-100), \$ibo-color-base-opacity-for-lightness-100);";
$sCssRegularClassMainColor900Declaration = "--ibo-main-color--900: ibo-adjust-alpha(ibo-adjust-lightness($sMainColorScssVariableName, \$ibo-color-base-lightness-900), \$ibo-color-base-opacity-for-lightness-900);";
$sCssAlternativeClassComplementaryColorDeclaration = "--ibo-complementary-color: $sMainColorScssVariableName;";
} else {