Change search bar colors in theme files (#53)

* change search bar colors

* 8.1.12

* update CHANGELOG

* added a missing color

* added missing search colors to readme

Co-authored-by: Maxwell Talley <matalley@microsoft.com>

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## v8.1.12
+### Changed
+- Updated `--color-search-background` to be 85% white
+- Added `--color-search-text`
+- Updated `--color-search-text-hover`
+- Updated `--color-search-text-placeholder`
+- Added `--color-search-text-placeholder-selected`
+
 ## v8.1.11
 ### Changed
 - Added global class ellipsis-left to display tree structure-type items where the

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/azure-iot-ux-fluent-css",
-  "version": "8.1.10",
+  "version": "8.1.12",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@microsoft/azure-iot-ux-fluent-css",
   "description": "Azure IoT common styles library for CSS, Colors and Themes",
-  "version": "8.1.11",
+  "version": "8.1.12",
   "license": "MIT",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

src/themes/_color.dark.css

@@ -44,10 +44,12 @@
   --color-masthead-background: #3c3c41;
   --color-masthead-foreground: #ffffff;
   --color-masthead-button-hover: #666666;
-  --color-search-background: rgba(255, 255, 255, 0.1);
+  --color-search-background: rgba(255, 255, 255, 0.85);
   --color-search-background-hover: #ffffff;
-  --color-search-text-hover: #000000;
-  --color-search-text-placeholder: #666666;
+  --color-search-text: #323130;
+  --color-search-text-hover: #605E5C;
+  --color-search-text-placeholder: #605E5C;
+  --color-search-text-placeholder-selected: #A19F9D;
 
   /* Main nav */
   --color-main-nav-background: #31373e;

src/themes/_color.light.css

@@ -44,10 +44,12 @@
   --color-masthead-background: #3c3c41;
   --color-masthead-foreground: #ffffff;
   --color-masthead-button-hover: #666666;
-  --color-search-background: rgba(255, 255, 255, 0.1);
+  --color-search-background: rgba(255, 255, 255, 0.85);
   --color-search-background-hover: #ffffff;
-  --color-search-text-hover: #000000;
-  --color-search-text-placeholder: #666666;
+  --color-search-text: #323130;
+  --color-search-text-hover: #605E5C;
+  --color-search-text-placeholder: #605E5C;
+  --color-search-text-placeholder-selected: #A19F9D;
 
   /* Main nav */
   --color-main-nav-background: #f3f2f1;

src/themes/readme.md

@@ -61,6 +61,7 @@ The files have the following structure:
   --color-search-background-hover
   --color-search-text-hover
   --color-search-text-placeholder
+  --color-search-text-placeholder-selected
 
   /* Main nav */
   --color-main-nav-background