Add switch button styling

services/web/public/stylesheets/app/subscription.less

@@ -44,16 +44,16 @@
 		border: solid 1px @gray-lighter;
 		border-radius: @border-radius-large 0 0 @border-radius-large;
 		padding: (@line-height-computed / 2);
-		color: @gray;
+		color: @btn-switch-color;
 
 		&:hover,
 		&:focus {
-			color: @gray;
+			color: @btn-switch-color;
 			text-decoration: none;
 		}
 
 		&:hover {
-			color: @gray-dark;
+			color: @btn-switch-hover-color;
 		}
 
 		& + & {
@@ -62,12 +62,12 @@
 		}
 
 		&-selected {
-			color: @link-color;
+			color: @link-active-color;
 			box-shadow: inset 0 -2px 0 0;
 
 			&:hover,
 			&:focus {
-				color: @link-color;
+				color: @link-active-color;
 			}
 		}
 	}

services/web/public/stylesheets/core/_common-variables.less

@@ -13,6 +13,7 @@
 
 //** Global textual link color.
 @link-color:            @brand-primary;
+@link-active-color:     @link-color;
 //** Link hover color set via `darken()` function.
 @link-hover-color:      darken(@link-color, 15%);
 
@@ -90,6 +91,9 @@
 @border-width-base:         3px;
 @border-color-base:         @gray-lighter;
 
+@btn-switch-color:               @gray;
+@btn-switch-hover-color:         @gray-dark;
+
 //** Global color for active items (e.g., navs or dropdowns).
 @component-active-color:    #fff;
 //** Global background color for active items (e.g., navs or dropdowns).

services/web/public/stylesheets/core/ol-variables.less

@@ -49,6 +49,7 @@
 @text-small-color       : @ol-type-color;
 @text-color             : @ol-type-color;
 @link-color             : @ol-blue;
+@link-active-color      : @ol-dark-green;
 @link-hover-color       : @ol-dark-blue;
 
 // Button colors and sizing
@@ -75,6 +76,9 @@
 @btn-info-bg             : @ol-blue;
 @btn-info-border         : transparent;
 
+@btn-switch-color        : @ol-blue-gray-4;
+@btn-switch-hover-color  : darken(@ol-blue-gray-4, 8%);
+
 // Padding
 @padding-xs-horizontal   : 8px;