diff --git a/scss/_title-bars.scss b/scss/_title-bars.scss index df570b90d0..5b90722cab 100644 --- a/scss/_title-bars.scss +++ b/scss/_title-bars.scss @@ -1,5 +1,7 @@ .title-bar { // scss-docs-start title-bar-css-vars + --#{$prefix}title-bar-bg: #{$title-bar-bg}; + --#{$prefix}title-bar-color: #{$title-bar-color}; --#{$prefix}title-bar-image-ratio: #{$title-bar-image-ratio}; --#{$prefix}title-bar-padding-y: #{$title-bar-padding-y}; --#{$prefix}title-bar-font-size: #{$title-bar-font-size}; @@ -9,6 +11,8 @@ --#{$prefix}title-bar-border-color: #{$title-bar-border-color}; // scss-docs-end title-bar-css-vars + color: var(--#{$prefix}title-bar-color); + background-color: var(--#{$prefix}title-bar-bg); border-bottom: var(--#{$prefix}title-bar-border-width) solid var(--#{$prefix}title-bar-border-color); @include media-breakpoint-up(md) { @@ -21,11 +25,6 @@ --#{$prefix}title-bar-letter-spacing: #{$title-bar-letter-spacing-xl}; } - &.bg-dark, - &.bg-secondary { - --#{$prefix}title-bar-border-color: #{$title-bar-border-color-dark}; - } - > [class*="container"] { display: flex; align-items: flex-end; diff --git a/scss/_variables.scss b/scss/_variables.scss index dda07746d7..f7d07afcea 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -2065,13 +2065,15 @@ $figure-caption-color: $gray-900 !default; // Boosted mod: instead // Title bars // scss-docs-start title-bars-variables +$title-bar-bg: var(--#{$prefix}body-bg) !default; +$title-bar-color: var(--#{$prefix}body-color) !default; $title-bar-image-ratio: 1.8em !default; $title-bar-padding-y: .3333333em !default; $title-bar-font-size: $h2-font-size !default; $title-bar-line-height: $display-line-height !default; $title-bar-letter-spacing: $h2-spacing !default; $title-bar-border-width: calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list -$title-bar-border-color: $gray-500 !default; +$title-bar-border-color: var(--#{$prefix}border-color-translucent) !default; $title-bar-font-size-md: $display2-size !default; $title-bar-letter-spacing-md: $display2-spacing !default; @@ -2079,7 +2081,9 @@ $title-bar-letter-spacing-md: $display2-spacing !default; $title-bar-font-size-xl: $display1-size !default; $title-bar-letter-spacing-xl: $display1-spacing !default; -$title-bar-border-color-dark: $gray-700 !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 diff --git a/site/content/docs/5.3/components/title-bars.md b/site/content/docs/5.3/components/title-bars.md index 0ae8340c07..90ba1932e5 100644 --- a/site/content/docs/5.3/components/title-bars.md +++ b/site/content/docs/5.3/components/title-bars.md @@ -19,15 +19,16 @@ See them in action in our [examples page]({{}}). ## Background color -To change the appearance of a title bar, use our [background utilities]({{}}). Orange branded background utilities are `.bg-dark`, `.bg-white` and `.bg-supporting-*`.' +To change the appearance of a title bar, use our [background utilities]({{}}). Orange branded background utilities are `.bg-dark`, `.bg-white` and `.bg-supporting-*`. + +Title bars can be displayed with `.bg-black`, `.bg-dark`, `.bg-white` or with the default background color. When using `.bg-black`, `.bg-dark`, `.bg-white` or the default background color, illustrations can be included as an option, but it's not necessary. -Title bars can be displayed with black or white backgrounds. When using black or white backgrounds, illustrations can be included as an option, but it's not necessary. Supporting colors can also be used as the background color for title bars, but not the supporting light and dark tint colors. When using one of the supporting colors, illustrations must be used. -The image should not overlap on title and the title shouldn't wrap. If this happens, please **transform your title bar** into a white/black one without any image. +The image should not overlap on title and the title shouldn't wrap. If this happens, please transform your title bar into a title bar with `.bg-black`, `.bg-dark`, `.bg-white` or with the default background color without any image. {{< example class="p-0">}} -
+

Title

@@ -35,7 +36,7 @@ The image should not overlap on title and the title shouldn't wrap. If this happ
-
+

Title

@@ -43,7 +44,7 @@ The image should not overlap on title and the title shouldn't wrap. If this happ
-
+

Title

@@ -68,7 +69,7 @@ Several options are available to add an image in a title bar. We **strongly recommend** to use `srcset` attribute as it is [well supported](https://caniuse.com/srcset) by browsers and allows you to load an image depending on the user's device. However, it might introduce a delay to display the image while resizing. {{< example class="p-0">}} -
+

Title

@@ -87,7 +88,7 @@ We **strongly recommend** to use `srcset` attribute as it is [well supported](ht ### HTML `` tag {{< example class="p-0">}} -
+

Title

@@ -98,7 +99,7 @@ We **strongly recommend** to use `srcset` attribute as it is [well supported](ht ### HTML `` tag {{< example class="p-0">}} -
+

Title

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md index 9c7bc015b6..5d73e0efd4 100644 --- a/site/content/docs/5.3/dark-mode.md +++ b/site/content/docs/5.3/dark-mode.md @@ -5158,6 +5158,58 @@ sitemap_exclude: true
+### Title bars + +

No theme

+ +
+
+
+

Title

+
+
+
+ +

Dark theme on container

+ +
+
+
+

Title

+
+
+
+ +

Light theme on container

+ +
+
+
+

Title

+
+
+
+ +

Dark theme on component

+ +
+
+
+

Title

+
+
+
+ +

Light theme on component

+ +
+
+
+

Title

+
+
+
+ ### Tooltips

No theme

diff --git a/site/content/docs/5.3/examples/title-bars/index.html b/site/content/docs/5.3/examples/title-bars/index.html index 91198ed76a..4069ca68c9 100644 --- a/site/content/docs/5.3/examples/title-bars/index.html +++ b/site/content/docs/5.3/examples/title-bars/index.html @@ -11,7 +11,7 @@ ---
-
+

Title

@@ -19,7 +19,7 @@

Title

-
+

Title

@@ -46,7 +46,7 @@

Background image

-
+

Title