Merge pull request #1771 from MohdImran001/highlight-text

Added new WCAG AA and AAA compliant text selection colors

Author: catarak

client/styles/abstracts/_variables.scss

@@ -83,6 +83,8 @@ $themes: (
     input-text-color: $dark,
     input-background-color: $lightest,
     input-secondary-background-color: $lightest,
+    input-selection-text-color: $dark,
+    input-selection-background-color: $medium-light,
     input-border-color: $middle-light,
     search-background-color: $lightest,
     search-clear-background-color: $light,
@@ -163,6 +165,8 @@ $themes: (
     input-text-color: $lightest,
     input-background-color: $dark,
     input-secondary-background-color: $medium-dark,
+    input-selection-text-color: $darkest,
+    input-selection-background-color: $lightest,
     input-border-color: $middle-dark,
     search-background-color: $lightest,
     search-clear-background-color: $medium-dark,
@@ -241,6 +245,8 @@ $themes: (
     input-text-color: $lightest,
     input-background-color: $dark,
     input-secondary-background-color: $medium-dark,
+    input-selection-text-color: $darkest,
+    input-selection-background-color: $lightest,
     input-border-color: $middle-dark,
     search-background-color: $white,
     search-clear-background-color: $medium-dark,

client/styles/base/_base.scss

@@ -44,6 +44,14 @@ textarea {
 	}
 }
 
+input::selection,
+textarea::selection {
+	@include themify() {
+		color: getThemifyVariable('input-selection-text-color');
+		background-color: getThemifyVariable('input-selection-background-color');
+	}
+}
+
 button[type="submit"],
 input[type="submit"] {
 	@include themify() {