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

Update hardcoded blue color values to match Studio counterparts #98732

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from
Open

Update hardcoded blue color values to match Studio counterparts #98732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 5 additions & 5 deletions client/blocks/reader-join-conversation/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,20 +34,20 @@
}

button.components-button.is-primary {
background-color: #117ac9;
border-color: #117ac9;
background-color: var(--studio-blue-50);
border-color: var(--studio-blue-50);

&:active:not(:disabled),
&:hover:not(:disabled),
&:focus:not(:disabled) {
background-color: #0e64a5;
border-color: #0e64a5;
background-color: var(--studio-blue-60);
border-color: var(--studio-blue-60);
}
}

button.components-button.is-link {
padding: 20px 0 6px 0;
color: #1d2333;
color: var(--studio-blue-90);
Copy link
Member

Choose a reason for hiding this comment

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

The difference between these 2 colors is quite big:

Screenshot 2025-01-23 at 12 05 36

I wonder if that's intentional and if there's a better one.

Still, I confirm that blue-90 is the closest one.

Copy link
Member Author

Choose a reason for hiding this comment

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

CC: @davemart-in since this touches the logged out reader. But I think it's fine. In this case, open http://calypso.localhost:3000/tag/writing in an incognito window, then press "Like" on a post, you'll see this:

Screenshot 2025-01-23 at 13 22 26

The "Log in" button is now getting the studio color. Which has sufficient contrast with a white background.

Copy link
Contributor

Choose a reason for hiding this comment

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

This observation is potentially unrelated – forgive me if so – but should the 'Log in' link color match others in the software? That seems to be the default blue for all admin themes except Modern:

link

Copy link
Member Author

Choose a reason for hiding this comment

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

Important context: "Modern" is both the default WordPress.com brand color, but also the default color scheme that's set for every new Simple site created. Which means if we land this PR and Automattic/color-studio#764, then new users will see a consistent Blueberry, #3858e9 across all those sections, including the example you show.

In https://github.com/Automattic/dotcom-forge/issues/8519#issuecomment-2593275569 it was discussed what the role of this color scheme should be, the decision (CC: @fditrapani) is that if you set a color scheme, we respect that choice for that particular site. The nuance is: that choice is per-site, and you might have 10 sites in your account, each of them with a different color scheme. So what does that mean for sections like /me, /sites, or /read? For the moment, with the two PRs mentioned in the first paragraph, those will be Blueberry, regardless of your individual site color scheme.

What do you think, and did that answer your question?


&:hover:not(:disabled) {
color: var(--studio-blue-50);
Expand Down
4 changes: 2 additions & 2 deletions client/landing/stepper/declarative-flow/internals/global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,8 +233,8 @@ button {

.is-section-stepper {
.search-filters__popover {
--color-accent: #117ac9 !important;
--color-accent-60: #0e64a5 !important;
--color-accent: var(--studio-blue-50) !important;
--color-accent-60: var(--studio-blue-60) !important;
}
}

Expand Down
4 changes: 2 additions & 2 deletions client/my-sites/plugins/education-footer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@ const EducationFooterContainer = styled.div`
`;

const MarketplaceContainer = styled.div< { isloggedIn: boolean } >`
--color-accent: #117ac9;
--color-accent-60: #0e64a5;
--color-accent: var( --studio-blue-50 );
--color-accent-60: var( --studio-blue-60 );
margin-bottom: -32px;

.marketplace-cta {
Expand Down
4 changes: 2 additions & 2 deletions client/signup/steps/website-content/dialogs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@ const DialogButton = styled( Button )`
box-shadow: 0px 1px 2px rgba( 0, 0, 0, 0.05 );
border-radius: 5px;
padding: ${ ( props ) => ( props.primary ? '10px 64px' : '10px 32px' ) };
--color-accent: #117ac9;
--color-accent-60: #0e64a5;
--color-accent: var( --studio-blue-50 );
--color-accent-60: var( --studio-blue-60 );
.gridicon {
margin-left: 10px;
}
Expand Down
2 changes: 1 addition & 1 deletion client/sites-dashboard/components/sites-site-coming-soon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Root = styled.div( {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#117ac9',
backgroundColor: 'var(--studio-blue-50)',
borderRadius: 4,
boxSizing: 'border-box',
border: '1px solid rgb(238, 238, 238)',
Expand Down
2 changes: 1 addition & 1 deletion packages/onboarding/src/confetti/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const Index: React.FunctionComponent< { className?: string } > = ( { className }
height="15"
rx="2.386"
transform="rotate(-32 97 2.53)"
fill="#117AC9"
fill="var(--studio-blue-50)"
/>
<Rect
x="323.638"
Expand Down
4 changes: 2 additions & 2 deletions packages/onboarding/styles/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,5 @@ $onboarding-body-margin-medium: 0 0 80px 0;
// @TODO: refactor to common variable in onboarding
// see https://github.com/Automattic/wp-calypso/issues/47181
// the blue accent this is used as the primary color in focused-launch
$onboarding-accent-blue: #117ac9;
$onboarding-accent-blue-background: #fafcfe;
$onboarding-accent-blue: var(--studio-blue-50);
$onboarding-accent-blue-background: var(--studio-blue-0);
Copy link
Member

Choose a reason for hiding this comment

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

Should we double-check the visual impact of this?

The blue-ish tint is quite more noticeable with blue-0:

Screenshot 2025-01-23 at 12 06 59

Copy link
Member Author

Choose a reason for hiding this comment

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

@ciampo can you confirm? As best I can tell, this is touching the blue shades that were introduced here: #47181

Copy link
Contributor

@ciampo ciampo Jan 28, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

That PR was a while ago! Let me take a look and see if I can remember with any additional context about it

Copy link
Contributor

Choose a reason for hiding this comment

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

@jasmussen the previous colors were indeed introduced during the Focused Launch project, but I think that Marin comments still stands — the new suggested colors produce a worse contrast when used in combination:

Before After
Screenshot 2025-01-28 at 14 51 16 Screenshot 2025-01-28 at 14 53 25

In particular, the --studio-blue-0 variable used as the background color seems quite dark.

Are there any guidelines for using studio colors on backgrounds? Could we alternatively use white as the background?

Copy link
Member Author

Choose a reason for hiding this comment

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

Nice, thanks for testing.

As of this PR, however, with puPv3-nYp-p2 as a counterpart, the new studio color values will be #fbfcfe for Blue 0, and #3858e9 for Blue 50. Resulting in this:

example

Screenshot 2025-01-29 at 12 17 22

I'm happy to postpone rolling this one out until those variables are updated, if that changes the conversation? I can also just omit those particular instances if need be.

Copy link
Contributor

Choose a reason for hiding this comment

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

That's great! Probably cleanest course of action is to update this project to use the latest color studio version, before resuming work on this PR.

I went ahead and opened a PR to update the color studio version: #99037 (although I'll need your and every other dotcom designer help to properly test it)

Copy link
Member

Choose a reason for hiding this comment

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

Just to close the loop, #99033 is already doing the color studio package update and #99037 was closed in its favor.

2 changes: 1 addition & 1 deletion packages/privacy-toolset/src/cookie-banner/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ $horizontal-padding: 20px;
$cookie-banner-bg-color: #fff;
$cookie-banner-text-color: #000;
$cookie-banner-text-muted-color: #000;
$cookie-banner-link-color: #117ac9;
$cookie-banner-link-color: var(--studio-blue-50);

// Buttons
$cookie-banner-main-button-color: $cookie-banner-link-color;
Expand Down