docs: update content

Author: mrholek

packages/docs/components/accordion.md

@@ -52,7 +52,7 @@ Click the accordions below to expand/collapse the accordion content.
   </CAccordionItem>
 </CAccordion>
 :::
-```vue
+```markup
 <CAccordion>
   <CAccordionItem :item-key="1">
     <CAccordionHeader>
@@ -143,7 +143,7 @@ Add `flush` to remove the default `background-color`, some borders, and some rou
   </CAccordionItem>
 </CAccordion>
 :::
-```vue
+```markup
 <CAccordion flush>
   <CAccordionItem>
     <CAccordionHeader>
@@ -234,7 +234,7 @@ Add `always-open` property to make accordion items stay open when another item i
   </CAccordionItem>
 </CAccordion>
 :::
-```vue
+```markup
 <CAccordion :active-item-key="2" always-open>
   <CAccordionItem :item-key="1">
     <CAccordionHeader>
@@ -284,30 +284,7 @@ Add `always-open` property to make accordion items stay open when another item i
 
 Vue 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
 
@@ -321,39 +298,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/components/alert.md

@@ -18,8 +18,7 @@ Vue Alert is prepared for any length of text, as well as an optional close butto
 <CAlert color="light">A simple light alert—check it out!</CAlert>
 <CAlert color="dark">A simple dark alert—check it out!</CAlert>
 :::
-
-```vue
+```markup
 <CAlert color="primary">A simple primary alert—check it out!</CAlert>
 <CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
 <CAlert color="success">A simple success alert—check it out!</CAlert>
@@ -38,7 +37,7 @@ Click the button below to show an alert (hidden with inline styles to start), th
 <CAlert color="primary" :visible="liveExampleVisible" dismissible @close="() => { liveExampleVisible = false }">A simple primary alert—check it out!</CAlert>
 <CButton color="primary" @click="() => { liveExampleVisible = true }">Show live alert</CButton>
 :::
-```vue
+```markup
 <CAlert color="primary" :visible="liveExampleVisible" dismissible @close="() => { liveExampleVisible = false }">A simple primary alert—check it out!</CAlert>
 <CButton color="primary" @click="() => { liveExampleVisible = true }">Show live alert</CButton>
 ```
@@ -73,7 +72,7 @@ Use the `<CAlertLink>` component to immediately give matching colored links insi
 </CAlert>
 :::
 
-```vue
+```markup
 <CAlert color="primary">
   A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
 </CAlert>
@@ -113,7 +112,7 @@ Alert can also incorporate supplementary HTML elements like heading, paragraph,
 </CAlert>
 :::
 
-```vue
+```markup
 <CAlert color="success" v-bind:visible="true">
   <CAlertHeading>Well done!</CAlertHeading>
   <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
@@ -135,7 +134,7 @@ Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/f
   </div>
 </CAlert>
 :::
-```vue
+```markup
 <CAlert color="primary" class="d-flex align-items-center">
   <svg class="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
     <rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" class="ci-primary"></path>
@@ -174,7 +173,7 @@ Need more than one icon for your alerts? Consider using [CoreUI Icons](https://i
   </div>
 </CAlert>
 :::
-```vue
+```markup
 <CAlert color="primary" class="d-flex align-items-center">
   <CIcon icon="cil-info" class="flex-shrink-0 me-2" width="24" height="24" />
   <div>
@@ -216,7 +215,7 @@ Use `variant="solid"` to change contextual colors to solid.
 <CAlert color="dark" variant="solid">A simple solid dark alert—check it out!</CAlert>
 :::
 
-```vue
+```markup
 <CAlert color="primary" variant="solid">A simple solid primary alert—check it out!</CAlert>
 <CAlert color="secondary" variant="solid">A simple solid secondary alert—check it out!</CAlert>
 <CAlert color="success" variant="solid">A simple solid success alert—check it out!</CAlert>
@@ -237,7 +236,7 @@ Alerts can also be easily dismissed. Just add the `dismissible` prop.
 </CAlert>
 :::
 
-```vue
+```markup
 <CAlert color="warning" dismissible @close="alert">
   <strong>Go right ahead</strong> and click that dimiss over there on the right.
 </CAlert>
@@ -274,16 +273,7 @@ Alerts can also be easily dismissed. Just add the `dismissible` prop.
 
 Vue 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
 
@@ -297,18 +287,8 @@ 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
 
 !!!include(./api/alert/CAlert.api.md)!!!

packages/docs/components/badge.md

@@ -187,14 +187,7 @@ Apply the `shape="rounded-pill"` prop to make badges rounded.
 
 Vue 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
 
@@ -208,18 +201,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/components/breadcrumb.md

@@ -113,17 +113,7 @@ For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb p
 
 Vue 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
 
@@ -137,19 +127,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/components/button.md

@@ -278,22 +278,8 @@ Additional utilities can be used to adjust the alignment of buttons when horizon
 
 Vue 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
 
@@ -307,75 +293,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