Tweaked entity color palette for accessibility

Also converted entity colors to CSS variables for easier
instance customization.

Related to #1320

resources/assets/sass/_blocks.scss

@@ -168,11 +168,6 @@
   }
 }
 
-.bookshelf-grid-item .grid-card-content h2 a  {
-  color: $color-bookshelf;
-  fill: $color-bookshelf;
-}
-
 .book-grid-item .grid-card-footer {
   p.small {
     font-size: .8em;

resources/assets/sass/_colors.scss

@@ -44,24 +44,24 @@
  * Entity text colors
  */
 .text-bookshelf, .text-bookshelf:hover {
-  color: $color-bookshelf;
+  color: var(--color-bookshelf);
-  fill: $color-bookshelf;
+  fill: var(--color-bookshelf);
 }
 .text-book, .text-book:hover {
-  color: $color-book;
+  color: var(--color-book);
-  fill: $color-book;
+  fill: var(--color-book);
 }
 .text-page, .text-page:hover {
-  color: $color-page;
+  color: var(--color-page);
-  fill: $color-page;
+  fill: var(--color-page);
 }
 .text-page.draft, .text-page.draft:hover {
-  color: $color-page-draft;
+  color: var(--color-page-draft);
-  fill: $color-page-draft;
+  fill: var(--color-page-draft);
 }
 .text-chapter, .text-chapter:hover {
-  color: $color-chapter;
+  color: var(--color-chapter);
-  fill: $color-chapter;
+  fill: var(--color-chapter);
 }
 
 /*
@@ -71,11 +71,11 @@
   background-color: #FFFFFF;
 }
 .bg-book {
-  background-color: $color-book;
+  background-color: var(--color-book);
 }
 .bg-chapter {
-  background-color: $color-chapter;
+  background-color: var(--color-chapter);
 }
 .bg-shelf {
-  background-color: $color-bookshelf;
+  background-color: var(--color-bookshelf);
 }

resources/assets/sass/_lists.scss

@@ -232,9 +232,20 @@
 }
 .sort-box {
   margin-bottom: $-m;
-  border: 2px solid rgba($color-book, 0.6);
   padding: $-m $-xl;
-  border-radius: 4px;
+  position: relative;
+  &::before {
+    content: '';
+    border-radius: 4px;
+    opacity: 0.5;
+    border: 2px solid var(--color-book);
+    display: block;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    position: absolute;
+  }
 }
 .sort-box-options {
   display: flex;
@@ -266,12 +277,9 @@
     border: 1px solid #DDD;
     margin-top: -1px;
     min-height: 38px;
-    &.text-chapter {
+  }
-      border-left: 2px solid $color-chapter;
+  li.text-page, li.text-chapter {
-    }
+    border-left: 2px solid currentColor;
-    &.text-page {
-      border-left: 2px solid $color-page;
-    }
   }
   li:first-child {
     margin-top: $-xs;
@@ -361,8 +369,8 @@ ul.pagination {
     margin-top: 0;
   }
   .page.draft .text-page {
-    color: $color-page-draft;
+    color: var(--color-page-draft);
-    fill: $color-page-draft;
+    fill: var(--color-page-draft);
   }
   > .dropdown-container {
     display: block;

resources/assets/sass/_variables.scss

@@ -42,21 +42,21 @@ $fs-s: 12px;
 
 // Colours
 :root {
-  --color-primary: '#206ea7';
+  --color-primary: #206ea7;
-  --color-primary-light: 'rgba(32,110,167,0.15)';
+  --color-primary-light: rgba(32,110,167,0.15);
+
+  --color-page: #206ea7;
+  --color-page-draft: #7e50b1;
+  --color-chapter: #af4d0d;
+  --color-book: #077b70;
+  --color-bookshelf: #a94747;
 }
+
 $positive: #0f7d15;
 $negative: #ab0f0e;
 $info: #0288D1;
 $warning: #cf4d03;
 
-// Item Colors
-$color-bookshelf: #af5a5a;
-$color-book: #009688;
-$color-chapter: #d7804a;
-$color-page: #206ea7;
-$color-page-draft: #9A60DA;
-
 // Text colours
 $text-dark: #444;
 $text-light: #EEE;

resources/assets/sass/styles.scss

@@ -75,17 +75,17 @@ $loadingSize: 10px;
     animation-iteration-count: infinite;
     animation-timing-function: cubic-bezier(.62, .28, .23, .99);
     margin-right: 4px;
-    background-color: $color-page;
+    background-color: var(--color-page);
     animation-delay: 0.3s;
   }
   > div:first-child {
       left: -($loadingSize+$-xs);
-      background-color: $color-book;
+      background-color: var(--color-book);
       animation-delay: 0s;
   }
   > div:last-of-type {
     left: $loadingSize+$-xs;
-    background-color: $color-chapter;
+    background-color: var(--color-chapter);
     animation-delay: 0.6s;
   }
   > span {

resources/views/partials/entity-export-menu.blade.php

@@ -1,4 +1,4 @@
-<div dropdown class="dropdown-container" >
+<div dropdown class="dropdown-container" id="export-menu">
     <div dropdown-toggle class="icon-list-item"
          aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('entities.export') }}" tabindex="0">
         <span>@icon('export')</span>