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

Make .bg-{color}-subtle work with .bg-opacity-{value} #39235

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Make .bg-{color}-subtle work with .bg-opacity-{value} #39235

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
20 changes: 12 additions & 8 deletions scss/_maps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ $theme-colors-bg-subtle: (
) !default;
// scss-docs-end theme-bg-subtle-map

$theme-colors-bg-subtle-rgb: map-loop($theme-colors-bg-subtle, to-rgb, "$value") !default;

// scss-docs-start theme-border-subtle-map
$theme-colors-border-subtle: (
"primary": $primary-border-subtle,
Expand All @@ -48,6 +50,7 @@ $theme-colors-border-subtle: (
$theme-colors-text-dark: null !default;
$theme-colors-bg-subtle-dark: null !default;
$theme-colors-border-subtle-dark: null !default;
$theme-colors-bg-subtle-rgb-dark: null !default;

@if $enable-dark-mode {
// scss-docs-start theme-text-dark-map
Expand Down Expand Up @@ -134,15 +137,16 @@ $utilities-bg: map-merge(
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;

$utilities-bg-subtle: (
"primary-subtle": var(--#{$prefix}primary-bg-subtle),
"secondary-subtle": var(--#{$prefix}secondary-bg-subtle),
"success-subtle": var(--#{$prefix}success-bg-subtle),
"info-subtle": var(--#{$prefix}info-bg-subtle),
"warning-subtle": var(--#{$prefix}warning-bg-subtle),
"danger-subtle": var(--#{$prefix}danger-bg-subtle),
"light-subtle": var(--#{$prefix}light-bg-subtle),
"dark-subtle": var(--#{$prefix}dark-bg-subtle)
"primary-subtle": rgba(var(--#{$prefix}primary-bg-subtle), var(--#{$prefix}bg-opacity)),
"secondary-subtle": rgba(var(--#{$prefix}secondary-bg-subtle), var(--#{$prefix}bg-opacity)),
"success-subtle": rgba(var(--#{$prefix}success-bg-subtle), var(--#{$prefix}bg-opacity)),
"info-subtle": rgba(var(--#{$prefix}info-bg-subtle), var(--#{$prefix}bg-opacity)),
"warning-subtle": rgba(var(--#{$prefix}warning-bg-subtle), var(--#{$prefix}bg-opacity)),
"danger-subtle": rgba(var(--#{$prefix}danger-bg-subtle), var(--#{$prefix}bg-opacity)),
"light-subtle": rgba(var(--#{$prefix}light-bg-subtle), var(--#{$prefix}bg-opacity)),
"dark-subtle": rgba(var(--#{$prefix}dark-bg-subtle), var(--#{$prefix}bg-opacity))
) !default;
$theme-colors-bg-subtle-rgb-dark: map-loop($theme-colors-bg-subtle-dark, to-rgb, "$value") !default;
// scss-docs-end utilities-bg-colors

// scss-docs-start utilities-border-colors
Expand Down
4 changes: 2 additions & 2 deletions scss/_root.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
--#{$prefix}#{$color}-text-emphasis: #{$value};
}

@each $color, $value in $theme-colors-bg-subtle {
@each $color, $value in $theme-colors-bg-subtle-rgb {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}

Expand Down Expand Up @@ -156,7 +156,7 @@
--#{$prefix}#{$color}-text-emphasis: #{$value};
}

@each $color, $value in $theme-colors-bg-subtle-dark {
@each $color, $value in $theme-colors-bg-subtle-rgb-dark {
--#{$prefix}#{$color}-bg-subtle: #{$value};
}

Expand Down
13 changes: 8 additions & 5 deletions scss/_utilities.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -674,6 +674,14 @@ $utilities: map-merge(
)
)
),
"subtle-background-color": (
property: background-color,
class: bg,
local-vars: (
"bg-opacity": 1
),
values: $utilities-bg-subtle
),
"bg-opacity": (
css-var: true,
class: bg-opacity,
Expand All @@ -685,11 +693,6 @@ $utilities: map-merge(
100: 1
)
),
"subtle-background-color": (
property: background-color,
class: bg,
values: $utilities-bg-subtle
),
// scss-docs-end utils-bg-color
"gradient": (
property: background-image,
Expand Down
262 changes: 63 additions & 199 deletions site/content/docs/5.3/examples/album/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,206 +3,70 @@
title: Album example
---

<header data-bs-theme="dark">
<div class="collapse text-bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4>About</h4>
<p class="text-body-secondary">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4>Contact</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-white">Follow on Twitter</a></li>
<li><a href="#" class="text-white">Like on Facebook</a></li>
<li><a href="#" class="text-white">Email me</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
<strong>Album</strong>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>

<main>

<section class="py-5 text-center container">
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-light">Album example</h1>
<p class="lead text-body-secondary">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary my-2">Main call to action</a>
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
</p>
</div>
</div>
</section>

<div class="album py-5 bg-body-tertiary">
<div class="container">

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body">
<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 class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body">
<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 class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body">
<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 class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</div>

<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body">
<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 class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body">
<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 class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body">
<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 class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</div>
<div data-bs-theme="light" class="bg-white">
<div class="bg-secondary p-2 text-white">
This is default secondary background
</div>
<div class="bg-secondary p-2 text-white bg-opacity-75">
This is 75% opacity secondary background
</div>
<div class="bg-secondary p-2 text-dark bg-opacity-50">
This is 50% opacity secondary background
</div>
<div class="bg-secondary p-2 text-dark bg-opacity-25">
This is 25% opacity secondary background
</div>
<div class="bg-secondary p-2 text-dark bg-opacity-10">
This is 10% opacity secondary background
</div>

<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body">
<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 class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body">
<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 class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-sm">
{{< placeholder width="100%" height="225" background="#55595c" color="#eceeef" class="card-img-top" text="Thumbnail" >}}
<div class="card-body">
<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 class="d-flex justify-content-between align-items-center">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
<small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-secondary-subtle p-2 text-dark">
This is default secondary-subtle background
</div>
<div class="bg-secondary-subtle p-2 text-dark bg-opacity-75">
This is 75% opacity secondary-subtle background
</div>
<div class="bg-secondary-subtle p-2 text-dark bg-opacity-50">
This is 50% opacity secondary-subtle background
</div>
<div class="bg-secondary-subtle p-2 text-dark bg-opacity-25">
This is 25% opacity secondary-subtle background
</div>
<div class="bg-secondary-subtle p-2 text-dark bg-opacity-10">
This is 10% opacity secondary-subtle background
</div>
</div>

</main>
<div data-bs-theme="dark" class="bg-dark">
<div class="bg-secondary p-2 text-white">
This is default secondary background
</div>
<div class="bg-secondary p-2 text-white bg-opacity-75">
This is 75% opacity secondary background
</div>
<div class="bg-secondary p-2 text-dark bg-opacity-50">
This is 50% opacity secondary background
</div>
<div class="bg-secondary p-2 text-dark bg-opacity-25">
This is 25% opacity secondary background
</div>
<div class="bg-secondary p-2 text-dark bg-opacity-10">
This is 10% opacity secondary background
</div>

<footer class="text-body-secondary py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">Back to top</a>
</p>
<p class="mb-1">Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>
<p class="mb-0">New to Bootstrap? <a href="/">Visit the homepage</a> or read our <a href="{{< docsref "/getting-started/introduction" >}}">getting started guide</a>.</p>
</div>
</footer>
<div class="bg-secondary-subtle p-2 text-white">
This is default secondary-subtle background
</div>
<div class="bg-secondary-subtle p-2 text-white bg-opacity-75">
This is 75% opacity secondary-subtle background
</div>
<div class="bg-secondary-subtle p-2 text-white bg-opacity-50">
This is 50% opacity secondary-subtle background
</div>
<div class="bg-secondary-subtle p-2 text-white bg-opacity-25">
This is 25% opacity secondary-subtle background
</div>
<div class="bg-secondary-subtle p-2 text-white bg-opacity-10">
This is 10% opacity secondary-subtle background
</div>
</div>