Merge branch 'psi-filtered-vars' into 'master'

Replace some similar scss vars with palette colors

See merge request gitlab-org/gitlab!28722

app/assets/stylesheets/framework/filters.scss

@@ -96,8 +96,8 @@
   }
 
   .name {
-    background-color: $filter-name-resting-color;
-    color: $filter-name-text-color;
+    background-color: $white-normal;
+    color: $gl-text-color-secondary;
     border-radius: 2px 0 0 2px;
     margin-right: 1px;
     text-transform: capitalize;
@@ -105,7 +105,7 @@
 
   .operator {
     background-color: $white-normal;
-    color: $filter-value-text-color;
+    color: $gl-text-color;
     margin-right: 1px;
   }
 
@@ -113,7 +113,7 @@
     display: flex;
     align-items: center;
     background-color: $white-normal;
-    color: $filter-value-text-color;
+    color: $gl-text-color;
     border-radius: 0 2px 2px 0;
     margin-right: 5px;
     padding-right: 8px;
@@ -152,7 +152,7 @@
 .filtered-search-token .selected,
 .filtered-search-term .selected {
   .name {
-    background-color: $filter-name-selected-color;
+    background-color: $gray-200;
   }
 
   .operator {

app/assets/stylesheets/framework/typography.scss

@@ -86,13 +86,13 @@
     line-height: 10px;
     color: $gl-gray-700;
     vertical-align: middle;
-    background-color: $kdb-bg;
+    background-color: $gray-50;
     border-width: 1px;
     border-style: solid;
-    border-color: $gl-gray-200 $gl-gray-200 $kdb-border-bottom;
+    border-color: $gray-200 $gray-200 $gray-400;
     border-image: none;
     border-radius: 3px;
-    box-shadow: 0 -1px 0 $kdb-shadow inset;
+    box-shadow: 0 -1px 0 $gray-400 inset;
   }
 
   h1 {

app/assets/stylesheets/framework/variables.scss

@@ -485,7 +485,7 @@ $line-removed-dark: #fac5cd;
 $line-number-old: #f9d7dc;
 $line-number-new: #ddfbe6;
 $line-number-select: #fbf2da;
-$line-target-blue: #f6faff;
+$line-target-blue: $blue-50;
 $line-select-yellow: #fcf8e7;
 $line-select-yellow-dark: #f0e2bd;
 $dark-diff-match-bg: rgba(255, 255, 255, 0.3);
@@ -698,7 +698,7 @@ $logs-p-color: #333;
 */
 $input-height: 34px;
 $input-danger-bg: #f2dede;
-$input-group-addon-bg: #f7f8fa;
+$input-group-addon-bg: $gray-50;
 $gl-field-focus-shadow: rgba(0, 0, 0, 0.075);
 $gl-field-focus-shadow-error: rgba($red-500, 0.6);
 $input-short-width: 200px;
@@ -774,9 +774,6 @@ $select2-drop-shadow2: rgba(31, 37, 50, 0.317647);
 /*
 * Typography
 */
-$kdb-bg: #fcfcfc;
-$kdb-border-bottom: #bbb;
-$kdb-shadow: #bbb;
 $body-text-shadow: rgba(255, 255, 255, 0.01);
 
 /*
@@ -800,20 +797,6 @@ CI variable lists
 */
 $ci-variable-remove-button-width: calc(1em + #{2 * $gl-padding});
 
-/*
-Filtered Search
-*/
-$filter-name-resting-color: #f8f8f8;
-$filter-name-text-color: rgba(0, 0, 0, 0.55);
-$filter-value-text-color: rgba(0, 0, 0, 0.85);
-$filter-name-selected-color: #ebebeb;
-$filter-value-selected-color: #d7d7d7;
-
-/*
-Animation Functions
-*/
-$dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1);
-
 /*
 GitLab Plans
 */