refactor: change CProgressBar prop color to variant for unification

Author: woothu

src/components/Progress/CProgress.js

@@ -14,7 +14,7 @@ export default {
             value: this.value,
             max: this.max,
             precision: this.precision,
-            color: this.color,
+            variant: this.variant,
             animated: this.animated,
             striped: this.striped,
             showProgress: this.showProgress,
@@ -35,12 +35,12 @@ export default {
   props: {
     height: String,
     // These props can be inherited via the child CProgressBar(s)
-    color: String,
+    variant: String,
     striped: Boolean,
     animated: Boolean,
     precision: Number,
     showProgress: Boolean,
-    showValue:  Boolean,
+    showValue: Boolean,
     max: Number,
     // This prop is not inherited by child CProgressBar(s)
     value: Number,

src/components/Progress/CProgressBar.js

@@ -1,5 +1,3 @@
-import { getColor } from '@coreui/coreui/dist/js/coreui-utilities'
-
 export default {
   name: 'CProgressBar',
   render (h) {
@@ -32,17 +30,15 @@ export default {
     progressBarClasses () {
       return [
         'progress-bar',
+        this.computedVariant ? `bg-${this.computedVariant}` : '',
         {
           'progress-bar-striped': this.computedStriped || this.computedAnimated,
           'progress-bar-animated': this.computedAnimated
         }
       ]
     },
     progressBarStyles () {
-      return [
-         { width: `${(100 * (this.value / this.computedMax))}%` },
-         this.computedColor? { backgroundColor: this.computedColor} : {}
-      ]
+      return { width: `${(100 * (this.value / this.computedMax))}%` }
     },
     progress () {
       const p = Math.pow(10, this.computedPrecision)
@@ -52,9 +48,9 @@ export default {
       // Prefer our max over parent setting
       return this.max ? this.max : (this.$parent.max || 100)
     },
-    computedColor () {
-      // Prefer our color over parent setting
-      return getColor(this.color || this.$parent.color || '#fff')
+    computedVariant () {
+      // Prefer our variant over parent setting
+      return this.variant || this.$parent.variant
     },
     computedPrecision () {
       // Prefer our precision over parent setting
@@ -83,7 +79,7 @@ export default {
     // Which is why they are defaulted to null
     max: Number,
     precision: Number,
-    color: String,
+    variant: String,
     striped: {
       type: Boolean,
       default: null

src/components/Widgets/CWidget01.vue

@@ -4,7 +4,7 @@
       <div class="h4 m-0">{{props.header}}</div>
       <div>{{props.text}}</div>
       <slot>
-        <CProgress :color="!props.inverse ? props.variant : ''"
+        <CProgress :variant="!props.inverse ? props.variant : ''"
                    :value = "props.value"
                    :class="props.inverse ? 'progress-white' : ''"
                    class="progress-xs my-3 mb-0"/>
@@ -34,10 +34,7 @@ export default {
       type: String,
       default: 'footer:string'
     },
-    variant: {
-      type: String,
-      default: 'success'
-    },
+    variant: String,
     inverse: Boolean,
     value: {
       type: Number,

src/components/Widgets/CWidget05.vue

@@ -7,7 +7,7 @@
       <div class="h4 mb-0">{{props.header}}</div>
       <small class="text-muted text-uppercase font-weight-bold">{{props.text}}</small>
       <slot>
-        <CProgress :color="!props.inverse ? props.variant : ''"
+        <CProgress :variant="!props.inverse ? props.variant : ''"
                    :value="props.value"
                    :class="props.inverse ? 'progress-white' : ''"
                    class="progress-xs my-3 mb-0"/>
@@ -36,10 +36,7 @@ export default {
       type: String,
       default: 'text:string'
     },
-    variant: {
-      type: String,
-      default: 'success'
-    },
+    variant: String,
     inverse: Boolean,
     value: {
       type: Number,