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

Dark mode: Stepped process #2273

Merged
merged 52 commits into from
Oct 3, 2023
Merged

Dark mode: Stepped process #2273

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
abd9d0c
Drop dark variants
julien-deramond Sep 26, 2023
2206c43
.
julien-deramond Sep 26, 2023
e0dc955
.
julien-deramond Sep 26, 2023
22d7394
Drop dark Breadcrumb
julien-deramond Sep 27, 2023
9155532
Drop dark List group
julien-deramond Sep 27, 2023
2ad7cf6
Drop dark local navigation
julien-deramond Sep 27, 2023
26699d0
Drop dark pagination
julien-deramond Sep 27, 2023
d080862
Drop dark stepped process
julien-deramond Sep 27, 2023
21e588a
Drop dark tag
julien-deramond Sep 27, 2023
faa9865
Merge branch 'main-jd-dark-mode' into main-jd-dark-mode-drop-dark-var…
hannahiss Sep 27, 2023
a7695cf
stepped-process dark mode (with no more dark-variant)
hannahiss Sep 27, 2023
104b3fe
stepped-process dark mode (with no more dark-variant)
hannahiss Sep 27, 2023
86686e1
Add Boosted mod in _variables-dark.scss
julien-deramond Sep 28, 2023
b4ddb1e
change background color + titles
hannahiss Sep 28, 2023
3ab7040
try to make it work by using css vars and switch mode in root.scss
hannahiss Sep 29, 2023
c7cf563
remove duplicate code example
hannahiss Sep 29, 2023
af1418a
use directly css var when possible to switch automatically
hannahiss Sep 29, 2023
b7fced8
Change sass variables with css variables with intermediary variable
hannahiss Sep 29, 2023
36cb3f0
Drop dark variants
julien-deramond Sep 26, 2023
cc8e2a0
stepped-process dark mode (with no more dark-variant)
hannahiss Sep 27, 2023
225ad36
stepped-process dark mode (with no more dark-variant)
hannahiss Sep 27, 2023
cb874e6
Add Boosted mod in _variables-dark.scss
julien-deramond Sep 28, 2023
bf923c7
change background color + titles
hannahiss Sep 28, 2023
60af8ea
try to make it work by using css vars and switch mode in root.scss
hannahiss Sep 29, 2023
cb9ed99
remove duplicate code example
hannahiss Sep 29, 2023
9cfb4f5
use directly css var when possible to switch automatically
hannahiss Sep 29, 2023
f12e96a
Change sass variables with css variables with intermediary variable
hannahiss Sep 29, 2023
2d993c9
Merge remote-tracking branch 'origin/main-his-dark-mode-stepped-proce…
hannahiss Oct 2, 2023
70c6f34
Drop dark variants
julien-deramond Sep 26, 2023
4ae3eea
Merge branch 'main-jd-dark-mode-drop-dark-variants' into main-his-dar…
hannahiss Oct 2, 2023
78bb833
use border-color-translucent for next step bg (indications change fro…
hannahiss Oct 2, 2023
355f702
reverse wrongly committed files :-)
hannahiss Oct 2, 2023
71fbc4c
use bs-link-color instead of bs-highlight-color for links
hannahiss Oct 2, 2023
80e2129
revert use bs-link-color instead of bs-highlight-color for links + ad…
hannahiss Oct 2, 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
937c31f
Merge branch 'main-jd-dark-mode-drop-dark-variants' into main-his-dar…
hannahiss Oct 3, 2023
800cc26
.
julien-deramond Oct 3, 2023
03a63c4
Merge branch 'main-jd-dark-mode-drop-dark-variants' into main-his-dar…
hannahiss Oct 3, 2023
4dda137
add intermediary variable --bs-stepped-process-bg to allow change of …
hannahiss Oct 3, 2023
96cf29e
.
hannahiss Oct 3, 2023
0b12e4f
Merge branch 'main-jd-dark-mode' into main-his-dark-mode-stepped-process
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
1 change: 1 addition & 0 deletions scss/_stepped-process.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
--#{$prefix}stepped-process-font-size: #{$stepped-process-font-size};
--#{$prefix}stepped-process-font-weight: #{$stepped-process-font-weight};
--#{$prefix}stepped-process-counter: #{$stepped-process-counter};
--#{$prefix}stepped-process-bg: #{$stepped-process-bg};
--#{$prefix}stepped-process-item-padding-y: #{$step-item-padding};
--#{$prefix}stepped-process-item-padding-x: 0;
--#{$prefix}stepped-process-item-margin-end: #{$step-item-margin-end};
Expand Down
1 change: 0 additions & 1 deletion scss/_variables-dark.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,6 @@ $code-color-dark: tint-color($code-color, 40%) !default;
$mark-color-dark: $black !default; // Boosted mod: instead of `$body-color-dark`
$mark-bg-dark: $white !default; // Boosted mod: instead of `$yellow-800`


//
// Forms
//
Expand Down
11 changes: 6 additions & 5 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2206,26 +2206,27 @@ $stepped-process-font-size: $small-font-size !default;
$stepped-process-font-weight: $font-weight-bold !default;
$stepped-process-max-items: 5 !default;
$stepped-process-counter: step !default; // Used as a counter name
$stepped-process-bg: var(--#{$prefix}body-bg) !default;

$step-item-padding: 7px !default;
// fusv-disable
$step-item-padding-end: $step-item-padding * 2 !default; // Deprecated in v5.2.0
// fusv-enable
$step-item-margin-end: var(--#{$prefix}border-width) !default;
$step-item-bg: $black !default;
$step-item-bg: var(--#{$prefix}highlight-bg) !default;
$step-item-active-bg: $primary !default;
$step-item-next-bg: $gray-400 !default;
$step-item-next-bg: var(--#{$prefix}border-color-translucent) !default;
$step-item-shadow-size: calc(var(--#{$prefix}border-width) * 1.5) !default; // stylelint-disable-line function-disallowed-list
$step-item-drop-shadow: drop-shadow($step-item-shadow-size 0 0 $white) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 $white) #{"*/"} !default; // stylelint-disable-line function-disallowed-list
$step-item-drop-shadow: drop-shadow($step-item-shadow-size 0 0 var(--#{$prefix}stepped-process-bg)) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 var(--#{$prefix}stepped-process-bg)) #{"*/"} !default; // stylelint-disable-line function-disallowed-list

$step-item-arrow-width: .8125rem !default;
$step-item-arrow-shape: polygon(0% 0%, 1px 0%, subtract(100%, var(--#{$prefix}border-width)) 50%, 1px 100%, 0% 100%) #{"/* rtl:"} polygon(100% 0%, subtract(100%, 1px) 0%, var(--#{$prefix}border-width) 50%, subtract(100%, 1px) 100%, 100% 100%) #{"*/"} !default; // Used in clip-path

$step-link-width: 1.25ch !default; // Matches width of a single number
$step-link-color: $white !default;
$step-link-color: var(--#{$prefix}highlight-color) !default;
$step-link-active-color: $black !default;
$step-link-active-outline: $black !default;
$step-link-next-color: $black !default;
$step-link-next-color: var(--#{$prefix}link-color) !default;
$step-link-line-height: $line-height-sm !default;
$step-link-marker: counter(var(--bs-stepped-process-counter)) inspect("\A0") !default;
$step-link-marker-lg: counter(var(--bs-stepped-process-counter)) inspect(".\A0") !default;
Expand Down
41 changes: 23 additions & 18 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 @@ -46,6 +46,11 @@ sitemap_exclude: true
<div style="width: 50px; height: 50px; background-color:var(--bs-secondary-color)" data-bs-theme="light"></div>
<div style="width: 50px; height: 50px; background-color:var(--bs-secondary-color)" data-bs-theme="dark"></div>
</div>
<div class="d-flex flex-row gap-2 align-items-center">
<div style="width: 200px">--bs-link-color</div>
<div style="width: 50px; height: 50px; background-color:var(--bs-link-color)" data-bs-theme="light"></div>
<div style="width: 50px; height: 50px; background-color:var(--bs-link-color)" data-bs-theme="dark"></div>
</div>
<div class="d-flex flex-row gap-2 align-items-center">
<div style="width: 200px">--bs-link-hover-color</div>
<div style="width: 50px; height: 50px; background-color:var(--bs-link-hover-color)" data-bs-theme="light"></div>
Expand Down Expand Up @@ -121,7 +126,7 @@ sitemap_exclude: true
</div>
</div>

### Local dark theme
### Dark theme on container

Using bg-body

Expand Down Expand Up @@ -164,7 +169,7 @@ Using bg-body
</div>
</div>

### Local light theme
### Light theme on container

Using bg-body

Expand Down Expand Up @@ -209,7 +214,7 @@ Using bg-body

### Dark theme on component

<div class="border border-tertiary p-3">
<div class="border border-tertiary p-3" style="background-color: #282d55">
<div class="accordion" id="accordionExample6" data-bs-theme="dark">
<div class="accordion-item">
<h2 class="accordion-header">
Expand Down Expand Up @@ -250,7 +255,7 @@ Using bg-body

### Light theme on component

<div class="border border-tertiary p-3">
<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
<div class="accordion" id="accordionExample7" data-bs-theme="light">
<div class="accordion-item">
<h2 class="accordion-header">
Expand Down Expand Up @@ -312,7 +317,7 @@ Using bg-body
</div>
</div>

### Local dark theme
### Dark theme on container

Using bg-body

Expand All @@ -335,7 +340,7 @@ Using bg-body
</div>
</div>

### Local light theme
### Light theme on container

Using bg-body

Expand All @@ -360,7 +365,7 @@ Using bg-body

### Dark theme on component

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

### Light theme on component

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

### Local dark theme
### Dark theme on container

Using bg-body

Expand All @@ -454,7 +459,7 @@ Using bg-body
</nav>
</div>

### Local light theme
### Light theme on container

Using bg-body

Expand Down Expand Up @@ -483,8 +488,8 @@ Using bg-body

### Dark theme on component

<div class="border border-tertiary p-3">
<nav class="stepped-process" aria-label="Checkout process" data-bs-theme="dark">
<div class="border border-tertiary p-3" style="background-color: #282d55;">
<nav class="stepped-process" aria-label="Checkout process" data-bs-theme="dark" style="--bs-stepped-process-bg: #282d55;">
<p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
<ol>
<li class="stepped-process-item">
Expand All @@ -508,8 +513,8 @@ Using bg-body

### Light theme on component

<div class="border border-tertiary p-3">
<nav class="stepped-process" aria-label="Checkout process" data-bs-theme="light">
<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
<nav class="stepped-process" aria-label="Checkout process" data-bs-theme="light" style="--bs-stepped-process-bg: #b5e8f7;">
<p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
<ol>
<li class="stepped-process-item">
Expand Down Expand Up @@ -552,7 +557,7 @@ Using bg-body
</nav>
</div>

### Local dark theme
### Dark theme on container

Using bg-body

Expand All @@ -574,7 +579,7 @@ Using bg-body
</nav>
</div>

### Local light theme
### Light theme on container

Using bg-body

Expand All @@ -598,7 +603,7 @@ Using bg-body

### Dark theme on component

<div class="border border-tertiary p-3">
<div class="border border-tertiary p-3" style="background-color: #282d55">
<nav class="local-nav" aria-label="Basic local navigation" data-bs-theme="dark">
<button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav4" aria-expanded="false" aria-controls="collapseLocalNav4">
<span class="container-xxl">Shop</span>
Expand All @@ -618,7 +623,7 @@ Using bg-body

### Light theme on component

<div class="border border-tertiary p-3">
<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
<nav class="local-nav" aria-label="Basic local navigation" data-bs-theme="light">
<button class="local-nav-button collapsed d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocalNav5" aria-expanded="false" aria-controls="collapseLocalNav5">
<span class="container-xxl">Shop</span>
Expand Down