From 5a343c8fe062aa6ed16c9639011ed093d9553e7a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 16 Feb 2022 14:55:43 -0800 Subject: [PATCH 01/55] Add dark mode to docs --- .bundlewatch.config.json | 16 +- scss/_accordion.scss | 9 + scss/_alert.scss | 15 +- scss/_carousel.scss | 14 +- scss/_close.scss | 14 +- scss/_dropdown.scss | 1 + scss/_list-group.scss | 26 +- scss/_maps.scss | 67 ++++ scss/_mixins.scss | 1 + scss/_pagination.scss | 2 +- scss/_reboot.scss | 8 +- scss/_root.scss | 122 +++++- scss/_utilities.scss | 23 +- scss/_variables-dark.scss | 70 ++++ scss/_variables.scss | 256 +++++++----- scss/bootstrap-grid.scss | 1 + scss/forms/_form-check.scss | 9 + scss/forms/_form-select.scss | 12 +- scss/mixins/_color-mode.scss | 13 + scss/mixins/_forms.scss | 13 +- scss/mixins/_list-group.scss | 4 +- site/assets/js/color-modes/index.js | 62 +++ site/assets/scss/_ads.scss | 6 +- site/assets/scss/_brand.scss | 4 +- site/assets/scss/_buttons.scss | 18 +- site/assets/scss/_callouts.scss | 13 +- site/assets/scss/_clipboard-js.scss | 6 +- site/assets/scss/_component-examples.scss | 39 +- site/assets/scss/_content.scss | 56 ++- site/assets/scss/_footer.scss | 4 +- site/assets/scss/_masthead.scss | 18 +- site/assets/scss/_navbar.scss | 95 ++++- site/assets/scss/_sidebar.scss | 19 +- site/assets/scss/_syntax.scss | 26 +- site/assets/scss/_toc.scss | 13 +- site/assets/scss/_variables.scss | 10 +- site/content/docs/5.2/about/brand.md | 6 +- site/content/docs/5.2/components/accordion.md | 2 +- site/content/docs/5.2/components/alerts.md | 6 + site/content/docs/5.2/components/carousel.md | 4 + .../docs/5.2/components/close-button.md | 14 +- site/content/docs/5.2/components/dropdowns.md | 12 +- .../content/docs/5.2/components/list-group.md | 14 +- site/content/docs/5.2/components/modal.md | 2 +- site/content/docs/5.2/components/navbar.md | 70 ++-- site/content/docs/5.2/components/offcanvas.md | 4 +- site/content/docs/5.2/components/scrollspy.md | 8 +- site/content/docs/5.2/components/toasts.md | 18 +- site/content/docs/5.2/content/reboot.md | 21 + site/content/docs/5.2/content/tables.md | 4 + .../content/docs/5.2/customize/color-modes.md | 250 ++++++++++++ site/content/docs/5.2/customize/color.md | 366 +++++++++++++++++- .../docs/5.2/customize/css-variables.md | 9 + site/content/docs/5.2/customize/options.md | 1 + site/content/docs/5.2/helpers/stacks.md | 24 +- .../docs/5.2/helpers/stretched-link.md | 2 +- .../content/docs/5.2/helpers/vertical-rule.md | 6 +- site/content/docs/5.2/layout/columns.md | 23 +- site/content/docs/5.2/layout/gutters.md | 54 +-- site/content/docs/5.2/migration.md | 70 ++++ site/content/docs/5.2/utilities/background.md | 1 + site/content/docs/5.2/utilities/borders.md | 1 + site/content/docs/5.2/utilities/colors.md | 10 + site/content/docs/5.2/utilities/overflow.md | 8 +- site/content/docs/5.2/utilities/position.md | 2 +- site/content/docs/5.2/utilities/shadows.md | 8 +- site/content/docs/5.2/utilities/sizing.md | 12 +- site/content/docs/5.2/utilities/spacing.md | 11 +- site/content/docs/5.2/utilities/text.md | 2 +- site/content/docs/5.2/utilities/z-index.md | 3 +- site/data/sidebar.yml | 1 + site/layouts/_default/baseof.html | 2 +- site/layouts/_default/docs.html | 4 +- site/layouts/partials/docs-navbar.html | 47 ++- site/layouts/partials/docs-versions.html | 3 +- site/layouts/partials/footer.html | 8 +- site/layouts/partials/header.html | 3 + site/layouts/partials/home/masthead.html | 2 +- site/layouts/partials/icons.html | 10 + site/layouts/shortcodes/added-in.html | 2 +- .../shortcodes/callout-dark-variants.html | 9 + site/layouts/shortcodes/deprecated-in.html | 5 + site/layouts/shortcodes/example.html | 2 +- 83 files changed, 1864 insertions(+), 367 deletions(-) create mode 100644 scss/_variables-dark.scss create mode 100644 scss/mixins/_color-mode.scss create mode 100644 site/assets/js/color-modes/index.js create mode 100644 site/content/docs/5.2/customize/color-modes.md create mode 100644 site/layouts/shortcodes/callout-dark-variants.html create mode 100644 site/layouts/shortcodes/deprecated-in.html diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 0c2c16280ed4..b884172368c1 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,35 +2,35 @@ "files": [ { "path": "./dist/css/bootstrap-grid.css", - "maxSize": "7.5 kB" + "maxSize": "8.0 kB" }, { "path": "./dist/css/bootstrap-grid.min.css", - "maxSize": "6.75 kB" + "maxSize": "7.5 kB" }, { "path": "./dist/css/bootstrap-reboot.css", - "maxSize": "2.75 kB" + "maxSize": "3.25 kB" }, { "path": "./dist/css/bootstrap-reboot.min.css", - "maxSize": "2.5 kB" + "maxSize": "3.25 kB" }, { "path": "./dist/css/bootstrap-utilities.css", - "maxSize": "9.75 kB" + "maxSize": "10.5 kB" }, { "path": "./dist/css/bootstrap-utilities.min.css", - "maxSize": "9.0 kB" + "maxSize": "9.75 kB" }, { "path": "./dist/css/bootstrap.css", - "maxSize": "30.25 kB" + "maxSize": "31.25 kB" }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "28 kB" + "maxSize": "29.25 kB" }, { "path": "./dist/js/bootstrap.bundle.js", diff --git a/scss/_accordion.scss b/scss/_accordion.scss index f09601bab6bb..75588a5adb40 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -147,3 +147,12 @@ } } } + +@if $enable-dark-mode { + @include color-mode(dark) { + .accordion-button::after { + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)}; + } + } +} diff --git a/scss/_alert.scss b/scss/_alert.scss index c8bc91b4208b..0afb295e3498 100644 --- a/scss/_alert.scss +++ b/scss/_alert.scss @@ -54,18 +54,13 @@ // scss-docs-start alert-modifiers -// Generate contextual modifier classes for colorizing the alert. - +// Generate contextual modifier classes for colorizing the alert @each $state, $value in $theme-colors { - $alert-background: shift-color($value, $alert-bg-scale); - $alert-border: shift-color($value, $alert-border-scale); - $alert-color: shift-color($value, $alert-color-scale); - - @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) { - $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale)); - } .alert-#{$state} { - @include alert-variant($alert-background, $alert-border, $alert-color); + --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text); + --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); + --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); + --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text); } } // scss-docs-end alert-modifiers diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 858b83634dc5..ec810f72ad07 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -210,7 +210,7 @@ // Dark mode carousel -.carousel-dark { +%carousel-dark { .carousel-control-prev-icon, .carousel-control-next-icon { filter: $carousel-dark-control-icon-filter; @@ -224,3 +224,15 @@ color: $carousel-dark-caption-color; } } + +.carousel-dark { + @extend %carousel-dark; +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .carousel { + @extend %carousel-dark; + } + } +} diff --git a/scss/_close.scss b/scss/_close.scss index 423a944db5ea..6f814d0af37a 100644 --- a/scss/_close.scss +++ b/scss/_close.scss @@ -44,6 +44,18 @@ } } -.btn-close-white { +%btn-close-white { filter: var(--#{$prefix}btn-close-white-filter); } + +.btn-close-white { + @extend %btn-close-white; +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .btn-close { + @extend %btn-close-white; + } + } +} diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 8899d25a0d23..22a2ecb654ce 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -184,6 +184,7 @@ white-space: nowrap; // prevent links from randomly breaking onto new lines background-color: transparent; // For ` {{< /example >}} -## White variant +## Dark mode -Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `filter` property to invert the `background-image`. +{{< callout info >}} +**Heads up!** As of v5.3.0, the `.btn-close-white` class is deprecated. Instead, use `data-bs-theme="dark"` to change the color mode of the close button. +{{< /callout >}} + +Add `data-bs-theme="dark"` to the `.btn-close`, or to it's parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value. {{< example class="bg-dark" >}} - - +
+ + +
{{< /example >}} ## Sass diff --git a/site/content/docs/5.2/components/dropdowns.md b/site/content/docs/5.2/components/dropdowns.md index cd243a792f6e..30082eb97477 100644 --- a/site/content/docs/5.2/components/dropdowns.md +++ b/site/content/docs/5.2/components/dropdowns.md @@ -349,8 +349,12 @@ Button dropdowns work with buttons of all sizes, including default and split dro ## Dark dropdowns +{{< deprecated-in "5.3.0" >}} + Opt into darker dropdowns to match a dark navbar or custom style by adding `.dropdown-menu-dark` onto an existing `.dropdown-menu`. No changes are required to the dropdown items. +{{< callout-dark-variants "dropdown-menu" >}} + {{< example >}}
@@ -280,7 +280,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text. {{< example >}} -