jekyll-theme-petridish 3.0 → 3.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 267d6da8663223b23d3b86d562a47d4b3f92c20a3601ec1114a02c06d2b29939
-  data.tar.gz: f1ae8acb9a10cf6c1baac0b7138ae8d3e246d8388c2740e43fbd001c4b8dff50
+  metadata.gz: 3aaf468f4141561084511eb4d2b4fe93fa5a1f5a58619868b2a1a0d2c5b84690
+  data.tar.gz: a45ae460692ef2f6b44f166b419539d80910e5cdb8a337fa26e11cd8666748ce
 SHA512:
-  metadata.gz: 1c131505d5dd161858910c7e18b7cdee1bf23294226a1c3f3a19db4598739223d948adace2145124a21c648acd87ec12811a85ced6a974cfb444358c7eec0536
-  data.tar.gz: c87726cdc714bd6045f15d97d1e315f4d69c176e5f6cfb7c97648e7da7f0179aee8e38d5bcadecedc52d9085989736fdc44ecc2d66f093f0de375b34a77012b2
+  metadata.gz: 2c5d2dbaabc1806ae4d9cf7a0af93c9e8cd2d6ebf00a6614bc9ad4c64afa3762171335d5383176dbc0fa81c71d3329da59e87f3467266db8c99a2df03e8edb8d
+  data.tar.gz: 2f949801f1790ab1b102320d291d0610eb586574886b31199cd67b04087d20ad9cdedd812980656b3f66a7cb82f468a6ee17f9d42295e2e884faadd5c8398618

data/_config.yml

@@ -8,15 +8,16 @@ baseurl: "/petridish"                   # Only required if your site is in a dir
 # SOCIAL PROFILES
 social:
   email: name@example.com
-  twitter: peterdesmet
-  github: github_username               # Can also be a github_username/repository
+  bluesky: bluesky_username.bsky.social
   mastodon: https://mastodon.social/@mastodon_username
-  facebook:                             # A URL
+  twitter: twitter_username
+  linkedin: https://linkedin.com/company/project_name/
+  facebook: https://facebook.com/groups/group_id/
+  github: github_username               # Can also be a github_username/repository
   disqus: disqus_sitename               # Enable Disqus comments from disqus_sitename.disqus.com
 
 # THEME SETTINGS (ALL OPTIONAL)
 posts_on_home: 3                        # Show x number of latest posts on homepage, can be 0
-tweets_on_home: true                    # Show Twitter feed of social.twitter on homepage
 archive_permalink: /blog/               # Permalink of page using the archive.html layout, required when using post tags
 github_edit: true                       # Show an "edit this page" link in the footer, can also be name of branch (default: main)
 colors:

data/_data/team.yml

@@ -8,8 +8,10 @@
   orcid: 0000-0000-0000-0000
   researchgate: researchgate_username
   googlescholar: googlescholar_username
-  twitter: twitter_username
+  bluesky: bluesky_username.bsky.social
   mastodon: https://mastodon.social/@mastodon_username
+  twitter: twitter_username
+  linkedin: linkedin_username
   github: github_username
   email: name@example.com
 

data/_includes/footer.html

@@ -1,70 +1,92 @@
-<footer>
+<footer class="d-print-none">
   <div class="container">
     <div class="row">
       {% if site.social %}
         <div class="col-lg">
           <ul class="list-inline">
             {% if site.social.email %}
-              <li class="list-inline-item">
+              <li class="list-inline-item mb-2">
                 <a href="mailto:{{ site.social.email }}">
                   <span class="fa-stack fa-lg">
-                    <i class="fas fa-circle fa-stack-2x"></i>
-                    <i class="far fa-envelope fa-stack-1x fa-inverse"></i>
+                    <i class="fa-solid fa-circle fa-stack-2x"></i>
+                    <i class="fa-regular fa-envelope fa-stack-1x fa-inverse"></i>
                   </span>
                 </a>
               </li>
             {% endif %}
 
-            {% if site.social.twitter %}
-              <li class="list-inline-item">
-                <a href="https://twitter.com/{{ site.social.twitter }}">
+            {% if site.social.bluesky %}
+              <li class="list-inline-item mb-2">
+                <a href="https://bsky.app/profile/{{ site.social.bluesky }}">
                   <span class="fa-stack fa-lg">
-                    <i class="fas fa-circle fa-stack-2x"></i>
-                    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
+                    <i class="fa-solid fa-circle fa-stack-2x"></i>
+                    <i class="fa-brands fa-bluesky fa-stack-1x fa-inverse"></i>
                   </span>
                 </a>
               </li>
             {% endif %}
 
             {% if site.social.mastodon %}
-              <li class="list-inline-item">
+              <li class="list-inline-item mb-2">
                 <a rel="me" href="{{ site.social.mastodon }}">
                   <span class="fa-stack fa-lg">
-                    <i class="fas fa-circle fa-stack-2x"></i>
-                    <i class="fab fa-mastodon fa-stack-1x fa-inverse"></i>
+                    <i class="fa-solid fa-circle fa-stack-2x"></i>
+                    <i class="fa-brands fa-mastodon fa-stack-1x fa-inverse"></i>
+                  </span>
+                </a>
+              </li>
+            {% endif %}
+
+            {% if site.social.twitter %}
+              <li class="list-inline-item mb-2">
+                <a href="https://twitter.com/{{ site.social.twitter }}">
+                  <span class="fa-stack fa-lg">
+                    <i class="fa-solid fa-circle fa-stack-2x"></i>
+                    <i class="fa-brands fa-x-twitter fa-stack-1x fa-inverse"></i>
+                  </span>
+                </a>
+              </li>
+            {% endif %}
+
+            {% if site.social.linkedin %}
+              <li class="list-inline-item mb-2">
+                <a href="{{ site.social.linkedin }}">
+                  <span class="fa-stack fa-lg">
+                    <i class="fa-solid fa-circle fa-stack-2x"></i>
+                    <i class="fa-brands fa-linkedin fa-stack-1x fa-inverse"></i>
                   </span>
                 </a>
               </li>
             {% endif %}
 
             {% if site.social.facebook %}
-              <li class="list-inline-item">
-                <a red="me" href="{{ site.social.facebook }}">
+              <li class="list-inline-item mb-2">
+                <a href="{{ site.social.facebook }}">
                   <span class="fa-stack fa-lg">
-                    <i class="fas fa-circle fa-stack-2x"></i>
-                    <i class="fab fa-facebook fa-stack-1x fa-inverse"></i>
+                    <i class="fa-solid fa-circle fa-stack-2x"></i>
+                    <i class="fa-brands fa-facebook fa-stack-1x fa-inverse"></i>
                   </span>
                 </a>
               </li>
             {% endif %}
 
             {% if site.social.github %}
-              <li class="list-inline-item">
+              <li class="list-inline-item mb-2">
                 <a href="https://github.com/{{ site.social.github }}">
                   <span class="fa-stack fa-lg">
-                    <i class="fas fa-circle fa-stack-2x"></i>
-                    <i class="fab fa-github fa-stack-1x fa-inverse"></i>
+                    <i class="fa-solid fa-circle fa-stack-2x"></i>
+                    <i class="fa-brands fa-github fa-stack-1x fa-inverse"></i>
                   </span>
                 </a>
               </li>
             {% endif %}
 
             {% if site.archive_permalink %}
-              <li class="list-inline-item">
+              <li class="list-inline-item mb-2">
                 <a href="{{ '/feed.xml' | absolute_url }}">
                   <span class="fa-stack fa-lg">
-                    <i class="fas fa-circle fa-stack-2x"></i>
-                    <i class="fas fa-rss fa-stack-1x fa-inverse"></i>
+                    <i class="fa-solid fa-circle fa-stack-2x"></i>
+                    <i class="fa-solid fa-rss fa-stack-1x fa-inverse"></i>
                   </span>
                 </a>
               </li>
@@ -106,7 +128,7 @@
         {% endif %}
         <p>
           <a href="{{ site.github.repository_url }}/edit/{{ branch }}/{{ page.path }}">
-            <i class="fas fa-edit"></i> Edit this page
+            <i class="fa-solid fa-pen-to-square"></i> Edit this page
           </a>
         </p>
       {% endif %}

data/_includes/head.html

@@ -53,16 +53,16 @@
   {% endif %}
 
   <link rel="icon" type="image/x-icon" href="{{ '/favicon.ico' | absolute_url }}">
-  <!-- Bootstrap CSS is included in main.css -->
+  <link rel="alternate" type="application/rss+xml" title="{{ site.title }} - RSS feed" href="{{ '/feed.xml' | absolute_url }}" >
+  <!-- CSS: Bootstrap CSS is included in main.css -->
   <link rel="stylesheet" href="{{ '/assets/theme/css/main.css' | relative_url }}">
-  <link rel="stylesheet" href="{{ '/assets/theme/css/fontawesome-all.min.css' | relative_url }}">
-  <link rel="stylesheet" href="{{ '/assets/theme/css/academicons.min.css' | relative_url }}">
   <link rel="stylesheet" href="{{ '/assets/theme/css/pygments.css' | relative_url }}">
+  <!-- Fonts -->
+  <link rel="stylesheet" href="{{ '/assets/theme/css/fontawesome-all.min.css' | relative_url }}">
   {% if site.font_serif != false %}
     <link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i&display=swap" rel="stylesheet">
   {% endif %}
-  <link rel="alternate" type="application/rss+xml" title="{{ site.title }} - RSS feed" href="{{ '/feed.xml' | absolute_url }}" >
-  <!-- Javascript libraries: loaded at top so templates can use these -->
+  <!-- Javascript: loaded here so they are available in templates -->
   <script src="{{ '/assets/theme/js/jquery.min.js' | relative_url }}"></script>
   <script src="{{ '/assets/theme/js/popper.min.js' | relative_url }}"></script>
   <script src="{{ '/assets/theme/js/bootstrap.min.js' | relative_url }}"></script>

data/_includes/header.html

@@ -31,7 +31,7 @@
       </div>
     </div>
     {% if page.background.img and page.background.by %}
-      <div class="caption">
+      <div class="caption d-print-none">
         {% if page.background.href %}
           Image by <a href="{{ page.background.href }}">{{ page.background.by }}</a>
         {% else %}

data/_includes/navbar.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light" id="main-nav">
+<nav class="navbar navbar-expand-lg navbar-light bg-light d-print-none" id="main-nav">
   <div class="container">
     <a class="navbar-brand d-flex align-items-center" href="{{'/' | relative_url }}">
       {% if site.logo %}
@@ -13,7 +13,7 @@
     {% endif %}
     {% if navigation %}
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
-        Menu <i class="fas fa-bars"></i>
+        Menu <i class="fa-solid fa-bars"></i>
       </button>
       <div class="collapse navbar-collapse" id="navbar-menu">
         <ul class="navbar-nav ms-auto">

data/_layouts/home.html

@@ -1,39 +1,17 @@
 ---
-layout: base
+layout: default
 description: Template for homepage.
 remark: See also page.layout == 'home' in head.html and header.html.
 ---
 
-{% if site.tweets_on_home and site.social.twitter %}
-  {% assign two_col = true %}
-{% endif %}
-
-<div class="row">
-  <div class="{% if two_col %}col{% else %}col-md-10 col-lg-8 mx-auto{% endif %}">
-    <div class="row">
-      <div class="col">
-
-        {{ content }}
-
-      </div>
-
-      {% if two_col %}
-        <div class="col-lg-4">
-          <a class="twitter-timeline" data-height="500" data-link-color="{{ site.colors.links }}" href="https://twitter.com/{{ site.social.twitter }}?ref_src=twsrc%5Etfw">
-            Tweets by {{ site.social.twitter }}
-          </a>
-          <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-        </div>
-      {% endif %}
-    </div>
+{{ content }}
     
-    {% if site.posts_on_home > 0 %}
-      <div class="row cards mt-4">
-        {% for item in site.posts limit:site.posts_on_home %}
-          <div class="col-md-6{% if two_col %} col-lg-4{% endif %}">
-            {% include card.html %}
-          </div>
-        {% endfor %}
+{% if site.posts_on_home > 0 %}
+  <div class="row cards mt-4">
+    {% for item in site.posts limit:site.posts_on_home %}
+      <div class="col-md-6{% if two_col %} col-lg-4{% endif %}">
+        {% include card.html %}
       </div>
-    {% endif %}
-</div>
+    {% endfor %}
+  </div>
+{% endif %}

data/_layouts/team.html

@@ -31,43 +31,55 @@ description: Template for team page.
       <ul class="list-inline">
         {% if member.orcid %}
           <li class="list-inline-item">
-            <a href="https://orcid.org/{{ member.orcid }}"><i class="ai ai-orcid"></i></a>
+            <a href="https://orcid.org/{{ member.orcid }}"><i class="fa-brands fa-orcid"></i></a>
           </li>
         {% endif %}
 
         {% if member.researchgate %}
           <li class="list-inline-item">
-            <a href="https://researchgate.net/profile/{{ member.researchgate }}"><i class="ai ai-researchgate"></i></a>
+            <a href="https://researchgate.net/profile/{{ member.researchgate }}"><i class="fa-brands fa-researchgate"></i></a>
           </li>
         {% endif %}
         
         {% if member.googlescholar %}
           <li class="list-inline-item">
-            <a href="https://scholar.google.com/citations?user={{ member.googlescholar }}"><i class="ai ai-google-scholar"></i></a>
+            <a href="https://scholar.google.com/citations?user={{ member.googlescholar }}"><i class="fa-brands fa-google-scholar"></i></a>
           </li>
         {% endif %}
 
-        {% if member.twitter %}
+        {% if member.bluesky %}
           <li class="list-inline-item">
-            <a href="https://twitter.com/{{ member.twitter }}"><i class="fab fa-twitter"></i></a>
+            <a href="https://bsky.app/profile/{{ member.bluesky }}"><i class="fa-brands fa-bluesky"></i></a>
           </li>
         {% endif %}
 
         {% if member.mastodon %}
           <li class="list-inline-item">
-            <a href="{{ member.mastodon }}"><i class="fab fa-mastodon"></i></a>
+            <a href="{{ member.mastodon }}"><i class="fa-brands fa-mastodon"></i></a>
+          </li>
+        {% endif %}
+
+        {% if member.twitter %}
+          <li class="list-inline-item">
+            <a href="https://twitter.com/{{ member.twitter }}"><i class="fa-brands fa-x-twitter"></i></a>
+          </li>
+        {% endif %}
+
+        {% if member.linkedin %}
+          <li class="list-inline-item">
+            <a href="https://linkedin.com/in/{{ member.linkedin }}"><i class="fa-brands fa-linkedin"></i></a>
           </li>
         {% endif %}
 
         {% if member.github %}
           <li class="list-inline-item">
-            <a href="https://github.com/{{ member.github }}"><i class="fab fa-github"></i></a>
+            <a href="https://github.com/{{ member.github }}"><i class="fa-brands fa-github"></i></a>
           </li>
         {% endif %}
 
         {% if member.email %}
           <li class="list-inline-item">
-            <a href="mailto:{{ member.email }}"><i class="far fa-envelope"></i></a>
+            <a href="mailto:{{ member.email }}"><i class="fa-regular fa-envelope"></i></a>
           </li>
         {% endif %}
       </ul>

data/_sass/bootstrap/_accordion.scss

@@ -2,43 +2,69 @@
 // Base styles
 //
 
+.accordion {
+  // scss-docs-start accordion-css-vars
+  --#{$prefix}accordion-color: #{$accordion-color};
+  --#{$prefix}accordion-bg: #{$accordion-bg};
+  --#{$prefix}accordion-transition: #{$accordion-transition};
+  --#{$prefix}accordion-border-color: #{$accordion-border-color};
+  --#{$prefix}accordion-border-width: #{$accordion-border-width};
+  --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
+  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
+  --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
+  --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
+  --#{$prefix}accordion-btn-color: #{$accordion-button-color};
+  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
+  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
+  --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
+  --#{$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-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};
+  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
+  --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
+  // scss-docs-end accordion-css-vars
+}
+
 .accordion-button {
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
-  padding: $accordion-button-padding-y $accordion-button-padding-x;
+  padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
   @include font-size($font-size-base);
-  color: $accordion-button-color;
+  color: var(--#{$prefix}accordion-btn-color);
   text-align: left; // Reset button style
-  background-color: $accordion-button-bg;
+  background-color: var(--#{$prefix}accordion-btn-bg);
   border: 0;
   @include border-radius(0);
   overflow-anchor: none;
-  @include transition($accordion-transition);
+  @include transition(var(--#{$prefix}accordion-transition));
 
   &:not(.collapsed) {
-    color: $accordion-button-active-color;
-    background-color: $accordion-button-active-bg;
-    box-shadow: inset 0 ($accordion-border-width * -1) 0 $accordion-border-color;
+    color: var(--#{$prefix}accordion-active-color);
+    background-color: var(--#{$prefix}accordion-active-bg);
+    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
 
     &::after {
-      background-image: escape-svg($accordion-button-active-icon);
-      transform: $accordion-icon-transform;
+      background-image: var(--#{$prefix}accordion-btn-active-icon);
+      transform: var(--#{$prefix}accordion-btn-icon-transform);
     }
   }
 
   // Accordion icon
   &::after {
     flex-shrink: 0;
-    width: $accordion-icon-width;
-    height: $accordion-icon-width;
+    width: var(--#{$prefix}accordion-btn-icon-width);
+    height: var(--#{$prefix}accordion-btn-icon-width);
     margin-left: auto;
     content: "";
-    background-image: escape-svg($accordion-button-icon);
+    background-image: var(--#{$prefix}accordion-btn-icon);
     background-repeat: no-repeat;
-    background-size: $accordion-icon-width;
-    @include transition($accordion-icon-transition);
+    background-size: var(--#{$prefix}accordion-btn-icon-width);
+    @include transition(var(--#{$prefix}accordion-btn-icon-transition));
   }
 
   &:hover {
@@ -47,9 +73,8 @@
 
   &:focus {
     z-index: 3;
-    border-color: $accordion-button-focus-border-color;
     outline: 0;
-    box-shadow: $accordion-button-focus-box-shadow;
+    box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
   }
 }
 
@@ -58,14 +83,15 @@
 }
 
 .accordion-item {
-  background-color: $accordion-bg;
-  border: $accordion-border-width solid $accordion-border-color;
+  color: var(--#{$prefix}accordion-color);
+  background-color: var(--#{$prefix}accordion-bg);
+  border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
 
   &:first-of-type {
-    @include border-top-radius($accordion-border-radius);
+    @include border-top-radius(var(--#{$prefix}accordion-border-radius));
 
-    .accordion-button {
-      @include border-top-radius($accordion-inner-border-radius);
+    > .accordion-header .accordion-button {
+      @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
     }
   }
 
@@ -75,22 +101,22 @@
 
   // Only set a border-radius on the last item if the accordion is collapsed
   &:last-of-type {
-    @include border-bottom-radius($accordion-border-radius);
+    @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
 
-    .accordion-button {
+    > .accordion-header .accordion-button {
       &.collapsed {
-        @include border-bottom-radius($accordion-inner-border-radius);
+        @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
       }
     }
 
-    .accordion-collapse {
-      @include border-bottom-radius($accordion-border-radius);
+    > .accordion-collapse {
+      @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
     }
   }
 }
 
 .accordion-body {
-  padding: $accordion-body-padding-y $accordion-body-padding-x;
+  padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
 }
 
 
@@ -99,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);
@@ -111,8 +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)};
+    }
+  }
+}

data/_sass/bootstrap/_alert.scss

@@ -3,11 +3,25 @@
 //
 
 .alert {
+  // scss-docs-start alert-css-vars
+  --#{$prefix}alert-bg: transparent;
+  --#{$prefix}alert-padding-x: #{$alert-padding-x};
+  --#{$prefix}alert-padding-y: #{$alert-padding-y};
+  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
+  --#{$prefix}alert-color: inherit;
+  --#{$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;
-  padding: $alert-padding-y $alert-padding-x;
-  margin-bottom: $alert-margin-bottom;
-  border: $alert-border-width solid transparent;
-  @include border-radius($alert-border-radius);
+  padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
+  margin-bottom: var(--#{$prefix}alert-margin-bottom);
+  color: var(--#{$prefix}alert-color);
+  background-color: var(--#{$prefix}alert-bg);
+  border: var(--#{$prefix}alert-border);
+  @include border-radius(var(--#{$prefix}alert-border-radius));
 }
 
 // Headings for larger alerts
@@ -19,6 +33,7 @@
 // Provide class for links that match alerts
 .alert-link {
   font-weight: $alert-link-font-weight;
+  color: var(--#{$prefix}alert-link-color);
 }
 
 
@@ -41,17 +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

data/_sass/bootstrap/_badge.scss

@@ -4,16 +4,25 @@
 // `background-color`.
 
 .badge {
+  // scss-docs-start badge-css-vars
+  --#{$prefix}badge-padding-x: #{$badge-padding-x};
+  --#{$prefix}badge-padding-y: #{$badge-padding-y};
+  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
+  --#{$prefix}badge-font-weight: #{$badge-font-weight};
+  --#{$prefix}badge-color: #{$badge-color};
+  --#{$prefix}badge-border-radius: #{$badge-border-radius};
+  // scss-docs-end badge-css-vars
+
   display: inline-block;
-  padding: $badge-padding-y $badge-padding-x;
-  @include font-size($badge-font-size);
-  font-weight: $badge-font-weight;
+  padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
+  @include font-size(var(--#{$prefix}badge-font-size));
+  font-weight: var(--#{$prefix}badge-font-weight);
   line-height: 1;
-  color: $badge-color;
+  color: var(--#{$prefix}badge-color);
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  @include border-radius($badge-border-radius);
+  @include border-radius(var(--#{$prefix}badge-border-radius));
   @include gradient-bg();
 
   // Empty badges collapse automatically