From 48453d7e5fc73e00a1196641a2feebe088e16f29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 22 Jul 2024 13:05:22 +0200 Subject: [PATCH 1/3] css: drop deprecated Boosted variables and change deprecated comments --- js/src/scrollspy.js | 4 +- js/src/toast.js | 6 +- scss/_dropdown.scss | 3 +- scss/_navbar.scss | 3 +- scss/_root.scss | 2 +- scss/_utilities.scss | 6 +- scss/_variables.scss | 75 +++++++------------ .../docs/0.0/migration-from-boosted.md | 29 +++++-- 8 files changed, 61 insertions(+), 67 deletions(-) diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 368092de45..94fddb4bad 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -39,7 +39,7 @@ const SELECTOR_DROPDOWN = '.dropdown' const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle' const Default = { - offset: null, // TODO: v6 @deprecated, keep it for backwards compatibility reasons + offset: null, // TODO: Bootstrap v6 @deprecated, keep it for backwards compatibility reasons rootMargin: '0px 0px -25%', smoothScroll: false, target: null, @@ -47,7 +47,7 @@ const Default = { } const DefaultType = { - offset: '(number|null)', // TODO v6 @deprecated, keep it for backwards compatibility reasons + offset: '(number|null)', // TODO Bootstrap v6 @deprecated, keep it for backwards compatibility reasons rootMargin: 'string', smoothScroll: 'boolean', target: 'element', diff --git a/js/src/toast.js b/js/src/toast.js index d5d9c0ee0c..ffaaa7cd21 100644 --- a/js/src/toast.js +++ b/js/src/toast.js @@ -28,7 +28,7 @@ const EVENT_SHOW = `show${EVENT_KEY}` const EVENT_SHOWN = `shown${EVENT_KEY}` const CLASS_NAME_FADE = 'fade' -const CLASS_NAME_HIDE = 'hide' // @deprecated - kept here only for backwards compatibility +const CLASS_NAME_HIDE = 'hide' // Bootstrap @deprecated - kept here only for backwards compatibility const CLASS_NAME_SHOW = 'show' const CLASS_NAME_SHOWING = 'showing' @@ -92,7 +92,7 @@ class Toast extends BaseComponent { this._maybeScheduleHide() } - this._element.classList.remove(CLASS_NAME_HIDE) // @deprecated + this._element.classList.remove(CLASS_NAME_HIDE) // Bootstrap @deprecated reflow(this._element) this._element.classList.add(CLASS_NAME_SHOW, CLASS_NAME_SHOWING) @@ -111,7 +111,7 @@ class Toast extends BaseComponent { } const complete = () => { - this._element.classList.add(CLASS_NAME_HIDE) // @deprecated + this._element.classList.add(CLASS_NAME_HIDE) // Bootstrap @deprecated this._element.classList.remove(CLASS_NAME_SHOWING, CLASS_NAME_SHOW) EventHandler.trigger(this._element, EVENT_HIDDEN) } diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index 7242ee797d..bbfa044343 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -238,7 +238,7 @@ color: var(--#{$prefix}dropdown-link-color); } -// Deprecated in v5.3.3 +// OUDS mod: deprecated in OUDS Web, kept for Bootstrap compatibility // Dark dropdowns .dropdown-menu-dark { --#{$prefix}dropdown-color: #{$dropdown-dark-color}; @@ -254,3 +254,4 @@ --#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color}; --#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color}; } +// End mod diff --git a/scss/_navbar.scss b/scss/_navbar.scss index 63148cba63..a09eb59e37 100644 --- a/scss/_navbar.scss +++ b/scss/_navbar.scss @@ -544,7 +544,7 @@ @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true); } -// Deprecated in v5.3.3 +// OUDS mod: deprecated in OUDS Web, kept for Bootstrap compatibility // OUDS mod: no `navbar[data-bs-theme="dark"]` selector .navbar-dark { --#{$prefix}navbar-border-color: #{$navbar-dark-border-color}; // OUDS mod @@ -557,5 +557,6 @@ --#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color}; // OUDS mod: No --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)}; since we handle the variant with filter } +// End mod // OUDS mod: no `@if enable-dark-mode` diff --git a/scss/_root.scss b/scss/_root.scss index 79fb96f02b..fb9bc8ccb4 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -126,7 +126,7 @@ --#{$prefix}border-radius-lg: #{$border-radius-lg}; --#{$prefix}border-radius-xl: #{$border-radius-xl}; --#{$prefix}border-radius-xxl: #{$border-radius-xxl}; - --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency + --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in Bootstrap v5.3.0 for consistency --#{$prefix}border-radius-pill: #{$border-radius-pill}; // scss-docs-end root-border-var diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 1686481ef0..5adb328d5d 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -586,9 +586,9 @@ $utilities: map-merge( values: map-merge( $utilities-text-colors, ( - "muted": var(--#{$prefix}secondary-color), // deprecated - "black-50": rgba($black, .5), // deprecated - "white-50": rgba($white, .5), // deprecated + "muted": var(--#{$prefix}secondary-color), // Deprecated in Bootstrap + "black-50": rgba($black, .5), // Deprecated in Bootstrap + "white-50": rgba($white, .5), // Deprecated in Bootstrap "body-secondary": var(--#{$prefix}secondary-color), "body-tertiary": var(--#{$prefix}tertiary-color), "body-emphasis": var(--#{$prefix}emphasis-color), diff --git a/scss/_variables.scss b/scss/_variables.scss index 3f0d0b79a2..7086461ccc 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -418,9 +418,6 @@ $svg-as-custom-props: ( //// Filters // see https://codepen.io/sosuke/pen/Pjoqqp $invert-filter: invert(1) !default; -// fusv-disable -$orange-filter: invert(46%) sepia(60%) saturate(2878%) hue-rotate(6deg) brightness(98%) contrast(104%) !default; // Deprecated in v5.3.3 -// fusv-enable // End mod // Options @@ -450,12 +447,8 @@ $color-mode-type: data !default; // `data` or `media-query` // Prefix for :root CSS variables -$variable-prefix: bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix` +$variable-prefix: bs- !default; // Deprecated in Bootstrap v5.2.0 for the shorter `$prefix` $prefix: $variable-prefix !default; -// fusv-disable -$boosted-variable-prefix: o- !default; // Deprecated in v5.2.0 for the shorter `$prefix` -$boosted-prefix: $boosted-variable-prefix !default; // Deprecated in v5.3.0 for the shorter `$prefix` -// fusv-enable // Gradient // @@ -642,12 +635,7 @@ $border-radius-xxl: 2rem !default; $border-radius-pill: 50rem !default; // scss-docs-end border-radius-variables // fusv-disable -$border-radius-2xl: $border-radius-xxl !default; // Deprecated in v5.3.0 -// fusv-enable - -// fusv-disable -$outline-width: var(--#{$prefix}border-width) !default; // Deprecated in v5.2.3 -$outline-offset: $outline-width !default; // Deprecated in v5.2.3 +$border-radius-2xl: $border-radius-xxl !default; // Deprecated in Bootstrap v5.3.0 // fusv-enable // scss-docs-start focus-visible-variables @@ -826,7 +814,7 @@ $small-font-size: .875rem !default; $sub-sup-font-size: .75em !default; // fusv-disable -$text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0 +$text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in Bootstrap 5.3.0 // fusv-enable $initialism-font-size: $small-font-size !default; @@ -842,8 +830,8 @@ $hr-margin-y: $spacer !default; $hr-color: inherit !default; // fusv-disable -$hr-bg-color: null !default; // Deprecated in v5.2.0 -$hr-height: null !default; // Deprecated in v5.2.0 +$hr-bg-color: null !default; // Deprecated in Bootstrap v5.2.0 +$hr-height: null !default; // Deprecated in Bootstrap v5.2.0 // fusv-enable $hr-border-color: null !default; // Allows for inherited colors @@ -1228,13 +1216,6 @@ $form-star-rating-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; $form-star-rating-sm-checked-icon: escape-svg(url("data:image/svg+xml,")) !default; $form-star-rating-sm-unchecked-icon: escape-svg(url("data:image/svg+xml,")) !default; -//fusv-disable -$form-star-focus-color: $black !default; // Deprecated in v5.2.3 -$form-star-focus-outline: var(--#{$prefix}border-width) solid $form-star-focus-color !default; // Deprecated in v5.2.3 -$form-star-focus-color-dark: $white !default; // Deprecated in v5.2.3 -$form-star-focus-outline-dark: var(--#{$prefix}border-width) solid $form-star-focus-color-dark !default; // Deprecated in v5.2.3 -$form-star-focus-box-shadow: $input-btn-focus-box-shadow !default; // Deprecated in v5.2.3 -//fusv-enable // End mod // scss-docs-end form-check-variables @@ -1366,10 +1347,12 @@ $form-file-button-hover-bg: var(--#{$prefix}secondary-bg) !default; $form-feedback-margin-top: $form-text-margin-top !default; $form-feedback-font-size: $small-font-size !default; $form-feedback-font-style: null !default; +// OUDS mod: deprecated in OUDS Web, kept for Bootstrap compatibility // fusv-disable -$form-feedback-valid-color: $success !default; // OUDS mod: deprecated in v5.3.0 -$form-feedback-invalid-color: $danger !default; // OUDS mod: deprecated in v5.3.0 +$form-feedback-valid-color: $success !default; +$form-feedback-invalid-color: $danger !default; // fusv-enable +// End mod $form-feedback-icon-valid: var(--#{$prefix}success-icon) !default; $form-feedback-icon-invalid: var(--#{$prefix}error-icon) !default; @@ -1569,7 +1552,7 @@ $navbar-badge-margin-top: .375rem !default; // scss-docs-end orange-navbar-variables // End mod -// Deprecated in v5.3.3: all `$navbar-dark-*` +// OUDS mod: deprecated all `$navbar-dark-*` in OUDS Web, kept for Bootstrap compatibility $navbar-dark-border-color: $gray-700 !default; // OUDS mod $navbar-dark-color: $white !default; // OUDS mod: instead of `rgba($white, .55)` $navbar-dark-hover-color: $supporting-orange !default; // OUDS mod: instead of `rgba($white, .75)` @@ -1580,7 +1563,7 @@ $navbar-dark-disabled-color: $gray-700 !default; // OUDS mod: instead of $navbar-dark-toggler-border-color: transparent !default; // OUDS mod: instead of `rgba($white, .1)` $navbar-dark-brand-color: inherit !default; // OUDS mod: instead of `$navbar-dark-active-color` $navbar-dark-brand-hover-color: $navbar-dark-active-color !default; - +// End mod // Dropdowns // @@ -1619,11 +1602,11 @@ $dropdown-header-color: null !default; // OUDS mod: instead of `$gra $dropdown-header-padding-x: $dropdown-item-padding-x !default; $dropdown-header-padding-y: $spacer !default; // OUDS mod: instead of `$dropdown-padding-y` // fusv-disable -$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0 +$dropdown-header-padding: $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in Bootstrap v5.2.0 // fusv-enable // scss-docs-end dropdown-variables -// Deprecated in v5.3.3: all `$dropdown-dark-*` +// OUDS mod: deprecated all `$dropdown-dark-*` in OUDS Web, kept for Bootstrap compatibility $dropdown-dark-color: $white !default; // OUDS mod $dropdown-dark-bg: $black !default; // OUDS mod $dropdown-dark-border-color: $gray-700 !default; // OUDS mod @@ -1636,6 +1619,7 @@ $dropdown-dark-link-active-color: $black !default; // OUDS mod $dropdown-dark-link-active-bg: $white !default; // OUDS mod $dropdown-dark-link-disabled-color: $gray-700 !default; // OUDS mod $dropdown-dark-header-color: $white !default; // OUDS mod +// End mod // Pagination @@ -1658,13 +1642,14 @@ $pagination-margin-start: 0 !default; // OUDS mod: instead of `calc($p $pagination-margin-x-first-last: $spacer * .5 !default; // OUDS mod $pagination-border-color: transparent !default; // OUDS mod: instead of `var(--#{$prefix}border-color)` -// Deprecated in v5.3.3 +// OUDS mod: deprecated all `$pagination-focus-*` in OUDS Web, kept for Bootstrap compatibility // fusv-disable $pagination-focus-color: null !default; // OUDS mod $pagination-focus-bg: null !default; // OUDS mod: instead of `var(--#{$prefix}secondary-bg)` $pagination-focus-box-shadow: 0 0 0 $focus-visible-inner-width var(--#{$prefix}focus-visible-inner-color) !default; // OUDS mod: no `$focus-ring-box-shadow` $pagination-focus-outline: null !default; // OUDS mod // fusv-enable +// End mod $pagination-hover-color: var(--#{$prefix}body-color) !default; // OUDS mod: instead of `var(--#{$prefix}link-hover-color)` $pagination-hover-bg: var(--#{$prefix}secondary-bg) !default; // OUDS mod: instead of `var(--#{$prefix}tertiary-bg)` @@ -1709,9 +1694,11 @@ $placeholder-opacity-min: .2 !default; // scss-docs-start card-variables $card-spacer-top: $spacer * .75 !default; // OUDS mod $card-spacer-bottom: $spacer !default; // OUDS mod +// OUDS mod: deprecated in OUDS Web, kept for Bootstrap compatibility // fusv-disable -$card-spacer-y: $spacer !default; // Deprecated in v5.2.3 +$card-spacer-y: $spacer !default; // fusv-enable +// End mod $card-spacer-x: $spacer !default; $card-title-spacer-y: $spacer * .5 !default; $card-title-color: null !default; @@ -1751,10 +1738,12 @@ $accordion-body-padding-top: $spacer !default; // OUDS mod $accordion-body-padding-end: 0 !default; // OUDS mod $accordion-body-padding-bottom: $spacer * 1.5 !default; // OUDS mod $accordion-body-padding-start: 0 !default; // OUDS mod +// OUDS mod: deprecated in OUDS Web, kept for Bootstrap compatibility // fusv-disable -$accordion-body-padding-y: $spacer !default; // Deprecated in Boosted 5.2.3 to divide it in -padding -$accordion-body-padding-x: $spacer !default; // Deprecated in Boosted 5.2.3 to divide it in -padding +$accordion-body-padding-y: $spacer !default; // Deprecated in OUDS Web to divide it in -padding +$accordion-body-padding-x: $spacer !default; // Deprecated in OUDS Web to divide it in -padding // fusv-enable +// End mod $accordion-button-padding-y: $accordion-padding-y !default; $accordion-button-padding-x: $accordion-padding-x !default; @@ -1812,7 +1801,7 @@ $tooltip-margin: null !default; // TODO: remove this in v6 $tooltip-arrow-width: $spacer * .5 !default; $tooltip-arrow-height: $tooltip-arrow-width * .5 !default; // fusv-disable -$tooltip-arrow-color: null !default; // Deprecated in Boosted 5.2.0 for CSS variables +$tooltip-arrow-color: null !default; // Deprecated in Bootstrap 5.2.0 for CSS variables // fusv-enable // scss-docs-end tooltip-variables @@ -2091,10 +2080,6 @@ $title-bar-letter-spacing-md: $display2-spacing !default; $title-bar-font-size-xl: $display1-size !default; $title-bar-letter-spacing-xl: $display1-spacing !default; - -// fusv-disable -$title-bar-border-color-dark: $gray-700 !default; // Deprecated in v5.3.3 -// fusv-enable // scss-docs-end title-bars-variables // End mod @@ -2208,9 +2193,9 @@ $btn-close-border-width: var(--#{$prefix}border-width) !default; // OUDS $btn-close-border-color: transparent !default; // OUDS mod $btn-close-color: var(--#{$prefix}emphasis-color) !default; $btn-close-bg: var(--#{$prefix}close-icon) !default; // OUDS mod -// OUDS mod +// OUDS mod: deprecated in OUDS Web, kept for Bootstrap compatibility // fusv-disable -$btn-close-focus-shadow: $btn-focus-box-shadow !default; // Deprecated in v5.3.0 +$btn-close-focus-shadow: $btn-focus-box-shadow !default; // fusv-enable // End mod @@ -2255,7 +2240,7 @@ $kbd-padding-x: $spacer * .05 !default; $kbd-font-size: $code-font-size !default; $kbd-color: var(--#{$prefix}kbd-color, $black) !default; $kbd-bg: var(--#{$prefix}kbd-bg, $gray-300) !default; -$nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6 +$nested-kbd-font-weight: null !default; // Deprecated in Bootstrap v5.2.0, removing in v6 $pre-color: var(--#{$prefix}code-color) !default; $pre-line-height: 1.25 !default; @@ -2297,9 +2282,6 @@ $stepped-process-counter: step !default; // Used as a counter name $stepped-process-bg: var(--#{$prefix}body-bg) !default; $step-item-padding: 7px !default; -// fusv-disable -$step-item-padding-end: $step-item-padding * 2 !default; // Deprecated in v5.2.0 -// fusv-enable $step-item-margin-end: var(--#{$prefix}border-width) !default; $step-item-bg: var(--#{$prefix}secondary) !default; $step-item-active-bg: $supporting-orange !default; @@ -2380,9 +2362,6 @@ $footer-letter-spacing: $letter-spacing-base !default; $footer-accordion-line-height: $spacer * 1.45 !default; $footer-accordion-active-color: var(--#{$prefix}primary) !default; $footer-accordion-btn-hover-bg: null !default; -// fusv-disable -$footer-nav-link-font-weight: $font-weight-bold !default; // Deprecated in v5.3.3 -// fusv-enable $footer-title-content-padding-top: $spacer * 1.25 !default; $footer-title-content-padding-bottom: $spacer * 1.45 !default; diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index 7fae744e0b..cf732b4650 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -56,25 +56,38 @@ Technically, it means that you can get rid of the following things: -
Warning Dropped deprecated Sass variables:
    -
  • $btn-close-white-color
    • +
  • $boosted-prefix
    • +
  • $boosted-variable-prefix
    • +
  • $btn-close-white-active-border-color
    • +
  • $btn-close-white-active-color
  • $btn-close-white-bg
  • $btn-close-white-border-color
    • -
  • $btn-close-white-hover-color
    • -
  • $btn-close-white-active-color
    • -
  • $btn-close-white-active-border-color
    • +
  • $btn-close-white-color
  • $btn-close-white-disabled-color
    • +
  • $btn-close-white-hover-color
    • +
  • $form-star-focus-box-shadow
    • +
  • $form-star-focus-color
    • +
  • $form-star-focus-color-dark
    • +
  • $form-star-focus-outline
    • +
  • $form-star-focus-outline-dark
    • +
  • $footer-nav-link-font-weight
    • +
  • $orange-filter
    • +
  • $outline-offset
    • +
  • $outline-width
    • +
  • $step-item-padding-end
    • +
  • $title-bar-border-color-dark
-
Warning Dropped deprecated CSS variables:
    -
  • --bs-btn-close-color
    • +
  • --bs-btn-close-active-border-color
    • +
  • --bs-btn-close-active-color
  • --bs-btn-close-bg
  • --bs-btn-close-border-color
    • -
  • --bs-btn-close-hover-color
    • -
  • --bs-btn-close-active-color
    • -
  • --bs-btn-close-active-border-color
    • +
  • --bs-btn-close-color
  • --bs-btn-close-disabled-color
    • +
  • --bs-btn-close-hover-color
From c04054207f8f02baa2d14c5365d9470c70a715af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 22 Jul 2024 13:12:03 +0200 Subject: [PATCH 2/3] . --- scss/_variables.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scss/_variables.scss b/scss/_variables.scss index 7086461ccc..652dbbb1a0 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -936,7 +936,11 @@ $input-btn-focus-width: $focus-visible-outer-offset !default; // OUDS mod: // OUDS mod: no `$input-btn-focus-color-opacity` // OUDS mod: no `$input-btn-focus-color` // OUDS mod: no `$input-btn-focus-blur` +// OUDS mod: deprecated in OUDS Web, kept for Bootstrap compatibility +// fusv-disable $input-btn-focus-box-shadow: $focus-ring-box-shadow !default; +// fusv-enable +// End mod $input-btn-padding-y-sm: $spacer * .25 !default; $input-btn-padding-x-sm: $spacer * .5 !default; From e5935cb42bdb282e9b2a664391b37ac632c20296 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 23 Jul 2024 07:42:36 +0200 Subject: [PATCH 3/3] . --- site/content/docs/0.0/migration-from-boosted.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md index cf732b4650..7f086f0a13 100644 --- a/site/content/docs/0.0/migration-from-boosted.md +++ b/site/content/docs/0.0/migration-from-boosted.md @@ -65,12 +65,12 @@ Technically, it means that you can get rid of the following things:
  • $btn-close-white-color
  • $btn-close-white-disabled-color
  • $btn-close-white-hover-color
    • +
  • $footer-nav-link-font-weight
  • $form-star-focus-box-shadow
  • $form-star-focus-color
  • $form-star-focus-color-dark
  • $form-star-focus-outline
  • $form-star-focus-outline-dark
    • -
  • $footer-nav-link-font-weight
  • $orange-filter
  • $outline-offset
  • $outline-width