Skip to content

Commit 067ca0a

Browse files
latatalatata
authored
Merge pull request #162 from Wikia/XW-3616
XW-3616 | extract community header gradient and text color as function/mixin
2 parents b6f8c3d + 1fde736 commit 067ca0a

File tree

14 files changed

+79
-57
lines changed

14 files changed

+79
-57
lines changed

‎dist/scss/wds-functions/_community-header-text-color.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@function community-header-text-color($header-background-color) {
2+
$text-color: $wds-color-white;
3+
@if luminance($header-background-color) > .3 {
4+
$text-color: $wds-color-black;
5+
}
6+
@return $text-color;
7+
}

‎dist/scss/wds-functions/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@import 'community-header-text-color';
12
@import 'exp';
23
@import 'exp-maclaurin';
34
@import 'factorial';

‎dist/scss/wds-mixins/_community-header-gradient.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@mixin community-header-gradient(
2+
$header-background-color, $start-position, $end-position
3+
) {
4+
background: linear-gradient(to right, rgba($header-background-color, .5), rgba($header-background-color, .5)),
5+
linear-gradient(to left, rgba($header-background-color, 0) $start-position, $header-background-color $end-position);
6+
}

‎dist/scss/wds-mixins/_community-header-theming.scss‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,16 @@
99
) {
1010
@include dropdown-theming($color-page, $color-text, $color-links, $color-page-border);
1111

12-
$text-color: $wds-color-white;
13-
@if luminance($header-background-color) > .3 {
14-
$text-color: $wds-color-black;
15-
}
12+
$text-color: community-header-text-color($header-background-color);
1613
$text-hover-color: rgba($text-color, .8);
1714

18-
margin-top: luminance($color-page);
1915
background-color: $header-background-color;
2016

2117
&::before {
22-
background: linear-gradient(to right, rgba($header-background-color, .5), rgba($header-background-color, .5)), linear-gradient(to left, rgba($header-background-color, 0) 200px, $header-background-color $wds-community-header-background-width);
18+
@include community-header-gradient($header-background-color, 200px, $wds-community-header-background-width);
2319

2420
@media #{$wds-breakpoint-l-down} {
25-
background: linear-gradient(to right, rgba($header-background-color, .5), rgba($header-background-color, .5)), linear-gradient(to left, rgba($header-background-color, 0) 200px, $header-background-color $wds-community-header-background-width-small-breakpoint);
21+
@include community-header-gradient($header-background-color, 200px, $wds-community-header-background-width-small-breakpoint);
2622
}
2723
}
2824

‎dist/scss/wds-mixins/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import 'button-group-theming';
22
@import 'button-theming';
3+
@import 'community-header-gradient';
34
@import 'community-header-theming';
45
@import 'dropdown-theming';
56
@import 'ellipsis';

‎docs/assets/design-system.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/design-system.js‎

Lines changed: 22 additions & 22 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/assets/vendor.js‎

Lines changed: 19 additions & 19 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<meta name="viewport" content="width=device-width, initial-scale=1">
99

1010

11-
<meta name="design-system/config/environment" content="%7B%22modulePrefix%22%3A%22design-system%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22design-system%22%2C%22version%22%3A%228.5.0+9e9815c5%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />
11+
<meta name="design-system/config/environment" content="%7B%22modulePrefix%22%3A%22design-system%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22/%22%2C%22locationType%22%3A%22hash%22%2C%22EmberENV%22%3A%7B%22FEATURES%22%3A%7B%7D%7D%2C%22APP%22%3A%7B%22name%22%3A%22design-system%22%2C%22version%22%3A%228.6.0+59989517%22%7D%2C%22exportApplicationGlobal%22%3Afalse%7D" />
1212

1313
<link rel="stylesheet" href="/assets/vendor.css">
1414
<link rel="stylesheet" href="/assets/design-system.css">

‎style-guide/styles/wds-functions/_community-header-text-color.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@function community-header-text-color($header-background-color) {
2+
$text-color: $wds-color-white;
3+
@if luminance($header-background-color) > .3 {
4+
$text-color: $wds-color-black;
5+
}
6+
@return $text-color;
7+
}

0 commit comments

Comments
 (0)