Remove 'ens-' prefix from colour variable names (#153)

src/ensembl/src/content/app/browser/Browser.scss

@@ -26,7 +26,7 @@
 }
 
 .browserOverlay {
-  background: $ens-white;
+  background: $white;
   height: 100%;
   opacity: 0.7;
   position: absolute;
@@ -45,7 +45,7 @@
 }
 
 .objectType {
-  color: $ens-grey;
+  color: $grey;
   margin-right: 15px;
   width: 60px;
   text-align: right;
@@ -53,5 +53,5 @@
 }
 
 .objectLabel {
-  color: $ens-blue;
+  color: $blue;
 }

src/ensembl/src/content/app/browser/browser-bar/BrowserBar.scss

@@ -2,8 +2,8 @@
 
 .browserBar {
   display: flex;
-  background: $ens-light-grey;
-  box-shadow: 0 2px 3px $ens-grey;
+  background: $light-grey;
+  box-shadow: 0 2px 3px $grey;
   height: 32px;
   padding: 6px 0 3px 0;
   position: relative;
@@ -16,7 +16,7 @@
 
   button {
     &.selected {
-      background: $ens-white;
+      background: $white;
     }
   }
 }
@@ -29,7 +29,7 @@
   width: calc(100vw - 356px);
 
   label {
-    color: $ens-dark-grey;
+    color: $dark-grey;
     font-weight: $light;
   }
 
@@ -46,7 +46,7 @@
   }
 
   &.browserInfoGreyed {
-    color: $ens-dark-grey;
+    color: $dark-grey;
   }
 
   dd {

src/ensembl/src/content/app/browser/browser-genome-selector/BrowserGenomeSelector.scss

@@ -30,10 +30,10 @@
 
 .chrCode {
   appearance: none;
-  background: $ens-dark-blue;
+  background: $dark-blue;
   border: none;
   border-radius: 0;
-  color: $ens-white;
+  color: $white;
   display: inline-block;
   font-weight: $bold;
   margin: 0 5px;
@@ -44,16 +44,16 @@
 }
 
 .chrRegion {
-  color: $ens-dark-blue;
+  color: $dark-blue;
   display: inline-block;
 }
 
 .browserGenomeSelectorDisabled {
   .chrCode {
-    background: $ens-dark-grey;
+    background: $dark-grey;
   }
 
   .chrRegion {
-    color: $ens-dark-grey;
+    color: $dark-grey;
   }
 }

src/ensembl/src/content/app/browser/browser-nav/BrowserNavBar.scss

@@ -2,7 +2,7 @@
 
 .browserNavBar {
   display: flex;
-  background: $ens-light-grey;
+  background: $light-grey;
   padding: 16px;
 
   @media #{$breakpoint-large} {

src/ensembl/src/content/app/browser/browser-reset/BrowserReset.scss

@@ -14,7 +14,7 @@
 
 .imageButtonDisabled {
   svg {
-    fill: $ens-dark-grey;
+    fill: $dark-grey;
     cursor: default;
   }
   button {

src/ensembl/src/content/app/browser/drawer/Drawer.scss

 @import 'src/styles/common';
 
 .drawer {
-  border-left: 1px solid $ens-light-grey;
+  border-left: 1px solid $light-grey;
   height: calc(100vh - 176px);
   width: calc(100vw - 397px);
 }

src/ensembl/src/content/app/browser/track-panel/track-panel-bar/TrackPanelBar.scss

 @import 'src/styles/common';
 
 .trackPanelBar {
-  background: $ens-light-grey;
-  border-left: 1px solid $ens-grey;
-  border-right: 1px solid $ens-grey;
+  background: $light-grey;
+  border-left: 1px solid $grey;
+  border-right: 1px solid $grey;
   width: 36px;
 
   &.shorter {

src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelList.scss

@@ -7,7 +7,7 @@
   overflow: auto;
   padding: 15px;
   width: 320px;
-  background: $ens-white;
+  background: $white;
 
   &.shorter {
     height: calc(100vh - 177px);
@@ -18,8 +18,8 @@
   }
 
   h4 {
-    border-bottom: 1px solid $ens-grey;
-    color: $ens-grey;
+    border-bottom: 1px solid $grey;
+    color: $grey;
     font-size: 10px;
     padding-bottom: 2px;
   }

src/ensembl/src/content/app/browser/track-panel/track-panel-list/TrackPanelListItem.scss

@@ -22,7 +22,7 @@
 
   &:hover,
   &.trackHighlighted {
-    background: $ens-light-blue;
+    background: $light-blue;
   }
 
   &.main {
@@ -41,7 +41,7 @@
     }
 
     .selectedInfo {
-      color: $ens-black;
+      color: $black;
       display: inline-block;
       font-size: 10px;
       font-weight: $normal;
@@ -65,18 +65,18 @@
     width: 11px;
 
     &.blue {
-      background: $ens-dark-blue;
-      border-color: $ens-dark-blue;
+      background: $dark-blue;
+      border-color: $dark-blue;
     }
 
     &.darkGrey {
-      background: $ens-dark-grey;
-      border-color: $ens-dark-grey;
+      background: $dark-grey;
+      border-color: $dark-grey;
     }
 
     &.grey {
-      background: $ens-grey;
-      border-color: $ens-grey;
+      background: $grey;
+      border-color: $grey;
     }
 
     &.white {

src/ensembl/src/content/app/browser/track-panel/track-panel-modal/TrackPanelModal.scss

 @import 'src/styles/common';
 
 .trackPanelModal {
-  background: $ens-white;
+  background: $white;
   font-weight: $light;
   left: 36px;
   padding: 10px 20px;
@@ -46,7 +46,7 @@
   }
 
   dt {
-    color: $ens-dark-grey;
+    color: $dark-grey;
     font-size: 12px;
   }
 

src/ensembl/src/content/app/browser/track-panel/track-panel-tabs/TrackPanelTabs.scss

@@ -11,7 +11,7 @@
 
 .trackPanelTab {
   button {
-    color: $ens-dark-blue;
+    color: $dark-blue;
   }
 }
 
@@ -23,7 +23,7 @@
 
 .trackPanelTabDisabled {
   button {
-    color: $ens-dark-grey;
+    color: $dark-grey;
     cursor: default;
   }
 }
@@ -31,9 +31,9 @@
   position: relative;
 
   &::after {
-    border: 6px solid $ens-grey;
-    border-color: transparent transparent $ens-light-grey $ens-light-grey;
-    box-shadow: -2px 2px 2px 0 $ens-grey;
+    border: 6px solid $grey;
+    border-color: transparent transparent $light-grey $light-grey;
+    box-shadow: -2px 2px 2px 0 $grey;
     box-sizing: border-box;
     content: '';
     height: 0;

src/ensembl/src/content/app/browser/zmenu/Zmenu.scss

 @import 'src/styles/common';
 
-$zmenuBackgroundColor: $ens-black;
+$zmenuBackgroundColor: $black;
 
 .zmenuWrapper {
   position: absolute;
-  filter: drop-shadow(2px 2px 3px $ens-shadow-color);
+  filter: drop-shadow(2px 2px 3px $shadow-color);
 }
 
 .zmenu {
@@ -13,7 +13,7 @@ $zmenuBackgroundColor: $ens-black;
   flex-direction: column;
   justify-content: center;
   padding: 12px 20px;
-  color: $ens-white;
+  color: $white;
   background-color: $zmenuBackgroundColor;
   min-height: 40px;
   font-size: 13px;
@@ -58,5 +58,5 @@ $zmenuBackgroundColor: $ens-black;
 
 .markupFocus {
   cursor: pointer;
-  color: $ens-blue;
+  color: $blue;
 }

src/ensembl/src/content/app/custom-download/components/checkbox-grid/CheckboxGrid.scss

@@ -7,7 +7,7 @@
 }
 
 .checkboxGridTitle {
-  color: $ens-grey;
+  color: $grey;
   margin-bottom: 10px;
   padding-left: 20px;
 }

src/ensembl/src/content/app/custom-download/components/content-builder/ContentBuilder.scss

@@ -12,7 +12,7 @@
 
 .accordion {
   border: none;
-  border-top: 2px solid $ens-medium-light-grey;
+  border-top: 2px solid $medium-light-grey;
 }
 
 .accordionButton {

src/ensembl/src/content/app/custom-download/components/paste-or-upload/PasteOrUpload.scss

@@ -2,7 +2,7 @@
 
 .pasteText,
 .uploadText {
-  color: $ens-blue;
+  color: $blue;
   cursor: pointer;
 }
 

src/ensembl/src/content/app/custom-download/containers/content/attributes-accordion/AttributesAccordion.scss

@@ -4,11 +4,11 @@
   padding-right: 15px;
   max-height: calc(100vh - 135px);
   overflow-y: auto;
-  background-color: $ens-white;
+  background-color: $white;
 }
 .dataSelectorHint {
   padding: 10px 40px 10px 15px;
-  color: $ens-dark-grey;
+  color: $dark-grey;
   position: relative;
 }
 
@@ -17,14 +17,14 @@
 }
 
 .permanentBlock {
-  background: $ens-light-grey;
+  background: $light-grey;
 }
 
 .accordionExpandedTitle {
-  color: $ens-dark-grey;
+  color: $dark-grey;
 
   > span {
-    color: $ens-black;
+    color: $black;
     font-weight: 700;
   }
 }

src/ensembl/src/content/app/custom-download/containers/content/attributes-accordion/sections/orthologues/Orthologues.scss

@@ -14,35 +14,35 @@
   }
 
   input::placeholder {
-    color: $ens-medium-light-grey;
+    color: $medium-light-grey;
   }
 
   label {
     margin-right: 15px;
-    color: $ens-dark-grey;
+    color: $dark-grey;
   }
 
   .resultCounter {
     margin-left: 20px;
     span:first-of-type {
       font-weight: $bold;
-      color: $ens-black;
+      color: $black;
     }
 
     span:nth-of-type(2) {
-      color: $ens-medium-dark-grey;
+      color: $medium-dark-grey;
     }
 
     span:last-of-type {
       font-size: 12px;
       padding-left: 2px;
-      color: $ens-medium-dark-grey;
+      color: $medium-dark-grey;
     }
   }
 
   .bestMatchesFilter,
   .showAllFilter {
-    color: $ens-blue;
+    color: $blue;
     cursor: pointer;
     margin-left: 20px;
   }
@@ -54,5 +54,5 @@
 
 .speciesAttributesSectionTitle {
   margin: 20px 0 15px 30px;
-  color: $ens-dark-grey;
+  color: $dark-grey;
 }

src/ensembl/src/content/app/custom-download/containers/content/filter-accordion/FiltersAccordion.scss

@@ -7,7 +7,7 @@
 }
 .filterHint {
   padding: 10px 40px 10px 15px;
-  color: $ens-dark-grey;
+  color: $dark-grey;
   position: relative;
 }
 
@@ -16,10 +16,10 @@
 }
 
 .accordionExpandedTitle {
-  color: $ens-grey;
+  color: $grey;
 
   > span {
-    color: $ens-black;
+    color: $black;
   }
 }
 

src/ensembl/src/content/app/custom-download/containers/content/preview-download/PreviewDownload.scss

@@ -20,8 +20,8 @@
 .previewDownloadHeader {
   border-collapse: collapse;
   min-width: 50%;
-  border-bottom: 2px solid $ens-grey;
-  color: $ens-grey;
+  border-bottom: 2px solid $grey;
+  color: $grey;
 
   td {
     padding: 8px 0 8px 8px;
@@ -37,7 +37,7 @@
 }
 
 .changeLink {
-  color: $ens-blue;
+  color: $blue;
   cursor: pointer;
   margin-top: 20px;
 }

src/ensembl/src/content/app/custom-download/containers/content/result-holder/ResultHolder.scss

@@ -11,9 +11,9 @@
 
 .resultCard {
   min-height: 75px;
-  border: 1px solid $ens-grey;
+  border: 1px solid $grey;
   padding: 15px 5px;
-  background: $ens-white;
+  background: $white;
   margin-bottom: 5px;
   position: relative;
   display: block;
@@ -24,7 +24,7 @@
     clear: both;
     .lineHeader {
       text-align: right;
-      color: $ens-dark-grey;
+      color: $dark-grey;
       width: 25%;
       max-width: 200px;
       text-overflow: ellipsis;
@@ -33,7 +33,7 @@
     }
 
     .lineValue {
-      color: $ens-black;
+      color: $black;
       width: 75%;
       display: inline-block;
       padding-left: 5px;