From: Mark Otto <markdotto@gmail.com>
Date: Wed, 2 Apr 2025 17:00:53 +0000 (-0700)
Subject: New .prose component, put it to work in the docs
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=e311985f1e19450866b048c9e3713f8dcbf2fcee;p=thirdparty%2Fbootstrap.git

New .prose component, put it to work in the docs
---

diff --git a/scss/content/_content-body.scss b/scss/content/_prose.scss
similarity index 76%
rename from scss/content/_content-body.scss
rename to scss/content/_prose.scss
index 89d4a0e9f2..9e4538a68b 100644
--- a/scss/content/_content-body.scss
+++ b/scss/content/_prose.scss
@@ -2,9 +2,10 @@
 @use "../mixins/transition" as *;
 
 @layer content {
-  .content-body {
+  .prose {
     --#{$prefix}content-font-size: 16px;
     --#{$prefix}content-gap: 24px;
+    --#{$prefix}heading-color: light-dark(var(--bs-gray-900), var(--bs-white));
 
     position: relative;
     max-width: 1000px;
@@ -38,12 +39,30 @@
     h4,
     h5,
     h6 {
+      --bs-heading-color: var(--bs-emphasis-color);
+
       margin-top: 0;
       margin-bottom: calc(var(--#{$prefix}content-gap) / 2);
       font-weight: 500;
       line-height: 1.25;
     }
 
+    h1,
+    h2 {
+      &:not(:first-child) {
+        margin-top: calc(var(--#{$prefix}content-gap) * 1.5);
+      }
+    }
+
+    h3,
+    h4,
+    h5,
+    h6 {
+      &:not(:first-child) {
+        margin-top: calc(var(--#{$prefix}content-gap) * 1.25);
+      }
+    }
+
     h1 {
       font-size: 2.25em;
       line-height: 1.1;
@@ -66,15 +85,15 @@
     }
 
     a:not([class]) {
-      color: var(--ui-theme-primary-text);
+      color: var(--#{$prefix}link-color);
       text-decoration: underline;
-      text-decoration-color: color-mix(in srgb, var(--ui-theme-primary-text) 25%, transparent);
+      text-decoration-color: color-mix(in srgb, var(--#{$prefix}link-color) 25%, transparent);
       text-underline-offset: 4px;
       @include transition(.1s text-decoration-color ease-in-out);
     }
 
     a:not([class]):hover {
-      text-decoration-color: var(--ui-theme-primary-text);
+      text-decoration-color: var(--#{$prefix}link-hover-color);
     }
 
     img {
@@ -100,6 +119,7 @@
       border: 1px solid var(--#{$prefix}border-color);
     }
 
+
     dt {
       font-weight: 500;
     }
diff --git a/scss/content/_reboot.scss b/scss/content/_reboot.scss
index ba7f30ce6b..dcea124290 100644
--- a/scss/content/_reboot.scss
+++ b/scss/content/_reboot.scss
@@ -212,7 +212,7 @@
 
   b,
   strong {
-    font-weight: $font-weight-bolder;
+    font-weight: $font-weight-medium;
   }
 
 
@@ -220,14 +220,16 @@
   //
   // Add the correct font size in all browsers
 
-  small, .small {
+  small,
+  .small {
     @include font-size($small-font-size);
   }
 
 
   // Mark
 
-  mark, .mark {
+  mark,
+  .mark {
     padding: $mark-padding;
     color: var(--#{$prefix}highlight-color);
     background-color: var(--#{$prefix}highlight-bg);
@@ -456,8 +458,7 @@
     display: none !important;
   }
 
-  // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
-  //    controls in Android 4.
+  // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`  //    controls in Android 4.
   // 2. Correct the inability to style clickable types in iOS and Safari.
   // 3. Opinionated: add "hand" cursor to non-disabled button elements.
 
diff --git a/scss/content/index.scss b/scss/content/index.scss
index 2e5748e268..8b141c949c 100644
--- a/scss/content/index.scss
+++ b/scss/content/index.scss
@@ -2,4 +2,4 @@
 @forward "type";
 @forward "tables";
 @forward "images";
-@forward "content-body";
+@forward "prose";
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index f424749740..8bbe5398e7 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -52,7 +52,7 @@
     - title: Images
     - title: Tables
     - title: Figures
-    - title: Content body
+    - title: Prose
 
 - title: Forms
   icon: ui-radios
diff --git a/site/src/assets/partials/snippets.js b/site/src/assets/partials/snippets.js
index 498071b415..b82f7d00b6 100644
--- a/site/src/assets/partials/snippets.js
+++ b/site/src/assets/partials/snippets.js
@@ -121,7 +121,7 @@ export default () => {
   // Links
   // -------------------------------
   // Disable empty links in docs examples only
-  document.querySelectorAll('.bd-content [href="#"]')
+  document.querySelectorAll('.docs-content-body [href="#"]')
     .forEach(link => {
       link.addEventListener('click', event => {
         event.preventDefault()
diff --git a/site/src/content/docs/content/content-body.mdx b/site/src/content/docs/content/prose.mdx
similarity index 88%
rename from site/src/content/docs/content/content-body.mdx
rename to site/src/content/docs/content/prose.mdx
index 9eb5463bd2..d7019432a3 100644
--- a/site/src/content/docs/content/content-body.mdx
+++ b/site/src/content/docs/content/prose.mdx
@@ -1,23 +1,24 @@
 ---
-title: Content body
-description: Use the `.content-body` wrapper class to make long form content more easily without the need for specifying Bootstrap classes on every element. Especially useful for converting Markdown or MDX to HTML, or simply for making content heavy pages more readable.
+title: Prose
+description: Use the `.prose` wrapper class to make long form content more easily without the need for specifying Bootstrap classes on every element. Especially useful for converting Markdown or MDX to HTML, or simply for making content heavy pages more readable.
 toc: true
 ---
 
 ## How it works
 
-Wrap your content in the `.content-body` class to get modified font-size, line-height, and spacing specifically designed for long form content that originals from source Markdown files or WYSIWYG editors. Here's what we do with that class:
+Wrap your content in the `.prose` class to get modified font-size, line-height, and spacing specifically designed for long form content that originals from source Markdown files or WYSIWYG editors. Here's what we do with that class:
 
 - Set a base `font-size`, `line-height`, and some local CSS variables on the parent element.
 - Normalize the spacing of lists
 - Set a default `margin-bottom` for headings.
+- Some headings get an additional `margin-top` to ensure proper spacing between headings and other content.
 - Style blockquotes, code, and other inline elements.
 
 ## Example
 
-This is an example of source Markdown that shows several types of HTML content supported in this `.content-body` wrapper class.
+This is an example of source Markdown that shows several types of HTML content supported in this `.prose` wrapper class.
 
-<div class="bd-example content-body">
+<div class="bd-example prose">
 # Lorem ipsum dolor sit amet
 Cum sociis natoque penatibus et magnis [dis parturient montes](#), nascetur ridiculus mus. *Aenean eu leo quam.* Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
 
diff --git a/site/src/layouts/DocsLayout.astro b/site/src/layouts/DocsLayout.astro
index 08d09764cc..63dde15f68 100644
--- a/site/src/layouts/DocsLayout.astro
+++ b/site/src/layouts/DocsLayout.astro
@@ -109,7 +109,7 @@ if (frontmatter.toc) {
         <Ads />
       </div>
 
-      <div class="bd-content ps-lg-2">
+      <div class="docs-content-body prose ps-lg-2">
         {
           frontmatter.sections && (
             <div class="row g-3">
diff --git a/site/src/layouts/SingleLayout.astro b/site/src/layouts/SingleLayout.astro
index 2a9cfaca7a..638f60d58c 100644
--- a/site/src/layouts/SingleLayout.astro
+++ b/site/src/layouts/SingleLayout.astro
@@ -27,7 +27,7 @@ const { description, title } = Astro.props
       </div>
     </header>
 
-    <main class="bd-content order-1 py-5" id="content">
+    <main class="docs-content-body order-1 py-5" id="content">
       <div class="container-2xl bd-gutter">
         <slot />
         <slot name="main-content" />
diff --git a/site/src/layouts/partials/ExamplesMain.astro b/site/src/layouts/partials/ExamplesMain.astro
index c548732f91..2e3ede8a8a 100644
--- a/site/src/layouts/partials/ExamplesMain.astro
+++ b/site/src/layouts/partials/ExamplesMain.astro
@@ -8,7 +8,7 @@ import { getSlug } from '@libs/utils'
 {
   getData('examples').map(({ category, description, examples, external }) => {
     return (
-      <div class="bd-content">
+      <div class="docs-content-body">
         <h2 id={getSlug(category)}>{category}</h2>
         <p>{description}</p>
         {category === 'RTL' && (
diff --git a/site/src/scss/_content.scss b/site/src/scss/_content.scss
index b437e123e2..eb9fa8d519 100644
--- a/site/src/scss/_content.scss
+++ b/site/src/scss/_content.scss
@@ -6,51 +6,118 @@
 // Bootstrap docs content theming
 //
 
-.bd-content {
-  > h2,
-  > h3,
-  > h4 {
-    --bs-heading-color: var(--bs-emphasis-color);
+@layer custom {
+  .docs-content-body {
+    // Override Bootstrap defaults
+    > .table,
+    > .table-responsive .table {
+      --bs-table-border-color: var(--bs-border-color);
+
+      max-width: 100%;
+      margin-bottom: 1.5rem;
+      @include font-size(.875rem);
+
+      @include media-breakpoint-down(lg) {
+        &.table-bordered {
+          border: 0;
+        }
+      }
+
+      thead {
+        border-bottom: 2px solid currentcolor;
+      }
+
+      tbody:not(:first-child) {
+        border-top: 2px solid currentcolor;
+      }
+
+      th,
+      td {
+        &:first-child {
+          padding-left: 0;
+        }
+
+        &:not(:last-child) {
+          padding-right: 1.5rem;
+        }
+      }
+
+      th {
+        color: var(--bs-emphasis-color);
+      }
+
+      strong {
+        color: var(--bs-emphasis-color);
+      }
+
+      // Prevent breaking of code
+      // stylelint-disable selector-max-compound-selectors
+      th,
+      td:first-child > code {
+        white-space: nowrap;
+      }
+      // stylelint-enable selector-max-compound-selectors
+    }
   }
 
-  // Offset content from fixed navbar when jumping to headings
-  > h2:not(:first-child) {
-    margin-top: 3rem;
+  .table-options {
+    td:nth-child(2) {
+      min-width: 160px;
+    }
   }
 
-  > h3 {
-    margin-top: 2rem;
+  .table-options td:last-child,
+  .table-utilities td:last-child {
+    min-width: 280px;
   }
 
-  > ul li,
-  > ol li {
-    margin-bottom: .25rem;
+  .bd-title {
+    --bs-heading-color: var(--bs-emphasis-color);
+    @include font-size(3rem);
+  }
 
-    // stylelint-disable selector-max-type, selector-max-compound-selectors
-    > p ~ ul {
-      margin-top: -.5rem;
-      margin-bottom: 1rem;
-    }
-    // stylelint-enable selector-max-type, selector-max-compound-selectors
+  .bd-subtitle {
+    @include font-size(1.5rem);
+    font-weight: 300;
   }
 
-  // Override Bootstrap defaults
-  > .table,
-  > .table-responsive .table {
-    --bs-table-border-color: var(--bs-border-color);
+  .bi {
+    width: 1em;
+    height: 1em;
+    vertical-align: -.125em;
+    fill: currentcolor;
+  }
 
-    max-width: 100%;
-    margin-bottom: 1.5rem;
-    @include font-size(.875rem);
+  .border-lg-start {
+    @include media-breakpoint-up(lg) {
+      border-left: var(--bs-border-width) solid var(--bs-border-color);
+    }
+  }
 
-    @include media-breakpoint-down(lg) {
-      &.table-bordered {
-        border: 0;
-      }
+  // scss-docs-start custom-color-mode
+  [data-bs-theme="blue"] {
+    --bs-body-color: var(--bs-white);
+    // --bs-body-color-rgb: #{to-rgb($white)};
+    --bs-body-bg: var(--bs-blue);
+    // --bs-body-bg-rgb: #{to-rgb($blue)};
+    --bs-tertiary-bg: #{$blue-600};
+
+    .dropdown-menu {
+      --bs-dropdown-bg: color-mix(in srgb, #{$blue-500}, #{$blue-600});
+      --bs-dropdown-link-active-bg: #{$blue-700};
     }
 
-    thead {
-      border-bottom: 2px solid currentcolor;
+    .btn-secondary {
+      --bs-btn-bg: #{color-mix(in srgb, #{$gray-600}, #{$blue-400})};
+      --bs-btn-border-color: #{rgba($white, .25)};
+      // --bs-btn-hover-bg: #{darken(color-mix(in srgb, #{$gray-600}, #{$blue-400}, .5), 5%)};
+      --bs-btn-hover-bg: color-mix(in srgb, #{$gray-600}, #{$blue-400});
+      --bs-btn-hover-border-color: #{rgba($white, .25)};
+      // --bs-btn-active-bg: #{darken(color-mix(in srgb, #{$gray-600}, #{$blue-400}, .5), 10%)};
+      --bs-btn-active-bg: color-mix(in srgb, #{$gray-600}, #{$blue-400});
+      --bs-btn-active-border-color: #{rgba($white, .5)};
+      --bs-btn-focus-border-color: #{rgba($white, .5)};
+      --bs-btn-focus-box-shadow: 0 0 0 .25rem rgb(255, 255, 255, .2);
     }
 
     tbody:not(:first-child) {
@@ -84,6 +151,7 @@
     }
     // stylelint-enable selector-max-compound-selectors
   }
+  // scss-docs-end custom-color-mode
 }
 
 .table-options {
diff --git a/site/src/scss/_layout.scss b/site/src/scss/_layout.scss
index 4bbbfbe0c0..44f7e1b912 100644
--- a/site/src/scss/_layout.scss
+++ b/site/src/scss/_layout.scss
@@ -7,7 +7,6 @@
 }
 
 .bd-layout {
-
   @include media-breakpoint-up(lg) {
     display: grid;
     grid-template-areas: "sidebar main";
@@ -55,7 +54,8 @@
   grid-area: toc;
 }
 
-.bd-content {
+.docs-content-body {
   grid-area: content;
-  min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
+  width: 100%;
+  min-width: 1px; // Fix width when this element contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
 }