Improve contrast on default CSS by darkening primary item selection c…

…olor Choices-js#924

CHANGELOG.md

@@ -11,6 +11,7 @@
 
 ### Bug Fixes (from 10.2.0)
 * Fix `[aria-*]` attributes do not match their roles [#1169](https://github.com/Choices-js/Choices/issues/1169)
+* Improve contrast on default CSS by darkening primary item selection color [#924](https://github.com/Choices-js/Choices/issues/924)
 
 ### Bug Fixes (from 11.0.0RC6)
 * Fix destroy&init of `choices.js` would lost track of data from the backing `<input>`/`<select>`

public/assets/styles/choices.css

@@ -62,7 +62,7 @@
   opacity: 1;
 }
 .choices[data-type*=select-one] .choices__button:focus {
-  box-shadow: 0 0 0 2px #00bcd4;
+  box-shadow: 0 0 0 2px #005F75;
 }
 .choices[data-type*=select-one] .choices__item[data-placeholder] .choices__button {
   display: none;
@@ -108,7 +108,7 @@
   margin-bottom: 0;
   margin-left: 8px;
   padding-left: 16px;
-  border-left: 1px solid #008fa1;
+  border-left: 1px solid #003642;
   background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
   background-size: 8px;
   width: 8px;
@@ -174,8 +174,8 @@
   font-weight: 500;
   margin-right: 3.75px;
   margin-bottom: 3.75px;
-  background-color: #00bcd4;
-  border: 1px solid #00a5bb;
+  background-color: #005F75;
+  border: 1px solid #004a5c;
   color: #fff;
   word-break: break-all;
   box-sizing: border-box;
@@ -188,8 +188,8 @@
   margin-left: 3.75px;
 }
 .choices__list--multiple .choices__item.is-highlighted {
-  background-color: #00a5bb;
-  border: 1px solid #008fa1;
+  background-color: #004a5c;
+  border: 1px solid #003642;
 }
 .is-disabled .choices__list--multiple .choices__item {
   background-color: #aaaaaa;

src/styles/choices.scss

@@ -16,7 +16,7 @@ $choices-bg-color-disabled: #eaeaea !default;
 $choices-bg-color-dropdown: #fff !default;
 $choices-text-color: #333 !default;
 $choices-keyline-color: #ddd !default;
-$choices-primary-color: #00bcd4 !default;
+$choices-primary-color: #005F75 !default;
 $choices-disabled-color: #eaeaea !default;
 $choices-highlight-color: $choices-primary-color !default;
 $choices-button-dimension: 8px !default;