feat(progress): add new progress properties (#388)

Author: didimmova

sass/themes/schemas/components/light/_progress.scss

@@ -18,6 +18,8 @@
 /// @prop {Map} stripes-color [color: ('gray', 50, .7)] - The track stripes color.
 /// @prop {Map} text-color [color: ('gray', 700)] - The track value text color.
 /// @prop {List} track-border-radius [(rem(0), rem(0), rem(8px))] - The border radius used for the progress bar track.
+/// @prop {Number} track-height [rem(4px)] - The linear progress bar track height.
+/// @prop {Number} strip-size [rem(16px)] - The linear progress bar strip size.
 /// @prop {Map} typography [label: (value: 'subtitle-2')] - The typography styles used for the component.
 $light-progress-linear: extend(
     (
@@ -82,6 +84,8 @@ $light-progress-linear: extend(
             ),
         ),
 
+        track-height: rem(4px),
+        strip-size: rem(16px),
         typography: (
             label: (
                 value: 'subtitle-2',
@@ -97,13 +101,21 @@ $material-progress-linear: $light-progress-linear;
 
 /// Generates a fluent progress-linear schema.
 /// @type {Map}
+/// @prop {Number} track-height [rem(2px)] - The linear progress bar track height.
 /// @requires $light-progress-linear
-$fluent-progress-linear: $light-progress-linear;
+$fluent-progress-linear: extend(
+    $light-progress-linear,
+    (
+        track-height: rem(2px),
+    )
+);
 
 /// Generates a bootstrap progress-linear schema.
 /// @type {Map}
 /// @prop {Map} stripes-color [color: ('gray', 50, .2)] - The track stripes color.
 /// @prop {List} track-border-radius [(rem(4px), rem(0), rem(8px))] - The border radius used for the progress bar track.
+/// @prop {Number} track-height [rem(16px)] - The linear progress bar track height.
+/// @prop {Number} strip-size [rem(5px)] - The linear progress bar strip size.
 /// @requires $light-progress-linear
 $bootstrap-progress-linear: extend(
     $light-progress-linear,
@@ -123,6 +135,9 @@ $bootstrap-progress-linear: extend(
                 rem(8px),
             ),
         ),
+
+        track-height: rem(16px),
+        strip-size: rem(5px),
     )
 );
 
@@ -203,7 +218,11 @@ $indigo-progress-linear: extend(
 /// Generates a base light progress-circular schema.
 /// @type {Map}
 /// @prop {Map} base-circle-color [color: ('gray', 300)] - The base circle fill color.
-/// @prop {Map} progress-circle-color [color: ('primary', 500)] - The progress circle fill color.
+/// @prop {Map} fill-color-default [color: ('primary', 500)] - The progress circle default fill color.
+/// @prop {Map} fill-color-danger [color: ('error')] - The progress circle danger fill color.
+/// @prop {Map} fill-color-warning [color: ('warn')] - The progress circle warning fill color.
+/// @prop {Map} fill-color-info [color: ('info')] - The progress circle info fill color.
+/// @prop {Map} fill-color-success [color: ('success')] - The progress circle success fill color.
 /// @prop {Map} text-color [color: ('gray', 700)] - The value text color.
 /// @prop {Number} diameter [rem(32px)] - The progress circle diameter.
 /// @prop {List} track-border-radius [rem(0)] - The border radius used for the progress bar track.
@@ -216,13 +235,37 @@ $light-progress-circular: extend(
             ),
         ),
 
-        progress-circle-color: (
+        fill-color-default: (
             color: (
                 'primary',
                 500,
             ),
         ),
 
+        fill-color-danger: (
+            color: (
+                'error',
+            ),
+        ),
+
+        fill-color-warning: (
+            color: (
+                'warn',
+            ),
+        ),
+
+        fill-color-info: (
+            color: (
+                'info',
+            ),
+        ),
+
+        fill-color-success: (
+            color: (
+                'success',
+            ),
+        ),
+
         text-color: (
             color: (
                 'gray',
@@ -259,7 +302,11 @@ $bootstrap-progress-circular: extend(
 /// Generates an indigo progress-circular schema.
 /// @type {Map}
 /// @prop {Map} base-circle-color [color: ('gray', 900, .15)] - The base circle fill color.
-/// @prop {Map} progress-circle-color [color: ('primary', 400)] - The progress circle fill color.
+/// @prop {Map} fill-color-default [color: ('primary', 400)] - The track default fill color.
+/// @prop {Map} fill-color-danger [color: ('error', 400)] - The track danger fill color.
+/// @prop {Map} fill-color-warning [color: ('warn', 400)] - The track warning fill color.
+/// @prop {Map} fill-color-info [color: ('info', 400)] - The track info fill color.
+/// @prop {Map} fill-color-success [color: ('success', 400)] - The track success fill color.
 /// @prop {Map} text-color [color: ('gray', 600)] - The value text color.
 /// @prop {Number} diameter [rem(48px)] - The progress circle diameter.
 $indigo-progress-circular: (
@@ -271,13 +318,41 @@ $indigo-progress-circular: (
         ),
     ),
 
-    progress-circle-color: (
+    fill-color-default: (
         color: (
             'primary',
             400,
         ),
     ),
 
+    fill-color-danger: (
+        color: (
+            'error',
+            400,
+        ),
+    ),
+
+    fill-color-warning: (
+        color: (
+            'warn',
+            400,
+        ),
+    ),
+
+    fill-color-info: (
+        color: (
+            'info',
+            400,
+        ),
+    ),
+
+    fill-color-success: (
+        color: (
+            'success',
+            400,
+        ),
+    ),
+
     text-color: (
         color: (
             'gray',