Adjust ribbon label padding to be more spacious

src/definitions/elements/label.less

@@ -351,13 +351,24 @@ a.ui.label {
   width: 0em;
   height: 0em;
 }
+/* Positioning */
+.ui.ribbon.label {
+  left: @ribbonOffset;
+  margin-right: -@ribbonTriangleSize;
+  padding-left: @ribbonDistance;
+  padding-right: @ribbonTriangleSize;
+}
+.ui[class*="right ribbon"].label {
+  left: @rightRibbonOffset;
+  padding-left: @ribbonTriangleSize;
+  padding-right: @ribbonDistance;
+}
 
 /* Right Ribbon */
 .ui[class*="right ribbon"].label {
   text-align: left;
   transform: translateX(-100%);
   border-radius: @borderRadius 0em 0em @borderRadius;
-  padding-left: @horizontalPadding;
 }
 .ui[class*="right ribbon"].label:after {
   left: auto;
@@ -369,16 +380,6 @@ a.ui.label {
   border-top-color: inherit;
 }
 
-/* Positioning */
-.ui.ribbon.label {
-  left: @ribbonOffset;
-  margin-right: -@ribbonTriangleSize;
-  padding-left: @ribbonDistance;
-}
-.ui[class*="right ribbon"].label {
-  left: @rightRibbonOffset;
-  padding-right: @ribbonDistance;
-}
 
 
 /* Inside Image */
@@ -390,13 +391,11 @@ a.ui.label {
 .ui.card .image > .ui.ribbon.label,
 .ui.image > .ui.ribbon.label {
   left: @ribbonImageOffset;
-  padding-left: @ribbonImageDistance;
 }
 .ui.card .image > .ui[class*="right ribbon"].label,
 .ui.image > .ui[class*="right ribbon"].label {
   left: @rightRibbonImageOffset;
   padding-left: @horizontalPadding;
-  padding-right: @ribbonImageDistance;
 }
 
 

src/definitions/elements/step.less

@@ -132,6 +132,7 @@
 
 /* Icon */
 .ui.steps .step > .icon {
+  line-height: 1;
   font-size: @iconSize;
   margin: 0em @iconDistance 0em 0em;
 }

src/themes/default/elements/label.variables

@@ -119,7 +119,6 @@
 
 @ribbonImageMargin: -0.05rem; /* Rounding Offset on Triangle */
 @ribbonImageOffset: ~"calc("-@ribbonImageMargin~" - "@ribbonTriangleSize~")";
-@ribbonImageDistance: ~"calc("@ribbonImageMargin~" + "@ribbonTriangleSize~")";
 @rightRibbonImageOffset:  ~"calc(100% + "@ribbonImageMargin~" + "@ribbonTriangleSize~")";
 
 /* Colors */

src/themes/default/globals/site.variables

@@ -70,7 +70,7 @@
 @darkGrey         : #AAAAAA;
 @lightGrey        : #DCDDDE;
 @offWhite         : #FAFAFA;
-@darkWhite        : #F0F0F0;
+@darkWhite        : #F4F4F4;
 @white            : #FFFFFF;
 
 /*-------------------
@@ -293,31 +293,31 @@
 
 /* Positive */
 @positiveColor           : @green;
-@positiveBackgroundColor : #F3FFEC;
-@positiveBorderColor     : #B4D3A4;
+@positiveBackgroundColor : #FCFFF5;
+@positiveBorderColor     : #A3C293;
 @positiveHeaderColor     : #1A531B;
-@positiveTextColor       : #255F26;
+@positiveTextColor       : #1D571E;
 
 /* Negative */
 @negativeColor           : @red;
-@negativeBackgroundColor : #FFF0F0;
+@negativeBackgroundColor : #FFF6F6;
 @negativeBorderColor     : #E0B4B4;
 @negativeHeaderColor     : #912D2B;
-@negativeTextColor       : #973230;
+@negativeTextColor       : #922D2B;
 
 /* Info */
 @infoColor              : #31CCEC;
-@infoBackgroundColor    : #F1FCFC;
+@infoBackgroundColor    : #FAFEFE;
 @infoBorderColor        : #A3CFD8;
 @infoHeaderColor        : #0E566C;
-@infoTextColor          : #196178;
+@infoTextColor          : #0E566D;
 
 /* Warning */
 @warningColor           : #F2C037;
 @warningBorderColor     : #C9BA9B;
-@warningBackgroundColor : #FFF8E2;
+@warningBackgroundColor : #FFFCED;
 @warningHeaderColor     : #794B02;
-@warningTextColor       : #715422;
+@warningTextColor       : #664917;
 
 
 /*-------------------
@@ -361,6 +361,7 @@
 @circularRadius                : 500rem;
 
 @borderColor                   : rgba(34, 36, 38, 0.15);
+@strongBorderColor             : rgba(34, 36, 38, 0.22);
 @internalBorderColor           : rgba(34, 36, 38, 0.1);
 @selectedBorderColor           : rgba(34, 36, 38, 0.3);
 @disabledBorderColor           : rgba(34, 36, 38, 0.5);