@gitlab/ui 101.9.0 → 101.11.0

package/dist/tokens/build/js/tokens.dark.js

@@ -650,7 +650,7 @@ const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#3a383f';
 const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#3a383f';
 const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_HOVER = '#4c4b51';
 const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_DEFAULT = '#28272d';
-const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#4c4b51';
+const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#3a383f';
 const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d';
 const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent';
 const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d';

package/dist/tokens/build/js/tokens.js

@@ -650,7 +650,7 @@ const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#dcdcde';
 const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#dcdcde';
 const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_HOVER = '#bfbfc3';
 const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_DEFAULT = '#ececef';
-const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#bfbfc3';
+const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#dcdcde';
 const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d';
 const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent';
 const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d';

package/dist/tokens/css/tokens.css

@@ -675,7 +675,7 @@
   --gl-filtered-search-token-data-background-color-default: var(--gl-color-neutral-100); /* Used for the filtered search data background color in the default state. */
   --gl-filtered-search-token-data-background-color-hover: var(--gl-color-neutral-200); /* Used for the filtered search data token background color in the hover state. */
   --gl-filtered-search-token-operator-background-color-default: var(--gl-color-neutral-50); /* Used for the filtered search operator background color in the default state. */
-  --gl-filtered-search-token-operator-background-color-hover: var(--gl-color-neutral-200); /* Used for the filtered search operator token background color in the hover state. */
+  --gl-filtered-search-token-operator-background-color-hover: var(--gl-color-neutral-100); /* Used for the filtered search operator token background color in the hover state. */
   --gl-label-light-text-color: var(--gl-color-neutral-950); /* Used for the label text color on a light background color. */
   --gl-label-light-button-background-color-default: var(--gl-color-alpha-0); /* Used for the label remove button background on a light background color in the default state. */
   --gl-label-light-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the label remove button background on a light background color in the hover state. */

package/dist/tokens/css/tokens.dark.css

@@ -675,7 +675,7 @@
   --gl-filtered-search-token-data-background-color-default: var(--gl-color-neutral-800); /* Used for the filtered search data background color in the default state. */
   --gl-filtered-search-token-data-background-color-hover: var(--gl-color-neutral-700); /* Used for the filtered search data token background color in the hover state. */
   --gl-filtered-search-token-operator-background-color-default: var(--gl-color-neutral-900); /* Used for the filtered search operator background color in the default state. */
-  --gl-filtered-search-token-operator-background-color-hover: var(--gl-color-neutral-700); /* Used for the filtered search operator token background color in the hover state. */
+  --gl-filtered-search-token-operator-background-color-hover: var(--gl-color-neutral-800); /* Used for the filtered search operator token background color in the hover state. */
   --gl-label-light-text-color: var(--gl-color-neutral-950); /* Used for the label text color on a light background color. */
   --gl-label-light-button-background-color-default: var(--gl-color-alpha-0); /* Used for the label remove button background on a light background color in the default state. */
   --gl-label-light-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the label remove button background on a light background color in the hover state. */

package/dist/tokens/js/tokens.dark.js

@@ -650,7 +650,7 @@ export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#3a383f';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#3a383f';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_HOVER = '#4c4b51';
 export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_DEFAULT = '#28272d';
-export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#4c4b51';
+export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#3a383f';
 export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d';
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent';
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d';

package/dist/tokens/js/tokens.js

@@ -650,7 +650,7 @@ export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#dcdcde';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#dcdcde';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_HOVER = '#bfbfc3';
 export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_DEFAULT = '#ececef';
-export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#bfbfc3';
+export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#dcdcde';
 export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d';
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent';
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d';

package/dist/tokens/json/tokens.dark.json

@@ -14363,15 +14363,15 @@
               ]
             },
             "hover": {
-              "$value": "#4c4b51",
+              "$value": "#3a383f",
               "$type": "color",
               "$description": "Used for the filtered search operator token background color in the hover state.",
               "filePath": "src/tokens/contextual/filtered-search.tokens.json",
               "isSource": true,
               "original": {
                 "$value": {
-                  "default": "{color.neutral.200}",
-                  "dark": "{color.neutral.700}"
+                  "default": "{color.neutral.100}",
+                  "dark": "{color.neutral.800}"
                 },
                 "$type": "color",
                 "$description": "Used for the filtered search operator token background color in the hover state."

package/dist/tokens/json/tokens.json

@@ -14363,15 +14363,15 @@
               ]
             },
             "hover": {
-              "$value": "#bfbfc3",
+              "$value": "#dcdcde",
               "$type": "color",
               "$description": "Used for the filtered search operator token background color in the hover state.",
               "filePath": "src/tokens/contextual/filtered-search.tokens.json",
               "isSource": true,
               "original": {
                 "$value": {
-                  "default": "{color.neutral.200}",
-                  "dark": "{color.neutral.700}"
+                  "default": "{color.neutral.100}",
+                  "dark": "{color.neutral.800}"
                 },
                 "$type": "color",
                 "$description": "Used for the filtered search operator token background color in the hover state."

package/dist/tokens/scss/_tokens.dark.scss

@@ -673,7 +673,7 @@ $gl-filtered-search-token-type-background-color-hover: $gl-color-neutral-800; //
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-800; // Used for the filtered search data background color in the default state.
 $gl-filtered-search-token-data-background-color-hover: $gl-color-neutral-700; // Used for the filtered search data token background color in the hover state.
 $gl-filtered-search-token-operator-background-color-default: $gl-color-neutral-900; // Used for the filtered search operator background color in the default state.
-$gl-filtered-search-token-operator-background-color-hover: $gl-color-neutral-700; // Used for the filtered search operator token background color in the hover state.
+$gl-filtered-search-token-operator-background-color-hover: $gl-color-neutral-800; // Used for the filtered search operator token background color in the hover state.
 $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
 $gl-label-light-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a light background color in the default state.
 $gl-label-light-button-background-color-hover: $gl-color-neutral-950; // Used for the label remove button background on a light background color in the hover state.

package/dist/tokens/scss/_tokens.scss

@@ -673,7 +673,7 @@ $gl-filtered-search-token-type-background-color-hover: $gl-color-neutral-100; //
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-100; // Used for the filtered search data background color in the default state.
 $gl-filtered-search-token-data-background-color-hover: $gl-color-neutral-200; // Used for the filtered search data token background color in the hover state.
 $gl-filtered-search-token-operator-background-color-default: $gl-color-neutral-50; // Used for the filtered search operator background color in the default state.
-$gl-filtered-search-token-operator-background-color-hover: $gl-color-neutral-200; // Used for the filtered search operator token background color in the hover state.
+$gl-filtered-search-token-operator-background-color-hover: $gl-color-neutral-100; // Used for the filtered search operator token background color in the hover state.
 $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
 $gl-label-light-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a light background color in the default state.
 $gl-label-light-button-background-color-hover: $gl-color-neutral-950; // Used for the label remove button background on a light background color in the hover state.

package/dist/vendor/bootstrap-vue/src/components/link/link.js

@@ -1,13 +1,11 @@
 import { extend } from '../../vue';
 import { NAME_LINK } from '../../constants/components';
 import { EVENT_NAME_CLICK } from '../../constants/events';
-import { PROP_TYPE_STRING, PROP_TYPE_BOOLEAN, PROP_TYPE_ARRAY_STRING, PROP_TYPE_OBJECT_STRING } from '../../constants/props';
 import { concat } from '../../utils/array';
 import { isTag, attemptFocus, attemptBlur } from '../../utils/dom';
 import { getRootEventName, stopEvent } from '../../utils/events';
 import { isBoolean, isUndefined, isEvent, isFunction } from '../../utils/inspect';
-import { sortKeys, omit } from '../../utils/object';
-import { makeProp, makePropsConfigurable, pluckProps } from '../../utils/props';
+import { pluckProps } from '../../utils/props';
 import { computeTag, isRouterLink, computeRel, computeHref } from '../../utils/router';
 import { attrsMixin } from '../../mixins/attrs';
 import { listenOnRootMixin } from '../../mixins/listen-on-root';
@@ -20,49 +18,92 @@ const ROOT_EVENT_NAME_CLICKED = getRootEventName(NAME_LINK, 'clicked');
 
 // --- Props ---
 
-// `<router-link>` specific props
-const routerLinkProps = {
-  activeClass: makeProp(PROP_TYPE_STRING),
-  append: makeProp(PROP_TYPE_BOOLEAN, false),
-  event: makeProp(PROP_TYPE_ARRAY_STRING),
-  exact: makeProp(PROP_TYPE_BOOLEAN, false),
-  exactActiveClass: makeProp(PROP_TYPE_STRING),
-  exactPath: makeProp(PROP_TYPE_BOOLEAN, false),
-  exactPathActiveClass: makeProp(PROP_TYPE_STRING),
-  replace: makeProp(PROP_TYPE_BOOLEAN, false),
-  routerTag: makeProp(PROP_TYPE_STRING),
-  to: makeProp(PROP_TYPE_OBJECT_STRING)
-};
-
-// `<nuxt-link>` specific props
-const nuxtLinkProps = {
-  noPrefetch: makeProp(PROP_TYPE_BOOLEAN, false),
+const props = {
+  active: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  href: {
+    type: String,
+    default: undefined
+  },
+  // Must be `null` if no value provided
+  rel: {
+    type: String,
+    default: null
+  },
+  // To support 3rd party router links based on `<router-link>` (i.e. `g-link` for Gridsome)
+  // Default is to auto choose between `<router-link>` and `<nuxt-link>`
+  // Gridsome doesn't provide a mechanism to auto detect and has caveats
+  // such as not supporting FQDN URLs or hash only URLs
+  routerComponentName: {
+    type: String,
+    default: undefined
+  },
+  target: {
+    type: String,
+    default: '_self'
+  },
+  activeClass: {
+    type: String,
+    default: undefined
+  },
+  append: {
+    type: Boolean,
+    default: false
+  },
+  event: {
+    type: [Array, String],
+    default: undefined
+  },
+  exact: {
+    type: Boolean,
+    default: false
+  },
+  exactActiveClass: {
+    type: String,
+    default: undefined
+  },
+  exactPath: {
+    type: Boolean,
+    default: false
+  },
+  exactPathActiveClass: {
+    type: String,
+    default: undefined
+  },
+  replace: {
+    type: Boolean,
+    default: false
+  },
+  routerTag: {
+    type: String,
+    default: undefined
+  },
+  to: {
+    type: [Object, String],
+    default: undefined
+  },
+  noPrefetch: {
+    type: Boolean,
+    default: false
+  },
   // Must be `null` to fall back to the value defined in the
   // `nuxt.config.js` configuration file for `router.prefetchLinks`
   // We convert `null` to `undefined`, so that Nuxt.js will use the
   // compiled default
   // Vue treats `undefined` as default of `false` for Boolean props,
   // so we must set it as `null` here to be a true tri-state prop
-  prefetch: makeProp(PROP_TYPE_BOOLEAN, null)
+  prefetch: {
+    type: Boolean,
+    default: null
+  }
 };
 
-// All `<b-link>` props
-const props = makePropsConfigurable(sortKeys({
-  ...nuxtLinkProps,
-  ...routerLinkProps,
-  active: makeProp(PROP_TYPE_BOOLEAN, false),
-  disabled: makeProp(PROP_TYPE_BOOLEAN, false),
-  href: makeProp(PROP_TYPE_STRING),
-  // Must be `null` if no value provided
-  rel: makeProp(PROP_TYPE_STRING, null),
-  // To support 3rd party router links based on `<router-link>` (i.e. `g-link` for Gridsome)
-  // Default is to auto choose between `<router-link>` and `<nuxt-link>`
-  // Gridsome doesn't provide a mechanism to auto detect and has caveats
-  // such as not supporting FQDN URLs or hash only URLs
-  routerComponentName: makeProp(PROP_TYPE_STRING),
-  target: makeProp(PROP_TYPE_STRING, '_self')
-}), NAME_LINK);
-
 // --- Main component ---
 
 // @vue/component
@@ -86,6 +127,9 @@ const BLink = /*#__PURE__*/extend({
         routerComponentName
       }, this);
     },
+    isNuxtLink() {
+      return this.computedTag === 'nuxt-link';
+    },
     isRouterLink() {
       return isRouterLink(this.computedTag);
     },
@@ -112,16 +156,16 @@ const BLink = /*#__PURE__*/extend({
       }, this.computedTag);
     },
     computedProps() {
+      if (!this.isRouterLink) return {};
       const {
         event,
         prefetch,
         routerTag
       } = this;
-      return this.isRouterLink ? {
-        ...pluckProps(omit({
-          ...routerLinkProps,
-          ...(this.computedTag === 'nuxt-link' ? nuxtLinkProps : {})
-        }, ['event', 'prefetch', 'routerTag']), this),
+      const propsToPass = ['activeClass', 'append', 'exact', 'exactActiveClass', 'exactPath', 'exactPathActiveClass', 'replace', 'to'];
+      if (this.isNuxtLink) propsToPass.push('noPrefetch');
+      return {
+        ...pluckProps(propsToPass, this),
         // Only add these props, when actually defined
         ...(event ? {
           event
@@ -133,7 +177,7 @@ const BLink = /*#__PURE__*/extend({
         ...(routerTag ? {
           tag: routerTag
         } : {})
-      } : {};
+      };
     },
     computedAttrs() {
       const {
@@ -236,4 +280,4 @@ const BLink = /*#__PURE__*/extend({
   }
 });
 
-export { BLink, nuxtLinkProps, props, routerLinkProps };
+export { BLink, props };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "101.9.0",
+  "version": "101.11.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/charts/legend/legend.vue

@@ -197,7 +197,8 @@ export default {
           v-for="(series, key) in seriesInfo"
           :key="key"
           :class="{
-            'text-muted': disabledSeries[key],
+            'gl-text-subtle': disabledSeries[key],
+            'gl-text-strong': !disabledSeries[key],
             'gl-w-full': seriesNameIsLong(series.name),
             'hover:!gl-cursor-not-allowed':
               hasOneSeriesElement || isToggleDisabled(series.name, series.disabled),

package/src/tokens/build/css/tokens.css

@@ -675,7 +675,7 @@
   --gl-filtered-search-token-data-background-color-default: var(--gl-color-neutral-100); /* Used for the filtered search data background color in the default state. */
   --gl-filtered-search-token-data-background-color-hover: var(--gl-color-neutral-200); /* Used for the filtered search data token background color in the hover state. */
   --gl-filtered-search-token-operator-background-color-default: var(--gl-color-neutral-50); /* Used for the filtered search operator background color in the default state. */
-  --gl-filtered-search-token-operator-background-color-hover: var(--gl-color-neutral-200); /* Used for the filtered search operator token background color in the hover state. */
+  --gl-filtered-search-token-operator-background-color-hover: var(--gl-color-neutral-100); /* Used for the filtered search operator token background color in the hover state. */
   --gl-label-light-text-color: var(--gl-color-neutral-950); /* Used for the label text color on a light background color. */
   --gl-label-light-button-background-color-default: var(--gl-color-alpha-0); /* Used for the label remove button background on a light background color in the default state. */
   --gl-label-light-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the label remove button background on a light background color in the hover state. */

package/src/tokens/build/css/tokens.dark.css

@@ -675,7 +675,7 @@
   --gl-filtered-search-token-data-background-color-default: var(--gl-color-neutral-800); /* Used for the filtered search data background color in the default state. */
   --gl-filtered-search-token-data-background-color-hover: var(--gl-color-neutral-700); /* Used for the filtered search data token background color in the hover state. */
   --gl-filtered-search-token-operator-background-color-default: var(--gl-color-neutral-900); /* Used for the filtered search operator background color in the default state. */
-  --gl-filtered-search-token-operator-background-color-hover: var(--gl-color-neutral-700); /* Used for the filtered search operator token background color in the hover state. */
+  --gl-filtered-search-token-operator-background-color-hover: var(--gl-color-neutral-800); /* Used for the filtered search operator token background color in the hover state. */
   --gl-label-light-text-color: var(--gl-color-neutral-950); /* Used for the label text color on a light background color. */
   --gl-label-light-button-background-color-default: var(--gl-color-alpha-0); /* Used for the label remove button background on a light background color in the default state. */
   --gl-label-light-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the label remove button background on a light background color in the hover state. */

package/src/tokens/build/js/tokens.dark.js

@@ -650,7 +650,7 @@ export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#3a383f';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#3a383f';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_HOVER = '#4c4b51';
 export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_DEFAULT = '#28272d';
-export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#4c4b51';
+export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#3a383f';
 export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d';
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent';
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d';

package/src/tokens/build/js/tokens.js

@@ -650,7 +650,7 @@ export const GL_FILTERED_SEARCH_TOKEN_TYPE_BACKGROUND_COLOR_HOVER = '#dcdcde';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_DEFAULT = '#dcdcde';
 export const GL_FILTERED_SEARCH_TOKEN_DATA_BACKGROUND_COLOR_HOVER = '#bfbfc3';
 export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_DEFAULT = '#ececef';
-export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#bfbfc3';
+export const GL_FILTERED_SEARCH_TOKEN_OPERATOR_BACKGROUND_COLOR_HOVER = '#dcdcde';
 export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d';
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent';
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d';

package/src/tokens/build/json/tokens.dark.json

@@ -14363,15 +14363,15 @@
               ]
             },
             "hover": {
-              "$value": "#4c4b51",
+              "$value": "#3a383f",
               "$type": "color",
               "$description": "Used for the filtered search operator token background color in the hover state.",
               "filePath": "src/tokens/contextual/filtered-search.tokens.json",
               "isSource": true,
               "original": {
                 "$value": {
-                  "default": "{color.neutral.200}",
-                  "dark": "{color.neutral.700}"
+                  "default": "{color.neutral.100}",
+                  "dark": "{color.neutral.800}"
                 },
                 "$type": "color",
                 "$description": "Used for the filtered search operator token background color in the hover state."

package/src/tokens/build/json/tokens.json

@@ -14363,15 +14363,15 @@
               ]
             },
             "hover": {
-              "$value": "#bfbfc3",
+              "$value": "#dcdcde",
               "$type": "color",
               "$description": "Used for the filtered search operator token background color in the hover state.",
               "filePath": "src/tokens/contextual/filtered-search.tokens.json",
               "isSource": true,
               "original": {
                 "$value": {
-                  "default": "{color.neutral.200}",
-                  "dark": "{color.neutral.700}"
+                  "default": "{color.neutral.100}",
+                  "dark": "{color.neutral.800}"
                 },
                 "$type": "color",
                 "$description": "Used for the filtered search operator token background color in the hover state."

package/src/tokens/build/scss/_tokens.dark.scss

@@ -673,7 +673,7 @@ $gl-filtered-search-token-type-background-color-hover: $gl-color-neutral-800; //
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-800; // Used for the filtered search data background color in the default state.
 $gl-filtered-search-token-data-background-color-hover: $gl-color-neutral-700; // Used for the filtered search data token background color in the hover state.
 $gl-filtered-search-token-operator-background-color-default: $gl-color-neutral-900; // Used for the filtered search operator background color in the default state.
-$gl-filtered-search-token-operator-background-color-hover: $gl-color-neutral-700; // Used for the filtered search operator token background color in the hover state.
+$gl-filtered-search-token-operator-background-color-hover: $gl-color-neutral-800; // Used for the filtered search operator token background color in the hover state.
 $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
 $gl-label-light-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a light background color in the default state.
 $gl-label-light-button-background-color-hover: $gl-color-neutral-950; // Used for the label remove button background on a light background color in the hover state.

package/src/tokens/build/scss/_tokens.scss

@@ -673,7 +673,7 @@ $gl-filtered-search-token-type-background-color-hover: $gl-color-neutral-100; //
 $gl-filtered-search-token-data-background-color-default: $gl-color-neutral-100; // Used for the filtered search data background color in the default state.
 $gl-filtered-search-token-data-background-color-hover: $gl-color-neutral-200; // Used for the filtered search data token background color in the hover state.
 $gl-filtered-search-token-operator-background-color-default: $gl-color-neutral-50; // Used for the filtered search operator background color in the default state.
-$gl-filtered-search-token-operator-background-color-hover: $gl-color-neutral-200; // Used for the filtered search operator token background color in the hover state.
+$gl-filtered-search-token-operator-background-color-hover: $gl-color-neutral-100; // Used for the filtered search operator token background color in the hover state.
 $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
 $gl-label-light-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a light background color in the default state.
 $gl-label-light-button-background-color-hover: $gl-color-neutral-950; // Used for the label remove button background on a light background color in the hover state.

package/src/tokens/contextual/filtered-search.tokens.json

@@ -58,8 +58,8 @@
             },
             "hover": {
               "$value": {
-                "default": "{color.neutral.200}",
-                "dark": "{color.neutral.700}"
+                "default": "{color.neutral.100}",
+                "dark": "{color.neutral.800}"
               },
               "$type": "color",
               "$description": "Used for the filtered search operator token background color in the hover state."