From fc3f4b67d65c575daa661ecf31cf59b4ff3cced5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 28 Nov 2022 22:30:26 -0800 Subject: Add dark mode support (#35857) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add dark mode to docs * Minor fix: missing space indentation * Minor fix: revert utilities/z-index added-in modification * Remove prev: and next: from doc because extracted to another PR * Use .bg-body-tertiary in all Utilities > Overflow examples * fix example * Fix up spacing examples * Update box-shadow Sass variables and utilities to auto-adjust to color modes * Remove unused docs class * Refactor form styles to use CSS variable for background images on .form-check and .form-switch * Fix docs selector * Rename shortcut for clarity * Heading consistency * Reintroduce missing 4th grid item in Utilities > Spacing example * Fix bundlewatch * .bd-callout* rendering is OK so removing comments in the code * Update scss/_utilities.scss Co-authored-by: Julien Déramond * Fix gutters example styling * Fix text colors on background utils docs * redesign and fix up position marker example, which doesn't show nicely in darkmode but at least isn't broken * fix some color utils examples * Deprecate mixin notice * Deprecate notice for list-group-item-variant() mixin * Revamp new link CSS vars * Use map-keys in some each Sass files * Remove list-group-item-variant mixin ref in sass loop desc * Display CSS vars scoped to our built-in dark mode * Revert previous commit * Fix list group variant link * Fix typo * Remove imports of alert/list-group mixins in scss/_mixins.scss * Small formatting + comments removal in scss/_content.scss * Fix alert links colors * fix dropdown border-radius mixin * fix link color and underline again, this time using CSS var override for color var and fallback value for the underline * fix colors on docs navbar for dark mode * remove two changes * missing ref * another link underline fix, just use sass vars for link decoration for now * missing color bg docs, plus move dropdown override to scss * more changes from review * fix some examples, drop unused docs navbar styles, update docs navbar color mode to use mixin * Few fixes around type - Restored CSS variable for color on headings, this time with a fallback value - In conjunction, restored and wrapped the default CSS var with a null value check - Split headings and paragraphs docs in Reboot, elaborated on them * Restyle custom details > summary element in docs * Rewrite some migration docs * fix form checks * Fix up some navbar styling, tweak docs callout * Fix select images, mostly for validation styling * Clean up some migration notes, document some new form control CSS vars, mention new variables-dark in sass docs * Update site/content/docs/5.2/components/scrollspy.md Co-authored-by: Julien Déramond * Apply suggestions from code review Co-authored-by: Julien Déramond * mention form control css vars in migration guide * Tweak grid and flex docs background examples * clarify some docs * fix some more things Co-authored-by: Julien Déramond Co-authored-by: Julien Déramond --- 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 | 14 +- site/assets/scss/_callouts.scss | 6 +- site/assets/scss/_clipboard-js.scss | 6 +- site/assets/scss/_component-examples.scss | 44 ++- site/assets/scss/_content.scss | 65 +++- site/assets/scss/_footer.scss | 4 +- site/assets/scss/_masthead.scss | 16 +- site/assets/scss/_navbar.scss | 58 +++- site/assets/scss/_sidebar.scss | 19 +- site/assets/scss/_syntax.scss | 26 +- site/assets/scss/_toc.scss | 13 +- site/assets/scss/_variables.scss | 13 +- 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 + site/content/docs/5.2/components/close-button.md | 14 +- site/content/docs/5.2/components/dropdowns.md | 10 + site/content/docs/5.2/components/list-group.md | 18 +- site/content/docs/5.2/components/modal.md | 2 +- site/content/docs/5.2/components/navbar.md | 72 ++-- 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 | 33 +- site/content/docs/5.2/content/tables.md | 4 + site/content/docs/5.2/customize/color-modes.md | 273 ++++++++++++++++ site/content/docs/5.2/customize/color.md | 364 ++++++++++++++++++++- site/content/docs/5.2/customize/css-variables.md | 4 + site/content/docs/5.2/customize/options.md | 1 + site/content/docs/5.2/customize/sass.md | 7 +- site/content/docs/5.2/forms/form-control.md | 10 +- .../docs/5.2/getting-started/introduction.md | 2 +- site/content/docs/5.2/helpers/stacks.md | 24 +- site/content/docs/5.2/helpers/stretched-link.md | 2 +- site/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 | 97 ++++++ site/content/docs/5.2/utilities/background.md | 9 +- site/content/docs/5.2/utilities/borders.md | 1 + site/content/docs/5.2/utilities/colors.md | 12 +- site/content/docs/5.2/utilities/overflow.md | 24 +- site/content/docs/5.2/utilities/position.md | 8 +- site/content/docs/5.2/utilities/shadows.md | 10 +- site/content/docs/5.2/utilities/sizing.md | 12 +- site/content/docs/5.2/utilities/spacing.md | 36 +- site/content/docs/5.2/utilities/text.md | 2 +- site/data/sidebar.yml | 1 + site/data/theme-colors.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 +- .../callout-deprecated-dark-variants.html | 9 + site/layouts/shortcodes/deprecated-in.html | 5 + site/layouts/shortcodes/example.html | 2 +- 65 files changed, 1381 insertions(+), 256 deletions(-) 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-deprecated-dark-variants.html create mode 100644 site/layouts/shortcodes/deprecated-in.html (limited to 'site') diff --git a/site/assets/js/color-modes/index.js b/site/assets/js/color-modes/index.js new file mode 100644 index 000000000..51bfd40a7 --- /dev/null +++ b/site/assets/js/color-modes/index.js @@ -0,0 +1,62 @@ +/*! + * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/) + * Copyright 2011-2022 The Bootstrap Authors + * Licensed under the Creative Commons Attribution 3.0 Unported License. + */ + +(() => { + 'use strict' + + const storedTheme = localStorage.getItem('theme') + + const getPreferredTheme = () => { + if (storedTheme) { + return storedTheme + } + + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' + } + + const setTheme = function (theme) { + if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) { + document.documentElement.setAttribute('data-bs-theme', 'dark') + } else { + document.documentElement.setAttribute('data-bs-theme', theme) + } + } + + setTheme(getPreferredTheme()) + + const showActiveTheme = theme => { + const activeThemeIcon = document.querySelector('.theme-icon-active use') + const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`) + const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href') + + document.querySelectorAll('[data-bs-theme-value]').forEach(element => { + element.classList.remove('active') + }) + + btnToActive.classList.add('active') + activeThemeIcon.setAttribute('href', svgOfActiveBtn) + } + + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { + if (storedTheme !== 'light' || storedTheme !== 'dark') { + setTheme(getPreferredTheme()) + } + }) + + window.addEventListener('load', () => { + showActiveTheme(getPreferredTheme()) + + document.querySelectorAll('[data-bs-theme-value]') + .forEach(toggle => { + toggle.addEventListener('click', () => { + const theme = toggle.getAttribute('data-bs-theme-value') + localStorage.setItem('theme', theme) + setTheme(theme) + showActiveTheme(theme) + }) + }) + }) +})() diff --git a/site/assets/scss/_ads.scss b/site/assets/scss/_ads.scss index b9369eb19..cc5634096 100644 --- a/site/assets/scss/_ads.scss +++ b/site/assets/scss/_ads.scss @@ -14,10 +14,10 @@ @include font-size(.8125rem); line-height: 1.4; text-align: left; - background-color: $gray-100; + background-color: var(--bs-tertiary-bg); a { - color: $gray-800; + color: var(--bs-body-color); text-decoration: none; } @@ -34,5 +34,5 @@ .carbon-poweredby { display: block; margin-top: .75rem; - color: $gray-700 !important; + color: var(--bs-body-color) !important; } diff --git a/site/assets/scss/_brand.scss b/site/assets/scss/_brand.scss index 9637cfb18..304075c92 100644 --- a/site/assets/scss/_brand.scss +++ b/site/assets/scss/_brand.scss @@ -15,13 +15,13 @@ // Individual items .bd-brand-item { + .bd-brand-item { - border-top: 1px solid $white; + border-top: 1px solid var(--#{$prefix}border-color); } @include media-breakpoint-up(md) { + .bd-brand-item { border-top: 0; - border-left: 1px solid $white; + border-left: 1px solid var(--#{$prefix}border-color); } } } diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss index 13bd6e48a..300bdca9c 100644 --- a/site/assets/scss/_buttons.scss +++ b/site/assets/scss/_buttons.scss @@ -33,13 +33,15 @@ } .btn-bd-light { + --btn-custom-color: #{mix($bd-violet, $white, 75%)}; + --bs-btn-color: var(--bs-gray-600); - --bs-btn-border-color: var(--bs-gray-400); - --bs-btn-hover-color: var(--bd-violet); - --bs-btn-hover-border-color: var(--bd-violet); - --bs-btn-active-color: var(--bd-violet); + --bs-btn-border-color: var(--bs-border-color); + --bs-btn-hover-color: var(--btn-custom-color); + --bs-btn-hover-border-color: var(--btn-custom-color); + --bs-btn-active-color: var(--btn-custom-color); --bs-btn-active-bg: var(--bs-white); - --bs-btn-active-border-color: var(--bd-violet); - --bs-btn-focus-border-color: var(--bd-violet); + --bs-btn-active-border-color: var(--btn-custom-color); + --bs-btn-focus-border-color: var(--btn-custom-color); --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); } diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss index 4513a7d1d..016a2ed24 100644 --- a/site/assets/scss/_callouts.scss +++ b/site/assets/scss/_callouts.scss @@ -6,6 +6,7 @@ padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; + color: var(--bd-callout-color, inherit); background-color: var(--bd-callout-bg, var(--bs-gray-100)); border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300)); @@ -29,7 +30,8 @@ // Variations @each $variant in $bd-callout-variants { .bd-callout-#{$variant} { - --bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075); - --bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5); + --bd-callout-color: var(--bs-#{$variant}-text); + --bd-callout-bg: var(--bs-#{$variant}-bg-subtle); + --bd-callout-border: var(--bs-#{$variant}-border-subtle); } } diff --git a/site/assets/scss/_clipboard-js.scss b/site/assets/scss/_clipboard-js.scss index 3a876a5e6..1e0003bcb 100644 --- a/site/assets/scss/_clipboard-js.scss +++ b/site/assets/scss/_clipboard-js.scss @@ -22,13 +22,13 @@ display: block; padding: .5em; line-height: 1; - color: $gray-900; - background-color: $gray-100; + color: var(--bs-body-color); + background-color: var(--bs-tertiary-bg); border: 0; @include border-radius(.25rem); &:hover { - color: $primary; + color: var(--bs-link-color); } &:focus { diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 0d8460a14..dcedffa13 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -3,7 +3,7 @@ // .bd-example-snippet { - border: solid $border-color; + border: solid var(--bs-border-color); border-width: 1px 0; @include media-breakpoint-up(md) { @@ -17,7 +17,7 @@ position: relative; padding: var(--bd-example-padding); margin: 0 ($bd-gutter-x * -.5); - border: solid $border-color; + border: solid var(--bs-border-color); border-width: 1px 0; @include clearfix(); @@ -32,7 +32,7 @@ + .bd-code-snippet { @include border-top-radius(0); - border: solid $border-color; + border: solid var(--bs-border-color); border-width: 0 1px 1px; } @@ -58,7 +58,8 @@ display: block; } - > :last-child { + > :last-child, + > nav:last-child .breadcrumb { margin-bottom: 0; } @@ -115,11 +116,12 @@ // .bd-example-row [class^="col"], -.bd-example-cssgrid .grid > * { +.bd-example-cols [class^="col"] > *, +.bd-example-cssgrid [class*="grid"] > * { padding-top: .75rem; padding-bottom: .75rem; - background-color: rgba(var(--bd-violet-rgb), .1); - border: 1px solid rgba(var(--bd-violet-rgb), .25); + background-color: rgba(var(--bd-violet-rgb), .15); + border: 1px solid rgba(var(--bd-violet-rgb), .3); } .bd-example-row .row + .row, @@ -129,12 +131,12 @@ .bd-example-row-flex-cols .row { min-height: 10rem; - background-color: rgba(255, 0, 0, .1); + background-color: rgba(var(--bd-violet-rgb), .15); } .bd-example-flex div { - background-color: rgba($bd-purple, .15); - border: 1px solid rgba($bd-purple, .15); + background-color: rgba(var(--bd-violet-rgb), .15); + border: 1px solid rgba(var(--bd-violet-rgb), .3); } // Grid mixins @@ -176,8 +178,8 @@ .ratio { display: inline-block; width: 10rem; - color: $gray-600; - background-color: $gray-100; + color: var(--bs-secondary-color); + background-color: var(--bs-tertiary-bg); border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color); > div { @@ -259,7 +261,7 @@ width: 5rem; height: 5rem; margin: .25rem; - background-color: #f5f5f5; + background-color: var(--bs-tertiary-bg); } } @@ -275,13 +277,13 @@ .position-relative { height: 200px; - background-color: #f5f5f5; + background-color: var(--bs-tertiary-bg); } .position-absolute { width: 2rem; height: 2rem; - background-color: $dark; + background-color: var(--bs-body-color); @include border-radius(); } } @@ -342,7 +344,7 @@ position: relative; padding: .75rem ($bd-gutter-x * .5); margin-bottom: 1rem; - background-color: var(--bs-gray-100); + background-color: var(--bs-tertiary-bg); @include media-breakpoint-up(md) { padding: .75rem 1.25rem; @@ -361,7 +363,7 @@ pre code { @include font-size(inherit); - color: $gray-900; // Effectively the base text color + color: var(--bs-body-color); // Effectively the base text color word-wrap: normal; } } @@ -386,6 +388,12 @@ } .highlight-toolbar { - border: solid $border-color; + background-color: var(--bs-tertiary-bg); + border: solid var(--bs-border-color); border-width: 1px 0; + + .btn-clipboard { + margin-top: 0; + margin-right: 0; + } } diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss index cd594335a..14d27b2fd 100644 --- a/site/assets/scss/_content.scss +++ b/site/assets/scss/_content.scss @@ -32,6 +32,9 @@ // Override Bootstrap defaults > .table, > .table-responsive .table { + --bs-table-border-color: var(--bs-border-color); + + max-width: 100%; margin-bottom: 1.5rem; @include font-size(.875rem); @@ -60,6 +63,14 @@ } } + th { + color: var(--bs-emphasis-color); + } + + strong { + color: var(--bs-emphasis-color); + } + // Prevent breaking of code // stylelint-disable-next-line selector-max-compound-selectors th, @@ -80,6 +91,16 @@ min-width: 280px; } +.table-swatches { + th { + color: var(--bs-emphasis-color); + } + + td code { + white-space: nowrap; + } +} + .bd-title { @include font-size(3rem); } @@ -89,13 +110,10 @@ font-weight: 300; } -.bd-bg-violet { - background-color: $bd-violet; -} - .bi { width: 1em; height: 1em; + vertical-align: -.125em; fill: currentcolor; } @@ -121,6 +139,43 @@ .border-lg-start { @include media-breakpoint-up(lg) { - border-left: $border-width solid $border-color; + border-left: var(--bs-border-width) solid var(--bs-border-color); + } +} + +// stylelint-disable selector-no-qualifying-type +.bd-summary-link { + color: var(--bs-link-color); + + &:hover, + details[open] > & { + color: var(--bs-link-hover-color); + } +} +// stylelint-enable selector-no-qualifying-type + +// scss-docs-start custom-color-mode +[data-bs-theme="blue"] { + --bs-body-color: var(--bs-white); + --bs-body-color-rgb: #{to-rgb($white)}; + --bs-body-bg: var(--bs-blue); + --bs-body-bg-rgb: #{to-rgb($blue)}; + --bs-tertiary-bg: #{$blue-600}; + + .dropdown-menu { + --bs-dropdown-bg: #{mix($blue-500, $blue-600)}; + --bs-dropdown-link-active-bg: #{$blue-700}; + } + + .btn-secondary { + --bs-btn-bg: #{mix($gray-600, $blue-400, .5)}; + --bs-btn-border-color: #{rgba($white, .25)}; + --bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)}; + --bs-btn-hover-border-color: #{rgba($white, .25)}; + --bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)}; + --bs-btn-active-border-color: #{rgba($white, .5)}; + --bs-btn-focus-border-color: #{rgba($white, .5)}; + --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2); } } +// scss-docs-end custom-color-mode diff --git a/site/assets/scss/_footer.scss b/site/assets/scss/_footer.scss index 87cee6d2b..42e1ca051 100644 --- a/site/assets/scss/_footer.scss +++ b/site/assets/scss/_footer.scss @@ -4,12 +4,12 @@ .bd-footer { a { - color: $gray-700; + color: var(--bs-body-color); text-decoration: none; &:hover, &:focus { - color: $link-color; + color: var(--bs-link-hover-color); text-decoration: underline; } } diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss index 6a1d34de4..52b282fcf 100644 --- a/site/assets/scss/_masthead.scss +++ b/site/assets/scss/_masthead.scss @@ -11,13 +11,12 @@ h1 { @include font-size(4rem); - line-height: 1; } .lead { @include font-size(1rem); font-weight: 400; - color: $gray-700; + color: var(--bs-secondary-color); } .bd-code-snippet { @@ -46,8 +45,7 @@ } #carbonads { // stylelint-disable-line selector-max-id - margin-right: auto; - margin-left: auto; + margin-inline: auto; } @include media-breakpoint-up(md) { @@ -86,7 +84,7 @@ mix-blend-mode: darken; svg { - filter: drop-shadow(0 1px 1px #fff); + filter: drop-shadow(0 1px 1px var(--bs-body-bg)); } } @@ -104,3 +102,11 @@ transform: scale(1.1); } } + +@if $enable-dark-mode { + [data-bs-theme="dark"] { + .masthead-followup-icon { + mix-blend-mode: lighten; + } + } +} diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 0cff3e2a8..9f1f4e71a 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -1,8 +1,16 @@ .bd-navbar { padding: .75rem 0; background-color: transparent; - background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95)); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); + box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15); + + &::after { + position: absolute; + inset: 0; + z-index: -1; + display: block; + content: ""; + background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95)); + } .bd-navbar-toggle { @include media-breakpoint-down(lg) { @@ -30,6 +38,7 @@ } .navbar-brand { + color: $white; transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list &:hover { @@ -60,7 +69,7 @@ } .offcanvas-lg { - background-color: var(--bd-violet); + background-color: var(--bd-violet-bg); border-left: 0; @include media-breakpoint-down(lg) { @@ -75,17 +84,42 @@ } .dropdown-menu { - --#{$prefix}dropdown-min-width: 12rem; - --#{$prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1); - @include rfs(.875rem, --#{$prefix}dropdown-font-size); + --bs-dropdown-min-width: 12rem; + --bs-dropdown-padding-x: .25rem; + --bs-dropdown-padding-y: .25rem; + --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1); + --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1); + @include rfs(.875rem, --bs-dropdown-font-size); + @include font-size(.875rem); + @include border-radius(.5rem); box-shadow: $dropdown-box-shadow; + + li + li { + margin-top: .125rem; + } + + .dropdown-item { + @include border-radius(.25rem); + + &:active { + .bi { + color: inherit !important; // stylelint-disable-line declaration-no-important + } + } + } + + .active { + font-weight: 600; + + .bi { + display: block !important; // stylelint-disable-line declaration-no-important + } + } } +} - .dropdown-item.current { - font-weight: 600; - background-image: escape-svg($dropdown-active-icon); - background-repeat: no-repeat; - background-position: right $dropdown-item-padding-x top .6rem; - background-size: .75rem .75rem; +@include color-mode(dark) { + .bd-navbar { + box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15); } } diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index ed76b3ca8..6f1ef292f 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -11,6 +11,17 @@ margin-left: -.25rem; overflow-y: auto; } + + @include media-breakpoint-down(lg) { + .offcanvas-lg { + border-right-color: var(--bs-border-color); + box-shadow: $box-shadow-lg; + } + } +} + +.bd-links-heading { + color: var(--bs-emphasis-color); } .bd-links-nav { @@ -35,16 +46,16 @@ .bd-links-link { padding: .1875rem .5rem; margin-top: .125rem; - margin-left: 1rem; - color: rgba($black, .65); + margin-left: 1.125rem; + color: var(--bs-body-color); text-decoration: if($link-decoration == none, null, none); &:hover, &:focus, &.active { - color: rgba($black, .85); + color: var(--bs-emphasis-color); text-decoration: if($link-hover-decoration == underline, none, null); - background-color: rgba(var(--bd-violet-rgb), .1); + background-color: var(--bd-sidebar-link-bg); } &.active { diff --git a/site/assets/scss/_syntax.scss b/site/assets/scss/_syntax.scss index 106032c07..7c327ec15 100644 --- a/site/assets/scss/_syntax.scss +++ b/site/assets/scss/_syntax.scss @@ -1,4 +1,5 @@ -:root { +:root, +[data-bs-theme="light"] { --base00: #fff; --base01: #f5f5f5; --base02: #c8c8fa; @@ -17,6 +18,25 @@ --base0F: #333; } +[data-bs-theme="dark"] { + --base00: #282c34; + --base01: #353b45; + --base02: #3e4451; + --base03: #868e96; + --base04: #565c64; + --base05: #abb2bf; + --base06: #b6bdca; + --base07: #d19a66; + --base08: #e06c75; + --base09: #d19a66; + --base0A: #e5c07b; + --base0B: #98c379; + --base0C: #56b6c2; + --base0D: #61afef; + --base0E: #c678dd; + --base0F: #be5046; +} + .hl { background-color: var(--base02); } .c { color: var(--base03); } .err { color: var(--base08); } @@ -101,14 +121,14 @@ .language-bash, .language-sh { .line::before { - color: #777; + color: var(--base03); content: "$ "; user-select: none; } } .language-powershell::before { - color: #009; + color: var(--base0C); content: "PM> "; user-select: none; } diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss index 512a11b42..ffa6a0c44 100644 --- a/site/assets/scss/_toc.scss +++ b/site/assets/scss/_toc.scss @@ -52,15 +52,16 @@ } @include media-breakpoint-down(md) { - border: 1px solid $border-color; - @include border-radius(.4rem); + color: var(--bs-body-color); + border: 1px solid var(--bs-border-color); + @include border-radius(var(--bs-border-radius)); &:hover, &:focus, &:active, &[aria-expanded="true"] { color: var(--bd-violet); - background-color: $white; + background-color: var(--bs-body-bg); border-color: var(--bd-violet); } @@ -75,9 +76,9 @@ @include media-breakpoint-down(md) { nav { padding: 1.25rem; - background-color: var(--bs-gray-100); - border: 1px solid $border-color; - @include border-radius(.25rem); + background-color: var(--bs-tertiary-bg); + border: 1px solid var(--bs-border-color); + @include border-radius(var(--bs-border-radius)); } } diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index b460392d0..ccc7c1f8f 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -5,12 +5,12 @@ $bd-purple: #4c0bce; $bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list $bd-accent: #ffe484; -$dropdown-active-icon: url("data:image/svg+xml,"); $bd-gutter-x: 3rem; $bd-callout-variants: info, warning, danger !default; -:root { +:root, +[data-bs-theme="light"] { --bd-purple: #{$bd-purple}; --bd-violet: #{$bd-violet}; --bd-accent: #{$bd-accent}; @@ -20,4 +20,13 @@ $bd-callout-variants: info, warning, danger !default; --bd-teal-rgb: #{to-rgb($teal-500)}; --docsearch-primary-color: var(--bd-violet); --docsearch-logo-color: var(--bd-violet); + + --bd-violet-bg: var(--bd-violet); + --bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1); +} + +[data-bs-theme="dark"] { + --bd-violet: #{mix($bd-violet, $white, 75%)}; + --bd-violet-bg: #{$bd-violet}; + --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5); } diff --git a/site/content/docs/5.2/about/brand.md b/site/content/docs/5.2/about/brand.md index 80c613526..9c31da07f 100644 --- a/site/content/docs/5.2/about/brand.md +++ b/site/content/docs/5.2/about/brand.md @@ -12,13 +12,13 @@ Have a need for Bootstrap's brand resources? Great! We have only a few guideline When referencing Bootstrap, use our logo mark. Do not modify our logos in any way. Do not use Bootstrap's branding for your own open or closed source projects. **Do not use the Twitter name or logo** in association with Bootstrap. -
+
Bootstrap
Our logo mark is also available in black and white. All rules for our primary logo apply to these as well. -
+
Bootstrap
@@ -31,7 +31,7 @@ Our logo mark is also available in black and white. All rules for our primary lo Bootstrap should always be referred to as just **Bootstrap**. No Twitter before it and no capital _s_. -
+
Bootstrap
Correct diff --git a/site/content/docs/5.2/components/accordion.md b/site/content/docs/5.2/components/accordion.md index 21b518ad1..3d35714d8 100644 --- a/site/content/docs/5.2/components/accordion.md +++ b/site/content/docs/5.2/components/accordion.md @@ -66,7 +66,7 @@ Click the accordions below to expand/collapse the accordion content. Add `.accordion-flush` to remove the default `background-color`, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. -{{< example class="bg-light" >}} +{{< example class="bg-body-secondary" >}}

diff --git a/site/content/docs/5.2/components/alerts.md b/site/content/docs/5.2/components/alerts.md index 523f525fe..7ea5b9b42 100644 --- a/site/content/docs/5.2/components/alerts.md +++ b/site/content/docs/5.2/components/alerts.md @@ -10,6 +10,10 @@ toc: true Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing). +{{< callout info >}} +**Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [the Sass loop](#sass-loop). +{{< /callout >}} + {{< example >}} {{< alerts.inline >}} {{- range (index $.Site.Data "theme-colors") }} @@ -177,6 +181,8 @@ As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS ### Sass mixin +{{< deprecated-in "5.3.0" >}} + Used in combination with `$theme-colors` to create contextual modifier classes for our alerts. {{< scss-docs name="alert-variant-mixin" file="scss/mixins/_alert.scss" >}} diff --git a/site/content/docs/5.2/components/carousel.md b/site/content/docs/5.2/components/carousel.md index 376998298..95f4bf030 100644 --- a/site/content/docs/5.2/components/carousel.md +++ b/site/content/docs/5.2/components/carousel.md @@ -236,8 +236,12 @@ Carousels support swiping left/right on touchscreen devices to move between slid ## Dark variant +{{< deprecated-in "5.3.0" >}} + Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`. +{{< callout-deprecated-dark-variants "carousel" >}} + {{< example >}}