59 lines
1.4 KiB
SCSS
59 lines
1.4 KiB
SCSS
|
// FUNCTIONS TO GET MORE EASILY COLORS
|
||
|
|
@function list-colors() {
|
||
|
|
@return $semantics;
|
||
|
|
}
|
||
|
|
|
||
|
|
@function luminance($color) {
|
||
|
|
$c_red: red($color);
|
||
|
|
$c_grn: green($color);
|
||
|
|
$c_blu: blue($color);
|
||
|
|
|
||
|
|
$luminance: $c_red*0.299 + $c_grn*0.587 + $c_blu*0.114;
|
||
|
|
|
||
|
|
@return $luminance
|
||
|
|
}
|
||
|
|
|
||
|
|
@function getFontColor() {
|
||
|
|
@return getTextColorFromBackground(get-color("background-alt"));
|
||
|
|
}
|
||
|
|
|
||
|
|
@function getTextColorFromBackground($background-color) {
|
||
|
|
@if (luminance($background-color) < 255 * $whiteness_value) {
|
||
|
|
@return $color-font-light;
|
||
|
|
} @else {
|
||
|
|
@return $color-font;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@function accentuate($color) {
|
||
|
|
@if (luminance($color) > 64) {
|
||
|
|
@return darken($color, 7.5%);
|
||
|
|
} @else {
|
||
|
|
@return lighten($color, 4%);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@function dim($color) {
|
||
|
|
@if (luminance($color) > 255 * $whiteness_value) {
|
||
|
|
@return transparentize($color, 0.8);
|
||
|
|
} @else {
|
||
|
|
@return transparentize($color, 0.6);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// fonction texte et background
|
||
|
|
|
||
|
|
@mixin text-color($text-color) {
|
||
|
|
color: $text-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin background-color($background-color) {
|
||
|
|
background-color: $background-color;
|
||
|
|
color: getTextColorFromBackground($background-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin accent-color($accent-color) {
|
||
|
|
--accent-color: #{$accent-color};
|
||
|
|
--text-color-contrast: #{getTextColorFromBackground($accent-color)};
|
||
|
|
--accent-color-hover: #{accentuate($accent-color)};
|
||
|
|
}
|