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.

Sign up for GitHub

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

Jump to bottom

Dark mode: Local navigation #2276

Merged
merged 21 commits into from
Oct 4, 2023
Merged

Dark mode: Local navigation #2276

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
70c6f34
Drop dark variants
julien-deramond Sep 26, 2023
cdd4c5b
Update site/content/docs/5.3/components/close-button.md
julien-deramond Oct 3, 2023
3f6d5d9
Update site/content/docs/5.3/components/close-button.md
julien-deramond Oct 3, 2023
17de6cf
Update site/content/docs/5.3/components/offcanvas.md
julien-deramond Oct 3, 2023
30d7259
Drop .navbar-dark references
julien-deramond Oct 3, 2023
1d72d33
Drop .dropdown-menu-dark references
julien-deramond Oct 3, 2023
8fca9ba
Drop .btn-close-white
julien-deramond Oct 3, 2023
77ff5f5
Drop .accordion-dark
julien-deramond Oct 3, 2023
215818f
.
julien-deramond Oct 3, 2023
0201408
.
julien-deramond Oct 3, 2023
ca9bb0a
.
julien-deramond Oct 3, 2023
d443832
.
julien-deramond Oct 3, 2023
ea496be
Drop .star-rating-dark
julien-deramond Oct 3, 2023
800cc26
.
julien-deramond Oct 3, 2023
30ed83e
Merge branch 'main-jd-dark-mode' into main-his-dark-mode-local-nav
hannahiss Oct 3, 2023
22994b8
First version of local nav dark-mode
hannahiss Oct 3, 2023
92b5fed
Merge branch 'main-jd-dark-mode' into main-his-dark-mode-local-nav
hannahiss Oct 3, 2023
12e0c1a
Merge branch 'main-jd-dark-mode' into main-his-dark-mode-local-nav
hannahiss Oct 3, 2023
39a747d
Add disabled-color and use it for star-rating as well + in dark-mode …
hannahiss Oct 3, 2023
1566ec8
.
hannahiss Oct 3, 2023
154aa98
.
hannahiss Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions scss/_root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,12 @@
--#{$prefix}form-invalid-color: #{$form-invalid-color};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
// scss-docs-end root-form-validation-variables

// ******* Additions for dark-mode
--#{$prefix}hover-color: #{$body-color};
--#{$prefix}active-bg: #{$gray-400};
--#{$prefix}disabled-color: #{$gray-500};
Copy link
Member

Choose a reason for hiding this comment

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

As a first step, I'd be fine fine defining those right there, but IMHO, they should have their own Sass variables somewhere.
Fine for now but if we keep them, I like the naming though it's a bit too evasive maybe.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes, variables names and way to do it are te be discussed... but for now useful and simple 😄

// ******* End additions for dark-mode
}

@if $enable-dark-mode {
Expand Down Expand Up @@ -202,6 +208,12 @@
--#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
--#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
--#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};

// ******* Additions for dark-mode
--#{$prefix}hover-color: #{$brand-orange};
--#{$prefix}active-bg: #{$gray-700};
--#{$prefix}disabled-color: #{$gray-700};
// ******* End additions for dark-mode
// scss-docs-end root-dark-mode-vars
}
}
16 changes: 8 additions & 8 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1182,7 +1182,7 @@ $form-star-margin-between: -.125rem !default;
$form-star-rating-checked-color: var(--#{$prefix}link-hover-color) !default;
$form-star-rating-unchecked-color: var(--#{$prefix}secondary-color) !default;
$form-star-rating-hover-color: var(--#{$prefix}highlight-bg) !default;
$form-star-rating-disabled-color: var(--#{$prefix}border-color-translucent) !default;
$form-star-rating-disabled-color: var(--#{$prefix}disabled-color) !default;

$form-star-rating-checked-icon: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='#000' stroke='#000' d='m12.5 4.523 2.016 6.227 6.542-.005-5.296 3.843 2.027 6.224L12.5 16.96l-5.289 3.852 2.027-6.224-5.296-3.843 6.542.005L12.5 4.523Z'/></svg>")) !default;
$form-star-rating-unchecked-icon: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='transparent' stroke='#000' d='m12.5 4.523 2.016 6.227 6.542-.005-5.296 3.843 2.027 6.224L12.5 16.96l-5.289 3.852 2.027-6.224-5.296-3.843 6.542.005L12.5 4.523Z'/></svg>")) !default;
Expand Down Expand Up @@ -1390,7 +1390,7 @@ $nav-link-font-weight: $font-weight-bold !default;
$nav-link-color: var(--#{$prefix}link-color) !default;
$nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
$nav-link-transition: null !default; // Boosted mod
$nav-link-disabled-color: $gray-500 !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
$nav-link-disabled-color: var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)`
// Boosted mod: no `$nav-link-focus-box-shadow`

$nav-tabs-border-color: var(--#{$prefix}border-color) !default;
Expand Down Expand Up @@ -1451,7 +1451,7 @@ $navbar-toggler-transition: $transition-focus !default; // Boosted mod
$navbar-light-color: var(--#{$prefix}emphasis-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .65)`
$navbar-light-hover-color: $accessible-orange !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .8)`
$navbar-light-active-color: $accessible-orange !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), 1)`
$navbar-light-disabled-color: $gray-500 !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .3)`
$navbar-light-disabled-color: var(--#{$prefix}disabled-color) !default; // Boosted mod: instead of `rgba(var(--#{$prefix}emphasis-color-rgb), .3)`
// Boosted mod: no $navbar-light-icon-color
$navbar-light-toggler-icon-bg: $burger-icon !default; // Boosted mod: instead of inline SVG
$navbar-light-toggler-icon-bg-small: $burger-icon-small !default; // Boosted mod: slightly different burger icon for small breakpoints
Expand Down Expand Up @@ -2356,12 +2356,12 @@ $tag-font-size-sm: $font-size-sm !default;
$local-nav-padding-y: $navbar-nav-link-padding-y !default;
$local-nav-color: var(--#{$prefix}body-color) !default;
$local-nav-bg: var(--#{$prefix}body-bg) !default;
$local-nav-hover-color: $local-nav-color !default;
$local-nav-hover-bg: $gray-300 !default;
$local-nav-active-color: $accessible-orange !default;
$local-nav-active-bg: $gray-400 !default;
$local-nav-hover-color: var(--#{$prefix}hover-color) !default;
$local-nav-hover-bg: var(--#{$prefix}secondary-bg) !default;
$local-nav-active-color: var(--#{$prefix}link-hover-color) !default;
$local-nav-active-bg: var(--#{$prefix}active-bg) !default;
$local-nav-active-marker-width: $spacer * .2 !default;
$local-nav-border-color: $gray-500 !default;
$local-nav-border-color: var(--#{$prefix}border-color-translucent) !default;
$local-nav-border-width: calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list
// scss-docs-end local-nav-variables
// End mod
24 changes: 20 additions & 4 deletions site/content/docs/5.3/dark-mode.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,22 @@ sitemap_exclude: true
<div style="width: 50px; height: 50px; background-color:var(--bs-danger)" data-bs-theme="light"></div>
<div style="width: 50px; height: 50px; background-color:var(--bs-danger)" data-bs-theme="dark"></div>
</div>
Additional variables for dark-mode (temporary)
<div class="d-flex flex-row gap-2 align-items-center">
<div style="width: 200px">--bs-hover-color</div>
<div style="width: 50px; height: 50px; background-color:var(--bs-hover-color)" data-bs-theme="light"></div>
<div style="width: 50px; height: 50px; background-color:var(--bs-hover-color)" data-bs-theme="dark"></div>
</div>
<div class="d-flex flex-row gap-2 align-items-center">
<div style="width: 200px">--bs-active-bg</div>
<div style="width: 50px; height: 50px; background-color:var(--bs-active-bg)" data-bs-theme="light"></div>
<div style="width: 50px; height: 50px; background-color:var(--bs-active-bg)" data-bs-theme="dark"></div>
</div>
<div class="d-flex flex-row gap-2 align-items-center">
<div style="width: 200px">--bs-disabled-color</div>
<div style="width: 50px; height: 50px; background-color:var(--bs-disabled-color)" data-bs-theme="light"></div>
<div style="width: 50px; height: 50px; background-color:var(--bs-disabled-color)" data-bs-theme="dark"></div>
</div>
</div>

## Components
Expand Down Expand Up @@ -368,7 +384,7 @@ Using bg-body
#### Dark theme on component

<div class="border border-tertiary p-3" style="background-color: #282d55">
<div class="alert alert-success bg-body" role="alert" data-bs-theme="dark">
<div class="alert alert-success" role="alert" data-bs-theme="dark">
<span class="alert-icon"><span class="visually-hidden">Success</span></span>
<p>Success notification text goes here.</p>
</div>
Expand All @@ -389,7 +405,7 @@ Using bg-body
#### Light theme on component

<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
<div class="alert alert-success bg-body" role="alert" data-bs-theme="light">
<div class="alert alert-success" role="alert" data-bs-theme="light">
<span class="alert-icon"><span class="visually-hidden">Success</span></span>
<p>Success notification text goes here.</p>
</div>
Expand Down Expand Up @@ -541,8 +557,9 @@ Using bg-body
### Local navigation

#### No theme

<div class="border border-tertiary p-3">
<nav class="local-nav" aria-label="Basic local navigation" data-bs-theme="dark">
<nav class="local-nav" aria-label="Basic local navigation">
<button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav1" aria-expanded="false" aria-controls="collapseLocalNav1">
<span class="container-xxl">Shop</span>
</button>
Expand Down Expand Up @@ -643,7 +660,6 @@ Using bg-body
</nav>
</div>


## Forms

### Star rating
Expand Down