Generate SCSS and JS docs snippets from source markers (#2798)

core/scss/_variables.scss

@@ -795,6 +795,7 @@ $kbd-border-radius: var(--#{$prefix}border-radius) !default;
 $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
 
 // Avatars
+// scss-docs-start avatar-variables
 $avatar-size: 2.5rem !default;
 $avatar-status-size: 0.75rem !default;
 $avatar-font-size: 1rem !default;
@@ -860,6 +861,7 @@ $avatar-sizes: (
 $avatar-border-radius: var(--#{$prefix}border-radius-pill) !default;
 $avatar-font-size: $h4-font-size !default;
 $avatar-list-spacing: -0.5;
+// scss-docs-end avatar-variables
 
 $link-decoration: none !default;
 $link-hover-decoration: underline !default;
@@ -1025,6 +1027,7 @@ $transition-time: 0.3s !default;
 $overlay-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%) !default;
 
 // Alerts
+// scss-docs-start alert-variables
 $alert-padding-y: 0.75rem !default;
 $alert-padding-x: 1rem !default;
 $alert-margin-bottom: 1rem !default;
@@ -1036,8 +1039,10 @@ $alert-heading-margin-bottom: 0.25rem !default;
 $alert-icon-size: 1.25rem !default;
 $alert-padding-inline-end: 3rem !default;
 $alert-gap: 1rem !default;
+// scss-docs-end alert-variables
 
 // Breadcrumb
+// scss-docs-start breadcrumb-variables
 $breadcrumb-font-size: null !default;
 $breadcrumb-padding-y: 0 !default;
 $breadcrumb-padding-x: 0 !default;
@@ -1057,8 +1062,10 @@ $breadcrumb-variants: (
   arrows: '›',
   bullets: '\02022',
 ) !default;
+// scss-docs-end breadcrumb-variables
 
 // Badges
+// scss-docs-start badge-variables
 $badge-font-size: $font-size-reative-sm !default;
 $badge-font-size-sm: $font-size-reative-xs !default;
 $badge-font-size-lg: $font-size-reative-md !default;
@@ -1073,6 +1080,7 @@ $badge-gap: 0.25rem !default;
 $badge-padding-x-sm: 0.25rem !default;
 $badge-padding-y-lg: 0.25rem !default;
 $badge-padding-x-lg: 0.5rem !default;
+// scss-docs-end badge-variables
 
 // Buttons + Forms
 $input-btn-border-width: var(--#{$prefix}border-width) !default;
@@ -1107,6 +1115,7 @@ $input-btn-font-size-xl: $h1-font-size !default;
 $input-btn-line-height-xl: 2rem !default;
 $input-btn-icon-size-xl: 2rem !default;
 
+// scss-docs-start btn-variables
 $btn-border-width: $input-btn-border-width !default;
 
 $btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
@@ -1157,8 +1166,10 @@ $btn-padding-y-sm: $input-btn-padding-y-sm !default;
 $btn-padding-x-sm: $input-btn-padding-x-sm !default;
 $btn-padding-y-lg: $input-btn-padding-y-lg !default;
 $btn-padding-x-lg: $input-btn-padding-x-lg !default;
+// scss-docs-end btn-variables
 
 // Inputs
+// scss-docs-start input-variables
 $input-bg: var(--#{$prefix}bg-forms) !default;
 $input-disabled-color: null !default;
 $input-disabled-bg: var(--#{$prefix}bg-forms-disabled) !default;
@@ -1210,8 +1221,10 @@ $input-height-inner-quarter: add($input-line-height, calc($input-padding-y * 0.5
 $input-height: add($input-line-height, add(calc($input-padding-y * 2), $input-height-border, false)) !default;
 $input-height-sm: add($input-line-height-sm, add(calc($input-padding-y-sm * 2), $input-height-border, false)) !default;
 $input-height-lg: add($input-line-height-lg, add(calc($input-padding-y-lg * 2), $input-height-border, false)) !default;
+// scss-docs-end input-variables
 
 // Cards
+// scss-docs-start card-variables
 $card-spacer-y: 1.25rem !default;
 $card-spacer-x: 1.25rem !default;
 $card-title-spacer-y: 1.25rem !default;
@@ -1265,6 +1278,9 @@ $card-options-link-min-width: 1rem !default;
 $card-options-link-margin-start: 0.25rem !default;
 $card-avatar-height: 3.5rem !default;
 $card-avatar-ring-width: 0.25rem !default;
+// scss-docs-end card-variables
+
+// scss-docs-start ribbon-variables
 $ribbon-offset: 0.75rem !default;
 $ribbon-padding-y: 0.25rem !default;
 $ribbon-padding-x: 0.75rem !default;
@@ -1273,8 +1289,10 @@ $ribbon-top-width: 2rem !default;
 $ribbon-top-padding-y: 0.5rem !default;
 $ribbon-bookmark-border-size: 1rem !default;
 $ribbon-bookmark-notch-width: 0.5rem !default;
+// scss-docs-end ribbon-variables
 
 // Accordion
+// scss-docs-start accordion-variables
 $accordion-padding-y: 1rem !default;
 $accordion-padding-x: 1.25rem !default;
 $accordion-border-width: var(--#{$prefix}border-width) !default;
@@ -1291,8 +1309,10 @@ $accordion-button-active-color: inherit !default;
 $accordion-btn-gap: 0.75rem !default;
 $accordion-header-gap: 1rem !default;
 $accordion-tabs-gap: 0.75rem !default;
+// scss-docs-end accordion-variables
 
 // Carousel
+// scss-docs-start carousel-variables
 
 $carousel-control-color: $white !default;
 $carousel-control-width: 15% !default;
@@ -1328,6 +1348,7 @@ $carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4
 $carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4
 $carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4
 $carousel-indicators-vertical-margin-inline-end: 1rem !default;
+// scss-docs-end carousel-variables
 
 // Close
 $btn-close-width: 1em !default;
@@ -1344,11 +1365,14 @@ $btn-close-filter: null !default;
 $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
 
 // Datagrid
+// scss-docs-start datagrid-variables
 $datagrid-padding: 1.5rem !default;
 $datagrid-item-width: 15rem !default;
 $datagrid-title-margin-bottom: 0.25rem !default;
+// scss-docs-end datagrid-variables
 
 // Empty
+// scss-docs-start empty-variables
 $empty-padding: 1rem !default;
 $empty-padding-md: 3rem !default;
 $empty-icon-size: 3rem !default;
@@ -1358,8 +1382,10 @@ $empty-header-margin-bottom: 1rem !default;
 $empty-header-font-size: 4rem !default;
 $empty-title-margin-bottom: 0.5rem !default;
 $empty-action-margin-top: 1.5rem !default;
+// scss-docs-end empty-variables
 
 // Dropdown
+// scss-docs-start dropdown-variables
 $dropdown-min-width: 11rem !default;
 $dropdown-padding-x: 0 !default;
 $dropdown-padding-y: 0.25rem !default;
@@ -1398,6 +1424,7 @@ $dropdown-arrow-offset: 0.25rem !default;
 $dropdown-arrow-inset: 0.75rem !default;
 $dropdown-dropend-offset: 0.25rem !default;
 $dropdown-menu-card-min-width: 20rem !default;
+// scss-docs-end dropdown-variables
 
 // Dropdown dark
 $dropdown-dark-color: $gray-300 !default;
@@ -1414,6 +1441,7 @@ $dropdown-dark-link-disabled-color: $gray-500 !default;
 $dropdown-dark-header-color: $gray-500 !default;
 
 // Tooltip
+// scss-docs-start tooltip-variables
 $tooltip-font-size: $font-size-sm !default;
 $tooltip-max-width: 200px !default;
 $tooltip-color: var(--#{$prefix}text-inverted) !default;
@@ -1426,6 +1454,7 @@ $tooltip-margin: null !default; // TODO: remove this in v6
 
 $tooltip-arrow-width: 0.8rem !default;
 $tooltip-arrow-height: 0.4rem !default;
+// scss-docs-end tooltip-variables
 
 // Loader
 $loader-size: 2.5rem !default;
@@ -1434,6 +1463,7 @@ $list-group-header-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $list-group-header-color: var(--#{$prefix}gray-500) !default;
 
 // Modals
+// scss-docs-start modal-variables
 $modal-inner-padding: 1.5rem !default;
 
 $modal-footer-margin-between: 0.75rem !default;
@@ -1481,8 +1511,10 @@ $modal-body-title-margin-bottom: 1rem !default;
 $modal-footer-padding-y: 0.75rem !default;
 
 $modal-status-size: $border-width-wide !default;
+// scss-docs-end modal-variables
 
 // Nav
+// scss-docs-start nav-variables
 $nav-link-padding-y: 0.5rem !default;
 $nav-link-padding-x: 0.75rem !default;
 $nav-link-font-size: null !default;
@@ -1525,8 +1557,10 @@ $nav-vertical-nested-margin-start: 1.25rem !default;
 $nav-vertical-nested-padding-start: 0.5rem !default;
 $nav-link-toggle-padding-x: 0.25rem !default;
 $nav-link-icon-margin-end: 0.5rem !default;
+// scss-docs-end nav-variables
 
 // Navbar
+// scss-docs-start navbar-variables
 $navbar-height: 3.5rem !default;
 $navbar-padding-y: 0.25rem !default;
 $navbar-padding-x: null !default;
@@ -1577,6 +1611,7 @@ $navbar-overlap-height: 9rem !default;
 $navbar-nav-link-hover-bg: color-transparent(var(--#{$prefix}nav-link-color), 0.04) !default;
 
 $navbar-active-border-color: var(--#{$prefix}primary) !default;
+// scss-docs-end navbar-variables
 
 // Sidebar
 $sidebar-width: 15rem !default;
@@ -1587,6 +1622,7 @@ $page-title-line-height: var(--#{$prefix}line-height-h2) !default;
 $page-title-font-weight: var(--#{$prefix}font-weight-headings) !default;
 
 // Popover
+// scss-docs-start popover-variables
 $popover-font-size: $font-size-sm !default;
 $popover-bg: var(--#{$prefix}bg-surface) !default;
 $popover-max-width: 276px !default;
@@ -1608,6 +1644,7 @@ $popover-body-padding-x: 0.5rem !default;
 
 $popover-arrow-width: 1rem !default;
 $popover-arrow-height: 0.5rem !default;
+// scss-docs-end popover-variables
 
 // Footer
 $footer-padding-y: 2rem !default;
@@ -1616,6 +1653,7 @@ $footer-border-color: var(--#{$prefix}border-color) !default;
 $footer-color: var(--#{$prefix}gray-500) !default;
 
 // Pagination
+// scss-docs-start pagination-variables
 $pagination-padding-y: calc(0.25rem + 1px) !default;
 $pagination-padding-x: 0.25rem !default;
 $pagination-padding-y-sm: 0.25rem !default;
@@ -1662,8 +1700,10 @@ $pagination-link-min-width: 2rem !default;
 $page-text-padding-x: 0.5rem !default;
 $page-item-subtitle-margin-bottom: 2px !default;
 $page-item-subtitle-font-size: 12px !default;
+// scss-docs-end pagination-variables
 
 // Statuses
+// scss-docs-start status-variables
 $status-dot-size: 0.5rem !default;
 $status-height: 1.5rem !default;
 $status-icon-size: $icon-size !default;
@@ -1672,8 +1712,10 @@ $status-padding-x: 0.75rem !default;
 $status-gap: 0.5rem !default;
 $status-indicator-size: 2.5rem !default;
 $status-circle-size: 0.75rem !default;
+// scss-docs-end status-variables
 
 // Steps
+// scss-docs-start steps-variables
 $steps-border-width: 2px !default;
 $steps-color: var(--#{$prefix}primary) !default;
 $steps-inactive-color: var(--#{$prefix}border-color) !default;
@@ -1685,8 +1727,10 @@ $steps-vertical-item-gap: 1rem !default;
 $steps-vertical-connector-gap: 1rem !default;
 $steps-dot-offset: 6px !default;
 $steps-dot-offset-counter: -2px !default;
+// scss-docs-end steps-variables
 
 // Spinner
+// scss-docs-start spinner-variables
 $spinner-width: 1.5rem !default;
 $spinner-height: 1.5rem !default;
 $spinner-vertical-align: -0.125em !default;
@@ -1696,8 +1740,10 @@ $spinner-animation-speed: 0.75s !default;
 $spinner-width-sm: 1rem !default;
 $spinner-height-sm: 1rem !default;
 $spinner-border-width-sm: 1px !default;
+// scss-docs-end spinner-variables
 
 // Tables
+// scss-docs-start table-variables
 $table-bg: transparent !default;
 $table-color: inherit !default;
 $table-accent-bg: transparent !default;
@@ -1753,8 +1799,10 @@ $table-sort-asc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/
 $table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M5 10l3 -3l3 3'/></svg>") !default;
 $table-sort-icon-size: 1rem !default;
 $table-sort-icon-margin-start: 0.25rem !default;
+// scss-docs-end table-variables
 
 // Toasts
+// scss-docs-start toast-variables
 $toast-max-width: 350px !default;
 $toast-padding-x: 0.75rem !default;
 $toast-padding-y: 0.5rem !default;
@@ -1770,14 +1818,18 @@ $toast-spacing: $container-padding-x !default;
 $toast-header-color: var(--#{$prefix}gray-500) !default;
 $toast-header-background-color: color-transparent(var(--#{$prefix}body-bg), 0.85) !default;
 $toast-header-border-color: $toast-border-color !default;
+// scss-docs-end toast-variables
 
 // Tracking
+// scss-docs-start tracking-variables
 $tracking-height: 1.5rem !default;
 $tracking-gap-width: 0.125rem !default;
 $tracking-border-radius: var(--#{$prefix}border-radius) !default;
 $tracking-block-min-width: 0.25rem !default;
+// scss-docs-end tracking-variables
 
 // Progress
+// scss-docs-start progress-variables
 $progress-height: 0.5rem !default;
 $progress-font-size: $font-size-base * 0.75 !default;
 $progress-bg: var(--#{$prefix}border-color) !default;
@@ -1796,6 +1848,7 @@ $progressbg-value-padding-start: 2rem !default;
 $progress-separated-ring-width: 2px !default;
 $progress-steps-gap: 0.25rem !default;
 $progress-steps-item-height: 0.25rem !default;
+// scss-docs-end progress-variables
 
 // List Group
 $list-group-color: var(--#{$prefix}body-color) !default;
@@ -1996,6 +2049,7 @@ $form-feedback-icon-invalid: str-replace(
   '%23'
 ) !default;
 // Form validation states
+// scss-docs-start form-validation-variables
 $form-validation-states: (
   'valid': (
     'color': var(--#{$prefix}form-valid-color),
@@ -2014,6 +2068,7 @@ $form-validation-states: (
     'border-color': var(--#{$prefix}form-invalid-border-color),
   ),
 ) !default;
+// scss-docs-end form-validation-variables
 
 // Form feedback tooltip
 $form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
@@ -2043,6 +2098,7 @@ $legend-size: 0.75em !default;
 $legend-border-radius: var(--#{$prefix}border-radius-sm) !default;
 
 // Offcanvas
+// scss-docs-start offcanvas-variables
 $offcanvas-padding-y: $modal-inner-padding !default;
 $offcanvas-padding-x: $modal-inner-padding !default;
 $offcanvas-horizontal-width: 400px !default;
@@ -2058,6 +2114,7 @@ $offcanvas-backdrop-bg: $backdrop-bg !default;
 $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
 $offcanvas-border-color: var(--#{$prefix}border-color) !default;
 $offcanvas-narrow-width: 20rem !default;
+// scss-docs-end offcanvas-variables
 
 // Chat
 $chat-bubbles-gap: 1rem !default;
@@ -2071,6 +2128,7 @@ $toolbar-gutter: 0.5rem !default;
 $stars-gap: 0.25rem !default;
 
 // Tags
+// scss-docs-start tag-variables
 $tag-height: 1.5rem !default;
 $tag-padding-x: 0.5rem !default;
 $tag-gap: 0.5rem !default;
@@ -2085,8 +2143,10 @@ $tag-addon-margin-start: -0.25rem !default;
 $tag-icon-margin-end: -0.125rem !default;
 $tag-icon-size: 1rem !default;
 $tag-check-size: 1rem !default;
+// scss-docs-end tag-variables
 
 // Segmented nav
+// scss-docs-start segmented-nav-variables
 $nav-segmented-height: 2.5rem !default;
 $nav-segmented-padding: 2px !default;
 $nav-segmented-radius: 6px !default;
@@ -2105,8 +2165,10 @@ $nav-segmented-radius-lg: 8px !default;
 $nav-segmented-link-padding-x-lg: 1rem !default;
 $nav-segmented-link-gap-lg: 0.5rem !default;
 $nav-segmented-link-icon-size-lg: 1.5rem !default;
+// scss-docs-end segmented-nav-variables
 
 // Charts
+// scss-docs-start chart-variables
 $chart-min-height: 10rem !default;
 $chart-height-sm: 2.5rem !default;
 $chart-height-lg: 15rem !default;
@@ -2117,6 +2179,7 @@ $chart-sparkline-height-sm: 1.5rem !default;
 $chart-sparkline-width-square: 2.5rem !default;
 $chart-sparkline-width-wide: 6rem !default;
 $chart-sparkline-label-icon-size: 1rem !default;
+// scss-docs-end chart-variables
 
 // Patterns
 $pattern-size: 0.5rem !default;
@@ -2189,8 +2252,10 @@ $form-selectgroup-gap: 0.5rem !default;
 $form-selectgroup-icon-margin-x: -0.25rem !default;
 
 // Placeholders
+// scss-docs-start placeholder-variables
 $placeholder-opacity-min: 0.1 !default;
 $placeholder-opacity-max: 0.2 !default;
+// scss-docs-end placeholder-variables
 
 // Image thumbnails
 $thumbnail-padding: 0.25rem !default;