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

Dark mode: Stepped process #2273

Merged
merged 52 commits into from
Oct 3, 2023

Conversation

hannahiss
Copy link
Member

@hannahiss hannahiss commented Sep 27, 2023

Description

Stepped process in dark mode, by using existing css vars :

  • $step-item-bg: --bs-highlight-bg - to switch from black to white - ⚠️ strange use of var --bs-highlight-bg to be noted)
  • $step-item-next-bg: --bs-border-color-translucent - to switch from #ccc to #666 - ⚠️ strange use of var --bs-border-color-translucent to be noted)
  • $step-item-drop-shadow: using --bs-stepped-process-bg which is equal to --bs-body-bg - to switch from white to black
  • $step-link-color: --bs-link-color - to switch from black to white
  • $step-link-next-color: --bs-link-color - to switch from black to white

⚠️ color of stepped process on light mode is changed from #ddd to #ccc by this PR

⚠️ An additional var is added to let users change component background:

  • --bs-stepped-process-bg equals to --bs-body-bg but ca,n be changed by users
  • add example to show how to change --bs-stepped-process-bg

Links

@julien-deramond julien-deramond changed the base branch from main-jd-dark-mode to main-jd-dark-mode-drop-dark-variants September 27, 2023 10:59
@netlify
Copy link

netlify bot commented Sep 27, 2023

Deploy Preview for boosted ready!

Name Link
🔨 Latest commit 0b12e4f
🔍 Latest deploy log https://app.netlify.com/sites/boosted/deploys/651bde766e294b000841510b
😎 Deploy Preview https://deploy-preview-2273--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 changed the title Main his dark mode stepped process Dark mode: Stepped process Sep 27, 2023
@hannahiss hannahiss changed the base branch from main-jd-dark-mode-drop-dark-variants to main-jd-dark-mode September 27, 2023 11:05
@hannahiss hannahiss changed the base branch from main-jd-dark-mode to main-jd-dark-mode-drop-dark-variants September 27, 2023 11:06
@hannahiss hannahiss marked this pull request as draft September 27, 2023 11:08
Copy link
Contributor

@julien-deramond julien-deramond left a comment

Choose a reason for hiding this comment

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

Minor comments and we're good to go for this first version of semi-complex component

site/content/docs/5.3/dark-mode.md Outdated Show resolved Hide resolved
site/content/docs/5.3/dark-mode.md Outdated Show resolved Hide resolved
scss/_variables-dark.scss Outdated Show resolved Hide resolved
@julien-deramond julien-deramond added the color mode Temporary label to highlight color mode issues label Sep 28, 2023
@julien-deramond julien-deramond force-pushed the main-jd-dark-mode-drop-dark-variants branch from bb078d6 to 36cb3f0 Compare October 2, 2023 07:03
Base automatically changed from main-jd-dark-mode-drop-dark-variants to main-jd-dark-mode October 3, 2023 09:12
# Conflicts:
#	site/content/docs/5.3/components/navbar.md
#	site/layouts/shortcodes/callout-deprecated-dark-variants.html
@julien-deramond julien-deramond marked this pull request as ready for review October 3, 2023 09:39
Copy link
Contributor

@julien-deramond julien-deramond left a comment

Choose a reason for hiding this comment

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

LGTM

@julien-deramond julien-deramond merged commit e2a770b into main-jd-dark-mode Oct 3, 2023
14 checks passed
@julien-deramond julien-deramond deleted the main-his-dark-mode-stepped-process branch October 3, 2023 09:54
@julien-deramond julien-deramond mentioned this pull request Oct 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
color mode Temporary label to highlight color mode issues
Projects
Development

Successfully merging this pull request may close these issues.

2 participants