diff --git a/src/definitions/modules/progress.less b/src/definitions/modules/progress.less
index 0215a4769..187297547 100755
--- a/src/definitions/modules/progress.less
+++ b/src/definitions/modules/progress.less
@@ -38,26 +38,24 @@
}
/* Indicating */
-.ui.indicating.progress .bar[style^="width: 3"]{
- background-color: #D9A65C;
+.ui.indicating.progress .bar[style^="width: 3"] {
+ background-color: @indicatingSecondColor;
}
.ui.indicating.progress .bar[style^="width: 4"],
.ui.indicating.progress .bar[style^="width: 5"] {
- background-color: #E6BB48;
+ background-color: @indicatingThirdColor;
}
.ui.indicating.progress .bar[style^="width: 6"] {
- background-color: #DDC928;
+ background-color: @indicatingFourthColor;
}
.ui.indicating.progress .bar[style^="width: 7"],
.ui.indicating.progress .bar[style^="width: 8"] {
- background-color: #B4D95C;
+ background-color: @indicatingFifthColor;
}
.ui.indicating.progress .bar[style^="width: 9"],
.ui.indicating.progress .bar[style^="width: 100"] {
- background-color: #66DA81;
+ background-color: @indicatingSixthColor;
}
-
-/* Single Digits Last */
.ui.indicating.progress .bar[style^="width: 1%"],
.ui.indicating.progress .bar[style^="width: 2%"],
.ui.indicating.progress .bar[style^="width: 3%"],
@@ -69,7 +67,40 @@
.ui.indicating.progress .bar[style^="width: 9%"],
.ui.indicating.progress .bar[style^="width: 1"],
.ui.indicating.progress .bar[style^="width: 2"] {
- background-color: #D95C5C;
+ background-color: @indicatingFirstColor;
+}
+
+/* Single Digits Last */
+.ui.indicating.progress .bar[style^="width: 1%"] + .label,
+.ui.indicating.progress .bar[style^="width: 2%"] + .label,
+.ui.indicating.progress .bar[style^="width: 3%"] + .label,
+.ui.indicating.progress .bar[style^="width: 4%"] + .label,
+.ui.indicating.progress .bar[style^="width: 5%"] + .label,
+.ui.indicating.progress .bar[style^="width: 6%"] + .label,
+.ui.indicating.progress .bar[style^="width: 7%"] + .label,
+.ui.indicating.progress .bar[style^="width: 8%"] + .label,
+.ui.indicating.progress .bar[style^="width: 9%"] + .label,
+.ui.indicating.progress .bar[style^="width: 1"] + .label,
+.ui.indicating.progress .bar[style^="width: 2"] + .label {
+ color: @indicatingFirstColor;
+}
+.ui.indicating.progress .bar[style^="width: 3"] + .label {
+ color: @indicatingSecondColor;
+}
+.ui.indicating.progress .bar[style^="width: 4"] + .label,
+.ui.indicating.progress .bar[style^="width: 5"] + .label {
+ color: @indicatingThirdColor;
+}
+.ui.indicating.progress .bar[style^="width: 6"] + .label {
+ color: @indicatingFourthColor;
+}
+.ui.indicating.progress .bar[style^="width: 7"] + .label,
+.ui.indicating.progress .bar[style^="width: 8"] + .label {
+ color: @indicatingFifthColor;
+}
+.ui.indicating.progress .bar[style^="width: 9"] + .label,
+.ui.indicating.progress .bar[style^="width: 100"] + .label {
+ color: @indicatingSixthColor;
}
/*******************************
diff --git a/src/themes/packages/default/modules/progress.variables b/src/themes/packages/default/modules/progress.variables
index 985fc498d..215e2ef3b 100755
--- a/src/themes/packages/default/modules/progress.variables
+++ b/src/themes/packages/default/modules/progress.variables
@@ -59,6 +59,18 @@
@labelTextAlign: center;
@labelTransition: color 1s @defaultEasing;
+/*-------------------
+ Types
+--------------------*/
+
+@indicatingFirstColor: #D95C5C;
+@indicatingSecondColor: #D9A65C;
+@indicatingThirdColor: #E6BB48;
+@indicatingFourthColor: #DDC928;
+@indicatingFifthColor: #B4D95C;
+@indicatingSixthColor: #66DA81;
+
+
/*-------------------
States
--------------------*/