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 Solaris icons for light/dark mode #2237

Merged
merged 7 commits into from Sep 14, 2023

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Sep 12, 2023

Description

This PR changes the light/dark icons used in the theme selector to use Solaris icons:

  • UI Light Mode
  • UI Dark Mode

UI Auto Mode Solaris icon is not yet available and will be updated later on.

The rendering is the following:

Screenshot 2023-09-14 at 12 21 11

Technical

Note: icon sizes have been specified by @Franco-Riccitelli

  • Icons (sun, moon, auto, and tick) size: 20px x 20px (in the toggle button and in the dropdown menu items)
    • @Franco-Riccitelli This is treated as a specific rendering within the documentation and so not as an official variant of the dropdowns containing icons. It could maybe be a new variant within the DSM and Boosted
  • Caret size: 10px x 5px
    • This size is the same as in our current dropdowns so I suggest creating a specific issue to tackle it within the whole framework (the current size is a bit too large)
  • This PR changes the #check2 SVG used in the examples page as it wasn't the right one before (it was Bootstrap's)
  • This PR includes the fix from Fix: make theme selector tick icon visible when active in examples layout twbs/bootstrap#39177 right now so that we can see the tick in example pages
  • The rendering in light/dark mode is a bit broken on the examples page but this will be treated outside of this PR because probably linked to the basic rendering of other components in Boosted.

Live previews

@netlify
Copy link

netlify bot commented Sep 12, 2023

Deploy Preview for boosted ready!

Name Link
🔨 Latest commit 66b1784
🔍 Latest deploy log https://app.netlify.com/sites/boosted/deploys/6502de39754da200085df875
😎 Deploy Preview https://deploy-preview-2237--boosted.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@julien-deramond julien-deramond marked this pull request as ready for review September 12, 2023 13:39
MewenLeHo

This comment was marked as outdated.

@julien-deramond

This comment was marked as resolved.

@julien-deramond julien-deramond marked this pull request as draft September 13, 2023 07:03
@julien-deramond

This comment was marked as resolved.

@julien-deramond julien-deramond marked this pull request as ready for review September 14, 2023 10:49
Copy link
Contributor

@MewenLeHo MewenLeHo 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 to me and a11y is ok too.

@julien-deramond julien-deramond merged commit 3f2be51 into main-jd-dark-mode Sep 14, 2023
16 checks passed
@julien-deramond julien-deramond deleted the main-jd-dark-mode-icons branch September 14, 2023 12:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging this pull request may close these issues.

None yet

2 participants