Revamp some docs layout

scss/layout/_grid.scss

@@ -29,6 +29,7 @@
 
   @each $breakpoint in map.keys($breakpoints) {
     $infix: breakpoint-infix($breakpoint, $breakpoints);
+    $infix: if($infix == "", "", "-" + $infix);
 
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       @if $grid-columns > 0 {
@@ -79,7 +80,11 @@
   .grid-cols-4 {
     --#{$prefix}columns: 4;
   }
+  .grid-cols-5 {
+    --#{$prefix}columns: 5;
+  }
   .grid-cols-6 {
     --#{$prefix}columns: 6;
   }
+
 }

site/src/components/DocsSidebar.astro

@@ -17,7 +17,7 @@ const sidebar = getData('sidebar')
           return (
             <li class="bd-links-group py-2">
               <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
-                {group.icon && (
+                {/* {group.icon && (
                   <svg
                     class="bi me-2"
                     style={group.icon_color && `color: var(--bs-${group.icon_color});`}
@@ -25,7 +25,7 @@ const sidebar = getData('sidebar')
                   >
                     <use xlink:href={`#${group.icon}`} />
                   </svg>
-                )}
+                )} */}
                 {group.title}
               </strong>
               <ul class="list-unstyled fw-normal pb-2 small">
@@ -49,7 +49,7 @@ const sidebar = getData('sidebar')
                     <li>
                       <a
                         href={url}
-                        class:list={['bd-links-link d-inline-block rounded', { active }]}
+                        class:list={['bd-links-link d-block rounded', { active }]}
                         aria-current={active ? 'page' : undefined}
                       >
                         {page.title}

site/src/components/footer/Footer.astro

@@ -4,10 +4,10 @@ import { getConfig } from '@libs/config'
 import { getVersionedDocsPath } from '@libs/path'
 ---
 
-<footer class="bd-footer py-4 py-md-5 mt-5 bg-body-tertiary">
+<footer class="bd-footer py-4 py-md-5 mt-5 bg-1">
-  <div class="container py-4 py-md-5 px-4 px-md-3 text-body-secondary">
+  <div class="container-2xl py-4 py-md-5 px-4 px-md-3 fg-3">
-    <div class="row">
+    <div class="grid grid-fill grid-cols-5">
-      <div class="col-lg-3 mb-3">
+      <div class="col-lg-2 mb-3">
         <a
           class="d-inline-flex align-items-center mb-2 text-body-emphasis text-decoration-none"
           href="/"
@@ -32,7 +32,7 @@ import { getVersionedDocsPath } from '@libs/path'
           <li class="mb-2">Currently v{getConfig().current_version}.</li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 offset-lg-1 mb-3">
+      <div class="mb-3">
         <h5>Links</h5>
         <ul class="list-unstyled">
           <li class="mb-2"><a href="/">Home</a></li>
@@ -44,7 +44,7 @@ import { getVersionedDocsPath } from '@libs/path'
           <li class="mb-2"><a href={getConfig().swag} target="_blank" rel="noopener">Swag Store</a></li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 mb-3">
+      <div class="mb-3">
         <h5>Guides</h5>
         <ul class="list-unstyled">
           <li class="mb-2"><a href={getVersionedDocsPath('getting-started')}>Getting started</a></li>
@@ -54,7 +54,7 @@ import { getVersionedDocsPath } from '@libs/path'
           <li class="mb-2"><a href={getVersionedDocsPath('getting-started/vite')}>Vite</a></li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 mb-3">
+      <div class="mb-3">
         <h5>Projects</h5>
         <ul class="list-unstyled">
           <li class="mb-2">
@@ -70,7 +70,7 @@ import { getVersionedDocsPath } from '@libs/path'
           </li>
         </ul>
       </div>
-      <div class="col-6 col-lg-2 mb-3">
+      <div class="mb-3">
         <h5>Community</h5>
         <ul class="list-unstyled">
           <li class="mb-2">

site/src/components/head/Stylesheet.astro

@@ -12,4 +12,4 @@ const { direction } = Astro.props
 
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
 
-<link {...getVersionedBsCssProps(direction)} />
+<!-- <link {...getVersionedBsCssProps(direction)} /> -->

site/src/components/header/Navigation.astro

@@ -85,7 +85,6 @@ const { addedIn, layout, title } = Astro.props
           </LinkItem>
           <LinkItem active={title === 'Examples'} href={getVersionedDocsPath('examples/')} track>Examples</LinkItem>
           <LinkItem href={getConfig().icons} target="_blank" rel="noopener" track>Icons</LinkItem>
-          <LinkItem href={getConfig().themes} target="_blank" rel="noopener" track>Themes</LinkItem>
           <LinkItem href={getConfig().blog} target="_blank" rel="noopener" track>Blog</LinkItem>
         </ul>
 

site/src/components/shortcodes/Code.astro

@@ -33,9 +33,14 @@ interface Props {
    * This takes precedence over the `code` prop.
    */
   filePath?: string
+  /**
+   * The theme to use for the code block.
+   * @see https://getbootstrap.com/docs/6.0/customize/color-scheme/
+   */
+  theme?: string
 }
 
-const { class: className, code, containerClass, fileMatch, filePath, lang } = Astro.props
+const { class: className, code, containerClass, fileMatch, filePath, lang, theme } = Astro.props
 
 let codeToDisplay = filePath
   ? fs.readFileSync(path.join(process.cwd(), filePath), 'utf8')
@@ -144,7 +149,7 @@ if (filePath && fileMatch && codeToDisplay) {
       </div>
     )
   }
-  <div class="highlight">
+  <div class="highlight" data-bs-theme={theme}>
     {
       codeToDisplay && lang ? (
         <Prism code={codeToDisplay} lang={lang} />

site/src/components/shortcodes/Example.astro

@@ -69,13 +69,13 @@ const simplifiedMarkup = markup
 
 {
   showMarkup ? (
-    <Code code={simplifiedMarkup} containerClass="bd-example-snippet" lang={lang}>
+    <Code code={simplifiedMarkup} containerClass="bd-example-snippet" lang={lang} theme="dark">
       {showPreview && (
         <Fragment slot="pre">
           <div id={id} class:list={['bd-example', className]} style={style}>
             <Fragment set:html={markup} />
           </div>
-          <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
+          <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1" data-bs-theme="dark">
             <small class="font-monospace text-body-secondary text-uppercase">{lang}</small>
             <div class="d-flex ms-auto">
               <button

site/src/components/shortcodes/ScssDocs.astro

@@ -49,7 +49,7 @@ try {
 ---
 
 <Code containerClass="bd-example-snippet bd-file-ref" code={content} lang="scss">
-  <div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom">
+  <div slot="pre" class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
     <a
       class="font-monospace link-secondary link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small"
       href={`${getConfig().repo}/blob/v${getConfig().current_version}/${file}`.replaceAll('\\', '/')}
@@ -57,7 +57,7 @@ try {
       {file}
     </a>
     <div class="d-flex ms-auto">
-      <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
+      <button type="button" class="btn-clipboard m-0" title="Copy to clipboard">
         <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"></use></svg>
       </button>
     </div>

site/src/content/docs/components/alerts.mdx

@@ -10,7 +10,7 @@ import { getData } from '@libs/data'
 
 Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
 
-<Example code={getData('theme-colors').map((themeColor) => `<div class="alert theme-${themeColor.name}" role="alert">
+<Example code={getData('theme-colors').map((themeColor) => `<div class="alert alert-${themeColor.name}" role="alert">
   A simple ${themeColor.name} alert—check it out!
 </div>`)} />
 

site/src/layouts/DocsLayout.astro

@@ -3,11 +3,22 @@ import type { MarkdownHeading } from 'astro'
 import type { CollectionEntry } from 'astro:content'
 import { getConfig } from '@libs/config'
 import type { LayoutOverridesHTMLAttributes } from '@libs/layout'
-import { getSlug } from '@libs/utils'
+import { getSlug, processMarkdownToHtml } from '@libs/utils'
 import Ads from '@components/Ads.astro'
 import BaseLayout from '@layouts/BaseLayout.astro'
 import DocsSidebar from '@components/DocsSidebar.astro'
 import TableOfContents from '@components/TableOfContents.astro'
+import { readFileSync } from 'node:fs'
+import { parse } from 'yaml'
+import { fileURLToPath } from 'node:url'
+import { join, dirname } from 'node:path'
+import GitHubIcon from '@components/icons/GitHubIcon.astro'
+
+interface NavigationPage {
+  title: string
+  url: string
+  groupTitle: string
+}
 
 interface Props {
   frontmatter: CollectionEntry<'docs'>['data']
@@ -15,7 +26,18 @@ interface Props {
   id: CollectionEntry<'docs'>['id']
 }
 
+// Read and parse the YAML file directly
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const sidebarPath = join(__dirname, '../../data/sidebar.yml')
+const sidebarContent = readFileSync(sidebarPath, 'utf8')
+const sidebar = parse(sidebarContent) as Array<{
+  title: string
+  pages?: Array<{ title: string }>
+}>
+
 const { frontmatter, headings, id } = Astro.props
+const { slug } = Astro.params
 
 const bodyProps: LayoutOverridesHTMLAttributes<'body'> = { tabindex: 0 }
 
@@ -23,6 +45,33 @@ if (frontmatter.toc) {
   bodyProps['data-bs-spy'] = 'scroll'
   bodyProps['data-bs-target'] = '#TableOfContents'
 }
+
+// Find previous and next pages for navigation
+let prevPage: NavigationPage | undefined
+let nextPage: NavigationPage | undefined
+
+// Create a flat array of all pages with their groups
+const allPages = sidebar.flatMap((group) => {
+  if (!group.pages) return []
+  return group.pages.map((page) => ({
+    title: page.title,
+    url: `/docs/${getConfig().docs_version}/${getSlug(group.title)}/${getSlug(page.title)}/`,
+    groupTitle: group.title
+  }))
+})
+
+// Find the current page index
+const currentPageIndex = allPages.findIndex(
+  (page) => page.url === `/docs/${getConfig().docs_version}/${slug}/`
+)
+
+if (currentPageIndex > 0) {
+  prevPage = allPages[currentPageIndex - 1]
+}
+
+if (currentPageIndex < allPages.length - 1) {
+  nextPage = allPages[currentPageIndex + 1]
+}
 ---
 
 <BaseLayout {...Astro.props} layout="docs" overrides={{ body: bodyProps }}>
@@ -47,33 +96,31 @@ if (frontmatter.toc) {
 
     <main class="bd-main order-1">
       <div class="bd-intro pt-2 ps-lg-2">
-        <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
+        <h1 class="bd-title mb-0" id="content">{frontmatter.title}</h1>
-          <div class="mb-3 mb-md-0 d-flex text-nowrap">
+        <div class="bd-subtitle">
-            {
+          {frontmatter.description && <Fragment set:html={processMarkdownToHtml(frontmatter.description)} />}
-              // This is needed because we want to show the badge if show_badge isn't present or is set to false
+        </div>
-              frontmatter.added &&
+        <div class="mb-3 mb-md-0 d-flex text-nowrap">
-                ((frontmatter.added.show_badge !== undefined && frontmatter.added.show_badge === true) ||
+          {
-                  frontmatter.added.show_badge === undefined) && (
+            frontmatter.added &&
-                  <small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">
+              ((frontmatter.added.show_badge !== undefined && frontmatter.added.show_badge === true) ||
-                    Added in v{frontmatter.added.version}
+                frontmatter.added.show_badge === undefined) && (
-                  </small>
+                <small class="d-inline-flex px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2 me-2">
-                )
+                  Added in v{frontmatter.added.version}
-            }
+                </small>
-            <a
+              )
-              class="btn btn-sm btn-bd-light rounded-2"
+          }
-              href={`${getConfig().repo}/blob/v${getConfig().current_version}/site/src/content/${id}`}
+          <a
-              title="View and edit this file on GitHub"
+            class="btn btn-secondary-text btn-sm"
-              target="_blank"
+            href={`${getConfig().repo}/blob/v${getConfig().current_version}/site/src/content/${id}`}
-              rel="noopener"
+            title="View and edit this file on GitHub"
-            >
+            target="_blank"
-              View on GitHub
+            rel="noopener"
-            </a>
+          >
-          </div>
+            <GitHubIcon height={16} width={16} class="bi" />
-          <h1 class="bd-title mb-0" id="content">{frontmatter.title}</h1>
+            View on GitHub
+          </a>
         </div>
-        <p class="bd-lead">
-          {frontmatter.description && <Fragment set:html={frontmatter.description} />}
-        </p>
         <Ads />
       </div>
 
@@ -107,7 +154,7 @@ if (frontmatter.toc) {
       <div class="docs-content-body prose ps-lg-2">
         {
           frontmatter.sections && (
-            <div class="row g-3">
+            <div class="grid mb-5">
               {frontmatter.sections.map((section) => (
                 <div class="col-md-6">
                   <a class="d-block text-decoration-none" href={`./${getSlug(section.title)}/`}>
@@ -121,6 +168,33 @@ if (frontmatter.toc) {
         }
 
         <slot />
+
+        <nav class="bd-links-nav py-5 mt-5 border-top">
+          <div class="grid">
+            <div class="col-6">
+              {
+                prevPage && (
+                  <a href={prevPage.url} class="d-block p-3 text-decoration-none rounded-3">
+                    <div class="text-secondary small">Previous</div>
+                    <div class="fw-semibold">← {prevPage.title}</div>
+                    <div class="text-secondary small">{prevPage.groupTitle}</div>
+                  </a>
+                )
+              }
+            </div>
+            <div class="col-6">
+              {
+                nextPage && (
+                  <a href={nextPage.url} class="d-block p-3 text-decoration-none text-end rounded-3">
+                    <div class="text-secondary small">Next</div>
+                    <div class="fw-semibold">{nextPage.title} →</div>
+                    <div class="text-secondary small">{nextPage.groupTitle}</div>
+                  </a>
+                )
+              }
+            </div>
+          </div>
+        </nav>
       </div>
     </main>
   </div>

site/src/layouts/partials/Icons.astro

@@ -7,6 +7,9 @@
   <symbol id="circle-half" viewBox="0 0 16 16">
     <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"></path>
   </symbol>
+  <symbol id="github" viewBox="0 0 16 16">
+    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"></path>
+  </symbol>
   <symbol id="moon-stars-fill" viewBox="0 0 16 16">
     <path
       d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"

site/src/libs/utils.ts

@@ -1,6 +1,8 @@
 import { slug } from 'github-slugger'
 import fromMarkdown from 'mdast-util-from-markdown'
 import toString from 'mdast-util-to-string'
+import { remark } from 'remark'
+import remarkHtml from 'remark-html'
 
 export function capitalizeFirstLetter(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1)
@@ -34,3 +36,11 @@ export function trimLeadingAndTrailingSlashes(str: string) {
 export function stripMarkdown(str: string) {
   return toString(fromMarkdown(str))
 }
+
+export function processMarkdownToHtml(markdown: string): string {
+  // Use remark to process markdown to HTML
+  const result = remark()
+    .use(remarkHtml)
+    .processSync(markdown)
+  return result.toString()
+}

site/src/scss/_ads.scss

@@ -18,7 +18,7 @@
   @include font-size(.8125rem);
   line-height: 1.4;
   text-align: left;
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bs-bg-1);
 
   a {
     color: var(--bs-body-color);

site/src/scss/_callouts.scss

@@ -6,39 +6,41 @@
 // Callouts
 //
 
-.bd-callout {
+@layer custom {
-  --#{$prefix}link-color: var(--bd-callout-link);
+  .bd-callout {
-  --#{$prefix}code-color: var(--bd-callout-code-color);
+    --#{$prefix}link-color: var(--bd-callout-link);
+    --#{$prefix}code-color: var(--bd-callout-code-color);
 
-  padding: 1.25rem;
+    padding: 1.25rem;
-  margin-top: 1.25rem;
+    margin-top: 1.25rem;
-  margin-bottom: 1.25rem;
+    margin-bottom: 1.25rem;
-  color: var(--bd-callout-color, inherit);
+    color: var(--bd-callout-color, inherit);
-  background-color: var(--bd-callout-bg, var(--bs-gray-100));
+    background-color: var(--bd-callout-bg, var(--bs-gray-100));
-  border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
+    border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
 
-  h4 {
+    h4 {
-    margin-bottom: .25rem;
+      margin-bottom: .25rem;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+
+    + .bd-callout {
+      margin-top: -.25rem;
+    }
+
+    .highlight {
+      background-color: rgba($black, .05);
+    }
   }
 
-  > :last-child {
+  // Variations
-    margin-bottom: 0;
+  @each $variant in $bd-callout-variants {
-  }
+    .bd-callout-#{$variant} {
-
+      --bd-callout-color: var(--bs-#{$variant}-text);
-  + .bd-callout {
+      --bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
-    margin-top: -.25rem;
+      --bd-callout-border: var(--bs-#{$variant}-border);
-  }
+    }
-
-  .highlight {
-    background-color: rgba($black, .05);
-  }
-}
-
-// Variations
-@each $variant in $bd-callout-variants {
-  .bd-callout-#{$variant} {
-    --bd-callout-color: var(--bs-#{$variant}-text);
-    --bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
-    --bd-callout-border: var(--bs-#{$variant}-border);
   }
 }

site/src/scss/_clipboard-js.scss

@@ -5,43 +5,45 @@
 //
 // JS-based `Copy` buttons for code snippets.
 
-.bd-clipboard,
+@layer custom {
-.bd-edit {
+  .bd-clipboard,
-  position: relative;
+  .bd-edit {
-  display: none;
+    position: relative;
-  float: right;
+    display: none;
+    float: right;
 
-  + .highlight {
+    + .highlight {
-    margin-top: 0;
+      margin-top: 0;
+    }
+
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
   }
 
-  @include media-breakpoint-up(md) {
+  .btn-clipboard,
+  .btn-edit {
     display: block;
-  }
+    padding: .5em;
-}
+    line-height: 1;
+    color: var(--bs-body-color);
+    background-color: var(--bd-pre-bg);
+    border: 0;
+    @include border-radius(.25rem);
 
-.btn-clipboard,
+    &:hover {
-.btn-edit {
+      color: var(--bs-link-hover-color);
-  display: block;
+    }
-  padding: .5em;
-  line-height: 1;
-  color: var(--bs-body-color);
-  background-color: var(--bd-pre-bg);
-  border: 0;
-  @include border-radius(.25rem);
 
-  &:hover {
+    &:focus {
-    color: var(--bs-link-hover-color);
+      z-index: 3;
+    }
   }
 
-  &:focus {
+  .btn-clipboard {
-    z-index: 3;
+    position: relative;
+    z-index: 2;
+    margin-top: 1.25rem;
+    margin-right: .75rem;
   }
 }
-
-.btn-clipboard {
-  position: relative;
-  z-index: 2;
-  margin-top: 1.25rem;
-  margin-right: .75rem;
-}

site/src/scss/_color-contrast.scss

@@ -0,0 +1,51 @@
+// Color contrast
+// See https://github.com/twbs/bootstrap/pull/30168
+
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
+// stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
+$_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 .0033 .0037 .004 .0044 .0048 .0052 .0056 .006 .0065 .007 .0075 .008 .0086 .0091 .0097 .0103 .011 .0116 .0123 .013 .0137 .0144 .0152 .016 .0168 .0176 .0185 .0194 .0203 .0212 .0222 .0232 .0242 .0252 .0262 .0273 .0284 .0296 .0307 .0319 .0331 .0343 .0356 .0369 .0382 .0395 .0409 .0423 .0437 .0452 .0467 .0482 .0497 .0513 .0529 .0545 .0561 .0578 .0595 .0612 .063 .0648 .0666 .0685 .0704 .0723 .0742 .0762 .0782 .0802 .0823 .0844 .0865 .0887 .0908 .0931 .0953 .0976 .0999 .1022 .1046 .107 .1095 .1119 .1144 .117 .1195 .1221 .1248 .1274 .1301 .1329 .1356 .1384 .1413 .1441 .147 .15 .1529 .1559 .159 .162 .1651 .1683 .1714 .1746 .1779 .1812 .1845 .1878 .1912 .1946 .1981 .2016 .2051 .2086 .2122 .2159 .2195 .2232 .227 .2307 .2346 .2384 .2423 .2462 .2502 .2542 .2582 .2623 .2664 .2705 .2747 .2789 .2831 .2874 .2918 .2961 .3005 .305 .3095 .314 .3185 .3231 .3278 .3325 .3372 .3419 .3467 .3515 .3564 .3613 .3663 .3712 .3763 .3813 .3864 .3916 .3968 .402 .4072 .4125 .4179 .4233 .4287 .4342 .4397 .4452 .4508 .4564 .4621 .4678 .4735 .4793 .4851 .491 .4969 .5029 .5089 .5149 .521 .5271 .5333 .5395 .5457 .552 .5583 .5647 .5711 .5776 .5841 .5906 .5972 .6038 .6105 .6172 .624 .6308 .6376 .6445 .6514 .6584 .6654 .6724 .6795 .6867 .6939 .7011 .7084 .7157 .7231 .7305 .7379 .7454 .7529 .7605 .7682 .7758 .7835 .7913 .7991 .807 .8148 .8228 .8308 .8388 .8469 .855 .8632 .8714 .8796 .8879 .8963 .9047 .9131 .9216 .9301 .9387 .9473 .956 .9647 .9734 .9823 .9911 1;
+
+@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio) {
+  $foregrounds: $color-contrast-light, $color-contrast-dark, #fff, #000;
+  $max-ratio: 0;
+  $max-ratio-color: null;
+
+  @each $color in $foregrounds {
+    $contrast-ratio: contrast-ratio($background, $color);
+    @if $contrast-ratio > $min-contrast-ratio {
+      @return $color;
+    } @else if $contrast-ratio > $max-ratio {
+      $max-ratio: $contrast-ratio;
+      $max-ratio-color: $color;
+    }
+  }
+
+  @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}...";
+
+  @return $max-ratio-color;
+}
+
+@function contrast-ratio($background, $foreground: $color-contrast-light) {
+  $l1: luminance($background);
+  $l2: luminance(opaque($background, $foreground));
+
+  @return if($l1 > $l2, math.div($l1 + .05, $l2 + .05), math.div($l2 + .05, $l1 + .05));
+}
+
+// Return WCAG2.2 relative luminance
+// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
+// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
+@function luminance($color) {
+  $rgb: (
+    "r": red($color),
+    "g": green($color),
+    "b": blue($color)
+  );
+
+  @each $name, $value in $rgb {
+    $value: if(math.div($value, 255) < .04045, math.div(math.div($value, 255), 12.92), nth($_luminance-list, $value + 1));
+    $rgb: map-merge($rgb, ($name: $value));
+  }
+
+  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
+}

site/src/scss/_component-examples.scss

@@ -394,9 +394,10 @@
 
 .highlight-toolbar {
   background-color: var(--bd-pre-bg);
+  border-bottom: 1px solid var(--bs-border-color);
 }
 
-.bd-scss-docs {
+.bd-file-ref {
   .highlight-toolbar {
     @include border-top-radius(calc(var(--bs-border-radius) + 1px));
   }

site/src/scss/_masthead.scss

@@ -10,13 +10,11 @@
 .bd-masthead {
   // --bd-pink: #{$pink};
   padding: 3rem 0;
-  // stylelint-disable
   // background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), color-mix(in srgb, var(--bs-body-bg) 85%, transparent)),
   //                   radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-primary), transparent)),
   //                   radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent), transparent)),
   //                   radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet), transparent)),
-  //                   radial-gradient(ellipse at center left, color-mix(in srgb, var(--bd-pink), transparent));
+  //                   radial-gradient(ellipse at center left, color-mix(in srgb, var(--bs-pink), transparent));
-  // stylelint-enable
 
   h1 {
     --bs-heading-color: var(--bs-emphasis-color);

site/src/scss/_sidebar.scss

@@ -25,7 +25,8 @@
 }
 
 .bd-links-heading {
-  color: var(--bs-emphasis-color);
+  padding-inline-start: .5rem;
+  color: var(--bs-fg-0);
 }
 
 .bd-links-nav {
@@ -48,21 +49,21 @@
 }
 
 .bd-links-link {
-  padding: .1875rem .5rem;
+  padding: .375rem .5rem;
   margin-top: .125rem;
-  margin-left: 1.125rem;
+  line-height: 20px;
-  color: var(--bs-body-color);
+  color: var(--bs-fg-1);
   text-decoration: if($link-decoration == none, null, none);
 
   &:hover,
   &:focus,
   &.active {
-    color: var(--bs-emphasis-color);
+    color: var(--bs-fg-0);
     text-decoration: if($link-hover-decoration == underline, none, null);
-    background-color: var(--bd-sidebar-link-bg);
+    background-color: var(--bs-bg-1);
   }
 
   &.active {
-    font-weight: 600;
+    font-weight: 500;
   }
 }

site/src/scss/_variables.scss

@@ -13,8 +13,7 @@ $bd-gutter-x: 3rem;
 $bd-callout-variants: info, warning, danger !default;
 
 @layer custom {
-  :root,
+  :root {
-  [data-bs-theme="light"] {
     --bd-purple: #{$bd-purple};
     --bd-violet: #{$bd-violet};
     --bd-accent: #{$bd-accent};
@@ -23,11 +22,12 @@ $bd-callout-variants: info, warning, danger !default;
     // --bd-pink-rgb: #{to-rgb($pink-500)};
     // --bd-teal-rgb: #{to-rgb($teal-500)};
     --bd-violet-bg: var(--bd-violet);
-    --bd-toc-color: var(--bd-violet);
+    --bd-toc-color: light-dark(var(--bd-violet), var(--bs-indigo-300));
     --bd-sidebar-link-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
     --bd-callout-link: #{$blue-600};
-    --bd-callout-code-color: #{$pink-600};
+    --bd-callout-code-color: light-dark(var(--bs-pink-600), var(--bs-pink-300));
     --bd-pre-bg: light-dark(var(--bs-gray-100), color-mix(in srgb, var(--bs-gray-900), var(--bs-black) 25%));
+    --bd-swatch-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .1));
   }
 
   // @include color-mode(dark, true) {

site/src/scss/docs.scss

@@ -22,6 +22,8 @@
 //
 // Happy Bootstrapping!
 
+@use "../../../scss/bootstrap" as *;
+
 // Load docs components
 @use "variables";
 @use "navbar";