Add classnames for highlighting cells

Author: yuriyivanenko

playbook/app/pb_kits/playbook/pb_background/_background.scss

@@ -29,6 +29,17 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
     }
   };
 
+  &.highlight {
+    background: $info_subtle;
+  }
+
+  &.no-highlight {
+    &.dark {
+      background: $card_dark;
+    }
+    background: $card_light;
+  }
+
   &.fade {
     opacity: 0;
     &.lazyloaded {

playbook/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb

@@ -61,7 +61,7 @@
       <tr>
         <% row.each do |key, value| %>
           <%= pb_rails("background", props: {
-              background_color: (params["sort"] && params["sort"].start_with?(key) ? "info_subtle" : "card_light"),
+              classname: (params["sort"] && params["sort"].start_with?(key) ? "highlight" : "no-highlight"),
               text_align: (value.is_a?(Integer) ? "right" : ""),
               tag: "td"
           }) do %>