From c639eb821319b36134d7294a882cc0fc30f82695 Mon Sep 17 00:00:00 2001
From: woothu <32914662+woothu@users.noreply.github.com>
Date: Tue, 15 Oct 2019 10:55:00 +0200
Subject: [PATCH] refactor: remplace variant prop with color

---
 src/views/Dashboard.vue               |  84 ++---
 src/views/base/Cards.vue              |  18 +-
 src/views/base/Collapses.vue          |   4 +-
 src/views/base/Forms.vue              |  86 ++---
 src/views/base/Jumbotrons.vue         |  14 +-
 src/views/base/ListGroups.vue         |  42 +--
 src/views/base/Navbars.vue            |  16 +-
 src/views/base/Popovers.vue           |   8 +-
 src/views/base/ProgressBars.vue       |  74 ++---
 src/views/base/Switches.vue           | 462 +++++++++++++-------------
 src/views/base/Table.vue              |   2 +-
 src/views/base/Tooltips.vue           |   8 +-
 src/views/buttons/BrandButtons.vue    |  24 +-
 src/views/buttons/ButtonGroups.vue    |  90 ++---
 src/views/buttons/Dropdowns.vue       |  48 +--
 src/views/buttons/StandardButtons.vue | 338 +++++++++----------
 src/views/icons/CoreUIIcons.vue       |   2 +-
 src/views/notifications/Alerts.vue    |  52 +--
 src/views/notifications/Badges.vue    |  62 ++--
 src/views/notifications/Modals.vue    |  32 +-
 src/views/pages/Login.vue             |   6 +-
 src/views/pages/Page404.vue           |   2 +-
 src/views/pages/Page500.vue           |   2 +-
 src/views/pages/Register.vue          |   6 +-
 src/views/users/Users.vue             |   2 +-
 src/views/widgets/Widgets.vue         |  94 +++---
 src/views/widgets/WidgetsBrand.vue    |  16 +-
 src/views/widgets/WidgetsDropdown.vue |  16 +-
 28 files changed, 800 insertions(+), 810 deletions(-)

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 1d269923..47d93597 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -9,12 +9,12 @@
             <div class="small text-muted">November 2017</div>
           </CCol>
           <CCol sm="7" class="d-none d-md-block">
-            <CButton variant="primary" class="float-right">
+            <CButton color="primary" class="float-right">
               <i class="cui-cloud-download"></i>
             </CButton>
             <CButtonGroup class="float-right mr-3">
               <CButton
-                variant="outline-secondary"
+                color="outline-secondary"
                 v-for="(value, key) in ['Day', 'Month', 'Year']"
                 :key="key"
                 class="mx-0"
@@ -36,7 +36,7 @@
             <CProgress
               class="progress-xs mt-2"
               :precision="1"
-              variant="success"
+              color="success"
               :value="40"
             />
           </CCol>
@@ -46,7 +46,7 @@
             <CProgress
               class="progress-xs mt-2"
               :precision="1"
-              variant="info"
+              color="info"
               :value="20"
             />
           </CCol>
@@ -56,7 +56,7 @@
             <CProgress
               class="progress-xs mt-2"
               :precision="1"
-              variant="warning"
+              color="warning"
               :value="60"
             />
           </CCol>
@@ -66,7 +66,7 @@
             <CProgress
               class="progress-xs mt-2"
               :precision="1"
-              variant="danger"
+              color="danger"
               :value="80"
             />
           </CCol>
@@ -90,13 +90,13 @@
             <CCol sm="12" lg="6">
               <CRow>
                 <CCol sm="6">
-                  <CCallout variant="info">
+                  <CCallout color="info">
                     <small class="text-muted">New Clients</small><br>
                     <strong class="h4">9,123</strong>
                   </CCallout>
                 </CCol>
                 <CCol sm="6">
-                  <CCallout variant="danger">
+                  <CCallout color="danger">
                     <small class="text-muted">Recurring Clients</small><br>
                     <strong class="h4">22,643</strong>
                   </CCallout>
@@ -112,12 +112,12 @@
                 <div class="progress-group-bars">
                   <CProgress
                     class="progress-xs"
-                    variant="info"
+                    color="info"
                     :value="34"
                   />
                   <CProgress
                     class="progress-xs"
-                    variant="danger"
+                    color="danger"
                     :value="78"
                   />
                 </div>
@@ -132,12 +132,12 @@
                   <CProgress
                     class="progress-xs"
                     :value="56"
-                    variant="info"
+                    color="info"
                   />
                   <CProgress
                     class="progress-xs"
                     :value="94"
-                    variant="danger"
+                    color="danger"
                   />
                 </div>
               </div>
@@ -151,12 +151,12 @@
                   <CProgress
                     class="progress-xs"
                     :value="12"
-                    variant="info"
+                    color="info"
                   />
                   <CProgress
                     class="progress-xs"
                     :value="67"
-                    variant="danger"
+                    color="danger"
                   />
                 </div>
               </div>
@@ -170,12 +170,12 @@
                   <CProgress
                     class="progress-xs"
                     :value="43"
-                    variant="info"
+                    color="info"
                   />
                   <CProgress
                     class="progress-xs"
                     :value="91"
-                    variant="danger"
+                    color="danger"
                   />
                 </div>
               </div>
@@ -189,12 +189,12 @@
                   <CProgress
                     class="progress-xs"
                     :value="22"
-                    variant="info"
+                    color="info"
                   />
                   <CProgress
                     class="progress-xs"
                     :value="73"
-                    variant="danger"
+                    color="danger"
                   />
                 </div>
               </div>
@@ -208,12 +208,12 @@
                   <CProgress
                     class="progress-xs"
                     :value="53"
-                    variant="info"
+                    color="info"
                   />
                   <CProgress
                     class="progress-xs"
                     :value="82"
-                    variant="danger"
+                    color="danger"
                   />
                 </div>
               </div>
@@ -227,21 +227,21 @@
                   <CProgress
                     class="progress-xs"
                     :value="9"
-                    variant="info"
+                    color="info"
                   />
                   <CProgress
                     class="progress-xs"
                     :value="69"
-                    variant="danger"
+                    color="danger"
                   />
                 </div>
               </div>
               <div class="legend text-center">
                 <small>
-                  <sup><CBadge pill variant="info">&nbsp;</CBadge></sup>
+                  <sup><CBadge pill color="info">&nbsp;</CBadge></sup>
                   New clients
                   &nbsp;&nbsp;
-                  <sup><CBadge pill variant="danger">&nbsp;</CBadge></sup>
+                  <sup><CBadge pill color="danger">&nbsp;</CBadge></sup>
                   Recurring clients
                 </small>
               </div>
@@ -249,13 +249,13 @@
             <CCol sm="12" lg="6">
               <CRow>
                 <CCol sm="6">
-                  <CCallout variant="warning">
+                  <CCallout color="warning">
                     <small class="text-muted">Pageviews</small><br>
                     <strong class="h4">78,623</strong>
                   </CCallout>
                 </CCol>
                 <CCol sm="6">
-                  <CCallout variant="success">
+                  <CCallout color="success">
                     <small class="text-muted">Organic</small><br>
                     <strong class="h4">49,123</strong>
                   </CCallout>
@@ -273,7 +273,7 @@
                     <CProgress
                       class="progress-xs"
                       :value="43"
-                      variant="warning"
+                      color="warning"
                     />
                   </div>
                 </div>
@@ -287,7 +287,7 @@
                     <CProgress
                       class="progress-xs"
                       :value="37"
-                      variant="warning"
+                      color="warning"
                     />
                   </div>
                 </div>
@@ -303,7 +303,7 @@
                     <CProgress
                       class="progress-xs"
                       :value="56"
-                      variant="success"
+                      color="success"
                     />
                   </div>
                 </div>
@@ -323,7 +323,7 @@
                     <CProgress
                       class="progress-xs"
                       :value="15"
-                      variant="success"
+                      color="success"
                     />
                   </div>
                 </div>
@@ -343,7 +343,7 @@
                     <CProgress
                       class="progress-xs"
                       :value="11"
-                      variant="success"
+                      color="success"
                     />
                   </div>
                 </div>
@@ -363,12 +363,12 @@
                     <CProgress
                       class="progress-xs"
                       :value="8"
-                      variant="success"
+                      color="success"
                     />
                   </div>
                 </div>
                 <div class="divider text-center">
-                  <CButton variant="link" size="sm" class="text-muted">
+                  <CButton color="link" size="sm" class="text-muted">
                     <i class="cui-options"></i>
                   </CButton>
                 </div>
@@ -381,7 +381,7 @@
             hover
             :items="tableItems"
             :fields="tableFields"
-            head-variant="light"
+            head-color="light"
             no-sorting
           >
             <td slot="avatar" class="text-center" slot-scope="{item}">
@@ -424,7 +424,7 @@
               <CProgress
                 class="progress-xs"
                 v-model="item.usage.value"
-                :variant="variant(item.usage.value)"
+                :color="color(item.usage.value)"
               />
             </td>
             <td
@@ -524,18 +524,18 @@ export default {
     }
   },
   methods: {
-    variant (value) {
-      let $variant
+    color (value) {
+      let $color
       if (value <= 25) {
-        $variant = 'info'
+        $color = 'info'
       } else if (value > 25 && value <= 50) {
-        $variant = 'success'
+        $color = 'success'
       } else if (value > 50 && value <= 75) {
-        $variant = 'warning'
+        $color = 'warning'
       } else if (value > 75 && value <= 100) {
-        $variant = 'danger'
+        $color = 'danger'
       }
-      return $variant
+      return $color
     }
   }
 }
diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue
index e4052c02..cce9523a 100644
--- a/src/views/base/Cards.vue
+++ b/src/views/base/Cards.vue
@@ -38,7 +38,7 @@
               class="float-right"
               size="sm"
               shape="pill"
-              variant="info"
+              color="info"
               data-on="On"
               data-off="Off"
               :checked="true"
@@ -53,7 +53,7 @@
         <CCard>
           <CCardHeader>
             Card with label
-            <CBadge variant="success" class="float-right">Success</CBadge>
+            <CBadge color="success" class="float-right">Success</CBadge>
           </CCardHeader>
           <CCardBody>
             {{loremIpsum}}
@@ -64,7 +64,7 @@
         <CCard>
           <CCardHeader>
             Card with label
-            <CBadge pill variant="danger" class="float-right">42</CBadge>
+            <CBadge pill color="danger" class="float-right">42</CBadge>
           </CCardHeader>
           <CCardBody>
             {{loremIpsum}}
@@ -76,38 +76,38 @@
       <CCol sm="6" md="4">
         <CCard
           header="Card outline primary"
-          border-variant="primary"
+          border-color="primary"
           :body-html="loremIpsum"
         />
       </CCol>
       <CCol sm="6" md="4">
         <CCard
           header="Card outline secondary"
-          border-variant="secondary"
+          border-color="secondary"
           :body-html="loremIpsum"
         />
       </CCol>
       <CCol sm="6" md="4">
         <CCard
           header="Card outline success"
-          border-variant="success"
+          border-color="success"
           body-wrapper
         >
             {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card outline info" border-variant="info" body-wrapper>
+        <CCard header-html="Card outline info" border-color="info" body-wrapper>
             {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card outline warning" border-variant="warning" body-wrapper>
+        <CCard header-html="Card outline warning" border-color="warning" body-wrapper>
             {{loremIpsum}}
         </CCard>
       </CCol>
       <CCol sm="6" md="4">
-        <CCard header-html="Card outline danger" border-variant="danger" body-wrapper>
+        <CCard header-html="Card outline danger" border-color="danger" body-wrapper>
             {{loremIpsum}}
         </CCard>
       </CCol>
diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue
index f7d99a63..3ba9b4b7 100644
--- a/src/views/base/Collapses.vue
+++ b/src/views/base/Collapses.vue
@@ -17,13 +17,13 @@
           </div>
         </CCardHeader>
         <CCardBody>
-          <CButton id="collapse1" variant="primary">
+          <CButton id="collapse1" color="primary">
             Toggle Collapse
           </CButton>
           <CCollapse toggler="collapse1" class="mt-2">
             <CCard body-wrapper>
               <p class="card-text">Collapse contents Here</p>
-              <CButton id="collapse2" size="sm" variant="secondary">
+              <CButton id="collapse2" size="sm" color="secondary">
                 Toggle Inner Collapse
               </CButton>
               <CCollapse toggler="collapse2" class="mt-2">
diff --git a/src/views/base/Forms.vue b/src/views/base/Forms.vue
index b2c69359..c388ffad 100644
--- a/src/views/base/Forms.vue
+++ b/src/views/base/Forms.vue
@@ -246,8 +246,8 @@
             </CForm>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
         <CCard>
@@ -277,8 +277,8 @@
             </CForm>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -308,8 +308,8 @@
             </CForm>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
         <CCard>
@@ -338,8 +338,8 @@
               />
             </CCardBody>
             <CCardFooter>
-              <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
-              <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
+              <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
+              <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
             </CCardFooter>
           </CForm>
         </CCard>
@@ -400,8 +400,8 @@
             </CRow>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="primary"><i class="cui-user"></i> Login</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><i class="cui-user"></i> Login</CButton>
+            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
         <CCard>
@@ -428,8 +428,8 @@
             />
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="primary"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="primary"><i class="cui-circle-check"></i> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -506,8 +506,8 @@
             />
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -519,7 +519,7 @@
           <CCardBody>
             <CFormInput placeholder="Username">
               <template #prepend>
-                <CButton variant="primary">
+                <CButton color="primary">
                   <i class="cui-magnifying-glass"></i> Search
                 </CButton>
               </template>
@@ -530,7 +530,7 @@
               autocomplete="email"
             >
               <template #append>
-                <CButton type="submit" variant="primary">Submit</CButton>
+                <CButton type="submit" color="primary">Submit</CButton>
               </template>
             </CFormInput>
             <CFormInput
@@ -539,16 +539,16 @@
               autocomplete="email"
             >
               <template #prepend>
-                <CButton variant="primary"><CIcon name="facebook" height="14"/></CButton>
+                <CButton color="primary"><CIcon name="facebook" height="14"/></CButton>
               </template>
               <template #append>
-                <CButton variant="primary"><CIcon name="twitter" height="14"/></CButton>
+                <CButton color="primary"><CIcon name="twitter" height="14"/></CButton>
               </template>
             </CFormInput>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -562,7 +562,7 @@
               <template #prepend>
                 <CDropdown
                   togglerText="Action"
-                  variant="primary"
+                  color="primary"
                 >
                   <CDropdownItem>Action</CDropdownItem>
                   <CDropdownItem>Another action</CDropdownItem>
@@ -579,7 +579,7 @@
               <template #append>
                 <CDropdown
                   togglerText="Action"
-                  variant="primary"
+                  color="primary"
                   right
                 >
                   <CDropdownItem>Action</CDropdownItem>
@@ -594,7 +594,7 @@
               <template #prepend>
                 <CDropdown
                   togglerText="Split"
-                  variant="primary"
+                  color="primary"
                   split
                 >
                   <CDropdownItem href="#">Action</CDropdownItem>
@@ -607,7 +607,7 @@
               <template #append>
                 <CDropdown
                   togglerText="Action"
-                  variant="primary"
+                  color="primary"
                   right
                 >
                   <CDropdownItem>Action</CDropdownItem>
@@ -620,8 +620,8 @@
             </CFormInput>
           </CCardBody>
           <CCardFooter>
-            <CButton type="submit" size="sm" variant="success"><i class="cui-circle-check"></i> Submit</CButton>
-            <CButton type="reset" size="sm" variant="danger"><i class="cui-ban"></i> Reset</CButton>
+            <CButton type="submit" size="sm" color="success"><i class="cui-circle-check"></i> Submit</CButton>
+            <CButton type="reset" size="sm" color="danger"><i class="cui-ban"></i> Reset</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -647,11 +647,11 @@
             </CRow>
           </CCardBody>
           <CCardFooter>
-            <CButton size="sm" variant="primary">Action</CButton>
-            <CButton size="sm" variant="danger">Action</CButton>
-            <CButton size="sm" variant="warning">Action</CButton>
-            <CButton size="sm" variant="info">Action</CButton>
-            <CButton size="sm" variant="success">Action</CButton>
+            <CButton size="sm" color="primary">Action</CButton>
+            <CButton size="sm" color="danger">Action</CButton>
+            <CButton size="sm" color="warning">Action</CButton>
+            <CButton size="sm" color="info">Action</CButton>
+            <CButton size="sm" color="success">Action</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -675,11 +675,11 @@
             </CRow>
           </CCardBody>
           <CCardFooter>
-            <CButton size="sm" variant="primary">Action</CButton>
-            <CButton size="sm" variant="danger">Action</CButton>
-            <CButton size="sm" variant="warning">Action</CButton>
-            <CButton size="sm" variant="info">Action</CButton>
-            <CButton size="sm" variant="success">Action</CButton>
+            <CButton size="sm" color="primary">Action</CButton>
+            <CButton size="sm" color="danger">Action</CButton>
+            <CButton size="sm" color="warning">Action</CButton>
+            <CButton size="sm" color="info">Action</CButton>
+            <CButton size="sm" color="success">Action</CButton>
           </CCardFooter>
         </CCard>
       </CCol>
@@ -709,7 +709,7 @@
                 append-html="<i class='cui-shield'></i>"
               />
               <div class="form-group form-actions">
-                <CButton type="submit" size="sm" variant="primary">
+                <CButton type="submit" size="sm" color="primary">
                   Submit
                 </CButton>
               </div>
@@ -773,7 +773,7 @@
                 prependHtml="<i class='cui-shield'></i>"
               />
               <div class="form-group form-actions">
-                <CButton type="submit" size="sm" variant="success">
+                <CButton type="submit" size="sm" color="success">
                   Submit
                 </CButton>
               </div>
@@ -828,18 +828,18 @@
                   description="Here's some help text"
                 >
                   <template #append>
-                    <CButton variant="primary">Go!</CButton>
+                    <CButton color="primary">Go!</CButton>
                   </template>
                 </CFormInput>
                 <CFormInput label="Two-buttons append">
                   <template #append>
-                    <CButton variant="primary">Search</CButton>
-                    <CButton variant="danger">Options</CButton>
+                    <CButton color="primary">Search</CButton>
+                    <CButton color="danger">Options</CButton>
                   </template>
                 </CFormInput>
                 <div class="form-actions">
-                  <CButton type="submit" variant="primary">Save changes</CButton>
-                  <CButton variant="secondary">Cancel</CButton>
+                  <CButton type="submit" color="primary">Save changes</CButton>
+                  <CButton color="secondary">Cancel</CButton>
                 </div>
               </CCardBody>
             </CCollapse>
diff --git a/src/views/base/Jumbotrons.vue b/src/views/base/Jumbotrons.vue
index e019d69b..8845901c 100644
--- a/src/views/base/Jumbotrons.vue
+++ b/src/views/base/Jumbotrons.vue
@@ -20,7 +20,7 @@
           <CCardBody>
             <CJumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
               <p>For more information visit website</p>
-              <CButton variant="primary" href="#">More Info</CButton>
+              <CButton color="primary" href="#">More Info</CButton>
             </CJumbotron>
           </CCardBody>
         </CCard>
@@ -42,8 +42,8 @@
                 It uses utility classes for typography and spacing to space content
                 out within the larger container.
               </p>
-              <CButton variant="primary" href="#">Do Something</CButton>
-              <CButton variant="success" href="#">Do Something Else</CButton>
+              <CButton color="primary" href="#">Do Something</CButton>
+              <CButton color="success" href="#">Do Something Else</CButton>
             </CJumbotron>
           </CCardBody>
         </CCard>
@@ -54,13 +54,13 @@
         <CCard>
           <CCardHeader>
             <i class="fa fa-align-justify"></i> <strong> Jumbotron </strong>
-            <small>variants</small>
+            <small>colors</small>
           </CCardHeader>
           <CCardBody>
             <CJumbotron
-              variant="info"
-              text-variant="white"
-              border-variant="dark"
+              color="info"
+              text-color="white"
+              border-color="dark"
               header="Bootstrap 4"
             >
               <p slot="lead" class="lead">
diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue
index 4f53881c..41e4af42 100644
--- a/src/views/base/ListGroups.vue
+++ b/src/views/base/ListGroups.vue
@@ -113,19 +113,19 @@
                 class="d-flex justify-content-between align-items-center"
               >
                 Cras justo odio
-                <CBadge variant="primary" pill>14</CBadge>
+                <CBadge color="primary" pill>14</CBadge>
               </CListGroupItem>
               <CListGroupItem
                 class="d-flex justify-content-between align-items-center"
               >
                 Dapibus ac facilisis in
-                <CBadge variant="primary" pill>2</CBadge>
+                <CBadge color="primary" pill>2</CBadge>
               </CListGroupItem>
               <CListGroupItem
                 class="d-flex justify-content-between align-items-center"
               >
                 Morbi leo risus
-                <CBadge variant="primary" pill>1</CBadge>
+                <CBadge color="primary" pill>1</CBadge>
               </CListGroupItem>
             </CListGroup>
           </CCardBody>
@@ -138,19 +138,19 @@
           <CCardHeader>
             <i class="fa fa-align-justify"></i>
             <strong> List group </strong>
-            <small>variants</small>
+            <small>colors</small>
           </CCardHeader>
           <CCardBody>
             <CListGroup>
               <CListGroupItem>This is a default list group item</CListGroupItem>
-              <CListGroupItem variant="primary">This is a primary list group item</CListGroupItem>
-              <CListGroupItem variant="secondary">This is a secondary list group item</CListGroupItem>
-              <CListGroupItem variant="success">This is a success list group item</CListGroupItem>
-              <CListGroupItem variant="danger">This is a danger list group item</CListGroupItem>
-              <CListGroupItem variant="warning">This is a warning list group item</CListGroupItem>
-              <CListGroupItem variant="info">This is a info list group item</CListGroupItem>
-              <CListGroupItem variant="light">This is a light list group item</CListGroupItem>
-              <CListGroupItem variant="dark">This is a dark list group item</CListGroupItem>
+              <CListGroupItem color="primary">This is a primary list group item</CListGroupItem>
+              <CListGroupItem color="secondary">This is a secondary list group item</CListGroupItem>
+              <CListGroupItem color="success">This is a success list group item</CListGroupItem>
+              <CListGroupItem color="danger">This is a danger list group item</CListGroupItem>
+              <CListGroupItem color="warning">This is a warning list group item</CListGroupItem>
+              <CListGroupItem color="info">This is a info list group item</CListGroupItem>
+              <CListGroupItem color="light">This is a light list group item</CListGroupItem>
+              <CListGroupItem color="dark">This is a dark list group item</CListGroupItem>
             </CListGroup>
           </CCardBody>
         </CCard>
@@ -160,19 +160,19 @@
           <CCardHeader>
             <i class="fa fa-align-justify"></i>
             <strong> List group </strong>
-            <small>variants active</small>
+            <small>colors active</small>
           </CCardHeader>
           <CCardBody>
             <CListGroup>
               <CListGroupItem href="#">This is a default list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="primary">This is a primary list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="secondary">This is a secondary list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="success">This is a success list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="danger">This is a danger list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="warning">This is a warning list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="info">This is a info list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="light">This is a light list group item</CListGroupItem>
-              <CListGroupItem href="#" variant="dark">This is a dark list group item</CListGroupItem>
+              <CListGroupItem href="#" color="primary">This is a primary list group item</CListGroupItem>
+              <CListGroupItem href="#" color="secondary">This is a secondary list group item</CListGroupItem>
+              <CListGroupItem href="#" color="success">This is a success list group item</CListGroupItem>
+              <CListGroupItem href="#" color="danger">This is a danger list group item</CListGroupItem>
+              <CListGroupItem href="#" color="warning">This is a warning list group item</CListGroupItem>
+              <CListGroupItem href="#" color="info">This is a info list group item</CListGroupItem>
+              <CListGroupItem href="#" color="light">This is a light list group item</CListGroupItem>
+              <CListGroupItem href="#" color="dark">This is a dark list group item</CListGroupItem>
             </CListGroup>
           </CCardBody>
         </CCard>
diff --git a/src/views/base/Navbars.vue b/src/views/base/Navbars.vue
index 8fd6afb5..f6d2e322 100644
--- a/src/views/base/Navbars.vue
+++ b/src/views/base/Navbars.vue
@@ -18,7 +18,7 @@
       <CCardBody>
         <CNavbar
           toggleable="md"
-          variant="info"
+          color="info"
         >
           <CNavbarToggler @click="show=!show"/>
           <CNavbarBrand href="#">NavBar</CNavbarBrand>
@@ -36,7 +36,7 @@
                   placeholder="Search"
                   size="sm"
                 />
-                <CButton variant="light" size="sm" class="my-2 my-sm-0">
+                <CButton color="light" size="sm" class="my-2 my-sm-0">
                   Search
                 </CButton>
               </CForm>
@@ -72,7 +72,7 @@
       </CCardHeader>
       <CCardBody>
         <!-- Image and text -->
-        <CNavbar variant="faded" light>
+        <CNavbar color="faded" light>
           <CNavbarBrand href="#">
             <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="CoreuiVue">
             CoreuiVue
@@ -86,7 +86,7 @@
         <small>text</small>
       </CCardHeader>
       <CCardBody>
-        <CNavbar toggleable="sm" light variant="light">
+        <CNavbar toggleable="sm" light color="light">
           <CNavbarToggle @click="navbarText=!navbarText"></CNavbarToggle>
           <CNavbarBrand>CoreuiVue</CNavbarBrand>
           <CCollapse :show="navbarText" navbar>
@@ -103,7 +103,7 @@
         <small>dropdown</small>
       </CCardHeader>
       <CCardBody>
-        <CNavbar toggleable="sm" variant="primary">
+        <CNavbar toggleable="sm" color="primary">
           <CNavbarToggle @click="navbarDropdown = !navbarDropdown"></CNavbarToggle>
           <CCollapse :show="navbarDropdown" navbar>
             <CNavbarNav>
@@ -139,14 +139,14 @@
         <small>form</small>
       </CCardHeader>
       <CCardBody>
-        <CNavbar light variant="light">
+        <CNavbar light color="light">
           <CForm inline>
             <CFormInput
               class="mr-sm-2"
               placeholder="Search"
               size="sm"
             />
-            <CButton variant="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
+            <CButton color="outline-success" class="my-2 my-sm-0" type="submit">Search</CButton>
           </CForm>
         </CNavbar>
       </CCardBody>
@@ -157,7 +157,7 @@
         <small>input group</small>
       </CCardHeader>
       <CCardBody>
-        <CNavbar light variant="light">
+        <CNavbar light color="light">
           <CForm inline>
             <CFormInput
               class="mr-sm-2"
diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue
index 81072407..a3366697 100644
--- a/src/views/base/Popovers.vue
+++ b/src/views/base/Popovers.vue
@@ -20,7 +20,7 @@
           <CCol col="4">
             <div class="my-3 text-center">
               <CButton
-                variant="primary"
+                color="primary"
                 v-c-popover="{
                   header: 'Popover header',
                   content: 'I am popover content!'
@@ -33,7 +33,7 @@
           <CCol col="4">
             <div class="my-3 text-center">
               <CButton
-                variant="primary"
+                color="primary"
                 v-c-popover="{
                   header: 'Popover!',
                   content: 'I start <strong>open</strong>',
@@ -46,7 +46,7 @@
           <CCol col="4">
             <div class="my-3 text-center">
               <CButton
-                variant="primary"
+                color="primary"
                 v-c-popover.click="{
                   header: 'Popover!',
                   content: 'I am showing on click and hiding on click outside tooltip!',
@@ -75,7 +75,7 @@
             :key="placement"
           >
             <CButton
-              variant="primary"
+              color="primary"
               v-c-popover="{
                 header: 'Popover!',
                 content: `Placement ${placement}`,
diff --git a/src/views/base/ProgressBars.vue b/src/views/base/ProgressBars.vue
index d2746c69..a31e7349 100644
--- a/src/views/base/ProgressBars.vue
+++ b/src/views/base/ProgressBars.vue
@@ -18,13 +18,13 @@
       <CCardBody>
         <CProgress :value="counter" :max="max" show-percentage animated></CProgress>
         <CProgress class="mt-1" :max="max" show-value>
-          <CProgressBar :value="counter*(6/10)" variant="success"/>
-          <CProgressBar :value="counter*(2.5/10)" variant="warning"/>
-          <CProgressBar :value="counter*(1.5/10)" variant="danger"/>
+          <CProgressBar :value="counter*(6/10)" color="success"/>
+          <CProgressBar :value="counter*(2.5/10)" color="warning"/>
+          <CProgressBar :value="counter*(1.5/10)" color="danger"/>
         </CProgress>
         <CButton 
           @click="clicked"
-          variant="secondary"
+          color="secondary"
           class="mt-4" 
         >
           Click me to animate progress bars
@@ -82,16 +82,16 @@
       <CCardHeader>
         <i class="fa fa-align-justify"></i>
         <strong> Progress </strong>
-        <small>variants</small>
+        <small>colors</small>
       </CCardHeader>
       <CCardBody>
         <div :key="index" v-for="(bar, index) in bars" class="row mb-1">
-          <div class="col-sm-2">{{ bar.variant }}:</div>
+          <div class="col-sm-2">{{ bar.color }}:</div>
           <div class="col-sm-10 pt-1">
             <CProgress
               :value="bar.value"
-              :variant="bar.variant"
-              :key="bar.variant"
+              :color="bar.color"
+              :key="bar.color"
             />
           </div>
         </div>
@@ -106,29 +106,29 @@
       <CCardBody>
         <CProgress
           :value="25"
-          variant="success"
+          color="success"
           :striped="striped"
           class="mb-2"
         />
         <CProgress
           :value="50"
-          variant="info"
+          color="info"
           :striped="striped"
           class="mb-2"
         />
         <CProgress
           :value="75"
-          variant="warning"
+          color="warning"
           :striped="striped"
           class="mb-2"
         />
         <CProgress
           :value="100"
-          variant="danger"
+          color="danger"
           :striped="striped"
           class="mb-2"
         />
-        <CButton variant="secondary" @click="striped = !striped">
+        <CButton color="secondary" @click="striped = !striped">
           {{ striped ? 'Remove' : 'Add'}} Striped
         </CButton>
       </CCardBody>
@@ -142,32 +142,32 @@
       <CCardBody>
         <CProgress
           :value="25"
-          variant="success"
+          color="success"
           striped
           :animated="animate"
           class="mb-2"
         />
         <CProgress
           :value="50"
-          variant="info"
+          color="info"
           striped
           :animated="animate"
           class="mb-2"
         />
         <CProgress
           :value="75"
-          variant="warning"
+          color="warning"
           striped
           :animated="animate"
           class="mb-2"
         />
         <CProgress
           :value="100"
-          variant="danger"
+          color="danger"
           :animated="animate"
           class="mb-3"
         />
-        <CButton variant="secondary" @click="animate = !animate">
+        <CButton color="secondary" @click="animate = !animate">
           {{ animate ? 'Stop' : 'Start'}} Animation
         </CButton>
       </CCardBody>
@@ -180,24 +180,24 @@
       </CCardHeader>
       <CCardBody>
         <CProgress :max="max3" class="mb-3">
-          <CProgressBar variant="primary" :value="values[0]"/>
-          <CProgressBar variant="success" :value="values[1]"/>
-          <CProgressBar variant="info" :value="values[2]"/>
+          <CProgressBar color="primary" :value="values[0]"/>
+          <CProgressBar color="success" :value="values[1]"/>
+          <CProgressBar color="info" :value="values[2]"/>
         </CProgress>
         <CProgress show-percentage :max="max3" class="mb-3">
-          <CProgressBar variant="primary" :value="values[0]"/>
-          <CProgressBar variant="success" :value="values[1]"/>
-          <CProgressBar variant="info" :value="values[2]"/>
+          <CProgressBar color="primary" :value="values[0]"/>
+          <CProgressBar color="success" :value="values[1]"/>
+          <CProgressBar color="info" :value="values[2]"/>
         </CProgress>
         <CProgress show-value striped :max="max3" class="mb-3">
-          <CProgressBar variant="primary" :value="values[0]"/>
-          <CProgressBar variant="success" :value="values[1]"/>
-          <CProgressBar variant="info" :value="values[2]"/>
+          <CProgressBar color="primary" :value="values[0]"/>
+          <CProgressBar color="success" :value="values[1]"/>
+          <CProgressBar color="info" :value="values[2]"/>
         </CProgress>
         <CProgress :max="max3" class="mb-3">
-          <CProgressBar variant="primary" :value="values[0]" show-percentage/>
-          <CProgressBar variant="success" :value="values[1]" animated show-percentage/>
-          <CProgressBar variant="info" :value="values[2]" striped show-percentage/>
+          <CProgressBar color="primary" :value="values[0]" show-percentage/>
+          <CProgressBar color="success" :value="values[1]" animated show-percentage/>
+          <CProgressBar color="info" :value="values[2]" striped show-percentage/>
         </CProgress>
       </CCardBody>
     </CCard>
@@ -215,13 +215,13 @@ export default {
       value: 33.333333333,
       value3: 75,
       bars: [
-        {variant: 'success', value: 75},
-        {variant: 'info', value: 75},
-        {variant: 'warning', value: 75},
-        {variant: 'danger', value: 75},
-        {variant: 'primary', value: 75},
-        {variant: 'secondary', value: 75},
-        {variant: 'dark', value: 75}
+        {color: 'success', value: 75},
+        {color: 'info', value: 75},
+        {color: 'warning', value: 75},
+        {color: 'danger', value: 75},
+        {color: 'primary', value: 75},
+        {color: 'secondary', value: 75},
+        {color: 'dark', value: 75}
       ],
       timer: null,
       striped: true,
diff --git a/src/views/base/Switches.vue b/src/views/base/Switches.vue
index ef7ff7b5..0d27e42d 100644
--- a/src/views/base/Switches.vue
+++ b/src/views/base/Switches.vue
@@ -5,7 +5,7 @@
         <CCard v-if="true">
           <CCardHeader>
             Radio switches
-            <CBadge :variant="radio" class="mr-auto">{{radio}}</CBadge>
+            <CBadge :color="radio" class="mr-auto">{{radio}}</CBadge>
             <div class="card-header-actions">
               <a 
                 href="https://coreui.io/vue/docs/3.0/components/Switch" 
@@ -18,27 +18,19 @@
             </div>
           </CCardHeader>
           <CCardBody>
-            <!-- <CSwitch
-              :checked.sync="test11"
-              true-value="yes"
-              false-value="no"
-              id="alt"
-              name="lg"
-              required
-            /> -->
-            <!-- <CSwitch class="mx-1" variant="primary" shape="3d" outline="alt" v-bind="labelIcon" type="radio" name="radio" checked.sync="radio" true-value="primary"/> -->
             <CSwitch
+              v-for="(color, key) in colors"
+              :key="'radio' + key"
               class="mx-1"
-              :key="key"
-              :variant="variant"
+              :color="color"
               shape="3d"
               outline="alt"
               v-bind="labelIcon"
               type="radio"
               name="radio"
-              :checked.sync="radio"
-              :value="variant"
-              v-for="(variant, key) in variants"
+              :checked="key === 2"
+              @update:checked="(val) => val ? radio = color : null"
+              :value="color"
             />
           </CCardBody>
         </CCard>
@@ -49,25 +41,23 @@
         <CCard>
           <CCardHeader>
             Switch default
-            <CBadge variant="primary">{{checker}}</CBadge>
+            <CBadge color="primary">{{checker}}</CBadge>
           </CCardHeader>
           <CCardBody>
             <CSwitch
               class="mx-1"
-              variant="primary"
+              color="primary"
               name="switch1"
               :checked.sync="checker"
-              true-value="yes"
-              false-value="no"
             />
             <CSwitch
               class="mx-1"
-              :variant="variant"
+              :color="color"
               checked
               :key="key"
-              v-for="(variant, key) in ['secondary', 'success','warning','info','danger','light','dark']"
+              v-for="(color, key) in ['secondary', 'success','warning','info','danger','light','dark']"
             />
-            <CSwitch class="mx-1" variant="primary" disabled />
+            <CSwitch class="mx-1" color="primary" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -77,15 +67,15 @@
             Switch pills
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked shape="pill"/>
-            <CSwitch class="mx-1" variant="secondary" checked shape="pill" />
-            <CSwitch class="mx-1" variant="success" checked shape="pill" />
-            <CSwitch class="mx-1" variant="warning" checked shape="pill" />
-            <CSwitch class="mx-1" variant="info" checked shape="pill" />
-            <CSwitch class="mx-1" variant="danger" checked shape="pill" />
-            <CSwitch class="mx-1" variant="light" checked shape="pill" />
-            <CSwitch class="mx-1" variant="dark" checked shape="pill" />
-            <CSwitch class="mx-1" variant="primary" disabled shape="pill" />
+            <CSwitch class="mx-1" color="primary" checked shape="pill"/>
+            <CSwitch class="mx-1" color="secondary" checked shape="pill" />
+            <CSwitch class="mx-1" color="success" checked shape="pill" />
+            <CSwitch class="mx-1" color="warning" checked shape="pill" />
+            <CSwitch class="mx-1" color="info" checked shape="pill" />
+            <CSwitch class="mx-1" color="danger" checked shape="pill" />
+            <CSwitch class="mx-1" color="light" checked shape="pill" />
+            <CSwitch class="mx-1" color="dark" checked shape="pill" />
+            <CSwitch class="mx-1" color="primary" disabled shape="pill" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -95,15 +85,15 @@
             3d Switch
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="secondary" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="success" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="warning" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="info" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="danger" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="light" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="dark" checked  shape="3d" />
-            <CSwitch class="mx-1" variant="primary" disabled  shape="3d" />
+            <CSwitch class="mx-1" color="primary" checked  shape="3d" />
+            <CSwitch class="mx-1" color="secondary" checked  shape="3d" />
+            <CSwitch class="mx-1" color="success" checked  shape="3d" />
+            <CSwitch class="mx-1" color="warning" checked  shape="3d" />
+            <CSwitch class="mx-1" color="info" checked  shape="3d" />
+            <CSwitch class="mx-1" color="danger" checked  shape="3d" />
+            <CSwitch class="mx-1" color="light" checked  shape="3d" />
+            <CSwitch class="mx-1" color="dark" checked  shape="3d" />
+            <CSwitch class="mx-1" color="primary" disabled  shape="3d" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -113,15 +103,15 @@
             3d Switch <small><code>disabled</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="secondary" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="success" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="warning" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="info" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="danger" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="light" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="dark" checked shape="3d" disabled />
-            <CSwitch class="mx-1" variant="primary" disabled shape="3d" />
+            <CSwitch class="mx-1" color="primary" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="secondary" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="success" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="warning" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="info" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="danger" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="light" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="dark" checked shape="3d" disabled />
+            <CSwitch class="mx-1" color="primary" disabled shape="3d" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -131,15 +121,15 @@
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="secondary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="success" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="warning" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="info" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="danger" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="light" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="dark" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="primary" disabled  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="primary" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="secondary" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="success" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="warning" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="info" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="danger" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="light" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="dark" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="primary" disabled  shape="3d" outline="alt" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -149,15 +139,15 @@
             3d Switch <small><code>label</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" shape="3d" checked v-bind="labelIcon"/>
-            <CSwitch class="mx-1" variant="secondary" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked shape="3d" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" disabled shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" shape="3d" checked v-bind="labelIcon"/>
+            <CSwitch class="mx-1" color="secondary" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked shape="3d" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" disabled shape="3d" v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -167,15 +157,15 @@
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="secondary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked  shape="3d" outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" disabled  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked  shape="3d" outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" disabled  shape="3d" outline="alt" v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -185,15 +175,15 @@
             3d Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="secondary" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="success" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="warning" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="info" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="danger" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="light" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="dark" checked  shape="3d" outline="alt" />
-            <CSwitch class="mx-1" variant="primary" disabled  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="primary" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="secondary" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="success" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="warning" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="info" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="danger" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="light" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="dark" checked  shape="3d" outline="alt" />
+            <CSwitch class="mx-1" color="primary" disabled  shape="3d" outline="alt" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -203,15 +193,15 @@
             Switch <small><code>outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline />
-            <CSwitch class="mx-1" variant="secondary" checked outline />
-            <CSwitch class="mx-1" variant="success" checked outline />
-            <CSwitch class="mx-1" variant="warning" checked outline />
-            <CSwitch class="mx-1" variant="info" checked outline />
-            <CSwitch class="mx-1" variant="danger" checked outline />
-            <CSwitch class="mx-1" variant="light" checked outline />
-            <CSwitch class="mx-1" variant="dark" checked outline />
-            <CSwitch class="mx-1" variant="primary" outline disabled />
+            <CSwitch class="mx-1" color="primary" checked outline />
+            <CSwitch class="mx-1" color="secondary" checked outline />
+            <CSwitch class="mx-1" color="success" checked outline />
+            <CSwitch class="mx-1" color="warning" checked outline />
+            <CSwitch class="mx-1" color="info" checked outline />
+            <CSwitch class="mx-1" color="danger" checked outline />
+            <CSwitch class="mx-1" color="light" checked outline />
+            <CSwitch class="mx-1" color="dark" checked outline />
+            <CSwitch class="mx-1" color="primary" outline disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -221,15 +211,15 @@
             Switch <small><code>outline  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline shape="pill"/>
-            <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="success" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="info" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="light" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
+            <CSwitch class="mx-1" color="primary" checked outline shape="pill"/>
+            <CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="success" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="warning" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="info" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="danger" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="light" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="dark" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -239,15 +229,15 @@
             Switch <small><code>outline="alt"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline="alt" />
-            <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
-            <CSwitch class="mx-1" variant="success" checked outline="alt" />
-            <CSwitch class="mx-1" variant="warning" checked outline="alt" />
-            <CSwitch class="mx-1" variant="info" checked outline="alt" />
-            <CSwitch class="mx-1" variant="danger" checked outline="alt" />
-            <CSwitch class="mx-1" variant="light" checked outline="alt" />
-            <CSwitch class="mx-1" variant="dark" checked outline="alt" />
-            <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
+            <CSwitch class="mx-1" color="primary" checked outline="alt" />
+            <CSwitch class="mx-1" color="secondary" checked outline="alt" />
+            <CSwitch class="mx-1" color="success" checked outline="alt" />
+            <CSwitch class="mx-1" color="warning" checked outline="alt" />
+            <CSwitch class="mx-1" color="info" checked outline="alt" />
+            <CSwitch class="mx-1" color="danger" checked outline="alt" />
+            <CSwitch class="mx-1" color="light" checked outline="alt" />
+            <CSwitch class="mx-1" color="dark" checked outline="alt" />
+            <CSwitch class="mx-1" color="primary" outline="alt" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -257,15 +247,15 @@
             Switch <small><code>outline="alt"  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill"/>
-            <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
+            <CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill"/>
+            <CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -275,15 +265,15 @@
             Switch <small><code>label</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked />
-            <CSwitch class="mx-1" variant="secondary" checked />
-            <CSwitch class="mx-1" variant="success" checked />
-            <CSwitch class="mx-1" variant="warning" checked />
-            <CSwitch class="mx-1" variant="info" checked />
-            <CSwitch class="mx-1" variant="danger" checked />
-            <CSwitch class="mx-1" variant="light" checked />
-            <CSwitch class="mx-1" variant="dark" checked />
-            <CSwitch class="mx-1" variant="primary" disabled />
+            <CSwitch class="mx-1" color="primary" checked />
+            <CSwitch class="mx-1" color="secondary" checked />
+            <CSwitch class="mx-1" color="success" checked />
+            <CSwitch class="mx-1" color="warning" checked />
+            <CSwitch class="mx-1" color="info" checked />
+            <CSwitch class="mx-1" color="danger" checked />
+            <CSwitch class="mx-1" color="light" checked />
+            <CSwitch class="mx-1" color="dark" checked />
+            <CSwitch class="mx-1" color="primary" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -293,15 +283,15 @@
             Switch <small><code>label  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked shape="pill" />
-            <CSwitch class="mx-1" variant="secondary" checked shape="pill" />
-            <CSwitch class="mx-1" variant="success" checked shape="pill" />
-            <CSwitch class="mx-1" variant="warning" checked shape="pill" />
-            <CSwitch class="mx-1" variant="info" checked shape="pill" />
-            <CSwitch class="mx-1" variant="danger" checked shape="pill" />
-            <CSwitch class="mx-1" variant="light" checked shape="pill" />
-            <CSwitch class="mx-1" variant="dark" checked shape="pill" />
-            <CSwitch class="mx-1" variant="primary" shape="pill" disabled />
+            <CSwitch class="mx-1" color="primary" checked shape="pill" />
+            <CSwitch class="mx-1" color="secondary" checked shape="pill" />
+            <CSwitch class="mx-1" color="success" checked shape="pill" />
+            <CSwitch class="mx-1" color="warning" checked shape="pill" />
+            <CSwitch class="mx-1" color="info" checked shape="pill" />
+            <CSwitch class="mx-1" color="danger" checked shape="pill" />
+            <CSwitch class="mx-1" color="light" checked shape="pill" />
+            <CSwitch class="mx-1" color="dark" checked shape="pill" />
+            <CSwitch class="mx-1" color="primary" shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -311,15 +301,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline />
-            <CSwitch class="mx-1" variant="secondary" checked outline />
-            <CSwitch class="mx-1" variant="success" checked outline />
-            <CSwitch class="mx-1" variant="warning" checked outline />
-            <CSwitch class="mx-1" variant="info" checked outline />
-            <CSwitch class="mx-1" variant="danger" checked outline />
-            <CSwitch class="mx-1" variant="light" checked outline />
-            <CSwitch class="mx-1" variant="dark" checked outline />
-            <CSwitch class="mx-1" variant="primary" outline disabled />
+            <CSwitch class="mx-1" color="primary" checked outline />
+            <CSwitch class="mx-1" color="secondary" checked outline />
+            <CSwitch class="mx-1" color="success" checked outline />
+            <CSwitch class="mx-1" color="warning" checked outline />
+            <CSwitch class="mx-1" color="info" checked outline />
+            <CSwitch class="mx-1" color="danger" checked outline />
+            <CSwitch class="mx-1" color="light" checked outline />
+            <CSwitch class="mx-1" color="dark" checked outline />
+            <CSwitch class="mx-1" color="primary" outline disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -329,15 +319,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="success" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="warning" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="info" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="danger" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="light" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="dark" checked outline shape="pill" />
-            <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled />
+            <CSwitch class="mx-1" color="primary" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="secondary" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="success" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="warning" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="info" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="danger" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="light" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="dark" checked outline shape="pill" />
+            <CSwitch class="mx-1" color="primary" outline shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -347,15 +337,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline="alt" />
-            <CSwitch class="mx-1" variant="secondary" checked outline="alt" />
-            <CSwitch class="mx-1" variant="success" checked outline="alt" />
-            <CSwitch class="mx-1" variant="warning" checked outline="alt" />
-            <CSwitch class="mx-1" variant="info" checked outline="alt" />
-            <CSwitch class="mx-1" variant="danger" checked outline="alt" />
-            <CSwitch class="mx-1" variant="light" checked outline="alt" />
-            <CSwitch class="mx-1" variant="dark" checked outline="alt" />
-            <CSwitch class="mx-1" variant="primary" outline="alt" disabled />
+            <CSwitch class="mx-1" color="primary" checked outline="alt" />
+            <CSwitch class="mx-1" color="secondary" checked outline="alt" />
+            <CSwitch class="mx-1" color="success" checked outline="alt" />
+            <CSwitch class="mx-1" color="warning" checked outline="alt" />
+            <CSwitch class="mx-1" color="info" checked outline="alt" />
+            <CSwitch class="mx-1" color="danger" checked outline="alt" />
+            <CSwitch class="mx-1" color="light" checked outline="alt" />
+            <CSwitch class="mx-1" color="dark" checked outline="alt" />
+            <CSwitch class="mx-1" color="primary" outline="alt" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -365,15 +355,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" />
-            <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled />
+            <CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" />
+            <CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled />
           </CCardBody>
         </CCard>
       </CCol>
@@ -384,15 +374,15 @@
             Switch <small><code>label</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked v-bind="labelIcon"/>
-            <CSwitch class="mx-1" variant="secondary" checked v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked v-bind="labelIcon"/>
+            <CSwitch class="mx-1" color="secondary" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>shape
       </CCol>
@@ -402,15 +392,15 @@
             Switch <small><code>label  shape="pill"</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="secondary" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" shape="pill" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -420,15 +410,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="secondary" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked outline v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" outline disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked outline v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" outline disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -438,15 +428,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="secondary" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked outline shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" outline shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked outline shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" outline shape="pill" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -456,15 +446,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="secondary" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked outline="alt" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" outline="alt" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="secondary" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked outline="alt" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" outline="alt" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -474,15 +464,15 @@
             Switch <small><code>label outline</code></small>
           </CCardHeader>
           <CCardBody>
-            <CSwitch class="mx-1" variant="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
-            <CSwitch class="mx-1" variant="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
-            <CSwitch class="mx-1" variant="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" checked outline="alt" shape="pill" v-bind="labelTxt" />
+            <CSwitch class="mx-1" color="secondary" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="success" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="warning" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="info" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="danger" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="light" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="dark" checked outline="alt" shape="pill" v-bind="labelIcon" />
+            <CSwitch class="mx-1" color="primary" outline="alt" shape="pill" disabled v-bind="labelIcon" />
           </CCardBody>
         </CCard>
       </CCol>
@@ -505,7 +495,7 @@
                 <td>
                   <CSwitch
                     :shape="item.example.shape"
-                    :variant="item.example.variant"
+                    :color="item.example.color"
                     :size="item.example.size"
                     :checked="item.example.checked"
                   />
@@ -529,7 +519,7 @@ export default {
   name: 'Switches',
   data () {
     return {
-      variants: [
+      colors: [
         'primary','secondary','warning','success','info','danger','light','dark'
       ],
       fields: [
@@ -540,22 +530,22 @@ export default {
       items: [
         {
           size: 'Large', 
-          example: { shape: '3d', variant: 'primary', size: 'lg', checked: true }, 
+          example: { shape: '3d', color: 'primary', size: 'lg', checked: true }, 
           size_prop: 'Add following prop <code>size="lg"</code>'
         },
         {
           size: 'Normal', 
-          example: { shape: '3d', variant: 'primary', size: '', checked: true }, 
+          example: { shape: '3d', color: 'primary', size: '', checked: true }, 
           size_prop: '-'
         },
         {
           size: 'Small', 
-          example: {shape: '3d', variant: 'primary', size: 'sm', checked: true}, 
+          example: {shape: '3d', color: 'primary', size: 'sm', checked: true}, 
           size_prop: 'Add following prop <code>size="sm"</code>'
         }
       ],
-      checker: 'yes',
-      radio: 'primary',
+      checker: true,
+      radio: 'warning',
       labelIcon: {
         labelOn: '\u2713',
         labelOff: '\u2715'
diff --git a/src/views/base/Table.vue b/src/views/base/Table.vue
index 6122aedb..0e9ddc2e 100644
--- a/src/views/base/Table.vue
+++ b/src/views/base/Table.vue
@@ -14,7 +14,7 @@
     >
       <template #status="{item}">
         <td>
-          <CBadge :variant="getBadge(item.status)">{{item.status}}</CBadge>
+          <CBadge :color="getBadge(item.status)">{{item.status}}</CBadge>
         </td>
       </template>
     </CTable>
diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue
index dc06b96f..3d344d01 100644
--- a/src/views/base/Tooltips.vue
+++ b/src/views/base/Tooltips.vue
@@ -21,7 +21,7 @@
           <CCol col="4">
             <div class="text-center my-3">
               <CButton 
-                variant="secondary"
+                color="secondary"
                 v-c-tooltip.hover.click="'I am a tooltip!'"
               >
                 Hover Me
@@ -32,7 +32,7 @@
             <div class="text-center my-3">
               <CButton 
                 v-c-tooltip="{content: 'I start open!', active:true }"
-                variant="secondary"
+                color="secondary"
               >
                 Hover me
               </CButton>
@@ -41,7 +41,7 @@
           <CCol col="4">
             <div class="text-center my-3">
               <CButton
-                variant="secondary"
+                color="secondary"
                 v-c-tooltip.click="
                   'I am showing on click and hiding on click outside tooltip!'
                 "
@@ -69,7 +69,7 @@
               :key="placement"
             >
               <CButton
-                variant="primary"
+                color="primary"
                 v-c-tooltip.hover="{
                   content: `Placement ${placement}`,
                   placement
diff --git a/src/views/buttons/BrandButtons.vue b/src/views/buttons/BrandButtons.vue
index 2fd6d9f1..0939b6ac 100644
--- a/src/views/buttons/BrandButtons.vue
+++ b/src/views/buttons/BrandButtons.vue
@@ -29,7 +29,7 @@
                 :name="brandName"
                 size="sm"
                 :key="key"
-                :variant="brandName"
+                :color="brandName"
               >
                 <CIcon :name="brandName"/>
                 <span>{{brandName}}</span>
@@ -42,7 +42,7 @@
               <CButton
                 :name="brandName"
                 :key="key"
-                :variant="brandName"
+                :color="brandName"
               >
                 <CIcon :name="brandName"/>
                 <span>{{brandName}}</span>
@@ -56,7 +56,7 @@
                 :name="brandName"
                 size="lg"
                 :key="key"
-                :variant="brandName"
+                :color="brandName"
               >
                 <CIcon :name="brandName"/>
                 <span>{{brandName}}</span>
@@ -82,7 +82,7 @@
                 :name="brandName"
                 size="sm"
                 :key="key"
-                :variant="brandName"
+                :color="brandName"
               >
                 <CIcon :name="brandName"/>
               </CButton>
@@ -94,7 +94,7 @@
               <CButton
                 :name="brandName"
                 :key="key"
-                :variant="brandName"
+                :color="brandName"
               >
                 <CIcon :name="brandName"/>
               </CButton>
@@ -107,7 +107,7 @@
                 :name="brandName"
                 size="lg"
                 :key="key"
-                :variant="brandName"
+                :color="brandName"
               >
                 <CIcon :name="brandName"/>
               </CButton>
@@ -135,7 +135,7 @@
                 :name="brandName"
                 size="sm"
                 :key="key"
-                :variant="brandName"
+                :color="brandName"
               >
                 <span>{{brandName}}</span>
               </CButton>
@@ -147,7 +147,7 @@
               <CButton
                 :name="brandName"
                 :key="key"
-                :variant="brandName"
+                :color="brandName"
               >
                 <span>{{brandName}}</span>
               </CButton>
@@ -160,7 +160,7 @@
                 :name="brandName"
                 size="lg"
                 :key="key"
-                :variant="brandName"
+                :color="brandName"
               >
                 <span>{{brandName}}</span>
               </CButton>
@@ -175,9 +175,9 @@
 <script>
 export default {
   name: 'BrandButtons',
-  usage: '<CButton variant="facebook"><span>Facebook</span></CButton>',
-  iconsOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
-  textOnlyUsage: '<CButton variant="facebook"><CIcon name="facebook"/></CButton>',
+  usage: '<CButton color="facebook"><span>Facebook</span></CButton>',
+  iconsOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
+  textOnlyUsage: '<CButton color="facebook"><CIcon name="facebook"/></CButton>',
   brands: [
     'facebook',
     'twitter',
diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue
index 6ad60852..5f6f138d 100644
--- a/src/views/buttons/ButtonGroups.vue
+++ b/src/views/buttons/ButtonGroups.vue
@@ -19,20 +19,20 @@
         <CCardBody>
           <div>
             <CButtonGroup>
-              <CButton variant="secondary">One</CButton>
-              <CButton variant="secondary">Two</CButton>
-              <CButton variant="secondary">Three</CButton>
-              <CButton variant="secondary">Four</CButton>
-              <CButton variant="secondary" class="d-sm-down-none">Five</CButton>
+              <CButton color="secondary">One</CButton>
+              <CButton color="secondary">Two</CButton>
+              <CButton color="secondary">Three</CButton>
+              <CButton color="secondary">Four</CButton>
+              <CButton color="secondary" class="d-sm-down-none">Five</CButton>
             </CButtonGroup>
             <br><br>
             <CButtonGroup>
-              <CButton class="d-sm-down-none" variant="success">Success</CButton>
-              <CButton variant="info">Info</CButton>
-              <CButton variant="warning">Warn</CButton>
-              <CButton class="d-sm-down-none" variant="primary">Primary</CButton>
-              <CButton variant="danger">Danger</CButton>
-              <CButton variant="link">Link</CButton>
+              <CButton class="d-sm-down-none" color="success">Success</CButton>
+              <CButton color="info">Info</CButton>
+              <CButton color="warning">Warn</CButton>
+              <CButton class="d-sm-down-none" color="primary">Primary</CButton>
+              <CButton color="danger">Danger</CButton>
+              <CButton color="link">Link</CButton>
             </CButtonGroup>
           </div>
         </CCardBody>
@@ -47,21 +47,21 @@
         <CCardBody>
           <div>
             <CButtonGroup>
-              <CButton variant="secondary">Left</CButton>
-              <CButton variant="secondary">Middle</CButton>
-              <CButton variant="secondary">Right</CButton>
+              <CButton color="secondary">Left</CButton>
+              <CButton color="secondary">Middle</CButton>
+              <CButton color="secondary">Right</CButton>
             </CButtonGroup>
             <br><br>
             <CButtonGroup size="sm">
-              <CButton variant="secondary">Left</CButton>
-              <CButton variant="secondary">Middle</CButton>
-              <CButton variant="secondary">Right</CButton>
+              <CButton color="secondary">Left</CButton>
+              <CButton color="secondary">Middle</CButton>
+              <CButton color="secondary">Right</CButton>
             </CButtonGroup>
             <br><br>
             <CButtonGroup size="lg">
-              <CButton variant="secondary">Left</CButton>
-              <CButton variant="secondary">Middle</CButton>
-              <CButton variant="secondary">Right</CButton>
+              <CButton color="secondary">Left</CButton>
+              <CButton color="secondary">Middle</CButton>
+              <CButton color="secondary">Right</CButton>
             </CButtonGroup>
           </div>
         </CCardBody>
@@ -75,16 +75,16 @@
         <CCardBody>
           <div>
             <CButtonGroup>
-              <CButton variant="secondary" class="d-sm-down-none">Button 1</CButton>
-              <CButton variant="secondary" class="d-sm-down-none">Button 2</CButton>
-              <CDropdown right text="Menu" variant="success">
+              <CButton color="secondary" class="d-sm-down-none">Button 1</CButton>
+              <CButton color="secondary" class="d-sm-down-none">Button 2</CButton>
+              <CDropdown right text="Menu" color="success">
                 <CDropdownItem>Item 1</CDropdownItem>
                 <CDropdownItem>Item 2</CDropdownItem>
                 <CDropdownDivider></CDropdownDivider>
                 <CDropdownItem>Item 3</CDropdownItem>
               </CDropdown>
-              <CButton variant="secondary" class="d-sm-down-none">Button 3</CButton>
-              <CDropdown right split text="Split Menu" variant="info">
+              <CButton color="secondary" class="d-sm-down-none">Button 3</CButton>
+              <CDropdown right split text="Split Menu" color="info">
                 <CDropdownItem>Item 1</CDropdownItem>
                 <CDropdownItem>Item 2</CDropdownItem>
                 <CDropdownDivider></CDropdownDivider>
@@ -104,9 +104,9 @@
         <CCardBody>
           <div>
             <CButtonGroup vertical>
-              <CButton variant="secondary">Top</CButton>
-              <CButton variant="secondary">Middle</CButton>
-              <CButton variant="secondary">Bottom</CButton>
+              <CButton color="secondary">Top</CButton>
+              <CButton color="secondary">Middle</CButton>
+              <CButton color="secondary">Bottom</CButton>
             </CButtonGroup>
           </div>
         </CCardBody>
@@ -127,17 +127,17 @@
         <CCardBody>
           <CButtonToolbar aria-label="Toolbar with button groups" >
             <CButtonGroup class="mx-1">
-              <CButton variant="secondary" class="d-sm-down-none">&laquo;</CButton>
-              <CButton variant="secondary">&lsaquo;</CButton>
+              <CButton color="secondary" class="d-sm-down-none">&laquo;</CButton>
+              <CButton color="secondary">&lsaquo;</CButton>
             </CButtonGroup>
             <CButtonGroup class="mx-1">
-              <CButton variant="secondary" class="d-sm-down-none">Edit</CButton>
-              <CButton variant="secondary">Undo</CButton>
-              <CButton variant="secondary">Redo</CButton>
+              <CButton color="secondary" class="d-sm-down-none">Edit</CButton>
+              <CButton color="secondary">Undo</CButton>
+              <CButton color="secondary">Redo</CButton>
             </CButtonGroup>
             <CButtonGroup class="mx-1">
-              <CButton variant="secondary">&rsaquo;</CButton>
-              <CButton variant="secondary" class="d-sm-down-none">&raquo;</CButton>
+              <CButton color="secondary">&rsaquo;</CButton>
+              <CButton color="secondary" class="d-sm-down-none">&raquo;</CButton>
             </CButtonGroup>
           </CButtonToolbar>
           <hr class="d-sm-down-none"/>
@@ -146,8 +146,8 @@
             class="d-sm-down-none"
           >
             <CButtonGroup size="sm" class="mx-1">
-              <CButton variant="secondary">New</CButton>
-              <CButton variant="secondary">Edit</CButton>
+              <CButton color="secondary">New</CButton>
+              <CButton color="secondary">Edit</CButton>
             </CButtonGroup>
             <CFormInput
               class="mb-0 w-25 mx-1"
@@ -165,19 +165,19 @@
               custom
             />
             <CButtonGroup size="sm" class="mx-1">
-              <CButton variant="secondary">Save</CButton>
-              <CButton variant="secondary">Cancel</CButton>
+              <CButton color="secondary">Save</CButton>
+              <CButton color="secondary">Cancel</CButton>
             </CButtonGroup>
           </CButtonToolbar>
           <hr/>
           <CButtonToolbar aria-label="Toolbar with button groups and dropdown menu">
             <CButtonGroup class="mx-1 d-sm-down-none">
-              <CButton variant="secondary">New</CButton>
-              <CButton variant="secondary">Edit</CButton>
-              <CButton variant="secondary">Undo</CButton>
+              <CButton color="secondary">New</CButton>
+              <CButton color="secondary">Edit</CButton>
+              <CButton color="secondary">Undo</CButton>
             </CButtonGroup>
             <CDropdown
-              variant="secondary"
+              color="secondary"
               class="mx-1"
               placement="bottom-end"
               button-content="Menu"
@@ -187,8 +187,8 @@
               <CDropdownItem>Item 3</CDropdownItem>
             </CDropdown>
             <CButtonGroup class="mx-1">
-              <CButton variant="secondary">Save</CButton>
-              <CButton variant="secondary">Cancel</CButton>
+              <CButton color="secondary">Save</CButton>
+              <CButton color="secondary">Cancel</CButton>
             </CButtonGroup>
           </CButtonToolbar>
         </CCardBody>
diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue
index 3c97073d..5c637e5b 100644
--- a/src/views/buttons/Dropdowns.vue
+++ b/src/views/buttons/Dropdowns.vue
@@ -22,7 +22,7 @@
               <CDropdown 
                 toggler-text="Dropdown Button" 
                 class="m-2"
-                variant="secondary"
+                color="secondary"
               >
                 <CDropdownItem>First Action</CDropdownItem>
                 <CDropdownItem>Second Action</CDropdownItem>
@@ -44,7 +44,7 @@
               <CDropdown 
                 toggler-text="Dropdown with divider" 
                 class="m-2"
-                variant="secondary"
+                color="secondary"
               >
                 <CDropdownItem>First item</CDropdownItem>
                 <CDropdownItem>Second item</CDropdownItem>
@@ -56,7 +56,7 @@
               <CDropdown 
                 toggler-text="Dropdown with header" 
                 class="m-2"
-                variant="secondary"
+                color="secondary"
               >
                 <CDropdownHeader>Dropdown header</CDropdownHeader>
                 <CDropdownItem>First item</CDropdownItem>
@@ -77,7 +77,7 @@
             <div>
               <CDropdown
                 toggler-text="Left align"
-                variant="primary"
+                color="primary"
                 class="m-2 d-inline-block"
               >
                 <CDropdownItem>Action</CDropdownItem>
@@ -87,7 +87,7 @@
               <CDropdown
                 placement="bottom-end"
                 toggler-text="Right align"
-                variant="primary"
+                color="primary"
                 class="m-2 d-inline-block"
               >
                 <CDropdownItem>Action</CDropdownItem>
@@ -98,7 +98,7 @@
             <div>
               <CDropdown
                 toggler-text="Drop-Up"
-                variant="info"
+                color="info"
                 class="m-2"
                 placement="top-start"
 
@@ -110,7 +110,7 @@
             </div>
             <div>
               <CDropdown
-                variant="secondary"
+                color="secondary"
                 :offset="25"
                 toggler-text="Offset Dropdown"
                 class="m-2"
@@ -122,7 +122,7 @@
             </div>
             <div>
               <CDropdown
-                variant="secondary"
+                color="secondary"
                 split
                 toggler-text="Split Dropdown"
                 class="m-2"
@@ -147,7 +147,7 @@
           <CCardBody>
             <div>
               <CDropdown
-                variant="link"
+                color="link"
                 size="lg"
                 no-caret
               >
@@ -172,7 +172,7 @@
           <CCardBody>
             <div>
               <CDropdown
-                variant="secondary"
+                color="secondary"
                 size="lg"
                 toggler-text="Large"
                 class="m-2 d-inline-block"
@@ -182,7 +182,7 @@
                 <CDropdownItem>Something else here</CDropdownItem>
               </CDropdown>
               <CDropdown
-                variant="secondary"
+                color="secondary"
                 size="lg"
                 split
                 toggler-text="Large Split"
@@ -194,7 +194,7 @@
               </CDropdown>
               <br>
               <CDropdown
-                variant="secondary"
+                color="secondary"
                 size="sm"
                 toggler-text="Small"
                 class="m-2 d-inline-block"
@@ -204,7 +204,7 @@
                 <CDropdownItem>Something else here...</CDropdownItem>
               </CDropdown>
               <CDropdown
-                variant="secondary"
+                color="secondary"
                 size="sm"
                 split toggler-text="Small Split"
                 class="m-2"
@@ -229,7 +229,7 @@
           <CCardBody>
             <div>
               <CDropdown
-                toggler-text="Dropdown ARIA" variant="primary"
+                toggler-text="Dropdown ARIA" color="primary"
                 class="m-2"
               >
                 <div role="group">
@@ -256,13 +256,13 @@
           <CCardHeader>
             <i class="fa fa-align-justify"></i>
             <strong> Dropdown </strong>
-            <small><code>variant</code></small>
+            <small><code>color</code></small>
           </CCardHeader>
           <CCardBody>
             <CDropdown
               size="sm"
               toggler-text="Primary"
-              variant="primary"
+              color="primary"
               class="m-0 d-inline-block"
             >
               <CDropdownItem>First Action</CDropdownItem>
@@ -272,7 +272,7 @@
             <CDropdown
               size="sm"
               toggler-text="Secondary"
-              variant="secondary"
+              color="secondary"
               class="m-0 d-inline-block"
             >
               <CDropdownItem>First Action</CDropdownItem>
@@ -282,7 +282,7 @@
             <CDropdown
               size="sm"
               toggler-text="Success"
-              variant="success"
+              color="success"
               class="m-0 d-inline-block"
             >
               <CDropdownItem>First Action</CDropdownItem>
@@ -292,7 +292,7 @@
             <CDropdown
               size="sm"
               toggler-text="Warning"
-              variant="warning"
+              color="warning"
               class="m-0 d-inline-block"
             >
               <CDropdownItem>First Action</CDropdownItem>
@@ -302,7 +302,7 @@
             <CDropdown
               size="sm"
               toggler-text="Danger"
-              variant="danger"
+              color="danger"
               class="m-0 d-inline-block"
             >
               <CDropdownItem>First Action</CDropdownItem>
@@ -312,7 +312,7 @@
             <CDropdown
               size="sm"
               toggler-text="Info"
-              variant="info"
+              color="info"
               class="m-0 d-inline-block"
             >
               <CDropdownItem>First Action</CDropdownItem>
@@ -322,7 +322,7 @@
             <CDropdown
               size="sm"
               toggler-text="Light"
-              variant="light"
+              color="light"
               class="m-0 d-inline-block"
             >
               <CDropdownItem>First Action</CDropdownItem>
@@ -332,7 +332,7 @@
             <CDropdown
               size="sm"
               toggler-text="Dark"
-              variant="dark"
+              color="dark"
               class="m-0 d-inline-block"
             >
               <CDropdownItem>First Action</CDropdownItem>
@@ -342,7 +342,7 @@
             <CDropdown
               size="sm"
               toggler-text="Link"
-              variant="link"
+              color="link"
               class="m-0 d-inline-block"
             >
               <CDropdownItem>First Action</CDropdownItem>
diff --git a/src/views/buttons/StandardButtons.vue b/src/views/buttons/StandardButtons.vue
index aee5ff40..d7afdaf8 100644
--- a/src/views/buttons/StandardButtons.vue
+++ b/src/views/buttons/StandardButtons.vue
@@ -20,31 +20,31 @@
             Normal
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="primary">Primary</CButton>
+            <CButton block color="primary">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="secondary">Secondary</CButton>
+            <CButton block color="secondary">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="success">Success</CButton>
+            <CButton block color="success">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="warning">Warning</CButton>
+            <CButton block color="warning">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="danger">Danger</CButton>
+            <CButton block color="danger">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="info">Info</CButton>
+            <CButton block color="info">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="light">Light</CButton>
+            <CButton block color="light">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="dark">Dark</CButton>
+            <CButton block color="dark">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="link">Link</CButton>
+            <CButton block color="link">Link</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -52,31 +52,31 @@
             Active State
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="primary" aria-pressed="true">Primary</CButton>
+            <CButton pressed block color="primary" aria-pressed="true">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="secondary" aria-pressed="true">Secondary</CButton>
+            <CButton pressed block color="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="success" aria-pressed="true">Success</CButton>
+            <CButton pressed block color="success" aria-pressed="true">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="warning" aria-pressed="true">Warning</CButton>
+            <CButton pressed block color="warning" aria-pressed="true">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="danger" aria-pressed="true">Danger</CButton>
+            <CButton pressed block color="danger" aria-pressed="true">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="info" aria-pressed="true">Info</CButton>
+            <CButton pressed block color="info" aria-pressed="true">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="light" aria-pressed="true">Light</CButton>
+            <CButton pressed block color="light" aria-pressed="true">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="dark" aria-pressed="true">Dark</CButton>
+            <CButton pressed block color="dark" aria-pressed="true">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="link" aria-pressed="true">Link</CButton>
+            <CButton pressed block color="link" aria-pressed="true">Link</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -84,31 +84,31 @@
             Disabled
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="primary" disabled>Primary</CButton>
+            <CButton block color="primary" disabled>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="secondary" disabled>Secondary</CButton>
+            <CButton block color="secondary" disabled>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="success" disabled>Success</CButton>
+            <CButton block color="success" disabled>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="warning" disabled>Warning</CButton>
+            <CButton block color="warning" disabled>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="danger" disabled>Danger</CButton>
+            <CButton block color="danger" disabled>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="info" disabled>Info</CButton>
+            <CButton block color="info" disabled>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="light" disabled>Light</CButton>
+            <CButton block color="light" disabled>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="dark" disabled>Dark</CButton>
+            <CButton block color="dark" disabled>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="link" disabled>Link</CButton>
+            <CButton block color="link" disabled>Link</CButton>
           </CCol>
         </CRow>
       </CCardBody>
@@ -126,28 +126,28 @@
             Normal
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="primary">Primary</CButton>
+            <CButton block outline color="primary">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="secondary">Secondary</CButton>
+            <CButton block outline color="secondary">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="success">Success</CButton>
+            <CButton block outline color="success">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="warning">Warning</CButton>
+            <CButton block outline color="warning">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="danger">Danger</CButton>
+            <CButton block outline color="danger">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="info">Info</CButton>
+            <CButton block outline color="info">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="light">Light</CButton>
+            <CButton block outline color="light">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="dark">Dark</CButton>
+            <CButton block outline color="dark">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -156,28 +156,28 @@
             Active State
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline variant="primary" aria-pressed="true">Primary</CButton>
+            <CButton block pressed outline color="primary" aria-pressed="true">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline variant="secondary" aria-pressed="true">Secondary</CButton>
+            <CButton block pressed outline color="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline variant="success" aria-pressed="true">Success</CButton>
+            <CButton block pressed outline color="success" aria-pressed="true">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline variant="warning" aria-pressed="true">Warning</CButton>
+            <CButton block pressed outline color="warning" aria-pressed="true">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline variant="danger" aria-pressed="true">Danger</CButton>
+            <CButton block pressed outline color="danger" aria-pressed="true">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline variant="info" aria-pressed="true">Info</CButton>
+            <CButton block pressed outline color="info" aria-pressed="true">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline variant="light" aria-pressed="true">Light</CButton>
+            <CButton block pressed outline color="light" aria-pressed="true">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed outline variant="dark" aria-pressed="true">Dark</CButton>
+            <CButton block pressed outline color="dark" aria-pressed="true">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -186,28 +186,28 @@
             Disabled
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="primary" disabled>Primary</CButton>
+            <CButton block outline color="primary" disabled>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="secondary" disabled>Secondary</CButton>
+            <CButton block outline color="secondary" disabled>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="success" disabled>Success</CButton>
+            <CButton block outline color="success" disabled>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="warning" disabled>Warning</CButton>
+            <CButton block outline color="warning" disabled>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="danger" disabled>Danger</CButton>
+            <CButton block outline color="danger" disabled>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="info" disabled>Info</CButton>
+            <CButton block outline color="info" disabled>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="light" disabled>Light</CButton>
+            <CButton block outline color="light" disabled>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block outline variant="dark" disabled>Dark</CButton>
+            <CButton block outline color="dark" disabled>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -227,28 +227,28 @@
             Normal
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="primary">Primary</CButton>
+            <CButton block ghost color="primary">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="secondary">Secondary</CButton>
+            <CButton block ghost color="secondary">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="success">Success</CButton>
+            <CButton block ghost color="success">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="warning">Warning</CButton>
+            <CButton block ghost color="warning">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="danger">Danger</CButton>
+            <CButton block ghost color="danger">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="info">Info</CButton>
+            <CButton block ghost color="info">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="light">Light</CButton>
+            <CButton block ghost color="light">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="dark">Dark</CButton>
+            <CButton block ghost color="dark">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -257,28 +257,28 @@
             Active State
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost variant="primary" aria-pressed="true">Primary</CButton>
+            <CButton block pressed ghost color="primary" aria-pressed="true">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost variant="secondary" aria-pressed="true">Secondary</CButton>
+            <CButton block pressed ghost color="secondary" aria-pressed="true">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost variant="success" aria-pressed="true">Success</CButton>
+            <CButton block pressed ghost color="success" aria-pressed="true">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost variant="warning" aria-pressed="true">Warning</CButton>
+            <CButton block pressed ghost color="warning" aria-pressed="true">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost variant="danger" aria-pressed="true">Danger</CButton>
+            <CButton block pressed ghost color="danger" aria-pressed="true">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost variant="info" aria-pressed="true">Info</CButton>
+            <CButton block pressed ghost color="info" aria-pressed="true">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost variant="light" aria-pressed="true">Light</CButton>
+            <CButton block pressed ghost color="light" aria-pressed="true">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block pressed ghost variant="dark" aria-pressed="true">Dark</CButton>
+            <CButton block pressed ghost color="dark" aria-pressed="true">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -287,28 +287,28 @@
             Disabled
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="primary" disabled>Primary</CButton>
+            <CButton block ghost color="primary" disabled>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="secondary" disabled>Secondary</CButton>
+            <CButton block ghost color="secondary" disabled>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="success" disabled>Success</CButton>
+            <CButton block ghost color="success" disabled>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="warning" disabled>Warning</CButton>
+            <CButton block ghost color="warning" disabled>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="danger" disabled>Danger</CButton>
+            <CButton block ghost color="danger" disabled>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="info" disabled>Info</CButton>
+            <CButton block ghost color="info" disabled>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="light" disabled>Light</CButton>
+            <CButton block ghost color="light" disabled>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block ghost variant="dark" disabled>Dark</CButton>
+            <CButton block ghost color="dark" disabled>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0"></CCol>
         </CRow>
@@ -328,31 +328,31 @@
             Normal
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="primary" square>Primary</CButton>
+            <CButton block color="primary" square>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="secondary" square>Secondary</CButton>
+            <CButton block color="secondary" square>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="success" square>Success</CButton>
+            <CButton block color="success" square>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="warning" square>Warning</CButton>
+            <CButton block color="warning" square>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="danger" square>Danger</CButton>
+            <CButton block color="danger" square>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="info" square>Info</CButton>
+            <CButton block color="info" square>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="light" square>Light</CButton>
+            <CButton block color="light" square>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="dark" square>Dark</CButton>
+            <CButton block color="dark" square>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="link" square>Link</CButton>
+            <CButton block color="link" square>Link</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -360,31 +360,31 @@
             Active State
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="primary" square aria-pressed="true">Primary</CButton>
+            <CButton pressed block color="primary" square aria-pressed="true">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="secondary" square aria-pressed="true">Secondary</CButton>
+            <CButton pressed block color="secondary" square aria-pressed="true">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="success" square aria-pressed="true">Success</CButton>
+            <CButton pressed block color="success" square aria-pressed="true">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="warning" square aria-pressed="true">Warning</CButton>
+            <CButton pressed block color="warning" square aria-pressed="true">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="danger" square aria-pressed="true">Danger</CButton>
+            <CButton pressed block color="danger" square aria-pressed="true">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="info" square aria-pressed="true">Info</CButton>
+            <CButton pressed block color="info" square aria-pressed="true">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="light" square aria-pressed="true">Light</CButton>
+            <CButton pressed block color="light" square aria-pressed="true">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="dark" square aria-pressed="true">Dark</CButton>
+            <CButton pressed block color="dark" square aria-pressed="true">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="link" square aria-pressed="true">Link</CButton>
+            <CButton pressed block color="link" square aria-pressed="true">Link</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -392,31 +392,31 @@
             Disabled
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="primary" square disabled>Primary</CButton>
+            <CButton block color="primary" square disabled>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="secondary" square disabled>Secondary</CButton>
+            <CButton block color="secondary" square disabled>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="success" square disabled>Success</CButton>
+            <CButton block color="success" square disabled>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="warning" square disabled>Warning</CButton>
+            <CButton block color="warning" square disabled>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="danger" square disabled>Danger</CButton>
+            <CButton block color="danger" square disabled>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="info" square disabled>Info</CButton>
+            <CButton block color="info" square disabled>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="light" square disabled>Light</CButton>
+            <CButton block color="light" square disabled>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="dark" square disabled>Dark</CButton>
+            <CButton block color="dark" square disabled>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="link" square disabled>Link</CButton>
+            <CButton block color="link" square disabled>Link</CButton>
           </CCol>
         </CRow>
       </CCardBody>
@@ -435,31 +435,31 @@
             Normal
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="primary" pill>Primary</CButton>
+            <CButton block color="primary" pill>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="secondary" pill>Secondary</CButton>
+            <CButton block color="secondary" pill>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="success" pill>Success</CButton>
+            <CButton block color="success" pill>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="warning" pill>Warning</CButton>
+            <CButton block color="warning" pill>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="danger" pill>Danger</CButton>
+            <CButton block color="danger" pill>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="info" pill>Info</CButton>
+            <CButton block color="info" pill>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="light" pill>Light</CButton>
+            <CButton block color="light" pill>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="dark" pill>Dark</CButton>
+            <CButton block color="dark" pill>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="link" pill>Link</CButton>
+            <CButton block color="link" pill>Link</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -467,31 +467,31 @@
             Active State
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="primary" pill aria-pressed="true">Primary</CButton>
+            <CButton pressed block color="primary" pill aria-pressed="true">Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="secondary" pill aria-pressed="true">Secondary</CButton>
+            <CButton pressed block color="secondary" pill aria-pressed="true">Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="success" pill aria-pressed="true">Success</CButton>
+            <CButton pressed block color="success" pill aria-pressed="true">Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="warning" pill aria-pressed="true">Warning</CButton>
+            <CButton pressed block color="warning" pill aria-pressed="true">Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="danger" pill aria-pressed="true">Danger</CButton>
+            <CButton pressed block color="danger" pill aria-pressed="true">Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="info" pill aria-pressed="true">Info</CButton>
+            <CButton pressed block color="info" pill aria-pressed="true">Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="light" pill aria-pressed="true">Light</CButton>
+            <CButton pressed block color="light" pill aria-pressed="true">Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="dark" pill aria-pressed="true">Dark</CButton>
+            <CButton pressed block color="dark" pill aria-pressed="true">Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton pressed block variant="link" pill aria-pressed="true">Link</CButton>
+            <CButton pressed block color="link" pill aria-pressed="true">Link</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -499,31 +499,31 @@
             Disabled
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="primary" pill disabled>Primary</CButton>
+            <CButton block color="primary" pill disabled>Primary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="secondary" pill disabled>Secondary</CButton>
+            <CButton block color="secondary" pill disabled>Secondary</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="success" pill disabled>Success</CButton>
+            <CButton block color="success" pill disabled>Success</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="warning" pill disabled>Warning</CButton>
+            <CButton block color="warning" pill disabled>Warning</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="danger" pill disabled>Danger</CButton>
+            <CButton block color="danger" pill disabled>Danger</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="info" pill disabled>Info</CButton>
+            <CButton block color="info" pill disabled>Info</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="light" pill disabled>Light</CButton>
+            <CButton block color="light" pill disabled>Light</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="dark" pill disabled>Dark</CButton>
+            <CButton block color="dark" pill disabled>Dark</CButton>
           </CCol>
           <CCol col="6" sm="4" md="2" xl class="mb-3 mb-xl-0">
-            <CButton block variant="link" pill disabled>Link</CButton>
+            <CButton block color="link" pill disabled>Link</CButton>
           </CCol>
         </CRow>
       </CCardBody>
@@ -539,19 +539,19 @@
             Small
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton variant="primary" size="sm">Standard Button</CButton>
+            <CButton color="primary" size="sm">Standard Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline variant="secondary" size="sm">Outline Button</CButton>
+            <CButton outline color="secondary" size="sm">Outline Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton size="sm" ghost variant="success">Ghost Button</CButton>
+            <CButton size="sm" ghost color="success">Ghost Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton variant="warning" size="sm" square>Square Button</CButton>
+            <CButton color="warning" size="sm" square>Square Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton variant="danger" size="sm" pill>Pill Button</CButton>
+            <CButton color="danger" size="sm" pill>Pill Button</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -559,19 +559,19 @@
             Normal
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton variant="primary">Standard Button</CButton>
+            <CButton color="primary">Standard Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline variant="secondary">Outline Button</CButton>
+            <CButton outline color="secondary">Outline Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton ghost variant="success">Ghost Button</CButton>
+            <CButton ghost color="success">Ghost Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton variant="warning" square>Square Button</CButton>
+            <CButton color="warning" square>Square Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton variant="danger" pill>Pill Button</CButton>
+            <CButton color="danger" pill>Pill Button</CButton>
           </CCol>
         </CRow>
         <CRow class="align-items-center mt-3">
@@ -579,19 +579,19 @@
             Large
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton variant="primary" size="lg">Standard Button</CButton>
+            <CButton color="primary" size="lg">Standard Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton outline variant="secondary" size="lg">Outline Button</CButton>
+            <CButton outline color="secondary" size="lg">Outline Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton ghost variant="success" size="lg">Ghost Button</CButton>
+            <CButton ghost color="success" size="lg">Ghost Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton variant="warning" size="lg" square>Square Button</CButton>
+            <CButton color="warning" size="lg" square>Square Button</CButton>
           </CCol>
           <CCol col="2" class="mb-3 mb-xl-0 text-center">
-            <CButton variant="danger" size="lg" pill>Pill Button</CButton>
+            <CButton color="danger" size="lg" pill>Pill Button</CButton>
           </CCol>
         </CRow>
       </CCardBody>
@@ -603,27 +603,27 @@
       <CCardBody>
         <CRow class="align-items-center">
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton variant="primary">
+            <CButton color="primary">
               <i class="cui-lightbulb"></i>&nbsp;Standard Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton variant="secondary" outline>
+            <CButton color="secondary" outline>
               <i class="cui-lightbulb"></i>&nbsp;Outline Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton variant="success">
+            <CButton color="success">
               <i class="cui-lightbulb"></i>&nbsp;Ghost Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton variant="warning" square>
+            <CButton color="warning" square>
               <i class="cui-lightbulb"></i>&nbsp;Square Button
             </CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton variant="danger" pill>
+            <CButton color="danger" pill>
               <i class="cui-lightbulb"></i>&nbsp;Pill Button
             </CButton>
           </CCol>
@@ -637,22 +637,22 @@
       <CCardBody>
         <CRow>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline variant="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton outline color="primary" :pressed.sync="togglePress">Primary {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline variant="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton outline color="secondary" :pressed.sync="togglePress">Secondary {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline variant="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton outline color="success" :pressed.sync="togglePress">Success {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline variant="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton outline color="info" :pressed.sync="togglePress">Info {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline variant="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton outline color="warning" :pressed.sync="togglePress">Warning {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
           <CCol sm xs="12" class="text-center mt-3">
-            <CButton outline variant="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
+            <CButton outline color="danger" :pressed.sync="togglePress">Danger {{togglePress ? 'On ' : 'Off'}}</CButton>
           </CCol>
         </CRow>
       </CCardBody>
@@ -664,13 +664,13 @@
             <strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
           </CCardHeader>
           <CCardBody>
-            <CButton size="lg" variant="secondary" block>Block level button</CButton>
-            <CButton size="lg" variant="primary" block>Block level button</CButton>
-            <CButton size="lg" variant="success" block>Block level button</CButton>
-            <CButton size="lg" variant="info" block>Block level button</CButton>
-            <CButton size="lg" variant="warning" block>Block level button</CButton>
-            <CButton size="lg" variant="danger" block>Block level button</CButton>
-            <CButton size="lg" variant="link" block>Block level button</CButton>
+            <CButton size="lg" color="secondary" block>Block level button</CButton>
+            <CButton size="lg" color="primary" block>Block level button</CButton>
+            <CButton size="lg" color="success" block>Block level button</CButton>
+            <CButton size="lg" color="info" block>Block level button</CButton>
+            <CButton size="lg" color="warning" block>Block level button</CButton>
+            <CButton size="lg" color="danger" block>Block level button</CButton>
+            <CButton size="lg" color="link" block>Block level button</CButton>
           </CCardBody>
         </CCard>
       </CCol>
@@ -680,13 +680,13 @@
             <strong>Block Level CButtons </strong><small>Add this <code>block</code></small>
           </CCardHeader>
           <CCardBody>
-            <CButton size="lg" outline variant="secondary" block>Block level button</CButton>
-            <CButton size="lg" outline variant="primary" block>Block level button</CButton>
-            <CButton size="lg" outline variant="success" block>Block level button</CButton>
-            <CButton size="lg" outline variant="info" block>Block level button</CButton>
-            <CButton size="lg" outline variant="warning" block>Block level button</CButton>
-            <CButton size="lg" outline variant="danger" block>Block level button</CButton>
-            <CButton size="lg" ghost variant="info" block>Block level button</CButton>
+            <CButton size="lg" outline color="secondary" block>Block level button</CButton>
+            <CButton size="lg" outline color="primary" block>Block level button</CButton>
+            <CButton size="lg" outline color="success" block>Block level button</CButton>
+            <CButton size="lg" outline color="info" block>Block level button</CButton>
+            <CButton size="lg" outline color="warning" block>Block level button</CButton>
+            <CButton size="lg" outline color="danger" block>Block level button</CButton>
+            <CButton size="lg" ghost color="info" block>Block level button</CButton>
           </CCardBody>
         </CCard>
       </CCol>
diff --git a/src/views/icons/CoreUIIcons.vue b/src/views/icons/CoreUIIcons.vue
index 91615eea..38d0d2ea 100644
--- a/src/views/icons/CoreUIIcons.vue
+++ b/src/views/icons/CoreUIIcons.vue
@@ -3,7 +3,7 @@
     <CCard>
       <CCardHeader>
         <i class="cui-pencil"></i>CoreUI Icons
-        <CBadge variant="info">New</CBadge>
+        <CBadge color="info">New</CBadge>
         <div class="card-header-actions">
           <a
             href="https://github.com/coreui/coreui-icons"
diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue
index bd12820b..abb3eaa1 100644
--- a/src/views/notifications/Alerts.vue
+++ b/src/views/notifications/Alerts.vue
@@ -19,14 +19,14 @@
         <CCardBody>
           <div>
             <p></p>
-            <CAlert show variant="primary">Primary Alert</CAlert>
-            <CAlert show variant="secondary">Secondary Alert</CAlert>
-            <CAlert show variant="success">Success Alert</CAlert>
-            <CAlert show variant="danger">Danger Alert</CAlert>
-            <CAlert show variant="warning">Warning Alert</CAlert>
-            <CAlert show variant="info">Info Alert</CAlert>
-            <CAlert show variant="light">Light Alert</CAlert>
-            <CAlert show variant="dark">Dark Alert</CAlert>
+            <CAlert show color="primary">Primary Alert</CAlert>
+            <CAlert show color="secondary">Secondary Alert</CAlert>
+            <CAlert show color="success">Success Alert</CAlert>
+            <CAlert show color="danger">Danger Alert</CAlert>
+            <CAlert show color="warning">Warning Alert</CAlert>
+            <CAlert show color="info">Info Alert</CAlert>
+            <CAlert show color="light">Light Alert</CAlert>
+            <CAlert show color="dark">Dark Alert</CAlert>
           </div>
         </CCardBody>
       </CCard>
@@ -39,28 +39,28 @@
         </CCardHeader>
         <CCardBody>
           <div>
-            <CAlert show variant="primary">
+            <CAlert show color="primary">
               Primary Alert with <a href="#" class="alert-link">an example link</a>.
             </CAlert>
-            <CAlert show variant="secondary">
+            <CAlert show color="secondary">
               Secondary Alert with <a href="#" class="alert-link">an example link</a>.
             </CAlert>
-            <CAlert show variant="success">
+            <CAlert show color="success">
               Success Alert with <a href="#" class="alert-link">an example link</a>.
             </CAlert>
-            <CAlert show variant="danger">
+            <CAlert show color="danger">
               Danger Alert with <a href="#" class="alert-link">an example link</a>.
             </CAlert>
-            <CAlert show variant="warning">
+            <CAlert show color="warning">
               Warning Alert with <a href="#" class="alert-link">an example link</a>.
             </CAlert>
-            <CAlert show variant="info">
+            <CAlert show color="info">
               Info Alert with <a href="#" class="alert-link">an example link</a>.
             </CAlert>
-            <CAlert show variant="light">
+            <CAlert show color="light">
               Light Alert with <a href="#" class="alert-link">an example link</a>.
             </CAlert>
-            <CAlert show variant="dark">
+            <CAlert show color="dark">
               Dark Alert with
               <CLink href="#" class="alert-link">an example link</CLink>
               .
@@ -75,7 +75,7 @@
           <i class="fa fa-align-justify"></i> Alerts <small>with additional content</small>
         </CCardHeader>
         <CCardBody>
-          <CAlert show variant="success">
+          <CAlert show color="success">
             <h4 class="alert-heading">Well done!</h4>
             <p>
               Aww yeah, you successfully read this important alert message.
@@ -98,7 +98,7 @@
         </CCardHeader>
         <CCardBody>
           <CAlert
-            variant="secondary"
+            color="secondary"
             closeButton
             :show.sync="dismissibleAlerts[0]"
           >
@@ -106,7 +106,7 @@
           </CAlert>
 
           <CAlert
-            variant="secondary"
+            color="secondary"
             closeButton
             fade
             :show.sync="dismissibleAlerts[1]"
@@ -115,7 +115,7 @@
           </CAlert>
 
           <CAlert
-            variant="secondary"
+            color="secondary"
             :show.sync="dismissibleAlerts[2]"
             v-slot="{dismiss}"
             class="alert-dismissible"
@@ -123,7 +123,7 @@
             Dismissible Alert with custom button!
             <CButton
               class="position-absolute"
-              variant="secondary"
+              color="secondary"
               style="right:10px;top: 50%;transform: translateY(-50%);"
               textHtml="<i>Close</i>"
               @click="dismiss"
@@ -131,7 +131,7 @@
           </CAlert>
           <CButton
             @click="showDismissibleAlerts"
-            variant="info"
+            color="info"
             class="m-1"
           >
             Show dismissible alerts
@@ -148,7 +148,7 @@
             <CAlert
               :show.sync="dismissCountDown"
               closeButton
-              variant="warning"
+              color="warning"
               fade
             >
               Alert will dismiss after
@@ -158,17 +158,17 @@
             <CAlert
               :show.sync="dismissCountDown"
               closeButton
-              variant="info"
+              color="info"
             >
               Alert will dismiss after {{dismissCountDown}} seconds...
               <CProgress
-                variant="info"
+                color="info"
                 :max="dismissSecs"
                 :value="dismissCountDown"
                 height="4px"
               />
             </CAlert>
-            <CButton @click="showAlert" variant="info" class="m-1">
+            <CButton @click="showAlert" color="info" class="m-1">
               Show alert with timer
             </CButton>
           </div>
diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue
index f7ad181f..e2b66856 100644
--- a/src/views/notifications/Badges.vue
+++ b/src/views/notifications/Badges.vue
@@ -17,16 +17,16 @@
           </div>
         </CCardHeader>
         <CCardBody>
-          <h2>Example heading <CBadge variant="primary">New</CBadge></h2>
-          <h3>Example heading <CBadge variant="primary">New</CBadge></h3>
-          <h4>Example heading <CBadge variant="primary">New</CBadge></h4>
-          <h5>Example heading <CBadge variant="primary">New</CBadge></h5>
-          <h6>Example heading <CBadge variant="primary">New</CBadge></h6>
+          <h2>Example heading <CBadge color="primary">New</CBadge></h2>
+          <h3>Example heading <CBadge color="primary">New</CBadge></h3>
+          <h4>Example heading <CBadge color="primary">New</CBadge></h4>
+          <h5>Example heading <CBadge color="primary">New</CBadge></h5>
+          <h6>Example heading <CBadge color="primary">New</CBadge></h6>
         </CCardBody>
         <CCardFooter>
-          <CButton variant="primary">
+          <CButton color="primary">
             Notifications
-            <CBadge variant="light" :style="{position: 'static'}">4</CBadge>
+            <CBadge color="light" :style="{position: 'static'}">4</CBadge>
           </CButton>
         </CCardFooter>
       </CCard>
@@ -38,14 +38,14 @@
           <small>contextual variations</small>
         </CCardHeader>
         <CCardBody>
-          <CBadge variant="primary">Primary</CBadge>
-          <CBadge variant="secondary">Secondary</CBadge>
-          <CBadge variant="success">Success</CBadge>
-          <CBadge variant="danger">Danger</CBadge>
-          <CBadge variant="warning">Warning</CBadge>
-          <CBadge variant="info">Info</CBadge>
-          <CBadge variant="light">Light</CBadge>
-          <CBadge variant="dark">Dark</CBadge>
+          <CBadge color="primary">Primary</CBadge>
+          <CBadge color="secondary">Secondary</CBadge>
+          <CBadge color="success">Success</CBadge>
+          <CBadge color="danger">Danger</CBadge>
+          <CBadge color="warning">Warning</CBadge>
+          <CBadge color="info">Info</CBadge>
+          <CBadge color="light">Light</CBadge>
+          <CBadge color="dark">Dark</CBadge>
         </CCardBody>
       </CCard>
       <CCard>
@@ -54,14 +54,14 @@
           <small>pills</small>
         </CCardHeader>
         <CCardBody>
-          <CBadge pill variant="primary">Primary</CBadge>
-          <CBadge pill variant="secondary">Secondary</CBadge>
-          <CBadge pill variant="success">Success</CBadge>
-          <CBadge pill variant="danger">Danger</CBadge>
-          <CBadge pill variant="warning">Warning</CBadge>
-          <CBadge pill variant="info">Info</CBadge>
-          <CBadge pill variant="light">Light</CBadge>
-          <CBadge pill variant="dark">Dark</CBadge>
+          <CBadge pill color="primary">Primary</CBadge>
+          <CBadge pill color="secondary">Secondary</CBadge>
+          <CBadge pill color="success">Success</CBadge>
+          <CBadge pill color="danger">Danger</CBadge>
+          <CBadge pill color="warning">Warning</CBadge>
+          <CBadge pill color="info">Info</CBadge>
+          <CBadge pill color="light">Light</CBadge>
+          <CBadge pill color="dark">Dark</CBadge>
         </CCardBody>
       </CCard>
       <CCard>
@@ -70,14 +70,14 @@
           <small>actionable</small>
         </CCardHeader>
         <CCardBody>
-          <CBadge href="#" variant="primary">Primary</CBadge>
-          <CBadge href="#" variant="secondary">Secondary</CBadge>
-          <CBadge href="#" variant="success">Success</CBadge>
-          <CBadge href="#" variant="danger">Danger</CBadge>
-          <CBadge href="#" variant="warning">Warning</CBadge>
-          <CBadge href="#" variant="info">Info</CBadge>
-          <CBadge href="#" variant="light">Light</CBadge>
-          <CBadge href="#" variant="dark">Dark</CBadge>
+          <CBadge href="#" color="primary">Primary</CBadge>
+          <CBadge href="#" color="secondary">Secondary</CBadge>
+          <CBadge href="#" color="success">Success</CBadge>
+          <CBadge href="#" color="danger">Danger</CBadge>
+          <CBadge href="#" color="warning">Warning</CBadge>
+          <CBadge href="#" color="info">Info</CBadge>
+          <CBadge href="#" color="light">Light</CBadge>
+          <CBadge href="#" color="dark">Dark</CBadge>
         </CCardBody>
       </CCard>
     </CCol>
diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue
index ac7a7d94..f6b386de 100644
--- a/src/views/notifications/Modals.vue
+++ b/src/views/notifications/Modals.vue
@@ -18,32 +18,32 @@
               </div>
             </CCardHeader>
             <CCardBody>
-              <CButton variant="secondary" @click="myModal = true" class="mr-1">
+              <CButton color="secondary" @click="myModal = true" class="mr-1">
                 Launch demo modal
               </CButton>
-              <CButton variant="secondary" @click="largeModal = true" class="mr-1">
+              <CButton color="secondary" @click="largeModal = true" class="mr-1">
                 Launch large modal
               </CButton>
-              <CButton variant="secondary" @click="smallModal = true" class="mr-1">
+              <CButton color="secondary" @click="smallModal = true" class="mr-1">
                 Launch small modal
               </CButton>
               <hr>
-              <CButton variant="primary" @click="primaryModal = true" class="mr-1">
+              <CButton color="primary" @click="primaryModal = true" class="mr-1">
                 Launch primary modal
               </CButton>
-              <CButton variant="success" @click="successModal = true" class="mr-1">
+              <CButton color="success" @click="successModal = true" class="mr-1">
                 Launch success modal
               </CButton>
-              <CButton variant="warning" @click="warningModal = true" class="mr-1">
+              <CButton color="warning" @click="warningModal = true" class="mr-1">
                 Launch warning modal
               </CButton>
-              <CButton variant="danger" @click="dangerModal = true" class="mr-1">
+              <CButton color="danger" @click="dangerModal = true" class="mr-1">
                 Launch danger modal
               </CButton>
-              <CButton variant="info" @click="infoModal = true" class="mr-1">
+              <CButton color="info" @click="infoModal = true" class="mr-1">
                 Launch info modal
               </CButton>
-              <CButton variant="dark" @click="darkModal = true" class="mr-1">
+              <CButton color="dark" @click="darkModal = true" class="mr-1">
                 Launch dark modal
               </CButton>
             </CCardBody>
@@ -101,7 +101,7 @@
     </CModal>
     <CModal
       title="Modal title"
-      variant="success"
+      color="success"
       :show.sync="successModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -113,7 +113,7 @@
     </CModal>
     <CModal
       title="Modal title"
-      variant="warning"
+      color="warning"
       :show.sync="warningModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -125,7 +125,7 @@
     </CModal>
     <CModal
       title="Modal title"
-      variant="danger"
+      color="danger"
       :show.sync="dangerModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -137,7 +137,7 @@
     </CModal>
     <CModal
       title="Modal title"
-      variant="info"
+      color="info"
       :show.sync="infoModal"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -153,7 +153,7 @@
       :centered="true"
       title="Modal title 2"
       size="lg"
-      variant="dark"
+      color="dark"
     >
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -166,8 +166,8 @@
         <CButtonClose @click="hide()" class="text-white"/>
       </template>
       <template #footer="{hide}">
-        <CButton @click="darkModal = false" variant="danger">Discard</CButton>
-        <CButton @click="darkModal = false" variant="success">Accept</CButton>
+        <CButton @click="darkModal = false" color="danger">Discard</CButton>
+        <CButton @click="darkModal = false" color="success">Accept</CButton>
       </template>
     </CModal>
   </div>
diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue
index 4ba085fb..3f1fb69c 100644
--- a/src/views/pages/Login.vue
+++ b/src/views/pages/Login.vue
@@ -21,10 +21,10 @@
                 />
                 <CRow>
                   <CCol col="6">
-                    <CButton variant="primary" class="px-4">Login</CButton>
+                    <CButton color="primary" class="px-4">Login</CButton>
                   </CCol>
                   <CCol col="6" class="text-right">
-                    <CButton variant="link" class="px-0">Forgot password?</CButton>
+                    <CButton color="link" class="px-0">Forgot password?</CButton>
                   </CCol>
                 </CRow>
               </CForm>
@@ -38,7 +38,7 @@
             <h2>Sign up</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
             <CButton
-              variant="primary"
+              color="primary"
               class="active mt-3"
             >
               Register Now!
diff --git a/src/views/pages/Page404.vue b/src/views/pages/Page404.vue
index 042792a9..0ae3aa46 100644
--- a/src/views/pages/Page404.vue
+++ b/src/views/pages/Page404.vue
@@ -14,7 +14,7 @@
           placeholder="What are you looking for?"
         >
           <template #append>
-            <CButton variant="info">Search</CButton>
+            <CButton color="info">Search</CButton>
           </template>
         </CFormInput>
       </div>
diff --git a/src/views/pages/Page500.vue b/src/views/pages/Page500.vue
index bc0e2cda..4ce58728 100644
--- a/src/views/pages/Page500.vue
+++ b/src/views/pages/Page500.vue
@@ -13,7 +13,7 @@
           placeholder="What are you looking for?"
         >
           <template #append>
-            <CButton variant="info">Search</CButton>
+            <CButton color="info">Search</CButton>
           </template>
         </CFormInput>
       </CCol>
diff --git a/src/views/pages/Register.vue b/src/views/pages/Register.vue
index d0e70170..44bb7d06 100644
--- a/src/views/pages/Register.vue
+++ b/src/views/pages/Register.vue
@@ -30,16 +30,16 @@
                 autocomplete="new-password"
                 class="mb-4"
               />
-              <CButton variant="success" block>Create Account</CButton>
+              <CButton color="success" block>Create Account</CButton>
             </CForm>
           </CCardBody>
           <CCardFooter class="p-4">
             <CRow>
               <CCol col="6">
-                <CButton block variant="facebook" textHtml="Facebook"/>
+                <CButton block color="facebook" textHtml="Facebook"/>
               </CCol>
               <CCol col="6">
-                <CButton block variant="twitter" textHtml="Twitter"/>
+                <CButton block color="twitter" textHtml="Twitter"/>
               </CCol>
             </CRow>
           </CCardFooter>
diff --git a/src/views/users/Users.vue b/src/views/users/Users.vue
index afb2ac08..1cf7b633 100644
--- a/src/views/users/Users.vue
+++ b/src/views/users/Users.vue
@@ -20,7 +20,7 @@
               <strong>{{data.item.name}}</strong>
             </td>
             <td slot="status" slot-scope="data">
-              <CBadge :variant="getBadge(data.item.status)">
+              <CBadge :color="getBadge(data.item.status)">
                 {{data.item.status}}
               </CBadge>
             </td>
diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue
index 44e18fa2..e728e3a1 100644
--- a/src/views/widgets/Widgets.vue
+++ b/src/views/widgets/Widgets.vue
@@ -8,7 +8,7 @@
           footer="Lorem ipsum dolor sit amet enim."
         >
           <CProgress
-            variant="success"
+            color="success"
             :value="25"
             class="progress-xs my-3 mb-0"
           />
@@ -32,7 +32,7 @@
           header="12.124"
           text="Lorem ipsum..."
           footer="Lorem ipsum dolor sit amet enim."
-          variant="info"
+          color="info"
           :value="25"
         />
       </CCol>
@@ -41,7 +41,7 @@
           header="$98.111,00"
           text="Lorem ipsum..."
           footer="Lorem ipsum dolor sit amet enim."
-          variant="warning"
+          color="warning"
           :value="25"
         />
       </CCol>
@@ -50,7 +50,7 @@
           header="2 TB"
           text="Lorem ipsum..."
           footer="Lorem ipsum dolor sit amet enim."
-          variant="danger"
+          color="danger"
           :value="25"
         />
       </CCol>
@@ -61,7 +61,7 @@
           header="89.9%"
           text="Lorem ipsum..."
           footer="Lorem ipsum dolor sit amet enim."
-          variant="success"
+          color="success"
           inverse :value="25"
         />
       </CCol>
@@ -70,7 +70,7 @@
           header="12.124"
           text="Lorem ipsum..."
           footer="Lorem ipsum dolor sit amet enim."
-          variant="info"
+          color="info"
           inverse
           :value="25"
         />
@@ -80,7 +80,7 @@
           header="$98.111,00"
           text="Lorem ipsum..."
           footer="Lorem ipsum dolor sit amet enim."
-          variant="warning"
+          color="warning"
           inverse
           :value="25"
         />
@@ -90,7 +90,7 @@
           header="2 TB"
           text="Lorem ipsum..."
           footer="Lorem ipsum dolor sit amet enim."
-          variant="danger"
+          color="danger"
           inverse
           :value="25"
         />
@@ -101,7 +101,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          variant="primary"
+          color="primary"
         >
           <CIcon name="settings" width="24"/>
         </CWidgetIcon>
@@ -110,7 +110,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          variant="info"
+          color="info"
         >
           <CIcon name="laptop" width="24"/>
         </CWidgetIcon>
@@ -119,7 +119,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          variant="warning"
+          color="warning"
         >
           <CIcon name="moon" width="24"/>
         </CWidgetIcon>
@@ -128,7 +128,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          variant="danger"
+          color="danger"
         >
           <CIcon name="bell" width="24"/>
         </CWidgetIcon>
@@ -139,7 +139,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          variant="primary"
+          color="primary"
           no-icon-padding
         >
           <CIcon name="settings" width="24"/>
@@ -149,7 +149,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          variant="info"
+          color="info"
           no-icon-padding
         >
           <CIcon name="laptop" width="24"/>
@@ -159,7 +159,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          variant="warning"
+          color="warning"
           no-icon-padding
         >
           <CIcon name="moon" width="24"/>
@@ -169,7 +169,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          variant="danger"
+          color="danger"
           no-icon-padding
         >
           <CIcon name="bell" width="24"/>
@@ -181,7 +181,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          variant="primary"
+          color="primary"
           no-icon-padding
         >
           <CIcon name="settings" class="mx-5 " width="24"/>
@@ -191,7 +191,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          variant="info"
+          color="info"
           no-icon-padding
         >
           <CIcon name="laptop" class="mx-5 " width="24"/>
@@ -201,7 +201,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          variant="warning"
+          color="warning"
           no-icon-padding
         >
           <CIcon name="moon" class="mx-5 " width="24"/>
@@ -224,7 +224,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          variant="primary"
+          color="primary"
           no-icon-padding
           link="#"
         >
@@ -235,7 +235,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          variant="info"
+          color="info"
           no-icon-padding
           link="#"
         >
@@ -246,7 +246,7 @@
         <CWidgetIcon
           header="$1.999,50"
           text="Income"
-          variant="warning"
+          color="warning"
           no-icon-padding
           link="#"
         >
@@ -260,21 +260,21 @@
       <CWidgetProgressIcon
         header="87.500"
         text="Visitors"
-        variant="info"
+        color="info"
       >
         <CIcon name="people" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="385"
         text="New Clients"
-        variant="success"
+        color="success"
       >
         <CIcon name="userFollow" height="36"/>
       </CWidgetProgressIcon>
       <CWidgetProgressIcon
         header="1238"
         text="Products sold"
-        variant="warning"
+        color="warning"
       >
         <CIcon name="basketLoaded" height="36"/>
       </CWidgetProgressIcon>
@@ -287,7 +287,7 @@
       <CWidgetProgressIcon
         header="5:34:11"
         text="Avg. Time"
-        variant="danger"
+        color="danger"
       >
         <CIcon name="speedometer" height="36"/>
       </CWidgetProgressIcon>
@@ -296,7 +296,7 @@
       <CWidgetProgressIcon
         header="87.500"
         text="Visitors"
-        variant="info"
+        color="info"
         inverse
       >
         <CIcon name="people" height="36"/>
@@ -304,7 +304,7 @@
       <CWidgetProgressIcon
         header="385"
         text="New Clients"
-        variant="success"
+        color="success"
         inverse
       >
         <CIcon name="userFollow" height="36"/>
@@ -312,7 +312,7 @@
       <CWidgetProgressIcon
         header="1238"
         text="Products sold"
-        variant="warning"
+        color="warning"
         inverse
       >
         <CIcon name="basketLoaded" height="36"/>
@@ -320,7 +320,7 @@
       <CWidgetProgressIcon
         header="28%"
         text="Returning Visitors"
-        variant="primary"
+        color="primary"
         inverse
       >
         <CIcon name="chartPie" height="36"/>
@@ -328,7 +328,7 @@
       <CWidgetProgressIcon
         header="5:34:11"
         text="Avg. Time"
-        variant="danger"
+        color="danger"
         inverse
       >
         <CIcon name="speedometer" height="36"/>
@@ -339,7 +339,7 @@
         <CWidgetProgressIcon
           header="87.500"
           text="Visitors"
-          variant="info"
+          color="info"
         >
           <CIcon name="people" height="36"/>
         </CWidgetProgressIcon>
@@ -348,7 +348,7 @@
         <CWidgetProgressIcon
           header="385"
           text="New Clients"
-          variant="success"
+          color="success"
         >
           <CIcon name="userFollow" height="36"/>
         </CWidgetProgressIcon>
@@ -357,7 +357,7 @@
         <CWidgetProgressIcon
           header="1238"
           text="Products sold"
-          variant="warning"
+          color="warning"
         >
           <CIcon name="basketLoaded" height="36"/>
         </CWidgetProgressIcon>
@@ -366,7 +366,7 @@
         <CWidgetProgressIcon
           header="28%"
           text="Returning Visitors"
-          variant="primary"
+          color="primary"
         >
           <CIcon name="chartPie" height="36"/>
         </CWidgetProgressIcon>
@@ -375,7 +375,7 @@
         <CWidgetProgressIcon
           header="5:34:11"
           text="Avg. Time"
-          variant="danger"
+          color="danger"
         >
           <CIcon name="speedometer" height="36"/>
         </CWidgetProgressIcon>
@@ -384,7 +384,7 @@
         <CWidgetProgressIcon
           header="972"
           text="comments"
-          variant="info"
+          color="info"
         >
           <CIcon name="speech" height="36"/>
         </CWidgetProgressIcon>
@@ -395,7 +395,7 @@
         <CWidgetProgressIcon
           header="87.500"
           text="Visitors"
-          variant="info"
+          color="info"
           inverse
         >
           <CIcon name="people" height="36"/>
@@ -405,7 +405,7 @@
         <CWidgetProgressIcon
           header="385"
           text="New Clients"
-          variant="success"
+          color="success"
           inverse
         >
           <CIcon name="userFollow" height="36"/>
@@ -415,7 +415,7 @@
         <CWidgetProgressIcon
           header="1238"
           text="Products sold"
-          variant="warning"
+          color="warning"
           inverse
         >
           <CIcon name="basketLoaded" height="36"/>
@@ -425,7 +425,7 @@
         <CWidgetProgressIcon
           header="28%"
           text="Returning Visitors"
-          variant="primary"
+          color="primary"
           inverse
         >
           <CIcon name="chartPie" height="36"/>
@@ -435,7 +435,7 @@
         <CWidgetProgressIcon
           header="5:34:11"
           text="Avg. Time"
-          variant="danger"
+          color="danger"
           inverse
         >
           <CIcon name="speedometer" height="36"/>
@@ -445,7 +445,7 @@
         <CWidgetProgressIcon
           header="972"
           text="comments"
-          variant="info"
+          color="info"
           inverse
         >
           <CIcon name="speech" height="36"/>
@@ -456,7 +456,7 @@
     <CRow>
       <CCol sm="6" lg="3">
         <CWidgetHeaderDetails
-          variant="primary"
+          color="primary"
           right-header="SALE"
           right-footer="Today 6:43 AM"
           left-header="$1.890,65"
@@ -468,7 +468,7 @@
       </CCol>
       <CCol sm="6" lg="3">
         <CWidgetHeaderDetails
-          variant="success"
+          color="success"
           right-header="SALE"
           right-footer="Today 6:43 AM"
           left-header="$1.890,65"
@@ -480,7 +480,7 @@
       </CCol>
       <CCol sm="6" lg="3">
         <CWidgetHeaderDetails
-          variant="danger"
+          color="danger"
           right-header="SALE"
           right-footer="Today 6:43 AM"
           left-header="$1.890,65"
@@ -492,7 +492,7 @@
       </CCol>
       <CCol sm="6" lg="3">
         <CWidgetHeaderDetails
-          variant="warning"
+          color="warning"
           right-header="SALE"
           right-footer="Today 6:43 AM"
           left-header="$1.890,65"
diff --git a/src/views/widgets/WidgetsBrand.vue b/src/views/widgets/WidgetsBrand.vue
index 876d17f7..e1274e7c 100644
--- a/src/views/widgets/WidgetsBrand.vue
+++ b/src/views/widgets/WidgetsBrand.vue
@@ -3,7 +3,7 @@
     <template v-if="!noCharts">
       <CCol md="3" sm="6">
         <CWidgetBrand
-          variant="facebook"
+          color="facebook"
           right-header="89k"
           right-footer="friends"
           left-header="459"
@@ -26,7 +26,7 @@
        </CCol>
        <CCol md="3" sm="6">
         <CWidgetBrand
-          variant="twitter"
+          color="twitter"
           right-header="973k"
           right-footer="followers"
           left-header="1.792"
@@ -49,7 +49,7 @@
        </CCol>
        <CCol md="3" sm="6">
         <CWidgetBrand
-          variant="linkedin"
+          color="linkedin"
           right-header="500+"
           right-footer="contracts"
           left-header="292"
@@ -76,7 +76,7 @@
           right-footer="events"
           left-header="4"
           left-footer="meetings"
-          variant="warning"
+          color="warning"
         >
           <CIcon
             name="calendar"
@@ -97,7 +97,7 @@
     <template v-else>
       <CCol md="3" sm="6">
         <CWidgetBrand
-          variant="facebook"
+          color="facebook"
           right-header="89k"
           right-footer="friends"
           left-header="459"
@@ -112,7 +112,7 @@
        </CCol>
        <CCol md="3" sm="6">
         <CWidgetBrand
-          variant="twitter"
+          color="twitter"
           right-header="973k"
           right-footer="followers"
           left-header="1.792"
@@ -127,7 +127,7 @@
        </CCol>
        <CCol md="3" sm="6">
         <CWidgetBrand
-          variant="linkedin"
+          color="linkedin"
           right-header="500+"
           right-footer="contracts"
           left-header="292"
@@ -146,7 +146,7 @@
           right-footer="events"
           left-header="4"
           left-footer="meetings"
-          variant="warning"
+          color="warning"
         >
           <CIcon
             name="calendar"
diff --git a/src/views/widgets/WidgetsDropdown.vue b/src/views/widgets/WidgetsDropdown.vue
index 84355b64..119453ae 100644
--- a/src/views/widgets/WidgetsDropdown.vue
+++ b/src/views/widgets/WidgetsDropdown.vue
@@ -1,11 +1,11 @@
 <template>
   <CRow>
     <CCol sm="6" lg="3">
-      <CWidgetDropdown variant="primary" header="9.823" text="Members online">
+      <CWidgetDropdown color="primary" header="9.823" text="Members online">
         <template #default>
           <CDropdown
             class="float-right"
-            variant="transparent p-0"
+            color="transparent p-0"
             placement="bottom-end"
           >
             <template #toggler-content>
@@ -31,11 +31,11 @@
       </CWidgetDropdown>
     </CCol>
     <CCol sm="6" lg="3">
-      <CWidgetDropdown variant="info" header="9.823" text="Members online">
+      <CWidgetDropdown color="info" header="9.823" text="Members online">
         <template #default>
           <CDropdown
             class="float-right"
-            variant="transparent p-0"
+            color="transparent p-0"
             placement="bottom-end"
             no-caret
             buttonHtml="<i class='cui-location-pin'></i>"
@@ -65,14 +65,14 @@
     </CCol>
     <CCol sm="6" lg="3">
       <CWidgetDropdown
-        variant="warning"
+        color="warning"
         header="9.823"
         text="Members online"
       >
         <template #default>
           <CDropdown
             class="float-right"
-            variant="transparent p-0"
+            color="transparent p-0"
             placement="bottom-end"
           >
             <template #toggler-content>
@@ -99,14 +99,14 @@
     </CCol>
     <CCol sm="6" lg="3">
       <CWidgetDropdown
-        variant="danger"
+        color="danger"
         header="9.823"
         text="Members online"
       >
         <template #default>
           <CDropdown
             class="float-right"
-            variant="transparent p-0"
+            color="transparent p-0"
             placement="bottom-end"
           >
             <template #toggler-content>