From 70c6f34f840a631addb5b61daa42687f4f53bc73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 26 Sep 2023 13:36:47 +0200 Subject: [PATCH 01/18] Drop dark variants --- scss/_accordion.scss | 14 --- scss/_breadcrumb.scss | 15 --- scss/_buttons.scss | 42 -------- scss/_dropdown.scss | 4 - scss/_list-group.scss | 17 ---- scss/_local-navigation.scss | 12 --- scss/_pagination.scss | 22 ----- scss/_root.scss | 81 --------------- scss/_stepped-process.scss | 12 --- scss/_tags.scss | 9 -- scss/_variables.scss | 99 ------------------- scss/mixins/_buttons.scss | 4 +- site/assets/js/tac.js | 6 +- site/content/docs/5.3/components/accordion.md | 57 +---------- site/content/docs/5.3/components/alerts.md | 2 +- .../content/docs/5.3/components/breadcrumb.md | 30 +----- site/content/docs/5.3/components/buttons.md | 50 +--------- .../docs/5.3/components/close-button.md | 48 +++------ site/content/docs/5.3/components/dropdowns.md | 6 +- .../content/docs/5.3/components/list-group.md | 40 +------- .../docs/5.3/components/local-navigation.md | 34 ++----- site/content/docs/5.3/components/navbar.md | 18 ++-- site/content/docs/5.3/components/offcanvas.md | 10 +- .../content/docs/5.3/components/pagination.md | 34 +------ .../docs/5.3/components/stepped-process.md | 39 +------- site/content/docs/5.3/components/tags.md | 29 +----- site/content/docs/5.3/components/toasts.md | 4 +- .../docs/5.3/customize/css-variables.md | 8 -- site/layouts/shortcodes/card.html | 2 +- site/layouts/shortcodes/orange-footer.html | 22 ++--- 30 files changed, 88 insertions(+), 682 deletions(-) diff --git a/scss/_accordion.scss b/scss/_accordion.scss index 82d0c5dcda..70f29df2bd 100644 --- a/scss/_accordion.scss +++ b/scss/_accordion.scss @@ -155,17 +155,3 @@ --#{$prefix}accordion-btn-letter-spacing: #{$accordion-button-letter-spacing-lg}; // scss-docs-end accordion-lg-css-vars } - -// Deprecated in v5.3.3 -.accordion-dark { - // scss-docs-start accordion-dark-css-vars - --#{$prefix}accordion-btn-color: #{$accordion-dark-button-color}; - --#{$prefix}accordion-btn-bg: #{$accordion-dark-button-bg}; - --#{$prefix}accordion-btn-hover-bg: #{$accordion-dark-button-hover-bg}; - --#{$prefix}accordion-active-color: #{$accordion-dark-button-active-color}; - --#{$prefix}accordion-border-color: #{$accordion-dark-border-color}; - --#{$prefix}accordion-color: #{$accordion-dark-color}; - --#{$prefix}accordion-bg: #{$accordion-dark-bg}; - // scss-docs-end accordion-dark-css-vars -} -// End mod diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss index 7d1fe3cb91..f91606d7cf 100644 --- a/scss/_breadcrumb.scss +++ b/scss/_breadcrumb.scss @@ -48,18 +48,3 @@ color: var(--#{$prefix}breadcrumb-item-active-color); } } - -// Boosted mod -.breadcrumb-dark { - // scss-docs-start breadcrumb-dark-css-vars - --#{$prefix}breadcrumb-color: #{$breadcrumb-dark-color}; // Boosted mod - --#{$prefix}breadcrumb-bg: #{$breadcrumb-dark-bg}; // Boosted mod - --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-dark-divider-color}; // Boosted mod - --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-dark-active-color}; // Boosted mod - // scss-docs-end breadcrumb-dark-css-vars - - .breadcrumb-item::before { - filter: $invert-filter; - } -} -// End mod diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 7e08d0d2d0..25d3d5bbf6 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -95,44 +95,28 @@ // Alternate buttons // -// Boosted mod: inconsistent theming ¯\_(ツ)_/¯ // scss-docs-start btn-variant-loops .btn-primary, .btn-warning { @include button-variant($primary, $primary, $active-background: $white, $active-border: $black); - &.btn-inverse { - @include button-variant($primary, $primary, $black, $white, $white, $black, $black, $white, $white, $gray-700, $gray-700, $black, $black); - } } .btn-light, .btn-secondary { @include button-variant($white, $black, $disabled-background: $white, $disabled-border: $gray-500, $disabled-color: $gray-500); - &.btn-inverse { - @include button-variant($black, $white, $white, $white, $white, $black, $primary, $primary, $black, transparent, $gray-700, $gray-700, $black); - } } .btn-success { @include button-variant($success, $success); - &.btn-inverse { - @include button-variant($success, $success, $black, $white, $white, $black, $primary, $primary, $black, $gray-700, $gray-700, $black, $black); - } } .btn-info, .btn-dark { @include button-variant($black, $black, $white, $white, $black, $black); - &.btn-inverse { - @include button-variant($white, $white, $black, $black, $white, $white, $primary, $primary, $black, $gray-700, $gray-700, $black, $black); - } } .btn-danger { @include button-variant($danger, $danger); - &.btn-inverse { - @include button-variant($danger, $danger, $white, $white, $white, $black, $primary, $primary, $black, $gray-700, $gray-700, $black, $black); - } } // scss-docs-end btn-variant-loops // End mod @@ -140,9 +124,6 @@ // Boosted mod: only secondary variant .btn-outline-secondary { @include button-variant(transparent, $black, $black, $disabled-background: $white, $disabled-border: $gray-500, $disabled-color: $gray-500); - &.btn-inverse { - @include button-variant(transparent, $white, $white, $white, $white, $black, $primary, $primary, $black, transparent, $gray-700, $gray-700, $black); - } } // End mod @@ -153,15 +134,6 @@ --#{$prefix}btn-active-border-color: #{$gray-500}; --#{$prefix}btn-disabled-color: #{$gray-500}; --#{$prefix}btn-disabled-border-color: var(--#{$prefix}btn-border-color); - - &.btn-inverse { - --#{$prefix}btn-color: #{$white}; - --#{$prefix}btn-hover-color: #{$white}; - --#{$prefix}btn-hover-border-color: #{$gray-700}; - --#{$prefix}btn-active-color: #{$brand-orange}; - --#{$prefix}btn-active-border-color: #{$gray-700}; - --#{$prefix}btn-disabled-color: #{$gray-700}; - } } // End mod @@ -197,12 +169,6 @@ // Boosted mod: no focus-visible color change - // Boosted mod: btn inverse - &.btn-inverse { - --#{$prefix}btn-disabled-color: #{$gray-700}; - } - // End mod - // No need for an active state here } @@ -240,14 +206,6 @@ --#{$prefix}btn-disabled-bg: transparent; @include border-radius(50%, 50%); @include button-icon(var(--#{$prefix}network-logo)); - - &.btn-inverse { - --#{$prefix}btn-color: #{$white}; - --#{$prefix}btn-active-color: #{$black}; - --#{$prefix}btn-active-bg: #{$white}; - --#{$prefix}btn-active-border-color: #{$white}; - --#{$prefix}btn-disabled-color: #{$gray-700}; - } } @each $name in map-keys($btn-social-networks) { diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 0319460808..658d5b2415 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -19,10 +19,6 @@ // TODO: should probably be a `.btn-*` class &:not(.dropdown-toggle-split) { @include button-variant($dropdown-bg, $dropdown-border-color, $dropdown-color, $white, $dropdown-border-color, $black, $white, $black, $black, $dropdown-bg, $gray-500, $gray-500); - - &.btn-inverse { - @include button-variant($black, $gray-700, $white, $black, $gray-700, $white, $black, $white, $white, transparent, $gray-700, $gray-700); - } } // End mod } diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 4de57f85ff..20f95feec9 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -212,21 +212,4 @@ } } // scss-docs-end list-group-modifiers - -.list-group-dark { - // scss-docs-start list-group-dark-css-vars - --#{$prefix}list-group-color: #{$list-group-dark-color}; // Boosted mod - --#{$prefix}list-group-bg: #{$list-group-dark-bg}; // Boosted mod - --#{$prefix}list-group-border-color: #{$list-group-dark-border-color}; // Boosted mod - --#{$prefix}list-group-action-color: #{$list-group-dark-action-color}; // Boosted mod - --#{$prefix}list-group-action-hover-color: #{$list-group-dark-action-hover-color}; // Boosted mod - --#{$prefix}list-group-action-active-color: #{$list-group-dark-action-active-color}; // Boosted mod - --#{$prefix}list-group-action-active-bg: #{$list-group-dark-action-active-bg}; // Boosted mod - --#{$prefix}list-group-disabled-color: #{$list-group-dark-disabled-color}; // Boosted mod - --#{$prefix}list-group-disabled-bg: #{$list-group-dark-disabled-bg}; // Boosted mod - --#{$prefix}list-group-active-color: #{$list-group-dark-active-color}; // Boosted mod - --#{$prefix}list-group-active-bg: #{$list-group-dark-active-bg}; // Boosted mod - --#{$prefix}list-group-active-border-color: #{$list-group-dark-active-border-color}; // Boosted mod - // scss-docs-end list-group-dark-css-vars -} // End mod diff --git a/scss/_local-navigation.scss b/scss/_local-navigation.scss index 9acd8b49e1..5ee8f9baee 100644 --- a/scss/_local-navigation.scss +++ b/scss/_local-navigation.scss @@ -117,15 +117,3 @@ } } } - -.local-nav-dark { - // scss-docs-start local-nav-dark-css-vars - --#{$prefix}local-nav-color: #{$local-nav-dark-color}; - --#{$prefix}local-nav-bg: #{$local-nav-dark-bg}; - --#{$prefix}local-nav-hover-color: #{$local-nav-dark-hover-color}; - --#{$prefix}local-nav-hover-bg: #{$local-nav-dark-hover-bg}; - --#{$prefix}local-nav-active-color: #{$local-nav-dark-active-color}; - --#{$prefix}local-nav-active-bg: #{$local-nav-dark-active-bg}; - --#{$prefix}local-nav-border-color: #{$local-nav-dark-border-color}; - // scss-docs-end local-nav-dark-css-vars -} diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 162d068ce5..e15322c14b 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -211,26 +211,4 @@ // Boosted mod: no pagination sizes -// Boosted mod: dark variant -.pagination-dark { - // scss-docs-start pagination-dark-css-vars - --#{$prefix}pagination-color: #{$pagination-dark-color}; // Boosted mod - --#{$prefix}pagination-bg: #{$pagination-dark-bg}; // Boosted mod - --#{$prefix}pagination-border-color: #{$pagination-dark-border-color}; // Boosted mod - --#{$prefix}pagination-hover-color: #{$pagination-dark-hover-color}; // Boosted mod - --#{$prefix}pagination-hover-bg: #{$pagination-dark-hover-bg}; // Boosted mod - --#{$prefix}pagination-hover-border-color: #{$pagination-dark-hover-border-color}; // Boosted mod - --#{$prefix}pagination-focus-color: #{$pagination-dark-focus-color}; // Boosted mod - --#{$prefix}pagination-focus-bg: #{$pagination-dark-focus-bg}; // Boosted mod - --#{$prefix}pagination-active-color: #{$pagination-dark-active-color}; // Boosted mod - --#{$prefix}pagination-active-bg: #{$pagination-dark-active-bg}; // Boosted mod - --#{$prefix}pagination-active-border-color: #{$pagination-dark-active-border-color}; // Boosted mod - --#{$prefix}pagination-active-item-color: #{$pagination-dark-active-item-color}; // Boosted mod - --#{$prefix}pagination-active-item-bg: #{$pagination-dark-active-item-bg}; // Boosted mod - --#{$prefix}pagination-active-item-border-color: #{$pagination-dark-active-item-border-color}; // Boosted mod - --#{$prefix}pagination-disabled-color: #{$pagination-dark-disabled-color}; // Boosted mod - --#{$prefix}pagination-disabled-bg: #{$pagination-dark-disabled-bg}; // Boosted mod - --#{$prefix}pagination-disabled-border-color: #{$pagination-dark-disabled-border-color}; // Boosted mod - // scss-docs-end pagination-dark-css-vars -} // End mod diff --git a/scss/_root.scss b/scss/_root.scss index 1c633cb39a..874e311d03 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -139,87 +139,6 @@ // scss-docs-end root-form-validation-variables } -// scss-docs-start root-dark-rule -// Boosted mod -// [class*="bg-black"], -// [class*="-dark"]:not(.border-dark):not(.text-dark):not(.btn-dark):not(.focus-ring-dark):not(.link-underline-dark):not(.link-dark), -// [class*="bg-secondary"] { -// --#{$prefix}primary-text-rgb: #{to-rgb($brand-orange)}; -// --#{$prefix}link-color: #{$link-color-inverted}; -// --#{$prefix}link-hover-color: #{$link-hover-color-inverted}; -// --#{$prefix}link-color-rgb: #{to-rgb($link-color-inverted)}; -// --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-inverted)}; -// --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color-inverted}; -// --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color-inverted}; -// --#{$prefix}caption-color: #{$table-caption-color-inverted}; -// --#{$prefix}code-color: #{$code-color-inverted}; -// --#{$prefix}highlight-color: #{$mark-color-inverted}; -// --#{$prefix}highlight-bg: #{$mark-bg-inverted}; -// --#{$prefix}kbd-color: #{$kbd-color-inverted}; -// --#{$prefix}kbd-bg: #{$kbd-bg-inverted}; -// --#{$prefix}pre-color: #{$pre-color-inverted}; -// --#{$prefix}body-color: #{$body-color-dark}; -// --#{$prefix}heading-color: #{$headings-color-dark}; - -// // For testing only, uncomment to see the colors -// // --#{$prefix}primary-text-rgb: #ffc0cb; -// // --#{$prefix}link-color: #ffc0cb; -// // --#{$prefix}link-hover-color: #ffc0cb; -// // --#{$prefix}link-color-rgb: #ffc0cb; -// // --#{$prefix}link-hover-color-rgb: ##ffc0cb; -// // --#{$prefix}focus-visible-inner-color: #ffc0cb; -// // --#{$prefix}focus-visible-outer-color: #ffc0cb; -// // --#{$prefix}caption-color: #ffc0cb; -// // --#{$prefix}code-color: #ffc0cb; -// // --#{$prefix}highlight-color: #ffc0cb; -// // --#{$prefix}highlight-bg: #ffc0cb; -// // --#{$prefix}kbd-color: #ffc0cb; -// // --#{$prefix}kbd-bg: #ffc0cb; -// // --#{$prefix}pre-color: #ffc0cb; -// // --#{$prefix}body-color: #ffc0cb; -// // --#{$prefix}heading-color: #ffc0cb; - -// // stylelint-disable-next-line scss/selector-no-redundant-nesting-selector -// [class*="bg-"]:not(&):not(.bg-transparent) { -// --#{$prefix}primary-text-rgb: #{to-rgb($accessible-orange)}; -// --#{$prefix}link-color: #{$link-color}; -// --#{$prefix}link-hover-color: #{$link-hover-color}; -// --#{$prefix}link-color-rgb: #{to-rgb($link-color)}; -// --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)}; -// --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color}; -// --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color}; -// --#{$prefix}caption-color: #{$table-caption-color}; -// --#{$prefix}code-color: #{$code-color}; -// --#{$prefix}highlight-color: #{$mark-color}; -// --#{$prefix}highlight-bg: #{$mark-bg}; -// --#{$prefix}kbd-color: #{$kbd-color}; -// --#{$prefix}kbd-bg: #{$kbd-bg}; -// --#{$prefix}pre-color: #{$pre-color}; -// --#{$prefix}body-color: #{$body-color}; -// --#{$prefix}heading-color: #{$headings-color}; - -// // For testing only, uncomment to see the colors -// // --#{$prefix}primary-text-rgb: #0ff; -// // --#{$prefix}link-color: #0ff; -// // --#{$prefix}link-hover-color: #0ff; -// // --#{$prefix}link-color-rgb: #0ff; -// // --#{$prefix}link-hover-color-rgb: #0ff; -// // --#{$prefix}focus-visible-inner-color: #0ff; -// // --#{$prefix}focus-visible-outer-color: #0ff; -// // --#{$prefix}caption-color: #0ff; -// // --#{$prefix}code-color: #0ff; -// // --#{$prefix}highlight-color: #0ff; -// // --#{$prefix}highlight-bg: #0ff; -// // --#{$prefix}kbd-color: #0ff; -// // --#{$prefix}kbd-bg: #0ff; -// // --#{$prefix}pre-color: #0ff; -// // --#{$prefix}body-color: #0ff; -// // --#{$prefix}heading-color: #0ff; -// } -// } -// End mod -// scss-docs-end root-dark-rule - @if $enable-dark-mode { @include color-mode(dark, true) { color-scheme: dark; diff --git a/scss/_stepped-process.scss b/scss/_stepped-process.scss index 54d70ea5b7..923341426b 100644 --- a/scss/_stepped-process.scss +++ b/scss/_stepped-process.scss @@ -143,15 +143,3 @@ flex: $stepped-process-max-items - 1; } } - -.stepped-process-dark { - // scss-docs-start stepped-process-dark-css-vars - --#{$prefix}stepped-process-item-bg: #{$step-item-dark-bg}; - --#{$prefix}stepped-process-item-active-bg: #{$step-item-dark-active-bg}; - --#{$prefix}stepped-process-item-next-bg: #{$step-item-dark-next-bg}; - --#{$prefix}stepped-process-item-drop-shadow: #{$step-item-dark-drop-shadow}; - --#{$prefix}stepped-process-link-color: #{$step-link-dark-color}; - --#{$prefix}stepped-process-link-active-color: #{$step-link-dark-active-color}; - --#{$prefix}stepped-process-link-next-color: #{$step-link-dark-next-color}; - // scss-docs-end stepped-process-dark-css-vars -} diff --git a/scss/_tags.scss b/scss/_tags.scss index 090fa7019f..45fe86e481 100644 --- a/scss/_tags.scss +++ b/scss/_tags.scss @@ -129,12 +129,3 @@ label.tag { --#{$prefix}tag-close-margin-start: #{$tag-close-margin-start-sm}; // scss-docs-end tag-sm-css-vars } - -.tag-dark { - // scss-docs-start tag-dark-css-vars - --#{$prefix}tag-border-color: #{$tag-border-color-dark}; - --#{$prefix}tag-active-color: #{$tag-active-color-dark}; - --#{$prefix}tag-active-decoration-color: #{$tag-active-decoration-color-dark}; - --#{$prefix}tag-disabled-color: #{$tag-disabled-color-dark}; - // scss-docs-end tag-dark-css-vars -} diff --git a/scss/_variables.scss b/scss/_variables.scss index b8c7bbffe6..39841aa2ff 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -516,11 +516,9 @@ $body-emphasis-color: $black !default; // Style anchor elements. $link-color: $black !default; // Boosted mod -$link-color-inverted: $white !default; // Boosted mod $link-decoration: underline !default; $link-shade-percentage: 20% !default; $link-hover-color: $accessible-orange !default; // Boosted mod -$link-hover-color-inverted: $brand-orange !default; // Boosted mod $link-hover-decoration: null !default; $stretched-link-pseudo-element: after !default; @@ -653,12 +651,10 @@ $focus-visible-zindex: 5 !default; // Boosted mod $focus-visible-inner-width: 2px !default; // Boosted mod $focus-visible-inner-color: var(--#{$prefix}body-bg) !default; // Boosted mod -$focus-visible-inner-color-inverted: var(--#{$prefix}emphasis-color) !default; // Boosted mod $focus-visible-outer-width: 3px !default; // Boosted mod $focus-visible-outer-offset: $focus-visible-inner-width !default; // Boosted mod $focus-visible-outer-color: var(--#{$prefix}emphasis-color) !default; // Boosted mod -$focus-visible-outer-color-inverted: var(--#{$prefix}body-bg) !default; // Boosted mod // scss-docs-end focus-visible-variables // scss-docs-start box-shadow-variables @@ -863,9 +859,6 @@ $list-inline-padding: $spacer * .25 !default; $mark-padding: 0 .1875em !default; // Boosted mod $mark-color: $white !default; // Boosted mod: instead of `$body-color` $mark-bg: $black !default; // Boosted mod: instead of `$yellow-100` - -$mark-color-inverted: $black !default; // Boosted mod -$mark-bg-inverted: $white !default; // Boosted mod // scss-docs-end type-variables // End mod @@ -920,7 +913,6 @@ $table-striped-columns-order: even !default; $table-group-separator-color: currentcolor !default; $table-caption-color: var(--#{$prefix}caption-color, var(--#{$prefix}emphasis-color)) !default; // Boosted mod: instead of `var(--#{$prefix}secondary-color)` -$table-caption-color-inverted: var(--#{$prefix}body-bg) !default; // Boosted mod $table-caption-padding-y: .75rem !default; // Boosted mod // Boosted mod: no $table-bg-scale @@ -1642,33 +1634,6 @@ $pagination-active-item-border: $pagination-active-item-bg !default; // End mod // scss-docs-end pagination-variables -// scss-docs-start pagination-dark-variables -// Boosted mod -$pagination-dark-bg: $black !default; -$pagination-dark-color: color-contrast($pagination-dark-bg) !default; -$pagination-dark-border-color: transparent !default; - -$pagination-dark-hover-bg: $black !default; -$pagination-dark-hover-color: color-contrast($pagination-dark-hover-bg) !default; -$pagination-dark-hover-border-color: $gray-700 !default; - -$pagination-dark-focus-bg: $black !default; -$pagination-dark-focus-color: color-contrast($pagination-dark-focus-bg) !default; - -$pagination-dark-active-bg: $white !default; -$pagination-dark-active-color: color-contrast($pagination-dark-active-bg) !default; -$pagination-dark-active-border-color: $white !default; - -$pagination-dark-active-item-bg: $brand-orange !default; -$pagination-dark-active-item-color: color-contrast($pagination-dark-active-item-bg) !default; -$pagination-dark-active-item-border-color: $brand-orange !default; - -$pagination-dark-disabled-bg: $black !default; -$pagination-dark-disabled-color: $gray-700 !default; -$pagination-dark-disabled-border-color: $gray-700 !default; -// End mod -// scss-docs-end pagination-dark-variables - // Placeholders @@ -1764,18 +1729,6 @@ $accordion-button-letter-spacing-lg: $h2-spacing !default; // End mod // scss-docs-end accordion-variables -// Boosted mod -// scss-docs-start accordion-dark-variables -$accordion-dark-color: $white !default; // Deprecated in v5.3.3 -$accordion-dark-bg: $black !default; // Deprecated in v5.3.3 -$accordion-dark-border-color: $gray-700 !default; // Deprecated in v5.3.3 -$accordion-dark-button-color: $accordion-dark-color !default; // Deprecated in v5.3.3 -$accordion-dark-button-bg: $accordion-dark-bg !default; // Deprecated in v5.3.3 -$accordion-dark-button-hover-bg: $gray-900 !default; // Deprecated in v5.3.3 -$accordion-dark-button-active-color: $white !default; // Deprecated in v5.3.3 -// scss-docs-end accordion-dark-variables -// End mod - // Tooltips // scss-docs-start tooltip-variables @@ -2022,21 +1975,6 @@ $list-group-action-active-color: $list-group-active-color !default; // Booste $list-group-action-active-bg: $list-group-active-bg !default; // Boosted mod: instead of `var(--#{$prefix}secondary-bg)` // scss-docs-end list-group-variables -// scss-docs-start list-group-dark-variables -$list-group-dark-color: $white !default; // Boosted mod -$list-group-dark-bg: $black !default; // Boosted mod -$list-group-dark-border-color: $gray-700 !default; // Boosted mod -$list-group-dark-action-color: $white !default; // Boosted mod -$list-group-dark-action-hover-color: $primary !default; // Boosted mod -$list-group-dark-action-active-color: $black !default; // Boosted mod -$list-group-dark-action-active-bg: $white !default; // Boosted mod -$list-group-dark-disabled-color: $gray-700 !default; // Boosted mod -$list-group-dark-disabled-bg: $list-group-dark-bg !default; // Boosted mod -$list-group-dark-active-color: $black !default; // Boosted mod -$list-group-dark-active-bg: $list-group-dark-action-active-bg !default; // Boosted mod -$list-group-dark-active-border-color: $list-group-dark-active-bg !default; // Boosted mod -// scss-docs-end list-group-dark-variables - // Image thumbnails @@ -2098,13 +2036,6 @@ $breadcrumb-divider-flipped: $breadcrumb-divider !default; $breadcrumb-border-radius: null !default; // scss-docs-end breadcrumb-variables -// scss-docs-start breadcrumb-dark-variables -$breadcrumb-dark-color: $white !default; // Boosted mod -$breadcrumb-dark-bg: null !default; // Boosted mod -$breadcrumb-dark-divider-color: $black !default; // Boosted mod: since the divider is inverted for SVG reasons -$breadcrumb-dark-active-color: null !default; // Boosted mod -// scss-docs-end breadcrumb-dark-variables - // Carousel @@ -2242,19 +2173,15 @@ $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default; // Boosted mod $code-font-size: .875em !default; $code-color: $gray-700 !default; -$code-color-inverted: $gray-600 !default; $kbd-padding-y: $spacer * .05 !default; $kbd-padding-x: $spacer * .05 !default; $kbd-font-size: $code-font-size !default; $kbd-color: var(--#{$prefix}kbd-color, $black) !default; -$kbd-color-inverted: $white !default; $kbd-bg: var(--#{$prefix}kbd-bg, $gray-300) !default; -$kbd-bg-inverted: $gray-900 !default; $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6 $pre-color: var(--#{$prefix}pre-color, $gray-900) !default; -$pre-color-inverted: $gray-300 !default; $pre-line-height: 1.25 !default; // End mod @@ -2315,15 +2242,6 @@ $step-link-marker-lg: counter(var(--bs-stepped-process-counter)) inspect $step-link-text-decoration: $link-decoration !default; // scss-docs-end stepped-process -// scss-docs-start stepped-process-dark-variables -$step-item-dark-bg: $white !default; -$step-item-dark-active-bg: $brand-orange !default; -$step-item-dark-next-bg: $gray-700 !default; -$step-item-dark-drop-shadow: drop-shadow($step-item-shadow-size 0 0 $black) #{"/* rtl:"} drop-shadow(calc(-1 * #{$step-item-shadow-size}) 0 0 $black) #{"*/"} !default; // stylelint-disable-line function-disallowed-list -$step-link-dark-color: $black !default; -$step-link-dark-active-color: $black !default; -$step-link-dark-next-color: $white !default; -// scss-docs-end stepped-process-dark-variables //// Sticker // scss-docs-start sticker @@ -2439,13 +2357,6 @@ $tag-close-margin-start-sm: 0 !default; $tag-font-size-sm: $font-size-sm !default; // scss-docs-end tag-sm-variables -// scss-docs-start tag-dark-variables -$tag-active-color-dark: $black !default; -$tag-disabled-color-dark: $gray-700 !default; -$tag-border-color-dark: $gray-700 !default; -$tag-active-decoration-color-dark: $white !default; -// scss-docs-end tag-dark-variables - // Local navigation @@ -2461,14 +2372,4 @@ $local-nav-active-marker-width: $spacer * .2 !default; $local-nav-border-color: $gray-500 !default; $local-nav-border-width: calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list // scss-docs-end local-nav-variables - -// scss-docs-start local-nav-dark-variables -$local-nav-dark-color: $white !default; -$local-nav-dark-bg: $black !default; -$local-nav-dark-hover-color: $brand-orange !default; -$local-nav-dark-hover-bg: $gray-900 !default; -$local-nav-dark-active-color: $local-nav-dark-hover-color !default; -$local-nav-dark-active-bg: $gray-700 !default; -$local-nav-dark-border-color: $gray-700 !default; -// scss-docs-end local-nav-dark-variables // End mod diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss index 6d9597cf34..e6b8cb584a 100644 --- a/scss/mixins/_buttons.scss +++ b/scss/mixins/_buttons.scss @@ -3,7 +3,6 @@ // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons // -// Boosted mod: Extra parameter to handle shadow color for inverted buttons // scss-docs-start btn-variant-mixin @mixin button-variant( @@ -19,7 +18,6 @@ $disabled-background: $gray-500, // Boosted mod $disabled-border: $gray-500, // Boosted mod $disabled-color: $white, // Boosted mod - $btn-focus-shadow-color: $white // Boosted mod ) { --#{$prefix}btn-color: #{$color}; --#{$prefix}btn-bg: #{$background}; @@ -27,7 +25,7 @@ --#{$prefix}btn-hover-color: #{$hover-color}; --#{$prefix}btn-hover-bg: #{$hover-background}; --#{$prefix}btn-hover-border-color: #{$hover-border}; - --#{$prefix}btn-focus-shadow-rgb: #{$btn-focus-shadow-color}; // Boosted mod + --#{$prefix}btn-focus-shadow-rgb: #{$white}; // Boosted mod --#{$prefix}btn-active-color: #{$active-color}; --#{$prefix}btn-active-bg: #{$active-background}; --#{$prefix}btn-active-border-color: #{$active-border}; diff --git a/site/assets/js/tac.js b/site/assets/js/tac.js index cb95808bd0..63a44690ae 100644 --- a/site/assets/js/tac.js +++ b/site/assets/js/tac.js @@ -29,10 +29,10 @@ window.addEventListener('tac.open_alert', () => { const alert = document.getElementById('tarteaucitronAlertBig') - document.getElementById('tarteaucitronCloseAlert').classList.add('btn', 'btn-sm', 'btn-info', 'btn-inverse', 'ms-lg-2') - alert.querySelector('.tarteaucitronAllow').classList.add('btn', 'btn-sm', 'btn-success', 'btn-inverse', 'mx-sm-2', 'ms-lg-auto', 'my-2', 'my-lg-0') + document.getElementById('tarteaucitronCloseAlert').classList.add('btn', 'btn-sm', 'btn-info', 'ms-lg-2') + alert.querySelector('.tarteaucitronAllow').classList.add('btn', 'btn-sm', 'btn-success', 'mx-sm-2', 'ms-lg-auto', 'my-2', 'my-lg-0') alert.querySelector('.tarteaucitronAllow').innerHTML = tarteaucitron.lang.acceptAll - alert.querySelector('.tarteaucitronDeny').classList.add('btn', 'btn-sm', 'btn-danger', 'btn-inverse', 'mx-sm-2', 'my-2', 'my-lg-0') + alert.querySelector('.tarteaucitronDeny').classList.add('btn', 'btn-sm', 'btn-danger', 'mx-sm-2', 'my-2', 'my-lg-0') alert.querySelector('.tarteaucitronDeny').innerHTML = tarteaucitron.lang.denyAll }, { once: true }) diff --git a/site/content/docs/5.3/components/accordion.md b/site/content/docs/5.3/components/accordion.md index 81f3d82b93..1d10e1f871 100644 --- a/site/content/docs/5.3/components/accordion.md +++ b/site/content/docs/5.3/components/accordion.md @@ -205,51 +205,10 @@ Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accord {{< deprecated-in "5.3.3" >}} {{< callout warning >}} -**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode: add `data-bs-theme="dark"` to the `.accordion` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}). -{{< /callout >}} - -Add `.accordion-dark` to the `.accordion` for a dark variant. +**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode. -{{< example class="bg-dark" >}} -
-
-

- -

-
-
- This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
-
-
-
-

- -

-
-
- This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
-
-
-
-

- -

-
-
- This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow. -
-
-
-
-{{< /example >}} +Add `data-bs-theme="dark"` to the `.accordion` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}). +{{< /callout >}} ## Accessibility @@ -271,16 +230,6 @@ Small and large accordion modifier classes are used to update the value of these {{< scss-docs name="accordion-lg-css-vars" file="scss/_accordion.scss" >}} -Customization through CSS variables can be seen on the `.accordion-dark` modifier class where we override specific values without adding duplicate CSS selectors. - -{{< scss-docs name="accordion-dark-css-vars" file="scss/_accordion.scss" >}} - ### Sass variables -Variables for all accordions: - {{< scss-docs name="accordion-variables" file="scss/_variables.scss" >}} - -Variables for the [dark accordion](#dark-variant): - -{{< scss-docs name="accordion-dark-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/components/alerts.md b/site/content/docs/5.3/components/alerts.md index 065fab01b4..f69a82b1f0 100644 --- a/site/content/docs/5.3/components/alerts.md +++ b/site/content/docs/5.3/components/alerts.md @@ -150,7 +150,7 @@ Add `.bg-dark` to the `.alert` for a dark variant. Close button can be inverted {{< /example >}} diff --git a/site/content/docs/5.3/components/breadcrumb.md b/site/content/docs/5.3/components/breadcrumb.md index c4367460c2..a7183bf4f1 100644 --- a/site/content/docs/5.3/components/breadcrumb.md +++ b/site/content/docs/5.3/components/breadcrumb.md @@ -98,19 +98,13 @@ $breadcrumb-divider: none; ## Dark variant -{{< added-in "5.2.1" >}} +{{< deprecated-in "5.3.3" >}} -Add `.breadcrumb-dark` to the `.breadcrumb` for a dark variant. +{{< callout warning >}} +**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode. -{{< example class="bg-dark" >}} - -{{< /example >}} +Add `data-bs-theme="dark"` to the `.breadcrumb` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}). +{{< /callout >}} ## Accessibility @@ -129,20 +123,6 @@ As part of Boosted's evolving CSS variables approach, breadcrumbs now use local {{< scss-docs name="breadcrumb-css-vars" file="scss/_breadcrumb.scss" >}} - -Customization through CSS variables can be seen on the `.breadcrumb-dark` modifier class where we override specific values without adding duplicate CSS selectors. - -{{< scss-docs name="breadcrumb-dark-css-vars" file="scss/_breadcrumb.scss" >}} - - ### Sass variables -Variables for all breadcrumbs: - {{< scss-docs name="breadcrumb-variables" file="scss/_variables.scss" >}} - - -Variables for [dark breadcrumb](#dark-variant): - -{{< scss-docs name="breadcrumb-dark-variables" file="scss/_variables.scss" >}} - diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md index 635340318f..ad3e31f6b1 100644 --- a/site/content/docs/5.3/components/buttons.md +++ b/site/content/docs/5.3/components/buttons.md @@ -142,53 +142,13 @@ Supported social networks are declared in a dedicated Sass map—meaning you're ## Dark variant -{{< added-in "5.2.0" >}} - -Add `.btn-inverse` to the `.btn` for a dark variant. - -{{< example class="bg-dark" >}} -{{< buttons.inline >}} -{{- range (index $.Site.Data "theme-colors") }} - -{{- end -}} -{{< /buttons.inline >}} +{{< deprecated-in "5.3.3" >}} - -{{< /example >}} +{{< callout warning >}} +**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode. -{{< example class="bg-dark" >}} - - - -{{< /example >}} - -{{< example class="bg-dark" >}} - - - - - - - - - - -{{< /example >}} +Add `data-bs-theme="dark"` to the `.btn` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}). +{{< /callout >}} ## Disable text wrapping diff --git a/site/content/docs/5.3/components/close-button.md b/site/content/docs/5.3/components/close-button.md index 29f2a749c2..e122f9172b 100644 --- a/site/content/docs/5.3/components/close-button.md +++ b/site/content/docs/5.3/components/close-button.md @@ -26,11 +26,19 @@ Disabled close buttons change their `color`. We've also applied `pointer-events: ## Dark variant -Add `.btn-close-white` to the `.btn-close` for a dark variant. +{{< deprecated-in "5.3.2" >}} -{{< example class="bg-dark" stackblitz_add_js="true" >}} - - +{{< callout warning >}} +**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 its 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 >}} ## Eco-design variant @@ -63,28 +71,6 @@ If you choose this option, please be aware that if the design of close buttons c {{< /example >}} -{{< example class="bg-dark" >}} - - - - - - - -{{< /example >}} - {{% enable-btn-close-tooltip 2 %}} ## CSS @@ -97,16 +83,6 @@ As part of Boosted’s evolving CSS variables approach, close button now use loc {{< scss-docs name="close-css-vars" file="scss/_close.scss" >}} -Customization through CSS variables can be seen on the `.btn-close-white` modifier class where we override specific values without adding duplicate CSS selectors. - -{{< scss-docs name="btn-close-white-css-vars" file="scss/_close.scss" >}} - ### Sass variables -Variables for all close buttons: - {{< scss-docs name="close-variables" file="scss/_variables.scss" >}} - -Variables for the [dark close button](#dark-variant): - -{{< scss-docs name="close-white-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md index 3f1a590940..eec9be2c8b 100644 --- a/site/content/docs/5.3/components/dropdowns.md +++ b/site/content/docs/5.3/components/dropdowns.md @@ -203,7 +203,7 @@ Opt into darker dropdowns to match a dark navbar or custom style by adding `.dro {{< example class="bg-dark" >}}
-
    @@ -217,8 +217,8 @@ Opt into darker dropdowns to match a dark navbar or custom style by adding `.dro
- - +
    diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md index 3b0530892d..c4f2e47e97 100644 --- a/site/content/docs/5.3/components/list-group.md +++ b/site/content/docs/5.3/components/list-group.md @@ -324,31 +324,13 @@ You can use `.stretched-link` on `
@@ -238,7 +238,7 @@ Place various form controls and components within a navbar:
@@ -256,7 +256,7 @@ Immediate child elements of `.navbar` use flex layout ## CSS @@ -179,20 +165,10 @@ As part of Boosted's evolving CSS variables approach, pagination now uses local {{< scss-docs name="pagination-css-vars" file="scss/_pagination.scss" >}} -Customization through CSS variables can be seen on the `.pagination-dark` modifier class where we override specific values without adding duplicate CSS selectors. - -{{< scss-docs name="pagination-dark-css-vars" file="scss/_pagination.scss" >}} - ### Sass variables -Variables for all paginations: - {{< scss-docs name="pagination-variables" file="scss/_variables.scss" >}} -Variables for the [dark pagination](#dark-variant): - -{{< scss-docs name="pagination-dark-variables" file="scss/_variables.scss" >}} - ### Sass mixins {{< scss-docs name="pagination-mixin" file="scss/mixins/_pagination.scss" >}} diff --git a/site/content/docs/5.3/components/stepped-process.md b/site/content/docs/5.3/components/stepped-process.md index 205f2f7208..9665076a7a 100644 --- a/site/content/docs/5.3/components/stepped-process.md +++ b/site/content/docs/5.3/components/stepped-process.md @@ -47,32 +47,13 @@ Add `.active` to a `.stepped-process-item` to indicate the current step, alongsi ## Dark variant -{{< added-in "5.2.1" >}} +{{< deprecated-in "5.3.3" >}} -Add `.stepped-process-dark` to the `.stepped-process` for a dark variant. +{{< callout warning >}} +**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode. -{{< example class="bg-dark" >}} - -{{< /example >}} +Add `data-bs-theme="dark"` to the `.stepped-process` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}). +{{< /callout >}} ## CSS @@ -84,16 +65,6 @@ As part of Boosted's evolving CSS variables approach, stepped processes now use {{< scss-docs name="stepped-process-css-vars" file="scss/_stepped-process.scss" >}} -Customization through CSS variables can be seen on the `.stepped-process-dark` modifier class where we override specific values without adding duplicate CSS selectors. - -{{< scss-docs name="stepped-process-dark-css-vars" file="scss/_stepped-process.scss" >}} - ### Sass variables -Variables for all stepped processes: - {{< scss-docs name="stepped-process" file="scss/_variables.scss" >}} - -Variables for the [dark stepped process](#dark-variant): - -{{< scss-docs name="stepped-process-dark-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/components/tags.md b/site/content/docs/5.3/components/tags.md index 6e1f151943..02da425c1d 100644 --- a/site/content/docs/5.3/components/tags.md +++ b/site/content/docs/5.3/components/tags.md @@ -118,24 +118,13 @@ Here is an [accessible example](https://a11y-guidelines.orange.com/en/web/compon ## Dark variant -{{< callout info >}} -We add an extra `

` around the `` here for accessibility concerns. -{{< /callout >}} +{{< deprecated-in "5.3.3" >}} -Add `.tag-dark` to the `.tag` for a dark variant. +{{< callout warning >}} +**Heads up!** Dark variants for components are deprecated in Boosted v5.3.3. They are replaced by our contextual dark mode. -{{< example class="d-flex flex-wrap gap-2 align-items-center bg-dark" >}} -

Informative

- -Navigation -

- - Input - -

-{{< /example >}} +Add `data-bs-theme="dark"` to the `.tag` or any ancestor element to enable a component-specific color mode. [Learn more about our color modes]({{< docsref "/customize/color-modes" >}}). +{{< /callout >}} ## Sizes @@ -196,10 +185,6 @@ Values for the CSS variables are set via Sass, so Sass customization is still su {{< scss-docs name="tag-css-vars" file="scss/_tags.scss" >}} -Customization through CSS variables can be seen on the `.tag-dark` class where we override specific values without adding duplicate CSS selectors. - -{{< scss-docs name="tag-dark-css-vars" file="scss/_tags.scss" >}} - Customization through CSS variables can be seen on the `.tag-sm` class where we override specific values without adding duplicate CSS selectors. {{< scss-docs name="tag-sm-css-vars" file="scss/_tags.scss" >}} @@ -210,10 +195,6 @@ Variables for all tags: {{< scss-docs name="tag-variables" file="scss/_variables.scss" >}} -Variables for the [dark tag](#dark-variant): - -{{< scss-docs name="tag-dark-variables" file="scss/_variables.scss" >}} - Variables for the [small tag](#sizes): {{< scss-docs name="tag-sm-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/components/toasts.md b/site/content/docs/5.3/components/toasts.md index 40383e4122..d5793fb4ba 100644 --- a/site/content/docs/5.3/components/toasts.md +++ b/site/content/docs/5.3/components/toasts.md @@ -172,7 +172,7 @@ Alternatively, you can also add additional controls and components to toasts. ### Color schemes -Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-secondary` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`. +Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.text-bg-secondary` to the `.toast`. For a crisp edge, we remove the default border with `.border-0`. {{< example stackblitz_add_js="true" >}} {{< /example >}} diff --git a/site/content/docs/5.3/customize/css-variables.md b/site/content/docs/5.3/customize/css-variables.md index edc208ced0..273e98a09b 100644 --- a/site/content/docs/5.3/customize/css-variables.md +++ b/site/content/docs/5.3/customize/css-variables.md @@ -57,14 +57,6 @@ Have a look at our table documentation for some [insight into how we're using CS Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and its sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates. -### Dark text rule - -Using CSS variables allows a better flexibility on certain rules. This way we adapt our text variant color to our dark variants components instead of rewriting rules for each component. This process implies to override some existing CSS variables and to re-initialize those in some cases. - -Here is our proposal to handle the different text variants over the website: - -{{< scss-docs name="root-dark-rule" file="scss/_root.scss" >}} - ## Prefix Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable. diff --git a/site/layouts/shortcodes/card.html b/site/layouts/shortcodes/card.html index a562101e75..1653c7a0ab 100644 --- a/site/layouts/shortcodes/card.html +++ b/site/layouts/shortcodes/card.html @@ -57,7 +57,7 @@

{{ if {{- end -}} {{- if $action -}} - {{ if $rtl }}وصلة{{ else }}Link{{ end }} + {{ if $rtl }}وصلة{{ else }}Link{{ end }} {{- end -}} diff --git a/site/layouts/shortcodes/orange-footer.html b/site/layouts/shortcodes/orange-footer.html index c33f406f82..d60e108401 100644 --- a/site/layouts/shortcodes/orange-footer.html +++ b/site/layouts/shortcodes/orange-footer.html @@ -31,7 +31,7 @@

Sign up to our mailing list

- +
@@ -43,17 +43,17 @@

Sign up to our mailing list

Follow us

From cdd4c5b21933e6e06c9e595e6b28e102265ae03e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 3 Oct 2023 08:35:27 +0200 Subject: [PATCH 02/18] Update site/content/docs/5.3/components/close-button.md Co-authored-by: Louis-Maxime Piton --- site/content/docs/5.3/components/close-button.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.3/components/close-button.md b/site/content/docs/5.3/components/close-button.md index e122f9172b..88ba08df98 100644 --- a/site/content/docs/5.3/components/close-button.md +++ b/site/content/docs/5.3/components/close-button.md @@ -26,7 +26,7 @@ Disabled close buttons change their `color`. We've also applied `pointer-events: ## Dark variant -{{< deprecated-in "5.3.2" >}} +{{< deprecated-in "5.3.3" >}} {{< callout warning >}} **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. From 3f6d5d9b9dc5924a6fa8514cadebbf4fa3840f2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 3 Oct 2023 08:36:04 +0200 Subject: [PATCH 03/18] Update site/content/docs/5.3/components/close-button.md Co-authored-by: Louis-Maxime Piton --- site/content/docs/5.3/components/close-button.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.3/components/close-button.md b/site/content/docs/5.3/components/close-button.md index 88ba08df98..a3d18150e9 100644 --- a/site/content/docs/5.3/components/close-button.md +++ b/site/content/docs/5.3/components/close-button.md @@ -29,7 +29,7 @@ Disabled close buttons change their `color`. We've also applied `pointer-events: {{< deprecated-in "5.3.3" >}} {{< callout warning >}} -**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. +**Heads up!** As of v5.3.3, 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 its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value. From 17de6cfa627c5ebaa4f9491af4ae319ee3137ec1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 3 Oct 2023 08:36:26 +0200 Subject: [PATCH 04/18] Update site/content/docs/5.3/components/offcanvas.md Co-authored-by: Louis-Maxime Piton --- site/content/docs/5.3/components/offcanvas.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.3/components/offcanvas.md b/site/content/docs/5.3/components/offcanvas.md index a0339beb2d..babe802216 100644 --- a/site/content/docs/5.3/components/offcanvas.md +++ b/site/content/docs/5.3/components/offcanvas.md @@ -151,7 +151,7 @@ When backdrop is set to static, the offcanvas will not close when clicking outsi Change the appearance of offcanvases with utilities to better match them to different contexts like dark navbars. Here we add `.text-bg-dark` to the `.offcanvas` and `.btn-close-white` to `.btn-close` for proper styling with a dark offcanvas. If you have dropdowns within, consider also adding `.dropdown-menu-dark` to `.dropdown-menu`. {{< callout warning >}} -**Heads up!** Dark variants for components were deprecated in v5.3.0 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself. +**Heads up!** Dark variants for components were deprecated in v5.3.3 with the introduction of color modes. Instead of manually adding classes mentioned above, set `data-bs-theme="dark"` on the root element, a parent wrapper, or the component itself. {{< /callout >}} {{< example class="bd-example-offcanvas p-0 bg-body-secondary overflow-hidden" >}} From 30d7259654925d133676138a4f87dd7ae4ca43b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 3 Oct 2023 09:12:54 +0200 Subject: [PATCH 05/18] Drop .navbar-dark references --- js/tests/visual/modal.html | 2 +- js/tests/visual/scrollspy.html | 2 +- scss/_navbar.scss | 2 - scss/_variables.scss | 2 - site/content/docs/5.3/components/dropdowns.md | 62 +----------------- site/content/docs/5.3/components/navbar.md | 65 ++++++++----------- .../docs/5.3/components/orange-navbar.md | 18 ++--- .../docs/5.3/examples/download-app/index.html | 4 +- .../content/docs/5.3/examples/form/index.html | 6 +- site/layouts/partials/docs-navbar.html | 4 +- site/layouts/partials/footer.html | 2 +- site/layouts/shortcodes/orange-footer.html | 2 +- .../shortcodes/orange-global-headers.html | 4 +- site/layouts/shortcodes/orange-supra.html | 2 +- 14 files changed, 51 insertions(+), 126 deletions(-) diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index 6143bd8089..b72f809256 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -13,7 +13,7 @@ -