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/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 +- 36 files changed, 1013 insertions(+), 169 deletions(-) create mode 100644 site/content/docs/5.2/customize/color-modes.md (limited to 'site/content/docs') 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 >}}