Colour Scheming: Update External Brand Variables #30084
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -9,49 +9,49 @@ | |||||
| &.facebook { | ||||||
| h2, | ||||||
| .sharing-service__logo { | ||||||
| color: var( --color-facebook ); | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| &.twitter { | ||||||
| h2, | ||||||
| .sharing-service__logo { | ||||||
| color: var( --color-twitter ); | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| &.google_plus { | ||||||
| h2, | ||||||
| .sharing-service__logo { | ||||||
| color: var( --color-gplus ); | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| &.linkedin { | ||||||
| h2, | ||||||
| .sharing-service__logo { | ||||||
| color: var( --color-linkedin ); | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| &.tumblr { | ||||||
| h2, | ||||||
| .sharing-service__logo { | ||||||
| color: var( --color-tumblr ); | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| &.eventbrite { | ||||||
| h2, | ||||||
| .sharing-service__logo { | ||||||
| color: var( --color-eventbrite ); | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| &.instagram { | ||||||
| h2, | ||||||
| .sharing-service__logo { | ||||||
| color: var( --color-instagram ); | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
|
|
@@ -264,14 +264,13 @@ | |||||
| } | ||||||
| } | ||||||
|
|
||||||
| @include sharing-service( 'facebook', var( --color-facebook )); | ||||||
| @include sharing-service( 'twitter', var( --color-twitter )); | ||||||
| @include sharing-service( 'google_plus', var( --color-gplus )); | ||||||
| @include sharing-service( 'tumblr', var( --color-tumblr )); | ||||||
| @include sharing-service( 'linkedin', var( --color-linkedin )); | ||||||
| @include sharing-service( 'instagram', var( --color-instagram )); | ||||||
| @include sharing-service( 'eventbrite', var( --color-eventbrite )); | ||||||
|
|
||||||
| .sharing-service__name { | ||||||
| clear: none; | ||||||
|
|
@@ -895,29 +894,28 @@ | |||||
| background: $color; | ||||||
|
|
||||||
| &:hover { | ||||||
| background: $color; | ||||||
| } | ||||||
| } | ||||||
| } | ||||||
|
|
||||||
| @include sharing-button-service( 'facebook', var( --color-facebook )); | ||||||
|
There was a problem hiding this comment. I think those won't work. The You could either define a Let me know if that makes sense to you. There was a problem hiding this comment. I think so, but just to confirm. Something like this?
Suggested change
That looks like a confusing number of brackets though and just doesn't look right, so just want to be sure. There was a problem hiding this comment. Sorry, I think it would've been more clear from my side if I provided a code example. What I meant is the following: /* _color-schemes.scss */
--color-facebook: #{$color-facebook};
--color-facebook-rgb: #{hex-to-rgb( $color-facebook )};
// this file
@include sharing-button-service( 'facebook', var( --color-facebook-rgb ));This is necessary because the wp-calypso/client/my-sites/sharing/style.scss Lines 897 to 899 in 2d50a28 and the above There was a problem hiding this comment. Thanks, that helps a ton! Just one more question, since
There was a problem hiding this comment. I think that'd work. Only notice that we need both There was a problem hiding this comment. Thank you! I've added a commit which intends to address this. Do you know if that's the same case here too? There was a problem hiding this comment. The color values are directly used in the mentioned mixin so we can use the normal variables (without the |
||||||
| @include sharing-button-service( 'twitter', var( --color-twitter )); | ||||||
| @include sharing-button-service( 'press-this', var( --color-wpcom )); | ||||||
| @include sharing-button-service( 'google-plus-1', var( --color-gplus )); | ||||||
| @include sharing-button-service( 'instagram', var( --color-instagram )); | ||||||
| @include sharing-button-service( 'eventbrite', var( --color-eventbrite )); | ||||||
| @include sharing-button-service( 'linkedin', var( --color-linkedin )); | ||||||
| @include sharing-button-service( 'stumbleupon', var( --color-stumbleupon )); | ||||||
| @include sharing-button-service( 'tumblr', var( --color-tumblr )); | ||||||
| @include sharing-button-service( 'reddit', var( --color-reddit )); | ||||||
| @include sharing-button-service( 'pinterest', var( --color-pinterest )); | ||||||
| @include sharing-button-service( 'pocket', var( --color-pocket )); | ||||||
| @include sharing-button-service( 'email', var( --color-email )); | ||||||
| @include sharing-button-service( 'print', var( --color-print )); | ||||||
| @include sharing-button-service( 'skype', var( --color-skype )); | ||||||
| @include sharing-button-service( 'telegram', var( --color-telegram )); | ||||||
| @include sharing-button-service( 'jetpack-whatsapp', var( --color-whatsapp )); | ||||||
|
|
||||||
| .sharing-buttons-preview__panel { | ||||||
| position: relative; | ||||||
|
|
||||||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I noticed that these use HEX codes...is there a specific reason why? I'm assuming it can just be set to variables too.
(cc @floor, @blowery, @drw158)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Agreed. Are all the hex values the same?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These ones are, but the ones here are a bit different. The HEX code seem are identical visually to the actual social media icons though, so I'm assuming they also should use a variable.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Make sure this works it IE11 and that the fallback hex codes get properly inserted.