jekyll-theme-centos 2.3.0.beta.90 → 2.3.0.beta.91

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b23374c6e64b11d66e5e20f767d128015b8dfeee2cd4cf81217b03a58463f904
-  data.tar.gz: 5832f5ce931b527b6e53a87d23bd67a67c39664ad847b5bf4d85010de89e6254
+  metadata.gz: 10f8cbf3c7d57ab40a4ba9ce33c9f0f5ddf2816a2a34dbf4e325174813c21344
+  data.tar.gz: 2356865775cb3d61f5084216b1c24860d51da7386376798475be706af4fcd018
 SHA512:
-  metadata.gz: 31b67d7fbeb817727b85c191246929c817d014999afb79e84e79d79d8937cde9bd963e7f4f28c7a82e3d244e50c61529597150e9ada73ee1f2648ce651d30931
-  data.tar.gz: 9591ce5c224a1e694a46117997df422a10cb731c6eac5e62c3ea0871fd295f5ee1845c109ee398bda2630e046d77a24cf433b64a14fd18168b259406b31de8c3
+  metadata.gz: 14c7bf26767e9685acfc2eb7ccb9dc0483c71419b91b40554b9300fa416f12ea0f0f3b398f7427cff288a152731dd75a3eb50023da102c07f8ce0763c5aba1b2
+  data.tar.gz: 68625ef9e731b58b85fb33fe2ce2c498d083dbd02a7f5b05660286c72148b64cf41dedd027f257ad2d14dc6465bfcbc8a9c202b71d5cce56aac2710a85bd35b7

data/_data/{centos → base}/footer.yml

@@ -1,6 +1,6 @@
 ---
 #
-# site.data.centos.footer - Control footer section.
+# site.data.base.footer - Control footer section.
 #
 social:
   - name: Facebook

data/_data/{centos → base}/identity.yml

@@ -1,6 +1,6 @@
 ---
 #
-# site.data.centos.identity - Control the site branding (corporate visual
+# site.data.base.identity - Control the site branding (corporate visual
 # identity) information.
 #
 title: "The CentOS Project"

data/_data/{centos → base}/navbar.yml

@@ -1,6 +1,9 @@
 ---
 #
-# site.data.centos.navbar - Control top navigation bar
+# site.data.base.navbar - Control top navigation bar using relative links for
+# internal resources and absolute links for external resources. Useful when you
+# need the same site to be browsable on different environments (e.g., www and
+# www.dev).
 #
 - name: "Download"
   icon: "fas fa-download"

data/_data/base/navbar_absolute.yml

@@ -0,0 +1,74 @@
+---
+#
+# site.data.navbar_absolute - Control top navigation bar using absolute links
+# for both internal and external resources. Useful when you build the
+# navigation bar for sites other than "www.centos.org" website and you want to
+# keep references to "www.centos.org."
+#
+- name: "Download"
+  icon: "fas fa-download"
+  link: "https://www.centos.org/download"
+  menu: []
+  visible_on: ["navbar"]
+- name: "About"
+  icon: "fas fa-info-circle"
+  link: "#"
+  menu:
+    - name: "About CentOS"
+      link: "https://www.centos.org/about"
+    - name: "Frequently Asked Questions (FAQs)"
+      link: "https://wiki.centos.org/FAQ"
+    - name: "Special Interest Groups (SIGs)"
+      link: "https://wiki.centos.org/SpecialInterestGroups"
+    - name: "CentOS Variants"
+      link: "https://www.centos.org/variants"
+    - name: "Governance"
+      link: "https://www.centos.org/about/governance"
+  visible_on: ["navbar", "footer"]
+- name: "Community"
+  icon: "fas fa-users"
+  link: "#"
+  menu:
+    - name: "Contribute"
+      link: "https://wiki.centos.org/Contribute"
+      icon: "fas fa-hands-helping"
+    - name: "Forums"
+      link: "https://www.centos.org/forums/"
+      icon: "fas fa-comments"
+    - name: "Mailing Lists"
+      link: "https://wiki.centos.org/GettingHelp/ListInfo"
+      icon: "fas fa-envelope"
+    - name: "IRC"
+      link: "https://wiki.centos.org/irc"
+      icon: "fas fa-hashtag"
+    - name: "Calendar & IRC Meeting List"
+      link: "https://www.centos.org/community/calendar/"
+      icon: "fas fa-calendar-alt"
+    - name: "Planet"
+      link: "http://planet.centos.org/"
+      icon: "fas fa-newspaper"
+    - name: "Submit Bug"
+      link: "https://bugs.centos.org/"
+      icon: "fas fa-bug"
+  visible_on: ["navbar", "footer"]
+- name: "Documentation"
+  icon: "fas fa-book"
+  link: "#"
+  menu:
+    - name: "Wiki"
+      link: "https://wiki.centos.org/"
+    - name: "Manuals"
+      link: "https://docs.centos.org/"
+    - name: "GPG Key Info"
+      link: "https://www.centos.org/keys"
+  visible_on: ["navbar", "footer"]
+- name: "Help"
+  icon: "fas fa-life-ring"
+  link: "https://wiki.centos.org/Documentation?action=show&redirect=GettingHelp"
+  menu: []
+  visible_on: ["navbar"]
+- name: "Search"
+  icon: "fas fa-search"
+  link: "https://www.centos.org/search"
+  menu: []
+  visible_on: []

data/_data/base/navbar_component.yml

@@ -0,0 +1,60 @@
+---
+#
+# site.data.base.navbar_component - Control top navigation bar using relative
+# links specific to jekyll-theme-centos-base website component. Not used inside
+# CentOS websites. Used in website component presentation only.
+#
+
+- name: "Layouts"
+  icon: "fa-solid fa-layer-group"
+  link: "/layouts/"
+  menu:
+    - name: "base/default.html"
+      link: "/layouts/default/"
+  visible_on: ["navbar", "footer"]
+
+- name: "Includes"
+  icon: "fa-solid fa-arrows-turn-to-dots"
+  link: "/includes/"
+  menu:
+    - name: "base/announcements.html"
+      link: "/includes/announcements/"
+    - name: "base/breadcrumbs.html"
+      link: "/includes/breadcrumbs/"
+    - name: "base/head.html"
+      link: "/includes/head/"
+    - name: "base/header.html"
+      link: "/includes/header/"
+    - name: "base/navbar.html"
+      link: "/includes/navbar/"
+    - name: "base/toc-accordion.html"
+      link: "/includes/toc-accordion/"
+    - name: "base/toc.html"
+      link: "/includes/toc/"
+  visible_on: ["navbar", "footer"]
+
+- name: "Sass"
+  icon: "fa-brands fa-sass"
+  link: "/sass/"
+  menu:
+    - name: "base/variables.scss"
+      link: "/sass/variables"
+    - name: "base/centos.scss"
+      link: "/sass/centos"
+    - name: "base/centos-lists.scss"
+      link: "/sass/centos-lists"
+  visible_on: ["navbar", "footer"]
+
+- name: "Data"
+  icon: "fa-solid fa-file-code"
+  link: "/data/"
+  menu:
+    - name: "site.data.base.identity"
+      link: "/data/identity"
+    - name: "site.data.base.navbar"
+      link: "/data/navbar"
+    - name: "site.data.base.navbar_absolute"
+      link: "/data/navbar_absolute"
+    - name: "site.data.base.navbar_component"
+      link: "/data/navbar_component"
+  visible_on: ["navbar", "footer"]

data/_includes/{announcement.html → base/announcements.html}

@@ -1,6 +1,6 @@
 {% for alert in page.with_announcements -%}
 <div class="alert alert-{{ alert.color | default: 'primary' }} alert-dismissible fade show shadow" role="alert">
-  <strong>{{ alert.title | default: "" }}</strong> {{ alert.content | default: "" }}
+  <i class="{{ alert.icon | default: 'fa-solid fa-bullhorn' }}"></i> <strong>{{ alert.title | default: "" }}</strong> {{ alert.content | default: "" }}
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
 </div>
 {% endfor -%}

data/_includes/base/breadcrumbs.html

@@ -0,0 +1,13 @@
+<nav aria-label="breadcrumb">
+<ol class="breadcrumb">
+  {% assign crumbs = page.url | remove:'/index.html' | split: '/' %}
+  <li class="breadcrumb-item"><a href="{{ site.baseurl }}/">Home</a></li>
+  {% for crumb in crumbs offset: 1 %}
+  {% if forloop.last %}
+    <li class="breadcrumb-item active">{{ page.title }}</li>
+  {% else %}
+    <li class="breadcrumb-item"><a href="{{ site.baseurl }}{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' | replace:'without-plugin/','without-plugins/' }}{% endfor %}">{{ crumb | replace:'-',' ' | remove:'.html' | capitalize }}</a></li>
+  {% endif %}
+  {% endfor %}
+</ol>
+</nav>

data/_includes/base/footer.html

@@ -0,0 +1,61 @@
+{% assign navbar = site.data[site.navbar_data_dirname][site.navbar_data_filename] %}
+<footer class="footer small bg-dark text-light mt-3">
+  <div class="container">
+    <div class="row bg-primary justify-content-between">
+      {% assign sections = navbar | where: "visible_on", "footer" %}
+      {% assign columns = sections.size %}
+      {% case columns %}
+        {% when 1 %}
+          {% assign column_width = 12 %}
+        {% when 2 %}
+          {% assign column_width = 6 %}
+        {% when 3 %}
+          {% assign column_width = 4 %}
+        {% when 4 %}
+          {% assign column_width = 3 %}
+        {% else %}
+          {% assign column_width = 1 %}
+      {% endcase %}
+      {% for section in sections -%}
+      <div class="col-sm-12 col-lg-{{ column_width }} my-3">
+        <h6 class="fw-bold"><i class="{{ section.icon }}"></i> {{ section.name }}</h6>
+        <ul class="nav flex-column">
+          {% for item in section.menu -%}
+          <li class="nav-item"><a href="{{ site.baseurl }}{{ item.link }}" class="link-light px-0">{{ item.name }}</a></li>
+          {% endfor %}
+        </ul>
+      </div>
+      {% endfor %}
+    </div>
+
+    <div class="row  border-top border-secondary border-5">
+      <div class="col-sm-12 col-lg-8">
+        <h4 class="fw-bold pt-3">{{ site.title }}</h4>
+        <p>{{ site.description }}</p>
+      </div>
+      <div class="col-sm-12 col-lg-4 pt-lg-3 d-flex justify-content-sm-start justify-content-lg-end">
+        <ul class="nav list-unstyled">
+          {% for item in site.data.base.footer.social -%}
+          <li class="nav-item">
+            <a class="btn btn-sm fs-5 link-primary" href="{{ site.baseurl }}{{ item.link }}" role="button" aria-label="{{ item.name }}" data-bs-placement="bottom" data-bs-title="{{ item.name }}"><i class="{{ item.icon }}"></i></a>
+          </li>
+          {% endfor %}
+        </ul>
+      </div>
+    </div>
+
+    <div class="row py-3">
+      <div class="col">
+        <span>Copyright &copy;</span>
+        <span id="copyright_year"></span>
+        <span>{{ site.data.base.footer.copyright.author }}</span>
+        {% for item in site.data.base.footer.copyright.legals -%}
+        <span class="border-start ms-2 ps-2">
+          <a class="link-light" href="{{ site.baseurl }}{{ item.link }}">{{ item.text }}</a>
+        </span>
+        {% endfor %}
+      </div>
+    </div>
+
+  </div>
+</footer>

data/_includes/{header.html → base/header.html}

@@ -3,7 +3,7 @@
     {% if page.with_announcements and page.with_announcements.size > 0 -%}
     <div class="row">
       <div class="col">
-        {% include announcement.html %}
+        {% include base/announcements.html %}
       </div>
     </div>
     {% endif -%}

data/_includes/base/navbar.html

@@ -0,0 +1,32 @@
+{% assign navbar = site.data[site.navbar_data_dirname][site.navbar_data_filename] %}
+<header class="site-header sticky-top">
+  <nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow">
+    <div class="container">
+      <a class="navbar-brand pt-1" href="{{ site.baseurl }}/"><img role="img" src="{{ site.baseurl }}/{{ site.data.base.identity.logo.navbar }}" height="32" alt="{{ site.title }}" />{% if site.manifestation != "" %}<span class="manifestation border-start border-light ps-3 ms-3 py-2 fs-6">{{ site.manifestation }}</span>{% endif %}</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarContent">
+        <ul class="navbar-nav mr-auto">
+          {% assign navitems = navbar | where: "visible_on", "navbar" -%}
+          {% for navitem in navitems -%}
+          {% if navitem.menu.size == 0 -%}
+          <li class="nav-item">
+            <a class="nav-link" role="presentation" href="{{ site.baseurl }}{{ navitem.link }}"><i class="{{ navitem.icon }}"></i> {{ navitem.name }}</a>
+          </li>
+          {% else -%}
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-{{ forloop.index }}" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="{{ navitem.icon }}"></i> {{ navitem.name }}</a>
+            <ul class="dropdown-menu dropdown-menu-dark shadow" aria-labelledby="navbarDropdown-{{ forloop.index }}">
+              {% for dropdownitem in navitem.menu -%}
+              <li><a class="dropdown-item" role="presentation" href="{{ site.baseurl }}{{ dropdownitem.link }}">{{ dropdownitem.name }}</a></li>
+              {% endfor -%}
+            </ul>
+          </li>
+          {% endif -%}
+          {% endfor -%}
+        </ul>
+      </div>
+    </div>
+  </nav>
+</header>

data/_includes/{toc-accordion.html → base/toc-accordion.html}

@@ -4,7 +4,7 @@
       <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"><i class="fa-solid fa-bars"></i> <span class="mx-3">Table of Contents</span></button>
     </div>
     <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#pageTocAccordion">
-      <div class="accordion-body">{% include toc.html html=content %}</div>
+      <div class="accordion-body">{% include base/toc.html html=content %}</div>
     </div>
   </div>
 </div>

data/_layouts/{default.html → base/default.html}

@@ -1,28 +1,31 @@
 <!DOCTYPE html>
 <html lang="{{ page.lang | default: 'en' }}">
-  {% include head.html title=page.title -%}
+  {% include base/head.html title=page.title -%}
 
   <body id="top">
-    {% include navbar.html -%}
+    {% include base/navbar.html -%}
     <main>
-      {% include header.html -%}
+      {% include base/header.html -%}
       <div class="container py-5">
+        {% if page.with_breadcrumbs %}
         <div class="row justify-content-center">
           <div class="col-sm-12 col-xl-8">
-            {% include breadcrumbs.html %}
+            {% include base/breadcrumbs.html %}
           </div>
         </div>
+        {% endif %}
+        {% if page.with_toc %}
         <div class="row my-3 justify-content-center">
-          {% if page.with_toc %}
-          <div class="col-sm-12 col-xl-8">{% include toc-accordion.html %}</div>
-          {% endif %}
+          <div class="col-sm-12 col-xl-8">{% include base/toc-accordion.html %}</div>
         </div>
+        {% endif %}
         <div class="row my-5 justify-content-center">
           <div class="col-sm-12 col-xl-8">{{ content }}</div>
         </div>
       </div>
     </main>
-    {% include footer.html %}
-    {% include script.html %}
+
+    {% include base/footer.html %}
+    {% include base/script.html %}
   </body>
 </html>

data/_sass/{centos/_adjustments.scss → base/_centos.scss}

@@ -59,6 +59,14 @@ main {
   }
 }
 
+header {
+  .navbar-brand {
+    .manifestation {
+      --bs-border-opacity: 0.5;
+    }
+  }
+}
+
 footer,
 .accordion-body {
   a {

data/_sass/{centos → base}/_variables.scss

@@ -20,3 +20,5 @@ $font-family-sans-serif: Montserrat, system-ui, -apple-system, "Segoe UI", Robot
 $font-family-monospace: "Overpass Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 $line-height-base: 1.75;
 $headings-font-weight: 700;
+$breadcrumb-divider-color: #6c757d;
+$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='#{$breadcrumb-divider-color}'/></svg>");

data/_sass/bootstrap/_accordion.scss

@@ -147,3 +147,12 @@
     }
   }
 }
+
+@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

@@ -12,6 +12,7 @@
   --#{$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;
@@ -32,6 +33,7 @@
 // Provide class for links that match alerts
 .alert-link {
   font-weight: $alert-link-font-weight;
+  color: var(--#{$prefix}alert-link-color);
 }
 
 
@@ -54,18 +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/_button-group.scss

@@ -39,7 +39,7 @@
   // Prevent double borders when buttons are next to each other
   > :not(.btn-check:first-child) + .btn,
   > .btn-group:not(:first-child) {
-    margin-left: -$btn-border-width;
+    margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners
@@ -126,7 +126,7 @@
 
   > .btn:not(:first-child),
   > .btn-group:not(:first-child) {
-    margin-top: -$btn-border-width;
+    margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners

data/_sass/bootstrap/_buttons.scss

@@ -10,7 +10,7 @@
   @include rfs($btn-font-size, --#{$prefix}btn-font-size);
   --#{$prefix}btn-font-weight: #{$btn-font-weight};
   --#{$prefix}btn-line-height: #{$btn-line-height};
-  --#{$prefix}btn-color: #{$body-color};
+  --#{$prefix}btn-color: #{$btn-color};
   --#{$prefix}btn-bg: transparent;
   --#{$prefix}btn-border-width: #{$btn-border-width};
   --#{$prefix}btn-border-color: transparent;
@@ -169,8 +169,8 @@
   --#{$prefix}btn-active-border-color: transparent;
   --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
   --#{$prefix}btn-disabled-border-color: transparent;
-  --#{$prefix}btn-box-shadow: none;
-  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
+  --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($link-color), $link-color, 15%))};
 
   text-decoration: $link-decoration;
   @if $enable-gradients {

data/_sass/bootstrap/_card.scss

@@ -7,6 +7,8 @@
   --#{$prefix}card-spacer-y: #{$card-spacer-y};
   --#{$prefix}card-spacer-x: #{$card-spacer-x};
   --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
+  --#{$prefix}card-title-color: #{$card-title-color};
+  --#{$prefix}card-subtitle-color: #{$card-subtitle-color};
   --#{$prefix}card-border-width: #{$card-border-width};
   --#{$prefix}card-border-color: #{$card-border-color};
   --#{$prefix}card-border-radius: #{$card-border-radius};
@@ -28,6 +30,7 @@
   flex-direction: column;
   min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
   height: var(--#{$prefix}card-height);
+  color: var(--#{$prefix}body-color);
   word-wrap: break-word;
   background-color: var(--#{$prefix}card-bg);
   background-clip: border-box;
@@ -73,11 +76,13 @@
 
 .card-title {
   margin-bottom: var(--#{$prefix}card-title-spacer-y);
+  color: var(--#{$prefix}card-title-color);
 }
 
 .card-subtitle {
   margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
   margin-bottom: 0;
+  color: var(--#{$prefix}card-subtitle-color);
 }
 
 .card-text:last-child {

data/_sass/bootstrap/_carousel.scss

@@ -165,7 +165,6 @@
   margin-right: $carousel-control-width;
   margin-bottom: 1rem;
   margin-left: $carousel-control-width;
-  list-style: none;
 
   [data-bs-target] {
     box-sizing: content-box;
@@ -210,7 +209,7 @@
 
 // Dark mode carousel
 
-.carousel-dark {
+@mixin carousel-dark() {
   .carousel-control-prev-icon,
   .carousel-control-next-icon {
     filter: $carousel-dark-control-icon-filter;
@@ -224,3 +223,22 @@
     color: $carousel-dark-caption-color;
   }
 }
+
+.carousel-dark {
+  @include carousel-dark();
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    @if $color-mode-type == "media-query" {
+      .carousel {
+        @include carousel-dark();
+      }
+    } @else {
+      .carousel,
+      &.carousel {
+        @include carousel-dark();
+      }
+    }
+  }
+}

data/_sass/bootstrap/_close.scss

@@ -4,37 +4,60 @@
 // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
 
 .btn-close {
+  // scss-docs-start close-css-vars
+  --#{$prefix}btn-close-color: #{$btn-close-color};
+  --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
+  --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
+  --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
+  --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
+  --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
+  --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
+  --#{$prefix}btn-close-white-filter: #{$btn-close-white-filter};
+  // scss-docs-end close-css-vars
+
   box-sizing: content-box;
   width: $btn-close-width;
   height: $btn-close-height;
   padding: $btn-close-padding-y $btn-close-padding-x;
-  color: $btn-close-color;
-  background: transparent escape-svg($btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
+  color: var(--#{$prefix}btn-close-color);
+  background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
   border: 0; // for button elements
   @include border-radius();
-  opacity: $btn-close-opacity;
+  opacity: var(--#{$prefix}btn-close-opacity);
 
   // Override <a>'s hover style
   &:hover {
-    color: $btn-close-color;
+    color: var(--#{$prefix}btn-close-color);
     text-decoration: none;
-    opacity: $btn-close-hover-opacity;
+    opacity: var(--#{$prefix}btn-close-hover-opacity);
   }
 
   &:focus {
     outline: 0;
-    box-shadow: $btn-close-focus-shadow;
-    opacity: $btn-close-focus-opacity;
+    box-shadow: var(--#{$prefix}btn-close-focus-shadow);
+    opacity: var(--#{$prefix}btn-close-focus-opacity);
   }
 
   &:disabled,
   &.disabled {
     pointer-events: none;
     user-select: none;
-    opacity: $btn-close-disabled-opacity;
+    opacity: var(--#{$prefix}btn-close-disabled-opacity);
   }
 }
 
+@mixin btn-close-white() {
+  filter: var(--#{$prefix}btn-close-white-filter);
+}
+
 .btn-close-white {
-  filter: $btn-close-white-filter;
+  @include btn-close-white();
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .btn-close {
+      @include btn-close-white();
+    }
+  }
 }

data/_sass/bootstrap/_dropdown.scss

@@ -184,6 +184,7 @@
   white-space: nowrap; // prevent links from randomly breaking onto new lines
   background-color: transparent; // For `<button>`s
   border: 0; // For `<button>`s
+  @include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
 
   &:hover,
   &:focus {

data/_sass/bootstrap/_functions.scss

@@ -188,7 +188,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   );
 
   @each $name, $value in $rgb {
-    $value: if(divide($value, 255) < .03928, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
+    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
     $rgb: map-merge($rgb, ($name: $value));
   }
 

data/_sass/bootstrap/_grid.scss

@@ -2,6 +2,12 @@
 //
 // Rows contain your columns.
 
+:root {
+  @each $name, $value in $grid-breakpoints {
+    --#{$prefix}breakpoint-#{$name}: #{$value};
+  }
+}
+
 @if $enable-grid-classes {
   .row {
     @include make-row();