Fix text variable names per conventions (#2317)

Make text-color SASS variable names match conventions

src/styles/annotator/bucket-bar.scss

@@ -34,7 +34,7 @@
       @include reset.reset-box-model;
       @include reset.reset-font;
       background: none;
-      color: var.$color-text-light;
+      color: var.$color-text--light;
       font-weight: bold;
       font-family: var.$sans-font-family;
       font-size: var.$annotator-bucket-bar-font-size;

src/styles/mixins/buttons.scss

@@ -93,11 +93,11 @@
 @mixin button--primary {
   @include button;
   @include button--labeled;
-  color: var.$grey-1;
+  color: var.$color-text--inverted;
   background-color: var.$grey-mid;
 
   &:hover:not([disabled]) {
-    color: var.$grey-1;
+    color: var.$color-text--inverted;
     background-color: var.$grey-6;
   }
 

src/styles/mixins/forms.scss

@@ -27,7 +27,7 @@
 
   @include focus-outline;
   @include placeholder {
-    color: var.$color-text-light;
+    color: var.$color-text--light;
   }
 }
 
@@ -47,7 +47,7 @@
 
   @include utils.border;
   border-radius: var.$border-radius;
-  color: var.$color-text-light;
+  color: var.$color-text--light;
   background-color: var.$grey-0;
   // Tighten up spacing around text in input
   line-height: 1;

src/styles/mixins/molecules.scss

@@ -77,7 +77,7 @@
  */
 @mixin quoted-text {
   border-left: 3px solid var.$color-border;
-  color: var.$color-text-light;
+  color: var.$color-text--light;
   font-style: italic;
   padding: 0 var.$layout-space;
 
@@ -154,7 +154,7 @@
     @include utils.border-right;
     flex: 1 1;
     text-align: center;
-    color: var.$color-text-light;
+    color: var.$color-text--light;
 
     &:last-of-type {
       border-right: none;
@@ -162,7 +162,7 @@
   }
 
   &__link {
-    color: var.$color-text-light;
+    color: var.$color-text--light;
   }
 
   &__icon {

src/styles/sidebar/components/annotation-header.scss

@@ -30,7 +30,7 @@
   &__timestamp-edited {
     @include utils.font--small;
     font-style: italic;
-    color: var.$color-text-light;
+    color: var.$color-text--light;
   }
 
   &__timestamp-created-link {
@@ -41,7 +41,7 @@
 
   &__highlight-icon {
     @include utils.icon--small;
-    color: var.$color-text-light;
+    color: var.$color-text--light;
     // Pull the icon down a tad for better vertical alignment with other
     // items in the same layout row
     margin-bottom: -1px;

src/styles/sidebar/components/annotation-publish-control.scss

@@ -65,6 +65,6 @@
   // dropdown arrow which reveals the  associated `Menu` when clicked
   &__menu-label {
     padding: var.$layout-space--small;
-    color: var.$color-text-inverted;
+    color: var.$color-text--inverted;
   }
 }

src/styles/sidebar/components/menu-item.scss

@@ -74,7 +74,7 @@ a.menu-item:hover {
     }
   }
   &.is-disabled {
-    color: var.$color-text-light;
+    color: var.$color-text--light;
   }
 }
 .menu-item__icon {

src/styles/sidebar/components/menu-section.scss

@@ -6,7 +6,7 @@
 }
 
 .menu-section__heading {
-  color: var.$color-text-light;
+  color: var.$color-text--light;
   line-height: 1;
   margin: 1px 1px 0;
   margin-bottom: 10px;

src/styles/sidebar/components/search-input.scss

@@ -32,7 +32,7 @@
 
   &:disabled {
     background: none;
-    color: var.$color-text-light;
+    color: var.$color-text--light;
   }
 
   // Expand the search input when focused (triggered by clicking

src/styles/sidebar/components/share-annotations-panel.scss

@@ -5,7 +5,7 @@
 @use "../../mixins/utils";
 
 .share-annotations-panel {
-  color: var.$color-text-light;
+  color: var.$color-text--light;
 
   &__intro {
     color: var.$color-text;

src/styles/sidebar/components/tag-list.scss

@@ -19,7 +19,7 @@
   &__link,
   &__text {
     text-decoration: none;
-    color: var.$color-text-light;
+    color: var.$color-text--light;
   }
 
   &__link {

src/styles/sidebar/components/version-info.scss

@@ -11,7 +11,7 @@
   }
 
   &__value {
-    color: var.$color-text-light;
+    color: var.$color-text--light;
   }
 
   @media only screen and (min-width: 20em) {

src/styles/sidebar/styled-text.scss

@@ -111,7 +111,7 @@
     @include utils.font--medium;
 
     border-left: 3px solid var.$grey-3;
-    color: var.$color-text-light;
+    color: var.$color-text--light;
     font-family: sans-serif;
     font-size: 12px;
     font-style: italic;

src/styles/util.scss

@@ -80,5 +80,5 @@
 
 // Use on elements for a de-emphasized, muted text color
 .u-color-text--muted {
-  color: var.$color-text-light;
+  color: var.$color-text--light;
 }

src/styles/variables.scss

@@ -36,9 +36,9 @@ $grey-7: #202020;
 
 // Text colors
 $color-text: $grey-7;
-$color-text-light: $grey-5;
+$color-text--light: $grey-5;
 // Text color when used on a dark background
-$color-text-inverted: $grey-1;
+$color-text--inverted: $grey-1;
 
 // Other colors
 $color-success: #00a36d;
@@ -92,10 +92,6 @@ $layout-space--medium: $layout-space;
 // This value originated from Apple's Human Interface Guidelines.
 $touch-target-size: 44px;
 
-// Z-Index Scale
-// -------------------------
-$zindex-tooltip: 20;
-
 // Other Variables
 // -------------------------
 $bucket-bar-width: 22px;