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: Tags #2283

Merged
merged 1 commit into from
Oct 10, 2023
Merged

Dark mode: Tags #2283

merged 1 commit into from
Oct 10, 2023

Conversation

hannahiss
Copy link
Member

@hannahiss hannahiss commented Oct 5, 2023

Description

Tags in dark mode, by using existing Sass vars :

Sass var Previous value New value
$tag-active-color $white var(--#{$prefix}highlight-color)
$tag-disabled-color $gray-500 var(--#{$prefix}disabled-color)
$tag-border-color $gray-500 var(--#{$prefix}border-color-translucent)
$tag-active-decoration-color $black var(--#{$prefix}highlight-bg) ⚠️ strange use of this variable

⚠️ Added 2 Sass vars and corresponding css vars:

Sass var css var Value
$tag-color var(--#{$prefix}tag-color) var(--#{$prefix}body-color)
$tag-bg var(--#{$prefix}tag-bg) var(--#{$prefix}body-bg)

Links

@hannahiss hannahiss changed the base branch from main to main-jd-dark-mode October 5, 2023 13:45
@netlify
Copy link

netlify bot commented Oct 5, 2023

Deploy Preview for boosted ready!

Name Link
🔨 Latest commit 6bde2a6
🔍 Latest deploy log https://app.netlify.com/sites/boosted/deploys/6524e225b4b3b90008f59296
😎 Deploy Preview https://deploy-preview-2283--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.

@hannahiss hannahiss marked this pull request as ready for review October 5, 2023 14:09
@hannahiss hannahiss added the color mode Temporary label to highlight color mode issues label Oct 5, 2023
Copy link
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

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

On the artboard, the background color of tags is solid. Just a quick talk about it at the daily to make sure the solution implemented here is fine from a design pov.

We should introduce Sass variables and CSS vars for default color and default background of tags.

scss/_variables.scss Outdated Show resolved Hide resolved
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
Copy link
Member

@louismaximepiton louismaximepiton 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 force-pushed the main-his-dark-mode-tags branch from 3674479 to 6bde2a6 Compare October 10, 2023 05:33
@julien-deramond julien-deramond self-requested a review October 10, 2023 05:33
@julien-deramond julien-deramond merged commit 8616228 into main-jd-dark-mode Oct 10, 2023
13 checks passed
@julien-deramond julien-deramond deleted the main-his-dark-mode-tags branch October 10, 2023 05:33
@julien-deramond julien-deramond mentioned this pull request Oct 10, 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.

3 participants