diff --git a/dev/scss/bootstrap-overrides.scss b/dev/scss/bootstrap-overrides.scss index a5ad1478..94e6a0db 100644 --- a/dev/scss/bootstrap-overrides.scss +++ b/dev/scss/bootstrap-overrides.scss @@ -1,31 +1,23 @@ /*! - * Bootstrap v5.2.2 (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors - * Copyright 2011-2022 Twitter, Inc. + * Bootstrap v5.3.3 (https://getbootstrap.com/) + * Copyright 2011-2024 The Bootstrap Authors * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */ - $enable-gradients: true; +$enable-gradients: true; + +@import "bootstrap/mixins/banner"; +@include bsBanner(""); -/*! - * Bootstrap v5.2.2 (https://getbootstrap.com/) - * Copyright 2011-2022 The Bootstrap Authors - * Copyright 2011-2022 Twitter, Inc. - * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) - */ - - @import "bootstrap/mixins/banner"; - @include bsBanner(""); - - - // scss-docs-start import-stack - // Configuration - @import "bootstrap/functions"; - @import "bootstrap/variables"; - @import "bootstrap/maps"; - @import "bootstrap/mixins"; - @import "bootstrap/utilities"; +// scss-docs-start import-stack +// Configuration +@import "bootstrap/functions"; +@import "bootstrap/variables"; +@import "bootstrap/variables-dark"; +@import "bootstrap/maps"; +@import "bootstrap/mixins"; +@import "bootstrap/utilities"; // Layout & components @import "bootstrap/root"; @@ -65,4 +57,4 @@ // Utilities @import "bootstrap/utilities/api"; - // scss-docs-end import-stack \ No newline at end of file + // scss-docs-end import-stack diff --git a/dev/scss/bootstrap/_accordion.scss b/dev/scss/bootstrap/_accordion.scss index f09601ba..17e5436e 100755 --- a/dev/scss/bootstrap/_accordion.scss +++ b/dev/scss/bootstrap/_accordion.scss @@ -20,7 +20,6 @@ --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform}; --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition}; --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)}; - --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color}; --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow}; --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x}; --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y}; @@ -74,7 +73,6 @@ &:focus { z-index: 3; - border-color: var(--#{$prefix}accordion-btn-focus-border-color); outline: 0; box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow); } @@ -92,7 +90,7 @@ &:first-of-type { @include border-top-radius(var(--#{$prefix}accordion-border-radius)); - .accordion-button { + > .accordion-header .accordion-button { @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius)); } } @@ -105,13 +103,13 @@ &:last-of-type { @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); - .accordion-button { + > .accordion-header .accordion-button { &.collapsed { @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius)); } } - .accordion-collapse { + > .accordion-collapse { @include border-bottom-radius(var(--#{$prefix}accordion-border-radius)); } } @@ -127,11 +125,7 @@ // Remove borders and border-radius to keep accordion items edge-to-edge. .accordion-flush { - .accordion-collapse { - border-width: 0; - } - - .accordion-item { + > .accordion-item { border-right: 0; border-left: 0; @include border-radius(0); @@ -139,11 +133,26 @@ &:first-child { border-top: 0; } &:last-child { border-bottom: 0; } - .accordion-button { + // stylelint-disable selector-max-class + > .accordion-header .accordion-button { &, &.collapsed { @include border-radius(0); } } + // stylelint-enable selector-max-class + + > .accordion-collapse { + @include border-radius(0); + } + } +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .accordion-button::after { + --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)}; + --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)}; + } } } diff --git a/dev/scss/bootstrap/_alert.scss b/dev/scss/bootstrap/_alert.scss index c8bc91b4..b8cff9b7 100755 --- a/dev/scss/bootstrap/_alert.scss +++ b/dev/scss/bootstrap/_alert.scss @@ -12,6 +12,7 @@ --#{$prefix}alert-border-color: transparent; --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color); --#{$prefix}alert-border-radius: #{$alert-border-radius}; + --#{$prefix}alert-link-color: inherit; // scss-docs-end alert-css-vars position: relative; @@ -32,6 +33,7 @@ // Provide class for links that match alerts .alert-link { font-weight: $alert-link-font-weight; + color: var(--#{$prefix}alert-link-color); } @@ -54,18 +56,13 @@ // scss-docs-start alert-modifiers -// Generate contextual modifier classes for colorizing the alert. - -@each $state, $value in $theme-colors { - $alert-background: shift-color($value, $alert-bg-scale); - $alert-border: shift-color($value, $alert-border-scale); - $alert-color: shift-color($value, $alert-color-scale); - - @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) { - $alert-color: mix($value, color-contrast($alert-background), abs($alert-color-scale)); - } +// Generate contextual modifier classes for colorizing the alert +@each $state in map-keys($theme-colors) { .alert-#{$state} { - @include alert-variant($alert-background, $alert-border, $alert-color); + --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis); + --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle); + --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle); + --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis); } } // scss-docs-end alert-modifiers diff --git a/dev/scss/bootstrap/_button-group.scss b/dev/scss/bootstrap/_button-group.scss index 79b100cb..55ae3f65 100755 --- a/dev/scss/bootstrap/_button-group.scss +++ b/dev/scss/bootstrap/_button-group.scss @@ -39,7 +39,7 @@ // Prevent double borders when buttons are next to each other > :not(.btn-check:first-child) + .btn, > .btn-group:not(:first-child) { - margin-left: -$btn-border-width; + margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list } // Reset rounded corners @@ -126,7 +126,7 @@ > .btn:not(:first-child), > .btn-group:not(:first-child) { - margin-top: -$btn-border-width; + margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list } // Reset rounded corners diff --git a/dev/scss/bootstrap/_buttons.scss b/dev/scss/bootstrap/_buttons.scss index f2c4c13a..caa4518a 100755 --- a/dev/scss/bootstrap/_buttons.scss +++ b/dev/scss/bootstrap/_buttons.scss @@ -10,7 +10,7 @@ @include rfs($btn-font-size, --#{$prefix}btn-font-size); --#{$prefix}btn-font-weight: #{$btn-font-weight}; --#{$prefix}btn-line-height: #{$btn-line-height}; - --#{$prefix}btn-color: #{$body-color}; + --#{$prefix}btn-color: #{$btn-color}; --#{$prefix}btn-bg: transparent; --#{$prefix}btn-border-width: #{$btn-border-width}; --#{$prefix}btn-border-color: transparent; @@ -100,6 +100,15 @@ } } + .btn-check:checked:focus-visible + & { + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow); + } @else { + box-shadow: var(--#{$prefix}btn-focus-box-shadow); + } + } + &:disabled, &.disabled, fieldset:disabled & { @@ -169,8 +178,8 @@ --#{$prefix}btn-active-border-color: transparent; --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color}; --#{$prefix}btn-disabled-border-color: transparent; - --#{$prefix}btn-box-shadow: none; - --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))}; + --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows + --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb}; text-decoration: $link-decoration; @if $enable-gradients { diff --git a/dev/scss/bootstrap/_card.scss b/dev/scss/bootstrap/_card.scss index ce8c02f1..d3535a98 100755 --- a/dev/scss/bootstrap/_card.scss +++ b/dev/scss/bootstrap/_card.scss @@ -7,6 +7,8 @@ --#{$prefix}card-spacer-y: #{$card-spacer-y}; --#{$prefix}card-spacer-x: #{$card-spacer-x}; --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y}; + --#{$prefix}card-title-color: #{$card-title-color}; + --#{$prefix}card-subtitle-color: #{$card-subtitle-color}; --#{$prefix}card-border-width: #{$card-border-width}; --#{$prefix}card-border-color: #{$card-border-color}; --#{$prefix}card-border-radius: #{$card-border-radius}; @@ -28,6 +30,7 @@ flex-direction: column; min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106 height: var(--#{$prefix}card-height); + color: var(--#{$prefix}body-color); word-wrap: break-word; background-color: var(--#{$prefix}card-bg); background-clip: border-box; @@ -73,11 +76,13 @@ .card-title { margin-bottom: var(--#{$prefix}card-title-spacer-y); + color: var(--#{$prefix}card-title-color); } .card-subtitle { margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list margin-bottom: 0; + color: var(--#{$prefix}card-subtitle-color); } .card-text:last-child { diff --git a/dev/scss/bootstrap/_carousel.scss b/dev/scss/bootstrap/_carousel.scss index 3d8fb15a..3a135220 100755 --- a/dev/scss/bootstrap/_carousel.scss +++ b/dev/scss/bootstrap/_carousel.scss @@ -42,7 +42,6 @@ display: block; } -/* rtl:begin:ignore */ .carousel-item-next:not(.carousel-item-start), .active.carousel-item-end { transform: translateX(100%); @@ -53,8 +52,6 @@ transform: translateX(-100%); } -/* rtl:end:ignore */ - // // Alternate transitions @@ -135,19 +132,11 @@ background-size: 100% 100%; } -/* rtl:options: { - "autoRename": true, - "stringMap":[ { - "name" : "prev-next", - "search" : "prev", - "replace" : "next" - } ] -} */ .carousel-control-prev-icon { - background-image: escape-svg($carousel-control-prev-icon-bg); + background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"}; } .carousel-control-next-icon { - background-image: escape-svg($carousel-control-next-icon-bg); + background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"}; } // Optional indicator pips/controls @@ -168,7 +157,6 @@ margin-right: $carousel-control-width; margin-bottom: 1rem; margin-left: $carousel-control-width; - list-style: none; [data-bs-target] { box-sizing: content-box; @@ -213,7 +201,7 @@ // Dark mode carousel -.carousel-dark { +@mixin carousel-dark() { .carousel-control-prev-icon, .carousel-control-next-icon { filter: $carousel-dark-control-icon-filter; @@ -227,3 +215,22 @@ color: $carousel-dark-caption-color; } } + +.carousel-dark { + @include carousel-dark(); +} + +@if $enable-dark-mode { + @include color-mode(dark) { + @if $color-mode-type == "media-query" { + .carousel { + @include carousel-dark(); + } + } @else { + .carousel, + &.carousel { + @include carousel-dark(); + } + } + } +} diff --git a/dev/scss/bootstrap/_close.scss b/dev/scss/bootstrap/_close.scss index a0813de8..4d6e73c1 100755 --- a/dev/scss/bootstrap/_close.scss +++ b/dev/scss/bootstrap/_close.scss @@ -4,37 +4,60 @@ // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile .btn-close { + // scss-docs-start close-css-vars + --#{$prefix}btn-close-color: #{$btn-close-color}; + --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) }; + --#{$prefix}btn-close-opacity: #{$btn-close-opacity}; + --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity}; + --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow}; + --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity}; + --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity}; + --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter}; + // scss-docs-end close-css-vars + box-sizing: content-box; width: $btn-close-width; height: $btn-close-height; padding: $btn-close-padding-y $btn-close-padding-x; - color: $btn-close-color; - background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements + color: var(--#{$prefix}btn-close-color); + background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements border: 0; // for button elements @include border-radius(); - opacity: $btn-close-opacity; + opacity: var(--#{$prefix}btn-close-opacity); // Override 's hover style &:hover { - color: $btn-close-color; + color: var(--#{$prefix}btn-close-color); text-decoration: none; - opacity: $btn-close-hover-opacity; + opacity: var(--#{$prefix}btn-close-hover-opacity); } &:focus { outline: 0; - box-shadow: $btn-close-focus-shadow; - opacity: $btn-close-focus-opacity; + box-shadow: var(--#{$prefix}btn-close-focus-shadow); + opacity: var(--#{$prefix}btn-close-focus-opacity); } &:disabled, &.disabled { pointer-events: none; user-select: none; - opacity: $btn-close-disabled-opacity; + opacity: var(--#{$prefix}btn-close-disabled-opacity); } } -.btn-close-white { - filter: $btn-close-white-filter; +@mixin btn-close-white() { + filter: var(--#{$prefix}btn-close-white-filter); +} + +.btn-close-white { + @include btn-close-white(); +} + +@if $enable-dark-mode { + @include color-mode(dark) { + .btn-close { + @include btn-close-white(); + } + } } diff --git a/dev/scss/bootstrap/_dropdown.scss b/dev/scss/bootstrap/_dropdown.scss index 8899d25a..587ebb48 100755 --- a/dev/scss/bootstrap/_dropdown.scss +++ b/dev/scss/bootstrap/_dropdown.scss @@ -184,6 +184,7 @@ white-space: nowrap; // prevent links from randomly breaking onto new lines background-color: transparent; // For `