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

src/ensembl/src/shared/components/clear-button/ClearButton.scss

@@ -6,7 +6,7 @@
   align-items: center;
   width: 18px;
   height: 18px;
-  border: 2px solid $ens-blue;
+  border: 2px solid $blue;
   border-radius: 50%;
   cursor: pointer;
 
@@ -18,17 +18,17 @@
   svg {
     width: 66%;
     height: 66%;
-    fill: $ens-blue;
+    fill: $blue;
   }
 }
 
 .clearButtonInverted {
-  background-color: $ens-blue;
+  background-color: $blue;
   border: none;
 
   svg {
     width: 56%;
     height: 56%;
-    fill: $ens-white;
+    fill: $white;
   }
 }

src/ensembl/src/shared/components/error-screen/ErrorScreen.scss

@@ -18,8 +18,8 @@ $generalErrorImagesTotalWidth: calc(
 }
 
 .errorLinkButton {
-  background-color: $ens-blue;
-  color: $ens-white;
+  background-color: $blue;
+  color: $white;
   font-weight: $bold;
   padding: 8px 18px;
   border-radius: 4px;

src/ensembl/src/shared/components/image-button/ImageButton.scss

@@ -18,7 +18,7 @@
 .disabled {
   cursor: not-allowed;
   svg {
-    fill: $ens-grey;
+    fill: $grey;
     opacity: 1;
   }
   &:before {
@@ -44,7 +44,7 @@
 
 .active {
   svg {
-    fill: $ens-dark-blue;
+    fill: $dark-blue;
   }
   &svg:hover {
     opacity: 0.8;
@@ -53,8 +53,8 @@
 
 .highlighted {
   svg {
-    fill: $ens-white;
-    background: $ens-dark-blue;
+    fill: $white;
+    background: $dark-blue;
   }
   &svg:hover {
     opacity: 0.8;
@@ -63,7 +63,7 @@
 
 .inactive {
   svg {
-    fill: $ens-grey;
+    fill: $grey;
   }
   &svg:hover {
     opacity: 0.8;

src/ensembl/src/shared/components/loader/Loader.scss

@@ -2,8 +2,8 @@
 
 .circleLoader {
   display: inline-block;
-  border: 3px solid $ens-light-grey;
-  border-top-color: $ens-red;
+  border: 3px solid $light-grey;
+  border-top-color: $red;
   width: 40px;
   height: 40px;
   border-radius: 100%;

src/ensembl/src/shared/components/privacy-banner/PrivacyBanner.scss

@@ -3,7 +3,7 @@
 .privacyBanner {
   position: fixed;
   bottom: 0;
-  background: $ens-black;
+  background: $black;
   color: white;
   font-size: 13px;
   line-height: 2;
@@ -13,7 +13,7 @@
   z-index: 10000;
 
   button {
-    background: $ens-blue;
+    background: $blue;
     border-radius: 2px;
     color: white;
     font-weight: $bold;
@@ -22,7 +22,7 @@
   }
 
   a {
-    color: $ens-blue;
+    color: $blue;
     font-weight: $bold;
   }
 }

src/ensembl/src/shared/components/question-button/QuestionButton.scss

@@ -7,13 +7,13 @@
   align-items: center;
   width: 18px;
   height: 18px;
-  border: 2px solid $ens-blue;
+  border: 2px solid $blue;
   border-radius: 50%;
 
   > svg {
     width: 70%;
     height: 70%;
-    fill: $ens-blue;
+    fill: $blue;
   }
 
   *[class*='tooltip'] {

src/ensembl/src/shared/components/round-button/RoundButton.scss

@@ -5,8 +5,8 @@
   padding: 6px 15px;
   min-width: 170px;
   position: relative;
-  border: 1px solid $ens-blue;
-  color: $ens-dark-blue;
+  border: 1px solid $blue;
+  color: $dark-blue;
 
   &:active,
   &:focus {
@@ -15,20 +15,20 @@
 }
 
 .active {
-  background-color: $ens-black;
-  border: 1px solid $ens-black;
-  color: $ens-white;
+  background-color: $black;
+  border: 1px solid $black;
+  color: $white;
 }
 
 .inactive {
-  background-color: $ens-blue;
-  border: 1px solid $ens-blue;
-  color: $ens-white;
+  background-color: $blue;
+  border: 1px solid $blue;
+  color: $white;
 }
 
 .disabled {
   background-color: transparent;
-  color: $ens-grey;
-  border: 1px solid $ens-grey;
+  color: $grey;
+  border: 1px solid $grey;
   cursor: default;
 }

src/ensembl/src/shared/components/search-field/SearchField.scss

 @import 'src/styles/common';
 
 .searchField {
-  border: 1px solid $ens-grey;
+  border: 1px solid $grey;
   display: inline-flex;
   padding: 0 0.6em;
 }

src/ensembl/src/shared/components/select/Select.scss

@@ -25,7 +25,7 @@ $optionsPanelLeftPadding: 14px;
   margin-left: 0.8em;
   height: 8px;
   width: 8px;
-  fill: $ens-blue;
+  fill: $blue;
 }
 
 .selectControl {
@@ -44,7 +44,7 @@ $optionsPanelLeftPadding: 14px;
   display: inline-block;
   min-width: 100%;
   padding: $optionsPanelTopPadding 0 34px 0;
-  box-shadow: 2px 2px 6px 0 $ens-grey;
+  box-shadow: 2px 2px 6px 0 $grey;
   white-space: nowrap;
   z-index: 1;
 
@@ -76,7 +76,7 @@ $optionsPanelLeftPadding: 14px;
 .scrollButtonBottom {
   position: absolute;
   left: 0;
-  background: $ens-white;
+  background: $white;
   width: 100%;
   text-align: center;
 }
@@ -97,7 +97,7 @@ $optionsPanelLeftPadding: 14px;
 }
 
 .optionsPanelHeader {
-  color: $ens-grey;
+  color: $grey;
   margin-bottom: 1em;
 }
 
@@ -114,5 +114,5 @@ $optionsPanelLeftPadding: 14px;
 }
 
 .optionHighlighted {
-  background-color: $ens-light-blue;
+  background-color: $light-blue;
 }

src/ensembl/src/shared/components/species-tab/SpeciesTab.scss

@@ -3,7 +3,7 @@
 .speciesTab {
   display: inline-block;
   padding: 6px 20px;
-  border: 1px solid $ens-blue;
+  border: 1px solid $blue;
   border-radius: 20px;
   cursor: pointer;
   overflow: hidden;
@@ -31,12 +31,12 @@
 }
 
 .speciesTabActive {
-  background-color: $ens-black;
+  background-color: $black;
   border: none;
 
   .name,
   .assembly {
-    color: $ens-white;
+    color: $white;
   }
 }
 

src/ensembl/src/shared/components/tooltip/Tooltip.scss

 @import 'src/styles/common';
 
-$fill-color: $ens-dark-grey;
+$fill-color: $dark-grey;
 
 .tooltip {
   position: absolute;
   background: $fill-color;
   padding: 6px 18px 8px;
-  box-shadow: 2px 2px 5px $ens-shadow-color;
+  box-shadow: 2px 2px 5px $shadow-color;
   width: max-content; // not supported in IE or non-webkit Edge
   cursor: default;
-  color: $ens-white;
+  color: $white;
   border-radius: 4px;
   font-size: 14px;
   z-index: 1000;
@@ -20,7 +20,7 @@ $fill-color: $ens-dark-grey;
   &[class*='left_centre'],
   &[class*='left_top'] {
     svg {
-      filter: drop-shadow(0px -3px 2px $ens-shadow-color);
+      filter: drop-shadow(0px -3px 2px $shadow-color);
     }
   }
 
@@ -28,7 +28,7 @@ $fill-color: $ens-dark-grey;
   &[class*='top_centre'],
   &[class*='top_right'] {
     svg {
-      filter: drop-shadow(0px -3px 2px $ens-shadow-color);
+      filter: drop-shadow(0px -3px 2px $shadow-color);
     }
   }
 }

src/ensembl/src/styles/_settings.scss

@@ -4,8 +4,9 @@
 $global-font-size: 14px;
 $global-lineheight: 1.5;
 $black: #17354e;
-$white: #fefefe;
-$body-background: $white;
+$white: #fff;
+$off-white: #fefefe;
+$body-background: $off-white;
 $body-font-color: $black;
 $body-font-family: Lato, 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
 $body-antialiased: true;
@@ -17,43 +18,40 @@ $global-button-cursor: auto;
 
 // Colour Palette
 // ---------
+$shadow-color: rgba(0, 0, 0, 0.4);
 
-$ens-black: #17354e;
-$ens-shadow-color: rgba(0, 0, 0, 0.4);
+$light-blue: #e5f5ff; // text highlight
+$blue: #33adff; // blue on black
+$dark-blue: #0099ff; // blue on white
 
-$ens-light-blue: #e5f5ff; // text highlight
-$ens-blue: #33adff; // blue on black
-$ens-dark-blue: #0099ff; // blue on white
+$light-grey: #f1f2f4;
+$medium-light-grey: #d4d9de;
+$grey: #b7c0c8;
+$medium-dark-grey: #9aa7b1;
+$dark-grey: #6f8190;
 
-$ens-light-grey: #f1f2f4;
-$ens-medium-light-grey: #d4d9de;
-$ens-grey: #b7c0c8;
-$ens-medium-dark-grey: #9aa7b1;
-$ens-dark-grey: #6f8190;
+$red: #d90000;
 
-$ens-red: #d90000;
+$green: #47d147;
 
-$ens-green: #47d147;
 
-$ens-white: #fff;
-
-$global-box-shadow: $ens-medium-light-grey;
+$global-box-shadow: $medium-light-grey;
 
 /* stylelint-disable */
 :export {
-  ens-black: $ens-black;
-  ens-blue: $ens-blue;
-  ens-light-blue: $ens-light-blue;
-  ens-dark-blue: $ens-dark-blue;
-  ens-red: $ens-red;
-  ens-dark-grey: $ens-dark-grey;
-  ens-medium-dark-grey: $ens-medium-dark-grey;
-  ens-grey: $ens-grey;
-  ens-medium-light-grey: $ens-medium-light-grey;
-  ens-light-grey: $ens-light-grey;
-  ens-green: $ens-green;
-  ens-white: $ens-white;
-  ens-shadow-color: $ens-shadow-color;
+  black: $black;
+  blue: $blue;
+  light-blue: $light-blue;
+  dark-blue: $dark-blue;
+  red: $red;
+  dark-grey: $dark-grey;
+  medium-dark-grey: $medium-dark-grey;
+  grey: $grey;
+  medium-light-grey: $medium-light-grey;
+  light-grey: $light-grey;
+  green: $green;
+  white: $white;
+  shadow-color: $shadow-color;
 }
 /* stylelint-enable */
 

src/ensembl/src/styles/main.scss

@@ -10,11 +10,11 @@ body,
 }
 
 a {
-  color: $ens-dark-blue;
+  color: $dark-blue;
   text-decoration: none;
 
   &.inactive {
-    color: $ens-dark-grey;
+    color: $dark-grey;
   }
 }
 

src/ensembl/stories/design-primitives/colours/Colours.stories.tsx

@@ -7,63 +7,63 @@ import variables from 'src/styles/_settings.scss';
 const colours = [
   {
     name: 'Ensembl black',
-    variableName: '$ens-black',
-    value: variables['ens-black']
+    variableName: '$black',
+    value: variables['black']
   },
   {
     name: 'Ensembl blue',
-    variableName: '$ens-blue',
-    value: variables['ens-blue']
+    variableName: '$blue',
+    value: variables['blue']
   },
   {
     name: 'Ensembl dark blue',
-    variableName: '$ens-dark-blue',
-    value: variables['ens-dark-blue']
+    variableName: '$dark-blue',
+    value: variables['dark-blue']
   },
   {
     name: 'Ensembl light blue',
-    variableName: '$ens-light-blue',
-    value: variables['ens-light-blue']
+    variableName: '$light-blue',
+    value: variables['light-blue']
   },
   {
     name: 'Ensembl red',
-    variableName: '$ens-red',
-    value: variables['ens-red']
+    variableName: '$red',
+    value: variables['red']
   },
   {
     name: 'Ensembl grey',
-    variableName: '$ens-grey',
-    value: variables['ens-grey']
+    variableName: '$grey',
+    value: variables['grey']
   },
   {
     name: 'Ensembl medium dark grey',
-    variableName: '$ens-medium-dark-grey',
-    value: variables['ens-medium-dark-grey']
+    variableName: '$medium-dark-grey',
+    value: variables['medium-dark-grey']
   },
   {
     name: 'Ensembl dark grey',
-    variableName: '$ens-dark-grey',
-    value: variables['ens-dark-grey']
+    variableName: '$dark-grey',
+    value: variables['dark-grey']
   },
   {
     name: 'Ensembl medium light grey',
-    variableName: '$ens-medium-light-grey',
-    value: variables['ens-medium-light-grey']
+    variableName: '$medium-light-grey',
+    value: variables['medium-light-grey']
   },
   {
     name: 'Ensembl light grey',
-    variableName: '$ens-light-grey',
-    value: variables['ens-light-grey']
+    variableName: '$light-grey',
+    value: variables['light-grey']
   },
   {
     name: 'Ensembl green',
-    variableName: '$ens-green',
-    value: variables['ens-green']
+    variableName: '$green',
+    value: variables['green']
   },
   {
     name: 'Ensembl white',
-    variableName: '$ens-white',
-    value: variables['ens-white']
+    variableName: '$white',
+    value: variables['white']
   }
 ];
 

src/ensembl/stories/shared-components/badged-button/BadgedButton.stories.scss

@@ -6,8 +6,8 @@
 
 .active {
   border: none;
-  background-color: $ens-dark-grey;
-  color: $ens-white;
+  background-color: $dark-grey;
+  color: $white;
 }
 
 .imageButtonWrapper {
@@ -17,5 +17,5 @@
 }
 
 .badge {
-  background-color: $ens-red;
+  background-color: $red;
 }

src/ensembl/stories/shared-components/button/Button.stories.scss

@@ -5,5 +5,5 @@
 }
 
 .lightGreyWrapper {
-  background: $ens-light-grey;
+  background: $light-grey;
 }

src/ensembl/stories/shared-components/checkbox/Checkbox.stories.scss

@@ -2,7 +2,7 @@
 
 .wrapper {
   padding: 20px;
-  background-color: $ens-light-grey;
+  background-color: $light-grey;
   width: 100%;
   height: 100%;
   position: absolute;

src/ensembl/stories/shared-components/image-button/ImageButton.stories.scss

@@ -37,7 +37,7 @@
 
   .codeContent {
     float: left;
-    background: $ens-light-grey;
+    background: $light-grey;
     padding: 10px;
     margin-top: 10px;
     height: 200px;

src/ensembl/stories/shared-components/round-button/RoundButton.stories.scss

@@ -6,6 +6,6 @@
 
 .active {
   border: none;
-  background-color: $ens-dark-grey;
-  color: $ens-white;
+  background-color: $dark-grey;
+  color: $white;
 }

src/ensembl/stories/shared-components/search-field/SearchField.stories.scss

@@ -14,6 +14,6 @@
   height: 20px;
   width: 20px;
   border-width: 1px;
-  border-color: $ens-medium-light-grey;
-  border-top-color: $ens-red;
+  border-color: $medium-light-grey;
+  border-top-color: $red;
 }