Skip to content

Commit

Permalink
Dark mode: Local navigation (#2276)
Browse files Browse the repository at this point in the history 
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
  • Loading branch information
@hannahiss @julien-deramond @louismaximepiton
3 people authored Oct 4, 2023
1 parent 56a39e5 commit c6c74bb
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 12 deletions.
12 changes: 12 additions & 0 deletions scss/_root.scss
View file
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};
// ******* 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
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
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

0 comments on commit c6c74bb

Please sign in to comment.