refactor: change .text-medium-emphasis to .text-body-secondary

2023-09-26 23:38:41 +02:00
parent 7381ae2837
commit 7048a791cc
34 changed files with 242 additions and 242 deletions
@@ -6,7 +6,7 @@
          <strong>Vue Accordion</strong>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Click the accordions below to expand/collapse the accordion content.
          </p>
          <DocsExample href="components/accordion.html">
@@ -62,7 +62,7 @@
          <strong>Vue Accordion</strong> <small>Flush</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add <code>flush</code> to remove the default
            <code>background-color</code>, some borders, and some rounded
            corners to render accordions edge-to-edge with their parent
@@ -121,7 +121,7 @@
          <strong>Vue Accordion</strong> <small>Always open</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add <code>always-open</code> property to make accordion items stay
            open when another item is opened.
          </p>
@@ -6,7 +6,7 @@
          <strong>Vue Breadcrumb</strong>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            The breadcrumb navigation provides links back to each previous page
            the user navigated through and shows the current location in a
            website or an application. You don’t have to add separators, because
@@ -6,7 +6,7 @@
          <strong>Card</strong> <small>Example</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Cards are built with as little markup and styles as possible but
            still manage to deliver a bunch of control and customization. Built
            with flexbox, they offer easy alignment and mix well with other
@@ -18,7 +18,7 @@
            as needed. They have no fixed width to start, so they&#39;ll fill
            the full width of its parent.
          </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Below is an example of a basic card with mixed content and a fixed
            width. Cards have no fixed width to start, so they&#39;ll naturally
            fill the full width of its parent element.
@@ -43,7 +43,7 @@
      <CCard class="mb-4">
        <CCardHeader> <strong>Card</strong> <small>Body</small> </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            The main block of a card is the <code>&lt;CCardBody&gt;</code>. Use
            it whenever you need a padded section within a card.
          </p>
@@ -61,14 +61,14 @@
          <strong>Card</strong> <small>Titles, text, and links</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Card titles are managed by
            <code>&lt;CCardTitle&gt;</code> component. Identically, links are
            attached and collected next to each other by
            <code>&lt;CCardLink&gt;</code>
            component.
          </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Subtitles are managed by
            <code>&lt;CCardSubtitle&gt;</code> component. If the
            <code>&lt;CCardTitle&gt;</code> also, the
@@ -80,7 +80,7 @@
            <CCard style="width: 18rem">
              <CCardBody>
                <CCardTitle>Card title</CCardTitle>
-                <CCardSubtitle class="mb-2 text-medium-emphasis"
+                <CCardSubtitle class="mb-2 text-body-secondary"
                  >Card subtitle</CCardSubtitle
                >
                <CCardText>
@@ -99,7 +99,7 @@
      <CCard class="mb-4">
        <CCardHeader> <strong>Card</strong> <small>Images</small> </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            <code>.card-img-top</code> places a picture to the top of the card.
            With <code>.card-text</code>, text can be added to the card. Text
            within <code>.card-text</code> can additionally be styled with the
@@ -125,7 +125,7 @@
          <strong>Card</strong> <small>List groups</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Create lists of content in a card with a flush list group.
          </p>
          <DocsExample href="components/card.html/#list-groups">
@@ -170,7 +170,7 @@
          <strong>Card</strong> <small>Kitchen sink</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Combine and match many content types to build the card you need, or
            throw everything in there. Shown below are image styles, blocks,
            text styles, and a list group—all wrapped in a fixed-width card.
@@ -205,7 +205,7 @@
          <strong>Card</strong> <small>Header and footer</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add an optional header and/or footer within a card.
          </p>
          <DocsExample href="components/card.html/#header-and-footer">
@@ -221,7 +221,7 @@
              </CCardBody>
            </CCard>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Card headers can be styled by adding ex.
            <code>component=&#34;h5&#34;</code>.
          </p>
@@ -266,7 +266,7 @@
                </CCardText>
                <CButton href="#">Go somewhere</CButton>
              </CCardBody>
-              <CCardFooter class="text-medium-emphasis">2 days ago</CCardFooter>
+              <CCardFooter class="text-body-secondary">2 days ago</CCardFooter>
            </CCard>
          </DocsExample>
        </CCardBody>
@@ -276,14 +276,14 @@
      <CCard class="mb-4">
        <CCardHeader> <strong>Card</strong> <small>Body</small> </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Cards assume no specific <code>width</code> to start, so they&#39;ll
            be 100% wide unless otherwise stated. You can adjust this as
            required with custom CSS, grid classes, grid Sass mixins, or
            services.
          </p>
          <h3>Using grid markup</h3>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Using the grid, wrap cards in columns and rows as needed.
          </p>
          <DocsExample href="components/card.html/#sizing">
@@ -315,7 +315,7 @@
            </CRow>
          </DocsExample>
          <h3>Using utilities</h3>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use some of
            <a href="https://coreui.io/docs/utilities/sizing/"
              >available sizing utilities</a
@@ -345,7 +345,7 @@
            </CCard>
          </DocsExample>
          <strong>Using custom CSS</strong>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use custom CSS in your stylesheets or as inline styles to set a
            width.
          </p>
@@ -370,7 +370,7 @@
          <strong>Card</strong> <small>Text alignment</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            You can instantly change the text arrangement of any card—in its
            whole or specific parts—with
            <a href="https://coreui.io/docs/utilities/text/#text-alignment"
@@ -419,7 +419,7 @@
          <strong>Card</strong> <small>Navigation</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add some navigation to a <code>&lt;CCardHeader&gt;</code> with our
            <code>&lt;CNav&gt;</code> component.
          </p>
@@ -482,7 +482,7 @@
          <strong>Card</strong> <small>Image caps</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Similar to headers and footers, cards can include top and bottom
            &#34;image caps&#34;—images at the top or bottom of a card.
          </p>
@@ -499,7 +499,7 @@
                      little bit longer.
                    </CCardText>
                    <CCardText>
-                      <small class="text-medium-emphasis"
+                      <small class="text-body-secondary"
                        >Last updated 3 mins ago</small
                      >
                    </CCardText>
@@ -516,7 +516,7 @@
                      little bit longer.
                    </CCardText>
                    <CCardText>
-                      <small class="text-medium-emphasis"
+                      <small class="text-body-secondary"
                        >Last updated 3 mins ago</small
                      >
                    </CCardText>
@@ -535,12 +535,12 @@
          <strong>Card</strong> <small>Card styles</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Cards include various options for customizing their backgrounds,
            borders, and color.
          </p>
          <h3>Background and color</h3>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use <code>color</code> property to change the appearance of a card.
          </p>
          <DocsExample href="components/card.html/#background-and-color">
@@ -584,7 +584,7 @@
            </CRow>
          </DocsExample>
          <h3>Border</h3>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use
            <a href="https://coreui.io/docs/utilities/borders/"
              >border utilities</a
@@ -626,7 +626,7 @@
            </template>
          </DocsExample>
          <h3>Top border</h3>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use
            <a href="https://coreui.io/docs/utilities/borders/"
              >border utilities</a
@@ -676,7 +676,7 @@
          <strong>Card</strong> <small>Card groups</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use card groups to render cards as a single, attached element with
            equal width and height columns. Card groups start off stacked and
            use <code>display: flex;</code> to become attached with uniform
@@ -694,7 +694,7 @@
                    longer.
                  </CCardText>
                  <CCardText>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                      >Last updated 3 mins ago</small
                    >
                  </CCardText>
@@ -709,7 +709,7 @@
                    additional content.
                  </CCardText>
                  <CCardText>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                      >Last updated 3 mins ago</small
                    >
                  </CCardText>
@@ -725,7 +725,7 @@
                    content than the first to show that equal height action.
                  </CCardText>
                  <CCardText>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                      >Last updated 3 mins ago</small
                    >
                  </CCardText>
@@ -733,7 +733,7 @@
              </CCard>
            </CCardGroup>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            When using card groups with footers, their content will
            automatically line up.
          </p>
@@ -750,7 +750,7 @@
                  </CCardText>
                </CCardBody>
                <CCardFooter>
-                  <small class="text-medium-emphasis"
+                  <small class="text-body-secondary"
                    >Last updated 3 mins ago</small
                  >
                </CCardFooter>
@@ -765,7 +765,7 @@
                  </CCardText>
                </CCardBody>
                <CCardFooter>
-                  <small class="text-medium-emphasis"
+                  <small class="text-body-secondary"
                    >Last updated 3 mins ago</small
                  >
                </CCardFooter>
@@ -781,7 +781,7 @@
                  </CCardText>
                </CCardBody>
                <CCardFooter>
-                  <small class="text-medium-emphasis"
+                  <small class="text-body-secondary"
                    >Last updated 3 mins ago</small
                  >
                </CCardFooter>
@@ -797,7 +797,7 @@
          <strong>Card</strong> <small>Grid cards</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use the <code>CRow</code> component and set
            <code>&#123;xs|sm|md|lg|xl|xxl&#125;="&#123; cols: * &#125;"</code>
            property to control how many grid columns (wrapped around your
@@ -821,7 +821,7 @@
                    </CCardText>
                  </CCardBody>
                  <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                      >Last updated 3 mins ago</small
                    >
                  </CCardFooter>
@@ -839,7 +839,7 @@
                    </CCardText>
                  </CCardBody>
                  <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                      >Last updated 3 mins ago</small
                    >
                  </CCardFooter>
@@ -857,7 +857,7 @@
                    </CCardText>
                  </CCardBody>
                  <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                      >Last updated 3 mins ago</small
                    >
                  </CCardFooter>
@@ -875,7 +875,7 @@
                    </CCardText>
                  </CCardBody>
                  <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                      >Last updated 3 mins ago</small
                    >
                  </CCardFooter>
@@ -883,7 +883,7 @@
              </CCol>
            </CRow>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Change it to <code>md="&#123; cols: 3&#125;"</code> and you&#39;ll
            see the fourth card wrap.
          </p>
@@ -901,7 +901,7 @@
                    </CCardText>
                  </CCardBody>
                  <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                      >Last updated 3 mins ago</small
                    >
                  </CCardFooter>
@@ -919,7 +919,7 @@
                    </CCardText>
                  </CCardBody>
                  <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                      >Last updated 3 mins ago</small
                    >
                  </CCardFooter>
@@ -937,7 +937,7 @@
                    </CCardText>
                  </CCardBody>
                  <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                      >Last updated 3 mins ago</small
                    >
                  </CCardFooter>
@@ -955,7 +955,7 @@
                    </CCardText>
                  </CCardBody>
                  <CCardFooter>
-                    <small class="text-medium-emphasis"
+                    <small class="text-body-secondary"
                      >Last updated 3 mins ago</small
                    >
                  </CCardFooter>
@@ -6,7 +6,7 @@
          <strong>Vue Carousels</strong> <small>Slide only</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Here’s a carousel with slides
          </p>
          <DocsExample href="components/carousel.html#slides-only">
@@ -29,7 +29,7 @@
          <strong>Vue Carousels</strong> <small>With controls</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Adding in the previous and next controls by
            <code>controls</code> property.
          </p>
@@ -53,7 +53,7 @@
          <strong>Vue Carousels</strong> <small>With indicators</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            You can attach the indicators to the carousel, lengthwise the
            controls, too.
          </p>
@@ -77,7 +77,7 @@
          <strong>Vue Carousels</strong> <small>With captions</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            You can add captions to slides with the
            <code>&lt;CCarouselCaption&gt;</code> element within any
            <code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden
@@ -125,7 +125,7 @@
          <strong>Vue Carousels</strong> <small>Crossfade</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add <code>transition=&#34;crossfade&#34;</code> to your carousel to
            animate slides with a fade transition instead of a slide.
          </p>
@@ -149,7 +149,7 @@
          <strong>Vue Carousels</strong> <small>Dark variant</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add <code>dark</code> property to the <code>CCarousel</code> for
            darker controls, indicators, and captions. Controls have been
            inverted from their default white fill with the
@@ -6,7 +6,7 @@
          <strong>Vue Collapse</strong>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            You can use a link or a button component.
          </p>
          <DocsExample href="components/collapse.html#example">
@@ -34,7 +34,7 @@
          <strong>Vue Collapse</strong> <small> Horizontal</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            The collapse plugin also supports horizontal collapsing. Add the
            <code>horizontal</code> property to transition the
            <code>width</code> instead of <code>height</code> and set a
@@ -67,7 +67,7 @@
          <strong>Vue Collapse</strong> <small> multi target</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
          </p>
          <h4 class="mt-4">Toggle multiple targets</h4>
@@ -6,7 +6,7 @@
          <strong>Vue List Group</strong> <small>Basic example</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            The default list group is an unordered list with items and the
            proper CSS classes. Build upon it with the options that follow, or
            with your CSS as required.
@@ -29,7 +29,7 @@
          <strong>Vue List Group</strong> <small>Active items</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add <code>active</code> boolean property to a
            <code>&lt;CListGroupItem&gt;</code> to show the current active
            selection.
@@ -52,7 +52,7 @@
          <strong>Vue List Group</strong> <small>Disabled items</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add <code>disabled</code> boolean property to a
            <code>&lt;CListGroupItem&gt;</code> to make it appear disabled.
          </p>
@@ -74,7 +74,7 @@
          <strong>Vue List Group</strong> <small>Links and buttons</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to
            create <em>actionable</em> list group items with hover, disabled,
            and active states by adding
@@ -112,7 +112,7 @@
          <strong>Vue List Group</strong> <small>Flush</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add <code>flush</code> boolean property to remove some borders and
            rounded corners to render list group items edge-to-edge in a parent
            container (e.g., cards).
@@ -135,7 +135,7 @@
          <strong>Vue List Group</strong> <small>Horizontal</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add <code>layout=&#34;horizontal&#34;</code> to change the layout of
            list group items from vertical to horizontal across all breakpoints.
            Alternatively, choose a responsive variant
@@ -171,7 +171,7 @@
          <strong>Vue List Group</strong> <small>Contextual classes</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use contextual classes to style list items with a stateful
            background and color.
          </p>
@@ -195,7 +195,7 @@
              >
            </CListGroup>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Contextual classes also work with <code>&lt;a&gt;</code>s or
            <code>&lt;button&gt;</code>s. Note the addition of the hover styles
            here not present in the previous example. Also supported is the
@@ -235,7 +235,7 @@
          <strong>Vue List Group</strong> <small>With badges</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add badges to any list group item to show unread counts, activity,
            and more.
          </p>
@@ -270,7 +270,7 @@
          <strong>Vue List Group</strong> <small>Custom content</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add nearly any HTML within, even for linked list groups like the one
            below, with the help of
            <a href="https://coreui.io/docs/utilities/flex/"
@@ -293,26 +293,26 @@
              <CListGroupItem component="a" href="#">
                <div class="d-flex w-100 justify-content-between">
                  <h5 class="mb-1">List group item heading</h5>
-                  <small class="text-medium-emphasis">3 days ago</small>
+                  <small class="text-body-secondary">3 days ago</small>
                </div>
                <p class="mb-1">
                  Donec id elit non mi porta gravida at eget metus. Maecenas sed
                  diam eget risus varius blandit.
                </p>
-                <small class="text-medium-emphasis"
+                <small class="text-body-secondary"
                  >Donec id elit non mi porta.</small
                >
              </CListGroupItem>
              <CListGroupItem component="a" href="#">
                <div class="d-flex w-100 justify-content-between">
                  <h5 class="mb-1">List group item heading</h5>
-                  <small class="text-medium-emphasis">3 days ago</small>
+                  <small class="text-body-secondary">3 days ago</small>
                </div>
                <p class="mb-1">
                  Donec id elit non mi porta gravida at eget metus. Maecenas sed
                  diam eget risus varius blandit.
                </p>
-                <small class="text-medium-emphasis"
+                <small class="text-body-secondary"
                  >Donec id elit non mi porta.</small
                >
              </CListGroupItem>
@@ -327,7 +327,7 @@
          <strong>Vue List Group</strong> <small>Checkboxes and radios</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Place CoreUI&#39;s checkboxes and radios within list group items and
            customize as needed.
          </p>
@@ -6,7 +6,7 @@
          <strong>Vue Navs</strong> <small>Base navs</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            The base <code>.nav</code> component is built with flexbox and
            provide a strong foundation for building all types of navigation
            components. It includes some style overrides (for working with
@@ -29,7 +29,7 @@
              </CNavItem>
            </CNav>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Classes are used throughout, so your markup can be super flexible.
            Use <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if
            the order of your items is important, or roll your own with a
@@ -54,7 +54,7 @@
          <strong>Vue Navs</strong> <small>Horizontal alignment</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Change the horizontal alignment of your nav with
            <a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
              flexbox utilities
@@ -62,7 +62,7 @@
            . By default, navs are left-aligned, but you can easily change them
            to center or right aligned.
          </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Centered with <code>.justify-content-center</code>:
          </p>
          <DocsExample href="components/nav.html#horizontal-alignment">
@@ -81,7 +81,7 @@
              </CNavItem>
            </CNav>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Right-aligned with <code>.justify-content-end</code>:
          </p>
          <DocsExample href="components/nav.html#base-nav">
@@ -109,7 +109,7 @@
          <strong>Vue Navs</strong> <small>Vertical</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Stack your navigation by changing the flex item direction with the{'
            '}
            <code>.flex-column</code> utility. Need to stack them on some
@@ -141,7 +141,7 @@
          <strong>Vue Navs</strong> <small>Tabs</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Takes the basic nav from above and adds the
            <code>variant=&#34;tabs&#34;</code> class to generate a tabbed
            interface
@@ -171,7 +171,7 @@
          <strong>Vue Navs</strong> <small>Pills</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Take that same HTML, but use
            <code>variant=&#34;pills&#34;</code> instead:
          </p>
@@ -200,7 +200,7 @@
          <strong>Vue Navs</strong> <small>Fill and justify</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Force your <code>.nav</code>&#39;s contents to extend the full
            available width one of two modifier classes. To proportionately fill
            all available space with your <code>.nav-item</code>s, use
@@ -223,7 +223,7 @@
              </CNavItem>
            </CNav>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            For equal-width elements, use
            <code>layout=&#34;justified&#34;</code>. All horizontal space will
            be occupied by nav links, but unlike the .nav-fill above, every nav
@@ -254,7 +254,7 @@
          <strong>Vue Navs</strong> <small>Working with flex utilities</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            If you need responsive nav variations, consider using a series of{'
            '}
            <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a
@@ -6,7 +6,7 @@
          <strong>Vue Pagination</strong>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            We use a large block of connected links for our pagination, making
            links hard to miss and easily scalable—all while providing large hit
            areas. Pagination is built with list HTML elements so screen readers
@@ -14,7 +14,7 @@
            <code>&lt;nav&gt;</code> element to identify it as a navigation
            section to screen readers and other assistive technologies.
          </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            In addition, as pages likely have more than one such navigation
            section, it&#39;s advisable to provide a descriptive
            <code>aria-label</code> for the <code>&lt;nav&gt;</code> to reflect
@@ -40,7 +40,7 @@
          <strong>Vue Pagination</strong> <small>Working with icons</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Looking to use an icon or symbol in place of text for some
            pagination links? Be sure to provide proper screen reader support
            with <code>aria</code> attributes.
@@ -68,12 +68,12 @@
          <small>Disabled and active states</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Pagination links are customizable for different circumstances. Use
            <code>disabled</code> for links that appear un-clickable and
            <code>.active</code> to indicate the current page.
          </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            While the <code>disabled</code> prop uses
            <code>pointer-events: none</code> to <em>try</em> to disable the
            link functionality of <code>&lt;a&gt;</code>s, that CSS property is
@@ -106,7 +106,7 @@
          <strong>Vue Pagination</strong> <small>Sizing</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Fancy larger or smaller pagination? Add
            <code>size=&#34;lg&#34;</code> or <code>size=&#34;sm&#34;</code> for
            additional sizes.
@@ -138,7 +138,7 @@
          <strong>Vue Pagination</strong> <small>Alignment</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Change the alignment of pagination components with
            <a href="https://coreui.io/docs/utilities/flex/"
              >flexbox utilities</a
@@ -6,7 +6,7 @@
          <strong>Vue Placeholder</strong>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            In the example below, we take a typical card component and recreate
            it with placeholders applied to create a "loading card". Size and
            proportions are the same between the two.
@@ -29,7 +29,7 @@
          <strong>Vue Popover</strong> <small>Four directions</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Four options are available: top, right, bottom, and left aligned.
            Directions are mirrored when using CoreUI for Vue in RTL.
          </p>
@@ -6,7 +6,7 @@
          <strong>Vue Progress</strong> <small>Basic example</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Progress components are built with two HTML elements, some CSS to
            set the width, and a few attributes. We don&#39;tuse
            <a
@@ -43,7 +43,7 @@
          <strong>Vue Progress</strong> <small>Labels</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add labels to your progress bars by placing text within the
            <code>&lt;CProgressBar&gt;</code>.
          </p>
@@ -61,7 +61,7 @@
          <strong>Vue Progress</strong> <small>Height</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            We only set a <code>height</code> value on the
            <code>&lt;CProgress&gt;</code>, so if you change that value the
            inner <code>&lt;CProgressBar&gt;</code> will automatically resize
@@ -84,7 +84,7 @@
          <strong>Vue Progress</strong> <small>Backgrounds</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use <code>color</code> prop to change the appearance of individual
            progress bars.
          </p>
@@ -111,7 +111,7 @@
          <strong>Vue Progress</strong> <small>Multiple bars</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Include multiple progress bars in a progress component if you need.
          </p>
          <DocsExample href="components/progress.html#multiple-bars">
@@ -130,7 +130,7 @@
          <strong>Vue Progress</strong> <small>Striped</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add <code>variant=&#34;striped&#34;</code> to any
            <code>&lt;CProgressBar&gt;</code> to apply a stripe via CSS gradient
            over the progress bar&#39;s background color.
@@ -158,7 +158,7 @@
          <strong>Vue Progress</strong> <small>Animated stripes</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            The striped gradient can also be animated. Add
            <code>animated</code> property to
            <code>&lt;CProgressBar&gt;</code> to animate the stripes right to
@@ -6,13 +6,13 @@
          <strong>Vue Spinner</strong> <small>Border</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use the border spinners for a lightweight loading indicator.
          </p>
          <DocsExample href="components/spinner.html">
            <CSpinner />
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            The border spinner uses <code>currentColor</code> for its
            <code>border-color</code>. You can use any of our text color
            utilities on the standard spinner.
@@ -36,14 +36,14 @@
          <strong>Vue Spinner</strong> <small>Growing</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            If you don&#39;tfancy a border spinner, switch to the grow spinner.
            While it doesn&#39;t technically spin, it does repeatedly grow!
          </p>
          <DocsExample href="components/spinner.html#growing-spinner">
            <CSpinner variant="grow" />
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Once again, this spinner is built with <code>currentColor</code>, so
            you can easily change its appearance. Here it is in blue, along with
            the supported variants.
@@ -67,7 +67,7 @@
          <strong>Vue Spinner</strong> <small>Size</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add <code>size=&#34;sm&#34;</code> property to make a smaller
            spinner that can quickly be used within other components.
          </p>
@@ -84,7 +84,7 @@
          <strong>Vue Spinner</strong> <small>Buttons</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use spinners within buttons to indicate an action is currently
            processing or taking place. You may also swap the text out of the
            spinner element and utilize button text as needed.
@@ -6,7 +6,7 @@
          <strong>Vue Table</strong> <small>Basic example</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Using the most basic table CoreUI, here&#39;s how
            <code>&lt;CTable&gt;</code>-based tables look in CoreUI.
          </p>
@@ -50,7 +50,7 @@
          <strong>Vue Table</strong> <small>Variants</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use contextual classes to color tables, table rows or individual
            cells.
          </p>
@@ -121,7 +121,7 @@
          <strong>Vue Table</strong> <small>Striped rows</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use <code>striped</code> property to add zebra-striping to any table
            row within the <code>&lt;CTableBody&gt;</code>.
          </p>
@@ -156,7 +156,7 @@
              </CTableBody>
            </CTable>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            These classes can also be added to table variants:
          </p>
          <DocsExample href="components/table.html#striped-rows">
@@ -230,7 +230,7 @@
          <strong>Vue Table</strong> <small>Hoverable rows</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use <code>hover</code> property to enable a hover state on table
            rows within a <code>&lt;CTableBody&gt;</code>.
          </p>
@@ -411,7 +411,7 @@
          <strong>Vue Table</strong> <small>Bordered tables</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add <code>bordered</code> property for borders on all sides of the
            table and cells.
          </p>
@@ -446,7 +446,7 @@
              </CTableBody>
            </CTable>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            <a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
              Border color utilities
            </a>
@@ -492,7 +492,7 @@
          <strong>Vue Table</strong> <small>Tables without borders</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add <code>borderless</code> property for a table without borders.
          </p>
          <DocsExample href="components/table.html#tables-without-borders">
@@ -566,7 +566,7 @@
          <strong>Vue Table</strong> <small>Small tables</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add <code>small</code> property to make any
            <code>&lt;CTable&gt;</code> more compact by cutting all cell
            <code>padding</code> in half.
@@ -611,7 +611,7 @@
          <strong>Vue Table</strong> <small>Vertical alignment</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Table cells of <code>&lt;CTableHead&gt;</code> are always vertical
            aligned to the bottom. Table cells in
            <code>&lt;CTableBody&gt;</code> inherit their alignment from
@@ -705,7 +705,7 @@
          <strong>Vue Table</strong> <small>Nesting</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Border styles, active styles, and table variants are not inherited
            by nested tables.
          </p>
@@ -779,7 +779,7 @@
          <strong>Vue Table</strong> <small>Table head</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Similar to tables and dark tables, use the modifier prop
            <code>color=&#34;light&#34;</code> or
            <code>color=&#34;dark&#34;</code> to make
@@ -905,7 +905,7 @@
          <strong>Vue Table</strong> <small>Captions</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            A <code>&lt;CTableCaption&gt;</code> functions like a heading for a
            table. It helps users with screen readers to find a table and
            understand what it&#39;s about and decide if they want to read it.
@@ -943,7 +943,7 @@
              </CTableBody>
            </CTable>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            You can also put the <code>&lt;CTableCaption&gt;</code> on the top
            of the table with <code>caption=&#34;top&#34;</code>.
          </p>
@@ -6,11 +6,11 @@
          <strong>Vue Tooltips</strong> <small>Basic example</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Hover over the links below to see tooltips:
          </p>
          <DocsExample href="components/tooltip.html">
-            <p class="text-medium-emphasis">
+            <p class="text-body-secondary">
              Tight pants next level keffiyeh
              <CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
              haven't heard of them. Photo booth beard raw denim letterpress
@@ -26,7 +26,7 @@
              freegan cred raw denim single-origin coffee viral.
            </p>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Hover over the links below to see tooltips:
          </p>
          <DocsExample href="components/tooltip.html">
@@ -269,7 +269,7 @@
          <strong>Vue Button Group</strong> <span>Nesting</span>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Put a <code>&lt;CButtonGroup&gt;</code> inside another
            <code>&lt;CButtonGroup&gt;</code> when you need dropdown menus
            combined with a series of buttons.
@@ -302,7 +302,7 @@
          <strong>Vue Button Group</strong> <span>Vertical variation</span>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Create a set of buttons that appear vertically stacked rather than
            horizontally.
            <strong>Split button dropdowns are not supported here.</strong>
@@ -6,7 +6,7 @@
          <strong>Vue Button</strong>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            CoreUI includes a bunch of predefined buttons components, each
            serving its own semantic purpose. Buttons show what action will
            happen when the user clicks or touches it. CoreUI buttons are used
@@ -57,7 +57,7 @@
          <strong>Vue Button</strong> <small>with icons</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            You can combine button with our
            <a href="https://icons.coreui.io/">CoreUI Icons</a>.
          </p>
@@ -107,14 +107,14 @@
          <strong>Vue Button</strong> <small>Button components</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            The <code>&lt;CButton&gt;</code> component are designed for
            <code>&lt;button&gt;</code> , <code>&lt;a&gt;</code> or
            <code>&lt;input&gt;</code>
            elements (though some browsers may apply a slightly different
            rendering).
          </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            If you&#39;re using <code>&lt;CButton&gt;</code> component as
            <code>&lt;a&gt;</code> elements that are used to trigger
            functionality ex. collapsing content, these links should be given a
@@ -154,7 +154,7 @@
          <strong>Vue Button</strong> <small>outline</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            If you need a button, but without the strong background colors. Set
            <code>variant=&#34;outline&#34;</code> prop to remove all background
            colors.
@@ -205,7 +205,7 @@
          <strong>Vue Button</strong> <small>ghost</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            If you need a ghost variant of button, set
            <code>variant=&#34;ghost&#34;</code> prop to remove all background
            colors.
@@ -256,7 +256,7 @@
          <strong>Vue Button</strong> <small>Sizes</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or
            <code>size=&#34;sm&#34;</code> for additional sizes.
          </p>
@@ -333,7 +333,7 @@
          <strong>Vue Button</strong> <small>Disabled state</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add the <code>disabled</code> boolean prop to any
            <code>&lt;CButton&gt;</code>
            component to make buttons look inactive. Disabled button has
@@ -346,11 +346,11 @@
            </CButton>
            <CButton color="secondary" size="lg" disabled> Button </CButton>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Disabled buttons using the <code>&lt;a&gt;</code> component act a
            little different:
          </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            <code>&lt;a&gt;</code>s don&#39;tsupport the
            <code>disabled</code> attribute, so CoreUI has to add
            <code>.disabled</code> class to make buttons look inactive. CoreUI
@@ -381,7 +381,7 @@
          <strong>Vue Button</strong> <small>Block buttons</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Create buttons that span the full width of a parent—by using
            utilities.
          </p>
@@ -391,7 +391,7 @@
              <CButton color="primary">Button</CButton>
            </div>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Here we create a responsive variation, starting with vertically
            stacked buttons until the <code>md</code> breakpoint, where
            <code>.d-md-block</code> replaces the <code>.d-grid</code> class,
@@ -404,7 +404,7 @@
              <CButton color="primary">Button</CButton>
            </div>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            You can adjust the width of your block buttons with grid column
            width classes. For example, for a half-width &#34;block button&#34;,
            use <code>.col-6</code>. Center it horizontally with
@@ -416,7 +416,7 @@
              <CButton color="primary">Button</CButton>
            </div>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Additional utilities can be used to adjust the alignment of buttons
            when horizontal. Here we&#39;ve taken our previous responsive
            example and added some flex utilities and a margin utility on the
@@ -6,7 +6,7 @@
          <strong>Vue Dropdown</strong> <small>Single button</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Here&#39;s how you can put them to work with either
            <code>&lt;button&gt;</code>
            elements:
@@ -23,7 +23,7 @@
              </CDropdownMenu>
            </CDropdown>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            The best part is you can do this with any button variant, too:
          </p>
          <DocsExample href="components/dropdown.html#single-button">
@@ -61,13 +61,13 @@
          <strong>Vue Dropdown</strong> <small>Split button</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Similarly, create split button dropdowns with virtually the same
            markup as single button dropdowns, but with the addition of boolean
            prop <code>split</code> for proper spacing around the dropdown
            caret.
          </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            We use this extra class to reduce the horizontal
            <code>padding</code> on either side of the caret by 25% and remove
            the <code>margin-left</code> that&#39;s attached for normal button
@@ -113,7 +113,7 @@
          <strong>Vue Dropdown</strong> <small>Sizing</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Button dropdowns work with buttons of all sizes, including default
            and split dropdown buttons.
          </p>
@@ -180,7 +180,7 @@
          <strong>Vue Dropdown</strong> <small>Single button</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Opt into darker dropdowns to match a dark navbar or custom style by
            set
            <code>dark</code> property. No changes are required to the dropdown
@@ -200,7 +200,7 @@
              </CDropdownMenu>
            </CDropdown>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            And putting it to use in a navbar:
          </p>
          <DocsExample href="components/dropdown.html#dark-dropdowns">
@@ -251,7 +251,7 @@
          <strong>Vue Dropdown</strong> <small>Dropup</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Trigger dropdown menus above elements by adding
            <code>direction=&#34;dropup&#34;</code> to the
            <code>&lt;CDropdown&gt;</code>
@@ -289,7 +289,7 @@
          <strong>Vue Dropdown</strong> <small>Dropright</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Trigger dropdown menus at the right of the elements by adding
            <code>direction=&#34;dropend&#34;</code> to the
            <code>&lt;CDropdown&gt;</code>
@@ -327,7 +327,7 @@
          <strong>Vue Dropdown</strong> <small>Dropleft</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Trigger dropdown menus at the left of the elements by adding
            <code>direction=&#34;dropstart&#34;</code> to the
            <code>&lt;CDropdown&gt;</code>
@@ -8,7 +8,7 @@
            <CRow>
              <CCol :sm="5">
                <h4 id="traffic" class="card-title mb-0">Traffic</h4>
-                <div class="small text-medium-emphasis">January 2021</div>
+                <div class="small text-body-secondary">January 2021</div>
              </CCol>
              <CCol :sm="7" class="d-none d-md-block">
                <CButton color="primary" class="float-end">
@@ -36,7 +36,7 @@
          <CCardFooter>
            <CRow :xs="{ cols: 1 }" :md="{ cols: 5 }" class="text-center">
              <CCol class="mb-sm-2 mb-0">
-                <div class="text-medium-emphasis">Visits</div>
+                <div class="text-body-secondary">Visits</div>
                <strong>29.703 Users (40%)</strong>
                <CProgress
                  class="mt-2"
@@ -47,7 +47,7 @@
                />
              </CCol>
              <CCol class="mb-sm-2 mb-0 d-md-down-none">
-                <div class="text-medium-emphasis">Unique</div>
+                <div class="text-body-secondary">Unique</div>
                <strong>24.093 Users (20%)</strong>
                <CProgress
                  class="mt-2"
@@ -58,7 +58,7 @@
                />
              </CCol>
              <CCol class="mb-sm-2 mb-0">
-                <div class="text-medium-emphasis">Pageviews</div>
+                <div class="text-body-secondary">Pageviews</div>
                <strong>78.706 Views (60%)</strong>
                <CProgress
                  class="mt-2"
@@ -69,7 +69,7 @@
                />
              </CCol>
              <CCol class="mb-sm-2 mb-0">
-                <div class="text-medium-emphasis">New Users</div>
+                <div class="text-body-secondary">New Users</div>
                <strong>22.123 Users (80%)</strong>
                <CProgress
                  class="mt-2"
@@ -80,7 +80,7 @@
                />
              </CCol>
              <CCol class="mb-sm-2 mb-0 d-md-down-none">
-                <div class="text-medium-emphasis">Bounce Rate</div>
+                <div class="text-body-secondary">Bounce Rate</div>
                <strong>Average Rate (40.15%)</strong>
                <CProgress class="mt-2" :value="40" thin :precision="1" />
              </CCol>
@@ -102,7 +102,7 @@
                    <div
                      class="border-start border-start-4 border-start-info py-1 px-3 mb-3"
                    >
-                      <div class="text-medium-emphasis small">New Clients</div>
+                      <div class="text-body-secondary small">New Clients</div>
                      <div class="fs-5 fw-semibold">9,123</div>
                    </div>
                  </CCol>
@@ -110,7 +110,7 @@
                    <div
                      class="border-start border-start-4 border-start-danger py-1 px-3 mb-3"
                    >
-                      <div class="text-medium-emphasis small">
+                      <div class="text-body-secondary small">
                        Recurring Clients
                      </div>
                      <div class="fs-5 fw-semibold">22,643</div>
@@ -124,7 +124,7 @@
                  class="progress-group mb-4"
                >
                  <div class="progress-group-prepend">
-                    <span class="text-medium-emphasis small">{{
+                    <span class="text-body-secondary small">{{
                      item.title
                    }}</span>
                  </div>
@@ -140,7 +140,7 @@
                    <div
                      class="border-start border-start-4 border-start-warning py-1 px-3 mb-3"
                    >
-                      <div class="text-medium-emphasis small">Pageviews</div>
+                      <div class="text-body-secondary small">Pageviews</div>
                      <div class="fs-5 fw-semibold">78,623</div>
                    </div>
                  </CCol>
@@ -148,7 +148,7 @@
                    <div
                      class="border-start border-start-4 border-start-success py-1 px-3 mb-3"
                    >
-                      <div class="text-medium-emphasis small">Organic</div>
+                      <div class="text-body-secondary small">Organic</div>
                      <div class="fs-5 fw-semibold">49,123</div>
                    </div>
                  </CCol>
@@ -181,7 +181,7 @@
                    <span class="title">{{ item.title }}</span>
                    <span class="ms-auto fw-semibold">
                      {{ item.value }}
-                      <span class="text-medium-emphasis small"
+                      <span class="text-body-secondary small"
                        >({{ item.percent }}%)</span
                      >
                    </span>
@@ -221,7 +221,7 @@
                  </CTableDataCell>
                  <CTableDataCell>
                    <div>{{ item.user.name }}</div>
-                    <div class="small text-medium-emphasis text-nowrap">
+                    <div class="small text-body-secondary text-nowrap">
                      <span>{{ item.user.new ? 'New' : 'Recurring' }}</span> |
                      {{ item.user.registered }}
                    </div>
@@ -239,7 +239,7 @@
                        <strong>{{ item.usage.value }}%</strong>
                      </div>
                      <div class="ms-1">
-                        <small class="text-medium-emphasis">
+                        <small class="text-body-secondary">
                          {{ item.usage.period }}
                        </small>
                      </div>
@@ -254,7 +254,7 @@
                    <CIcon size="xl" :name="item.payment.icon" />
                  </CTableDataCell>
                  <CTableDataCell>
-                    <div class="small text-medium-emphasis">Last login</div>
+                    <div class="small text-body-secondary">Last login</div>
                    <div class="fw-semibold text-nowrap">
                      {{ item.activity }}
                    </div>
@@ -23,7 +23,7 @@
          <strong>Vue Checkbox</strong> <small>Disabled</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add the <code>disabled</code> attribute and the associated
            <code>&lt;label&gt;</code>s are automatically styled to match with a
            lighter color to help indicate the input&#39;s state.
@@ -41,7 +41,7 @@
          <strong>Vue Radio</strong>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add the <code>disabled</code> attribute and the associated
            <code>&lt;label&gt;</code>s are automatically styled to match with a
            lighter color to help indicate the input&#39;s state.
@@ -96,7 +96,7 @@
          <strong>Vue Switches</strong>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            A switch has the markup of a custom checkbox but uses the
            <code>switch</code> boolean properly to render a toggle switch.
            Switches also support the <code>disabled</code> attribute.
@@ -158,7 +158,7 @@
          <small>Default layout (stacked)</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            By default, any number of checkboxes and radios that are immediate
            sibling will be vertically stacked and appropriately spaced.
          </p>
@@ -200,7 +200,7 @@
          <strong>Vue Checks and Radios</strong> <small>Inline</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Group checkboxes or radios on the same horizontal row by adding
            <code>inline</code> boolean property to any
            <code>&lt;CFormCheck&gt;</code>.
@@ -252,7 +252,7 @@
          <strong>Vue Checks and Radios</strong> <small>Without labels</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Remember to still provide some form of accessible name for assistive
            technologies (for instance, using <code>aria-label</code>).
          </p>
@@ -279,7 +279,7 @@
          <strong>Toggle buttons</strong>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Create button-like checkboxes and radio buttons by using
            <code>button</code> boolean property on the
            <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
@@ -349,7 +349,7 @@
            />
          </DocsExample>
          <h3>Outlined styles</h3>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Different variants of button, such at the various outlined styles,
            are supported.
          </p>
@@ -6,7 +6,7 @@
          <strong>Vue Floating labels</strong>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Wrap a pair of <code>&lt;CFormInput&gt;</code> and
            <code>&lt;CFormLabel&gt;</code> elements in
            <code>CFormFloating</code> to enable floating labels with textual
@@ -34,7 +34,7 @@
              <CFormLabel for="floatingPassword">Password</CFormLabel>
            </CFormFloating>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            When there&#39;s a <code>value</code> already defined,
            <code>&lt;CFormLabel&gt;</code>
            s will automatically adjust to their floated position.
@@ -59,7 +59,7 @@
          <strong>Vue Floating labels</strong> <small>Textareas</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            By default, <code>&lt;CFormTextarea&gt;</code>s will be the same
            height as <code>&lt;CFormInput&gt;</code>s.
          </p>
@@ -72,7 +72,7 @@
              <CFormLabel for="floatingTextarea">Comments</CFormLabel>
            </CFormFloating>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>,
            do not use the <code>rows</code> attribute. Instead, set an explicit
            <code>height</code> (either inline or via custom CSS).
@@ -96,7 +96,7 @@
          <strong>Vue Floating labels</strong> <small>Selects</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Other than <code>&lt;CFormInput&gt;</code>, floating labels are only
            available on <code>&lt;CFormSelect&gt;</code>s. They work in the
            same way, but unlike <code>&lt;CFormInput&gt;</code>s, they&#39;ll
@@ -130,7 +130,7 @@
          <strong>Vue Floating labels</strong> <small>Layout</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            When working with the CoreUI for Bootstrap grid system, be sure to
            place form elements within column classes.
          </p>
@@ -38,7 +38,7 @@
          <strong>Vue Form Control</strong> <small>Sizing</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Set heights using <code>size</code> property like
            <code>size=&#34;lg&#34;</code> and <code>size=&#34;sm&#34;</code>.
          </p>
@@ -72,7 +72,7 @@
          <strong>Vue Form Control</strong> <small>Disabled</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add the <code>disabled</code> boolean attribute on an input to give
            it a grayed out appearance and remove pointer events.
          </p>
@@ -102,7 +102,7 @@
          <strong>Vue Form Control</strong> <small>Readonly</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add the <code>readonly</code> boolean attribute on an input to
            prevent modification of the input&#39;s value. Read-only inputs
            appear lighter (just like disabled inputs), but retain the standard
@@ -125,7 +125,7 @@
          <strong>Vue Form Control</strong> <small>Readonly plain text</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            If you want to have <code>&lt;input readonly&gt;</code> elements in
            your form styled as plain text, use the
            <code>plain-text</code> boolean property to remove the default form
@@ -6,7 +6,7 @@
          <strong>Vue Input group</strong> <small>Basic example</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Place one add-on or button on either side of an input. You may also
            place one on both sides of an input. Remember to place
            <code>&lt;CFormLabel&gt;</code>s outside the input group.
@@ -59,7 +59,7 @@
          <strong>Vue Input group</strong> <small>Wrapping</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Input groups wrap by default via <code>flex-wrap: wrap</code> in
            order to accommodate custom form field validation within an input
            group. You may disable this with <code>.flex-nowrap</code>.
@@ -83,13 +83,13 @@
          <strong>Vue Input group</strong> <small>Sizing</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add the relative form sizing classes to the
            <code>&lt;CInputGroup&gt;</code> itself and contents within will
            automatically resize—no need for repeating the form control size
            classes on each element.
          </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            <strong
              >Sizing on the individual input group elements
              isn&#39;tsupported.</strong
@@ -129,7 +129,7 @@
          <strong>Vue Input group</strong> <small>Checkboxes and radios</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Place any checkbox or radio option within an input group&#39;s addon
            instead of text.
          </p>
@@ -164,7 +164,7 @@
          <strong>Vue Input group</strong> <small>Multiple inputs</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            While multiple <code>&lt;CFormInput&gt;</code>s are supported
            visually, validation styles are only available for input groups with
            a single <code>&lt;CFormInput&gt;</code>.
@@ -185,7 +185,7 @@
          <strong>Vue Input group</strong> <small>Multiple addons</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Multiple add-ons are supported and can be mixed with checkbox and
            radio input versions..
          </p>
@@ -214,7 +214,7 @@
          <strong>Vue Input group</strong> <small>Button addons</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Multiple add-ons are supported and can be mixed with checkbox and
            radio input versions..
          </p>
@@ -6,7 +6,7 @@
          <strong>Layout</strong> <small>Form grid</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            More complex forms can be built using our grid classes. Use these
            for form layouts that require multiple columns, varied widths, and
            additional alignment options.
@@ -30,7 +30,7 @@
          <strong>Layout</strong> <small>Gutters</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            By adding
            <a href="https://coreui.io/docs/layout/gutters/"
              >gutter modifier classes</a
@@ -48,7 +48,7 @@
              </CCol>
            </CRow>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            More complex layouts can also be created with the grid system.
          </p>
          <DocsExample href="forms/layout.html#gutters">
@@ -108,7 +108,7 @@
          <strong>Layout</strong> <small>Horizontal form</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Create horizontal forms with the grid by adding the
            <code>.row</code> class to form groups and using the
            <code>.col-*-*</code> classes to specify the width of your labels
@@ -116,7 +116,7 @@
            <code>&lt;CFormLabel&gt;</code>s as well so they&#39;re vertically
            centered with their associated form controls.
          </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            At times, you maybe need to use margin or padding utilities to
            create that perfect alignment you need. For example, we&#39;ve
            removed the <code>padding-top</code> on our stacked radio inputs
@@ -192,7 +192,7 @@
          <strong>Layout</strong> <small>Horizontal form label sizing</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Be sure to use <code>.col-form-label-sm</code> or
            <code>.col-form-label-lg</code> to your
            <code>&lt;CFormLabel&gt;</code>s or <code>&lt;legend&gt;</code>s to
@@ -254,7 +254,7 @@
          <strong>Layout</strong> <small>Column sizing</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            As shown in the previous examples, our grid system allows you to
            place any number of
            <code>&lt;CCol&gt;</code>s within a <code>&lt;CRow&gt;</code>.
@@ -286,7 +286,7 @@
          <strong>Layout</strong> <small>Auto-sizing</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            The example below uses a flexbox utility to vertically center the
            contents and changes
            <code>&lt;CCol&gt;</code> to
@@ -337,7 +337,7 @@
              </CCol>
            </CForm>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            You can then remix that once again with size-specific column
            classes.
          </p>
@@ -396,7 +396,7 @@
          <strong>Layout</strong> <small>Inline forms</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use the <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> class to create
            horizontal layouts. By adding
            <a href="https://coreui.io/docs/layout/gutters/"
@@ -4,7 +4,7 @@
      <CCard class="mb-4">
        <CCardHeader> <strong>Vue Range</strong> <small></small> </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Create custom
            <code>&lt;input type=&#34;range&#34;&gt;</code> controls with
            <code>&lt;CFormRange&gt;</code>.
@@ -22,7 +22,7 @@
          <strong>Vue Range</strong> <small>Disabled</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add the <code>disabled</code> boolean attribute on an input to give
            it a grayed out appearance and remove pointer events.
          </p>
@@ -39,7 +39,7 @@
          <strong>Vue Range</strong> <small>Min and max</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Range inputs have implicit values for <code>min</code> and
            <code>max</code>— <code>0</code> and <code>100</code>, respectively.
            You may specify new values for those using the <code>min</code> and
@@ -58,7 +58,7 @@
          <strong>Vue Range</strong> <small>Steps</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            By default, range inputs &#34;snap&#34; to integer values. To change
            this, you can specify a <code>step</code> value. In the example
            below, we double the number of steps by using
@@ -23,7 +23,7 @@
          <strong>Vue Select</strong> <small>Sizing</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            You may also choose from small and large custom selects to match our
            similarly sized text inputs.
          </p>
@@ -49,7 +49,7 @@
              <option value="3">Three</option>
            </CFormSelect>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            The <code>multiple</code> attribute is also supported:
          </p>
          <DocsExample href="forms/select.html#sizing">
@@ -64,7 +64,7 @@
              <option value="3">Three</option>
            </CFormSelect>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            As is the <code>html-size</code> property:
          </p>
          <DocsExample href="forms/select.html#sizing">
@@ -88,7 +88,7 @@
          <strong>Vue Select</strong> <small>Disabled</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add the <code>disabled</code> boolean attribute on a select to give
            it a grayed out appearance and remove pointer events.
          </p>
@@ -6,7 +6,7 @@
          <strong>Validation</strong> <small>Custom styles</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            For custom CoreUI form validation messages, you&#39;ll need to add
            the
            <code>novalidate</code> boolean property to your
@@ -17,7 +17,7 @@
            attempting to submit, you&#39;ll see the <code>:invalid</code> and
            <code>:valid</code> styles applied to your form controls.
          </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Custom feedback styles apply custom colors, borders, focus styles,
            and background icons to better communicate feedback.
          </p>
@@ -102,14 +102,14 @@
          <strong>Validation</strong> <small>Browser defaults</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Not interested in custom validation feedback messages or writing
            JavaScript to change form behaviors? All good, you can use the
            browser defaults. Try submitting the form below. Depending on your
            browser and OS, you&#39;ll see a slightly different style of
            feedback.
          </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            While these feedback styles cannot be styled with CSS, you can still
            customize the feedback text through JavaScript.
          </p>
@@ -195,13 +195,13 @@
          <strong>Validation</strong> <small>Server side</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            We recommend using client-side validation, but in case you require
            server-side validation, you can indicate invalid and valid form
            fields with <code>invalid</code> and <code>valid</code> boolean
            properties.
          </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            For invalid fields, ensure that the invalid feedback/error message
            is associated with the relevant form field using
            <code>aria-describedby</code> (noting that this attribute allows
@@ -309,7 +309,7 @@
          <strong>Validation</strong> <small>Supported elements</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Validation styles are available for the following form controls and
            components:
          </p>
@@ -399,7 +399,7 @@
          <strong>Validation</strong> <small>Tooltips</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            If your form layout allows it, you can swap the text for the tooltip
            to display validation feedback in a styled tooltip. Be sure to have
            a parent with
@@ -6,7 +6,7 @@
          <strong>Vue Alert</strong>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Vue Alert is prepared for any length of text, as well as an optional
            close button. For a styling, use one of the
            <strong>required</strong> contextual <code>color</code> props (e.g.,
@@ -45,7 +45,7 @@
          <strong>Vue Alert</strong> <small>Link color</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Use the <code>&lt;CAlertLink&gt;</code> component to immediately
            give matching colored links inside any alert.
          </p>
@@ -100,7 +100,7 @@
          <strong>Vue Alert</strong> <small>Additional content</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Alert can also incorporate supplementary components &amp; elements
            like heading, paragraph, and divider.
          </p>
@@ -128,7 +128,7 @@
          <strong>Vue Alert</strong> <small>Dismissing</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Alerts can also be easily dismissed. Just add the
            <code>dismissible</code> prop.
          </p>
@@ -6,7 +6,7 @@
          <strong>Vue Badges</strong> <small>Dismissing</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Bootstrap badge scale to suit the size of the parent element by
            using relative font sizing and <code>em</code> units.
          </p>
@@ -18,7 +18,7 @@
            <h5>Example heading <CBadge color="secondary">New</CBadge></h5>
            <h6>Example heading <CBadge color="secondary">New</CBadge></h6>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Badges can be used as part of links or buttons to provide a counter.
          </p>
          <DocsExample href="components/badge.html">
@@ -26,11 +26,11 @@
              Notifications <CBadge color="secondary">4</CBadge>
            </CButton>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Remark that depending on how you use them, badges may be complicated
            for users of screen readers and related assistive technologies.
          </p>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Unless the context is clear, consider including additional context
            with a visually hidden piece of additional text.
          </p>
@@ -49,7 +49,7 @@
          <strong>Vue Badges</strong> <small>Contextual variations</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add any of the below-mentioned <code>color</code> props to modify
            the presentation of a badge.
          </p>
@@ -69,7 +69,7 @@
          <strong>Vue Badges</strong> <small>Pill badges</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make
            badges rounded.
          </p>
@@ -6,7 +6,7 @@
          <strong>Vue Modals</strong>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Below is a static modal example (meaning its
            <code>position</code> and <code>display</code> have been
            overridden). Included are the modal header, modal body (required for
@@ -40,7 +40,7 @@
          <strong>Vue Modal</strong> <small>Live demo</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Toggle a working modal demo by clicking the button below. It will
            slide down and fade in from the top of the page.
          </p>
@@ -99,7 +99,7 @@
          <strong>Vue Modal</strong> <small>Static backdrop</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            If you set <code>backdrop</code> property to <code>static</code>,
            your modal will behave as though the backdrop is static, meaning it
            will not close when clicking outside it. Click the button below to
@@ -161,7 +161,7 @@
          <strong>Vue Modal</strong> <small>Scrolling long content</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            When modals become too long for the user's viewport or device, they
            scroll independent of the page itself. Try the demo below to see
            what we mean.
@@ -294,7 +294,7 @@
              </CModalBody>
            </CModal>
          </DocsExample>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            You can also create a scrollable modal that allows scroll the modal
            body by adding
            <code>scrollable</code> prop.
@@ -437,7 +437,7 @@
          <strong>Vue Modal</strong> <small>Vertically centered</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Add <code>alignment=&#34;center&#34;</code> to
            <code>&lt;CModal&gt;</code> to vertically center the modal.
          </p>
@@ -550,7 +550,7 @@
          <strong>Vue Modal</strong> <small>Tooltips and popovers</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            <code>&lt;CTooltips&gt;</code> and
            <code>&lt;CPopovers&gt;</code> can be placed within modals as
            needed. When modals are closed, any tooltips and popovers within are
@@ -629,7 +629,7 @@
          <strong>Vue Modal</strong> <small>Optional sizes</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Modals have three optional sizes, available via modifier classes to
            be placed on a
            <code>&lt;CModal&gt;</code>. These sizes kick in at certain
@@ -655,7 +655,7 @@
              </tr>
              <tr>
                <td>Default</td>
-                <td class="text-medium-emphasis">None</td>
+                <td class="text-body-secondary">None</td>
                <td>
                  <code>500px</code>
                </td>
@@ -781,7 +781,7 @@
          <strong>Vue Modal</strong> <small>Fullscreen Modal</small>
        </CCardHeader>
        <CCardBody>
-          <p class="text-medium-emphasis small">
+          <p class="text-body-secondary small">
            Another override is the option to pop up a modal that covers the
            user viewport, available via property <code>fullscrean</code>.
          </p>
@@ -8,7 +8,7 @@
              <CCardBody>
                <CForm>
                  <h1>Login</h1>
-                  <p class="text-medium-emphasis">Sign In to your account</p>
+                  <p class="text-body-secondary">Sign In to your account</p>
                  <CInputGroup class="mb-3">
                    <CInputGroupText>
                      <CIcon icon="cil-user" />
@@ -6,7 +6,7 @@
          <div class="clearfix">
            <h1 class="float-start display-3 me-4">404</h1>
            <h4 class="pt-3">Oops! You're lost.</h4>
-            <p class="text-medium-emphasis float-start">
+            <p class="text-body-secondary float-start">
              The page you are looking for was not found.
            </p>
          </div>
@@ -6,7 +6,7 @@
          <span class="clearfix">
            <h1 class="float-start display-3 me-4">500</h1>
            <h4 class="pt-3">Houston, we have a problem!</h4>
-            <p class="text-medium-emphasis float-start">
+            <p class="text-body-secondary float-start">
              The page you are looking for is temporarily unavailable.
            </p>
          </span>
@@ -7,7 +7,7 @@
            <CCardBody class="p-4">
              <CForm>
                <h1>Register</h1>
-                <p class="text-medium-emphasis">Create your account</p>
+                <p class="text-body-secondary">Create your account</p>
                <CInputGroup class="mb-3">
                  <CInputGroupText>
                    <CIcon icon="cil-user" />
@@ -289,7 +289,7 @@
                  </template>
                  <template #footer>
                    <CLink
-                      class="fw-semibold font-xs text-medium-emphasis"
+                      class="fw-semibold font-xs text-body-secondary"
                      href="https://coreui.io/"
                      rel="noopener norefferer"
                      target="_blank"
@@ -311,7 +311,7 @@
                  </template>
                  <template #footer>
                    <CLink
-                      class="fw-semibold font-xs text-medium-emphasis"
+                      class="fw-semibold font-xs text-body-secondary"
                      href="https://coreui.io/"
                      rel="noopener norefferer"
                      target="_blank"
@@ -333,7 +333,7 @@
                  </template>
                  <template #footer>
                    <CLink
-                      class="fw-semibold font-xs text-medium-emphasis"
+                      class="fw-semibold font-xs text-body-secondary"
                      href="https://coreui.io/"
                      rel="noopener norefferer"
                      target="_blank"
@@ -355,7 +355,7 @@
                  </template>
                  <template #footer>
                    <CLink
-                      class="fw-semibold font-xs text-medium-emphasis"
+                      class="fw-semibold font-xs text-body-secondary"
                      href="https://coreui.io/"
                      rel="noopener norefferer"
                      target="_blank"