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

Fix fill color of checkbox icon #26125

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

Conversation

leonidk14
Copy link

I have read the CONTRIBUTING.md file.

YES

What kind of change does this PR introduce?

It fixes fill color of checkbox icon

What is the current behavior?

Right now both the background color of checkbox in checked state and fill color of the checkmark icon are black -> icon is not visible

Screenshot 2024-05-11 at 14 17 15

What is the new behavior?

When the checkbox is checked the icon will be white

@leonidk14 leonidk14 requested a review from a team as a code owner May 11, 2024 12:21
Copy link

vercel bot commented May 11, 2024

@leonidk14 is attempting to deploy a commit to the Supabase Team on Vercel.

A member of the Team first needs to authorize it.

@leonidk14 leonidk14 changed the title Update fill color of checked checkbox Fix fill color of checkbox icon May 11, 2024
Copy link

vercel bot commented May 15, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
studio-staging ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 15, 2024 7:44am
4 Ignored Deployments
Name Status Preview Comments Updated (UTC)
docs ⬜️ Ignored (Inspect) Visit Preview May 15, 2024 7:44am
studio ⬜️ Ignored (Inspect) Visit Preview May 15, 2024 7:44am
studio-self-hosted ⬜️ Ignored (Inspect) Visit Preview May 15, 2024 7:44am
zone-www-dot-com ⬜️ Ignored (Inspect) Visit Preview May 15, 2024 7:44am

@@ -170,7 +170,7 @@
}

[type='checkbox']:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
Copy link
Contributor

Choose a reason for hiding this comment

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

this will need to be fixed using CSS variables as we have multiple themes.

You can see the variables in use in these theme files.

Probably best to use background-control for the background on the checkbox, and foreground-default for the check.

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.

None yet

2 participants