Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Colour Scheming: Replace Jetpack Variable #30232

Merged
merged 24 commits into from
Jan 24, 2019
Merged

Colour Scheming: Replace Jetpack Variable #30232

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
f682657
Update Colour Variables
Aurorum Jan 18, 2019
d5b9935
Update Colour Variable
Aurorum Jan 18, 2019
0ced895
Update Colour Variable
Aurorum Jan 18, 2019
2065546
Update Colour Variable
Aurorum Jan 18, 2019
7ed95d0
Replace Colour Variable
Aurorum Jan 18, 2019
bf78928
Replace Colour Variable
Aurorum Jan 18, 2019
16ed51d
Replace Jetpack Variable
Aurorum Jan 18, 2019
08dec35
Add other Jetpack variables
Aurorum Jan 22, 2019
355ee8c
Remove Jetpack
Aurorum Jan 22, 2019
a96b6d5
Use Variable
Aurorum Jan 22, 2019
8de40ba
Update Variables
Aurorum Jan 22, 2019
9968471
Use Variable
Aurorum Jan 22, 2019
d61ea78
Disabled Styles
Aurorum Jan 23, 2019
d659ebf
Switch Other Variables
Aurorum Jan 23, 2019
097b417
Last switch 🤞
Aurorum Jan 23, 2019
53791cc
Missed one more...
Aurorum Jan 23, 2019
c29747f
Switch Variable
Aurorum Jan 23, 2019
2e7c7dc
Switch Variable
Aurorum Jan 23, 2019
e7c9659
Switch Variable
Aurorum Jan 23, 2019
b0c3efd
Switch Hover Variables
Aurorum Jan 23, 2019
a145559
Switch Hover Variable
Aurorum Jan 23, 2019
916b01b
Define Jetpack 400
Aurorum Jan 24, 2019
c56ec7c
Hover Background Colour
Aurorum Jan 24, 2019
ba14acc
Hover Background Colour
Aurorum Jan 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion assets/stylesheets/shared/_color-schemes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,10 @@
--color-link-900-rgb: #{hex-to-rgb( $muriel-blue-900 )};

--color-wpcom: #{$muriel-blue-500};
--color-jetpack: #{$green-jetpack};
--color-jetpack: #00be28;
--color-jetpack-light: #81d677;
--color-jetpack-dark: #2e8928;

--color-email: #f8f8f8;
--color-eventbrite: #ff8000;
--color-facebook: #39579a;
Expand Down
3 changes: 0 additions & 3 deletions assets/stylesheets/shared/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,6 @@ $blue-light: $muriel-blue-300;
$blue-medium: $muriel-blue-500;
$blue-dark: $muriel-blue-700;

// Jetpack Green
$green-jetpack: #00be28;

// Grays
$gray: $muriel-gray-300;
$gray-light: $muriel-gray-0;
Expand Down
4 changes: 2 additions & 2 deletions client/blocks/login/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
.login {
&.is-jetpack {
.button.is-primary {
background-color: $green-jetpack;
border-color: darken( $green-jetpack, 5% );
background-color: var( --color-jetpack );
border-color: var( --color-jetpack-dark );
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion client/components/upgrades/gsuite/gsuite-dialog/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
}

strong {
color: $green-jetpack;
color: var( --color-jetpack );
margin-left: 0.3em;

@include breakpoint( '<480px' ) {
Expand Down
4 changes: 2 additions & 2 deletions client/gutenberg/extensions/presets/jetpack/editor-shared/jetpack-plugin-sidebar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,11 @@
}

.jetpack-logo__icon-circle {
fill: $green-jetpack !important;
fill: var( --color-jetpack ) !important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This caused #30469

}

.jetpack-logo__icon-triangle {
fill: $white !important;
fill: var( --color-white ) !important;
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions client/jetpack-connect/jetpack-new-site/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
}

.jetpack-new-site__jetpack-site .jetpack-logo {
fill: $green-jetpack;
fill: var( --color-jetpack );
}

.jetpack-new-site__card-title {
Expand Down Expand Up @@ -131,7 +131,7 @@
input[type='text'] {
&:focus {
border-color: $green-jetpack;
box-shadow: 0 0 0 2px lighten( $green-jetpack, 25% );
box-shadow: 0 0 0 2px var( --color-jetpack-light );
}
}

Expand All @@ -143,18 +143,18 @@

&:hover,
&:focus {
border-color: darken( $green-jetpack, 30% );
border-color: var( --color-jetpack-dark );
}

&:focus {
box-shadow: 0 0 0 2px lighten( $green-jetpack, 25% );
box-shadow: 0 0 0 2px var( --color-jetpack-light );
}

&[disabled],
&:disabled {
background: tint( $green-jetpack, 50% );
border-color: tint( $green-jetpack, 35% );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not feeling too confident on if variables work here. If they don't, I'm a bit stumped on which to use for there to be a visible difference.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We recently aligned disabled buttons to look the same across button types. I think that should be the same here as well. Compare with #30229.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, added!

color: $white;
color: var( --color-white );
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions client/jetpack-connect/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,16 +26,16 @@
}

.button.is-primary {
background-color: $green-jetpack;
border-color: darken( $green-jetpack, 5% );
background-color: var( --color-jetpack );
border-color: var( --color-jetpack-light );
Aurorum marked this conversation as resolved.
Show resolved Hide resolved

&:hover,
&:focus {
border-color: darken( $green-jetpack, 30% );
border-color: var( --color-jetpack-dark );
}

&:focus {
box-shadow: 0 0 0 2px lighten( $green-jetpack, 25% );
box-shadow: 0 0 0 2px var( --color-jetpack-light );
}

&[disabled],
Expand Down
2 changes: 1 addition & 1 deletion client/my-sites/checkout/concierge-session-nudge/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@

&-item-icon {
width: 18px;
fill: $green-jetpack;
fill: var( --color-jetpack );
margin-right: 5px;
}

Expand Down
2 changes: 1 addition & 1 deletion client/my-sites/feature-upsell/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ $feature-upsell-break-at: '1040px';
&-guarantee {
display: block;
opacity: 0.8;
color: $green-jetpack;
color: var( --color-jetpack );
font-size: 15px;
line-height: 31px;
font-weight: 300;
Expand Down