Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs: Deprecate the Sass var and remove any occurence of the .text-muted #37890

Merged
merged 1 commit into from
Jan 16, 2023
Merged

Docs: Deprecate the Sass var and remove any occurence of the .text-muted #37890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion js/tests/visual/toast.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" aria-label="Close"></button>
</div>
<div class="toast-body">
Expand Down
2 changes: 1 addition & 1 deletion js/tests/visual/tooltip.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<div class="container">
<h1>Tooltip <small>Bootstrap 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>

Expand Down
2 changes: 1 addition & 1 deletion scss/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -583,7 +583,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),
Expand Down
8 changes: 5 additions & 3 deletions scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -667,7 +667,9 @@ $small-font-size: .875em !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;

Expand Down Expand Up @@ -740,7 +742,7 @@ $table-striped-columns-order: even !default;

$table-group-separator-color: currentcolor !default;

$table-caption-color: $text-muted !default;
$table-caption-color: var(--#{$prefix}secondary-color) !default;

$table-bg-scale: -80% !default;
// scss-docs-end table-variables
Expand Down Expand Up @@ -846,7 +848,7 @@ $form-text-margin-top: .25rem !default;
$form-text-font-size: $small-font-size !default;
$form-text-font-style: null !default;
$form-text-font-weight: null !default;
$form-text-color: $text-muted !default;
$form-text-color: var(--#{$prefix}secondary-color) !default;
// scss-docs-end form-text-variables

// scss-docs-start form-label-variables
Expand Down
2 changes: 1 addition & 1 deletion site/assets/scss/_search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
}

.DocSearch-Container {
--docsearch-muted-color: #{$text-muted};
--docsearch-muted-color: var(--bs-secondary-color);
--docsearch-hit-shadow: none;

z-index: 2000; // Make sure to be over all components showcased in the documentation
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/about/brand.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ Bootstrap should always be referred to as just **Bootstrap**. No capital _s_.
<strong class="text-success">Correct</strong>
</div>
<div class="bd-brand-item w-100 px-2 py-5">
<div class="h3 text-muted">BootStrap</div>
<div class="h3 text-body-secondary">BootStrap</div>
<strong class="text-danger">Incorrect</strong>
</div>
</div>
28 changes: 14 additions & 14 deletions site/content/docs/5.3/components/card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
Expand Down Expand Up @@ -191,7 +191,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
<div class="card-footer text-body-secondary">
2 days ago
</div>
</div>
Expand Down Expand Up @@ -358,14 +358,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">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">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>
Expand Down Expand Up @@ -404,7 +404,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">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>
Expand Down Expand Up @@ -487,23 +487,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">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">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">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>
Expand All @@ -520,7 +520,7 @@ When using card groups with footers, their content will automatically line up.
<p class="card-text">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>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
Expand All @@ -530,7 +530,7 @@ When using card groups with footers, their content will automatically line up.
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
Expand All @@ -540,7 +540,7 @@ When using card groups with footers, their content will automatically line up.
<p class="card-text">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>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
Expand Down Expand Up @@ -689,7 +689,7 @@ Just like with card groups, card footers will automatically line up.
<p class="card-text">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>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
Expand All @@ -701,7 +701,7 @@ Just like with card groups, card footers will automatically line up.
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
Expand All @@ -713,7 +713,7 @@ Just like with card groups, card footers will automatically line up.
<p class="card-text">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>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/components/dropdowns.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -841,7 +841,7 @@ Separate groups of related menu items with a divider.
Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width.

{{< 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>
Expand Down
8 changes: 4 additions & 4 deletions site/content/docs/5.3/components/list-group.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,18 +230,18 @@ Add nearly any HTML within, even for linked list groups like the one below, with
<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 >}}
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/components/modal.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -576,7 +576,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> | `500px` |
| Default | <span class="text-body-secondary">None</span> | `500px` |
| Large | `.modal-lg` | `800px` |
| Extra large | `.modal-xl` | `1140px` |
{{< /bs-table >}}
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/components/navbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -658,7 +658,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">
Expand Down
10 changes: 5 additions & 5 deletions site/content/docs/5.3/components/toasts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ Toasts are slightly translucent to blend in with what's below them.
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<small class="text-body-secondary">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Expand All @@ -127,7 +127,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<small class="text-body-secondary">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Expand All @@ -139,7 +139,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<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="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Expand Down Expand Up @@ -246,7 +246,7 @@ For systems that generate more notifications, consider using a wrapping element
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<small class="text-body-secondary">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Expand All @@ -258,7 +258,7 @@ For systems that generate more notifications, consider using a wrapping element
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<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="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Expand Down
2 changes: 1 addition & 1 deletion site/content/docs/5.3/content/typography.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ Use the included utility classes to recreate the small secondary heading text fr
{{< example >}}
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
<small class="text-body-secondary">With faded secondary text</small>
</h3>
{{< /example >}}

Expand Down
4 changes: 2 additions & 2 deletions site/content/docs/5.3/examples/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ aliases: "/examples/"
{{ $example.name }}
</a>
</h3>
<p class="text-muted">{{ $example.description }}</p>
<p class="text-body-secondary">{{ $example.description }}</p>
<p>
<a class="icon-link small link-secondary link-offset-1" href="https://stackblitz.com/github/twbs{{ $example.url }}?file=index.html" target="_blank">
<svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
Expand All @@ -52,7 +52,7 @@ aliases: "/examples/"
{{ $example.name }}
</h3>
</a>
<p class="text-muted">{{ $example.description }}</p>
<p class="text-body-secondary">{{ $example.description }}</p>
</div>
{{ end }}
{{ if (eq (add $i 1) $len) }}</div>{{ end }}
Expand Down
Loading