From d4b4f538702afc00969bf75b74bbf9d2ddd5e8ea Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 1 Jul 2026 11:00:59 -0700 Subject: [PATCH] More docs cleanup (#42610) * v6: Preserve component radii after bumping $radius to 1rem Changing the default $radius from .5rem to 1rem doubled every step in the $radii scale. Remap component and root radius token references down the scale so their absolute radii stay the same (--radius-5 -> --radius-3, --radius-7 -> --radius-4, --radius-9 -> --radius-7), and align the border-radius mixin defaults. The $radii map and .rounded-* utilities are intentionally left on the new base so opt-in utilities become rounder. * Revert "v6: Preserve component radii after bumping $radius to 1rem" This reverts commit 2408a015a34927cd9a590481170d6bea6b867add. * Add --box-shadow-xs token and .shadow-xs utility Introduce a smaller box shadow between the existing default and sm sizes, and expose it through the shadow utilities. * Docs: collapse page meta dependencies into a count with tooltip Replace the inline list of dependency links with a single count that reveals the full list on hover, and drop the now-unused .bd-page-meta styles. * Docs: shrink the table of contents as the footer scrolls into view Add a small docs helper that tracks how far the footer overlaps the viewport and exposes it as --bd-toc-footer-overlap, so the sticky TOC height shrinks instead of sliding under the footer. * Docs: refine example snippet and ad styling Tokenize the example radius via --bd-example-radius, give resizable examples an inset preview with a shadow-xs container, and simplify the Carbon ad wrapper. * Rebuild dist Regenerate compiled CSS and JS to pick up the new --box-shadow-xs token and resync the distributed bundles with source. * Revert "Rebuild dist" This reverts commit ecc1f7f8470bcf2bc6bba412e8b5ac622946e7cc. --- scss/_root.scss | 3 +- scss/_utilities.scss | 1 + site/src/assets/application.js | 2 + site/src/assets/partials/toc-height.js | 40 +++++++++++++++++++ site/src/components/PageMeta.astro | 33 ++++----------- .../shortcodes/ResizableExample.astro | 4 +- site/src/scss/_ads.scss | 7 +--- site/src/scss/_component-examples.scss | 16 ++++---- site/src/scss/_layout.scss | 9 ----- site/src/scss/_toc.scss | 3 +- 10 files changed, 67 insertions(+), 51 deletions(-) create mode 100644 site/src/assets/partials/toc-height.js diff --git a/scss/_root.scss b/scss/_root.scss index 5c24c1eb4b..b35cb1c56f 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -55,8 +55,9 @@ $root-tokens: defaults( // scss-docs-end root-border-var // scss-docs-start root-box-shadow-variables - --box-shadow: 0 .5rem 1rem rgb(0 0 0 / 15%), + --box-shadow-xs: 0 .0625rem .1875rem rgb(0 0 0 / 7.5%), --box-shadow-sm: 0 .125rem .25rem rgb(0 0 0 / 7.5%), + --box-shadow: 0 .5rem 1rem rgb(0 0 0 / 15%), --box-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 17.5%), --box-shadow-inset: inset 0 1px 2px rgb(0 0 0 / 7.5%), // scss-docs-end root-box-shadow-variables diff --git a/scss/_utilities.scss b/scss/_utilities.scss index be3e10c932..3bd0962005 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -108,6 +108,7 @@ $utilities: map.merge( class: shadow, values: ( null: var(--box-shadow), + xs: var(--box-shadow-xs), sm: var(--box-shadow-sm), lg: var(--box-shadow-lg), none: none, diff --git a/site/src/assets/application.js b/site/src/assets/application.js index 6ec0266da4..ee17cf6f04 100644 --- a/site/src/assets/application.js +++ b/site/src/assets/application.js @@ -12,6 +12,7 @@ import snippets from './partials/snippets.js' import stickyNav from './partials/sticky.js' import theme from './partials/theme.js' import tocDrawer from './partials/toc.js' +import tocHeight from './partials/toc-height.js' export default () => { sidebarScroll() @@ -19,4 +20,5 @@ export default () => { stickyNav() theme() tocDrawer() + tocHeight() } diff --git a/site/src/assets/partials/toc-height.js b/site/src/assets/partials/toc-height.js new file mode 100644 index 0000000000..c35123ecc7 --- /dev/null +++ b/site/src/assets/partials/toc-height.js @@ -0,0 +1,40 @@ +// NOTICE: Internal docs helpers — not shipped in Bootstrap; not for reuse. + +/* + * JavaScript for Bootstrap's docs (https://getbootstrap.com/) + * Copyright 2011-2026 The Bootstrap Authors + * Licensed under the Creative Commons Attribution 3.0 Unported License. + * For details, see https://creativecommons.org/licenses/by/3.0/. + */ + +export default () => { + const toc = document.querySelector('.bd-toc') + const footer = document.querySelector('.bd-footer') + + if (!toc || !footer) { + return + } + + let ticking = false + + const update = () => { + ticking = false + + // How far the footer has scrolled up into the viewport. When the footer is + // still below the fold this is negative, so clamp to 0. + const overlap = window.innerHeight - footer.getBoundingClientRect().top + + toc.style.setProperty('--bd-toc-footer-overlap', `${Math.max(0, overlap)}px`) + } + + const requestUpdate = () => { + if (!ticking) { + ticking = true + window.requestAnimationFrame(update) + } + } + + update() + window.addEventListener('scroll', requestUpdate, { passive: true }) + window.addEventListener('resize', requestUpdate, { passive: true }) +} diff --git a/site/src/components/PageMeta.astro b/site/src/components/PageMeta.astro index 1e7971e31d..c32ad648bc 100644 --- a/site/src/components/PageMeta.astro +++ b/site/src/components/PageMeta.astro @@ -1,8 +1,6 @@ --- import type { CollectionEntry } from 'astro:content' import { getConfig } from '@libs/config' -import { getVersionedDocsPath } from '@libs/path' -import { getSlug } from '@libs/utils' import GitHubIcon from '@components/icons/GitHubIcon.astro' import MdnIcon from '@components/icons/MdnIcon.astro' import CssTricksIcon from '@components/icons/CssTricksIcon.astro' @@ -37,16 +35,17 @@ const layerTooltips: Record = { const deps = frontmatter.deps ?? [] const depsCount = deps.length +const depsTitles = deps.map((dep) => dep.title).join(', ') --- -
+
{ frontmatter.js === 'required' && (
- Requires JavaScript + Requires JS
) } @@ -56,7 +55,7 @@ const depsCount = deps.length - JavaScript is optional + JS Optional
) } @@ -98,27 +97,9 @@ const depsCount = deps.length -
- Depends on - {deps.map((dep, i) => ( - - {i > 0 && ', '} - {dep.url?.startsWith('http') ? ( - - {dep.title} - - ) : dep.url ? ( - - {dep.title} - - ) : ( - - {dep.title} - - )} - - ))} -
+ + {depsCount} {depsCount === 1 ? 'dependency' : 'dependencies'} +
) } diff --git a/site/src/components/shortcodes/ResizableExample.astro b/site/src/components/shortcodes/ResizableExample.astro index 525ebed8d7..6f389bbec4 100644 --- a/site/src/components/shortcodes/ResizableExample.astro +++ b/site/src/components/shortcodes/ResizableExample.astro @@ -63,9 +63,9 @@ const simplifiedMarkup = markup.replace( ---
-
+
diff --git a/site/src/scss/_ads.scss b/site/src/scss/_ads.scss index e6df8dbb23..ce1bc3444c 100644 --- a/site/src/scss/_ads.scss +++ b/site/src/scss/_ads.scss @@ -1,13 +1,10 @@ @use "../../../scss/mixins/border-radius" as *; -// stylelint-disable selector-max-id, declaration-no-important +// stylelint-disable selector-max-id @layer custom { #carbon-responsive .carbon-responsive-wrap { - padding: 1rem !important; - background-color: var(--bs-bg-1) !important; - border: 0 !important; - @include border-radius(var(--radius-8) !important); + @include border-radius(var(--radius-7)); } .carbon-img { position: relative; diff --git a/site/src/scss/_component-examples.scss b/site/src/scss/_component-examples.scss index ec3a27b76b..f4365c70ba 100644 --- a/site/src/scss/_component-examples.scss +++ b/site/src/scss/_component-examples.scss @@ -9,12 +9,13 @@ .bd-code-snippet { --bd-example-padding: 1.25rem; --bd-example-border-color: var(--bs-border-subtle); - --bd-example-inner-radius: calc(var(--radius-5) - 1px); + --bd-example-radius: var(--radius-5); + --bd-example-inner-radius: calc(var(--bd-example-radius) - 1px); margin: 0; background-color: var(--bd-pre-bg); border: 1px solid var(--bd-example-border-color); - @include border-radius(var(--radius-5)); + @include border-radius(var(--bd-example-radius)); .bd-example { &:first-child { @@ -41,7 +42,7 @@ border-bottom: 1px solid var(--bd-example-border-color); &:first-child { - @include border-top-radius(calc(var(--radius-5) - 1px)); + @include border-top-radius(var(--bd-example-inner-radius)); } &:not(:first-child) { @@ -69,7 +70,7 @@ min-height: 120px; padding: var(--bs-spacer); background-color: var(--bs-bg-1); - @include border-radius(var(--radius-5)); + @include border-radius(var(--bd-example-radius)); } > .menu.position-static { @@ -202,7 +203,7 @@ color: var(--bs-fg-3); background-color: var(--bs-bg-1); border: var(--bs-border-width) solid var(--bs-border-color); - @include border-radius(var(--radius-5)); + @include border-radius(var(--bd-example-radius)); } } @@ -360,6 +361,8 @@ .bd-example-resizable { position: relative; + padding: .375rem; + overflow: hidden; } .bd-resizable-container { @@ -368,8 +371,7 @@ overflow: hidden; resize: horizontal; background-color: var(--bs-bg-body); - border: 1px dashed var(--bs-border-color); - @include border-radius(var(--radius-5)); + @include border-radius(var(--radius-4)); } // diff --git a/site/src/scss/_layout.scss b/site/src/scss/_layout.scss index ee2b32807b..e4a2a6c28d 100644 --- a/site/src/scss/_layout.scss +++ b/site/src/scss/_layout.scss @@ -66,13 +66,4 @@ min-width: 1px; // Fix width when bd-content contains a `
` https://github.com/twbs/bootstrap/issues/25410
     max-width: 100%;
   }
-
-  // .bd-page-meta {
-  //   > :not(:last-child)::after {
-  //     display: block;
-  //     margin-inline-start: .25rem;
-  //     margin-inline-end: -.375rem;
-  //     content: "•";
-  //   }
-  // }
 }
diff --git a/site/src/scss/_toc.scss b/site/src/scss/_toc.scss
index 849721dc50..c9954423c7 100644
--- a/site/src/scss/_toc.scss
+++ b/site/src/scss/_toc.scss
@@ -16,7 +16,7 @@
       gap: 1rem;
       justify-content: flex-start;
       width: 100%;
-      height: calc(100vh - var(--bd-navbar-offset) - 1rem);
+      height: calc(100vh - var(--bd-navbar-offset) - 2.25rem - var(--bd-toc-footer-overlap, 0px));
       padding-inline-end: .25rem;
       margin-inline-end: -.25rem;
       overflow-y: auto;
@@ -79,6 +79,7 @@
     @include media-breakpoint-up(lg) {
       flex: 1 1 auto;
       min-height: 0;
+      margin-bottom: auto;
       overflow-y: auto;
     }
 
-- 
2.47.3