docs: update SCSS docs

Author: mrholek

packages/docs/content/components/accordion.mdx

@@ -150,30 +150,7 @@ Add `alwaysOpen` property to make react accordion items stay open when another i
 
 React accordions use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
-```sass
---cui-accordion-color: #{color-contrast($accordion-bg)};
---cui-accordion-bg: #{$accordion-bg};
---cui-accordion-transition: #{$accordion-transition};
---cui-accordion-border-color: #{$accordion-border-color};
---cui-accordion-border-width: #{$accordion-border-width};
---cui-accordion-border-radius: #{$accordion-border-radius};
---cui-accordion-inner-border-radius: #{$accordion-inner-border-radius};
---cui-accordion-btn-padding-x: #{$accordion-button-padding-x};
---cui-accordion-btn-padding-y: #{$accordion-button-padding-y};
---cui-accordion-btn-color: #{$accordion-color};
---cui-accordion-btn-bg: #{$accordion-button-bg};
---cui-accordion-btn-icon: #{escape-svg($accordion-button-icon)};
---cui-accordion-btn-icon-width: #{$accordion-icon-width};
---cui-accordion-btn-icon-transform: #{$accordion-icon-transform};
---cui-accordion-btn-icon-transition: #{$accordion-icon-transition};
---cui-accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
---cui-accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
---cui-accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
---cui-accordion-body-padding-x: #{$accordion-body-padding-x};
---cui-accordion-body-padding-y: #{$accordion-body-padding-y};
---cui-accordion-active-color: #{$accordion-button-active-color};
---cui-accordion-active-bg: #{$accordion-button-active-bg};
-```
+<ScssDocs file="_accordion.scss" capture="accordion-css-vars"/>
 
 #### How to use CSS variables
 
@@ -187,39 +164,7 @@ return <CAccordion style={vars}>...</CAccordion>
 
 ### SASS variables
 
-```sass
-$accordion-padding-y:                     1rem;
-$accordion-padding-x:                     1.25rem;
-$accordion-color:                         var(--cui-body-color);
-$accordion-bg:                            $body-bg;
-$accordion-border-width:                  $border-width;
-$accordion-border-color:                  var(--cui-border-color);
-$accordion-border-radius:                 $border-radius;
-$accordion-inner-border-radius:           subtract($accordion-border-radius, $accordion-border-width);
-
-$accordion-body-padding-y:                $accordion-padding-y;
-$accordion-body-padding-x:                $accordion-padding-x;
-
-$accordion-button-padding-y:              $accordion-padding-y;
-$accordion-button-padding-x:              $accordion-padding-x;
-$accordion-button-color:                  $accordion-color;
-$accordion-button-bg:                     var(--cui-accordion-bg);
-$accordion-transition:                    $btn-transition, border-radius .15s ease;
-$accordion-button-active-bg:              tint-color($component-active-bg, 90%);
-$accordion-button-active-color:           shade-color($primary, 10%);
-
-$accordion-button-focus-border-color:     $input-focus-border-color;
-$accordion-button-focus-box-shadow:       $btn-focus-box-shadow;
-
-$accordion-icon-width:                    1.25rem;
-$accordion-icon-color:                    $accordion-button-color;
-$accordion-icon-active-color:             $accordion-button-active-color;
-$accordion-icon-transition:               transform .2s ease-in-out;
-$accordion-icon-transform:                rotate(-180deg);
-
-$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
-$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
-```
+<ScssDocs file="_variables.scss" capture="accordion-variables"/>
 
 ## API
 

packages/docs/content/components/alert.mdx

@@ -231,16 +231,7 @@ React Alert component can also be easily dismissed. Just add the `dismissible` p
 
 React alerts use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
-```sass
---cui-alert-bg: transparent;
---cui-alert-padding-x: #{$alert-padding-x};
---cui-alert-padding-y: #{$alert-padding-y};
---cui-alert-margin-bottom: #{$alert-margin-bottom};
---cui-alert-color: inherit;
---cui-alert-border-color: transparent;
---cui-alert-border: #{$alert-border-width} solid var(--cui-alert-border-color);
---cui-alert-border-radius: #{$alert-border-radius};
-```
+<ScssDocs file="_alert.scss" capture="alert-css-vars"/>
 
 #### How to use CSS variables
 
@@ -254,18 +245,7 @@ return <CAlert style={vars}>...</CAlert>
 
 ### SASS variables
 
-```sass
-$alert-padding-y:               $spacer;
-$alert-padding-x:               $spacer;
-$alert-margin-bottom:           1rem;
-$alert-border-radius:           $border-radius;
-$alert-link-font-weight:        $font-weight-bold;
-$alert-border-width:            $border-width;
-$alert-bg-scale:                -80%;
-$alert-border-scale:            -70%;
-$alert-color-scale:             40%;
-$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side
-```
+<ScssDocs file="_variables.scss" capture="alert-variables"/>
 
 ## API
 

packages/docs/content/components/badge.mdx

@@ -123,14 +123,7 @@ Apply the `shape="rounded-pill"` prop to make badges rounded.
 
 React badges use local CSS variables on `.badges` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
-```sass
---cui-badge-padding-x: #{$badge-padding-x};
---cui-badge-padding-y: #{$badge-padding-y};
---cui-badge-font-size: #{$badge-font-size};
---cui-badge-font-weight: #{$badge-font-weight};
---cui-badge-color: #{$badge-color};
---cui-badge-border-radius: #{$badge-border-radius};
-```
+<ScssDocs file="_badge.scss" capture="badge-css-vars"/>
 
 #### How to use CSS variables
 
@@ -144,18 +137,7 @@ return <CBadge style={vars}>...</CBadge>
 
 ### SASS variables
 
-```sass
-$badge-font-size:                   .75em;
-$badge-font-weight:                 $font-weight-bold;
-$badge-color:                       $high-emphasis-inverse;
-$badge-padding-y:                   .35em;
-$badge-padding-x:                   .65em;
-$badge-border-radius:               $border-radius;
-
-$badge-font-size-sm:                .65em;
-$badge-padding-y-sm:                .3em;
-$badge-padding-x-sm:                .5em;
-```
+<ScssDocs file="_variables.scss" capture="badge-variables"/>
 
 ## API
 

packages/docs/content/components/breadcrumb.mdx

@@ -86,17 +86,7 @@ For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb p
 
 React breadcrumbs use local CSS variables on `.breadcrumb` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
-```sass
---cui-breadcrumb-padding-x: #{$breadcrumb-padding-x};
---cui-breadcrumb-padding-y: #{$breadcrumb-padding-y};
---cui-breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
---cui-breadcrumb-font-size: #{$breadcrumb-font-size};
---cui-breadcrumb-bg: #{$breadcrumb-bg};
---cui-breadcrumb-border-radius: #{$breadcrumb-border-radius};
---cui-breadcrumb-divider-color: #{$breadcrumb-divider-color};
---cui-breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
---cui-breadcrumb-item-active-color: #{$breadcrumb-active-color};
-```
+<ScssDocs file="_breadcrumb.scss" capture="breadcrumb-css-vars"/>
 
 #### How to use CSS variables
 
@@ -110,19 +100,7 @@ return <CBreadcrumb style={vars}>...</CBreadcrumb>
 
 ### SASS variables
 
-```sass
-$breadcrumb-font-size:              null;
-$breadcrumb-padding-y:              0;
-$breadcrumb-padding-x:              0;
-$breadcrumb-item-padding-x:         .5rem;
-$breadcrumb-margin-bottom:          1rem;
-$breadcrumb-bg:                     unset;
-$breadcrumb-divider-color:          $gray-600;
-$breadcrumb-active-color:           $gray-600;
-$breadcrumb-divider:                quote("/");
-$breadcrumb-divider-flipped:        $breadcrumb-divider;
-$breadcrumb-border-radius:          null;
-```
+<ScssDocs file="_variables.scss" capture="breadcrumb-variables"/>
 
 ## API
 

packages/docs/content/components/button.mdx

@@ -193,22 +193,7 @@ Additional utilities can be used to adjust the alignment of buttons when horizon
 
 React buttons use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
-```sass
---cui-btn-padding-x: #{$btn-padding-x};
---cui-btn-padding-y: #{$btn-padding-y};
---cui-btn-font-family: #{$btn-font-family};
---cui-btn-font-size: #{$btn-font-size};
---cui-btn-font-weight: #{$btn-font-weight};
---cui-btn-line-height: #{$btn-line-height};
---cui-btn-color: #{$body-color};
---cui-btn-bg: transparent;
---cui-btn-border-width: #{$btn-border-width};
---cui-btn-border-color: transparent;
---cui-btn-border-radius: #{$btn-border-radius};
---cui-btn-box-shadow: #{$btn-box-shadow};
---cui-btn-disabled-opacity: #{$btn-disabled-opacity};
---cui-btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--cui-btn-focus-shadow-rgb), .5);
-```
+<ScssDocs file="_buttons.scss" capture="btn-css-vars"/>
 
 #### How to use CSS variables
 
@@ -222,75 +207,7 @@ return <CButton style={vars}>...</CButton>
 
 ### SASS variables
 
-```sass
-$btn-padding-y:               $input-btn-padding-y;
-$btn-padding-x:               $input-btn-padding-x;
-$btn-font-family:             $input-btn-font-family;
-$btn-font-size:               $input-btn-font-size;
-$btn-line-height:             $input-btn-line-height;
-$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping
-
-$btn-padding-y-sm:            $input-btn-padding-y-sm;
-$btn-padding-x-sm:            $input-btn-padding-x-sm;
-$btn-font-size-sm:            $input-btn-font-size-sm;
-
-$btn-padding-y-lg:            $input-btn-padding-y-lg;
-$btn-padding-x-lg:            $input-btn-padding-x-lg;
-$btn-font-size-lg:            $input-btn-font-size-lg;
-
-$btn-border-width:            $input-btn-border-width;
-
-$btn-font-weight:             $font-weight-normal;
-$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
-$btn-focus-width:             $input-btn-focus-width;
-$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
-$btn-disabled-opacity:        .65;
-$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);
-
-$btn-link-color:              var(--cui-link-color);
-$btn-link-hover-color:        var(--cui-link-hover-color);
-$btn-link-disabled-color:     $gray-600;
-
-// Allows for customizing button radius independently from global border radius
-$btn-border-radius:           $border-radius;
-$btn-border-radius-sm:        $border-radius-sm;
-$btn-border-radius-lg:        $border-radius-lg;
-
-$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-
-$btn-hover-bg-shade-amount:       15%;
-$btn-hover-bg-tint-amount:        15%;
-$btn-hover-border-shade-amount:   20%;
-$btn-hover-border-tint-amount:    10%;
-$btn-active-bg-shade-amount:      20%;
-$btn-active-bg-tint-amount:       20%;
-$btn-active-border-shade-amount:  25%;
-$btn-active-border-tint-amount:   10%;
-
-// scss-docs-start button-variants
-$button-variants: (
-  "primary": btn-color-map($primary, $primary),
-  "secondary": btn-color-map($secondary, $secondary),
-  "success": btn-color-map($success, $success),
-  "danger": btn-color-map($danger, $danger),
-  "warning": btn-color-map($warning, $warning),
-  "info": btn-color-map($info, $info),
-  "light": btn-color-map($light, $light),
-  "dark": btn-color-map($dark, $dark)
-);
-
-$button-outline-ghost-variants: (
-  "primary": btn-outline-color-map($primary),
-  "secondary": btn-outline-color-map($secondary),
-  "success": btn-outline-color-map($success),
-  "danger": btn-outline-color-map($danger),
-  "warning": btn-outline-color-map($warning),
-  "info": btn-outline-color-map($info),
-  "light": btn-outline-color-map($light),
-  "dark": btn-outline-color-map($dark)
-);
-// scss-docs-end button-variants
-```
+<ScssDocs file="_variables.scss" capture="btn-variables"/>
 
 ## API
 

packages/docs/content/components/callout.mdx

@@ -61,16 +61,7 @@ Callout component is prepared for any length of text, as well as an optional ele
 
 React callouts use local CSS variables on `.callout` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
-```sass
---cui-callout-padding-x: #{$callout-padding-x};
---cui-callout-padding-y: #{$callout-padding-y};
---cui-callout-margin-x: #{$callout-margin-x};
---cui-callout-margin-y: #{$callout-margin-y};
---cui-callout-border-width: #{$callout-border-width};
---cui-callout-border-color: #{$callout-border-color};
---cui-callout-border-left-width: #{$callout-border-left-width};
---cui-callout-border-radius: #{$callout-border-radius};
-```
+<ScssDocs file="_callout.scss" capture="callout-css-vars"/>
 
 #### How to use CSS variables
 
@@ -84,28 +75,7 @@ return <CCallout style={vars}>...</CCallout>
 
 ### SASS variables
 
-```sass
-$callout-padding-y:                 $spacer;
-$callout-padding-x:                 $spacer;
-$callout-margin-y:                  $spacer;
-$callout-margin-x:                  0;
-$callout-border-radius:             $border-radius;
-$callout-border-width:              $border-width;
-$callout-border-color:              $border-color;
-$callout-border-left-width:         (4 * $callout-border-width);
-
-$callout-variants: (
-  "primary":    $primary,
-  "secondary":  $secondary,
-  "success":    $success,
-  "danger":     $danger,
-  "warning":    $warning,
-  "info":       $info,
-  "light":      $light,
-  "dark":       $dark
-);
-```
-
+<ScssDocs file="_variables.scss" capture="callout-variables"/>
 
 ## API
 

packages/docs/content/components/card.mdx

@@ -972,25 +972,7 @@ Just like with card groups, card footers will automatically line up.
 
 React cards use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
-```sass
---cui-card-spacer-y: #{$card-spacer-y};
---cui-card-spacer-x: #{$card-spacer-x};
---cui-card-title-spacer-y: #{$card-title-spacer-y};
---cui-card-border-width: #{$card-border-width};
---cui-card-border-color: #{$card-border-color};
---cui-card-border-radius: #{$card-border-radius};
---cui-card-box-shadow: #{$card-box-shadow};
---cui-card-inner-border-radius: #{$card-inner-border-radius};
---cui-card-cap-padding-y: #{$card-cap-padding-y};
---cui-card-cap-padding-x: #{$card-cap-padding-x};
---cui-card-cap-bg: #{$card-cap-bg};
---cui-card-cap-color: #{$card-cap-color};
---cui-card-height: #{$card-height};
---cui-card-color: #{$card-color};
---cui-card-bg: #{$card-bg};
---cui-card-img-overlay-padding: #{$card-img-overlay-padding};
---cui-card-group-margin: #{$card-group-margin};
-```
+<ScssDocs file="_card.scss" capture="card-css-vars"/>
 
 #### How to use CSS variables
 
@@ -1004,25 +986,7 @@ return <CCard style={vars}>...</CCard>
 
 ### SASS variables
 
-```sass
-$card-spacer-y:                     $spacer;
-$card-spacer-x:                     $spacer;
-$card-title-spacer-y:               $spacer * .5;
-$card-border-width:                 $border-width;
-$card-border-color:                 var(--cui-border-color-translucent);
-$card-border-radius:                $border-radius;
-$card-box-shadow:                   null;
-$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
-$card-cap-padding-y:                $card-spacer-y * .5;
-$card-cap-padding-x:                $card-spacer-x;
-$card-cap-bg:                       rgba($black, .03);
-$card-cap-color:                    unset;
-$card-height:                       null;
-$card-color:                        unset;
-$card-bg:                           $white;
-$card-img-overlay-padding:          $spacer;
-$card-group-margin:                 $grid-gutter-width * .5;
-```
+<ScssDocs file="_variables.scss" capture="card-variables"/>
 
 ## API