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.

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

Add inverse option for organisation logo #4284

Merged
merged 3 commits into from
Oct 16, 2024
Merged

Add inverse option for organisation logo #4284

merged 3 commits into from
Oct 16, 2024

Conversation

andysellick
Copy link
Contributor

What

Adds an inverse option for the organisation logo component.

This is currently WIP and limited to one organisation. Since organisations have different logos, rolling out a universal inverse option would require inverse versions of every logo.

Why

Part of some requirements.

Visual Changes

@govuk-ci govuk-ci temporarily deployed to components-gem-pr-4284 October 7, 2024 07:36 Inactive
@matthillco
Copy link
Contributor

matthillco commented Oct 14, 2024

I just noticed this PR and thought I'd comment with a possible quick solution for the inverted icons. We might consider using filter: invert(1) (or background-blend-mode: difference) for the icon. When a black icon is placed on a black background, these rules will make the icon appear white. Both of these are available for our target browsers. However I appreciate this might be considered a bit of a hack.

@govuk-ci govuk-ci temporarily deployed to components-gem-pr-4284 October 16, 2024 11:08 Inactive
@JamesCGDS
Copy link
Contributor

Thanks for the suggestion @matthillco - I ended up using a variation of this (filter: filter: brightness(0) invert(1);) because filter: invert(1) was also inverting the white link text, making it black. Adding brightness(0) seemed to resolve things though.

@JamesCGDS JamesCGDS changed the title [DO NOT MERGE] Add inverse option for organisation logo Add inverse option for organisation logo Oct 16, 2024
@JamesCGDS JamesCGDS marked this pull request as ready for review October 16, 2024 11:18
Copy link
Contributor

@AshGDS AshGDS left a comment

Choose a reason for hiding this comment

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

Looks good, had a few questions, and would need a changelog entry 👍

@govuk-ci govuk-ci temporarily deployed to components-gem-pr-4284 October 16, 2024 12:57 Inactive
@govuk-ci govuk-ci temporarily deployed to components-gem-pr-4284 October 16, 2024 13:01 Inactive
@JamesCGDS
Copy link
Contributor

Thanks for the review @AshGDS 👍 Have addressed the comments and added a changelog entry - ready for a re-review when you get a mo

Copy link
Contributor

@AshGDS AshGDS left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@JamesCGDS JamesCGDS merged commit f40cfab into main Oct 16, 2024
12 checks passed
@JamesCGDS JamesCGDS deleted the org-logo-inverse branch October 16, 2024 13:44
@andysellick andysellick mentioned this pull request Oct 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants