Update info font colors

src/components/forms/input.css

@@ -8,6 +8,7 @@
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 0.625rem;
     font-weight: bold;
+    color: $text-primary;
 
     border-width: 1px;
     border-style: solid;

src/components/library-item/library-item.css

+@import "../../css/colors.css";
 @import "../../css/units.css";
 
 .library-item {
@@ -11,7 +12,7 @@
     margin: $space;
     padding: 1rem 1rem 0 1rem;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: #575e75;
+    color: $text-primary;
     background: white;
     border-width: 2px;
     border-style: solid;

src/components/sound-editor/sound-editor.css

@@ -78,7 +78,7 @@ $border-radius: 0.25rem;
 
 .effect-button {
     flex-basis: 150px;
-    color: #575e75; /* @todo discuss the multiple font colors with Carl, move to variable */
+    color: $text-primary;
 }
 
 .effect-button + .effect-button {

src/components/sprite-info/sprite-info.css

@@ -6,7 +6,7 @@
     padding: 0.75rem;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     background-color: white;
-    color: #575e75;
+    color: $text-primary;
     border-top-left-radius: $space;
     border-top-right-radius: $space;
     border-bottom: 1px solid #eaeaea;

src/components/stage-selector/stage-selector.css

@@ -11,7 +11,7 @@ $header-height: calc($stage-menu-height - 2px);
     flex-grow: 1;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     background-color: #f9f9f9;
-    color: #575e75;
+    color: $text-primary;
     border-top-left-radius: $space;
     border-top-right-radius: $space;
     border-color: #dbdbdb;
@@ -34,7 +34,7 @@ $header-height: calc($stage-menu-height - 2px);
     justify-content: center;
     height: $header-height;
     background-color: white;
-    color: #575e75;
+    color: $text-primary;
     border-top-left-radius: $space;
     border-top-right-radius: $space;
     border-bottom: 1px solid #eaeaea;
@@ -44,7 +44,7 @@ $header-height: calc($stage-menu-height - 2px);
 .header-title {
     font-size: 0.625rem;
     font-weight: bold;
-    color: #575e75;
+    color: $text-primary;
 
     /* @todo: make this a mixin for all UI text labels */
     user-select: none;
@@ -53,7 +53,7 @@ $header-height: calc($stage-menu-height - 2px);
 .count {
     padding: 0.3rem 0.75rem;
     font-size: 0.625rem;
-    color: #575e75;
+    color: $text-primary;
     background: white;
     border: 1px solid #eaeaea;
     border-radius: 0.25rem;
@@ -63,7 +63,7 @@ $header-height: calc($stage-menu-height - 2px);
 .label {
     margin: 0.75rem 0 0.25rem;
     font-size: 0.6rem;
-    color: #575e75;
+    color: $text-primary;
     user-select: none;
 }
 

src/css/colors.css

@@ -2,6 +2,8 @@ $ui-pane-border: #D9D9D9;
 $ui-pane-gray: #F9F9F9;
 $ui-background-blue: #e8edf1;
 
+$text-primary: #575e75;
+
 $motion-primary: #4C97FF;
 $motion-tertiary: #3373CC;
 $motion-transparent: rgba(76, 151, 255, 0.25);