chore(merge main): patched commit → a799f01 (#1862)

Orange-OpenSource · Mar 6, 2023 · 1278c55 · 1278c55
1 parent 8bacb84
commit 1278c55
Show file tree

Hide file tree

Showing 36 changed files with 159 additions and 156 deletions.
diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
@@ -41,7 +41,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
         <div class="toast-header">
           <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
-          <small class="text-muted">2 seconds ago</small>
+          <small class="text-body-secondary">2 seconds ago</small>
           <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button><!--Boosted mod: a11y-->
         </div>
         <div class="toast-body">

diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
@@ -20,7 +20,7 @@
     <div class="container">
       <h1>Tooltip <small>Boosted Visual Test</small></h1>
 
-      <p class="text-muted">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
+      <p class="text-body-secondary">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
 
       <hr>
 

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -202,15 +202,13 @@
     --#{$prefix}list-group-color: #{color-contrast($value)}; // Boosted mod: instead of `var(--#{$prefix}#{state}-text)`
     --#{$prefix}list-group-bg: #{$value}; // Boosted mod: instead of `var(--#{$prefix}#{$state}-bg-subtle)`
     // Boosted mod: no `--#{$prefix}list-group-border-color`
-
-    &.list-group-item-action {
-      &:hover { // Boosted mod: no `&:focus`
-        --#{$prefix}list-group-action-hover-color: #{color-contrast($value)}; // Boosted mod: instead of `var(--#{$prefix}emphasis-color)`;
-        --#{$prefix}list-group-action-hover-bg: #{if(color-contrast($value) == $white, shade-color($value, 10%), tint-color($value, 10%))}; // Boosted mod: instead of `var(--#{$prefix}#{state}-border-subtle)`;
-      }
-
-      // Boosted mod: no `&:active`
-    }
+    --#{$prefix}list-group-action-hover-color: #{color-contrast($value)}; // Boosted mod: instead of `var(--#{$prefix}emphasis-color)`;
+    --#{$prefix}list-group-action-hover-bg: #{if(color-contrast($value) == $white, shade-color($value, 10%), tint-color($value, 10%))}; // Boosted mod: instead of `var(--#{$prefix}#{state}-border-subtle)`;
+    // Boosted mod: no `--#{$prefix}list-group-action-active-color`
+    // Boosted mod: no `--#{$prefix}list-group-action-active-bg`
+    // Boosted mod: no `--#{$prefix}list-group-active-color`
+    // Boosted mod: no `--#{$prefix}list-group-active-bg`
+    // Boosted mod: no `--#{$prefix}list-group-active-border-color`
   }
 }
 // scss-docs-end list-group-modifiers

diff --git a/scss/_root.scss b/scss/_root.scss
@@ -123,11 +123,6 @@
   --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
   --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
 
-  // scss-docs-start form-control-vars
-  --#{$prefix}form-control-bg: var(--#{$prefix}body-bg);
-  --#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg);
-  // scss-docs-end form-control-vars
-
   --#{$prefix}focus-visible-inner-color: #{$focus-visible-inner-color}; // Boosted mod
   --#{$prefix}focus-visible-outer-color: #{$focus-visible-outer-color}; // Boosted mod
 

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
@@ -586,7 +586,7 @@ $utilities: map-merge(
       values: map-merge(
         $utilities-text-colors,
         (
-          "muted": $text-muted, // deprecated
+          "muted": var(--#{$prefix}secondary-color), // deprecated
           "black-50": rgba($black, .5), // deprecated
           "white-50": rgba($white, .5), // deprecated
           "body-secondary": var(--#{$prefix}secondary-color),

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -802,7 +802,9 @@ $small-font-size:             .875rem !default;
 
 $sub-sup-font-size:           .75em !default;
 
-$text-muted:                  var(--#{$prefix}secondary-color) !default;
+// fusv-disable
+$text-muted:                  var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
+// fusv-enable
 
 $initialism-font-size:        $small-font-size !default;
 
@@ -1066,9 +1068,9 @@ $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
 $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
 $input-font-size-lg:                    $input-btn-font-size-lg !default;
 
-$input-bg:                              var(--#{$prefix}form-control-bg) !default;
+$input-bg:                              var(--#{$prefix}body-bg) !default;
 $input-disabled-color:                  $gray-700 !default; // Boosted mod
-$input-disabled-bg:                     var(--#{$prefix}form-control-disabled-bg) !default;
+$input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color:           null !default;
 
 $input-color:                           var(--#{$prefix}body-color) !default;

diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
@@ -42,7 +42,9 @@
   }
   // End mod
 
-  // Boosted mod: no `@include color-mode(dark)` since Boosted doesn't yet fully support dark mode
+  .dropdown-menu-end {
+    --bs-dropdown-min-width: 8rem;
+  }
 
   // Boosted mod: Specificity
   .navbar-nav.flex-row {
@@ -52,3 +54,5 @@
   }
   // End mod
 }
+
+// Boosted mod: no `@include color-mode(dark)` since Boosted doesn't yet fully support dark mode
diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss
@@ -9,7 +9,7 @@
   // --docsearch-spacing
   // --docsearch-icon-stroke-width
   --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-muted-color: #{$text-muted};
+  --docsearch-muted-color: var(--bs-secondary-color);
   // --docsearch-container-background
   --docsearch-logo-color: #{$black};
   // --docsearch-modal-width

diff --git a/site/assets/scss/_tarteaucitron.scss b/site/assets/scss/_tarteaucitron.scss
@@ -124,7 +124,7 @@
 @include tac("Name", true) {
   float: left;
   font-size: $font-size-sm;
-  color: $text-muted;
+  color: var(--bs-secondary-color);
 }
 
 @include tac("Ask", true) {

diff --git a/site/content/docs/5.3/components/card.md b/site/content/docs/5.3/components/card.md
@@ -360,14 +360,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
   </div>
 </div>
 <div class="card">
   <div class="card-body">
     <h5 class="card-title">Card title</h5>
     <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
   </div>
   {{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
 </div>
@@ -406,7 +406,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in
       <div class="card-body">
         <h5 class="card-title">Card title</h5>
         <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
       </div>
     </div>
   </div>
@@ -498,23 +498,23 @@ Use card groups to render cards as a single, attached element with equal width a
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
     </div>
   </div>
   <div class="card">
     {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text fw-bold">This card has supporting text below as a natural lead-in to additional content.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
     </div>
   </div>
   <div class="card">
     {{< placeholder width="100%" height="180" class="card-img-top" text="Image cap" >}}
     <div class="card-body">
       <h5 class="card-title">Card title</h5>
       <p class="card-text fw-bold">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
-      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
     </div>
   </div>
 </div>

diff --git a/site/content/docs/5.3/components/dropdowns.md b/site/content/docs/5.3/components/dropdowns.md
@@ -725,7 +725,7 @@ Please refer to the [Dropdown](https://system.design.orange.com/0c1af118d/p/910b
 {{< /ods-incompatibility-alert >}}
 
 {{< example >}}
-<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
+<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
   <p>
     Some example text that's free-flowing within the dropdown menu.
   </p>

diff --git a/site/content/docs/5.3/components/list-group.md b/site/content/docs/5.3/components/list-group.md
@@ -244,18 +244,18 @@ This variant should not be used because it does not respect the Orange Design Sy
   <a href="#" class="list-group-item list-group-item-action">
     <div class="d-flex w-100 justify-content-between">
       <h5 class="mb-1">List group item heading</h5>
-      <small class="text-muted">3 days ago</small>
+      <small class="text-body-secondary">3 days ago</small>
     </div>
     <p class="mb-1">Some placeholder content in a paragraph.</p>
-    <small class="text-muted">And some muted small print.</small>
+    <small class="text-body-secondary">And some muted small print.</small>
   </a>
   <a href="#" class="list-group-item list-group-item-action">
     <div class="d-flex w-100 justify-content-between">
       <h5 class="mb-1">List group item heading</h5>
-      <small class="text-muted">3 days ago</small>
+      <small class="text-body-secondary">3 days ago</small>
     </div>
     <p class="mb-1">Some placeholder content in a paragraph.</p>
-    <small class="text-muted">And some muted small print.</small>
+    <small class="text-body-secondary">And some muted small print.</small>
   </a>
 </div>
 {{< /example >}}

diff --git a/site/content/docs/5.3/components/modal.md b/site/content/docs/5.3/components/modal.md
@@ -633,7 +633,7 @@ Modals have three optional sizes, available via modifier classes to be placed on
 | Size | Class | Modal max-width
 | --- | --- | --- |
 | Small | `.modal-sm` | `300px` |
-| Default | <span class="text-muted">None</span> | `460px` |
+| Default | <span class="text-body-secondary">None</span> | `460px` |
 | Large | `.modal-lg` | `700px` |
 | Extra large | `.modal-xl` | `940px` |
 {{< /bs-table >}}

diff --git a/site/content/docs/5.3/components/navbar.md b/site/content/docs/5.3/components/navbar.md
@@ -513,7 +513,7 @@ Sometimes you want to use the collapse plugin to trigger a container element for
 <div class="collapse" id="navbarToggleExternalContent">
   <div class="bg-dark p-4">
     <h5 class="text-white h4">Collapsed content</h5>
-    <span class="text-muted">Toggleable via the navbar brand.</span>
+    <span class="text-body-secondary">Toggleable via the navbar brand.</span>
   </div>
 </div>
 <nav class="navbar navbar-dark bg-dark">

diff --git a/site/content/docs/5.3/components/tooltips.md b/site/content/docs/5.3/components/tooltips.md
@@ -298,19 +298,19 @@ tooltip.setContent({ '.tooltip-inner': 'another title' })
 ```
 
 {{< callout info >}}
-The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the popover template, and each related property-value can be `string` | `element` | `function` | `null`
+The `setContent` method accepts an `object` argument, where each property-key is a valid `string` selector within the tooltip template, and each related property-value can be `string` | `element` | `function` | `null`
 {{< /callout >}}
 
 ### Events
 
 {{< bs-table >}}
 | Event | Description |
 | --- | --- |
-| `hidden.bs.tooltip` | This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). |
+| `hidden.bs.tooltip` | This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete). |
 | `hide.bs.tooltip` | This event is fired immediately when the `hide` instance method has been called. |
 | `inserted.bs.tooltip` | This event is fired after the `show.bs.tooltip` event when the tooltip template has been added to the DOM. |
 | `show.bs.tooltip` | This event fires immediately when the `show` instance method is called. |
-| `shown.bs.tooltip` | This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). |
+| `shown.bs.tooltip` | This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete). |
 {{< /bs-table >}}
 
 ```js