Adjusts progress theme colors

src/definitions/modules/progress.less

@@ -43,63 +43,63 @@
 }
 
 /* Indicating */
-.ui.indicating.progress .bar[style*="width: 1"],
-.ui.indicating.progress .bar[style*="width: 2"] {
+.ui.indicating.progress[data-percent^="1"] .bar,
+.ui.indicating.progress[data-percent^="2"] .bar {
   background-color: @indicatingFirstColor;
 }
-.ui.indicating.progress .bar[style*="width: 3"] {
+.ui.indicating.progress[data-percent^="3"] .bar {
   background-color: @indicatingSecondColor;
 }
-.ui.indicating.progress .bar[style*="width: 4"],
-.ui.indicating.progress .bar[style*="width: 5"] {
+.ui.indicating.progress[data-percent^="4"] .bar,
+.ui.indicating.progress[data-percent^="5"] .bar {
   background-color: @indicatingThirdColor;
 }
-.ui.indicating.progress .bar[style*="width: 6"] {
+.ui.indicating.progress[data-percent^="6"] .bar {
   background-color: @indicatingFourthColor;
 }
-.ui.indicating.progress .bar[style*="width: 7"],
-.ui.indicating.progress .bar[style*="width: 8"] {
+.ui.indicating.progress[data-percent^="7"] .bar,
+.ui.indicating.progress[data-percent^="8"] .bar {
   background-color: @indicatingFifthColor;
 }
-.ui.indicating.progress .bar[style*="width: 9"],
-.ui.indicating.progress .bar[style*="width: 100"] {
+.ui.indicating.progress[data-percent^="9"] .bar,
+.ui.indicating.progress[data-percent^="100"] .bar {
   background-color: @indicatingSixthColor;
 }
 
 /* Indicating Label */
 .ui.indicating.progress[data-percent^="1"] .label,
 .ui.indicating.progress[data-percent^="2"] .label {
-  color: @indicatingFirstColor;
+  color: @indicatingFirstLabelColor;
 }
 .ui.indicating.progress[data-percent^="3"] .label {
-  color: @indicatingSecondColor;
+  color: @indicatingSecondLabelColor;
 }
 .ui.indicating.progress[data-percent^="4"] .label,
 .ui.indicating.progress[data-percent^="5"] .label {
-  color: @indicatingThirdColor;
+  color: @indicatingThirdLabelColor;
 }
 .ui.indicating.progress[data-percent^="6"] .label {
-  color: @indicatingFourthColor;
+  color: @indicatingFourthLabelColor;
 }
 .ui.indicating.progress[data-percent^="7"] .label,
 .ui.indicating.progress[data-percent^="8"] .label {
-  color: @indicatingFifthColor;
+  color: @indicatingFifthLabelColor;
 }
 .ui.indicating.progress[data-percent^="9"] .label,
 .ui.indicating.progress[data-percent^="100"] .label {
-  color: @indicatingSixthColor;
+  color: @indicatingSixthLabelColor;
 }
 
 /* Single Digits */
-.ui.indicating.progress .bar[style^="width: 1%"],
-.ui.indicating.progress .bar[style^="width: 2%"],
-.ui.indicating.progress .bar[style^="width: 3%"],
-.ui.indicating.progress .bar[style^="width: 4%"],
-.ui.indicating.progress .bar[style^="width: 5%"],
-.ui.indicating.progress .bar[style^="width: 6%"],
-.ui.indicating.progress .bar[style^="width: 7%"],
-.ui.indicating.progress .bar[style^="width: 8%"],
-.ui.indicating.progress .bar[style^="width: 9%"] {
+.ui.indicating.progress[data-percent="1"] .bar,
+.ui.indicating.progress[data-percent="2"] .bar,
+.ui.indicating.progress[data-percent="3"] .bar,
+.ui.indicating.progress[data-percent="4"] .bar,
+.ui.indicating.progress[data-percent="5"] .bar,
+.ui.indicating.progress[data-percent="6"] .bar,
+.ui.indicating.progress[data-percent="7"] .bar,
+.ui.indicating.progress[data-percent="8"] .bar,
+.ui.indicating.progress[data-percent="9"] .bar {
   background-color: @indicatingFirstColor;
 }
 .ui.indicating.progress[data-percent="1"] .label,
@@ -111,7 +111,7 @@
 .ui.indicating.progress[data-percent="7"] .label,
 .ui.indicating.progress[data-percent="8"] .label,
 .ui.indicating.progress[data-percent="9"] .label {
-  color: @indicatingFirstColor;
+  color: @indicatingFirstLabelColor;
 }
 
 /* Indicating Success */

src/themes/classic/modules/progress.variables

@@ -6,3 +6,4 @@
 @boxShadow: 0px 0px 4px rgba(0, 0, 0, 0.1) inset;
 @barBackground: @subtleGradient #888888;
 @border: 1px solid @borderColor;
+@padding: 0.214285em;

src/themes/default/modules/progress.variables

@@ -11,10 +11,10 @@
 @firstMargin: 0em 0em (@labelHeight + @verticalSpacing);
 @lastMargin: 0em 0em (@labelHeight);
 
-@background: @subtleTransparentBlack;
-@border: 1px solid @borderColor;
+@background: @transparentBlack;
+@border: none;
 @boxShadow: none;
-@padding: 0.2857em;
+@padding: 0em;
 @borderRadius: @defaultBorderRadius;
 
 /* Bar */
@@ -22,8 +22,8 @@
 @barHeight: 1.75em;
 @barBackground: #888888;
 @barBorderRadius: @borderRadius;
-@barTransitionEasing: ease;
-@barTransitionDuration: 0.3s;
+@barTransitionEasing: @transitionEasing;
+@barTransitionDuration: @transitionDuration;
 @barTransition:
   width @barTransitionDuration @barTransitionEasing,
   background-color @barTransitionDuration @barTransitionEasing
@@ -33,7 +33,7 @@
 
 /* Progress Bar Label */
 @progressWidth: auto;
-@progressSize: 0.9em;
+@progressSize: @relativeSmall;
 @progressPosition: absolute;
 @progressTop: 50%;
 @progressRight: 0.5em;
@@ -66,12 +66,18 @@
 --------------------*/
 
 @indicatingFirstColor: #D95C5C;
-@indicatingSecondColor: #D9A65C;
+@indicatingSecondColor: #EFBC72;
 @indicatingThirdColor: #E6BB48;
 @indicatingFourthColor: #DDC928;
 @indicatingFifthColor: #B4D95C;
 @indicatingSixthColor: #66DA81;
 
+@indicatingFirstLabelColor: #CA4D4D;
+@indicatingSecondLabelColor: #B27F22;
+@indicatingThirdLabelColor: #C09522;
+@indicatingFourthLabelColor: #ADA422;
+@indicatingFifthLabelColor: #7A9F22;
+@indicatingSixthLabelColor: #22963D;
 
 /*-------------------
         States