IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: Blend header colors (#11422)

Browse Source
This commit is contained in:
Penar Musaraj 2020-12-16 09:38:51 -05:00 committed by GitHub
parent 1e7d6ebb0f
commit d1058f4e4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/assets/stylesheets/common/foundation/color_transformations.scss
View File

@ -10,38 +10,11 @@ $primary-medium: dark-light-diff($primary, $secondary, 50%, -35%) !default;
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default;
$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default;
//header_primary
$header_primary-low: dark-light-diff(
$header_primary,
$header_background,
90%,
-78%
) !default;
$header_primary-low-mid: dark-light-diff(
$header_primary,
$header_background,
70%,
-45%
) !default;
$header_primary-medium: dark-light-diff(
$header_primary,
$header_background,
50%,
-35%
) !default;
$header_primary-high: dark-light-diff(
$header_primary,
$header_background,
30%,
-25%
) !default;
$header_primary-very-high: dark-light-diff(
$header_primary,
$header_background,
15%,
-10%
) !default;
$header_primary-low: blend-header-primary-background(10%) !default;
$header_primary-low-mid: blend-header-primary-background(35%) !default;
$header_primary-medium: blend-header-primary-background(55%) !default;
$header_primary-high: blend-header-primary-background(70%) !default;
$header_primary-very-high: blend-header-primary-background(90%) !default;
//secondary
$secondary-low: dark-light-diff($secondary, $primary, 70%, -70%) !default;

4
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -192,6 +192,10 @@ $box-shadow: (
@return srgb-scale($primary, $secondary, $percent);
}
@function blend-header-primary-background($percent) {
@return srgb-scale($header_primary, $header_background, $percent);
}
@function dark-light-diff(
$adjusted-color,
$comparison-color,