LT-249: Creating warning and response status states for measurement rows

Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl

@@ -17,7 +17,7 @@ $textColorActive = #2D2D2D
 
     .roundedButton
       align-items: center
-      background-color: $darkUiColor
+      background-color: $uiGrayDarker
       border: 1px $uiBorderColorDark solid
       color: $textSecondaryColor
       display: flex
@@ -56,7 +56,7 @@ $textColorActive = #2D2D2D
 
     &:hover .roundedButton
       background-color: $boxBackgroundColor
-      color: $darkUiColor
+      color: $uiGrayDarker
 
     &.active .roundedButton
       background-color: $activeColor
@@ -66,5 +66,5 @@ $textColorActive = #2D2D2D
     &:hover .roundedButton
     &.active .roundedButton
       svg
-        fill: $darkUiColor
-        stroke: $darkUiColor
+        fill: $uiGrayDarker
+        stroke: $uiGrayDarker

Packages/design/styles/variables.styl

@@ -1,26 +1,25 @@
+// Common pallete
+$uiYellow = #E29E4A
+$uiSkyBlue = #6FBDE2
+$uiGrayDark = #263340
+$uiGrayDarker = #16202B
+$uiGrayDarkest = #151A1F
+
 // Interface UI Colors
 $defaultColor = #94A8B3
 $hoverColor = #ffffff
 $activeColor = #40D9B8
 $uiBorderColor = #436270
 $uiBorderColorDark = #3C5D80
-$darkUiColor = #16202B
 $primaryBackgroundColor = #000000
 $boxBackgroundColor = #3E5975
 $boxBackgroundColorDark = #22374D
 
-// Common pallete
-$uiSkyBlue = #6FBDE2
-$uiGrayDark = #263340
-$uiGrayDarker = #16202B
-$uiGrayDarkest = #151A1F
-
 // Text Colors
 $textPrimaryColor = #ffffff
 $textSecondaryColor = #91B9CD
 
 // Other Colors
-$errorColor = #E29E4A
 $menuBackgroundColor = #F2F2F2
 
 // Sizes