Examples: fix stale v5 CSS custom properties and migrate breadcrumb example to v6 divider markup (#42748)

Author: julien-deramond

site/src/assets/examples/breadcrumbs/breadcrumbs.css

@@ -1,29 +1,8 @@
-.breadcrumb-chevron {
-  --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
-  gap: .5rem;
-}
-.breadcrumb-chevron .breadcrumb-item {
-  display: flex;
-  gap: inherit;
-  align-items: center;
-  padding-left: 0;
-  line-height: 1;
-}
-.breadcrumb-chevron .breadcrumb-item::before {
-  gap: inherit;
-  float: none;
-  width: 1rem;
-  height: 1rem;
-}
-
 .breadcrumb-custom .breadcrumb-item {
   position: relative;
   flex-grow: 1;
   padding: .75rem 3rem;
 }
-.breadcrumb-custom .breadcrumb-item::before {
-  display: none;
-}
 .breadcrumb-custom .breadcrumb-item::after {
   position: absolute;
   top: 50%;
@@ -34,7 +13,7 @@
   height: 50px;
   margin-top: -25px;
   content: "";
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bs-bg-3);
   border-top-right-radius: .5rem;
   box-shadow: 1px -1px var(--bs-border-color);
   transform: scale(.707) rotate(45deg);

site/src/assets/examples/breadcrumbs/index.astro

@@ -12,9 +12,11 @@ export const extra_css = ['breadcrumbs.css']
 <div class="container my-5">
   <nav aria-label="breadcrumb">
     <ol class="breadcrumb p-3 bg-1 rounded-3">
-      <li class="breadcrumb-item"><a href="#">Home</a></li>
-      <li class="breadcrumb-item"><a href="#">Library</a></li>
-      <li class="breadcrumb-item active" aria-current="page">Data</li>
+      <li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Home</a></li>
+      <li class="breadcrumb-divider"></li>
+      <li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Library</a></li>
+      <li class="breadcrumb-divider"></li>
+      <li class="breadcrumb-item" aria-current="page"><a class="breadcrumb-link active" href="#">Data</a></li>
     </ol>
   </nav>
 </div>
@@ -25,16 +27,18 @@ export const extra_css = ['breadcrumbs.css']
   <nav aria-label="breadcrumb">
     <ol class="breadcrumb p-3 bg-1 rounded-3">
       <li class="breadcrumb-item">
-        <a class="theme-inverse" href="#">
+        <a class="breadcrumb-link theme-inverse" href="#">
           <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#house-door-fill"></use></svg>
           <span class="visually-hidden">Home</span>
         </a>
       </li>
+      <li class="breadcrumb-divider"></li>
       <li class="breadcrumb-item">
-        <a class="theme-inverse fw-semibold text-decoration-none" href="#">Library</a>
+        <a class="breadcrumb-link theme-inverse fw-semibold text-decoration-none" href="#">Library</a>
       </li>
-      <li class="breadcrumb-item active" aria-current="page">
-        Data
+      <li class="breadcrumb-divider"></li>
+      <li class="breadcrumb-item" aria-current="page">
+        <a class="breadcrumb-link active" href="#">Data</a>
       </li>
     </ol>
   </nav>
@@ -44,18 +48,28 @@ export const extra_css = ['breadcrumbs.css']
 
 <div class="container my-5">
   <nav aria-label="breadcrumb">
-    <ol class="breadcrumb breadcrumb-chevron p-3 bg-1 rounded-3">
+    <ol class="breadcrumb p-3 bg-1 rounded-3">
       <li class="breadcrumb-item">
-        <a class="theme-inverse" href="#">
+        <a class="breadcrumb-link theme-inverse" href="#">
           <svg class="bi" width="16" height="16" aria-hidden="true"><use href="#house-door-fill"></use></svg>
           <span class="visually-hidden">Home</span>
         </a>
       </li>
+      <li class="breadcrumb-divider">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+          <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+        </svg>
+      </li>
       <li class="breadcrumb-item">
-        <a class="theme-inverse fw-semibold text-decoration-none" href="#">Library</a>
+        <a class="breadcrumb-link theme-inverse fw-semibold text-decoration-none" href="#">Library</a>
       </li>
-      <li class="breadcrumb-item active" aria-current="page">
-        Data
+      <li class="breadcrumb-divider">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+          <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
+        </svg>
+      </li>
+      <li class="breadcrumb-item" aria-current="page">
+        <a class="breadcrumb-link active" href="#">Data</a>
       </li>
     </ol>
   </nav>

site/src/assets/examples/carousel/carousel.css

@@ -5,7 +5,7 @@
 body {
   padding-top: 3rem;
   padding-bottom: 3rem;
-  color: var(--bs-tertiary-color);
+  color: var(--bs-fg-3);
 }
 
 

site/src/assets/examples/cheatsheet/cheatsheet.css

@@ -26,29 +26,29 @@ body {
   padding: .1875rem .5rem;
   margin-top: .125rem;
   margin-left: .3125rem;
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
 }
 
 .bd-aside a:hover,
 .bd-aside a:focus {
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
   background-color: rgba(121, 82, 179, .1);
 }
 
 .bd-aside .active {
   font-weight: 600;
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
 }
 
 .bd-aside .btn {
   padding: .25rem .5rem;
   font-weight: 600;
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
 }
 
 .bd-aside .btn:hover,
 .bd-aside .btn:focus {
-  color: var(--bs-body-color);
+  color: var(--bs-fg-body);
   background-color: rgba(121, 82, 179, .1);
 }
 

site/src/assets/examples/headers/headers.css

@@ -1,5 +1,5 @@
 .form-control-dark {
-  border-color: var(--bs-gray);
+  border-color: var(--bs-gray-500);
 }
 .form-control-dark:focus {
   border-color: #fff;

site/src/assets/examples/list-groups/list-groups.css

@@ -27,8 +27,8 @@
 }
 .list-group-item-check:checked + .list-group-item {
   color: #fff;
-  background-color: var(--bs-primary);
-  border-color: var(--bs-primary);
+  background-color: var(--bs-primary-bg);
+  border-color: var(--bs-primary-bg);
 }
 .list-group-item-check[disabled] + .list-group-item,
 .list-group-item-check:disabled + .list-group-item {
@@ -51,9 +51,9 @@
 }
 
 .list-group-radio .radio:checked + .list-group-item {
-  background-color: var(--bs-body);
-  border-color: var(--bs-primary);
-  box-shadow: 0 0 0 2px var(--bs-primary);
+  background-color: var(--bs-bg-body);
+  border-color: var(--bs-primary-bg);
+  box-shadow: 0 0 0 2px var(--bs-primary-bg);
 }
 .list-group-radio .radio[disabled] + .list-group-item,
 .list-group-radio .radio:disabled + .list-group-item {

site/src/assets/examples/pricing/pricing.css

@@ -1,5 +1,5 @@
 body {
-  background-image: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-body-bg) 100px, var(--bs-body-bg));
+  background-image: linear-gradient(180deg, var(--bs-secondary-bg), var(--bs-bg-body) 100px, var(--bs-bg-body));
 }
 
 .container {

site/src/assets/examples/sidebars/sidebars.css

@@ -17,13 +17,13 @@ main {
 .btn-toggle {
   padding: .25rem .5rem;
   font-weight: 600;
-  color: var(--bs-emphasis-color);
+  color: var(--bs-fg-1);
   background-color: transparent;
 }
 .btn-toggle:hover,
 .btn-toggle:focus {
-  color: rgba(var(--bs-emphasis-color-rgb), .85);
-  background-color: var(--bs-tertiary-bg);
+  color: color-mix(in oklab, var(--bs-fg-1), transparent 15%);
+  background-color: var(--bs-bg-3);
 }
 
 .btn-toggle::before {
@@ -39,7 +39,7 @@ main {
 }
 
 .btn-toggle[aria-expanded="true"] {
-  color: rgba(var(--bs-emphasis-color-rgb), .85);
+  color: color-mix(in oklab, var(--bs-fg-1), transparent 15%);
 }
 .btn-toggle[aria-expanded="true"]::before {
   transform: rotate(90deg);
@@ -52,7 +52,7 @@ main {
 }
 .btn-toggle-nav a:hover,
 .btn-toggle-nav a:focus {
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bs-bg-3);
 }
 
 .scrollarea {