Tweaked entity color palette for accessibility

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

Related to #1320

diff --git a/resources/assets/sass/_blocks.scss b/resources/assets/sass/_blocks.scss
index 5f11c235532865e3c3325264e69e4ccf104ead61..2cb17a18db90e8f7185ffde7e52973ae1dd249b3 100644 (file)
--- a/resources/assets/sass/_blocks.scss
+++ b/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;

diff --git a/resources/assets/sass/_colors.scss b/resources/assets/sass/_colors.scss
index 65f56a38817494ebbd5a74103fe7aa2c340d291b..8623d374af4b1f63ffa4a9f8a352b26b1de6247a 100644 (file)
--- a/resources/assets/sass/_colors.scss
+++ b/resources/assets/sass/_colors.scss
@@ -44,24 +44,24 @@
  * Entity text colors
  */
 .text-bookshelf, .text-bookshelf:hover {
-  color: $color-bookshelf;
-  fill: $color-bookshelf;
+  color: var(--color-bookshelf);
+  fill: var(--color-bookshelf);
 }
 .text-book, .text-book:hover {
-  color: $color-book;
-  fill: $color-book;
+  color: var(--color-book);
+  fill: var(--color-book);
 }
 .text-page, .text-page:hover {
-  color: $color-page;
-  fill: $color-page;
+  color: var(--color-page);
+  fill: var(--color-page);
 }
 .text-page.draft, .text-page.draft:hover {
-  color: $color-page-draft;
-  fill: $color-page-draft;
+  color: var(--color-page-draft);
+  fill: var(--color-page-draft);
 }
 .text-chapter, .text-chapter:hover {
-  color: $color-chapter;
-  fill: $color-chapter;
+  color: var(--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);
 }
\ No newline at end of file

diff --git a/resources/assets/sass/_lists.scss b/resources/assets/sass/_lists.scss
index a448266f393c1f7b532f8a96ae8c6aa208a52002..7c7cc4b3589e8e3d8a4242055fc33d8d26a4301e 100644 (file)
--- a/resources/assets/sass/_lists.scss
+++ b/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;
-    }
-    &.text-page {
-      border-left: 2px solid $color-page;
-    }
+  }
+  li.text-page, li.text-chapter {
+    border-left: 2px solid currentColor;
   }
   li:first-child {
     margin-top: $-xs;
@@ -361,8 +369,8 @@ ul.pagination {
     margin-top: 0;
   }
   .page.draft .text-page {
-    color: $color-page-draft;
-    fill: $color-page-draft;
+    color: var(--color-page-draft);
+    fill: var(--color-page-draft);
   }
   > .dropdown-container {
     display: block;

diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss
index f258c65cadd7d96dce2eda2f727c5e52287eff34..2d4d3970af2d028b98f825cf2b5833395db81fb1 100644 (file)
--- a/resources/assets/sass/_variables.scss
+++ b/resources/assets/sass/_variables.scss
@@ -42,21 +42,21 @@ $fs-s: 12px;
 
 // Colours
 :root {
-  --color-primary: '#206ea7';
-  --color-primary-light: 'rgba(32,110,167,0.15)';
+  --color-primary: #206ea7;
+  --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;

diff --git a/resources/assets/sass/styles.scss b/resources/assets/sass/styles.scss
index d6f4f251b0914ca6c13305c740ea0edb37db0426..8f1fef70c9c512b0629dcef8545304d9779f3b16 100644 (file)
--- a/resources/assets/sass/styles.scss
+++ b/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 {

diff --git a/resources/views/partials/entity-export-menu.blade.php b/resources/views/partials/entity-export-menu.blade.php
index 6cf41e949806a2a521b9aff2f6f41260230d31ae..630d640bf3214fe8b44fa02801bf94b11661939c 100644 (file)
--- a/resources/views/partials/entity-export-menu.blade.php
+++ b/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>