UX: Highlight var refactor (#20026)

* Add new color vars

* Select-kit > use new color vars

* update all color schemes with values for new hover/select vars

* Add variable yml names

Gemfile.lock

@@ -651,4 +651,4 @@ DEPENDENCIES
   yaml-lint
 
 BUNDLED WITH
-   2.4.1
+   2.4.4

app/assets/stylesheets/color_definitions.scss

@@ -14,6 +14,8 @@
   --danger: #{$danger};
   --success: #{$success};
   --love: #{$love};
+  --d-selected: #{$selected};
+  --d-hover: #{$hover};
 
   --always-black-rgb: 0, 0, 0;
   --primary-rgb: #{hexToRGB($primary)};
@@ -22,6 +24,7 @@
   --secondary-rgb: #{hexToRGB($secondary)};
   --header_background-rgb: #{hexToRGB($header_background)};
   --tertiary-rgb: #{hexToRGB($tertiary)};
+  --highlight-rgb: #{hexToRGB($highlight)};
 
   --primary-very-low: #{$primary-very-low};
   --primary-low: #{$primary-low};
@@ -72,6 +75,7 @@
 
   --quaternary-low: #{$quaternary-low};
 
+  --highlight-bg: #{$highlight-bg};
   --highlight-low: #{$highlight-low};
   --highlight-medium: #{$highlight-medium};
   --highlight-high: #{$highlight-high};

app/assets/stylesheets/common/base/topic-post.scss

@@ -206,7 +206,8 @@
 // add staff color
 .moderator {
   .regular > .cooked {
-    background-color: var(--highlight-low-or-medium);
+    //background-color: var(--highlight-low-or-medium);
+    background-color: var(--highlight-bg);
   }
   .clearfix > .topic-meta-data > .names {
     span.user-title {

app/assets/stylesheets/common/foundation/color_transformations.scss

@@ -60,9 +60,25 @@ $tertiary-900: dark-light-diff($tertiary, $secondary, 20%, -25%) !default;
 $quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%) !default;
 
 //highlight
-$highlight-low: dark-light-diff($highlight, $secondary, 70%, -80%) !default;
-$highlight-medium: dark-light-diff($highlight, $secondary, 50%, -55%) !default;
-$highlight-high: dark-light-diff($highlight, $secondary, -50%, -10%) !default;
+$highlight-bg: dark-light-diff($highlight, $secondary, 70%, -80%) !default;
+$highlight-low: dark-light-diff(
+  $highlight,
+  $secondary,
+  70%,
+  -80%
+) !default; //TO BE REMOVED IF POSS
+$highlight-medium: dark-light-diff(
+  $highlight,
+  $secondary,
+  50%,
+  -55%
+) !default; //TO BE REMOVED IF POSS
+$highlight-high: dark-light-diff(
+  $highlight,
+  $secondary,
+  -50%,
+  -10%
+) !default; //TO BE REMOVED IF POSS
 
 //danger
 $danger-low: dark-light-diff($danger, $secondary, 85%, -64%) !default;

app/assets/stylesheets/common/foundation/colors.scss

@@ -4,7 +4,9 @@ $tertiary: #0088cc !default;
 $quaternary: #e45735 !default;
 $header_background: #ffffff !default;
 $header_primary: #333333 !default;
-$highlight: #ffdd4a !default;
+$highlight: #ffff4d !default;
+$selected: #e9e9e9 !default;
+$hover: #f2f2f2 !default;
 $danger: #c80001 !default;
 $success: #009900 !default;
 $love: #fa6c8d !default;

app/assets/stylesheets/common/select-kit/select-kit.scss

@@ -213,15 +213,15 @@
     }
 
     &.is-highlighted {
-      background: var(--highlight-medium);
+      background: var(--d-hover);
     }
 
     &.is-selected {
-      background: var(--tertiary-low);
+      background: var(--d-selected);
     }
 
     &.is-selected.is-highlighted {
-      background: var(--highlight-medium);
+      background: var(--d-hover);
     }
 
     .discourse-tag,
@@ -245,7 +245,7 @@
     width: 100%;
 
     &:hover .select-kit-row.is-highlighted:hover {
-      background: var(--highlight-medium);
+      background: var(--d-hover);
     }
 
     .validation-message {

app/models/color_scheme.rb

@@ -12,6 +12,8 @@ class ColorScheme < ActiveRecord::Base
       "header_background" => "111111",
       "header_primary" => "dddddd",
       "highlight" => "a87137",
+      "selected" => "2c2c2c",
+      "hover" => "313131",
       "danger" => "e45735",
       "success" => "1ca551",
       "love" => "fa6c8d",
@@ -25,6 +27,8 @@ class ColorScheme < ActiveRecord::Base
       "header_background" => "333333",
       "header_primary" => "f3f3f3",
       "highlight" => "ecec70",
+      "selected" => "e6e6e6",
+      "hover" => "f0f0f0",
       "danger" => "b85e48",
       "success" => "518751",
       "love" => "fa6c8d",
@@ -38,6 +42,8 @@ class ColorScheme < ActiveRecord::Base
       "header_background" => "36393e",
       "header_primary" => "d9d9d9",
       "highlight" => "fdd459",
+      "selected" => "272727",
+      "hover" => "2F2F30",
       "danger" => "e45735",
       "success" => "fdd459",
       "love" => "fdd459",
@@ -51,6 +57,8 @@ class ColorScheme < ActiveRecord::Base
       "header_background" => "86bddb",
       "header_primary" => "203243",
       "highlight" => "86bddb",
+      "selected" => "bee0f2",
+      "hover" => "d2efff",
       "danger" => "bf3c3c",
       "success" => "70db82",
       "love" => "fc94cb",
@@ -64,6 +72,8 @@ class ColorScheme < ActiveRecord::Base
       "header_background" => "d7c9aa",
       "header_primary" => "262322",
       "highlight" => "d7c9aa",
+      "selected" => "3e2a14",
+      "hover" => "4c3319",
       "danger" => "db9584",
       "success" => "78be78",
       "love" => "8f6201",
@@ -77,6 +87,8 @@ class ColorScheme < ActiveRecord::Base
       "header_background" => "96ccbf",
       "header_primary" => "fff1e7",
       "highlight" => "f3c07f",
+      "selected" => "f5eaea",
+      "hover" => "f9f3f3",
       "danger" => "cfebdc",
       "success" => "fcb4b5",
       "love" => "f3c07f",
@@ -89,7 +101,9 @@ class ColorScheme < ActiveRecord::Base
       "quaternary" => "7e566a",
       "header_background" => "a97189",
       "header_primary" => "d9b2bb",
-      "highlight" => "6c3e63",
+      "highlight" => "bd36a3",
+      "selected" => "2a1620",
+      "hover" => "331b27",
       "danger" => "6c3e63",
       "success" => "d9b2bb",
       "love" => "d9b2bb",
@@ -103,10 +117,12 @@ class ColorScheme < ActiveRecord::Base
       "quaternary" => "3369FF",
       "header_background" => "ffffff",
       "header_primary" => "000000",
-      "highlight" => "3369FF",
+      "highlight" => "ffff00",
       "highlight-high" => "0036E6",
       "highlight-medium" => "e0e9ff",
       "highlight-low" => "e0e9ff",
+      "selected" => "E2E9FE",
+      "hover" => "F0F4FE",
       "danger" => "BB1122",
       "success" => "3d854d",
       "love" => "9D256B",
@@ -121,6 +137,8 @@ class ColorScheme < ActiveRecord::Base
       "header_background" => "000000",
       "header_primary" => "ffffff",
       "highlight" => "3369FF",
+      "selected" => "0d2569",
+      "hover" => "002382",
       "danger" => "BB1122",
       "success" => "3d854d",
       "love" => "9D256B",
@@ -158,8 +176,9 @@ class ColorScheme < ActiveRecord::Base
       "header_primary" => "f2f2f2",
       "highlight_low" => "686D55",
       "highlight_medium" => "52592B",
-      "highlight" => "52592B",
       "highlight_high" => "C0C879",
+      "selected" => "4A4463",
+      "hover" => "61597f",
       "danger_low" => "957279",
       "danger" => "ff5555",
       "success_low" => "386D50",
@@ -202,6 +221,8 @@ class ColorScheme < ActiveRecord::Base
       "highlight_medium" => "E3D0A3",
       "highlight" => "F2F481",
       "highlight_high" => "BCAA7F",
+      "selected" => "E8E6D3",
+      "hover" => "F0EBDA",
       "danger_low" => "F8D9C2",
       "danger" => "e45735",
       "success_low" => "CFE5B9",
@@ -245,6 +266,8 @@ class ColorScheme < ActiveRecord::Base
       "highlight_medium" => "464C33",
       "highlight" => "F2F481",
       "highlight_high" => "BFCA47",
+      "selected" => "143B44",
+      "hover" => "21454E",
       "danger_low" => "443836",
       "danger_medium" => "944835",
       "danger" => "e45735",

config/locales/client.en.yml

@@ -5166,6 +5166,12 @@ en:
           love:
             name: "love"
             description: "The like button's color."
+          selected:
+            name: "selected"
+            description: "The background-color of elements such as list-items when they are selected/active."
+          hover:
+            name: "hover"
+            description: "The background-color of elements such as list-items when they are hovered on or have keyboard focus."
         robots:
           title: "Override your site's robots.txt file:"
           warning: "This will permanently override any related site settings."